/* Keep the composition readable from small phones through ultrawide displays. */
html,body{width:100%;max-width:100%;overflow-x:clip}
main,header,footer{min-width:0}
.section,.project,.approach-content>*,.approach-interviews>*,.principles>*,.journey-copy,.journey-image{min-width:0}
img,video{max-width:100%}
header nav{gap:clamp(18px,2.5vw,34px)}
header nav a{white-space:nowrap}
.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.project{display:flex;flex-direction:column}
.project[hidden]{display:none}
.project-image{width:100%;flex:none}
.project-info{display:block;min-height:88px;flex:1}
.project-info h3{font-size:clamp(21px,1.7vw,26px);line-height:1.15;overflow-wrap:break-word}
.project-info>span{display:block;font-size:9px;line-height:1.5;margin-top:8px}
.journey-panel{gap:clamp(24px,4vw,72px);padding-inline:clamp(24px,5vw,90px);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.journey-panel:first-child{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.journey-top{top:128px}
.journey-copy p{max-width:44ch}
.contact h2{overflow-wrap:break-word}
.contact-bottom,.contact-actions,.dialog-copy,.quote-services{min-width:0}
.email-address{overflow-wrap:anywhere}
dialog{max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);overscroll-behavior:contain}
#detail-video{display:block;width:100%;max-height:65dvh;object-fit:contain;background:#111}
#detail-video[hidden]{display:none}
form>*{min-width:0}
input,select,textarea{max-width:100%;min-width:0}
.film-strip{height:calc(94% + var(--spread)*6%)}
.film-space{top:140px}
.montage-screen{left:50%;top:0;width:min(68%,calc(clamp(320px,48svh,520px)*1.77778));height:auto;aspect-ratio:16/9;transform:translate3d(calc(-50% + var(--mx)*-10px),calc(var(--my)*-6px),0) scale(calc(1 - var(--spread)*.08))}
@media(min-width:761px) and (max-width:1500px){
 .montage-screen{width:min(68%,calc(clamp(220px,100svh - 450px,480px)*1.77778))}
}
@media(min-width:1600px){.project-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:2000px){
 body header,.reel-expanded header{max-width:none;padding-inline:max(5%,calc((100vw - 1600px)/2))}
 .hero-main{bottom:100px}
 .hero-action{max-width:440px}
 .hero-action>p{font-size:14px}
 .film-hud{font-size:10px}
}
@media(min-width:761px) and (max-width:1000px){
 header nav a{font-size:17px;letter-spacing:1.2px}
 .journey-copy h2{font-size:clamp(68px,10vw,100px)}
 .journey-tags{font-size:7px;line-height:1.8}
 .approach-content{column-gap:5%}
}
@media(max-width:760px){
 html{scroll-padding-top:108px}
 body header,.reel-expanded header{height:88px;padding-inline:5%}
 header .logo img{width:85px;height:48px}
 header .contact-link,.menu{min-height:44px;display:flex;align-items:center}
 header .contact-link{font-size:15px;margin-right:14px}
 header nav.open{top:88px;max-height:calc(100dvh - 88px);overflow-y:auto}
 header nav a{min-height:44px;display:flex;align-items:center}
 .takeover{height:calc(max(800px,100svh) + 55svh)}
 .hero-sticky{height:max(800px,100svh);min-height:800px}
 /* Let the phone reels grow behind the statement as the intro scrolls away. */
 .film-space{--phone-reel-base:clamp(240px,calc(33svh + 24px),354px);--phone-reel-full:calc(max(800px,100svh) - 240px);--phone-reel-height:calc(var(--phone-reel-base) + (var(--phone-reel-full) - var(--phone-reel-base))*var(--mobile-reel-spread,0));top:132px;left:0;right:0;bottom:auto!important;height:var(--phone-reel-height)}
 .film-strip .strip-frame{min-height:calc(var(--phone-reel-height)/7)}
 .reel-expanded .film-space{height:100%!important}
 .montage-screen{left:10%;top:calc(18% + 16px);width:80%;height:auto;aspect-ratio:16/9;transform:translate3d(calc(var(--mx)*-6px),calc(var(--my)*-4px),0)}
 .film-strip{height:100%}
 .screen-label{bottom:12px;font-size:6px;left:10px;right:10px}
 .hero-main{top:calc(152px + clamp(220px,33svh,330px));bottom:auto;left:6%;right:6%;padding:10px 0;display:block}
 .hero-main h1{font-size:clamp(43px,12.3vw,78px);white-space:normal;line-height:.94}
 .hero-main .eyebrow{font-size:7px;line-height:1.5;letter-spacing:.8px;margin-bottom:12px}
 .hero-action{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;gap:12px;margin-top:18px;max-width:100%;width:100%}
 .hero-action>p{max-width:100%;width:100%;font-size:11px;line-height:1.65;margin:0}
 .hero-play{font-size:10px;min-height:44px;gap:12px}
 .hero-play>span{width:44px;height:44px;font-size:11px}
 .hero-inquiry{min-height:44px;font-size:17px}
 .hero-footer{bottom:20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 10px;left:6%;right:6%;font-size:7px}
 .hero-footer>span{flex-basis:100%}
 .hero-footer button{min-height:32px;font-size:7px}
 .film-hud>span:first-child{white-space:nowrap}
 .film-hud #timecode{font-size:8px;letter-spacing:.5px;margin-left:8px}
 .reel-expanded .hero-sticky .montage-screen{left:0;top:0;width:100%;height:100%;aspect-ratio:auto;transform:none!important}
 .project-grid{grid-template-columns:minmax(0,1fr);gap:26px}
 .filters{white-space:normal;overflow:visible;grid-template-columns:repeat(2,minmax(0,1fr))}
 .filters button{min-height:48px;font-size:16px;letter-spacing:.5px;line-height:1.25}
 .project-info{min-height:82px}
 .project-info h3{font-size:23px}
 .journey-top{top:35px}
 .journey-panel{padding:35px 6% 60px;gap:25px}
 .journey-panel:first-child .journey-image{width:100%;aspect-ratio:2.2;min-height:0}
 .journey-copy p{font-size:14px;line-height:1.7}
 .journey-tags{font-size:8px;line-height:1.8}
 .approach-copy p{font-size:14px}
 .contact h2{font-size:clamp(44px,10vw,72px)}
 .contact-bottom p{font-size:14px}
 .contact .pill{min-height:48px;font-size:12px}
 input,textarea,select{font-size:16px;min-height:44px}
 label{font-size:13px}
 .quote-services label{font-size:13px;min-height:44px}
 .quote-services input{min-height:0}
 .dialog-copy h2{font-size:32px}
}
@media(max-width:600px){
 .principles,.approach .principles{grid-template-columns:1fr;gap:24px}
 .principles h3{font-size:21px;margin:12px 0 8px}
 .principles p{font-size:14px}
 summary{gap:15px}
 summary h3{font-size:clamp(21px,5.8vw,28px)}
 .service-body{padding-inline:0}
 .service-body p{font-size:14px}
 .detail-meta{flex-wrap:wrap;gap:12px}
}
@media(min-width:761px) and (max-height:600px){
 .takeover{height:800px}
 .hero-sticky{position:relative;height:800px;min-height:800px}
 .film-space{top:130px;bottom:auto!important;height:320px}
 .hero-main{opacity:1!important;transform:none!important;bottom:85px}
 .scroll-title{display:none}
 .journey{height:auto}
 .journey-sticky{height:auto;min-height:0;position:relative;padding-top:100px}
 .journey-top{top:50px}
 .journey-track{width:100%;display:block;transform:none!important}
 .journey-panel{width:100%;min-height:460px;padding-block:70px}
 .journey-meter{display:none}
 .journey-skip{position:relative;bottom:auto;margin-bottom:30px}
}
@media(prefers-reduced-motion:reduce){
 .hero-main{opacity:1!important;transform:none!important}
 .takeover{height:auto}
 .hero-sticky{position:relative}
}

@media(max-width:760px){body header nav.open{position:absolute;top:88px;left:0;right:0;width:auto;display:flex;flex-direction:column;gap:4px;padding:18px 6%;background:#FAF9F5;border-bottom:1px solid #CBA63280;box-shadow:0 12px 20px #332C1712;z-index:105}body header nav.open a{font-size:21px;min-height:48px;white-space:normal}}


/* Drawn studio icons stay identical on phones, tablets and desktop. */
.site-icon{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.12em}
.hero-play .site-icon{width:14px;height:14px}
.project-arrow .site-icon{width:24px;height:24px}
.hero-footer .site-icon{width:10px;height:10px}
.play-hint .site-icon{width:9px;height:9px;vertical-align:-.05em}
.social-links{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:22px}
.social-links a{display:inline-flex;align-items:center;gap:12px;font-family:'Barlow Condensed',Impact,sans-serif;font-size:19px;letter-spacing:.5px;text-decoration:none;border-bottom:1px solid #CBA63270;padding-bottom:5px}
.social-links a:hover{border-color:#CBA632}
#quote-status{grid-column:1/-1;font-size:14px}
#quote-status:empty{display:none}
#quote-status a{text-decoration:underline}
#inquiry-form[hidden]{display:none}
@media(max-width:760px),(hover:none),(pointer:coarse){
 .project.reveal{opacity:1;transform:none}
 .project-image video{display:none}
}
@media(min-width:761px) and (prefers-reduced-motion:reduce){
 .montage-screen{transform:translateX(-50%)!important}
 .reel-expanded .montage-screen{transform:none!important}
}