@font-face{font-family:Oswald;src:url('/assets/fonts/oswald.ttf') format('truetype');font-weight:700;font-display:swap}@font-face{font-family:Manrope;src:url('/assets/fonts/manrope.ttf') format('truetype');font-weight:400;font-display:swap}
:root{color-scheme:dark;--bg:#111;--muted:#bbb;--accent:#ef3434;--gutter:5vw;--line:#ffffff30}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;background:var(--bg);color:#fff;font:16px/1.6 Manrope,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}[hidden]{display:none!important}.skip-link{position:fixed;top:-100px;left:20px;z-index:20;padding:12px;background:#111}.skip-link:focus{top:15px}.header{position:absolute;inset:0 0 auto;z-index:5;padding:35px var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{font-family:Oswald,Impact,sans-serif;font-size:46px;line-height:1;letter-spacing:-.06em;display:flex;align-items:baseline;gap:5px}.square{display:inline-block;background:var(--accent);width:.13em;height:.13em;flex:none}.brand .square{width:9px;height:9px}.header nav{display:flex;gap:36px}.header nav a{text-transform:uppercase;letter-spacing:.15em;font-size:13px;padding:10px 0}.header nav a:hover,.contact-list a:hover,.portfolio-links a:hover{color:var(--accent)}.hero{height:100svh;min-height:600px;position:relative;isolation:isolate;display:flex;align-items:center;padding:120px var(--gutter);overflow:hidden}.hero-media{position:absolute;inset:0;z-index:-1;background:#111 url('/assets/hero-clean.webp') center/cover no-repeat}.hero-content{width:100%}.hero-kicker{font-size:15px;letter-spacing:.35em;margin:0 0 18px}h1,h2,.work-title h3{font-family:Oswald,Impact,'Arial Narrow',sans-serif;text-transform:uppercase;font-weight:700}h1{font-size:clamp(75px,14.5vw,240px);line-height:1.1;letter-spacing:-.045em;display:flex;gap:.07em;align-items:baseline;white-space:nowrap;margin:0}h2{font-size:clamp(55px,7vw,120px);line-height:1.14;letter-spacing:-.025em;margin:0}.hero-bottom{position:absolute;bottom:42px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;gap:15px}.hero-bottom a{font-size:12px;letter-spacing:.18em;padding-block:10px}.showreel{height:100svh;min-height:480px;position:relative;background:#080808;overflow:hidden}.showreel video{width:100%;height:100%;object-fit:cover;display:block}.sound-control{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;opacity:.62;transition:opacity .25s;text-shadow:0 1px 8px #000;white-space:nowrap}.sound-control:hover,.sound-control:focus-visible{opacity:1}.sound-control svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.2;filter:drop-shadow(0 1px 5px #000)}.sound-control span{font-size:14px}.sound-on{display:none}.sound-control[aria-pressed=true] .sound-off{display:none}.sound-control[aria-pressed=true] .sound-on{display:block}.reel-pause{position:absolute;bottom:25px;right:var(--gutter);background:none;border:0;border-bottom:1px solid #fff5;padding:5px 0;font-size:12px;opacity:.7}.video-status{position:absolute;bottom:60px;width:90%;left:5%;text-align:center;font-size:14px}.section{max-width:1680px;margin:auto;padding:90px var(--gutter) 0}.section-heading{margin-bottom:42px}.red-line{display:block;width:58px;height:3px;background:var(--accent);margin-bottom:26px}.projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 28px}.work{min-width:0;display:block}.thumb{position:relative;aspect-ratio:666/249;overflow:hidden;background:#191919}.cover{position:absolute;inset:0;background-image:url('/assets/works-reference.webp');background-size:230.631% 411.245%;background-repeat:no-repeat;transition:transform .65s}.work:hover .cover{transform:scale(1.025)}.play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:54px;width:54px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;opacity:.5;transition:opacity .25s;filter:drop-shadow(0 1px 4px #000)}.play svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.2}.work:hover .play,.work:focus-visible .play{opacity:1}.work-title{padding-top:10px}.work-title h3{font-size:clamp(20px,1.85vw,29px);letter-spacing:.02em;line-height:1.35;margin:0}.work-title p{font-size:13px;color:var(--muted);letter-spacing:.13em;text-transform:uppercase;margin:4px 0 0}.portfolio-links{border-bottom:1px solid var(--line);display:flex;justify-content:space-between;padding:28px 0;font-size:12px;color:var(--muted)}.about{position:relative;isolation:isolate;overflow:hidden;padding-bottom:0}.about .section-heading{position:relative;z-index:2;margin-bottom:0}.about-grid{position:relative;display:grid;grid-template-columns:60% 40%;min-height:560px;border-bottom:1px solid var(--line)}.portrait{position:absolute;z-index:-1;left:-5.56%;right:-5.56%;top:-140px;bottom:0;background:url('/assets/portrait-clean.webp') center center/cover no-repeat}.about-copy{grid-column:2;align-self:center;padding:35px 0 70px 16px}.about-copy h3{font-size:clamp(30px,3.15vw,54px);font-weight:400;line-height:1.3;letter-spacing:-.035em;margin:0 0 20px}.about-copy p{font-size:16px;color:#d0d0d0;line-height:1.55;margin:0}.about-copy .lead{font-size:clamp(20px,1.8vw,29px)}.copy-line{display:block;width:45px;height:1px;background:#bbb;margin:24px 0}.reviews h2{font-size:clamp(65px,10vw,170px)}.reviews-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:35px;max-width:1310px;margin:60px auto 0}.review-card{text-align:center;min-width:0}.review-avatar{display:block;aspect-ratio:254/250;width:100%;max-width:210px;margin:0 auto 22px;border-radius:50%;background-image:url('/assets/reviews-reference.webp');background-size:674.803% 367.2%;background-repeat:no-repeat}.review-card h3{font-size:14px;letter-spacing:.23em;text-transform:uppercase;font-weight:400;margin:0 0 5px}.category{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0}.review-text{font-size:15px;line-height:1.65;max-width:290px;margin:20px auto 0;color:#ddd}.reviews-disclosure{font-size:13px;color:#aaa;text-align:center;margin:38px 0 0;padding-bottom:35px;border-bottom:1px solid var(--line)}.contact-wrap{background:#111 url('/assets/contact-clean.webp') center/cover no-repeat;margin-top:50px}.contact{padding-top:95px;padding-bottom:110px;min-height:690px}.contact-grid{display:grid;grid-template-columns:1.1fr .8fr;gap:19%;align-items:center}.contact h2{font-size:clamp(64px,8.5vw,145px);line-height:1.04}.contact-list{min-width:0}.phone{display:block;white-space:nowrap;font-size:clamp(23px,2.2vw,38px);line-height:1.3;letter-spacing:-.035em;margin-bottom:42px}.social{display:grid;grid-template-columns:1fr auto;gap:18px;padding:22px 0;border-top:1px solid var(--line);font-size:16px}.social:last-child{border-bottom:1px solid var(--line)}.social span:last-child{font-size:14px;color:#aaa}footer{display:flex;justify-content:space-between;gap:25px;width:90%;max-width:1512px;margin:auto;border-top:1px solid var(--line);padding:25px 0 32px;font-size:12px;letter-spacing:.1em;color:#bbb}.reveal{opacity:1}.motion-ready .reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease var(--delay,0s),transform .65s ease var(--delay,0s)}.motion-ready .reveal.visible{opacity:1;transform:none}.motion-ready .hero-media{animation:hero-image 1.1s ease both}.motion-ready .hero-kicker{animation:appear .7s .15s both}.motion-ready h1{animation:appear .8s .25s both}@keyframes appear{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes hero-image{from{opacity:.4;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
@media(min-width:1700px){.about-grid{min-height:650px}}
@media(max-width:1000px){.section{padding-top:70px}.about-grid{min-height:440px;grid-template-columns:55% 45%}.about-copy{padding-left:12px;padding-bottom:40px}.about-copy p{font-size:15px}.about-copy .lead{font-size:21px}.portrait{top:-100px;background-position:43% center}.reviews-grid{gap:18px}.review-text{font-size:14px}.contact-grid{gap:8%}.contact{min-height:560px;padding-bottom:80px}.contact h2{font-size:8.8vw}.phone{font-size:24px}.social{font-size:14px}.header nav{gap:24px}}
@media(max-width:650px){:root{--gutter:6vw}.header{padding-top:26px}.brand{font-size:35px}.header nav{gap:14px}.header nav a{font-size:11px;letter-spacing:.04em}.hero{min-height:560px}.hero-media{background-position:65% center}.hero-kicker{font-size:12px;letter-spacing:.25em}h1{font-size:16vw}.hero-bottom{bottom:28px}.hero-bottom a{font-size:10px;letter-spacing:.08em}.showreel{min-height:500px}.showreel video{object-position:50% center}.section{padding-top:65px}.red-line{width:42px;height:2px;margin-bottom:22px}h2{font-size:clamp(36px,9.6vw,62px)}.section-heading{margin-bottom:30px}.projects{grid-template-columns:1fr;gap:30px}.play{width:44px;height:44px}.work-title h3{font-size:23px}.work-title p{font-size:12px;letter-spacing:.08em}.about-grid{display:flex;flex-direction:column;min-height:0}.portrait{position:relative;inset:auto;z-index:0;margin:20px -6.82% 0;width:113.64%;height:auto;aspect-ratio:1/1.12;background-size:auto 115%;background-position:34% center}.about-copy{padding:28px 0 38px}.about-copy h3{font-size:35px}.about-copy .lead{font-size:22px}.about-copy p{font-size:16px}.reviews h2{font-size:19vw}.reviews-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:35px 22px;margin-top:35px}.review-avatar{max-width:180px;margin-bottom:18px}.review-card h3{font-size:13px;letter-spacing:.11em}.category{font-size:11px;letter-spacing:.05em}.review-text{font-size:14px;margin-top:15px}.reviews-disclosure{font-size:12px;margin-top:30px}.contact-wrap{margin-top:20px;background-position:57% center}.contact{padding-bottom:55px;min-height:0}.contact-grid{grid-template-columns:1fr;gap:38px}.contact h2{font-size:18vw}.contact-list{background:#1118}.phone{font-size:31px;margin-bottom:28px}.social{font-size:16px;padding:20px 0}.social span:last-child{font-size:14px}footer{width:88%;font-size:10px;letter-spacing:.04em;gap:12px}.motion-ready .reveal{transition-delay:0s;transform:translateY(12px)}.motion-ready .reveal.visible{transform:none}}
@media(max-width:360px){.reviews-grid{grid-template-columns:1fr;gap:36px}.header nav{gap:10px}.header nav a{font-size:10px}.phone{font-size:27px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.motion-ready .reveal{opacity:1;transform:none}}
/* The existing reel contains encoded cinematic mattes: crop them without stretching. */
.showreel video{transform:scale(1.5)}
/* Unified canvas; photographic elements sit on the same matte background. */
html,body,main,.hero,.showreel,.section,.contact-wrap{background-color:var(--bg)}
.header{gap:clamp(24px,4.5vw,76px)}
.brand{font-family:Arial,sans-serif;font-weight:800;letter-spacing:-.08em;font-size:clamp(36px,3vw,50px)}
.header>nav{margin-left:auto;gap:clamp(24px,3vw,50px)}
.header>nav a{font-size:14px;letter-spacing:.2em}
.menu{position:relative}.menu summary{width:44px;height:44px;display:flex;flex-direction:column;justify-content:center;gap:6px;cursor:pointer;list-style:none}
.menu summary::-webkit-details-marker{display:none}.menu summary span{display:block;background:#eee;width:40px;height:1px}.menu summary span:nth-child(2){width:30px}.menu summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.menu>nav{position:absolute;right:0;top:54px;width:220px;padding:22px;background:var(--bg);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}.menu>nav a{font-size:13px}
.hero-media{mask-image:linear-gradient(#000 0%,#000 78%,transparent 100%)}
.showreel{margin-top:clamp(72px,9vw,150px)}
.portrait{background-image:url('/assets/portrait-cutout.webp');mask-image:linear-gradient(#000 0%,#000 90%,transparent 100%)}
.contact-wrap{position:relative;isolation:isolate;background-image:none}
.contact-wrap:before{display:none}
.contact,.contact-list{background:transparent}
.phone{font-family:Oswald,Impact,sans-serif;font-weight:700;font-size:clamp(30px,3vw,52px);letter-spacing:-.035em}
.social{grid-template-columns:1fr auto 7px;align-items:center}.social:after{content:'';width:6px;height:6px;background:var(--accent);border-radius:50%}
@media(max-width:650px){.header{gap:16px}.header>nav{gap:12px}.header>nav a{font-size:10px;letter-spacing:.08em}.brand{font-size:32px}.menu summary{width:28px;height:36px}.menu summary span{width:28px}.menu summary span:nth-child(2){width:20px}.showreel{margin-top:72px}.contact-wrap:before{background-position:57% center;opacity:.5}.phone{font-size:36px}.portrait{mask-image:linear-gradient(#000 0%,#000 85%,transparent 100%)}}
@media(max-width:360px){.header{gap:10px}.header>nav{gap:9px}.header>nav a{font-size:9px}}
/* A framed reel, separated from the opening image by quiet space. */
.reel-divider{height:1px;background:var(--line);width:calc(100% - 2 * var(--gutter));max-width:1512px;margin:90px auto}
.showreel{width:calc(100% - 2 * var(--gutter));max-width:1512px;height:auto;min-height:0;aspect-ratio:16/9;margin:0 auto;border:1px solid var(--line);background:var(--bg)}
.showreel video{width:100%;height:100%;object-fit:contain;transform:none}
@media(max-width:650px){.reel-divider{margin:45px auto}.showreel{min-height:0;margin:0 auto}.sound-control{padding:10px;gap:6px}.sound-control svg{width:32px;height:32px}.sound-control span{font-size:12px}.reel-pause{bottom:10px;right:14px}}
/* Keep the phone centered over both social-link columns. */
.contact-list{transform:translateX(-36px)}
.phone{text-align:center}
@media(max-width:1000px) and (min-width:651px){.contact-list{transform:translateX(-20px)}}
@media(max-width:650px){.contact-list{transform:none}}
/* Fade the set image before the contact text, retaining the common canvas. */
/* Unobstructed reel with its sound control at the bottom. */
.cover-finistauto,.cover-motivation,.cover-factory{background-size:cover;background-position:center;filter:none}
.cover-finistauto{background-image:url('/assets/finistauto-selected.png')}
.cover-motivation{background-image:url('/assets/motivation-selected.png')}
.cover-factory{background-image:url('/assets/backstage-selected.png')}
.portrait{background-image:url('/assets/portrait-selected.png');left:0;right:auto;top:0;bottom:0;width:57%;background-size:contain;background-position:center bottom}
@media(max-width:650px){.portrait{inset:auto;width:100%;margin:20px 0 0;aspect-ratio:1375/1144;background-size:contain;background-position:center}}
.showreel{border:0}
.sound-control{top:auto;bottom:14px;left:50%;transform:translateX(-50%);flex-direction:row;gap:8px;padding:8px 12px}
.sound-control svg{width:24px;height:24px}
@media(max-width:650px){.sound-control{bottom:6px;padding:6px 10px}.sound-control svg{width:20px;height:20px}}
/* Match the approved about-section composition: the portrait rises into the title. */
@media(min-width:651px){
  .about .section-heading{position:relative;z-index:3}
  .about-grid{position:relative;z-index:0}
  .portrait{z-index:1;top:-115px;bottom:0;left:0;width:65%;background-size:contain;background-position:center bottom}
  .about-copy{position:relative;z-index:2}
}
@media(max-width:650px){
  .portrait{z-index:0}
}

/* On-site project player */
.project-player{width:min(1100px,94vw);max-width:94vw;max-height:94dvh;margin:auto;padding:16px;background:#111;color:#fff;border:1px solid #333;overflow:auto}
.project-player::backdrop{background:rgba(0,0,0,.9)}
.player-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}
.player-heading h3{font-size:20px;margin:0}
.player-close{background:transparent;border:0;color:#ddd;font:inherit;font-size:16px;cursor:pointer;padding:10px}
.player-close:focus-visible{outline:2px solid #ef3434}
.project-video{display:block;width:100%;aspect-ratio:16/9;max-height:76dvh;background:#000;object-fit:contain}
.player-error{font-size:16px;color:#ddd}.player-error a{color:#fff;text-decoration:underline}
@media(max-width:650px){.project-player{padding:10px}.player-heading h3{font-size:17px}}