/* Shared phone/tablet rules, loaded after each page's own design. */
.portfolio-page .photo-cinema,.portfolio-page .property-story{height:76svh;min-height:460px;max-height:820px}
.portfolio-page .photo-cinema-title{top:12%}
.portfolio-page .photo-cinema h2,.portfolio-page .property-story h2{font-size:clamp(38px,5.6vw,80px)}
.studio-dark header .wordmark{white-space:nowrap;flex-shrink:0}
@media(max-width:1024px){
 html{scroll-padding-top:145px}
 .studio-dark header.audience-header{display:flex;gap:12px;padding:12px 18px}
 .studio-dark header.audience-header .wordmark{font-size:21px}
 .studio-dark header.audience-header #menu{display:block;width:44px;height:44px;padding:0;border:0;background:none;color:inherit;font-size:24px;flex-shrink:0}
 .studio-dark header.audience-header nav{display:none;position:absolute;inset:calc(100% + 8px) 0 auto;margin:0;padding:16px;background:#111719;border:1px solid #ffffff30;border-radius:16px;max-height:calc(100svh - 160px);overflow-y:auto;box-shadow:0 18px 40px #0006}
 .studio-dark header.audience-header nav.open{display:flex;flex-direction:column;gap:4px}
 .studio-dark header.audience-header nav a{display:block;min-height:44px;padding:12px 16px;font-size:15px}
 .studio-dark header.audience-header .hero-audience{margin-left:auto}
 .studio-dark header .hero-audience button{min-height:44px;padding:10px 12px}
 .studio-dark header #ambient-glow-toggle{width:44px;min-width:44px;min-height:44px}
 .studio-dark header>.button{min-height:44px}
 .studio-dark .estimate-layout,.studio-dark .website-request{grid-template-columns:minmax(0,1fr)}
 .studio-dark .estimate-earth{position:relative;top:auto;height:380px}
 .studio-dark .business-landing-hero,.studio-dark .business-landing-details{gap:28px}
 .studio-dark .business-steps{gap:16px}
 .studio-dark .business-steps article{padding:22px 12px}
 .studio-dark .service-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .studio-dark :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px!important;min-height:44px}
 .studio-dark label:has(input[type=checkbox]){min-height:44px}
 .studio-dark .entrance-video-controls button{min-height:44px;min-width:44px;font-size:12px}
 .studio-dark .compact-footer>div{flex-wrap:wrap;gap:16px}
 .studio-dark .compact-footer a{min-height:44px;display:inline-flex;align-items:center}
 .studio-dark .compact-footer .wordmark{display:block}
 .portfolio-page .photo-cinema,.portfolio-page .property-story{height:64svh;min-height:400px;max-height:680px}
 .studio-dark :is(.catalog-intro,.business-landing-hero,.business-landing-details,.website-request,.estimate-layout)>*{min-width:0}
 body:not(.studio-dark) header nav{scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:100%}
 body:not(.studio-dark) header nav::-webkit-scrollbar{display:none}
 body:not(.studio-dark) header nav a{display:inline-flex;align-items:center;min-height:44px}
 .agent-actions{flex-wrap:wrap}
 .agent-actions a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}
@media(max-width:760px){
 .studio-dark header.audience-header{display:grid;grid-template-columns:minmax(0,1fr) 44px 44px;gap:6px 10px!important;padding:10px 14px}
 .studio-dark header.audience-header .wordmark{grid-column:1;grid-row:1;font-size:18px}
 .studio-dark header.audience-header #ambient-glow-toggle{grid-column:2;grid-row:1;width:44px;min-width:44px;min-height:44px}
 .studio-dark header.audience-header #menu{grid-column:3;grid-row:1}
 .studio-dark header.audience-header .hero-audience{grid-column:1/3;grid-row:2;justify-self:start;margin:0}
 .studio-dark header.audience-header>.button{grid-column:2/4;grid-row:2;justify-self:end;margin:0;min-width:80px;width:max-content;padding:10px 12px;gap:8px}
 .studio-dark header .hero-audience button{padding:9px 13px;font-size:11px}
 .studio-dark.subpage:not(.portfolio-page) main{padding-top:145px}
 .studio-dark .business-landing-hero,.studio-dark .business-landing-details,.studio-dark .business-steps{grid-template-columns:minmax(0,1fr)}
 .studio-dark .business-landing-hero{padding-top:35px}
 .studio-dark .business-landing-hero img{height:300px}
 .studio-dark .business-graphic{min-height:280px;padding:28px}
 .studio-dark .business-steps article{padding:24px 0}
 .studio-dark .estimate-earth{height:300px}
 .studio-dark .catalog-note{flex-wrap:wrap;gap:14px}
 .studio-dark .service-cards{grid-template-columns:minmax(0,1fr)}
 .studio-dark .service-help{padding:25px}
 .studio-dark .audience-entrance{min-height:520px}
 .studio-dark .entrance-story{top:30%}
 .portfolio-page .photo-cinema,.portfolio-page .property-story{height:62svh;min-height:360px;max-height:560px}
 .portfolio-page .photo-cinema h2,.portfolio-page .property-story h2{font-size:clamp(32px,8vw,48px)}
 .portfolio-page .photo-cinema-title{top:10%;left:6%}
 .portfolio-page .photo-cinema-controls{bottom:5%}
 .portfolio-page .property-story-copy{bottom:7%}
 .portfolio-page .property-story-copy p{padding-top:14px}
 .studio-dark dialog{max-height:90svh;width:94vw;overflow-y:auto;overscroll-behavior:contain}
 .studio-dark :is(.close,.service-dismiss){min-width:44px;min-height:44px}
 .studio-dark .service-detail-layout{grid-template-columns:minmax(0,1fr)}
 .studio-dark .service-detail-visual img{max-height:32svh}
}
@media(max-width:360px){
 .studio-dark header.audience-header{padding-inline:10px;gap:5px!important}
 .studio-dark header.audience-header .wordmark{font-size:16px}
 .studio-dark header .wordmark span{font-size:5px;letter-spacing:.2px}
 .studio-dark header .hero-audience button{padding-inline:9px;font-size:10px}
 .studio-dark header.audience-header>.button{min-width:68px;font-size:10px;gap:5px}
 .studio-dark .entrance-story h1{font-size:40px}
}
@media(max-height:550px) and (orientation:landscape){
 .studio-dark .audience-entrance{height:100svh;min-height:400px}
 .studio-dark .entrance-story{top:38%}
 .studio-dark .entrance-story h1{font-size:48px}
}