/* LiteCMS v2.83 - Mobile Info button shared across project types,
   and full-image 16:9 stage for Interactive & Interactive Before/After. */

/* Match the familiar Video/Standard slate stage without changing site navigation. */
body.interactive-project-page {
 background: radial-gradient(ellipse 76% 64% at 50% 42%, #34434d 0%, #202f39 58%, #152129 100%) fixed !important;
}
body.interactive-project-page .prototype-layout {
 background: transparent !important;
 padding: 138px 36px 52px !important;
 display: flex !important;
 justify-content: center !important;
 align-items: flex-start !important;
 overflow: hidden !important;
}
body.interactive-project-page .prototype-frame {
 max-width: 100% !important;
 flex: none !important;
 margin: 0 auto !important;
 min-width: 0 !important;
}
body.interactive-project-page .prototype-viewer {
 width: 100% !important;
 aspect-ratio: 16 / 9 !important;
 height: auto !important;
 min-height: 0 !important;
 max-height: none !important;
 flex: none !important;
 overflow: hidden !important;
 background: #17232b !important;
}
body.interactive-project-page .prototype-artboard>img {object-fit: fill !important;}
/* Both sides share the same image coordinate system; hotspots and divider stay registered. */
body.interactive-compare-page .compare-before-layer img {object-fit: fill !important;}

@media (max-width: 800px) {
 body.interactive-project-page .prototype-layout {padding: 140px 14px 48px !important;}
}
@media (max-width: 640px) {
 body.interactive-project-page .prototype-layout {
   padding: 141px 0 0 !important;
   justify-content: center !important;
   align-items: flex-start !important;
 }
 body.interactive-project-page .prototype-frame {max-width: 100% !important;gap:14px !important;}
 body.interactive-project-page .prototype-strapline {padding:0 14px !important;}
 body.interactive-project-page .prototype-viewer {
   width:100% !important;
   height:auto !important;
   aspect-ratio:16 / 9 !important;
   border-left:0 !important;
   border-right:0 !important;
   touch-action:pan-y;
 }
 /* The fixed 62px Info icon is consistent with Standard v2.82. */
 body.interactive-project-page .project-info-trigger-interactive,
 body.video-project-page .video-project-info {
   position: fixed !important;
   inset:auto auto calc(35px + env(safe-area-inset-bottom,0px)) 50% !important;
   transform:translateX(-50%) !important;
   width:62px !important;
   height:62px !important;
   min-width:62px !important;
   min-height:62px !important;
   border-radius:50% !important;
   display:grid !important;
   place-items:center !important;
   background:#f0f1ee !important;
   color:#283840 !important;
   border:1px solid rgba(255,255,255,.3) !important;
   box-shadow:0 10px 32px rgba(0,7,12,.38) !important;
   z-index:425 !important;
 }
 body.interactive-project-page .project-info-trigger-interactive svg,
 body.video-project-page .video-project-info svg {
   width:31px !important;
   height:31px !important;
 }
 body.interactive-project-page .project-info-trigger-interactive:hover,
 body.video-project-page .video-project-info:hover {
   transform:translateX(-50%) !important;
 }
 /* Standard/mobile drawer behavior: a bottom sheet rather than a right-side flyout. */
 body.interactive-project-page .project-info-drawer {
   position:fixed !important;
   inset:auto 12px max(10px,env(safe-area-inset-bottom,0px)) 12px !important;
   width:auto !important;
   max-width:none !important;
   max-height:min(52dvh,460px) !important;
   border-radius:22px 22px 16px 16px !important;
   padding:26px 23px 36px !important;
   overflow-y:auto !important;
   opacity:0 !important;
   transform:translate3d(0,calc(100% + 26px),0) !important;
   transition:transform .28s ease,opacity .24s ease !important;
 }
 body.interactive-project-page .project-info-drawer.is-open {
   opacity:1 !important;
   transform:translate3d(0,0,0) !important;
 }
 body.video-project-page .video-project-drawer {
   position:fixed !important;
   inset:auto 12px max(10px,env(safe-area-inset-bottom,0px)) 12px !important;
   width:auto !important;
   max-width:none !important;
   max-height:min(52dvh,460px) !important;
   border-radius:22px 22px 16px 16px !important;
   padding:26px 23px 36px !important;
   overflow-y:auto !important;
   opacity:0 !important;
   transform:translate3d(0,calc(100% + 26px),0) !important;
   transition:transform .28s ease,opacity .24s ease,visibility .28s !important;
 }
 body.video-project-page .video-project-drawer.is-open {
   opacity:1 !important;
   transform:translate3d(0,0,0) !important;
 }
 /* Keep video theater toggle in its original upper-right position. */
 body.video-project-page .video-project-side-controls {z-index:145 !important;}
 body.video-project-page .video-project-info {z-index:145 !important;}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce) {
 body.interactive-project-page .project-info-drawer,
 body.video-project-page .video-project-drawer {transition:none !important;}
}