:root{--accent:#c4ef16;--blue:var(--accent)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* Transparent custom lettering preserves the exact supplied art direction. */
.hero .intro{animation:none;width:90vw}
.hero-title-art{display:block;width:min(82vw,1500px);height:auto;margin:auto;filter:drop-shadow(0 2px 18px rgba(0,0,0,.16))}
.hero .intro{transition:opacity 2s cubic-bezier(.22,.61,.36,1);filter:none}
.hero.title-hidden .intro{opacity:0;pointer-events:none;transform:translate(-50%,-45%);filter:none}
.hero .header,.hero .controls,.hero .shade{opacity:1;filter:none;transform:none;pointer-events:auto}
.vision-section{padding:80px 6vw 100px;min-height:80svh;display:flex;align-items:center;justify-content:center}
.vision-title-art{display:block;width:min(88vw,1450px);height:auto;margin:auto}
.vision-art-crop{width:min(88vw,1450px);aspect-ratio:1774/704;overflow:hidden}
.vision-art-crop .vision-title-art{width:100%;max-width:none}
.vision-section .vision-copy{max-width:850px;font-size:clamp(17px,1.45vw,23px);line-height:1.55;text-wrap:balance;color:#c5cdd0}
.contact-title-art{display:block;width:min(45vw,820px);height:auto;margin:0}
.about-section{background:#05090c}
.about-copy h2{color:var(--accent);font-size:clamp(80px,8vw,140px);line-height:.9}
.about-intro{color:#f0f0ee}
.about-body,.clients .small-label,.credentials span{color:#b2bec4}
.contact-section{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(42px,6vw,110px)}
.contact-title-art{width:100%;max-width:820px}
.contact-copy{min-width:0;padding-left:0}
.email{font-size:clamp(18px,2.4vw,40px)}
.contact-section footer{justify-content:flex-end;align-items:center}
/* Let both closing sections use the width of the screen at desktop sizes. */
.about-copy{padding-left:clamp(64px,8vw,148px);padding-right:clamp(42px,4.5vw,92px)}
.about-intro{font-size:clamp(23px,2vw,36px);line-height:1.38;max-width:700px}
.about-body{font-size:clamp(16px,1.15vw,21px);line-height:1.7;max-width:680px}
.contact-section{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);column-gap:clamp(30px,3vw,64px);padding-left:clamp(48px,5vw,110px);padding-right:clamp(48px,5vw,110px)}
.contact-title-art{max-width:none}
.contact-copy{padding-left:0;padding-top:0}
.contact-copy>.small-label{font-size:clamp(12px,.8vw,16px)}
.email{font-size:clamp(22px,2.2vw,46px)}
.socials a{font-size:clamp(11px,.7vw,14px)}
.top-link{display:inline-flex;align-items:center;gap:16px;color:#e7efef;font-size:11px;font-weight:700;letter-spacing:.15em;transition:color .25s}
.top-link svg{width:72px;height:72px;padding:19px;border:1px solid var(--accent);border-radius:50%;background:var(--accent);color:#05090c;transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s,color .3s}
.top-link:hover{color:var(--accent)}
.top-link:hover svg{transform:translateY(-5px);background:transparent;color:var(--accent)}
.top-link:focus-visible{outline:2px solid var(--accent);outline-offset:8px}
.email:hover,.control:hover,.next-project:hover strong{color:var(--accent)}
.scroll-reveal{opacity:0;translate:0 36px;transition:opacity .9s ease,translate 1.1s cubic-bezier(.16,1,.3,1),clip-path 1.1s cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0ms)}
.scroll-reveal.mask-reveal{clip-path:inset(0 0 100% 0)}
.scroll-reveal.is-visible{opacity:1;translate:0 0;clip-path:inset(-15% -10% -15% -10%)}
.portrait-wrap .portrait{scale:1;transition:filter .8s}
.portrait-wrap{isolation:isolate;cursor:default;background:#090d10}
.portrait-wrap{touch-action:none}
.portrait-wrap .portrait-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.portrait-wrap .portrait-photo{filter:brightness(.88) saturate(.9)}
.portrait-wrap:hover .portrait-photo{filter:brightness(.88) saturate(.9)}
.portrait-flow{position:absolute;z-index:1;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;filter:brightness(.88) saturate(.9);transition:opacity .8s ease}
.portrait-wrap.is-revealing .portrait-flow{opacity:1}
.portrait-hint{position:absolute;z-index:3;left:32px;bottom:28px;padding:10px 12px;border:1px solid rgba(196,239,22,.5);border-radius:100px;background:rgba(3,8,9,.68);color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.16em;pointer-events:none;transition:opacity .3s ease}
.portrait-wrap.is-revealing .portrait-hint{opacity:0}
.hero.is-cinema{background:#000}
.cinema-open{overflow:hidden}
.hero.is-cinema:not(:fullscreen){position:fixed;inset:0;width:100vw;height:100dvh;min-height:0;z-index:1000}
.hero.is-cinema .reel{object-fit:contain;object-position:center;background:#000}
.hero.is-cinema .shade,.hero.is-cinema .intro,.hero.is-cinema .header{opacity:0!important;pointer-events:none}
.hero.is-cinema .controls{z-index:3;opacity:1!important;pointer-events:auto}
.hero.is-cinema .media-status{z-index:3}
.portrait-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
@media(min-width:701px) and (max-width:1100px){
 .contact-section{grid-template-columns:1fr;gap:10px;align-content:center}
 .contact-title-art{width:min(78vw,790px)}
 .contact-copy{padding-left:9vw}
}
@media(max-width:700px){
 .hero-title-art{width:94vw}
 .vision-section{padding:65px 4vw;min-height:60svh}
 .vision-title-art{width:96vw}
 .vision-art-crop{width:96vw}
 .contact-title-art{width:min(92vw,680px)}
 .about-copy h2{font-size:clamp(75px,20vw,110px)}
 .about-copy{padding:50px 6vw 60px}
 .about-intro{font-size:22px}
 .about-body{font-size:16px}
 .contact-section{grid-template-columns:1fr;row-gap:0}
 .contact-section{padding:65px 6vw 115px}
 .contact-copy{padding:28px 0 0}
 .contact-copy>.small-label{font-size:10px}
 .email{font-size:clamp(18px,5.8vw,29px)}
 .top-link svg{width:62px;height:62px;padding:16px}
 .portrait-hint{left:22px;bottom:22px}
 .portrait-hint::before{content:"DRAG TO REVEAL";font-size:10px}
 .portrait-hint{font-size:0}
}
@media(prefers-reduced-motion:reduce){
 .scroll-reveal{opacity:1;translate:none;clip-path:none;transition:none}
 .portrait-wrap .portrait{scale:1}
 .portrait-flow,.portrait-hint{transition:none}
 .hero .intro,.top-link,.top-link svg{transition:none}
}

/* A short invitation between the project reel and the About section. */
.project-invitation{background:#070b0d;padding:0 clamp(28px,5.3vw,116px);min-height:72svh;display:flex;align-items:center}
.invitation-inner{width:100%;max-width:1600px;margin:0 auto;padding:clamp(100px,11vw,180px) 0 clamp(120px,13vw,210px);text-align:center}
.project-invitation h2{font-size:clamp(70px,8.8vw,158px);line-height:.91;letter-spacing:-.025em;white-space:nowrap}
.invitation-line{display:block;overflow:hidden;padding:.04em 0 .08em;margin:-.04em 0 -.08em}
.invitation-line>span{display:block}
.project-invitation em{display:inline-block;margin-left:.05em;color:var(--accent);font-family:'Caveat','Segoe Print',cursive;font-size:1.12em;font-weight:600;font-style:normal;line-height:.7;letter-spacing:-.055em;transform:rotate(-4deg) translateY(.03em)}
.invitation-link{display:inline-flex;align-items:center;justify-content:space-between;gap:clamp(35px,5vw,78px);margin-top:clamp(45px,5vw,82px);padding:19px 24px 19px 30px;border:1px solid var(--accent);border-radius:100px;color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.15em;transition:background .3s,color .3s,transform .3s}
.invitation-link svg{width:22px;height:22px;flex:none;transition:transform .3s}
.invitation-link:hover{background:var(--accent);color:#05090c;transform:translateY(-3px)}
.invitation-link:hover svg{transform:translate(3px,-3px)}
.invitation-link:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
#contact-email{scroll-margin-top:35svh}
#contact-email:target{color:var(--accent)}
.project-invitation.is-animated .invitation-line>span{transform:translateY(115%);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.project-invitation.is-animated .invitation-line:nth-child(2)>span{transition-delay:130ms}
.project-invitation.is-animated .invitation-link{opacity:0;transform:translateY(24px);transition:opacity .8s ease .36s,transform .9s cubic-bezier(.16,1,.3,1) .36s,background .3s,color .3s}
.project-invitation.is-animated.is-visible .invitation-line>span{transform:translateY(0)}
.project-invitation.is-animated.is-visible .invitation-link{opacity:1;transform:translateY(0)}
.project-invitation.is-animated.is-visible .invitation-link:hover{transform:translateY(-3px)}
.carousel{touch-action:pan-x pinch-zoom}
@media(max-width:700px){
 .project-invitation{min-height:58svh;padding:0 6vw}
 .invitation-inner{padding:90px 0 110px}
 .project-invitation h2{font-size:clamp(41px,11.5vw,64px);line-height:.94;letter-spacing:-.025em;white-space:normal}
 .project-invitation em{display:block;width:max-content;margin:.17em 0 .1em .05em;font-size:1.25em}
 .invitation-link{margin-top:38px;padding:16px 19px 16px 22px;font-size:11px;gap:25px}
}
@media(prefers-reduced-motion:reduce){
 .project-invitation.is-animated .invitation-line>span,.project-invitation.is-animated .invitation-link{opacity:1;transform:none;transition:none}
}