/* ============ Maldon Skin Clinic — premium site (brand-driven) ============ */
:root{--brand:#343a67;--brand-deep:#2a2e54;--forest:#33335a;--accent-on-dark:#e0c27a;--on-brand:#ffffff;--bg:#f8f8f6;--bg-2:#eceae4;--ink:#23262A;--muted:#656986;--line:#ddd7c9;--white:#fff;--accent:#d0ac61;--display:'Majesty', Georgia, serif;--body:'Hanken Grotesk', system-ui, sans-serif;--r:18px;--maxw:1180px}
*{box-sizing:border-box}
/* Figma-style corner smoothing (squircle) on every rounded corner — the
   element's existing border-radius is preserved; only the curve profile
   changes. superellipse(1)=normal round, (2)=squircle. Progressive
   enhancement: Chrome 139+ renders it; other browsers ignore it and show
   normal rounded corners. */
*,*::before,*::after{corner-shape:superellipse(2)}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;letter-spacing:0;margin:0;-webkit-text-stroke:0.6px currentColor}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.eyebrow{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--accent)}
.muted{color:var(--muted)}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--body);font-weight:600;font-size:15.5px;
  padding:12px 24px;border-radius:8px;border:1.5px solid transparent;cursor:pointer;transition:.2s ease;white-space:nowrap}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-deep)}
