/* Mobile browser coverage: paint page surfaces, inset only content. */
@media (max-width:700px), (max-width:1000px) and (hover:none) and (pointer:coarse) {
 html,body{margin:0;width:100%;min-height:100%;background:var(--bg)}
 body{padding:0}
 main{width:100%;min-height:100vh;min-height:100dvh;background:var(--bg)}
 .header,.work-page .header{top:calc(18px + env(safe-area-inset-top,0px));left:max(20px,env(safe-area-inset-left,0px));right:max(20px,env(safe-area-inset-right,0px));background:transparent}
 html{scroll-padding-top:calc(100px + env(safe-area-inset-top,0px))}
 .skip{top:calc(10px + env(safe-area-inset-top,0px));left:max(10px,env(safe-area-inset-left,0px))}
 .wrap{width:calc(100% - max(20px,env(safe-area-inset-left,0px)) - max(20px,env(safe-area-inset-right,0px)))}
 .hero-copy,.promise-stage{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
 .hero{min-height:100svh}
 /* svh keeps scroll choreography stable; dvh lets the film fill expanded chrome. */
 .showreel .showreel-media{height:100vh;height:100dvh}
 .work-page main{padding-top:calc(88px + env(safe-area-inset-top,0px))}
 .work-page .showreel-media{height:auto}
 .project-overview,.work-intro{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
 .project-play,.showreel .reel-controls{display:none}
 .showreel-media[role=button]{cursor:pointer}
 .team,.work-cta{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
 .motion-toggle{right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px))}
 dialog:not(.film-viewer):not(.artwork-viewer){max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
 .dialog-close,.artwork-close{top:max(12px,env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px))}
}
@media(max-width:700px){
 .site-footer,.team .site-footer{margin-top:12px;padding-top:0;border:0;gap:10px}
 .site-footer>.footer-mobile-row{gap:4px 16px;width:min(100%,300px)}
 .footer-mobile-row>.text-button{min-height:44px}
 .motion-toggle.footer-visible{margin-bottom:8px}
 .showreel-media[role=button]{cursor:pointer}
 .project-play,.showreel .reel-controls{display:none}
}

/* One compact reference-led footer row, with safe tap targets. */
@media(max-width:700px){
 .site-footer,.team .site-footer{width:calc(100% - max(20px,env(safe-area-inset-left,0px)) - max(20px,env(safe-area-inset-right,0px)));gap:14px}
 .site-footer>.footer-mobile-row{display:grid;grid-template-columns:max-content auto max-content;align-items:center;width:100%;justify-content:space-between;gap:8px;min-height:44px;font-size:clamp(10px,2.6vw,12px);white-space:nowrap}
 .footer-mobile-row>.footer-privacy{grid-row:auto;grid-column:auto;justify-self:start;min-height:44px;padding:0;text-align:left;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;font-size:inherit}
 .footer-mobile-row>.footer-mobile-copyright{grid-row:auto;grid-column:auto;justify-self:end;max-width:none;line-height:1.3;white-space:nowrap;text-align:right;color:var(--muted)}
 .footer-mobile-socials{display:flex;align-items:center;background:var(--surface);border-radius:14px;padding:3px 0}
 .footer-mobile-socials .footer-social-icon{width:36px;height:44px;min-height:44px;border-radius:0;background:transparent}
 .footer-mobile-socials .footer-social-icon+.footer-social-icon{border-left:1px solid var(--line)}
 .footer-mobile-socials .footer-social-icon:before,.footer-mobile-socials .footer-social-icon:after{content:none}
 .footer-mobile-socials .footer-social-icon:first-child{border-radius:14px 0 0 14px}
 .footer-mobile-socials .footer-social-icon:last-child{border-radius:0 14px 14px 0}
 .footer-mobile-socials .footer-social-icon:hover,.footer-mobile-socials .footer-social-icon:focus-visible{background:var(--hover-neutral)}
 .team .actions .button-arrow{width:16px;height:16px;flex:0 0 16px}
}
@media(max-width:350px){
 .site-footer>.footer-mobile-row{gap:4px;font-size:9px}
 .footer-mobile-socials .footer-social-icon{width:32px}
 .footer-mobile-row>.footer-mobile-copyright{max-width:none}
}

/* Equal side columns keep the contacts at the exact screen centre. */
@media(max-width:700px){
 .site-footer>.footer-mobile-row{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);justify-content:normal;gap:6px;font-size:clamp(9.5px,2.45vw,12px);padding-block:6px}
 .footer-mobile-socials{justify-self:center;padding:5px 6px;border-radius:16px}
 .footer-mobile-socials .footer-social-icon{width:38px}
}
@media(max-width:350px){
 .site-footer>.footer-mobile-row{grid-template-columns:1fr 1fr;gap:10px 12px;font-size:11px}
 .footer-mobile-row>.footer-mobile-socials{grid-column:1/-1;grid-row:1}
 .footer-mobile-row>.footer-privacy,.footer-mobile-row>.footer-mobile-copyright{grid-row:2}
}

