@font-face {
  font-family: 'Unbounded';
  src: url('./fonts/unbounded.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --bg: #020b08;
  --text: #eef5f1;
  --muted: rgba(230, 240, 235, .72);
  --line: rgba(226, 240, 233, .28);
  --accent: #49d99a;
  --accent-soft: rgba(73, 217, 154, .22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
a { color: inherit; text-decoration: none; }

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #020b08;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -5;
  filter: saturate(.55) contrast(1.05) brightness(.48);
  transform: scale(1.015);
}

.video-tint {
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    linear-gradient(90deg, rgba(1,10,7,.94) 0%, rgba(1,11,8,.72) 43%, rgba(1,11,8,.62) 100%),
    linear-gradient(180deg, rgba(1,10,7,.70) 0%, rgba(1,10,7,.20) 45%, rgba(1,10,7,.88) 100%);
  pointer-events: none;
}

.noise {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .055;
  pointer-events: none;
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

.orb { position:absolute; pointer-events:none; z-index:-3; border:1px solid rgba(73,217,154,.10); border-radius:50%; filter: blur(.2px); }
.orb-one { width: 48vw; height: 48vw; right: -24vw; top: -25vw; box-shadow: inset 0 0 100px rgba(73,217,154,.06), 0 0 120px rgba(73,217,154,.03); }
.orb-two { width: 38vw; height: 38vw; left: -25vw; bottom: -25vw; box-shadow: inset 0 0 90px rgba(73,217,154,.04); }

.site-header {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  height: 92px;
  padding: 0 6vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand { display:flex; align-items:center; }
.brand-logo {
  display:block;
  width:112px;
  height:auto;
  filter: brightness(0) invert(1);
  opacity:.92;
  transition: opacity .25s ease, transform .25s ease;
}
.brand:hover .brand-logo { opacity:1; transform:translateY(-1px); }

nav { display:flex; gap:34px; align-items:center; }
nav a { position:relative; font-size:13px; color:rgba(239,247,243,.68); transition:color .25s ease; }
nav a:hover, nav a.active { color:#fff; }
nav a.active::after { content:''; position:absolute; left:0; right:0; bottom:-9px; height:1px; background:var(--accent); transform-origin:left; }

.hero-frame {
  position: absolute;
  left: 7.5vw;
  right: 7.5vw;
  top: 15.5vh;
  bottom: 11vh;
  border: 1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
}

.corner { position:absolute; width:8px; height:8px; background:var(--bg); border:1px solid rgba(239,247,243,.7); }
.c-tl { left:-5px; top:-5px; }
.c-tr { right:-5px; top:-5px; }
.c-bl { left:-5px; bottom:-5px; }
.c-br { right:-5px; bottom:-5px; }

.hero-content { width:min(1120px, 82%); text-align:center; margin-top:-1vh; }
.eyebrow { margin:0 0 18px; font-size:12px; letter-spacing:.22em; color:rgba(239,247,243,.78); font-weight:500; }

h1 {
  margin:0;
  font-family:'Unbounded', 'Arial Black', sans-serif;
  font-size:clamp(72px, 10.7vw, 190px);
  line-height:.94;
  letter-spacing:-.065em;
  font-weight:700;
  color:#f2f7f4;
  text-wrap:balance;
}

.intro {
  width:min(760px, 90%);
  margin:30px auto 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
  letter-spacing:-.01em;
}

.frame-meta { position:absolute; bottom:27px; font-size:11px; color:rgba(239,247,243,.70); letter-spacing:.04em; }
.location { left:30px; display:flex; align-items:center; gap:10px; }
.meta-dot { width:6px; height:6px; border:1px solid var(--accent); border-radius:50%; box-shadow:0 0 10px rgba(73,217,154,.4); }
.scroll { right:30px; display:flex; align-items:center; gap:11px; letter-spacing:.18em; transition:color .2s ease; }
.scroll:hover { color:#fff; }
.arrow { color:var(--accent); font-size:15px; line-height:0; }

.work-placeholder { min-height:80vh; background:#03100b; padding:15vh 8vw; }
.work-inner { border-top:1px solid rgba(226,240,233,.16); padding-top:24px; }
.section-label { font-size:11px; letter-spacing:.2em; color:var(--accent); }
.work-placeholder h2 { font-family:'Unbounded', sans-serif; font-size:clamp(40px,6vw,90px); line-height:1.05; font-weight:600; letter-spacing:-.05em; margin:80px 0 0; }

@media (max-width: 700px) {
  .site-header { height:78px; padding:0 5vw; }
  .brand-logo { width:96px; }
  nav { gap:22px; }
  .hero-frame { left:5vw; right:5vw; top:12vh; bottom:8vh; }
  .hero-content { width:88%; }
  .eyebrow { font-size:9px; letter-spacing:.16em; margin-bottom:14px; }
  h1 { font-size:clamp(48px, 15vw, 92px); }
  .intro { font-size:12px; line-height:1.6; margin-top:22px; }
  .frame-meta { bottom:20px; }
  .location { left:18px; }
  .scroll { right:18px; }
  .hero-video { object-position:center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .hero-video { display:none; }
  .hero { background: radial-gradient(circle at 70% 30%, #073f2b, #020b08 62%); }
}