:root{--lime:#e6fd52;--blue:#2000ff;--u:calc(100vw / 1024.5)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:65px}body{margin:0;background:#000;color:var(--lime);font-family:Acid,Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}h1,h2,p{margin:0}h1,h2,.outline{font-family:Integral,Arial,sans-serif;font-weight:400}h2{font-size:calc(32.3 * var(--u))}.period{font-family:Archivo,Arial,sans-serif}button:focus-visible,a:focus-visible,.marquee:focus-visible{outline:3px solid white;outline-offset:6px}header{position:absolute;z-index:5;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:calc(16 * var(--u)) calc(57 * var(--u)) calc(16 * var(--u)) calc(36 * var(--u))}.brand{width:calc(129 * var(--u));display:block}.brand img{width:100%;display:block}nav{display:flex;gap:calc(24 * var(--u));font-size:max(14px,calc(15 * var(--u)))}nav a{position:relative;transition:color .2s}nav a:after{content:'';position:absolute;bottom:-5px;left:0;right:0;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .2s}nav a:hover:after{transform:scaleX(1)}.menu-toggle{display:none}.hero{height:calc(272 * var(--u));position:relative;overflow:hidden}.hero-image{position:absolute;inset:0;background:linear-gradient(90deg,#000 36%,transparent 66%),url(assets/hero-photo.png) right 42% / 63.5% auto no-repeat;filter:grayscale(1);animation:hero-in 1.2s ease-out}.hero h1{position:absolute;bottom:calc(20 * var(--u));left:calc(36 * var(--u));font-size:calc(51 * var(--u));line-height:1.2;animation:rise .9s ease-out}.about{display:grid;grid-template-columns:64.2% 35.8%;background:var(--lime);color:black}.intro{padding:calc(27 * var(--u));padding-bottom:0}.intro h2{font-size:calc(32.3 * var(--u));line-height:1.395}.film{background:#444;display:grid;place-items:center;color:#ddd;text-align:center;font-size:max(14px,calc(15 * var(--u)))}.film small{font-size:12px;opacity:.7}.industries{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:calc(18 * var(--u));min-height:calc(59 * var(--u));font-size:max(14px,calc(15 * var(--u)));color:#444}.industries i{background:var(--blue);width:9px;height:9px;flex-shrink:0}.clients{text-align:center;padding-top:calc(30 * var(--u));border-bottom:1px solid #444;overflow:hidden}.marquee{margin-top:calc(20 * var(--u));padding-bottom:calc(15 * var(--u))}.track{display:flex;width:max-content;animation:marquee 25s linear infinite}.logo-set{width:100vw;display:flex;align-items:center;justify-content:space-around;gap:2vw;padding:0 2vw}.logo-set img{width:17%;height:calc(139 * var(--u));object-fit:contain}.marquee:hover .track,.marquee:focus .track{animation-play-state:paused}.solutions{padding:calc(45 * var(--u)) calc(60 * var(--u)) calc(39 * var(--u));text-align:center}.services{display:grid;grid-template-columns:repeat(8,1fr);gap:calc(25 * var(--u)) calc(24 * var(--u));margin:calc(35 * var(--u)) 0 calc(37 * var(--u))}.service{grid-column:span 2;background:none;border:0;padding:0;font-size:calc(18 * var(--u));line-height:1.4;display:flex;align-items:center;flex-direction:column}.service:nth-child(5){grid-column:2/span 2}.service figure{height:calc(150 * var(--u));width:100%;margin:0 0 calc(10 * var(--u));display:grid;place-items:center}.service img{height:100%;max-width:100%;object-fit:contain;border:2px solid var(--blue);transition:transform .4s,border-color .3s}.service:nth-child(n+5) figure{height:calc(120 * var(--u))}.service:hover img{transform:translateY(-8px) scale(1.035);border-color:var(--lime)}.service:hover{color:white}.outline{display:inline-flex;justify-content:center;align-items:center;border:2px solid var(--blue);padding:calc(15 * var(--u)) calc(30 * var(--u));background:transparent;min-width:calc(302 * var(--u));font-size:max(14px,calc(20 * var(--u)));transition:background .25s,color .25s,transform .25s}.outline:hover{background:var(--lime);color:black;transform:translateY(-2px)}.projects{height:calc(576 * var(--u));position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.project-image{position:absolute;inset:-2%;background:url(assets/project-biennale-2025.png) center / cover;transition:transform .8s,background-position .8s;pointer-events:none}.projects:hover .project-image{transform:scale(1.035)}.project-title{position:relative;background:none;border:0;text-align:center;max-width:85%;padding:0}.project-title h2{font-size:calc(36 * var(--u));line-height:1.4}.next{position:absolute;right:5.3%;top:38%;width:6%;height:25%;background:none;border:0;padding:0;transition:transform .3s}.next:hover{transform:translateX(8px)}.next svg{width:100%;height:100%;fill:none;stroke:var(--lime);stroke-width:2}.projects .outline{position:absolute;bottom:calc(54 * var(--u))}.gallery-count{position:absolute;bottom:20px;right:25px;font-size:14px}.contact{text-align:center;padding:calc(35 * var(--u)) 15px calc(55 * var(--u))}.contact h2{font-size:calc(57 * var(--u));line-height:1.2;margin-bottom:calc(23 * var(--u))}.contact .outline{min-width:calc(257 * var(--u));padding:calc(7 * var(--u)) calc(30 * var(--u))}footer{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:6%;padding:0 8.7% 5%;font-size:14px;line-height:1.65;color:#bbb}footer strong{color:white}footer p{margin-bottom:5px}footer a,footer span,footer .text-button{display:block}.footer-group{margin-bottom:30px}.footer-contact{margin-top:10px}.phone{color:var(--lime);display:inline}footer a:hover,.text-button:hover{color:var(--lime)}.text-button{background:none;border:0;padding:0;text-align:left;font:inherit}.reveal{transition:opacity .65s,transform .65s}.reveal.wait{opacity:0;transform:translateY(25px)}dialog{background:#080808;color:var(--lime);border:1px solid var(--blue);width:min(900px,92vw);max-height:90vh;padding:50px 30px 30px}dialog::backdrop{background:#000c;backdrop-filter:blur(8px)}.close{position:absolute;right:15px;top:5px;font:36px Arial;background:none;border:0}.detail-body img{width:100%;max-height:55vh;object-fit:contain}.detail-body h2{font-size:clamp(22px,3vw,40px);margin:20px 0}.detail-body p{font-size:18px;margin-bottom:20px}.detail-body .outline{font:18px Acid,Arial,sans-serif}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.detail-grid button{background:none;border:1px solid var(--blue);padding:16px;font:18px Acid,Arial,sans-serif}.detail-grid button:hover{background:var(--blue)}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes rise{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}@keyframes hero-in{from{transform:scale(1.05)}to{transform:scale(1)}}
@media(min-width:1600px){footer{font-size:16px}}@media(max-width:650px){header{padding:16px 20px}.brand{width:130px}.menu-toggle{display:flex;gap:15px;background:black;border:1px solid var(--blue);padding:8px 12px;font-size:14px}nav{display:none;position:absolute;top:65px;right:20px;left:20px;padding:22px;background:#000f;border:1px solid var(--blue);font-size:18px;gap:22px;flex-direction:column}nav.open{display:flex}.hero{height:360px}.hero-image{background-size:auto,auto 120%;background-position:center,right center;background-image:linear-gradient(90deg,#0008,transparent),url(assets/hero-photo.png)}.hero h1{font-size:clamp(28px,7.3vw,46px);bottom:25px;left:20px}.about{grid-template-columns:1fr}.intro{padding:26px 20px}.intro h2{font-size:clamp(18px,4.45vw,29px);line-height:1.4}.film{height:180px;grid-row:3}.industries{flex-wrap:wrap;padding:12px 20px 22px;gap:10px;font-size:14px}.industries i{width:5px;height:5px}.clients{padding-top:30px}h2{font-size:25px}.marquee{margin-top:20px;padding-bottom:20px}.logo-set{width:180vw;gap:5vw}.logo-set img{height:90px}.solutions{padding:38px 20px}.services{grid-template-columns:1fr 1fr;gap:25px 18px;margin:30px 0}.service,.service:nth-child(5){grid-column:auto;font-size:16px}.service:last-child{grid-column:1/-1;max-width:180px;justify-self:center}.service figure,.service:nth-child(n+5) figure{height:140px;margin-bottom:10px}.outline{min-width:220px;padding:14px 22px;font-size:15px}.projects{height:440px}.project-title h2{font-size:25px}.project-title{max-width:76%}.next{right:4%;width:7%;height:22%;top:40%}.projects .outline{bottom:45px}.contact{padding:35px 20px 45px}.contact h2{font-size:clamp(26px,7.2vw,44px);margin-bottom:25px}.contact .outline{padding:12px 25px;min-width:220px}footer{grid-template-columns:1fr 1fr;padding:0 20px 35px;gap:25px;font-size:14px}footer>div:first-child{grid-column:1/-1}.footer-group{margin-bottom:22px}.detail-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal.wait{opacity:1;transform:none}}

.film{position:relative;min-width:0;overflow:hidden}.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.watch-youtube{position:absolute;bottom:0;right:0;background:#000c;color:#fff;padding:5px 9px;font:12px Arial,sans-serif;z-index:1}.watch-youtube:hover{color:var(--lime)}@media(max-width:650px){.film{height:auto;aspect-ratio:16/9}}

/* Reveal the closing section beneath the scrolling project section. */
main{position:relative;z-index:2;background:#000}
.closing-panel{position:relative;z-index:1;background:#000;display:flow-root}
.closing-space{display:none}
.footer-reveal .closing-panel{position:fixed;left:0;right:0;bottom:0}
.footer-reveal .closing-space{display:block;height:var(--closing-height)}
.footer-reveal main{box-shadow:0 24px 48px #0005}
.footer-reveal .closing-panel .reveal{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){.footer-reveal .closing-panel{position:relative}.footer-reveal .closing-space{display:none}}

/* Word-by-word color and lift, tied to natural scroll progress. */
.scroll-copy .motion-word{display:inline-block;color:var(--word-color,#000);transform:translateY(var(--word-rise,0px));will-change:transform}
.industries i{transform:rotate(var(--industry-turn,0deg));transition:transform .15s linear}
@media(prefers-reduced-motion:reduce){.scroll-copy .motion-word{transform:none!important;color:#000!important}.scroll-copy .motion-word.accent-word{color:#000!important}.industries i{transform:none}}

/* Images sit above their titles in stable rows. */
.services{align-items:start;row-gap:clamp(32px,4vw,64px)}
.service{min-width:0;display:grid;grid-template-rows:auto auto;gap:18px;width:100%;font-size:clamp(16px,1.76vw,28px);align-items:start}
.service-title{display:flex;justify-content:center;align-items:center;min-height:2.8em;line-height:1.4;width:100%}
.service figure,.service:nth-child(n+5) figure{position:relative;display:block;width:100%;height:auto;aspect-ratio:4/3;min-width:0;margin:0;overflow:hidden;border:2px solid var(--blue);background:#000;transition:border-color .25s}
.service img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:cover;border:0;transition:transform .35s}
.service:hover figure{border-color:var(--lime)}
.service:hover img{transform:scale(1.025);border:0}
@media(max-width:650px){.services{column-gap:18px;row-gap:30px}.service{gap:12px;font-size:16px}.service:last-child{width:calc((100vw - 58px)/2);max-width:none}.service figure,.service:nth-child(n+5) figure{height:auto;margin:0;aspect-ratio:4/3}}

/* Keep introduction and Clients in normal document flow. */
.intro-clients,.about-hold{position:relative}
.clients{position:relative;background:#000}

/* Give the hero and the introduction their own screen-sized compositions. */
.hero{height:100vh;height:100svh;min-height:540px}
.hero-image{background:linear-gradient(0deg,#000b 0%,transparent 48%),linear-gradient(90deg,#0009,transparent 75%),url(assets/hero-original.png) center center / cover no-repeat}
.hero h1{left:clamp(20px,3.5vw,72px);bottom:clamp(40px,7vh,100px);font-size:clamp(36px,5vw,100px);max-width:92%;line-height:1.15}
.about{min-height:100vh;min-height:100svh;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:1fr auto;align-items:center;column-gap:clamp(28px,4vw,80px);padding:clamp(48px,7vh,100px) clamp(24px,3.5vw,72px) 24px}
.intro{padding:0;min-width:0}
.intro h2{font-size:clamp(26px,3vw,58px);line-height:1.4}
.film{width:100%;height:auto;aspect-ratio:16/9;background:#000;align-self:center}
.industries{padding-top:clamp(32px,6vh,72px);min-height:0;flex-wrap:wrap;gap:clamp(12px,1.8vw,32px)}
@media(max-width:800px){
.about{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:32px;padding:48px 24px 28px;min-height:0}
.intro h2{font-size:clamp(26px,4.5vw,36px)}
.film{grid-row:2;height:auto;aspect-ratio:16/9}
.industries{grid-row:3;padding:0;gap:12px;font-size:14px}
.hero-image{background-position:center,center,62% center}
.hero h1{font-size:clamp(32px,7vw,56px);bottom:48px}
}

.project-title{max-width:74%}.project-title h2{font-size:clamp(24px,3.5vw,64px);overflow-wrap:break-word}

/* Lift the industry line within the full-height introduction. */
@media(min-width:801px){.about{padding-bottom:clamp(64px,10vh,112px)}.industries{padding-top:clamp(24px,4vh,48px)}}

/* The second panel scrolls over the pinned hero within their shared boundary. */
.opening-reveal{position:relative;isolation:isolate}
.opening-reveal .hero{position:sticky;top:0;z-index:0}
.opening-reveal .about-hold{position:relative;z-index:1;background:var(--lime);box-shadow:0 -18px 48px #0003}
@media(prefers-reduced-motion:reduce){.opening-reveal .hero{position:relative;top:auto}.opening-reveal .about-hold{box-shadow:none}}