/* Three accepted medical demos: existing photos become large scene backgrounds.
   Atlas frames keep their square proportions and are cropped independently. */
.medicalDemo[data-motion-variant] > :is(.dentalScreen,.clinicScreen,.vetScreen){padding-block:clamp(48px,5vw,76px)}
.medicalDemo .medicalScene{position:relative;isolation:isolate;overflow:hidden;gap:32px 5vw}
.medicalDemo .medicalScene::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;width:100%;height:100%;border:0;border-radius:0;box-shadow:none;background:var(--scene-wash)}
.medicalDemo .medicalScene > :is(.dentalHeroCopy,.dentalHeroFlow,.dentalRoomsCopy,.clinicHeroCopy,.clinicHeroRail,.clinicDiagnosticCopy,.vetHeroCopy,.vetHeroRail,.vetSpaceCopy){position:relative;z-index:2;min-width:0}
.medicalDemo .medicalScene :is(.dentalHeroVisual,.dentalRoomsStage,.clinicHeroVisual,.clinicDiagnosticVisual,.vetHeroScene,.vetHeroBlob,.vetSpaceVisual){position:absolute;inset:0;z-index:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;perspective:none;transform:none;pointer-events:none}
.medicalDemo .medicalScene :is(.dentalHeroVisual,.clinicHeroVisual,.vetHeroBlob,.vetSpaceVisual)::before,
.medicalDemo .medicalScene :is(.dentalHeroVisual,.clinicHeroVisual,.vetHeroBlob,.vetSpaceVisual)::after{content:none}
.medicalDemo .medicalScene .medicalPhoto--backdrop{position:absolute!important;inset:0!important;z-index:0;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none;transform:none!important;container-type:size;background:none!important}
.medicalDemo .medicalScene .medicalPhoto--backdrop::before{content:"";position:absolute;inset:0;background-image:var(--medical-image,var(--medical-atlas))!important;background-size:max(200cqw,200cqh) max(200cqw,200cqh)!important;background-position:calc(50cqw - var(--frame-x,.5) * max(100cqw,100cqh)) calc(50cqh - var(--frame-y,.5) * max(100cqw,100cqh))!important;background-repeat:no-repeat!important}
.medicalDemo .medicalScene :is(.dentalHeroVisual aside,.dentalRoomsStage aside,.clinicHeroCard,.clinicDiagnosticVisual aside,.vetHeroCard,.vetSpaceVisual aside){z-index:2;max-width:calc(100% - 48px);transform:none;box-shadow:none;backdrop-filter:none}

/* Dentistry keeps its light sage/cream typography and calm left alignment. */
.medicalDemo-dentistry .dentalHero.medicalScene{--scene-wash:linear-gradient(90deg,rgba(242,238,229,.98) 0%,rgba(242,238,229,.95) 45%,rgba(242,238,229,.92) 57%,rgba(242,238,229,.08) 100%);grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-rows:1fr auto;min-height:calc(100svh - 76px);background:var(--d-cream)}
.medicalDemo-dentistry .dentalHeroCopy{grid-column:1;max-width:660px}
.medicalDemo-dentistry .dentalHeroCopy small{color:#516057}
.medicalDemo-dentistry .dentalHeroVisual aside{left:auto;right:var(--m-pad);bottom:150px;width:230px;background:rgba(242,238,229,.94)}
.medicalDemo-dentistry .dentalHeroFlow{background:rgba(242,238,229,.94);backdrop-filter:none}
.medicalDemo-dentistry .dentalRooms.medicalScene{--frame-y:1.5;--scene-wash:linear-gradient(90deg,rgba(242,238,229,.98),rgba(242,238,229,.95) 48%,rgba(242,238,229,.17) 82%);grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);background:var(--d-cream)}
.medicalDemo-dentistry .dentalRoomsCopy{grid-column:1;max-width:580px}
.medicalDemo-dentistry .dentalRoomsStage aside{left:auto;right:var(--m-pad);bottom:clamp(48px,5vw,76px);background:rgba(242,238,229,.94)}

