:root{color-scheme:dark;--paper:#e5e5e7;--ink:#202124;--space:clamp(22px,3.2vw,100px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--paper);font-family:Arial,Helvetica,sans-serif;font-weight:400}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #c9de9f;outline-offset:6px}
img{display:block;width:100%;object-fit:cover}
h1,h2,h3,p{margin:0;font-weight:400}
header{height:66px;padding:16px var(--space);display:flex;align-items:center;justify-content:space-between;position:absolute;top:0;width:100%;z-index:10;color:white}
header .symbol{width:44px;height:30px;object-fit:contain}
nav{display:flex;gap:40px;margin-left:auto;margin-right:10vw;font-size:13px}
nav a,.text-link{position:relative}
nav a:after,.text-link:after{content:'';position:absolute;bottom:-5px;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
nav a:hover:after,.text-link:hover:after{transform:scaleX(1)}
.quote{font-size:18px}
.menu-toggle{display:none;background:none;border:0;color:inherit}
.hero{height:240svh;background:var(--paper);color:var(--ink)}
.hero-stage{height:100svh;position:sticky;top:0;overflow:hidden}
.hero-copy{position:absolute;inset:0;padding:16vh 8vw;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding-bottom:30vh}
.hero-copy .wordmark{width:min(55vw,687px);height:auto;object-fit:contain}
.hero-copy h1{display:flex;justify-content:space-between;width:100%;font-size:clamp(17px,2vw,28px);line-height:1.25}
.hero-copy h1 span{max-width:300px}
.hero-copy h1 span:last-child{text-align:right}
.hero-copy em{font-weight:300}
.hero-panel{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;will-change:transform}
.hero-panel.left{left:0}
.hero-panel.right{right:0}
.hero-panel img{position:absolute;height:100%;inset:0;opacity:0;transition:opacity 1.4s;transform:scale(1.03)}
.hero-panel img.active{opacity:1}
.scroll-cue{position:absolute;bottom:14%;left:50%;transform:translateX(-50%);border-radius:40px;padding:14px 12px;background:#ffffff65;color:#222;backdrop-filter:blur(8px);font-size:24px}
.section{padding:100px var(--space);max-width:1600px;margin:auto}
h2,.page-title{font-size:clamp(42px,5.5vw,90px);letter-spacing:-.045em;line-height:1.02;text-transform:uppercase}
.about-copy{display:grid;grid-template-columns:1fr 1fr;gap:7vw}
.about-copy .prose{font-size:clamp(17px,1.65vw,24px);line-height:1.45}
.prose p+p{margin-top:30px}
.about-images{display:grid;grid-template-columns:1.3fr .8fr .8fr;gap:25px;align-items:center;margin-top:75px}
.about-images img{height:420px}
.about-images img:nth-child(2){height:310px;margin-top:170px}
.about-images img:nth-child(3){height:330px;margin-top:-80px}
.portfolio-intro{display:flex;justify-content:space-between;gap:40px;margin:40px 0 60px;line-height:1.5}
.portfolio-intro p{max-width:430px}
.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:65px 28px}
.project-card .image-wrap{overflow:hidden;border-radius:3px}
.project-card img{height:clamp(260px,33vw,550px);transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .8s}
.project-card:hover img{transform:scale(1.045);filter:brightness(1.1)}
.project-card .caption{display:flex;justify-content:space-between;padding-top:18px;font-size:clamp(20px,2.4vw,36px)}
.arrow{display:inline-block;transition:transform .3s}
.project-card:hover .arrow,.pill:hover .arrow{transform:translate(4px,-4px)}
.pill{display:inline-flex;align-items:center;gap:45px;padding:18px 26px;border:1px solid #ffffff70;border-radius:60px;margin-top:55px;transition:background .3s,color .3s}
.pill:hover{background:var(--paper);color:var(--ink)}
.services h2{margin-bottom:70px}
.service{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:35px 0;border-top:1px solid #ffffff40}
.service h3{font-size:clamp(26px,3.4vw,52px)}
.service p{line-height:1.55;max-width:450px;text-transform:uppercase}
.service p span{display:block;margin-top:18px;color:#ababaf}
.cta{min-height:650px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;text-align:center;background:#111}
.cta>img{position:absolute;height:120%;top:-10%;opacity:.35}
.cta-content{position:relative;padding:70px 20px}
.cta h2{font-size:clamp(40px,7vw,110px)}
footer{padding:75px var(--space) 30px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:45px;font-size:16px;line-height:1.7}
footer h3{font-size:13px;color:#aaa;margin-bottom:18px}
footer a{display:block}
footer .copyright{grid-column:1/-1;margin-top:40px;font-size:13px;border-top:1px solid #ffffff25;padding-top:25px}
.page{background:#050505;min-height:100vh}
.page-main{padding-top:145px}
.page-title{text-align:center;margin-bottom:60px}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.gallery img{width:100%;height:100%;max-height:850px;object-fit:cover}
.gallery figure{margin:0;overflow:hidden}
.gallery figure:nth-child(3n){grid-column:1/-1}
.more{margin-top:85px}
.more h2{font-size:40px;margin-bottom:35px}
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-top:65px}
.contact-detail{margin-bottom:35px}
.contact-detail p{color:#aaa;margin-bottom:12px}
.contact-detail a{font-size:clamp(18px,2.4vw,34px);word-break:break-word}
.contact-form{display:grid;gap:25px}
.contact-form label{display:grid;gap:10px}
.contact-form input,.contact-form textarea{background:transparent;color:white;border:0;border-bottom:1px solid #666;padding:12px 0;border-radius:0;width:100%}
.contact-form textarea{min-height:120px;resize:vertical}
.contact-form button{margin-top:0;cursor:pointer;background:transparent;color:inherit;width:max-content}
.form-note{font-size:14px;color:#bbb;line-height:1.5}
.reveal{opacity:1}
.js-motion .reveal{opacity:0;transform:translateY(45px);transition:opacity .85s,transform 1s cubic-bezier(.2,.7,.2,1)}
.js-motion .reveal.visible{opacity:1;transform:none}
.cursor{position:fixed;top:0;left:0;pointer-events:none;z-index:30;font-size:11px;border:1px solid white;padding:3px 5px;color:white;mix-blend-mode:difference;display:none}
.cursor.shown{display:block}
.skip{position:fixed;top:-100px;left:20px;z-index:100;background:white;color:black;padding:12px}
.skip:focus{top:10px}
@media(min-width:1440px){.project-grid .project-card:nth-child(even){padding-top:120px}
}
@media(max-width:809px){header{height:64px}
.quote{font-size:12px;margin-left:auto;margin-right:20px}
.menu-toggle{display:block;font-size:15px}
nav{display:none;position:absolute;top:64px;left:0;right:0;background:#202124;margin:0;padding:30px;flex-direction:column;font-size:20px}
nav.open{display:flex}
.hero{height:190svh}
.hero-copy{padding:24vh 6vw 23vh}
.hero-copy .wordmark{width:85vw}
.hero-copy h1{gap:30px;font-size:16px}
.hero-copy h1 span{max-width:48%}
.section{padding-top:65px;padding-bottom:65px}
.about-copy,.contact-layout{grid-template-columns:1fr;gap:35px}
.about-images{gap:12px;margin-top:45px;grid-template-columns:1fr 1fr}
.about-images img{height:270px}
.about-images img:nth-child(2){height:220px;margin-top:70px}
.about-images img:nth-child(3){display:none}
.portfolio-intro{flex-direction:column;gap:20px;margin-bottom:35px}
.project-grid{grid-template-columns:1fr;gap:40px}
.project-card img{height:auto;aspect-ratio:4/3}
.service{grid-template-columns:1fr;gap:18px}
.cta{min-height:450px}
footer{grid-template-columns:1fr 1fr;padding-top:50px;gap:30px}
.gallery{grid-template-columns:1fr;gap:18px}
.gallery figure:nth-child(3n){grid-column:auto}
.page-main{padding-top:110px}
.page-title{font-size:clamp(30px,7vw,55px);margin-bottom:40px}
.cursor{display:none!important}
}