/* Give each mobile contact equal room and a larger, separate tap target. */
@media(max-width:700px){
 .footer-mobile-socials{padding:6px 7px}
 .footer-mobile-socials .footer-social-icon{width:46px;height:53px;min-height:53px}
 .footer-social-icon-email img{width:41px;height:40px}
 .footer-social-icon-instagram img{width:19.2px;height:19.2px}
 .footer-social-icon-whatsapp img{width:20px;height:20px}
}
@media(max-width:400px){
 .site-footer>.footer-mobile-row{grid-template-columns:1fr 1fr;gap:12px;font-size:11px}
 .footer-mobile-row>.footer-mobile-socials{grid-column:1/-1;grid-row:1}
 .footer-mobile-row>.footer-privacy,.footer-mobile-row>.footer-mobile-copyright{grid-row:2}
}

/* One shared contact background; equal glyph boxes inside equal tap areas. */
@media(max-width:700px){
 .footer-mobile-socials .footer-social-icon{background:transparent}
 .footer-mobile-socials .footer-social-icon::before,.footer-mobile-socials .footer-social-icon::after{display:none!important;content:none!important}
 .footer-mobile-socials .footer-social-icon img{display:block;width:20px;height:20px;object-fit:contain;transform:none}
}

/* Keep legal text vertically aligned with the contact pill on small phones. */
@media(max-width:400px){
 .site-footer,.team .site-footer{width:calc(100% - max(12px,env(safe-area-inset-left,0px)) - max(12px,env(safe-area-inset-right,0px)))}
 .site-footer>.footer-mobile-row{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px;font-size:clamp(10px,2.8vw,11px);white-space:normal}
 .footer-mobile-row>.footer-privacy{grid-column:1;grid-row:1;align-self:center;white-space:normal;line-height:1.3;min-height:53px;display:flex;align-items:center}
 .footer-mobile-row>.footer-mobile-socials{grid-column:2;grid-row:1;align-self:center}
 .footer-mobile-row>.footer-mobile-copyright{grid-column:3;grid-row:1;align-self:center;white-space:normal;line-height:1.3;min-width:0}
}

/* Legal labels share colour and switch line count as a pair. */
.footer-legal-break{display:none}
@media(max-width:700px){
 .footer-mobile-row>.footer-privacy,.footer-mobile-row>.footer-mobile-copyright{color:var(--muted);line-height:1.3;white-space:nowrap}
 .footer-privacy>span{white-space:nowrap;line-height:1.3}
}
@media(max-width:430px){.footer-legal-break{display:block}}

/* WebKit solid edge extension uses opaque sticky backgrounds as a tint.
   A neutral backdrop operation selects its normal content-extension path.
   Keep the sticky layout and artwork unchanged; do not add edge overlays. */
@media (max-width:700px), (max-width:1000px) and (hover:none) and (pointer:coarse){
 .opening-chapter .promise,.client-grid.stack-enabled>.client-card{
  -webkit-backdrop-filter:blur(0px);
  backdrop-filter:blur(0px);
 }
}

/* Reserve the close control separately from contact heading copy. */
#contact-dialog #contact-title{padding-right:48px}
@media(max-width:700px){#contact-dialog #contact-title{font-size:clamp(28px,7.5vw,36px);padding-right:54px}}