*{box-sizing:border-box}
:root{
  --bg:#090a0a;
  --surface:#101212;
  --surface-2:#151818;
  --text:#f2f0e9;
  --muted:#989b96;
  --line:#272b29;
  --accent:#d8ff62;
  --accent-dark:#9dbb42;
}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"DM Sans",Arial,sans-serif;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none}
.nav{
  position:fixed;z-index:15;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:25px 5.5vw;background:rgba(9,10,10,.78);
  backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.055);
}
.brand{font-family:Manrope,sans-serif;font-size:14px;letter-spacing:-.02em}
.brand strong{font-weight:800;margin-left:4px}
nav{display:flex;gap:32px;font-size:12px;color:#b9bcb8}
nav a{transition:.2s ease}nav a:hover{color:var(--accent)}
.hero{
  min-height:100vh;display:grid;grid-template-columns:.85fr 1.15fr;gap:6vw;
  align-items:center;padding:145px 5.5vw 80px;
}
.kicker{margin:0 0 20px;color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.19em}
h1,h2,h3{font-family:Manrope,sans-serif;line-height:1.02;letter-spacing:-.055em;margin:0}
h1{font-size:clamp(52px,6.8vw,100px);max-width:720px}
h1 span,h2 span{color:var(--muted)}
.intro{max-width:550px;margin:30px 0;color:var(--muted);font-size:16px}
.text-link{display:inline-flex;gap:12px;align-items:center;font-size:13px;font-weight:700;border-bottom:1px solid var(--accent);padding-bottom:7px}
.text-link span{color:var(--accent);font-size:17px}
.hero-frame{position:relative;min-height:640px}
.artwork{
  overflow:hidden;background:#111;border:1px solid var(--line);
  position:relative;
}
.artwork:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.035),transparent 38%,rgba(0,0,0,.2));
}
.placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 72% 22%,rgba(216,255,98,.10),transparent 22%),
    radial-gradient(circle at 20% 80%,rgba(255,255,255,.045),transparent 28%),
    linear-gradient(145deg,#181c1b,#0c0e0d);
  color:#606561;text-align:center;letter-spacing:.17em;font-size:10px;
}
.placeholder small{margin-top:8px;letter-spacing:0;color:#454945;font-size:10px}
.frame-label,.number{
  position:absolute;z-index:2;color:#777;font-size:9px;letter-spacing:.16em
}
.frame-label{bottom:16px;left:18px}
.number{top:16px;right:18px}
.section{padding:135px 5.5vw}
.section-top{display:flex;justify-content:space-between;align-items:end;margin-bottom:65px}
h2{font-size:clamp(42px,5vw,72px)}
.section-note{color:#676b67;font-size:10px;letter-spacing:.14em;text-transform:uppercase;max-width:300px;text-align:right}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:105px 30px;align-items:start}
.project-large{grid-column:span 2}
.project-art{aspect-ratio:16/9;min-height:0}
.project-small .project-art{aspect-ratio:4/3}
.project-meta{display:grid;grid-template-columns:1fr 1fr;gap:35px;padding:22px 2px 0}
.type{margin:0 0 8px;color:#6e736e;font-size:9px;font-weight:700;letter-spacing:.16em}
h3{font-size:30px}
.description{margin:2px 0;color:var(--muted);font-size:13px;max-width:420px}
.about{
  display:grid;grid-template-columns:1fr 1fr;gap:9vw;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.about-body{max-width:680px}
.lead{font-size:24px;line-height:1.35;color:#deded8;margin:0 0 25px}
.about-body>p:not(.lead){color:var(--muted);font-size:15px}
.tool-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:35px}
.tool-list span{padding:8px 12px;border:1px solid var(--line);border-radius:99px;font-size:10px;color:#bfc2bd}
.contact{min-height:78vh;display:flex;flex-direction:column;justify-content:space-between}
.contact h2{font-size:clamp(52px,7vw,105px);max-width:950px}
.contact-bottom{display:flex;justify-content:space-between;align-items:end;gap:30px}
.email{font-family:Manrope,sans-serif;font-size:clamp(19px,2.5vw,34px);letter-spacing:-.035em;border-bottom:1px solid var(--accent);padding-bottom:5px}
.socials{display:flex;gap:22px;font-size:11px;color:#999d98}
.socials a:hover{color:var(--accent)}
footer{display:flex;justify-content:space-between;padding:24px 5.5vw;border-top:1px solid var(--line);color:#626661;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.project,.hero-copy,.hero-frame,.about-title,.about-body,.contact>*{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.visible{opacity:1!important;transform:none!important}
@media(max-width:850px){
  .nav{padding:20px 6vw}.nav nav a:first-child{display:none}
  .hero{grid-template-columns:1fr;padding:130px 6vw 75px;gap:55px}
  .hero-frame{min-height:440px}
  .section{padding:90px 6vw}
  .section-top{display:block}.section-note{text-align:left;margin-top:18px}
  .grid{grid-template-columns:1fr;gap:70px}.project-large{grid-column:auto}
  .project-meta{grid-template-columns:1fr;gap:12px}
  .about{grid-template-columns:1fr;gap:45px}
  .contact-bottom{display:block}.socials{margin-top:40px;flex-wrap:wrap}
}