@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
:root{--bg:#080808;--panel:#141414;--line:#2b2b2b;--ink:#f4f2ee;--muted:#a4a3a0;--radius:24px;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}img{display:block;max-width:100%}button,a,input{touch-action:manipulation}a:focus-visible,button:focus-visible{outline:2px solid #fff;outline-offset:5px}button:disabled{opacity:.3;cursor:default}::selection{background:#ddd;color:#111}.wrap{width:min(1260px,calc(100% - 80px));margin:auto}.site-header{height:112px;display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;z-index:10}.brand img{width:120px;height:48px;object-fit:contain}.nav{display:flex;align-items:center;gap:28px;padding:19px 27px;background:#1b1b1b;border-radius:100px;font-size:13px}.nav a{color:#c5c4c0}.nav a:hover{color:#fff}.nav .nav-contact{color:#fff}.hero{overflow:hidden;padding:76px 0 70px}.eyebrow{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);margin:0 0 24px}.hero-copy{text-align:center;max-width:900px;margin:auto;padding:0 24px}.hero h1{font-size:clamp(42px,5.9vw,82px);font-weight:500;line-height:1.12;letter-spacing:-.065em;margin:0}.hero h1 span{color:#868684}.hero-description{max-width:510px;margin:24px auto 0;color:var(--muted);font-size:15px;line-height:1.8}.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;border:1px solid #5b5b58;border-radius:100px;min-height:47px;padding:13px 24px;background:transparent;font-size:12px;font-weight:600;transition:background .2s,color .2s}.button.solid{background:var(--ink);border-color:var(--ink);color:#111}.button:hover{background:#d3d1cc;color:#111;border-color:#d3d1cc}.hero-gallery{margin:65px -80px 30px;transform:rotate(-5deg);display:flex;gap:20px;justify-content:center;padding:30px 0}.hero-tile{flex:0 0 300px;position:relative;overflow:hidden;border-radius:22px;aspect-ratio:1.25;background:var(--panel)}.hero-tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.hero-tile:hover img{transform:scale(1.05)}.hero-tile span{position:absolute;bottom:0;left:0;right:0;padding:45px 20px 18px;background:linear-gradient(transparent,#000b);font-size:12px}.hero-tile:nth-child(even){transform:translateY(12px)}.hero-bottom{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding-top:26px}.section{padding:105px 0;border-top:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:35px;margin-bottom:42px}.section-heading h2,.about h2{font-weight:500;font-size:clamp(32px,4.4vw,58px);letter-spacing:-.055em;line-height:1.13;margin:0}.section-heading h2 span{color:#888}.section-heading p{max-width:350px;font-size:13px;line-height:1.8;color:var(--muted);margin:0}.film-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 28px}.film-card{display:block;min-width:0}.film-image{position:relative;aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;background:var(--panel)}.film-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.film-card:hover .film-image img{transform:scale(1.035)}.open-mark{position:absolute;right:18px;bottom:18px;width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:#f4f2eedd;color:#111;font-size:19px}.film-meta{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-top:19px}.film-meta h3{font-size:20px;letter-spacing:-.04em;font-weight:500;margin:0;line-height:1.35}.film-meta p{font-size:10px;line-height:1.6;color:var(--muted);margin:0;text-align:right}.film-card.portrait .film-image img{object-fit:contain}.shorts-heading-actions{display:flex;gap:10px}.round-button{height:44px;width:44px;border:1px solid #555;background:transparent;border-radius:50%;font-size:20px}.shorts-rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#666 transparent;padding:4px 0 24px}.short-card{flex:0 0 calc((100% - 60px)/4);scroll-snap-align:start;min-width:0}.short-card .film-image{aspect-ratio:9/16;border-radius:20px}.short-card .film-image img{object-fit:cover}.short-card .film-meta{display:block;padding-top:15px}.short-card .film-meta h3{font-size:16px}.short-card .film-meta p{text-align:left;margin-top:6px;font-size:10px}.short-intro{color:var(--muted);font-size:13px;line-height:1.8;max-width:490px;margin:20px 0 0}.about{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.about-image{aspect-ratio:1.15;border-radius:var(--radius);overflow:hidden}.about-image img{width:100%;height:100%;object-fit:cover;object-position:center 35%;filter:grayscale(1)}.about p{color:var(--muted);line-height:1.9;font-size:14px}.services-line{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}.services-line span{font-size:10px;padding:9px 12px;border:1px solid #383838;border-radius:100px}.clients{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:35px;margin-top:46px}.clients img{width:125px;height:45px;object-fit:contain;opacity:.7}.contact{border-radius:30px;background:#191919;padding:65px;text-align:center}.contact h2{font-size:clamp(38px,6vw,78px);letter-spacing:-.06em;font-weight:500;margin:0}.contact p{color:var(--muted);font-size:14px;line-height:1.8}.contact-email{display:inline-block;font-size:clamp(16px,2.5vw,28px);margin-top:20px;border-bottom:1px solid #666;padding-bottom:9px}.footer{padding:35px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted);font-size:10px}.footer-links{display:flex;gap:20px}.project-intro{padding:58px 0 44px}.back-link{font-size:12px;color:var(--muted)}.project-intro h1{font-size:clamp(40px,6.5vw,88px);font-weight:500;letter-spacing:-.06em;line-height:1.1;max-width:1000px;margin:32px 0 24px}.project-facts{display:flex;flex-wrap:wrap;gap:24px 80px;color:var(--muted);font-size:12px;line-height:1.8}.project-facts span{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px;color:#81817d}.player{position:relative;aspect-ratio:16/9;background:#111;border-radius:var(--radius);overflow:hidden}.player.portrait-player{max-width:480px;margin:auto;aspect-ratio:9/16}.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.play-film{width:100%;height:100%;padding:0;border:0;position:absolute;inset:0;background:#111}.play-film img{width:100%;height:100%;object-fit:cover}.play-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0002}.play-label span{background:#f4f2ee;color:#111;border-radius:100px;padding:17px 25px;font-size:13px;font-weight:600}.project-story{display:grid;grid-template-columns:1fr 1.7fr;gap:70px;padding:65px 0}.project-story h2{font-weight:500;font-size:28px;letter-spacing:-.04em;margin:0}.project-story p{color:var(--muted);font-size:16px;line-height:1.9;margin:0}.stills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.stills figure{margin:0;min-width:0}.stills img{aspect-ratio:16/9;width:100%;object-fit:cover;border-radius:18px;background:#151515}.stills figcaption{font-size:10px;color:var(--muted);margin-top:12px}.project-next{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:45px 0;border-top:1px solid var(--line);margin-top:80px}.project-next span{font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:var(--muted)}.project-next strong{display:block;font-size:clamp(23px,3.5vw,45px);font-weight:500;letter-spacing:-.04em;margin-top:14px}.project-next .next-arrow{font-size:40px;color:var(--ink)}
@media(min-width:1600px){.hero-tile{flex-basis:350px}}@media(max-width:900px){.wrap{width:calc(100% - 44px)}.hero{padding-top:55px}.hero-tile{flex-basis:250px}.hero-gallery{gap:14px}.short-card{flex-basis:calc((100% - 40px)/3)}.about{gap:35px}.contact{padding:45px 25px}.film-meta{display:block}.film-meta p{text-align:left;margin-top:8px}.section{padding:75px 0}}@media(max-width:600px){.site-header{height:88px}.brand img{width:90px;height:40px}.nav{padding:13px 17px;gap:16px;font-size:11px}.nav .nav-about{display:none}.hero{padding:38px 0 40px}.hero h1{font-size:43px}.hero-description{font-size:13px;max-width:330px}.eyebrow{font-size:9px;letter-spacing:.15em}.hero-gallery{margin:35px -25px 12px;gap:12px;transform:rotate(-4deg)}.hero-tile{flex-basis:190px;border-radius:17px;aspect-ratio:1.08}.hero-bottom{font-size:9px;line-height:1.8}.section-heading{display:block;margin-bottom:30px}.section-heading p{margin-top:20px}.section-heading .shorts-heading-actions{margin-top:24px}.film-grid{grid-template-columns:1fr;gap:32px}.film-image{border-radius:19px}.film-meta h3{font-size:20px}.short-card{flex-basis:69%}.short-card .film-image{border-radius:18px}.shorts-rail{gap:15px}.about{grid-template-columns:1fr;gap:30px}.about-image{aspect-ratio:1.15}.section{padding:60px 0}.clients{justify-content:center;gap:25px}.clients img{width:90px}.footer{align-items:flex-start;flex-direction:column;line-height:1.8}.project-intro{padding-top:35px}.project-facts{gap:18px 30px}.project-story{grid-template-columns:1fr;gap:20px;padding:40px 0}.project-story p{font-size:14px}.player{border-radius:17px}.stills{grid-template-columns:1fr;gap:25px}.stills img{border-radius:16px}.project-next{margin-top:50px}.contact-email{overflow-wrap:anywhere}.actions{gap:10px}.button{padding:12px 20px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:400px){.site-header{gap:10px}.brand img{width:72px}.nav{padding:12px 14px;gap:12px;font-size:10px}.hero h1{font-size:37px}.wrap{width:calc(100% - 36px)}}
/* Compact portfolio overview; full-size presentation lives on project pages. */
#work.section { padding:64px 0; }
#work .section-heading { margin-bottom:28px; }
#work .section-heading h2 { font-size:clamp(28px,3.3vw,42px); }
#work .film-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 22px; }
#work .film-image { aspect-ratio:16/9; border-radius:15px; }
#work .film-meta { display:block; padding-top:12px; }
#work .film-meta h3 { font-size:15px; letter-spacing:-.025em; line-height:1.4; }
#work .film-meta p { text-align:left; font-size:10px; line-height:1.6; margin-top:5px; }
#work .open-mark { width:30px; height:30px; right:12px; bottom:12px; font-size:16px; }
@media(min-width:1500px) { #work .film-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:900px) { #work .film-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 16px; } }
@media(max-width:700px) {
 #work.section { padding:44px 0; }
 #work .film-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 14px; }
 #work .film-image { border-radius:12px; }
 #work .film-meta h3 { font-size:13px; }
 #work .film-meta p { font-size:9px; }
 #work .open-mark { width:26px; height:26px; right:8px; bottom:8px; font-size:14px; }
}
/* Decorative, seamless hero strip: no links, captions or hover pause. */
.hero-gallery { display:block; margin:48px 0 28px; padding:24px 0; overflow:visible; pointer-events:none; }
.hero-track { display:flex; width:max-content; animation:hero-drift 45s linear infinite; will-change:transform; }
.hero-strip { display:flex; flex:none; gap:20px; padding-right:20px; }
.hero-strip .hero-tile { flex:none; width:300px; aspect-ratio:16/9; }
.hero-strip .hero-tile img { object-fit:contain; transform:none; }
@keyframes hero-drift { from { transform:translateX(0); } to { transform:translateX(-50%); } }
/* Repeating three-small / two-wide rows, without oversized full-width films. */
#work .film-grid { grid-template-columns:repeat(6,minmax(0,1fr)); align-items:start; gap:28px 22px; }
#work .film-card { grid-column:span 2; }
#work .film-card:nth-child(5n + 4),#work .film-card:nth-child(5n + 5) { grid-column:span 3; }
#work .film-image { aspect-ratio:auto; height:clamp(145px,15vw,200px); }
#work .film-card:nth-child(5n + 4) .film-image,#work .film-card:nth-child(5n + 5) .film-image { height:clamp(165px,17vw,225px); }
@media(max-width:900px) {
 .hero-strip { gap:14px; padding-right:14px; }
 .hero-strip .hero-tile { width:250px; }
 #work .film-grid { gap:24px 16px; }
}
@media(max-width:700px) {
 #work .film-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 14px; }
 #work .film-card,#work .film-card:nth-child(5n + 4),#work .film-card:nth-child(5n + 5) { grid-column:span 1; }
 #work .film-card:nth-child(5n + 1) { grid-column:1 / -1; }
 #work .film-image,#work .film-card:nth-child(5n + 4) .film-image,#work .film-card:nth-child(5n + 5) .film-image { height:auto; aspect-ratio:16/10; }
 #work .film-card:nth-child(5n + 1) .film-image { aspect-ratio:2.4; }
 .hero-gallery { margin:30px 0 12px; }
 .hero-strip { gap:12px; padding-right:12px; }
 .hero-strip .hero-tile { width:190px; }
 .hero-track { animation-duration:36s; }
}
@media(prefers-reduced-motion:reduce) { .hero-track { animation:none; will-change:auto; } }
/* Full-width collaboration band and manually controlled, looping feedback. */
.client-band { width:100%;background:#151515;border-top:1px solid #303030;border-bottom:1px solid #303030;padding:60px 0 32px; }
.feedback-heading {display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-bottom:30px;}
.feedback-heading h2 {font-size:clamp(30px,3.8vw,50px);font-weight:500;line-height:1.1;letter-spacing:-.05em;margin:0;}
.feedback-heading h2 span {color:#91918c;}
.feedback-controls {display:flex;gap:10px;}
.feedback-slides {max-width:850px;min-height:220px;}
.feedback-slide[hidden] {display:none;}
.feedback-draft-label {font-size:9px;letter-spacing:.13em;color:#b3b2a8;margin:0 0 18px;}
.feedback-quote {font-size:clamp(22px,3vw,36px);font-weight:400;line-height:1.45;letter-spacing:-.035em;margin:0;}
.feedback-author {font-size:11px;color:var(--muted);margin:22px 0 0;}
.feedback-progress {display:flex;justify-content:space-between;gap:20px;align-items:center;color:#a5a49e;font-size:10px;margin:24px 0 28px;line-height:1.6;}
.client-logos {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid #373731;padding-top:28px;}
.client-logos img {width:90px;height:34px;object-fit:contain;opacity:.65;}
@media(max-width:600px){.client-band{padding:40px 0 28px;}.feedback-heading{margin-bottom:26px;}.feedback-slides{min-height:270px;}.feedback-quote{font-size:24px;}.feedback-draft-label{font-size:9px;line-height:1.7;}.feedback-progress{align-items:flex-start;}.feedback-progress span:last-child{max-width:160px;text-align:right;}.client-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 16px;justify-items:center;}.client-logos img{width:72px;height:29px;}}
/* Three alternating logo lanes with a compact feedback bubble in the foreground. */
.logo-feedback-band {position:relative;isolation:isolate;overflow:hidden;min-height:460px;padding:78px 24px;background:#0e0e0e;display:flex;align-items:center;justify-content:center;}
.logo-wall {position:absolute;inset:58px 0;display:flex;flex-direction:column;justify-content:center;gap:17px;z-index:-1;pointer-events:none;mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);}
.logo-lane {width:100%;overflow:hidden;flex:none;}
.logo-lane-track {display:flex;width:max-content;will-change:transform;animation:logos-right 58s linear infinite;}
.logo-lane-group {display:flex;flex:none;gap:18px;padding-right:18px;}
.logo-chip {display:flex;align-items:center;justify-content:center;width:145px;height:82px;background:#1b1b1b;border:1px solid #292929;border-radius:16px;}
.logo-chip img {width:85px;height:30px;object-fit:contain;opacity:.48;}
.logo-lane.lane-2 .logo-lane-track {animation-name:logos-left;animation-duration:65s;}
.logo-lane.lane-3 .logo-lane-track {animation-duration:72s;}
@keyframes logos-right {from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes logos-left {from{transform:translateX(0)}to{transform:translateX(-50%)}}
.feedback-bubble {position:relative;width:min(100%,430px);padding:26px;background:#272725;border:1px solid #484844;border-radius:22px;box-shadow:0 20px 70px #000a;}
.feedback-bubble::after {content:"";position:absolute;left:38px;bottom:-9px;width:17px;height:17px;transform:rotate(45deg);background:#272725;border-right:1px solid #484844;border-bottom:1px solid #484844;}
.bubble-profile {display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.bubble-avatar {display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:#41413a;color:#e8e6d7;font-size:33px;line-height:1;padding-top:9px;}
.bubble-profile-title {display:block;font-size:13px;font-weight:600;}
.bubble-profile-note {display:block;font-size:10px;line-height:1.5;color:#bcbcb3;margin-top:4px;}
.feedback-bubble .feedback-slides {min-height:128px;}
.feedback-bubble .feedback-quote {font-size:18px;line-height:1.65;letter-spacing:-.025em;}
.bubble-footer {display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:19px;padding-top:15px;border-top:1px solid #41413b;}
.bubble-footer>span {font-size:10px;color:#bcbcb3;letter-spacing:.1em;}
.feedback-bubble .round-button {width:34px;height:34px;font-size:16px;border-color:#5a5a51;}
@media(max-width:600px){.logo-feedback-band{min-height:430px;padding:65px 24px;}.logo-wall{inset:30px 0;gap:14px;}.logo-chip{width:110px;height:75px;border-radius:12px;}.logo-chip img{width:68px;height:27px;}.logo-lane-group{gap:14px;padding-right:14px;}.feedback-bubble{padding:22px;max-width:360px;}.feedback-bubble .feedback-quote{font-size:16px;}.feedback-bubble .feedback-slides{min-height:155px;}.feedback-bubble .round-button{width:40px;height:40px;}}
@media(prefers-reduced-motion:reduce){.logo-lane-track{animation:none;will-change:auto;}}
/* Vertical about portrait, revealing its original color on hover. */
.about-image { aspect-ratio:3/4; width:100%; max-width:400px; justify-self:center; }
.about-image img { transition:filter .55s ease; }
.about-image:hover img { filter:grayscale(0); }
@media(max-width:600px) { .about-image { aspect-ratio:3/4; max-width:340px; } }
@media(hover:none) { .about-image img { filter:grayscale(0); } }
@media(prefers-reduced-motion:reduce) { .about-image img { transition:none; } }
.about-image img { object-position:center center; }

/* Compact portrait previews: five across on desktop, smaller cards on phones. */
.shorts-rail { gap:16px; }
.short-card { flex:0 0 calc((100% - 64px)/5); }
.short-card .film-meta h3 { font-size:13px; }
.short-card .film-image { border-radius:14px; }
@media(max-width:900px) {
 .short-card { flex-basis:calc((100% - 48px)/4); }
}
@media(max-width:600px) {
 .shorts-rail { gap:12px; }
 .short-card { flex-basis:42%; }
 .short-card .film-meta h3 { font-size:12px; }
}
/* Keep the entire social section compact, including its introduction and rail. */
#shorts.section { padding:40px 0 32px; }
#shorts > .eyebrow { margin-bottom:14px; }
#shorts .section-heading { margin-bottom:20px; }
#shorts .section-heading h2 { font-size:clamp(25px,2.6vw,34px); line-height:1.15; }
#shorts .short-intro { font-size:12px; line-height:1.6; margin:10px 0 0; }
#shorts .shorts-rail { padding:2px 0 14px; gap:14px; }
#shorts .short-card { flex:0 0 min(180px,calc((100% - 56px)/5)); }
#shorts .film-meta { padding-top:9px; }
#shorts .film-meta h3 { font-size:12px; }
#shorts .film-meta p { font-size:9px; margin-top:3px; }
@media(max-width:600px) {
 #shorts.section { padding:28px 0 22px; }
 #shorts .section-heading { margin-bottom:16px; }
 #shorts .section-heading h2 { font-size:25px; }
 #shorts .shorts-rail { gap:12px; }
 #shorts .short-card { flex-basis:min(140px,42%); }
}
/* Manual infinite social rail with interactive sound-enabled previews. */
#shorts .infinite-rail { scroll-snap-type:none; scroll-behavior:auto; }
#shorts .hover-preview { position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:auto; z-index:3; background:#111; }
#shorts .previewing .open-mark { z-index:2; }

#shorts .short-preview-button { position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; background:transparent; }
#shorts .hover-preview { object-fit:contain; visibility:hidden; }
#shorts .previewing .hover-preview { visibility:visible; }
#shorts .short-card .film-meta { display:block; }