/* Shared phone and tablet refinements. The desktop art direction stays intact. */
.site-navigation{display:contents}
.mobile-menu-toggle{display:none}
.mobile-control-label{display:none}
.motion-button>.desktop-control-icon{margin-left:0}
.dialog-bar{position:sticky;top:-20px;z-index:5;background:#111315;padding:8px 0}
.dialog-close{min-width:44px;min-height:44px}
#reelDialog{overflow:auto;padding:62px 12px 12px;max-height:94svh;overscroll-behavior:contain}
#reelDialog .close-reel{top:9px;right:12px;width:44px;height:44px;z-index:2}
#reelDialog video{display:block;width:100%;max-height:calc(94svh - 80px);object-fit:contain}
body:has(#reelDialog[open]){overflow:hidden}
:where(a,button,summary){-webkit-tap-highlight-color:#ff603b26;touch-action:manipulation}

@media(max-width:900px){
  /* Plain type replaces decorative symbols throughout the mobile layout. */
  .desktop-control-icon,.mobile-neutral-arrow,.story-arrow,.reel-play,
  .cinema-next-icon,.cinema-ai>span,.editorial-strip>span[aria-hidden],
  .ai-example summary>span[aria-hidden],.hybrid-plus,.status-dot{display:none!important}
  .statement-band>div>span{visibility:hidden;display:inline-block;width:40px;padding:0}
  .faq-list summary:after,.cinema-kicker:before{display:none!important}
  .faq-list summary{padding-right:0}
  .mobile-control-label{display:inline}
  .media-dialog .dialog-close,#reelDialog .close-reel{width:auto;min-width:64px;min-height:44px;padding:0 13px;font-size:13px;line-height:1;border-radius:24px}
  .hybrid-combination{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
  /* Keep mobile film previews free of decorative play badges. */
  .round-play,.watch-button>.play-icon,
  .case-cover button>span[aria-hidden]{display:none!important}
  :root{--site-gutter:clamp(20px,5vw,32px);--gutter:var(--site-gutter)}
  html{scroll-padding-top:96px}
  .site-nav.menu-ready{height:calc(76px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(var(--site-gutter),env(safe-area-inset-right)) 0 max(var(--site-gutter),env(safe-area-inset-left));align-items:center;gap:20px}
  .site-nav .site-brand{min-height:44px;padding:3px 0;font-size:19px}
  .site-nav .site-brand>span{top:0}
  .site-nav .mobile-menu-toggle{display:flex;align-items:center;justify-content:center;gap:17px;margin-left:auto;min-height:44px;min-width:94px;padding:10px 14px;border:1px solid #ffffff60;border-radius:28px;background:#090a0b60;color:var(--site-ink);font:500 13px/1 'DM Sans',sans-serif;cursor:pointer}
  
  .mobile-menu-toggle:focus-visible{outline:2px solid var(--site-accent);outline-offset:4px}
  .site-nav.menu-open{background:#090a0bf5;backdrop-filter:blur(18px);border-color:var(--site-line)}
  .site-nav.menu-ready .site-navigation{display:none;position:absolute;top:100%;left:0;right:0;max-height:calc(100svh - 76px - env(safe-area-inset-top));max-height:calc(100dvh - 76px - env(safe-area-inset-top));padding:8px max(var(--site-gutter),env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(var(--site-gutter),env(safe-area-inset-left));overflow-y:auto;overscroll-behavior:contain;background:#090a0bfa;border-bottom:1px solid #ffffff30;box-shadow:0 24px 35px #0005}
  .site-nav.menu-open .site-navigation{display:flex;flex-direction:column;gap:22px;background:#090a0b}
  .home-page .site-nav.menu-ready nav,.subpage .site-nav.menu-ready nav{display:grid;grid-template-columns:1fr 1fr;position:static;gap:0 24px;width:100%}
  .home-page .site-nav.menu-ready nav a,.subpage .site-nav.menu-ready nav a{display:flex;align-items:center;min-height:53px;padding:10px 0;font-size:18px;border-bottom:1px solid var(--site-line)}
  .site-nav.menu-ready nav a:after{display:none}
  .site-nav.menu-ready .site-enquire{justify-content:space-between;margin:0;min-height:48px;font-size:14px;padding:12px 18px;background:var(--site-accent);color:#090a0b;border-color:var(--site-accent)}
  .page-space{padding-left:max(var(--site-gutter),env(safe-area-inset-left));padding-right:max(var(--site-gutter),env(safe-area-inset-right))}
  .collection-filters button{min-height:44px;min-width:44px}
  .back-link,.offer-secondary,.enquiry-details>a,.contact-details a,.dialog-links a{display:inline-flex;align-items:center;min-height:44px;padding-top:10px;padding-bottom:10px;max-width:100%;overflow-wrap:anywhere}
  .enquiry-details>a{display:flex;width:fit-content;margin-top:0}
  .global-footer{padding-bottom:max(24px,env(safe-area-inset-bottom))}
  .footer-directory{gap:32px 24px;grid-template-columns:1fr 1fr}
  .footer-directory>.site-brand{grid-column:1/-1}
  .footer-directory>div:last-child{grid-column:1/-1}
  .footer-directory nav,.footer-directory>div:last-child{gap:0;align-items:stretch}
  .footer-directory .kicker{margin-bottom:12px}
  .footer-directory a:not(.site-brand),.footer-bottom>a{display:flex;align-items:center;min-height:44px;font-size:14px;padding:10px 0;line-height:1.45;overflow-wrap:anywhere}
  .footer-bottom{align-items:start;flex-direction:column;gap:10px;margin-top:30px}
  .footer-bottom>a{padding-right:16px}
  .media-dialog,.media-dialog.is-portrait,.reels-page .media-dialog.is-portrait{width:calc(100% - 20px);max-height:calc(100svh - 20px);max-height:calc(100dvh - 20px);padding:10px max(12px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));border-radius:8px}
  .dialog-bar{top:-10px;margin-bottom:10px;gap:12px;padding:4px 0 8px}
  .dialog-bar .kicker{font-size:11px;letter-spacing:.8px;line-height:1.5;max-width:230px}
  .dialog-close{width:44px;height:44px}
  .dialog-caption{padding-top:18px}
  .dialog-caption h2{font-size:24px}
  .dialog-caption p{font-size:14px;line-height:1.65}
  .media-dialog .dialog-screen{width:100%;max-height:62svh}
  .media-dialog.is-portrait .dialog-screen,.reels-page .media-dialog.is-portrait .dialog-screen{width:auto;height:min(58svh,620px);max-width:100%;max-height:none}
  #reelDialog{width:calc(100% - 20px);padding:62px 8px max(8px,env(safe-area-inset-bottom));border-radius:8px}
  .films-image-hero{min-height:470px;padding-top:44px;padding-bottom:32px;gap:25px}
  .subpage .films-image-hero h1{font-size:clamp(64px,12vw,90px)}
  .films-image-hero .hero-aside{max-width:540px}
  .films-image-hero .hero-aside p{font-size:16px;line-height:1.6}
  .films-image-hero .hero-aside .inline-link{min-height:44px;margin-top:12px}
  .scroll-story{height:235svh}
  .story-viewport{min-height:0}
  .edit-caption{top:calc(76px + env(safe-area-inset-top) + 4svh)}
  .story-controls{bottom:max(16px,env(safe-area-inset-bottom))}
  .story-skip,.motion-button{min-height:44px;display:inline-flex;align-items:center}
  .watch-button{min-height:44px}
  .project-enquiry .enquiry-note,.ai-option-copy>p.ai-option-uses,.ai-world .ai-option-heading .kicker,.crew-credits dt{font-size:12px;line-height:1.6}
  .case-facts dd,.crew-credits dd{overflow-wrap:anywhere}
  .reels-page .reel-collection .media-caption>span{font-size:12px;line-height:1.5}
  .reels-page .reel-collection .media-caption strong{overflow-wrap:anywhere}
}

@media(max-width:900px) and (orientation:portrait){
  .edit-room{-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 87%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 87%,transparent)}
}

@media(max-width:700px){
  .cinema-copy{display:block}
  .ai-cinema h2{font-size:clamp(43px,10vw,60px)}
  .cinema-ai{font-size:clamp(130px,31vw,180px);margin-bottom:27px}
  .cinema-description{font-size:16px;line-height:1.65;max-width:440px;margin-top:24px}
  .cinema-link{font-size:14px;margin-top:14px;min-height:44px}
  .ai-cinema .cinema-kicker{font-size:12px;letter-spacing:1px}
  .cinema-control-row{flex-wrap:wrap;gap:8px 16px}
  .cinema-prompt{font-size:13px}
  .cinema-shot-controls button{min-width:44px;min-height:44px;font-size:13px}
  .cinema-note{font-size:12px!important}
  .home-page .ai-video-heading{flex-wrap:wrap;gap:12px}
  .home-page .ai-video-heading>a{max-width:none;font-size:14px;min-height:44px}
  .home-page .ai-video-slots{grid-template-columns:1fr;gap:24px}
  .home-page .ai-video-placeholder{aspect-ratio:2.25}
  .home-page .ai-slot-symbol{font-size:40px}
  .home-page .ai-slot-number{font-size:12px;top:14px;left:16px}
  .home-page .ai-slot-status{font-size:11px;letter-spacing:1px;bottom:14px;max-width:none}
  .home-page .ai-slot-caption{display:flex;gap:15px;align-items:center;padding-top:12px}
  .home-page .ai-slot-caption h3{font-size:17px}
  .home-page .ai-slot-caption>span{font-size:12px}
}

@media(max-width:540px){
  .hybrid-combination{grid-template-columns:1fr;gap:0}
  .story-viewport .hero-copy{top:23%;width:calc(100% - 2 * var(--gutter))}
  .story-viewport .hero-copy h1{font-size:clamp(62px,18vw,94px)}
  .hero-description{font-size:15px;max-width:310px}
  .hero-copy .eyebrow{font-size:11px;letter-spacing:1px;line-height:1.6}
  .edit-caption{left:var(--gutter);right:var(--gutter)}
  .edit-caption h2{font-size:27px;max-width:300px}
  .edit-caption .text-link{min-height:44px;display:inline-flex;align-items:center}
  .story-chapters{font-size:11px}
  .films-image-hero{min-height:445px;padding-top:36px;padding-bottom:30px;gap:22px}
  .subpage .films-image-hero h1{font-size:clamp(62px,17vw,80px)}
  .films-image-hero .hero-aside .inline-link{margin-right:18px;gap:14px;font-size:13px}
  .collection-tools{overflow:visible}
  .collection-filters{flex-wrap:nowrap;max-width:100%;overflow-x:auto;padding:4px 1px 8px;scrollbar-width:thin;scrollbar-color:#ffffff40 transparent;overscroll-behavior-x:contain}
  .collection-filters button{flex-shrink:0;font-size:13px;padding:10px 13px}
  .collection-count{padding-top:8px}
  .case-title{margin-top:25px;margin-bottom:28px}
  .case-title h1{font-size:clamp(48px,13.5vw,72px)}
  .case-cover button{bottom:16px;left:16px;max-width:calc(100% - 32px);min-height:44px;font-size:13px;padding:12px 15px;text-align:left}
  .case-facts{grid-template-columns:1fr 1fr;gap:20px}
  .making-image .making-inset{right:-18%;width:68%}
  .reels-page .reel-collection .media-caption strong{font-size:14px;line-height:1.25;letter-spacing:-.3px}
  .next-chapter>a{gap:20px}
  .next-chapter>a>span{font-size:48px}
  .subpage .next-chapter h2{font-size:clamp(34px,10vw,43px)}
}

@media(max-height:500px) and (orientation:landscape){
  .site-nav.menu-ready{height:64px;padding-top:0}
  .site-nav.menu-ready .site-navigation{max-height:calc(100dvh - 64px)}
  .story-viewport{min-height:0}
  .story-viewport .hero-copy{top:88px;transform:none;width:70%}
  .story-viewport .hero-copy h1{font-size:clamp(44px,7.5vw,66px);line-height:.88}
  .hero-copy .eyebrow{margin-bottom:12px;font-size:10px}
  .hero-description,.scroll-invitation{display:none}
  .hero-copy .watch-button{margin-top:16px;min-height:44px}
  .edit-caption{top:88px}
  .edit-caption h2{font-size:26px}
  .story-controls{bottom:8px;flex-wrap:nowrap;align-items:center}
  .story-chapters{width:auto;order:0}
  .media-dialog .dialog-screen{max-height:calc(100svh - 100px)}
  .media-dialog.is-portrait .dialog-screen,.reels-page .media-dialog.is-portrait .dialog-screen{height:calc(100svh - 100px)}
  .reels-page .media-dialog.is-portrait .dialog-screen{height:calc(100svh - 185px)}
  #reelDialog video{max-height:calc(94svh - 80px)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scroll-story{height:auto}
  .site-nav,.mobile-menu-toggle{transition:none}
  .edit-room,.story-film,.story-viewport .hero-copy,.cinema-window>img{will-change:auto}
}