.btn-ghost{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn-ghost:hover{background:var(--brand);color:#fff}
.btn-light{background:#fff;color:var(--forest)}
.spark{color:var(--accent)}
.btn-ico{display:inline-block;width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:url(preview-icon.svg) center/contain no-repeat;mask:url(preview-icon.svg) center/contain no-repeat}
.socials{display:flex;gap:8px;margin-top:16px}
.socials a{display:inline-flex;padding:5px}
.soc-ico{display:inline-block;width:22px;height:22px;background:currentColor;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.soc-ico.ig{-webkit-mask-image:url(icon-instagram.svg);mask-image:url(icon-instagram.svg)}
.soc-ico.tt{-webkit-mask-image:url(icon-tiktok.svg);mask-image:url(icon-tiktok.svg)}
.soc-ico.fb{-webkit-mask-image:url(icon-facebook.svg);mask-image:url(icon-facebook.svg)}
.soc-ico.wa{-webkit-mask-image:url(icon-whatsapp.svg);mask-image:url(icon-whatsapp.svg)}
.v-ico{display:inline-block;width:24px;height:24px;background:var(--brand);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.v-ico.v-tech{-webkit-mask-image:url(icon-tech.svg);mask-image:url(icon-tech.svg)}
.v-ico.v-care{-webkit-mask-image:url(icon-care.svg);mask-image:url(icon-care.svg)}
.v-ico.v-comfort{-webkit-mask-image:url(icon-comfort.svg);mask-image:url(icon-comfort.svg)}

/* announcement */
.topbar{background:var(--forest);color:#fff;font-size:13.5px;font-weight:500}
.topbar .wrap{display:flex;align-items:center;justify-content:center;gap:14px;min-height:46px;padding:8px 20px;text-align:center;flex-wrap:wrap}
.topbar a{color:#fff;border-bottom:1px solid rgba(255,255,255,.5);font-weight:600;white-space:nowrap}
.topbar a.topbar-link{border:0;font-weight:500;white-space:normal}
.topbar a.topbar-link b{font-weight:700}
.topbar .spark{color:var(--accent-on-dark)}
.topbar-addr{display:inline-flex;align-items:center;gap:6px;font-weight:500;white-space:nowrap;color:rgba(255,255,255,.9)}
.topbar-addr .addr-ico{display:inline-block;width:13px;height:13px;flex:none;background:currentColor;-webkit-mask:url(icon-location.svg) center/contain no-repeat;mask:url(icon-location.svg) center/contain no-repeat}

/* nav */
header.nav{position:sticky;top:0;z-index:40;background:rgba(247,250,246,.86);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:70px;gap:20px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.01em;color:var(--ink)}
.logo img{height:38px;width:auto}
.nav-mid{display:none;gap:28px}
.nav-mid a{font-weight:500;font-size:15px;color:var(--ink)}
.nav-mid a:hover{color:var(--brand)}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-scan{display:none;color:var(--brand);font-weight:600;font-size:15px;align-items:center;gap:7px}
@media(min-width:920px){.nav-mid{display:flex}.nav-scan{display:inline-flex}}
/* nav Book button: shorter, rectangular, small radius */
.nav .btn-primary{border-radius:8px;padding:10px 20px;font-size:14.5px}
/* Treatments dropdown — desktop hover */
.nav-dd{position:relative;display:inline-flex;align-items:center}
.nav-dd::after{content:'';position:absolute;left:-40px;right:-40px;top:100%;height:32px}
.nav-dd-trigger{font-family:var(--body);font-weight:500;font-size:15px;color:var(--ink);background:none;border:0;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:5px}
.nav-dd:hover .nav-dd-trigger{color:var(--brand)}
.dd-chev{transition:transform .2s}
.nav-dd:hover .dd-chev{transform:rotate(180deg)}
.nav-dd-menu{position:absolute;top:calc(100% + 24px);left:50%;transform:translateX(-50%);width:min(900px,94vw);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 30px 60px -24px rgba(0,0,0,.3);padding:32px 36px;opacity:0;visibility:hidden;transition:opacity .16s ease,visibility .16s ease;z-index:50}
.nav-dd:hover .nav-dd-menu{opacity:1;visibility:visible}
.mega-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:44px}
.mega-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:16px}
.mega-item{display:block;padding:10px 12px;border-radius:10px;margin:2px -12px}
.mega-item b{display:block;font-weight:600;font-size:15.5px;color:var(--ink)}
.mega-item span{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mega-item:hover{background:var(--bg-2)}
.mega-all{display:inline-block;margin-top:14px;font-weight:600;font-size:14.5px;color:var(--brand)}
.mega-cond{display:block;padding:11px 14px;border-radius:10px;font-size:15px;color:var(--ink);margin:1px -6px}
.mega-cond:hover{background:var(--bg-2)}
/* full-bleed feature sections */
.feature{display:grid;grid-template-columns:1fr;padding:0}
.feature-media{position:relative;min-height:320px}
.feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.feature-body{padding:48px 22px}
.feature-body h2{font-size:clamp(28px,6vw,40px);margin-top:14px}
.feature-body p{color:var(--muted);font-size:16.5px;margin:16px 0 0;max-width:34em}
@media(min-width:860px){
  .feature{grid-template-columns:1fr 1fr;align-items:stretch}
  .feature-media{min-height:580px}
  .feature-body{padding:80px clamp(44px,5vw,90px);display:flex;flex-direction:column;justify-content:center}
  .feature.rev .feature-media{order:2}
}
/* Where to find us — map section */
.maps-grid{display:grid;grid-template-columns:1fr;gap:24px}
.maps-head h2{font-size:clamp(30px,7vw,44px);margin-top:10px}
.maps-map{position:relative;min-height:300px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--bg-2)}
.maps-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.maps-addr{font-size:17px;color:var(--ink);margin:0 0 22px;line-height:1.55}
.maps-addr b{font-weight:600}
.maps-hours{display:flex;flex-direction:column;margin-bottom:26px;max-width:360px}
.maps-hours div{display:flex;justify-content:space-between;gap:20px;font-size:15px;border-bottom:1px solid var(--line);padding:9px 0}
.maps-hours span{color:var(--muted)}
.maps-hours b{font-weight:600;color:var(--ink)}
@media(min-width:860px){
  .maps-grid{grid-template-columns:1fr 1fr;grid-template-areas:"head map" "details map";column-gap:56px;align-items:start}
  .maps-head{grid-area:head}
  .maps-map{grid-area:map;align-self:stretch;min-height:440px}
  .maps-details{grid-area:details}
}
/* Treatments dropdown — mobile collapsible */
.mm-tdd{font-family:var(--body);font-weight:700;font-size:19px;color:var(--ink);background:none;border:0;cursor:pointer;padding:11px 0;display:flex;align-items:center;gap:8px;width:100%;text-align:left}
.mm-tdd .dd-chev{width:14px;height:14px;transition:transform .2s}
.mm-tdd.open .dd-chev{transform:rotate(180deg)}
.mm-tdd-items{display:none}
.mm-tdd-items.open{display:flex;flex-direction:column}
.mm-tdd-items a{display:block}

/* hero */
.hero{padding:0;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr}
.hero-media{position:relative;min-height:380px;background:var(--bg-2)}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-body{padding:40px 20px 48px}
.hero h1{font-size:clamp(40px,11vw,58px);margin:16px 0 0}
.hero h1 em{font-style:italic;color:var(--brand)}
.hero p.lead{font-size:17px;color:var(--muted);margin:18px 0 0;max-width:30em}
.hero .cta-row{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.trust div{font-size:13px;color:var(--muted);line-height:1.3}
.trust b{display:block;font-family:var(--display);font-size:22px;color:var(--ink);font-weight:600}
@media(min-width:920px){
  .hero-grid{grid-template-columns:1.05fr 1fr}
  .hero-media{min-height:600px;order:2}
  .hero-body{order:1;padding:76px 56px 76px 0;display:flex;flex-direction:column;justify-content:center}
  .hero .cta-row{flex-direction:row}
}

/* sections */
section{padding:64px 0}
.sec-head{max-width:40rem}
.sec-head h2{font-size:clamp(30px,7vw,44px);margin-top:12px}
.sec-head p{color:var(--muted);font-size:16.5px;margin:14px 0 0}

/* steps */
.steps{background:var(--bg-2)}
.step{display:grid;grid-template-columns:1fr;gap:18px;align-items:center;margin-top:40px;padding-top:40px;border-top:1px solid var(--line)}
.step:first-of-type{border-top:0;padding-top:0}
.step-media{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--bg-2)}
.step-media img{width:100%;height:100%;object-fit:cover}
.step-n{width:42px;height:42px;border-radius:12px;background:var(--brand);color:#fff;font-family:var(--display);font-weight:600;font-size:20px;display:grid;place-items:center}
.step h3{font-size:24px;margin:16px 0 8px}
.step p{color:var(--muted);margin:0;font-size:15.5px}
@media(min-width:760px){.step{grid-template-columns:1fr 1fr;gap:48px}.step:nth-child(even) .step-media{order:2}}

/* grid / cards */
.grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:40px}
@media(min-width:620px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.grid{grid-template-columns:1fr 1fr 1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.25s ease;display:flex;flex-direction:column}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(17,48,27,.4)}
.card-img{position:relative;aspect-ratio:5/4;overflow:hidden;background:var(--bg-2)}
.card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-body{padding:20px;display:flex;flex-direction:column;flex:1}
.card-body h3{font-size:21px}
.card-body p{color:var(--muted);font-size:14.5px;margin:8px 0 14px;flex:1}
.card-link{color:var(--brand);font-weight:600;font-size:14.5px}

/* before/after */
.ba-row{display:grid;grid-template-columns:1fr;gap:16px;margin-top:38px}
@media(min-width:760px){.ba-row{grid-template-columns:1fr 1fr 1fr}}
.ba{border-radius:var(--r);overflow:hidden;aspect-ratio:1/1;position:relative;background:var(--bg-2)}
.ba img{width:100%;height:100%;object-fit:cover}
.ba span{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;backdrop-filter:blur(4px)}

/* split feature (about / why us) */
.split{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.split-media{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--bg-2)}
.split-media img{width:100%;height:100%;object-fit:cover}
@media(min-width:860px){.split{grid-template-columns:1fr 1fr;gap:56px}.split.rev .split-media{order:2}}

/* values list */
.values{display:grid;grid-template-columns:1fr;gap:22px;margin-top:36px}
@media(min-width:760px){.values{grid-template-columns:repeat(3,1fr)}}
.value{display:flex;gap:14px}
.value .ic{flex:0 0 44px;height:44px;border-radius:12px;background:var(--bg-2);color:var(--brand);display:grid;place-items:center;font-size:20px}
.value h3{font-size:19px;font-family:var(--body);font-weight:700}
.value p{color:var(--muted);font-size:14.5px;margin:4px 0 0}

/* quote */
.quote{background:var(--forest);color:#fff;text-align:center}
.quote blockquote{font-family:var(--display);font-weight:500;font-size:clamp(24px,6vw,36px);line-height:1.25;max-width:20em;margin:0 auto}
.quote cite{display:block;margin-top:22px;font-style:normal;font-family:var(--body);font-size:14px;color:rgba(255,255,255,.7);letter-spacing:.04em}
.stars{color:var(--accent-on-dark);font-size:18px;letter-spacing:3px;margin-bottom:20px}

/* band */
.band{background:var(--brand);color:var(--on-brand);text-align:center}
.band .eyebrow{color:var(--on-brand)}
.band h2{font-size:clamp(34px,9vw,58px);margin:14px 0 0}
.band p{color:var(--on-brand);max-width:30em;margin:16px auto 30px;font-size:16.5px}

/* ===== Pricing / treatment menu ===== */
.menu{display:grid;grid-template-columns:1fr;gap:26px;margin-top:40px}
@media(min-width:860px){.menu{grid-template-columns:1fr 1fr;gap:26px 40px}}
.menu-cat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px}
.menu-cat h3{font-size:24px;margin:0}
.menu-cat .cat-desc{color:var(--muted);font-size:14.5px;margin:8px 0 0;line-height:1.5}
.menu-list{list-style:none;margin:18px 0 0;padding:0}
.menu-list li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.menu-list li:first-child{border-top:0}
.menu-list .m-name{font-size:15px;color:var(--ink)}
.menu-list .m-name small{display:block;color:var(--muted);font-size:13px;margin-top:3px;line-height:1.45}
.menu-list .m-price{font-weight:700;font-size:15px;color:var(--brand);text-align:right;white-space:nowrap;flex:none}

/* single-treatment pricing block (on detail pages) */
.pricing{border:1px solid var(--line);border-radius:var(--r);padding:28px;background:#fff;max-width:560px;margin-top:18px}
.pricing h3{font-size:24px;margin:0 0 6px}
.pricing .cat-desc{color:var(--muted);font-size:14.5px;margin:0 0 6px;line-height:1.5}

/* page hero (interior pages) */
.phero{background:var(--bg-2);padding:56px 0 52px;text-align:center}
.phero h1{font-size:clamp(36px,9vw,56px);margin-top:12px}
.phero p{color:var(--muted);max-width:34em;margin:16px auto 0;font-size:17px}

/* legal / policy pages */
.legal{max-width:52rem}
.legal h2{font-size:clamp(22px,4vw,28px);margin:36px 0 0;font-family:var(--body);font-weight:700}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--muted);font-size:16px;margin:14px 0 0;line-height:1.65}
.legal ul{color:var(--muted);font-size:16px;margin:14px 0 0;padding-left:22px;line-height:1.65}
.legal li{margin:8px 0}
.legal a{color:var(--brand);font-weight:600}
.legal .updated{font-size:13.5px;color:var(--muted);margin:0 0 8px;letter-spacing:.02em}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr;gap:32px;margin-top:8px}
@media(min-width:860px){.contact-grid{grid-template-columns:1fr 1fr}}
.info-row{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.info-row .ic{flex:0 0 40px;height:40px;border-radius:11px;background:var(--bg-2);color:var(--brand);display:grid;place-items:center;font-size:18px}
.info-row b{display:block;font-size:15px}
.info-row span{color:var(--muted);font-size:14.5px}
.mapbox{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);min-height:320px;background:var(--bg-2)}
.mapbox iframe{width:100%;height:100%;min-height:320px;border:0;display:block}

/* footer */
footer{background:var(--forest);color:rgba(255,255,255,.62);padding:54px 0 38px;font-size:14.5px}
footer .cols{display:grid;grid-template-columns:1fr;gap:30px}
@media(min-width:760px){footer .cols{grid-template-columns:2fr 1fr 1fr}}
footer .logo{color:#fff;margin-bottom:14px}
footer .logo img{filter:brightness(0) invert(1)}
footer a{display:block;padding:5px 0;color:rgba(255,255,255,.62)}
footer a:hover{color:#fff}
footer h4{color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px}
footer .fine{margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px;color:rgba(255,255,255,.4)}

/* sticky mobile bar */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:10px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:rgba(247,250,246,.95);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.mbar .btn{flex:1;padding:14px}
@media(min-width:920px){.mbar{display:none}}
body{padding-bottom:0}
@media(max-width:919px){body{padding-bottom:0}}

/* badge */
.badge{display:inline-block;background:var(--bg-2);color:var(--brand);font-weight:600;font-size:12.5px;letter-spacing:.04em;padding:6px 12px;border-radius:999px;margin-bottom:14px}

/* testimonials grid */
.tgrid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:38px}
@media(min-width:680px){.tgrid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.tgrid{grid-template-columns:1fr 1fr 1fr}}
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}
.tcard .st{color:var(--brand);font-size:14px;letter-spacing:2px;margin-bottom:12px}
.tcard p{margin:0;font-size:15.5px;color:var(--ink)}
.tcard cite{display:block;margin-top:14px;font-style:normal;font-weight:600;font-size:14px;color:var(--muted)}

/* blog meta */
.blog-card .card-img{aspect-ratio:16/10}
.blog-card h3{font-size:18px;line-height:1.25}

/* contact form */
.form{display:grid;gap:13px;margin-top:8px}
.form input,.form select,.form textarea{font-family:var(--body);font-size:15px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;width:100%;color:var(--ink)}
.form textarea{min-height:110px;resize:vertical}

/* hero buttons full-width on mobile (like the reference) */
.hero .cta-row .btn{width:100%}
@media(min-width:920px){.hero .cta-row .btn{width:auto}}
.logo img{height:38px;width:auto}

/* hamburger + mobile menu */
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;border:0;background:transparent;cursor:pointer;padding:0}
.hamburger span{display:block;width:20px;height:2px;background:var(--ink);margin:0 auto;transition:.2s}
@media(max-width:919px){.hamburger{display:flex}}
.mobile-menu{position:fixed;inset:0;z-index:60;background:var(--bg);padding:22px;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .26s ease;visibility:hidden}
.mobile-menu.open{transform:translateX(0);visibility:visible}
.mm-top{display:flex;align-items:center;justify-content:space-between;min-height:46px}
.mm-top img{height:32px;width:auto}
.mm-close{font-size:32px;line-height:1;background:none;border:0;cursor:pointer;color:var(--ink)}
.mobile-menu nav{display:flex;flex-direction:column;margin-top:24px;flex:1;overflow-y:auto}
.mobile-menu nav a{font-family:var(--body);font-weight:700;font-size:19px;padding:11px 0;color:var(--ink)}
.mobile-menu nav a.mm-sub{font-weight:500;font-size:16px;color:var(--muted);padding:7px 0 7px 16px}
.mobile-menu nav a.mm-scan{color:var(--accent);padding-top:18px}
.mobile-menu .mm-cta{display:flex;flex-direction:column;gap:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.mobile-menu .mm-cta .btn{width:100%}
@media(min-width:920px){.mobile-menu{display:none}}

/* ===== Treatment detail page ===== */
.crumb{font-size:13px;color:var(--muted);margin-bottom:6px}
.crumb b{color:var(--ink);font-weight:600}
.thero{padding-top:38px;padding-bottom:0}
.thero+section{padding-top:30px}
.thero h1{font-size:clamp(40px,12vw,60px);margin:12px 0 0;line-height:1.02}
.thero h1 em{font-style:italic;color:var(--accent)}
.thero .lead{font-size:18px;color:var(--muted);margin:18px 0 0;max-width:34em}
.qfacts{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:26px}
.qfacts div{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--ink)}
.qfacts .ic{display:inline-block;width:18px;height:18px;background:var(--accent);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.qfacts .ic.t-time{-webkit-mask-image:url(icon-timer.svg);mask-image:url(icon-timer.svg)}
.qfacts .ic.t-down{-webkit-mask-image:url(icon-thumb.svg);mask-image:url(icon-thumb.svg)}
.qfacts .ic.t-result{-webkit-mask-image:url(icon-heart.svg);mask-image:url(icon-heart.svg)}
.qfacts b{font-weight:700}
.tbtns{display:flex;flex-direction:column;gap:12px;margin-top:28px;max-width:430px}
.tbtns .btn{width:100%}
@media(min-width:620px){.tbtns{flex-direction:row}.tbtns .btn{width:auto}}
.tfeature{margin-top:42px;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;background:var(--bg-2)}
.tfeature img{width:100%;height:100%;object-fit:cover}
/* Desktop: hero text left, feature image right. */
@media(min-width:860px){
  .thero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
  .thero-grid .tfeature{margin-top:0;aspect-ratio:4/5}
}
/* Desktop-only divider separating the hero from the "What are X?" block. */
@media(min-width:860px){.what-sec>.wrap{border-top:1px solid var(--line);padding-top:48px}}
/* Concern tags — sit in the What-are column under the description (no
   heading), so on mobile they fall between the paragraph and At a glance. */
.why-block{margin-top:28px}
.prose p{font-size:16.5px;color:var(--muted);line-height:1.65;margin:0 0 16px;max-width:42em}
/* "Why {treatment}" tag cards — mirrors the skin-scan benefit tags: a
   two-tone icon (accent shape tinted a light brand colour) beside the tag
   title and its description. */
/* Mobile: always a single column. Desktop: column count follows the tag
   count — 2→2-col, 3→3-col, 4→2×2 (set via the why-n{n} class). A lone tag
   never renders (handled in the generator). */
.why-tags{display:grid;grid-template-columns:1fr;gap:12px;margin-top:4px;
  --why-accent:color-mix(in srgb,var(--accent) 45%,#fff);--why-ink:var(--ink)}
@media(min-width:860px){
  .why-tags.why-n2{grid-template-columns:repeat(2,1fr)}
  .why-tags.why-n3{grid-template-columns:repeat(3,1fr)}
  .why-tags.why-n4{grid-template-columns:repeat(2,1fr)}
}
.why-tag{display:flex;align-items:center;gap:15px;padding:16px 18px;background:#fff;
  border:1px solid color-mix(in srgb,var(--line) 20%,#fff);border-radius:16px}
.why-ico{flex:0 0 auto;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center}
.why-ico svg{width:100%;height:100%;display:block}
.why-text{min-width:0}
.why-label{font-size:16px;font-weight:600;color:var(--ink);line-height:1.25}
.why-desc{margin:3px 0 0;font-size:14px;line-height:1.4;color:var(--muted)}
.what-glance{display:grid;grid-template-columns:1fr;gap:32px}
/* Desktop: At-a-glance on the LEFT (compact column), the "What are X?"
   description + tags on the RIGHT. The glance stretches to the full column
   height (top level with the heading, bottom with the tags). Order is
   swapped via CSS so the mobile DOM order (description → tags → glance)
   is preserved. */
@media(min-width:860px){
  .what-glance{grid-template-columns:1fr 1.5fr;gap:48px;align-items:stretch}
  .what-glance>div:first-child{order:2}
  .what-glance>.glance{order:1}
}
.glance{border:1px solid var(--line);border-radius:var(--r);padding:28px;background:#fff;max-width:560px}
.what-glance .glance{max-width:none}
.glance h3{font-size:24px;margin:0 0 14px}
.glance .row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.glance .row:first-of-type{border-top:0}
.glance .row span{color:var(--muted);font-size:15px}
.glance .row b{font-weight:700;font-size:15.5px;text-align:right}
.journey{background:var(--bg-2)}
.jgrid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:40px}
@media(min-width:860px){.jgrid{grid-template-columns:1fr 1fr 1fr}}
.jstep{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px}
.jstep .n{width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--display);display:grid;place-items:center;font-size:18px;margin-bottom:18px}
.jstep h3{font-size:22px;margin:0 0 10px}
.jstep p{color:var(--muted);font-size:15px;margin:0}
.ba-results{display:flex;gap:16px;margin-top:40px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px}
.ba-results .bar{flex:0 0 84%;scroll-snap-align:center}
.bar{border-radius:var(--r);overflow:hidden;background:var(--bg-2)}
.bar img{width:100%;height:auto;display:block}
@media(min-width:760px){.ba-results{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;align-items:start}.ba-results .bar{flex:none}}
.bar .tag{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.5);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;padding:6px 11px;border-radius:999px;backdrop-filter:blur(4px)}
.bar .lbl{position:absolute;left:14px;bottom:12px;color:#fff;font-weight:600;font-size:15px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
/* Before/after carousel pagination — mobile only. Three "blobs": inactive
   positions are small dots, the active one (photo in view) stretches into a
   brand-coloured pill, morphing smoothly as you scroll between photos. */
.ba-dots{display:flex;gap:7px;justify-content:center;align-items:center;margin-top:16px}
.ba-dot{width:7px;height:7px;border-radius:999px;background:color-mix(in srgb,var(--accent) 26%,#fff);
  transition:width .34s cubic-bezier(0.34,1.18,0.64,1),background .34s ease}
.ba-dot.is-active{width:26px;background:var(--accent)}
@media(min-width:760px){.ba-dots{display:none}}
.scanband{background:var(--forest);color:#fff;text-align:center}
.scanband .eyebrow{color:var(--accent-on-dark)}
.scanband h2{font-size:clamp(32px,8vw,52px);margin:14px 0 0}
.scanband h2 em{font-style:italic;color:var(--accent-on-dark)}
.scanband p{color:rgba(255,255,255,.78);max-width:32em;margin:16px auto 28px;font-size:16.5px}

/* ===== Skin-scan reveal hero (recycled from the live scan intro) ===== */
.scanhero{background:var(--forest);padding:42px 0 54px;text-align:center}
.scanhero .eyebrow{display:inline-block;margin-bottom:20px;color:var(--accent-on-dark)}
.scancard{width:100%;max-width:380px;margin:0 auto;background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 30px 70px -22px rgba(0,0,0,.55);text-align:left}
.sc-pad{padding:12px}
.sc-slider{position:relative;height:42vh;max-height:380px;min-height:300px;border-radius:16px;overflow:hidden;background:var(--bg-2)}
.sc-track{display:flex;width:200%;height:100%}
.sc-slide{position:relative;width:50%;flex-shrink:0;height:100%;background:var(--bg-2)}
.sc-before,.sc-after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc-after-wrap{position:absolute;inset:0;clip-path:inset(0 100% 0 0)}
.sc-divider{position:absolute;top:0;bottom:0;left:0;width:2px;background:rgba(255,255,255,.9);box-shadow:0 0 6px rgba(0,0,0,.35)}
.sc-pill{position:absolute;bottom:12px;left:12px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:500;padding:4px 10px;border-radius:6px;backdrop-filter:blur(4px)}
.sc-dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
.sc-dots span{height:6px;width:6px;border-radius:999px;background:#d6d3ce;transition:all .3s}
.sc-dots span.on{width:16px;background:#57534e}
.sc-h{font-family:var(--display);font-size:19px;line-height:1.3;text-align:center;color:#1c1917;margin:12px 8px 0}
.sc-sub{text-align:center;font-size:13px;color:#57534e;margin:6px 12px 0;line-height:1.35}
.sc-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 0 0;padding:14px;border-radius:16px;background:var(--accent);color:#fff;font-weight:600;font-size:15px;transition:.15s}
.sc-btn:active{transform:scale(.99)}
.sc-trust{text-align:center;font-size:12px;color:#78716c;margin:12px 0 4px}
.sc-powered{border-top:1px solid rgba(0,0,0,.08);padding:10px;text-align:center;font-size:11px;color:#a8a29e}
.scanhero-alt{display:inline-block;margin-top:24px;color:rgba(255,255,255,.72);font-size:14px;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px}
.scanhero-alt:hover{color:#fff}

/* ===== Hero (clean split; animation in the rectangle) ===== */
.lhero{padding:34px 0 50px;background:var(--bg)}
.lhero-grid{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
.lhero-body{display:flex;flex-direction:column}
.lhero-body h1{font-size:clamp(44px,12.5vw,68px);line-height:1.02;margin:14px 0 0}
.lhero-body h1 em{font-style:italic;color:var(--accent)}
.lhero-body .lead{font-size:17px;color:var(--muted);margin:18px 0 0;max-width:30em}
.lhero-body .cta-row{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.lhero-body .cta-row .btn{width:100%}
.lstats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.lstats div{font-size:12.5px;color:var(--muted);line-height:1.3}
.lstats b{display:block;font-family:var(--display);font-size:22px;color:var(--ink);font-weight:600}
.lhero-media{position:relative;order:-1;margin-bottom:18px}
.lhero-rect{position:relative;aspect-ratio:3/4;border-radius:22px;overflow:hidden;background:var(--bg-2);box-shadow:0 30px 60px -28px rgba(0,0,0,.3)}
.lhero-rect .sc-track{display:flex;width:200%;height:100%}
.lhero-score{position:absolute;right:-6px;bottom:-14px;display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:11px 16px 11px 12px;box-shadow:0 20px 44px -16px rgba(0,0,0,.32)}
.lhero-score b{display:block;font-size:14px;color:var(--ink);font-weight:700}
.lhero-score a{display:block;font-size:13px;color:var(--muted)}
.lhero-score a:hover{color:var(--accent)}
.ring{position:relative;width:48px;height:48px;border-radius:50%;background:conic-gradient(var(--accent) 72%,var(--bg-2) 0);display:grid;place-items:center;flex-shrink:0}
.ring::before{content:'';position:absolute;inset:4px;border-radius:50%;background:#fff}
.ring span{position:relative;font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink)}
.face-ico{display:inline-block;width:32px;height:32px;flex-shrink:0;background:var(--accent);-webkit-mask:url(icon-face.svg) center/contain no-repeat;mask:url(icon-face.svg) center/contain no-repeat}
.reviews-cta{display:inline-block;color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-weight:500;font-size:15px}
.reviews-cta:hover{color:var(--accent)}
/* Sticky "preview this treatment" CTA — floats at the bottom, white pill with
   fully rounded corners + shadow, revealed (.show) after the hero Book button
   scrolls out of view. */
.treat-cta{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;
  display:inline-flex;align-items:center;gap:10px;max-width:calc(100vw - 28px);
  padding:13px 22px;background:#fff;color:var(--ink);border-radius:999px;text-decoration:none;
  font-weight:600;font-size:14.5px;line-height:1.1;white-space:nowrap;
  box-shadow:0 12px 32px -6px rgba(0,0,0,.24),0 2px 8px rgba(0,0,0,.08);
  opacity:0;pointer-events:none;transform:translateX(-50%) translateY(120%);
  transition:opacity .3s ease-in-out,transform .3s ease-in-out}
.treat-cta.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.treat-cta .face-ico{width:20px;height:20px}
.treat-cta span{overflow:hidden;text-overflow:ellipsis}
.treat-cta:hover{box-shadow:0 16px 38px -6px rgba(0,0,0,.28),0 3px 10px rgba(0,0,0,.1)}
.info-row .ci{display:inline-block;width:20px;height:20px;background:var(--accent);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.ci-location{-webkit-mask-image:url(icon-location.svg);mask-image:url(icon-location.svg)}
.ci-phone{-webkit-mask-image:url(icon-phone.svg);mask-image:url(icon-phone.svg)}
.ci-email{-webkit-mask-image:url(icon-email.svg);mask-image:url(icon-email.svg)}
.ci-hours{-webkit-mask-image:url(icon-hours.svg);mask-image:url(icon-hours.svg)}
.ci-whatsapp{-webkit-mask-image:url(icon-whatsapp.svg);mask-image:url(icon-whatsapp.svg)}
@media(min-width:920px){
  .lhero{padding:58px 0 78px}
  .lhero-grid{grid-template-columns:1.05fr .95fr;gap:58px}
  .lhero-media{order:0;margin-bottom:0}
  .lhero-body .cta-row{flex-direction:row}
  .lhero-body .cta-row .btn{width:auto}
  .lhero-rect{aspect-ratio:4/5}
}