/* A continuous photographic stage with independent editorial choreography. */
.clinic-cinema{position:relative;isolation:isolate;height:100svh;min-height:720px;overflow:hidden;background:#07110e;color:#fff;--ease-cinema:cubic-bezier(.16,1,.3,1)}
.cinema-frames,.cinema-frame,.cinema-wash,.cinema-grain{position:absolute;inset:0;width:100%;height:100%}
.cinema-frame{margin:0;opacity:0;visibility:hidden;transform:translate3d(5%,0,0) scale(.96);transition:opacity 1.6s ease,transform 2.8s var(--ease-cinema),visibility 0s 1.6s}
.cinema-frame.is-active{opacity:1;visibility:visible;transform:translate3d(0,0,0) scale(1);z-index:2;transition:opacity 1.6s ease,transform 2.8s var(--ease-cinema),visibility 0s}
.cinema-frame.was-active{opacity:0;visibility:visible;transform:translate3d(-3%,0,0) scale(.98);z-index:1}
.cinema-frame:before{content:"";position:absolute;inset:-6%;background:var(--clinic-photo) center/cover no-repeat;filter:blur(32px) brightness(.4);transform:scale(1.08)}
.intro-complete .cinema-frame.is-active:before{animation:cinema-atmosphere 9s ease-out both}
.cinema-frame img{position:absolute;right:1%;top:13%;width:69%;height:73%;object-fit:contain;object-position:center;image-orientation:from-image;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 97%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 97%,transparent)}
.intro-complete .cinema-frame.is-active img{animation:cinema-settle 7.6s var(--ease-cinema) both}
.cinema-wash{z-index:3;pointer-events:none;background:linear-gradient(90deg,#07110ee8 0%,#07110eae 24%,#07110e22 48%,transparent 64%),linear-gradient(0deg,#07110e,transparent 24%,transparent 85%,#07110e80);transition:opacity .8s}
.cinema-grain,.cinema-side-note,.cinema-scroll{display:none}
.cinema-intro-copy{position:absolute;z-index:5;left:clamp(24px,5.5vw,100px);top:45%;width:44%;transform:translateY(-42%);text-shadow:0 2px 24px #0003}
.cinema-kicker{display:flex;align-items:center;gap:10px;color:#e7d6b0;font:400 12px/1.6 'DM Sans',sans-serif;text-transform:uppercase;letter-spacing:.14em;margin:0 0 27px}
.cinema-kicker>span{width:26px;height:1px;background:#e7c981}.cinema-scene-label{font-weight:500}
.clinic-cinema h1{margin:0;font:400 clamp(42px,5.2vw,84px)/1.06 'Manrope',sans-serif;letter-spacing:-.065em;text-wrap:balance}
.cinema-line{display:block;overflow:hidden;padding-bottom:.1em}.cinema-line>span{display:block}
.cinema-line-accent{color:#e4c98d;margin-top:6px;font-size:.86em}
.cinema-summary{max-width:380px;margin:27px 0 0;color:#e5e8e3;font:400 clamp(16px,1.2vw,19px)/1.65 'DM Sans',sans-serif;text-wrap:pretty}
.cinema-chapters{position:absolute;z-index:7;left:5.5%;bottom:35px;display:flex;gap:12px;width:min(620px,59%)}
.cinema-chapters button{position:relative;flex:1;min-width:0;height:46px;padding:0;border:0;background:none;color:#aab2ac;cursor:pointer;text-align:left;font:500 12px 'DM Sans',sans-serif}
.cinema-chapters i{display:block;height:2px;margin-top:13px;background:#ffffff30;overflow:hidden}
.cinema-chapters i:after{content:"";display:block;width:100%;height:100%;background:#e4c98d;transform:scaleX(0);transform-origin:left}
.cinema-chapters .is-active{color:#e4c98d}.cinema-chapters .is-active i:after{transform:scaleX(1)}
.cinema-playing .cinema-chapters .is-active i:after{animation:cinema-progress 7.6s linear both}
.cinema-chapters button:hover{color:#fff}.cinema-chapters button:focus-visible,.cinema-next:focus-visible,.cinema-pause:focus-visible,.cinema-view:focus-visible{outline:2px solid #e4c98d;outline-offset:5px}
.cinema-next{position:absolute;z-index:7;right:5.5%;bottom:30px;width:65px;height:65px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #e4c98d70;border-radius:50%;background:#10231b70;backdrop-filter:blur(10px);color:#f4e4c5;cursor:pointer;transition:transform .5s var(--ease-cinema),background .4s;font:400 12px 'DM Sans',sans-serif}
.cinema-next:hover{transform:scale(1.12);background:#6f592755}.cinema-next b{font-weight:400}.cinema-next i{font-style:normal;font-size:20px}.cinema-next-ring{display:none}
.cinema-count{position:absolute;z-index:7;right:5.5%;bottom:124px;display:flex;gap:8px;align-items:baseline}.cinema-count strong{font:400 32px 'Manrope';color:#e4c98d}.cinema-count span{font:400 12px 'DM Sans';color:#c0c8c1}
.cinema-pause{position:absolute;z-index:7;right:calc(5.5% + 90px);bottom:41px;border:0;padding:14px;background:none;color:#e4e8e3;font:400 14px 'DM Sans';cursor:pointer}
.cinema-view{position:absolute;z-index:7;right:5.5%;top:110px;border:1px solid #ffffff35;border-radius:999px;padding:12px 20px;background:#07110d45;backdrop-filter:blur(12px);color:#fff;font:400 14px 'DM Sans';cursor:pointer;transition:background .3s}
.cinema-view:hover{background:#304438a0}.clinic-cinema.photos-only .cinema-intro-copy{opacity:0!important;pointer-events:none}.clinic-cinema.photos-only .cinema-wash{opacity:.1}.clinic-cinema.photos-only .cinema-frame img{right:5%;width:90%}
@keyframes cinema-atmosphere{from{transform:scale(1.12) translateX(1%)}to{transform:scale(1) translateX(-1%)}}
@keyframes cinema-settle{from{transform:translate3d(2%,0,0) scale(.92)}to{transform:translate3d(0,0,0) scale(1)}}
@keyframes cinema-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(min-width:1800px){.cinema-intro-copy{width:38%}.clinic-cinema h1{font-size:96px}}
@media(max-width:900px){.clinic-cinema{height:100svh;min-height:830px}.cinema-intro-copy{left:26px;top:130px;transform:none;width:calc(100% - 52px)}.clinic-cinema h1{font-size:clamp(36px,6vw,56px);max-width:640px}.cinema-kicker{margin-bottom:16px;font-size:11px}.cinema-line-accent{margin-top:0}.cinema-summary{margin-top:15px;max-width:520px;font-size:16px;line-height:1.5}.cinema-frame img{right:3%;width:94%;top:43%;height:42%;mask-image:none;-webkit-mask-image:none}.cinema-wash{background:linear-gradient(180deg,#07110ed9, #07110eaa 30%,transparent 52%,transparent 77%,#07110e)}.cinema-view{top:90px;right:24px;font-size:12px;padding:9px 14px}.cinema-chapters{left:24px;bottom:23px;width:calc(100% - 145px);gap:9px}.cinema-next{right:24px;bottom:20px;width:52px;height:52px}.cinema-count{right:25px;bottom:92px}.cinema-count strong{font-size:24px}.cinema-pause{right:85px;bottom:81px;font-size:13px}.clinic-cinema.photos-only .cinema-frame img{right:3%;width:94%;top:17%;height:67%}}
@media(max-width:400px){.clinic-cinema{min-height:820px}.cinema-intro-copy{left:20px;width:calc(100% - 40px)}.clinic-cinema h1{font-size:36px}.cinema-kicker{font-size:10px;gap:7px}.cinema-chapters{gap:7px}.cinema-summary{font-size:16px}}
@media(prefers-reduced-motion:reduce){.clinic-cinema *,.clinic-cinema *:before,.clinic-cinema *:after{animation:none!important;transition:none!important}.cinema-frame,.cinema-frame.is-active,.cinema-frame.was-active{transform:none}.cinema-frame img{transform:none!important}}

/* Keep key messages legible within the animated slide description. */
.cinema-summary mark{background:none;color:#f0d69b;font-weight:600;padding:0;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Water highlights sit above photography and below all copy and controls. */
.cinema-ripple{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){.cinema-ripple{display:none}}

/* Feather every photo edge into its own softly lit background. */
.clinic-cinema .cinema-frame img{
  mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 15%,#000 85%,transparent 100%);
  mask-composite:intersect;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 15%,#000 85%,transparent 100%);
  -webkit-mask-composite:source-in;
}
.cinema-frame:before{filter:blur(38px) brightness(.48)}
/* Fit the element to the photograph itself so portrait edges feather too. */
.clinic-cinema .cinema-frame img{width:auto;height:auto;max-width:69%;max-height:73%;left:64.5%;right:auto;top:49.5%;translate:-50% -50%}
.clinic-cinema.photos-only .cinema-frame img{left:50%;right:auto;width:auto;max-width:90%;max-height:73%;top:49.5%}
@media(max-width:900px){.clinic-cinema .cinema-frame img{left:50%;top:64%;width:auto;height:auto;max-width:94%;max-height:42%}.clinic-cinema.photos-only .cinema-frame img{left:50%;top:50.5%;width:auto;max-width:94%;max-height:67%}}
