@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--yellow:#e3ff00;--pink:#ee83b3;--ink:#171817}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--ink);color:#fff;font-family:'DM Sans',Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid var(--yellow);outline-offset:6px}header{height:92px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;background:var(--ink)}.wordmark{font-family:'Space Grotesk',sans-serif;font-size:36px;font-weight:700;letter-spacing:-2px;line-height:.75;color:var(--yellow)}.wordmark span{display:block;font-size:12px;letter-spacing:0;margin-top:9px}nav a{font-size:15px}nav span{margin-left:24px;color:var(--yellow)}.hero{height:calc(100svh - 112px);min-height:590px;max-height:950px;margin:0 20px;position:relative;overflow:hidden;background:#474b3f}.hero-image,.shade{position:absolute;inset:0}.hero-image{background:url('https://i.ytimg.com/vi/VoALQti0sok/maxresdefault.jpg') center/cover}.shade{background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.15) 35%,rgba(0,0,0,.72))}.hero-top{position:absolute;top:30px;left:4%;right:4%;display:flex;justify-content:space-between;font-size:12px;letter-spacing:2px}.hero-logo{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);width:clamp(210px,27vw,390px);height:auto;filter:drop-shadow(0 2px 15px #0003)}.hero-bottom{position:absolute;bottom:45px;left:4%;right:4%;display:flex;align-items:end;justify-content:space-between;gap:25px}.hero-bottom p{font-family:'Space Grotesk',sans-serif;font-size:clamp(28px,3vw,46px);font-weight:500;line-height:1.06;letter-spacing:-1.5px;margin:0}.play{display:flex;align-items:center;gap:18px;background:none;border:0;color:white;text-align:left;padding:0}.play-icon{display:grid;place-items:center;width:64px;height:64px;border:1px solid #ffffff70;border-radius:50%;padding-left:3px;transition:.2s}.play:hover .play-icon{background:var(--yellow);color:var(--ink);border-color:var(--yellow);transform:scale(1.06)}.play>span:last-child{font-size:18px}.play small{display:block;font-size:10px;letter-spacing:1.4px;margin-top:8px}.scroll{font-size:30px}.work{padding:110px 8% 100px}.section-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:50px;gap:30px}.eyebrow{font-size:12px;letter-spacing:1.6px}.section-head .eyebrow{margin-top:12px;color:var(--yellow)}h1{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(34px,4.7vw,70px);line-height:1.05;letter-spacing:-2.5px;margin:0;width:68%}h1 span{color:var(--yellow)}.project{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:#30342c;padding:0;border:0;color:white}.project>img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.project:hover>img{transform:scale(1.025)}.project-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;background:var(--yellow);color:var(--ink);width:74px;height:74px;border-radius:50%;padding-left:4px}.project-overlay{position:absolute;bottom:24px;left:28px;font-size:12px;letter-spacing:2px;text-shadow:0 1px 6px #000}.project-caption{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff30;padding:24px 0}.project-caption h2{font-size:23px;font-weight:500;margin:0}.project-caption>span{font-size:12px;letter-spacing:1px;color:#b6b7b1}.statement{padding:80px 8%;background:var(--pink);color:var(--ink);position:relative;overflow:hidden}.statement p{font-family:'Space Grotesk',sans-serif;font-size:clamp(38px,6vw,88px);font-weight:500;line-height:1.03;letter-spacing:-3px;position:relative;z-index:1;margin:40px 0}.statement p span{color:#643447}.statement img{position:absolute;right:8%;top:50%;width:190px;transform:translateY(-50%) rotate(9deg)}footer{display:flex;justify-content:space-between;gap:24px;padding:35px 5%;font-size:12px;color:#b6b7b1}dialog{border:1px solid #ffffff30;padding:24px;background:#171817;color:white;width:min(1100px,94vw);max-height:94svh}dialog::backdrop{background:#000e}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px;font-size:12px;letter-spacing:1px}.dialog-top button{background:none;color:white;border:1px solid #777;padding:10px 14px}#embed{aspect-ratio:16/9}iframe{width:100%;height:100%;border:0}.youtube{display:block;margin-top:20px;font-size:14px;color:var(--yellow)}body.modal-open{overflow:hidden}@media(min-width:1500px){.work{max-width:1600px;margin:auto}}@media(max-width:700px){header{height:80px;padding:0 6%}.hero{margin:0 10px;min-height:590px;height:calc(100svh - 90px)}.hero-top{font-size:10px;letter-spacing:1px;top:24px;left:6%;right:6%}.hero-logo{top:40%;width:230px}.hero-bottom{bottom:28px;left:6%;right:6%;flex-wrap:wrap}.hero-bottom p{width:100%;font-size:35px;margin-bottom:8px}.play-icon{width:50px;height:50px}.play small{font-size:9px}.work{padding:65px 6%}.section-head{display:block;margin-bottom:30px}.section-head .eyebrow{display:block;margin-bottom:25px}h1{width:100%;letter-spacing:-1.5px}.project-caption{gap:15px;align-items:start}.project-caption h2{font-size:18px}.project-caption>span{font-size:10px;max-width:100px;text-align:right;line-height:1.6}.project-play{width:56px;height:56px}.project-overlay{font-size:10px;bottom:15px;left:16px}.statement{padding:55px 6% 110px}.statement p{letter-spacing:-1.5px;font-size:43px}.statement img{width:80px;top:auto;bottom:25px;transform:rotate(9deg)}footer{flex-wrap:wrap;line-height:1.5}footer>span:nth-child(2){display:none}dialog{padding:14px}.dialog-top{font-size:10px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.contact{padding:80px 8%;border-bottom:1px solid #ffffff30}.contact>.eyebrow{color:var(--yellow)}.contact h2{font-family:"Space Grotesk",sans-serif;font-size:clamp(34px,4.7vw,64px);font-weight:500;letter-spacing:-2px;margin:24px 0 36px}.contact-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.contact-links>a{display:flex;flex-direction:column;gap:14px;padding:26px 24px;border:1px solid #ffffff50;transition:background .2s,color .2s,border-color .2s}.contact-links>a>span{display:flex;justify-content:space-between;gap:12px;font-size:20px}.contact-links small{font-size:14px;overflow-wrap:anywhere}.contact-links>a:hover,.contact-links>a:focus-visible{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}@media(max-width:700px){.contact{padding:55px 6%}.contact-links{grid-template-columns:1fr}.contact h2{letter-spacing:-1px}.contact-links>a{padding:22px}}
.portfolio-project+.portfolio-project{margin-top:65px}.project-description{font-size:16px;line-height:1.7;color:#c5c6c1;max-width:760px;overflow-wrap:anywhere}.hero-image>img{width:100%;height:100%;object-fit:cover}.project-caption h2{overflow-wrap:anywhere}.project-caption>span{flex-shrink:0}
/* Mobile-first presentation refinements */
button,a{touch-action:manipulation}
img{max-width:100%}
@media(max-width:700px){
 html{scroll-padding-top:24px}
 header{height:76px;padding-inline:20px}
 header nav a{display:flex;align-items:center;min-height:48px;font-size:16px}
 .hero{display:flex;flex-direction:column;justify-content:space-between;gap:24px;height:auto;min-height: min(660px,78svh);max-height:none;margin:0 8px;padding:22px 20px 24px}
 .hero-top{position:relative;inset:auto;font-size:12px;letter-spacing:.7px;gap:15px;z-index:1}
 .hero-logo{position:relative;inset:auto;transform:none;align-self:center;width:clamp(160px,48vw,230px);margin:0;z-index:1}
 .hero-bottom{position:relative;inset:auto;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;z-index:1}
 .hero-bottom p{grid-column:1/-1;font-size:clamp(30px,8vw,40px);line-height:1.12;letter-spacing:-1px;overflow-wrap:anywhere;margin:0}
 .play{gap:12px;min-height:56px}
 .play-icon{width:54px;height:54px;flex-shrink:0;background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
 .play>span:last-child{font-size:18px}
 .play small{font-size:12px;line-height:1.4;letter-spacing:.2px;max-width:185px;margin-top:5px}
 .scroll{display:grid;place-items:center;min-width:44px;min-height:48px}
 .work{padding:48px 20px}
 .section-head{margin-bottom:26px}
 .section-head .eyebrow{margin-bottom:18px}
 h1{font-size:clamp(30px,7.8vw,42px);line-height:1.12;letter-spacing:-1px}
 .project{border-radius:6px}
 .project-overlay{font-size:12px;letter-spacing:.8px;bottom:12px;left:12px}
 .project-caption{flex-direction:column;gap:8px;padding:18px 0}
 .project-caption h2{font-size:20px;line-height:1.3}
 .project-caption>span{font-size:12px;text-align:left;max-width:100%;overflow-wrap:anywhere}
 .portfolio-project+.portfolio-project{margin-top:36px}
 .project-description{margin-top:14px;line-height:1.6}
 .statement{padding:38px 20px 85px}
 .statement p{font-size:clamp(32px,8.5vw,46px);line-height:1.12;letter-spacing:-1px;overflow-wrap:anywhere;margin:25px 0}
 .statement img{width:62px;right:24px;bottom:18px}
 .contact{padding:42px 20px}
 .contact h2{font-size:34px;line-height:1.12;margin:20px 0 26px}
 .contact-links{gap:12px}
 .contact-links>a{padding:20px;gap:10px;border-radius:6px;min-height:92px}
 .contact-links small{font-size:16px}
 footer{padding:22px 20px max(22px,env(safe-area-inset-bottom));gap:8px 24px;align-items:center;font-size:14px}
 footer>span:first-child{width:100%}
 footer a{display:flex;align-items:center;min-height:48px}
 dialog{width:calc(100% - 16px);max-width:100%;max-height:calc(100dvh - 16px);padding:12px;overflow:auto;border-radius:8px}
 .dialog-top{font-size:12px;letter-spacing:0;gap:10px;margin-bottom:12px}
 .dialog-top button{min-width:88px;min-height:48px;font-size:14px;flex-shrink:0}
 .youtube{min-height:48px;display:flex;align-items:center;line-height:1.5;margin-top:10px;font-size:16px}
}
@media(max-height:500px) and (orientation:landscape){dialog{width:min(760px,96vw);max-height:96dvh;padding:10px}#embed{max-height:62dvh;aspect-ratio:16/9;width:auto;margin:auto}.dialog-top{margin-bottom:8px}.youtube{margin-top:8px}}
.hero-image{overflow:hidden}.hero-image>img[src$="/hqdefault.jpg"],.project>img[src$="/hqdefault.jpg"]{transform:scale(1.34)}@media(hover:hover){.project:hover>img[src$="/hqdefault.jpg"]{transform:scale(1.37)}}

/* Cinematic background and the three forthcoming disciplines. */
.hero{container-type:size}.hero-image{background:none}
.hero-video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw);max-width:none;pointer-events:none}
.motion-toggle{position:absolute;right:4%;top:65px;z-index:2;border:1px solid #ffffff70;background:#17181799;color:#fff;border-radius:24px;padding:10px 18px;font-size:14px;min-height:44px;backdrop-filter:blur(8px)}
.services{padding:70px 8% 100px;border-top:1px solid #ffffff25}
.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.service-space{aspect-ratio:1/1.04;background:#232922;border:1px solid #ffffff15;display:flex;align-items:flex-end;padding:24px}
.service:nth-child(2) .service-space{background:#2b2e20}.service:nth-child(3) .service-space{background:#302629}
.service-space span{font-family:'Space Grotesk',sans-serif;font-size:clamp(55px,7vw,112px);line-height:1;letter-spacing:-5px;color:#ffffff18}
.service h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(32px,4vw,60px);font-weight:500;letter-spacing:-2px;text-align:center;margin:28px 0 0}
@media(max-width:700px){.hero{container-type:normal}.hero-video{width:max(100vw,1174px);height:max(78svh,66.1vw)}.motion-toggle{top:56px;right:20px;font-size:14px}.services{padding:44px 20px 54px}.services-grid{grid-template-columns:1fr;gap:36px}.service-space{aspect-ratio:1.5}.service-space span{font-size:72px;letter-spacing:-3px}.service h2{font-size:40px;margin-top:18px}}

.hero-video{opacity:0;transition:opacity .6s}.hero-video.is-playing{opacity:1}

/* Recognisable social marks with compact, tactile contact buttons. */
.contact-links.social-links{display:flex;align-items:center;justify-content:center;gap:22px;width:100%;margin-inline:auto}
.contact-links.social-links>a{display:grid;place-items:center;width:76px;height:76px;min-height:0;padding:0;border:0;border-radius:22px;background:transparent;box-shadow:none;transition:transform .2s,filter .2s}
.contact-links.social-links .social-icon{display:grid;place-items:center;place-content:center;justify-content:center;align-content:center;gap:0;width:76px;height:76px;border-radius:22px;flex-shrink:0;box-shadow:0 8px 24px #0005;font-size:0}
.social-icon svg{display:block;width:42px;height:42px;margin:auto}
.social-instagram .social-icon{background:radial-gradient(circle at 28% 105%,#ffd776 0%,#f58529 23%,#dd2a7b 52%,#8134af 78%,#515bd4 100%);color:white}
.social-youtube .social-icon{background:#ff0033;color:white}
.social-email .social-icon{background:var(--yellow);color:var(--ink)}
.contact-links.social-links .social-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.contact-links.social-links>a:hover,.contact-links.social-links>a:focus-visible{transform:translateY(-4px);filter:brightness(1.08)}
@media(max-width:700px){.contact-links.social-links{gap:18px}.contact-links.social-links>a,.contact-links.social-links .social-icon{width:64px;height:64px;border-radius:19px}.social-icon svg{width:36px;height:36px}}

.media-section{padding:84px 8%;border-top:1px solid #ffffff25;overflow:hidden}.media-heading{position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px;margin-bottom:30px}.media-heading .eyebrow{color:var(--yellow);grid-column:1/-1}.media-heading h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(40px,5vw,72px);font-weight:500;letter-spacing:-2px;margin:0}.carousel-controls{display:flex;gap:8px}.carousel-controls button{width:44px;height:44px;border:1px solid #ffffff45;border-radius:50%;background:transparent;color:white;font-size:20px}.carousel-controls button:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}.media-carousel{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:12px}.media-carousel::-webkit-scrollbar{display:none}.carousel-card{position:relative;flex:0 0 min(31vw,420px);aspect-ratio:1/1.08;margin:0;scroll-snap-align:start;overflow:hidden;background:#242823}.carousel-card img,.carousel-card video{width:100%;height:100%;object-fit:cover;display:block}.carousel-card figcaption,.carousel-video-card p{position:absolute;left:20px;bottom:16px;color:white;font-size:14px;letter-spacing:.4px;text-shadow:0 2px 8px #000}.carousel-video-card{aspect-ratio:16/10}.carousel-video-card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,#0009);pointer-events:none}.media-play{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;border:1px solid #fff;background:#e3ff00;color:#171817;display:grid;place-items:center}.media-play span,.track-play span{width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:13px solid currentColor;margin-left:3px}.track-card{flex:0 0 min(31vw,420px);scroll-snap-align:start;background:#242823;display:grid;grid-template-columns:44% 1fr;min-height:190px;overflow:hidden}.track-card>img{width:100%;height:100%;object-fit:cover}.track-card>div{position:relative;padding:24px;display:flex;flex-direction:column;gap:6px}.track-card strong{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:500}.track-card span{color:#b6b7b1;font-size:13px}.track-play{margin-top:auto;width:48px;height:48px;border:1px solid #ffffff55;border-radius:50%;background:var(--yellow);color:var(--ink);display:grid;place-items:center}.track-play.is-playing span{transform:scaleX(.65);border-left-width:6px;border-left-style:double}.media-photo .carousel-card{aspect-ratio:4/5}.media-video .carousel-card{aspect-ratio:16/10}.media-music{background:#ee83b3;color:var(--ink)}.media-music .eyebrow{color:var(--ink)}.media-music .carousel-controls button{color:var(--ink);border-color:#17181755}.media-music .carousel-controls button:hover{background:var(--ink);color:#ee83b3}.media-music .media-carousel{padding-bottom:0}
@media(max-width:700px){.media-section{padding:58px 20px}.media-heading{grid-template-columns:1fr;gap:16px}.media-heading h2{font-size:40px}.carousel-controls{position:absolute;right:0;bottom:0}.carousel-card,.track-card{flex-basis:78vw}.carousel-card figcaption,.carousel-video-card p{left:14px;bottom:12px}.track-card{min-height:155px;grid-template-columns:42% 1fr}.track-card>div{padding:16px}.track-card strong{font-size:18px}}

/* Films play quietly in the portfolio and expand directly from their card. */
.project-video-shell{isolation:isolate}
.project-video{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .45s;pointer-events:none;background:#000}
.project-video.is-playing{opacity:1}
.project-video-shell.video-unavailable .project-video{opacity:0}
.project-open{position:absolute;z-index:2;inset:0;width:100%;height:100%;padding:0;border:0;background:linear-gradient(180deg,transparent 55%,#0007);color:#fff}
.project-open:hover .project-play{transform:translate(-50%,-50%) scale(1.07)}
.play-icon,.project-play{font-size:0}
.play-icon::before,.project-play::before{content:"";display:block;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:13px solid currentColor;margin-left:3px}
.project-play::before{border-top-width:10px;border-bottom-width:10px;border-left-width:16px}
.project-video-shell:fullscreen,.project-video-shell:-webkit-full-screen{background:#000}
.project-video-shell:fullscreen .project-video,.project-video-shell:-webkit-full-screen .project-video{opacity:1}
.project-video-shell:fullscreen .project-open,.project-video-shell:-webkit-full-screen .project-open{opacity:0;pointer-events:none}
.spotify-player{max-width:720px;border-radius:24px;overflow:hidden;background:#1ed760;box-shadow:0 18px 45px rgba(0,0,0,.25)}.spotify-player iframe{display:block;width:100%;height:352px;border:0}@media(max-width:700px){.spotify-player iframe{height:420px}}
@media(min-width:701px){.media-music .media-heading{max-width:920px;margin-left:auto;margin-right:auto}.media-music .spotify-player{width:min(920px,100%);max-width:920px;margin:0 auto}.media-music .spotify-player iframe{height:430px}}
.project-video{display:none!important}.project-video-shell:fullscreen .project-video,.project-video-shell:-webkit-full-screen .project-video{display:block!important}

.hero-logo{width:clamp(168px,21.6vw,312px)}
@media(max-width:700px){.hero-logo{width:184px}}

/* Director's cut: a quieter frame system with a deliberate editorial rhythm. */
body{background:#111211}
header{max-width:1440px;margin:auto}
.hero{max-width:1440px;margin-inline:auto;border:1px solid #ffffff18;background:#252823;box-shadow:0 28px 80px #0005}
.hero-image{background:#252823}
.hero-image>img{position:absolute;inset:0;opacity:.72;object-fit:cover;filter:saturate(.82) contrast(1.08);mix-blend-mode:screen}
.hero-image:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,#111211b8 0%,transparent 42%),linear-gradient(0deg,#111211e8 0%,transparent 58%);pointer-events:none}
.hero-video{z-index:0;opacity:.38!important;mix-blend-mode:screen;filter:saturate(.75) contrast(1.1)}
.hero-image>img{z-index:1}.hero-top,.hero-logo,.hero-bottom,.motion-toggle{z-index:2}
.hero-image.is-playing>img{opacity:0}
.hero-video{width:100%;height:100%;object-fit:cover;object-position:center;max-width:none}
.hero-logo{top:30px;left:auto;right:4%;transform:none;width:clamp(112px,12vw,176px);mix-blend-mode:normal;filter:drop-shadow(0 8px 25px #0008)}
.hero-top span:first-child{color:var(--yellow)}
.hero-top span:first-child{position:absolute;top:clamp(120px,18vh,190px);left:0;max-width:900px;font-family:'Space Grotesk',sans-serif;font-size:clamp(52px,9vw,144px);font-weight:500;line-height:.86;letter-spacing:-.07em;color:#fff;text-wrap:balance}
.hero-top span:first-child::first-line{color:var(--yellow)}
.hero-bottom p{max-width:520px}
.scroll{display:grid;place-items:center;width:48px;height:48px;border:1px solid #ffffff55;border-radius:50%;transition:background .2s,color .2s,transform .2s}
.scroll:hover{background:var(--yellow);color:var(--ink);transform:translateY(4px)}
.work{max-width:1440px;margin:auto;padding-top:clamp(84px,11vw,160px)}
.section-head{border-top:1px solid #ffffff32;padding-top:20px}
.project{border:1px solid #ffffff25;box-shadow:0 22px 60px #0005}
.project>img{filter:saturate(.9);transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .4s}
.project:hover>img{transform:scale(1.035);filter:saturate(1.08)}
.project-caption{padding:20px 4px 26px;border-color:#ffffff38}
.project-caption h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(22px,2.2vw,34px);letter-spacing:-.8px}
.portfolio-project:nth-of-type(2) .project{width:82%;margin-left:18%}.portfolio-project:nth-of-type(3) .project{width:90%;margin-left:3%}.portfolio-project:nth-of-type(3) .project-caption{width:90%;margin-left:3%}
.portfolio-project+.portfolio-project{margin-top:clamp(44px,7vw,96px)}
.statement{max-width:1440px;margin:auto;padding-block:clamp(90px,12vw,170px)}
.statement:after{content:"";position:absolute;inset:auto 0 0;height:1px;background:#17181755}
.statement p{max-width:920px}
.media-section{max-width:1440px;margin:auto;padding-block:clamp(72px,9vw,128px)}
.media-heading{border-top:1px solid #ffffff32;padding-top:20px}
.carousel-card,.track-card{box-shadow:0 16px 40px #0004;border:1px solid #ffffff16}
.carousel-card{flex-basis:min(28vw,380px)}
.media-carousel{gap:22px}
.media-photo .media-carousel{padding-top:38px;padding-bottom:46px}
.media-photo .carousel-card:nth-child(2){transform:translateY(34px) rotate(2deg)}.media-photo .carousel-card:nth-child(3){transform:translateY(-18px) rotate(-1.5deg)}.media-photo .carousel-card:nth-child(4){transform:translateY(24px) rotate(1deg)}.media-photo .carousel-card:nth-child(5){transform:translateY(-8px) rotate(-2deg)}
.contact{max-width:1440px;margin:auto;padding-block:clamp(90px,12vw,160px);border-top:1px solid #ffffff32}
.contact h2{max-width:780px;font-size:clamp(48px,8vw,112px);line-height:.95;margin-block:28px 54px}
.contact-cta{display:inline-flex;align-items:center;gap:18px;padding:18px 22px;border:1px solid var(--yellow);color:var(--yellow);font-size:clamp(18px,2vw,26px);transition:background .2s,color .2s}.contact-cta:hover,.contact-cta:focus-visible{background:var(--yellow);color:var(--ink)}
.contact-links.social-links{justify-content:flex-start;gap:18px}
.contact-links.social-links>a,.contact-links.social-links .social-icon{width:82px;height:82px}
footer{max-width:1440px;margin:auto}
@media(max-width:700px){
 .hero{margin-inline:8px;min-height:min(700px,82svh)}
 .hero-image>img{opacity:.58}
 .hero-video{opacity:.3!important}
 .hero-top{font-size:10px}
 .hero-top span:first-child{top:98px;left:0;font-size:clamp(44px,13vw,70px);max-width:88vw}
 .hero-logo{top:22px;right:20px;left:auto;transform:none;width:116px}
 .work{padding-top:70px}
 .section-head{padding-top:14px}
 .media-section{padding-block:64px}
 .carousel-card{flex-basis:78vw}
 .media-photo .carousel-card:nth-child(n){transform:none}
 .media-photo .media-carousel{padding-top:18px;padding-bottom:18px}
 .contact h2{font-size:clamp(46px,14vw,72px);margin-bottom:38px}
 .contact-cta{font-size:18px;padding:16px 18px}
 .contact-links.social-links>a,.contact-links.social-links .social-icon{width:70px;height:70px}
}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}.scroll:hover{transform:none}.project>img{transition:none}}

/* Final layout refinements */
.portfolio-project:nth-of-type(2) .project{width:100%;margin-left:0}
.hero-top span:first-child{font-size:clamp(46px,7vw,112px)}
@media(max-width:700px){.hero-top span:first-child{font-size:clamp(40px,11vw,60px)}}
/* Final spacing checked at desktop and phone widths. */
.contact-cta{margin-bottom:28px}
@media(min-width:701px){.hero .motion-toggle{top:30px;right:calc(4% + 190px)}}

.media-photo .carousel-card{border-radius:20px}
.media-music{max-width:none;margin:0;padding:84px 8%}
.media-music .media-heading{border-top:0;padding-top:0}
@media(max-width:700px){.media-music{padding:58px 20px}.media-photo .carousel-card{border-radius:16px}}

/* Use the same drawn arrows on every device; do not depend on the phone emoji font. */
.carousel-controls .carousel-arrow{display:block;width:10px;height:10px;border-top:2px solid currentColor;border-right:2px solid currentColor}
.carousel-controls .carousel-arrow-left{transform:rotate(-135deg);margin-left:4px}
.carousel-controls .carousel-arrow-right{transform:rotate(45deg);margin-right:4px}
.project-video{display:block!important;position:absolute;z-index:1;inset:0;width:100%;height:100%;border:0;opacity:0;pointer-events:none;transition:opacity .35s}
.project-video.is-playing{opacity:1}
.project-video-shell.video-unavailable .project-video{display:none!important}

/* Hero layout: compact service line, centred mark. */
.hero-top{top:32px;left:4%;right:auto;z-index:3}
.hero-top span:first-child{position:static;max-width:none;font-family:'DM Sans',sans-serif;font-size:clamp(15px,1.5vw,22px);font-weight:500;line-height:1;letter-spacing:.04em;color:var(--yellow);text-wrap:nowrap}
.hero-top span:first-child::first-line{color:var(--yellow)}
.hero-top span:nth-child(2){display:none}
.hero-logo{top:50%;left:50%;right:auto;transform:translate(-50%,-50%);width:clamp(164px,18vw,260px)}
@media(max-width:700px){.hero-top{top:26px;left:20px}.hero-top span:first-child{font-size:14px;letter-spacing:.03em}.hero-logo{top:50%;left:50%;right:auto;transform:translate(-50%,-50%);width:154px}}

.project-inline-play{position:absolute;z-index:2;left:50%;top:50%;width:74px;height:74px;transform:translate(-50%,-50%);display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--yellow);color:var(--ink);box-shadow:0 10px 28px #0007;transition:transform .2s}
.project-inline-play[hidden]{display:none!important}
.project-video-shell:fullscreen .project-video,.project-video-shell:-webkit-full-screen .project-video{pointer-events:auto!important;opacity:1;z-index:3}
.project-inline-play:hover{transform:translate(-50%,-50%) scale(1.08)}
@media(max-width:700px){.project-inline-play{width:58px;height:58px}}

.hero-top span:first-child em{font-style:normal;color:#fff}
@media(min-width:701px){
 header,.work,.statement,.media-section,.contact,footer{max-width:none;margin-inline:0;padding-left:4%;padding-right:4%}
 .hero{max-width:none;margin-inline:0;border-inline:0}
 .media-music{padding-left:4%;padding-right:4%}
 .section-head,.media-heading{margin-left:-4%;margin-right:-4%;padding-left:4%;padding-right:4%}
}

/* Keep the uploaded Host Media House mark centred regardless of the active hero video. */
.hero-logo{position:absolute!important;inset:50% auto auto 50%!important;transform:translate(-50%,-50%)!important;margin:0!important;object-fit:contain;object-position:center}

/* Expanded players retain the same iframe and expose native YouTube controls. */
.project-video-shell .project-video{pointer-events:auto!important;opacity:1;display:block!important}
.project-video-shell.is-expanded{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;aspect-ratio:auto!important;z-index:10000;background:#000;border-radius:0!important}
.project-video-shell.is-expanded .project-video{inset:48px 0 0;height:calc(100% - 48px);z-index:3}
.project-close{position:absolute;right:16px;top:6px;z-index:4;border:1px solid #aaa;border-radius:20px;background:#171817;color:white;padding:7px 18px}
.project-close[hidden],.project-inline-play[hidden]{display:none!important}
body.watching-project{overflow:hidden}

.project-video-shell.is-expanded>img{visibility:hidden}

/* Overlapping photo prints: negative spacing is 20% of each card width. */
.media-photo .media-carousel{--photo-width:min(28vw,380px);gap:0;padding:48px 18px 64px;isolation:isolate}
.media-photo .carousel-card{flex:0 0 var(--photo-width);box-shadow:0 14px 28px #0007;transition:transform .25s}
.media-photo .carousel-card+.carousel-card{margin-left:calc(var(--photo-width) * -.2)}
.media-photo .carousel-card:nth-child(3n+1){transform:rotate(-3deg) translateY(10px)}
.media-photo .carousel-card:nth-child(3n+2){transform:rotate(3deg) translateY(24px)}
.media-photo .carousel-card:nth-child(3n){transform:rotate(-2deg)}
@media(max-width:700px){.media-photo .media-carousel{--photo-width:78vw;padding-top:36px;padding-bottom:54px}}
@media(hover:hover){.media-photo .carousel-card:hover{z-index:2;transform:translateY(-8px) rotate(0)}}

.project-caption{display:none}

.motion-toggle{display:none!important}
.wordmark-svg{display:block;width:86px;height:auto;fill:currentColor;font-family:inherit;font-weight:700;letter-spacing:0}
.social-instagram .social-icon,.social-whatsapp .social-icon{background:var(--yellow);color:var(--ink)}

/* Consistent vector arrow on desktop and mobile. */
nav .nav-arrow{width:22px;height:22px;display:inline-block;vertical-align:middle}

.work .section-head .work-label{width:auto;margin:0;font-family:inherit;font-size:12px;font-weight:400;line-height:1.5;letter-spacing:2px}