/* MP photo overhaul: shared real-photo layer for standalone demo sites. */
:root{--mp-photo-bg:#f7f4ed;--mp-photo-card:#fff;--mp-photo-text:#141414;--mp-photo-muted:#5f6672;--mp-photo-line:rgba(20,20,20,.14);--mp-photo-accent:#2255ff;}
body.demo-electrician{--mp-photo-bg:#111318;--mp-photo-card:#181b22;--mp-photo-text:#fff;--mp-photo-muted:#b9bec8;--mp-photo-line:rgba(255,255,255,.1);--mp-photo-accent:#ffd400;}
body.demo-hairdresser{--mp-photo-bg:#f2e7d3;--mp-photo-card:#fcf8ef;--mp-photo-text:#33241c;--mp-photo-muted:#6a5042;--mp-photo-line:rgba(51,36,28,.18);--mp-photo-accent:#a0402a;}
body.demo-builder{--mp-photo-bg:#e9e6de;--mp-photo-card:#fff;--mp-photo-text:#11181f;--mp-photo-muted:#58616d;--mp-photo-line:rgba(20,24,29,.16);--mp-photo-accent:#f26d21;}
body.demo-physio{--mp-photo-bg:#f3efe6;--mp-photo-card:#fff;--mp-photo-text:#243135;--mp-photo-muted:#526569;--mp-photo-line:rgba(36,49,53,.14);--mp-photo-accent:#4e6350;}
body.demo-dog-groomer{--mp-photo-bg:#fff9ec;--mp-photo-card:#fffdf7;--mp-photo-text:#1e2a4a;--mp-photo-muted:#57617c;--mp-photo-line:rgba(30,42,74,.16);--mp-photo-accent:#d96c47;}
body.demo-tattooist{--mp-photo-bg:#17120f;--mp-photo-card:#241c17;--mp-photo-text:#f4ead8;--mp-photo-muted:#b6a896;--mp-photo-line:rgba(244,234,216,.13);--mp-photo-accent:#8d2020;}
body.demo-landscaper{--mp-photo-bg:#f4ecdc;--mp-photo-card:#fffaf1;--mp-photo-text:#17301f;--mp-photo-muted:#536652;--mp-photo-line:rgba(23,48,31,.15);--mp-photo-accent:#4f7a58;}
body.demo-barber{--mp-photo-bg:#ebe6d7;--mp-photo-card:#f7f1e2;--mp-photo-text:#171613;--mp-photo-muted:#5c5950;--mp-photo-line:rgba(23,22,19,.18);--mp-photo-accent:#b3873a;}
body.demo-hvac{--mp-photo-bg:#eef5f8;--mp-photo-card:#fff;--mp-photo-text:#172030;--mp-photo-muted:#526174;--mp-photo-line:rgba(23,32,48,.14);--mp-photo-accent:#1677c5;}
body.demo-beauty-brow{--mp-photo-bg:#f7e7df;--mp-photo-card:#fdf9f5;--mp-photo-text:#4d1f3b;--mp-photo-muted:#76546a;--mp-photo-line:rgba(89,34,63,.15);--mp-photo-accent:#a8763e;}

.mp-photo-section{padding:clamp(96px,10vw,132px) 0 clamp(64px,9vw,112px);scroll-margin-top:110px;background:var(--mp-photo-bg);color:var(--mp-photo-text);border-block:1px solid var(--mp-photo-line);}
.mp-photo-wrap{width:min(1180px,92vw);margin-inline:auto;}
.mp-photo-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,520px);gap:clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(28px,5vw,52px);}
.mp-photo-kicker{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;font-weight:800;color:var(--mp-photo-accent);margin:0 0 .8rem;}
.mp-photo-head h2{color:var(--mp-photo-text);font-size:clamp(2rem,4.8vw,4.1rem);line-height:1.02;margin:0;text-wrap:balance;}
.mp-photo-head p:not(.mp-photo-kicker){color:var(--mp-photo-muted);font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.7;margin:0;}
.mp-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px);}
.mp-photo-card,.mp-treatment-card{margin:0;background:var(--mp-photo-card);border:1px solid var(--mp-photo-line);overflow:hidden;box-shadow:0 18px 46px -34px rgba(0,0,0,.65);}
.mp-photo-card figcaption,.mp-treatment-card figcaption{padding:1rem 1.1rem;color:var(--mp-photo-muted);font-size:.92rem;line-height:1.45;border-top:1px solid var(--mp-photo-line);}
.mp-real-photo{display:block;width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;background:#ddd;}
.mp-photo-card .mp-real-photo{aspect-ratio:4/3;}
.mp-treatment-card{margin-top:clamp(20px,3vw,34px);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);align-items:stretch;}
.mp-treatment-image{position:relative;min-height:clamp(260px,38vw,460px);overflow:hidden;background:#222;}
.mp-treatment-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.mp-treatment-before{clip-path:inset(0 50% 0 0);filter:grayscale(.78) sepia(.24) saturate(.72) contrast(.78) brightness(.78);transform:scale(1.02);}
.mp-treatment-after{clip-path:inset(0 0 0 50%);filter:saturate(1.08) contrast(1.04) brightness(1.02);}
.mp-treatment-divider{position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgba(255,255,255,.88);box-shadow:0 0 0 1px rgba(0,0,0,.16);}
.mp-treatment-label{position:absolute;top:14px;padding:.42rem .65rem;border-radius:999px;background:rgba(0,0,0,.58);color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;backdrop-filter:blur(6px);}
.mp-treatment-label-left{left:14px}.mp-treatment-label-right{right:14px;background:var(--mp-photo-accent);color:#111;}
.mp-treatment-card figcaption{display:flex;align-items:center;font-weight:650;color:var(--mp-photo-text);border-top:0;border-left:1px solid var(--mp-photo-line);font-size:1rem;}
.mp-photo-note{margin:1rem 0 0;color:var(--mp-photo-muted);font-size:.86rem;line-height:1.55;}
.mp-photo-note a{color:var(--mp-photo-accent);font-weight:800;}

/* Make existing demo galleries accept real <img> replacements without losing their bespoke layout. */
.gal .mp-real-photo,.galcard .mp-real-photo,.gal-card .mp-real-photo,.pol .mp-real-photo,figure .mp-real-photo{display:block;width:100%;height:auto;object-fit:cover;}
.gal .mp-real-photo,.galcard .mp-real-photo,.gal-card .mp-real-photo{aspect-ratio:4/3;}
.demo-dog-groomer .gal-art{padding:0;background:transparent;}
.demo-dog-groomer .gal-art .mp-real-photo{height:100%;aspect-ratio:5/4;}
.demo-hairdresser .pol-photo .mp-real-photo{height:100%;aspect-ratio:auto;}
.demo-hairdresser .pol-photo{background:#111;}
.demo-electrician .gal .mp-real-photo{aspect-ratio:300/220;filter:saturate(.82) contrast(1.08);}
.demo-builder .galcard .mp-real-photo{aspect-ratio:400/260;filter:saturate(.9) contrast(1.03);}
.demo-physio .gal .mp-real-photo{aspect-ratio:400/260;}
.demo-hvac #work .gal figure .mp-real-photo{aspect-ratio:400/240;}
.demo-beauty-brow .gal-card .mp-real-photo{aspect-ratio:4/3;filter:saturate(.9) contrast(1.02);}
.demo-barber .gal .mp-real-photo{aspect-ratio:1/1;filter:saturate(.75) contrast(1.08);}
.demo-landscaper .pane .mp-real-photo{width:100%;height:100%;object-fit:cover;}
.demo-landscaper .pane.before .mp-real-photo{filter:grayscale(.74) sepia(.22) saturate(.72) brightness(.78);transform:scale(1.03);}
.demo-landscaper .pane.after .mp-real-photo{filter:saturate(1.08) contrast(1.04);}
.demo-landscaper .pane{background:#203225;}

@media(max-width:860px){
  .mp-photo-head,.mp-treatment-card{grid-template-columns:1fr;}
  .mp-photo-grid{grid-template-columns:1fr;}
  .mp-treatment-card figcaption{border-left:0;border-top:1px solid var(--mp-photo-line);}
}