:root{
  --bg:#000;
  --fg:#f4f4f0;
  --muted:#8d8d88;
  --line:#242424;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#000}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
body.locked{overflow:hidden}
a{color:inherit;text-decoration:none}

/* Intro */
.intro{
  position:fixed;inset:0;z-index:100;background:#000;
  display:grid;place-items:center;
  transition:opacity .9s ease,visibility .9s ease;
}
.intro.exit{opacity:0;visibility:hidden}
.logo-button{width:min(72vw,760px);border:0;background:transparent;cursor:pointer;perspective:1000px;padding:0}
.chrome-logo{
  display:block;width:100%;height:auto;transform-style:preserve-3d;
  filter:drop-shadow(0 30px 55px rgba(255,255,255,.08));
  transition:transform .18s ease-out,filter .3s ease;
}
.logo-button:hover .chrome-logo{filter:drop-shadow(0 35px 70px rgba(255,255,255,.16))}
.logo-button.blast .chrome-logo{
  transition:transform .85s cubic-bezier(.7,0,.2,1),filter .4s;
  transform:scale(3.6)!important;
  filter:blur(8px) brightness(1.7);
}

/* Site */
.site{opacity:0;transition:opacity .7s ease;background:#000}
.site.visible{opacity:1}

/* One real fixed nav. The hero artwork contains its top-state nav visually, so the live nav
   appears as soon as the page starts moving and then uses difference blending everywhere. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 30px;
  font-size:11px;letter-spacing:.12em;color:#fff;
  mix-blend-mode:difference;
  transition:opacity .18s ease;
}
.hero-at-top .nav{opacity:0;pointer-events:none}
.nav .wordmark{font-weight:800}
.nav-right{display:flex;gap:26px}

/* Hero — no layered background hacks: one image, starting at y=0. */
.hero{
  position:relative;width:100%;aspect-ratio:1672/941;
  min-height:0;background:#000;overflow:hidden;
  --hero-opacity:1;
}
.hero-visual{position:absolute;inset:0;opacity:var(--hero-opacity);will-change:opacity}
.hero-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;user-select:none}
.hero-tagline{
  position:absolute;left:6.50%;top:85.30%;margin:0;
  color:#f2f2ef;font-size:clamp(9px,.76vw,14px);font-weight:600;
  line-height:1;letter-spacing:.15em;white-space:nowrap;
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;
}

/* Work — exactly one non-scrollable black section. */
.work{padding:0 2vw 7vw;background:#000;overflow:visible}
.soon-card{
  position:relative;width:100%;aspect-ratio:1672/941;
  border:1px solid var(--line);background:#000;overflow:hidden;
}
.soon-number{
  position:absolute;left:2.3%;top:4.5%;
  font-size:9px;letter-spacing:.18em;color:#8b8b87;
}
.soon-card h2{
  position:absolute;left:2.5%;bottom:4.8%;margin:0;
  color:var(--fg);font-size:clamp(72px,9vw,150px);
  line-height:.78;letter-spacing:-.065em;
}

/* About */
.about{
  min-height:85vh;padding:8vw 6vw;background:#000;
  display:flex;flex-direction:column;justify-content:center;
  border-top:1px solid var(--line);
}
.eyebrow{font-size:10px;letter-spacing:.22em;color:var(--muted);margin:0}
.about-copy{
  font-size:clamp(38px,6.5vw,100px);line-height:.98;
  letter-spacing:-.055em;max-width:1200px;margin:28px 0 0;
}
.about-copy strong{color:#777}
footer{
  padding:28px 30px;border-top:1px solid var(--line);background:#000;
  display:flex;justify-content:space-between;gap:24px;
  font-size:9px;letter-spacing:.18em;color:#777;
}

@media(max-width:760px){
  .logo-button{width:92vw}
  .nav{padding:20px;font-size:10px}.nav-right{gap:14px}
  .hero{aspect-ratio:1672/941}
  .hero-tagline{left:6.5%;top:85.2%;font-size:clamp(5px,1.6vw,9px)}
  .work{padding:0 18px 70px}
  .soon-card{aspect-ratio:auto;height:72vh}
  .soon-card h2{font-size:16vw;left:20px;bottom:34px}
  .soon-number{left:20px;top:22px}
  .about{padding:80px 20px}
  footer{padding:22px 20px}
}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
  .chrome-logo{transform:none!important}
}