/* Veterinary keeps warm paper, with text opposite the people and pet. */
.medicalDemo-veterinary .vetHero.medicalScene{--scene-wash:linear-gradient(90deg,rgba(245,234,216,.02) 0%,rgba(245,234,216,.06) 35%,rgba(245,234,216,.28) 43%,rgba(245,234,216,.97) 53%,#f5ead8 65%);grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-rows:1fr auto;min-height:calc(100svh - 76px)}
.medicalDemo.medicalDemo-veterinary .vetHero.medicalScene .medicalPhoto--backdrop{width:60%!important;right:auto!important}
.medicalDemo-veterinary .vetHero.medicalScene::before{content:none}
.medicalDemo-veterinary .vetHeroCopy{grid-column:2;max-width:640px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none}
.medicalDemo-veterinary .vetHeroCopy small{color:#625f56}
.medicalDemo-veterinary .vetHeroCard{display:none}
.medicalDemo-veterinary .vetHeroRail{background:rgba(245,234,216,.94);backdrop-filter:none}
.medicalDemo-veterinary .vetSpace.medicalScene{--frame-y:1.5;--scene-wash:linear-gradient(90deg,rgba(16,47,41,.13),rgba(16,47,41,.4) 37%,rgba(16,47,41,.94) 63%,#102f29);grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.medicalDemo-veterinary .vetSpaceCopy{grid-column:2;max-width:610px}
.medicalDemo-veterinary .vetSpaceVisual aside{left:var(--m-pad);right:auto;bottom:clamp(48px,5vw,76px);width:260px;background:rgba(245,234,216,.95)}

/* A cat and vet need a real square frame, not a tall strip beside the cards. */
.medicalDemo-veterinary .vetNeeds{grid-template-columns:minmax(0,1fr);gap:36px}
.medicalDemo-veterinary .vetNeeds>header{max-width:900px}
.medicalDemo-veterinary .vetNeedsGrid{grid-template-columns:minmax(0,1.65fr) repeat(2,minmax(0,1fr));grid-template-rows:1fr 1fr;min-height:0;gap:16px}
.medicalDemo-veterinary .vetNeedsPhoto{min-height:0;aspect-ratio:1;align-self:center;transform:none}
.medicalDemo-veterinary .vetNeedsGrid>a{min-height:200px;padding:22px}
.medicalDemo-veterinary .vetNeedsGrid>a h3{margin-top:20px}
.medicalDemo-veterinary .vetNeedsPhoto .medicalPhoto--squareFrame{position:absolute;z-index:0;inset:0!important;width:100%;height:100%;min-height:0;container-type:size;transform:none;background:none!important;border:0;border-radius:0}
.medicalDemo-veterinary .medicalPhoto--squareFrame::before{content:"";position:absolute;inset:0;background-image:var(--medical-atlas);background-size:max(200cqw,200cqh) max(200cqw,200cqh);background-position:calc(50cqw - 1.5 * max(100cqw,100cqh)) calc(50cqh - .5 * max(100cqw,100cqh));background-repeat:no-repeat}
.medicalDemo-veterinary .vetNeedsPhoto::after{z-index:1;background:linear-gradient(180deg,transparent 64%,rgba(9,36,30,.82))}
.medicalDemo-veterinary .vetNeedsPhoto>div:not(.medicalPhoto){left:22px;right:22px;bottom:22px}
.medicalDemo-veterinary .vetNeedsPhoto b{font-size:clamp(21px,2vw,27px)}

/* The closing dental scene retains a solid reading area and a visible room. */
.medicalDemo-dentistry .dentalFinal.medicalContextBackdrop::after{background:linear-gradient(90deg,rgba(8,21,17,.95),rgba(8,21,17,.84) 45%,rgba(8,21,17,.2) 100%)}
.medicalDemo-dentistry .dentalFinal.medicalContextBackdrop>aside{background:rgba(18,37,31,.92);transform:none;box-shadow:none}

@media(max-width:1050px){
 .medicalDemo .medicalScene :is(.dentalHeroVisual aside,.dentalRoomsStage aside,.clinicHeroCard,.clinicDiagnosticVisual aside,.vetHeroCard,.vetSpaceVisual aside){display:none}
 .medicalDemo .medicalScene :is(.dentalHeroCopy,.dentalRoomsCopy,.clinicHeroCopy,.clinicDiagnosticCopy,.vetHeroCopy,.vetSpaceCopy){max-width:620px}
 .medicalDemo .medicalScene:is(.dentalHero,.dentalRooms,.clinicHero,.clinicDiagnostics,.vetHero,.vetSpace){grid-template-columns:minmax(0,1fr);grid-template-rows:auto;align-content:center;min-height:calc(100svh - 76px)}
 .medicalDemo .medicalScene > :is(.dentalHeroCopy,.dentalHeroFlow,.dentalRoomsCopy,.clinicHeroCopy,.clinicHeroRail,.clinicDiagnosticCopy,.vetHeroCopy,.vetHeroRail,.vetSpaceCopy){grid-column:1}
 .medicalDemo-dentistry .medicalScene:is(.dentalHero,.dentalRooms){--scene-wash:linear-gradient(90deg,rgba(242,238,229,.97),rgba(242,238,229,.89) 60%,rgba(242,238,229,.45))}
 .medicalDemo-veterinary .vetHero.medicalScene{--scene-wash:linear-gradient(180deg,rgba(245,234,216,0) 0px,rgba(245,234,216,.05) 245px,rgba(245,234,216,.8) 350px,#f5ead8 410px);padding-top:410px;min-height:0;align-content:start}
 .medicalDemo.medicalDemo-veterinary .vetHero.medicalScene .medicalPhoto--backdrop{width:100%!important;height:420px!important;bottom:auto!important}
 .medicalDemo.medicalDemo-veterinary .vetHero.medicalScene .medicalPhoto--backdrop::before{background-size:max(200cqw,200cqh) max(200cqw,200cqh)!important;background-position:calc(50cqw - .5 * max(100cqw,100cqh)) calc(56cqh - .5 * max(100cqw,100cqh))!important}
 .medicalDemo-veterinary .vetNeedsGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .medicalDemo-veterinary .vetNeedsPhoto{grid-column:1/-1;grid-row:auto;width:min(100%,540px);justify-self:center}
 .medicalDemo-dentistry .dentalFinal.medicalContextBackdrop::after{background:linear-gradient(180deg,rgba(8,21,17,.87),rgba(8,21,17,.7))}
 .medicalDemo-veterinary .vetSpace.medicalScene{--scene-wash:linear-gradient(90deg,rgba(16,47,41,.97),rgba(16,47,41,.89) 60%,rgba(16,47,41,.5))}
}
@media(max-width:600px){
 .medicalDemo[data-motion-variant] > :is(.dentalScreen,.clinicScreen,.vetScreen){padding-block:48px}
 .medicalDemo .medicalScene:is(.dentalHero,.clinicHero,.vetHero){min-height:calc(100svh - 66px);padding-top:42px;padding-bottom:32px;gap:32px}
 .medicalDemo .medicalScene :is(.dentalHeroCopy,.clinicHeroCopy,.vetHeroCopy){padding:0}
 .medicalDemo .medicalScene :is(.dentalHeroCopy>div,.vetHeroCopy>div){flex-direction:column;align-items:flex-start;gap:16px}
 .medicalDemo .medicalScene :is(.dentalHeroCopy small,.vetHeroCopy small){max-width:260px;margin-top:0}
 .medicalDemo .medicalScene :is(.dentalHeroFlow,.clinicHeroRail,.vetHeroRail){width:100%;min-width:0;margin-top:8px}
 .medicalDemo .medicalScene :is(.clinicHeroRail,.vetHeroRail){display:flex;flex-wrap:wrap;justify-content:flex-start;gap:12px 16px;padding:18px}
 .medicalDemo .medicalScene :is(.clinicHeroRail,.vetHeroRail) i{display:none}
 /* Leave a real photo window above the copy; keep the text area fully readable. */
 .medicalDemo[data-motion-variant] > .medicalScene{padding-top:clamp(180px,52vw,220px)}
 .medicalDemo-dentistry .medicalScene:is(.dentalHero,.dentalRooms){--scene-wash:linear-gradient(180deg,rgba(242,238,229,.06),rgba(242,238,229,.45) 110px,rgba(242,238,229,.96) 180px,rgba(242,238,229,.98))}
 .medicalDemo.medicalDemo-veterinary>.vetHero.medicalScene{--scene-wash:linear-gradient(180deg,rgba(245,234,216,0) 0px,rgba(245,234,216,.02) 220px,rgba(245,234,216,.76) 300px,#f5ead8 360px);padding-top:360px}
 .medicalDemo.medicalDemo-veterinary .vetHero.medicalScene .medicalPhoto--backdrop{height:370px!important}
 .medicalDemo-veterinary .vetNeedsGrid{grid-template-columns:minmax(0,1fr);gap:14px}
 .medicalDemo-veterinary .vetNeedsGrid>a{min-height:0}
 .medicalDemo-veterinary .vetSpace.medicalScene{--scene-wash:linear-gradient(180deg,rgba(16,47,41,.08),rgba(16,47,41,.5) 110px,rgba(16,47,41,.95) 180px,rgba(16,47,41,.98))}
}
@media(prefers-reduced-motion:reduce){
 .medicalDemo .medicalScene,.medicalDemo .medicalScene *,.medicalDemo .medicalScene::after{animation:none!important;transition:none!important;translate:none!important}
}