/* ================= PRP hair restoration page (shares the laser + lip + Morpheus8 building blocks) ================= */

/* four "why PRP" cards */
.ph-why{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.ph-why{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ph-why{grid-template-columns:1fr}}
/* two price cards, centered */
.ph-prices{grid-template-columns:1fr 1fr;max-width:820px;margin-left:auto;margin-right:auto}
@media(max-width:860px){.ph-prices{grid-template-columns:1fr;max-width:400px}}
/* before & after: one side-by-side pair + one combined photo */
.ph-ba{max-width:1000px;margin-left:auto;margin-right:auto;align-items:start}
.ph-pair{display:grid;grid-template-columns:1fr 1fr;gap:4px;border-radius:18px;overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.12)}
.ph-pair figure{position:relative;margin:0}
.ph-pair img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.ph-one{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.12);background:#000;aspect-ratio:8/5}
.ph-one img{display:block;width:100%;height:100%;object-fit:contain}
.ph-pair .ba-tag,.ph-one .ba-tag{top:14px}.ph-pair .ba-tag.l,.ph-one .ba-tag.l{left:14px}.ph-pair .ba-tag.r,.ph-one .ba-tag.r{right:14px}
/* Pari watermark on the after photo and the combined photo */
.ph-pair .aft::after,.ph-one::after{content:"";position:absolute;right:8px;bottom:6px;width:60px;height:60px;background:url(../img/pari-logo.webp) center/contain no-repeat;filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.45));opacity:.75;pointer-events:none}
@media(max-width:600px){.ph-pair .ba-tag,.ph-one .ba-tag{top:10px;font-size:10px}.ph-pair .ba-tag.l,.ph-one .ba-tag.l{left:10px}.ph-pair .ba-tag.r,.ph-one .ba-tag.r{right:10px}.ph-pair .aft::after,.ph-one::after{width:44px;height:44px}}
/* scalp area cards + four-step timeline */
.lp-goals.ph-areas{grid-template-columns:repeat(5,1fr)}
@media(max-width:960px){.lp-goals.ph-areas{grid-template-columns:1fr 1fr}}
@media(min-width:861px){.ph-recov ol{grid-template-columns:repeat(4,1fr)}}
/* scalp map: dotted area rings + glowing centre dot, shown only for the selected area */
.bm-clean .fm-pt{opacity:0;transition:opacity .35s}
.bm-clean .fm-pt.on{opacity:1}
.bm-clean .bm-ring{margin:0;transform:translate(-50%,-50%);border-radius:50%;border:2.5px dotted rgba(255,255,255,.95);background:radial-gradient(closest-side,rgba(255,240,220,.22),transparent)}
.bm-clean .bm-ring.on{transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,240,220,.22),transparent);border-color:rgba(255,255,255,.95)}
.bm-clean .bm-ring::after,.bm-clean .bm-ring.on::after{display:none}
.bm-clean .bm-dot{width:10px;height:10px;margin:-5px 0 0 -5px;border:0;background:#fff;box-shadow:0 0 10px 4px rgba(255,236,200,.85)}
.bm-clean .bm-dot.on{background:#fff;transform:none}
.bm-clean .bm-dot.on::after{border-color:#fff}
/* subtler rings on the scalp photo */
.bm-clean .bm-ring,.bm-clean .bm-ring.on{border-width:1.5px;border-color:rgba(255,255,255,.7);background:radial-gradient(closest-side,rgba(255,240,220,.12),transparent)}
.bm-clean .bm-dot{width:8px;height:8px;margin:-4px 0 0 -4px;box-shadow:0 0 8px 3px rgba(255,236,200,.7)}