/* Premium V7 — exact visual alignment, standardized media and reel gallery */
:root{
  --v7-coral:#c9755d;
  --v7-coral-deep:#aa513e;
  --v7-cream:#fff9f5;
  --v7-line:#ead8cf;
  --v7-ink:#28211e;
  --v7-muted:#746861;
  --v7-shadow:0 18px 55px rgba(84,54,42,.08);
}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
img,video{max-width:100%;height:auto}
.service-v5 main{background:#fffdfa}
.service-v5 .container{width:min(1240px,calc(100% - 48px))}

/* Hero aligned to the approved wireframe */
.svc5-breadcrumb-wrap{padding:20px 0 10px;background:#fffdfa}
.svc5-hero{padding:10px 0 38px;background:linear-gradient(180deg,#fffdfa 0%,#fff8f4 100%)}
.svc5-hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,1.08fr) minmax(230px,.52fr);gap:26px;min-height:440px}
.svc5-hero-photo{aspect-ratio:4/3;min-height:0;height:auto;border:1px solid var(--v7-line);border-radius:24px;box-shadow:var(--v7-shadow)}
.svc5-hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;max-width:none}
.svc5-hero-copy{padding:30px 0}
.svc5-hero-copy h1{font-size:clamp(36px,3.2vw,50px);line-height:1.35}
.svc5-hero-copy h2{font-size:clamp(19px,1.6vw,24px);line-height:1.8}
.svc5-hero-copy p{font-size:16px;line-height:2.05}
.svc5-summary{border-radius:22px;padding:12px 16px;box-shadow:var(--v7-shadow)}
.svc5-summary article{padding:15px 2px}.svc5-summary b{font-size:14px}.svc5-summary small{font-size:12px}

/* Clean, consistent content cards */
.svc5-section{padding:68px 0}
.svc5-note-inner,.svc5-text,.svc5-media,.svc5-treatment,.svc5-quote,.svc5-info-card,.svc5-care-card,.svc5-doctor-inner,.svc5-related-card{border-color:var(--v7-line)!important;box-shadow:var(--v7-shadow)}
.svc5-intro-grid,.svc5-tech-grid{align-items:center;gap:34px}
.svc5-media,.svc5-treatment{aspect-ratio:16/9;min-height:0!important;height:auto!important;overflow:hidden;border-radius:22px;background:#eee}
.svc5-managed-media img,.svc5-managed-media video{position:absolute;inset:0;width:100%!important;height:100%!important;min-height:0!important;object-fit:cover!important;object-position:center!important;border-radius:inherit!important}
.svc5-media,.svc5-treatment{position:relative}
.svc5-text h2,.svc5-heading h2{font-size:clamp(27px,2.4vw,38px)}
.svc5-text p,.svc5-info-card p,.svc5-care-card p,.svc5-doctor-inner p,.svc5-accordion details p{font-size:15px;line-height:2.05}
.svc5-checks li{font-size:15px;line-height:2}

/* Before / after: fixed frame, no zoom or overflow */
.svc5-results{background:#fff}
.svc5-results-frame.svc6-before-after-frame{width:min(100%,860px);max-width:860px;padding:10px!important;border:1px solid var(--v7-line);border-radius:24px;background:#fff;overflow:hidden!important;box-shadow:var(--v7-shadow)}
.svc6-before-after-frame .before-after{width:100%;aspect-ratio:4/3;max-height:645px;border-radius:17px;background:#eee}
.svc6-before-after-frame .before-after-image{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:none!important;object-fit:cover!important;object-position:center 28%!important}
.before-after-divider i{width:50px;height:50px}

/* Reel gallery: portrait, real controls, no explanatory copy */
.svc6-service-reels{background:linear-gradient(180deg,#fff9f5,#fff)}
.v6-service-reels-grid{max-width:1040px;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.svc7-reel-card{position:relative;border-radius:25px;isolation:isolate;background:#171412;box-shadow:0 22px 60px rgba(64,41,32,.15);overflow:hidden}
.svc7-reel-card>video,.svc7-reel-card>.svc7-reel-media,.svc7-reel-card>img{display:block;width:100%!important;height:auto!important;aspect-ratio:9/16!important;object-fit:cover!important;object-position:center!important;background:#171412;border-radius:0!important}
.svc7-reel-overlay{position:absolute!important;right:14px!important;left:14px!important;bottom:14px!important;z-index:3!important;padding:10px 14px!important;border:1px solid rgba(255,255,255,.28)!important;border-radius:13px!important;background:linear-gradient(135deg,rgba(29,22,19,.78),rgba(29,22,19,.42))!important;backdrop-filter:blur(9px);pointer-events:none}
.svc7-reel-overlay b{font-size:14px!important;color:#fff!important;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.svc7-reel-overlay span{display:none!important}
.svc7-reel-card video::-webkit-media-controls-panel{background:linear-gradient(transparent,rgba(0,0,0,.48))}

/* Related services aligned to the approved horizontal card layout */
.svc5-related-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.svc5-related-card{border-radius:18px;transition:transform .22s ease,box-shadow .22s ease}
.svc5-related-card:hover{transform:translateY(-5px);box-shadow:0 24px 60px rgba(84,54,42,.13)}
.svc5-related-card img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:center 32%}
.svc5-related-card p{height:auto;min-height:48px}

/* Doctor and booking */
.svc5-doctor-inner{grid-template-columns:minmax(250px,360px) 1fr;border-radius:22px}
.svc5-doctor-inner img{height:auto;aspect-ratio:16/10;object-fit:cover;object-position:center 30%}
.svc5-booking-inner{border-radius:20px;background:linear-gradient(90deg,#fff6f1,#fff,#fff9f5)}
.svc5-final-inner{border-radius:18px}

/* Ensure every public media block remains inside its card */
.service-v5 figure{max-width:100%}
.service-v5 figure>img,.service-v5 figure>video{max-width:100%}
.service-v5 video{display:block;background:#161312}

@media(max-width:1050px){
  .svc5-hero-grid{grid-template-columns:1fr 1fr}.svc5-summary{grid-column:1/-1;grid-template-columns:repeat(5,1fr)}
  .svc5-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:800px){
  .service-v5 .container{width:min(100% - 30px,760px)}
  .svc5-hero-grid{display:flex}.svc5-hero-photo{order:1;width:100%;aspect-ratio:4/3;height:auto}.svc5-hero-copy{order:2}.svc5-summary{order:3}
  .svc5-section{padding:56px 0}
  .svc6-before-after-frame .before-after{aspect-ratio:4/3;max-height:none}
  .v6-service-reels-grid{display:grid;grid-template-columns:repeat(3,minmax(250px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;margin-inline:calc(50% - 50vw);padding:4px 15px 18px;max-width:none}
  .svc7-reel-card{scroll-snap-align:center}
  .svc5-doctor-inner{grid-template-columns:220px 1fr}
}
@media(max-width:600px){
  .service-v5 .container{width:calc(100% - 24px)}
  .svc5-breadcrumb-wrap{padding-top:14px}
  .svc5-hero{padding-bottom:25px}.svc5-hero-photo{aspect-ratio:1/1;border-radius:18px}.svc5-hero-photo img{object-position:center 26%}
  .svc5-hero-copy h1{font-size:32px}.svc5-hero-copy h2{font-size:19px}.svc5-hero-copy p{font-size:15px!important;line-height:2!important}
  .svc5-summary{grid-template-columns:repeat(2,1fr)}
  .svc5-section{padding:48px 0}
  .svc5-media,.svc5-treatment{aspect-ratio:4/3;border-radius:18px}
  .svc5-text h2,.svc5-heading h2{font-size:27px}.svc5-text p,.svc5-info-card p,.svc5-care-card p,.svc5-doctor-inner p,.svc5-accordion details p{font-size:15px!important}
  .svc5-checks li{font-size:15px!important}
  .svc5-results-frame.svc6-before-after-frame{padding:7px!important;border-radius:18px}.svc6-before-after-frame .before-after{aspect-ratio:1/1;border-radius:13px}.svc6-before-after-frame .before-after-image{object-position:center 24%!important}
  .before-after-label{font-size:13px}.before-after-divider i{width:44px;height:44px}
  .v6-service-reels-grid{grid-template-columns:repeat(3,minmax(78vw,1fr));gap:15px}.svc7-reel-card{border-radius:21px}.svc7-reel-overlay b{font-size:15px!important}
  .svc5-related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.svc5-related-card img{aspect-ratio:4/3}.svc5-related-card>div{padding:13px}.svc5-related-card h3{font-size:15px}.svc5-related-card p{font-size:12px;min-height:66px}.svc5-related-card a{font-size:12px}
  .svc5-doctor-inner{grid-template-columns:1fr}.svc5-doctor-inner img{aspect-ratio:16/10;height:auto}
  .v4-menu-toggle{width:46px!important;height:46px!important;min-width:46px!important;cursor:pointer!important;touch-action:manipulation!important}
  .v4-nav{width:min(90vw,390px)!important}
}
@media(max-width:390px){
  .svc5-related-grid{grid-template-columns:1fr}.v6-service-reels-grid{grid-template-columns:repeat(3,minmax(84vw,1fr))}
}
