/* Phone composition: image-led stages, a shared text edge and room for controls. */
.mobile-chapter-break{display:none}
@media(max-width:800px){
 :root{--mobile-gutter:22px}
 .reference-header{min-height:72px;padding:14px var(--mobile-gutter);gap:12px}
 .brand{font-size:22px;gap:9px;min-width:0}
 .brand img{width:36px;height:36px}
 .brand small{font-size:7px}
 .menu-trigger{gap:10px;justify-content:center;min-width:72px;min-height:44px}
 .menu-trigger>span{position:static;width:auto;height:auto;overflow:visible;clip-path:none;font-size:12px}
 .menu-trigger i{width:19px;height:10px}
 #reference-nav{top:100%;padding:12px var(--mobile-gutter) 24px;max-height:calc(100svh - 72px);overflow-y:auto}
 #reference-nav a{padding-block:6px;min-height:48px}
 .page-opening{padding:36px var(--mobile-gutter) 40px}
 .intro-copy h1{font-size:clamp(34px,9.5vw,42px);max-width:17ch;line-height:1.08;text-wrap:balance}
 .intro-copy p{line-height:1.65}
 .page-opening>.case-panel h1{font-size:clamp(32px,9vw,40px);line-height:1.12}
 .featured-work,.project-index,.services,.gallery-chapter,.contact-grid{padding-inline:var(--mobile-gutter)}
 .section-label{align-items:flex-start;gap:16px;flex-wrap:wrap}
 .section-label a{display:inline-flex;align-items:center;min-height:44px}
 .project-card h2{font-size:29px;line-height:1.15;margin:14px 0}
 .scoped-card{padding-block:28px}
 .project-card>a>div{padding-top:22px}
 .project-card .text-link{margin-top:16px}
 .service-spread{padding-block:32px}
 .service-title h2{margin-bottom:20px}
 .process-chapter,.company-chapter,.team-chapter{padding:40px var(--mobile-gutter)}
 .process-chapter>div+div,.team-chapter>div+div{margin-top:28px}
 .contact-chapter{padding:36px var(--mobile-gutter)}
 .actions{gap:12px 24px}
 .curated-grid{gap:30px!important}
 .curated-grid .gallery-caption{margin-top:0;padding-top:12px;font-size:14px}
 .chapter-heading h2{margin-bottom:24px}
 .f>div{margin-bottom:22px}
 .f label{font-size:14px;margin-bottom:8px}
 .f input,.f select,.f textarea{font-size:16px;min-height:50px}
 .upl-row{flex-wrap:wrap;gap:12px}
 .contact-details{margin-top:40px}
 #gallery-dialog{width:calc(100vw - 24px);max-height:calc(100svh - 24px);padding:14px}
 #gallery-image{height:56svh;max-height:56svh;margin-block:12px}
 #gallery-caption{font-size:13px;line-height:1.5}
 footer{padding:40px var(--mobile-gutter) calc(28px + env(safe-area-inset-bottom))}
 footer .footer-grid{gap:28px}
 footer a{min-height:44px;align-content:center}
 footer li{margin-bottom:0}
 footer .copyright{margin-top:28px}
}
@media(max-width:760px){
 html{scroll-padding-top:0}
 .film-skip,.persistent-wa{bottom:calc(14px + env(safe-area-inset-bottom));min-height:44px;padding:11px 14px;font-size:12px;border:1px solid #ffffff30}
 .film-skip{left:var(--mobile-gutter);background:#14271f}
 .persistent-wa{right:var(--mobile-gutter)}
 .scroll-film:not([data-film-chapter^="MVI_"]){display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--mobile-gutter) calc(88px + env(safe-area-inset-bottom));gap:16px}
 .scroll-film:not([data-film-chapter^="MVI_"]) .film-caption{position:relative;inset:auto;max-width:100%;text-shadow:none}
 .scroll-film:not([data-film-chapter^="MVI_"]) .film-caption p{font-size:11px;line-height:1.5;margin:0 0 10px;max-width:32ch}
 .scroll-film:not([data-film-chapter^="MVI_"]) .film-caption h1,
 .scroll-film:not([data-film-chapter^="MVI_"]) .film-caption h2{font-size:clamp(29px,8vw,34px);line-height:1.08;max-width:16ch;text-wrap:balance}
 .scroll-film:not([data-film-chapter^="MVI_"]) .film-caption h2+p{margin:12px 0 0;max-width:35ch;font-size:12px;line-height:1.5}
 .scroll-film:not([data-film-chapter^="MVI_"]) .film-controls{position:relative;inset:auto;text-align:left}
 .film-controls button{min-height:44px;padding:10px 16px;font-size:13px;background:#14271fe8}
 .film-controls p{margin-top:8px;font-size:12px;line-height:1.5;padding-inline:0}
 .film-context-mobile{padding:24px var(--mobile-gutter) 32px;background:#f2f3ef;color:var(--ink)}
 .film-context-mobile figcaption{padding:14px 0 0;font-size:13px;line-height:1.5;max-width:29ch}
 #construccion-por-capas>video,#construccion-por-capas>[data-motion-poster]{height:calc(100% - 280px);top:20px;object-fit:contain}
 #construccion-por-capas::after{inset:55% 0 0;background:linear-gradient(transparent,#101a15 30%)}
 .photo-story-active figure{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;padding:24px var(--mobile-gutter) calc(88px + env(safe-area-inset-bottom));gap:22px}
 .photo-story-active img{grid-column:1;grid-row:1;height:100%;width:100%;min-height:0;object-fit:contain;margin:0}
 .photo-story-active figcaption{position:static;grid-column:1;grid-row:2;padding:0;margin:0;align-self:auto}
 .photo-story h2{max-width:18ch;font-size:30px;line-height:1.12;margin:8px 0 12px;text-wrap:balance}
 .photo-story small{font-size:10px;line-height:1.5}
 .mobile-chapter-break{display:block;background:var(--paper);color:var(--ink);padding:40px var(--mobile-gutter) 32px}
 .mobile-chapter-break p{font-size:11px;letter-spacing:.04em;color:var(--green);margin-bottom:14px}
 .mobile-chapter-break h2{font-size:32px;line-height:1.12;max-width:17ch;text-wrap:balance}
 .mobile-chapter-break a{display:inline-flex;align-items:center;min-height:44px;margin-top:16px;font-size:13px;color:var(--green)}
 [data-film-chapter^="MVI_"]{padding-bottom:30px;margin-bottom:0;border-bottom:1px solid #ffffff20}
 [data-film-chapter^="MVI_"] .film-caption{padding:22px var(--mobile-gutter) 18px}
 [data-film-chapter^="MVI_"] .film-caption p{font-size:11px;margin-bottom:10px}
 [data-film-chapter^="MVI_"] .film-caption h2{font-size:27px;max-width:20ch;line-height:1.15}
 [data-film-chapter^="MVI_"] .film-controls{padding-inline:var(--mobile-gutter)}
 .opening-copy{padding:12px var(--mobile-gutter) 28px;gap:18px}
 .opening-copy h2{font-size:34px;line-height:1.12}
 .project-directory a{font-size:22px;line-height:1.3;padding-block:22px;gap:20px}
 .page-index footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
/* Short phone landscape: keep the entire stage and its actions in view. */
@media(max-width:900px) and (max-height:500px){
 :root{--mobile-gutter:22px}
 html{scroll-padding-top:0}
 .reference-header{min-height:64px;padding:10px var(--mobile-gutter);gap:12px}
 .brand{font-size:22px;gap:9px;min-width:0}.brand img{width:36px;height:36px}.brand small{font-size:7px}
 .menu-trigger{display:flex;align-items:center;justify-content:center;gap:10px;min-width:72px;min-height:44px}
 .menu-trigger>span{position:static;width:auto;height:auto;overflow:visible;clip-path:none;font-size:12px}.menu-trigger i{width:19px;height:10px}
 #reference-nav{position:absolute;inset:100% 0 auto;flex-direction:column;align-items:stretch;gap:0;padding:12px var(--mobile-gutter) 20px;background:var(--ink);color:var(--paper);font-size:16px;max-height:calc(100svh - 64px);overflow-y:auto}
 #reference-nav a{min-height:44px}#reference-nav .quote{display:flex}.js #reference-nav{display:none}.js #reference-nav.open{display:flex}
 .film-skip,.persistent-wa{bottom:calc(12px + env(safe-area-inset-bottom));min-height:44px;padding:10px 14px;font-size:12px}
 .film-skip{left:var(--mobile-gutter)}.persistent-wa{right:var(--mobile-gutter)}
 .scroll-film,.scroll-film:not([data-film-chapter^="MVI_"]){height:100svh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;padding:64px var(--mobile-gutter) calc(72px + env(safe-area-inset-bottom));gap:12px}
 .scroll-film>video,.scroll-film>[data-motion-poster],#construccion-por-capas>video,#construccion-por-capas>[data-motion-poster]{position:absolute;inset:0 auto 0 0;width:54%;height:100%;aspect-ratio:auto;object-fit:contain}
 [data-film-chapter]::after{display:none}
 .scroll-film .film-caption,.scroll-film:not([data-film-chapter^="MVI_"]) .film-caption{position:relative;inset:auto;width:42%;max-width:none;padding:0;text-shadow:none}
 .scroll-film .film-caption h1,.scroll-film .film-caption h2,.scroll-film:not([data-film-chapter^="MVI_"]) .film-caption h1,.scroll-film:not([data-film-chapter^="MVI_"]) .film-caption h2{font-size:24px;line-height:1.12;max-width:none;margin:0}
 .scroll-film .film-caption p,.scroll-film:not([data-film-chapter^="MVI_"]) .film-caption p{font-size:11px;line-height:1.35;margin:0 0 8px;max-width:none}
 .scroll-film:not([data-film-chapter^="MVI_"]) .film-caption h2+p{font-size:11px;line-height:1.4;margin:8px 0 0}
 .scroll-film .film-controls,.scroll-film:not([data-film-chapter^="MVI_"]) .film-controls{position:relative;inset:auto;width:42%;padding:0;text-align:left}
 .film-controls button{min-height:44px;padding:8px 12px;font-size:12px}.film-controls p{margin:4px 0 0;font-size:11px}
 .photo-story-active{height:100svh;min-height:100svh}
 .photo-story-active figure{display:grid;grid-template-columns:minmax(0,54fr) minmax(0,42fr);grid-template-rows:minmax(0,1fr);gap:24px;padding:20px var(--mobile-gutter) calc(72px + env(safe-area-inset-bottom))}
 .photo-story-active img{grid-column:1;grid-row:1;height:100%;width:100%;min-height:0;object-fit:contain;margin:0}
 .photo-story-active figcaption{position:static;grid-column:2;grid-row:1;padding:0;margin:0;align-self:center}
 .photo-story h2{font-size:24px;line-height:1.12;max-width:none}.photo-story figcaption p{font-size:11px}.photo-story small{font-size:10px}
 footer a{min-height:44px;align-content:center}
}