@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');

:root{
  --bg:#0b1111;
  --panel:#111918;
  --text:#f1efe8;
  --muted:#a7afa9;
  --green:#9ebca7;
  --gold:#b79a67;
  --line:rgba(255,255,255,.13);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Manrope,Arial,sans-serif;
  line-height:1.6;
}
a{color:inherit}
.site-header{
  position:fixed;
  z-index:20;
  inset:0 0 auto 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px clamp(22px,4vw,68px);
  background:linear-gradient(to bottom,rgba(7,10,10,.9),transparent);
}
.logo{
  text-decoration:none;
  font:600 2rem/1 Space Grotesk,sans-serif;
  letter-spacing:-.08em;
}
.logo span{color:var(--green)}
nav{display:flex;gap:clamp(16px,3vw,40px)}
nav a{
  text-decoration:none;
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.contact-link{border-bottom:1px solid currentColor}

.hero{
  min-height:100svh;
  position:relative;
  overflow:hidden;
  display:grid;
  align-items:end;
  padding:140px clamp(24px,7vw,110px) clamp(58px,9vh,100px);
  background:
    radial-gradient(circle at 70% 30%,rgba(158,188,167,.11),transparent 30%),
    linear-gradient(140deg,#0b1111 0%,#111b1a 55%,#0b1111 100%);
}
.grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 88%);
}
.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(8px);
  opacity:.68;
}
.orb-one{
  width:38vw;height:38vw;
  min-width:360px;min-height:360px;
  right:-8vw;top:12vh;
  border:1px solid rgba(183,154,103,.45);
  box-shadow:
    0 0 90px rgba(183,154,103,.11),
    inset 0 0 80px rgba(158,188,167,.07);
}
.orb-two{
  width:16vw;height:16vw;
  min-width:160px;min-height:160px;
  right:20vw;top:28vh;
  border:1px solid rgba(158,188,167,.36);
}
.hero-content{position:relative;z-index:2;max-width:980px}
.eyebrow,.section-label{
  margin:0 0 22px;
  color:var(--green);
  font-size:.71rem;
  letter-spacing:.22em;
  text-transform:uppercase;
}
h1,h2,blockquote{
  font-family:Space Grotesk,sans-serif;
  letter-spacing:-.055em;
  line-height:.98;
}
h1{margin:0;font-size:clamp(3.3rem,8vw,7.8rem)}
.intro{
  max-width:620px;
  margin:30px 0 36px;
  color:#d5d8d2;
  font-size:clamp(1.05rem,1.8vw,1.35rem);
}
.button{
  display:inline-block;
  padding:13px 18px;
  border:1px solid rgba(255,255,255,.45);
  text-decoration:none;
  font-size:.8rem;
  letter-spacing:.08em;
  transition:.25s ease;
}
.button:hover{background:var(--text);color:var(--bg)}
.mark{
  position:absolute;
  right:5vw;
  bottom:-8vh;
  font:600 clamp(13rem,30vw,34rem)/.8 Space Grotesk,sans-serif;
  letter-spacing:-.12em;
  color:rgba(255,255,255,.025);
}

.statement,.sound{
  display:grid;
  grid-template-columns:minmax(120px,.6fr) minmax(0,2fr);
  gap:5vw;
  padding:clamp(90px,14vw,190px) clamp(24px,7vw,110px);
  border-top:1px solid var(--line);
}
.statement>div,.sound>div{max-width:920px}
h2{margin:0 0 38px;font-size:clamp(2.7rem,6.4vw,6.4rem)}
.statement p:not(.section-label),.sound p{
  max-width:730px;
  color:var(--muted);
  font-size:clamp(1rem,1.6vw,1.25rem);
}

.identity{
  min-height:72vh;
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:
    linear-gradient(125deg,rgba(158,188,167,.08),transparent 44%),
    radial-gradient(circle at 58% 50%,rgba(183,154,103,.12),transparent 30%),
    #0e1514;
  border-block:1px solid var(--line);
}
.identity-word{
  position:relative;
  z-index:2;
  font:600 clamp(5rem,18vw,18rem)/1 Space Grotesk,sans-serif;
  letter-spacing:-.11em;
}
.identity-ring{
  position:absolute;
  width:min(48vw,620px);
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(183,154,103,.52);
  box-shadow:
    0 0 120px rgba(183,154,103,.08),
    inset 0 0 90px rgba(158,188,167,.06);
}
.identity-copy{
  position:absolute;
  inset:auto clamp(24px,6vw,90px) 38px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:rgba(255,255,255,.48);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.sound{background:var(--panel)}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:38px}
.tags span{
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 14px;
  color:#c6ccc7;
  font-size:.75rem;
  letter-spacing:.08em;
}
.quote{
  min-height:66vh;
  display:grid;
  place-items:center;
  padding:80px 24px;
  text-align:center;
}
blockquote{margin:0;max-width:1050px;font-size:clamp(3rem,7vw,7rem)}
footer{
  min-height:260px;
  display:grid;
  grid-template-columns:.7fr 1.5fr auto;
  gap:40px;
  align-items:end;
  padding:60px clamp(24px,7vw,110px);
  border-top:1px solid var(--line);
  color:var(--muted);
}
.footer-logo{color:var(--text);font-size:2.8rem}
footer p{margin:0 0 8px}
footer a{text-underline-offset:4px}
.copyright{white-space:nowrap;font-size:.78rem}

@media(max-width:800px){
  nav a:not(.contact-link){display:none}
  .statement,.sound{grid-template-columns:1fr}
  .section-label{margin-bottom:0}
  .identity-copy{flex-wrap:wrap;justify-content:center}
  footer{grid-template-columns:1fr;align-items:start}
}