/* Editorial proportions, cinematic imagery, and quiet typography. */
:root{--cream:#f4eee3;--tile:#e9dfcd;--gold:#e9c886}
body{padding:28px;background:#302018}
.site-shell{border-radius:20px 20px 0 0}
header{padding:26px 38px}
.hero h1{font-size:80px;line-height:1.02;letter-spacing:2px}
.hero-bottom{left:38px;right:38px}
.hero-copy{width:310px}
.hero-copy p{font-size:14px}
.hero .reel-note{font-size:11px}
.work-proof{background:var(--hero);border-top:1px solid #d8ba8233;color:var(--gold);padding:20px 38px;justify-content:space-between}
.work-proof span{color:#d8c9b5}
.work-proof strong{font-weight:400;letter-spacing:2px;font-size:13px}
section:not(.hero){padding:52px 38px}
.section-label{font-size:10px;letter-spacing:1px;margin-bottom:30px}
.section-label span{font-size:10px}
.editorial-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;margin:0 0 42px}
.editorial-intro h2{font:108px/.96 Might,Impact,sans-serif;letter-spacing:2px;margin:0}
.editorial-intro h2 span{color:#a6927d}
.editorial-intro>div{padding-bottom:8px;max-width:300px}
.editorial-intro p{font-size:16px;line-height:1.7;margin:0 0 20px;color:var(--muted)}
.editorial-gallery{display:grid;grid-template-columns:minmax(0,1fr);gap:42px}
.editorial-film{min-width:0}
.film-topline{display:flex;justify-content:space-between;gap:14px;font-size:10px;letter-spacing:1px;text-transform:uppercase;margin-bottom:12px;color:#786452}
.editorial-film .film-media{display:block;border-radius:4px;aspect-ratio:var(--film-ratio);height:auto;background:#251b15}
.editorial-film .film-media img{width:100%;height:100%;inset:0;object-fit:contain;transition:filter .4s ease}
.editorial-film .film-media:hover img{filter:brightness(.85)}
.play-orbit{position:absolute;right:18px;bottom:18px;display:grid;place-items:center;width:48px;height:48px;border:1px solid #fff9;border-radius:50%;color:white;background:#23180e40;backdrop-filter:blur(8px);font:26px/1 Arimo,Arial,sans-serif;transition:background .2s}
.film-invitation{position:absolute;left:18px;bottom:22px;background:#291b15b3;border:1px solid #fff4;border-radius:20px;color:white;padding:7px 12px;font-size:11px;letter-spacing:.5px}
.film-media:hover .play-orbit{background:var(--cream);color:var(--ink)}
.editorial-caption{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding-top:16px}
.editorial-caption h3{font:44px/1.02 Might,Impact,sans-serif;text-transform:uppercase;letter-spacing:1px}
.editorial-caption>span{font-size:10px;white-space:nowrap;color:#786452}
.film-notes{margin-top:12px;border-top:1px solid #c7b59c7a}
.film-notes summary{cursor:pointer;display:flex;justify-content:space-between;padding:12px 0 0;font-size:11px;color:var(--muted);list-style:none}
.film-notes summary::-webkit-details-marker{display:none}
.film-notes summary span{font-size:16px}
.film-notes p{font-size:14px;line-height:1.6;color:var(--muted);margin-top:12px}
.film-notes .credit{font-size:11px}
/* Compositions follow the source orientation and retain reading order. */
.film-composition{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:32px;align-items:start}
.film-stack{display:grid;gap:32px}
.film-triptych{display:grid;grid-template-columns:1fr 1fr 3.448fr;gap:28px;align-items:start}
.film-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}
.editorial-gallery>.editorial-film .editorial-caption h3{font-size:64px}
.film-composition>.editorial-film .editorial-caption,.film-triptych .editorial-caption{display:block}
.film-composition>.editorial-film .editorial-caption>span,.film-triptych .editorial-caption>span{display:block;margin-top:8px}
.film-triptych .editorial-caption h3{font-size:36px}
.collection-end{border-top:1px solid #bba98e;margin-top:34px;padding-top:20px;display:flex;justify-content:space-between;gap:20px;font-size:13px;color:var(--muted)}
.collection-end a{color:var(--ink)}
.services>h2{font-size:84px;max-width:650px;letter-spacing:2px}
.services-grid{display:block;margin-top:32px}
.services-grid article{display:grid;grid-template-columns:60px 1fr 1fr;gap:24px;align-items:baseline;padding:24px 0;border-top:1px solid #bbaa924d}
.services-grid h3{font:36px/1 Might,Impact,sans-serif;text-transform:uppercase;letter-spacing:1px;margin:0}
.process-heading{margin-top:22px}
.software ul{margin-top:28px}
.supporting .section-intro{display:block;max-width:750px;margin-bottom:30px}
.supporting .section-intro h2{font-size:76px;line-height:1.05}
.supporting .section-intro>p{max-width:540px;margin-top:16px}
.support-grid{gap:24px}
.support-grid .brand-card,.support-grid .web-card{border-radius:4px;background:transparent}
.support-grid .brand-tile,.support-grid .web-media{border-radius:4px;background:var(--tile)}
.support-grid h4{padding-left:0!important}
.support-grid .project-type{padding-left:0}
.about{background:#e8decd}
.about h2{font-size:76px}
.contact h2{font:100px/.98 Might,Impact,sans-serif;letter-spacing:2px}
.contact-brief{font-size:15px}
.button{transition:background .2s,color .2s}
@media(max-width:1247px){
 body{padding:18px}
 .hero-bottom{left:auto;right:auto;padding:10px 30px 36px}
 .hero h1{font-size:64px}
 .hero-copy{width:38%}
 .editorial-intro h2{font-size:90px}
 .editorial-caption{display:block}
 .editorial-caption>span{display:block;margin-top:8px}
 .editorial-caption h3{font-size:40px}
 .services>h2{font-size:72px}
}
@media(max-width:700px){
 body{padding:0}
 .site-shell{border-radius:0}
 header{padding:20px}
 .hero-bottom{padding:10px 22px 30px}
 .hero h1{font-size:52px;letter-spacing:1px}
 .hero-copy{width:auto}
 .hero-copy p{font-size:15px}
 .work-proof{padding:18px 22px;gap:16px;justify-content:center}
 .work-proof strong{font-size:11px}
 section:not(.hero){padding:36px 22px}
 .section-label{margin-bottom:24px;gap:12px}
 .section-label span{font-size:9px;letter-spacing:.7px}
 .editorial-intro{display:block;margin-bottom:30px}
 .editorial-intro h2{font-size:70px;line-height:.96}
 .editorial-intro>div{margin-top:20px;padding:0}
 .editorial-intro p{font-size:14px;margin-bottom:12px}
 .editorial-gallery{grid-template-columns:minmax(0,1fr);gap:30px}
 .editorial-film,.editorial-film:first-child{grid-column:auto;margin-top:0}
 .film-composition,.film-stack,.film-triptych,.film-pair{grid-template-columns:minmax(0,1fr);gap:30px}
 .editorial-gallery>.editorial-film .editorial-caption h3{font-size:44px}
 .editorial-film:first-child .editorial-caption h3{font-size:44px}
 .editorial-caption{display:flex;align-items:flex-start;gap:12px;padding-top:14px}
 .editorial-caption h3,.film-6 .editorial-caption h3,.film-7 .editorial-caption h3,.film-8 .editorial-caption h3{font-size:36px;margin:0}
 .editorial-caption>span{margin-top:4px;font-size:9px}
 .film-topline{font-size:9px;margin-bottom:10px}
 .film-notes summary{min-height:44px;align-items:center;padding-top:0}
 .play-orbit{width:42px;height:42px;right:12px;bottom:12px}
 .film-invitation{left:12px;bottom:17px}
 .collection-end{flex-direction:column;gap:12px;font-size:12px}
 .services>h2,.supporting .section-intro h2,.about h2{font-size:54px}
 .services-grid article{grid-template-columns:26px 1fr;gap:12px;padding:20px 0}
 .services-grid h3{font-size:32px}
 .services-grid p{grid-column:2;font-size:14px}
 .process-heading h3{font-size:19px}
 .support-grid{gap:22px 14px}
 .contact h2{font-size:68px;letter-spacing:1px}
 .contact-bottom .contact-actions{gap:10px}
 .contact .button{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.editorial-film .film-media img{transition:none}.editorial-film .film-media:hover img{transform:none}}

/* Keep the complete collage and primary actions inside the opening viewport. */
header{position:relative;background:var(--hero);padding-top:18px;padding-bottom:18px}
.hero{height:auto;min-height:0}
.hero-visual{position:relative;inset:auto;width:100%;height:var(--visual-height,420px);overflow:hidden}
.hero-art{position:absolute;left:50%;top:0;transform:translateX(-50%) scale(var(--art-scale,1));transform-origin:top center}
.hero-bottom{position:relative;inset:auto;height:auto;padding:16px 38px 24px;align-items:center;gap:24px}
.hero h1{font-size:64px;line-height:1.02}
.hero-copy{width:340px;flex-shrink:0}
.hero-copy p{margin-bottom:12px;line-height:1.5}
.hero .reel-note{margin-bottom:10px}
.hero .actions{gap:10px}
@media(max-width:700px){
 header{padding:12px 20px;gap:6px}
 nav a{min-height:36px}
 .hero-bottom{padding:8px 22px 20px}
 .hero h1{font-size:44px;line-height:1.02}
 .hero-copy{width:auto;margin-top:12px}
 .hero-copy p{font-size:14px;line-height:1.45;margin-bottom:10px}
 .hero .reel-note{font-size:11px;margin-bottom:10px}
 .hero .button{padding:10px 12px;font-size:12px}
}
@media(min-width:701px) and (max-width:1000px){
 .hero h1{font-size:52px}
 .hero-copy{width:45%}
 .hero-bottom{padding-left:30px;padding-right:30px}
}

@media(min-width:1001px){
 .hero-bottom{position:absolute;top:auto;bottom:0;left:0;right:0;padding:16px 38px 24px}
}

/* A touch-friendly horizontal toolkit. */
.tools-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--gold);font-size:12px}
.tools-controls>div{display:flex;gap:10px}
.tools-controls button{width:44px;height:44px;border:1px solid #d8ba8266;border-radius:50%;background:transparent;color:var(--gold);font-size:22px}
.tools-controls button:hover:not(:disabled){background:var(--gold);color:var(--ink)}
.tools-controls button:disabled{opacity:.3;cursor:default}
.software .tools-track{display:flex;gap:22px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#b69a66 #ffffff0a;margin:18px 0 0;padding:0 0 20px}
.software .tools-track li{flex:0 0 calc((100% - 88px)/5);scroll-snap-align:start;border:1px solid #d8ba8233;border-radius:8px;padding:24px 12px;gap:12px;background:#ffffff03}
.software .tools-track .software-icon img{max-width:100%;max-height:100%}
@media(max-width:1000px){.software .tools-track li{flex-basis:calc((100% - 44px)/3)}}
@media(max-width:700px){.software .tools-track{gap:14px}.software .tools-track li{flex-basis:calc((100% - 24px)/2);padding:20px 8px}.tools-note{line-height:1.5}}

/* Compact spacing rhythm, retaining readable copy and touch targets. */
section:not(.hero){padding-top:32px;padding-bottom:32px}
.section-label{margin-bottom:18px}
.editorial-intro{margin-bottom:26px;gap:24px}
.editorial-intro p{margin-bottom:12px}
.editorial-gallery{gap:26px}
.film-composition,.film-stack,.film-triptych,.film-pair{gap:22px}
.film-topline{margin-bottom:8px}
.editorial-caption{padding-top:10px;gap:12px}
.film-notes{margin-top:8px}
.film-notes summary{min-height:36px;align-items:center;padding:4px 0}
.collection-end{margin-top:22px;padding-top:14px}
.work-proof{padding-top:14px;padding-bottom:14px}
.services-grid{margin-top:22px}
.services-grid article{padding:16px 0;gap:16px}
.supporting .section-intro{margin-bottom:20px}
.supporting .section-intro>p{margin-top:10px}
.support-grid{gap:16px}
.about-grid{gap:24px;margin:10px 0 0}
.about p{margin-bottom:12px}
.tools-note{margin-bottom:8px}
.software .tools-track{margin-top:10px;padding-bottom:12px;gap:16px}
.software .tools-track li{flex-basis:calc((100% - 64px)/5);padding:16px 10px;gap:8px}
.contact{padding-top:28px!important;padding-bottom:26px!important}
.contact h2{margin:14px 0 18px}
.contact-brief{margin-bottom:16px}
footer{padding-top:16px;padding-bottom:16px}
@media(max-width:1000px){.software .tools-track li{flex-basis:calc((100% - 32px)/3)}}
@media(max-width:700px){
 section:not(.hero){padding-top:26px;padding-bottom:26px}
 .section-label{margin-bottom:16px}
 .editorial-intro{margin-bottom:20px}
 .editorial-intro>div{margin-top:12px}
 .editorial-gallery,.film-composition,.film-stack,.film-triptych,.film-pair{gap:20px}
 .film-notes summary{min-height:44px}
 .services-grid{margin-top:16px}
 .services-grid article{padding:14px 0;gap:8px 12px}
 .support-grid{gap:16px 12px}
 .software .tools-track{gap:12px}
 .software .tools-track li{flex-basis:calc((100% - 22px)/2);padding:14px 8px}
 .work-proof{padding-top:12px;padding-bottom:12px;gap:10px}
 .about-grid{gap:16px}
 .contact-bottom{gap:18px}
}