:root {
  --black: #050505;
  --black-2: #0c0c0c;
  --white: #f5f5f2;
  --muted: #a7a7a2;
  --yellow: #f5c400;
  --line: rgba(255,255,255,.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: Inter, Arial, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(22px, 5vw, 72px);
  background: linear-gradient(to bottom, rgba(0,0,0,.82), transparent);
  transition: background .25s ease, backdrop-filter .25s ease;
}
.site-header.scrolled {
  background: rgba(5,5,5,.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand img { width: 104px; height: 54px; object-fit: contain; object-position: left center; }
nav { display: flex; align-items: center; gap: 30px; font: 700 15px/1 Barlow Condensed, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
nav a { opacity: .82; transition: opacity .2s, color .2s; }
nav a:hover { opacity: 1; color: var(--yellow); }
.nav-cta { border: 1px solid rgba(245,196,0,.7); padding: 12px 18px; }

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 62%, rgba(255,255,255,.11), transparent 18%),
    linear-gradient(to bottom, #020202 0%, #050505 55%, #0a0a0a 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.1) 55%, rgba(0,0,0,.92)),
    radial-gradient(circle at center, transparent 0 36%, rgba(0,0,0,.55) 78%);
  z-index: -1;
}
.light {
  position: absolute;
  top: -12%;
  width: 34vw;
  height: 90vh;
  background: linear-gradient(to bottom, rgba(255,255,255,.22), rgba(255,255,255,0));
  filter: blur(18px);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  opacity: .32;
  z-index: -2;
  transform-origin: top center;
  animation: sweep 9s ease-in-out infinite alternate;
}
.light-a { left: 7%; transform: rotate(13deg); }
.light-b { left: 36%; opacity: .2; animation-delay: -3s; }
.light-c { right: 3%; transform: rotate(-15deg); animation-delay: -5s; }
.stage-lines {
  position: absolute;
  inset: 25% 7% 18%;
  border-top: 1px solid rgba(255,255,255,.12);
  border-left: 1px solid rgba(255,255,255,.07);
  border-right: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 0 120px rgba(245,196,0,.05) inset;
  z-index: -1;
}
.crowd {
  position: absolute;
  inset: auto -5% -14% -5%;
  height: 39%;
  background:
    radial-gradient(ellipse at 8% 30%, #090909 0 8%, transparent 8.3%),
    radial-gradient(ellipse at 17% 17%, #0a0a0a 0 9%, transparent 9.3%),
    radial-gradient(ellipse at 27% 31%, #080808 0 8%, transparent 8.3%),
    radial-gradient(ellipse at 39% 12%, #090909 0 10%, transparent 10.3%),
    radial-gradient(ellipse at 52% 30%, #090909 0 9%, transparent 9.3%),
    radial-gradient(ellipse at 64% 14%, #090909 0 9%, transparent 9.3%),
    radial-gradient(ellipse at 76% 32%, #080808 0 10%, transparent 10.3%),
    radial-gradient(ellipse at 89% 18%, #090909 0 10%, transparent 10.3%),
    linear-gradient(to top, #030303 0 68%, transparent 69%);
  filter: drop-shadow(0 -18px 40px rgba(0,0,0,.7));
  z-index: 0;
}
.grain {
  position: absolute;
  inset: -50%;
  opacity: .08;
  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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation: grain .4s steps(2) infinite;
  pointer-events: none;
  z-index: 5;
}
.hero-inner {
  position: relative;
  z-index: 3;
  width: min(1120px, calc(100% - 44px));
  text-align: center;
  padding-top: 70px;
}
.hero-logo { width: clamp(220px, 30vw, 420px); margin: 0 auto 12px; filter: drop-shadow(0 0 28px rgba(245,196,0,.14)); }
.eyebrow { margin: 0 0 22px; color: var(--muted); font: 700 clamp(10px, 1.1vw, 13px)/1.3 Inter, sans-serif; letter-spacing: .34em; }
.hero h1,
.section h2,
.service-grid h3 {
  font-family: Barlow Condensed, sans-serif;
  text-transform: uppercase;
  margin: 0;
}
.hero h1 { font-size: clamp(64px, 10vw, 150px); line-height: .78; letter-spacing: -.04em; font-weight: 900; text-shadow: 0 8px 35px rgba(0,0,0,.7); }
.hero h1 span { color: var(--yellow); }
.hero-copy { width: min(620px, 100%); margin: 28px auto 34px; color: #d5d5d0; font-size: clamp(15px, 1.5vw, 19px); line-height: 1.65; }
.primary-button {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--yellow);
  padding: 16px 22px;
  color: var(--yellow);
  font: 800 16px/1 Barlow Condensed, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .2s, color .2s, transform .2s;
}
.primary-button:hover { background: var(--yellow); color: #050505; transform: translateY(-2px); }
.primary-button span { font-size: 20px; }

.section { padding: clamp(90px, 11vw, 150px) clamp(24px, 7vw, 108px); border-top: 1px solid var(--line); }
.section-kicker { color: var(--yellow); font: 800 14px/1 Barlow Condensed, sans-serif; letter-spacing: .18em; margin-bottom: 28px; }
.about { background: linear-gradient(125deg, #080808, #111 62%, #080808); }
.about-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 9vw, 140px); align-items: end; }
.about h2 { font-size: clamp(54px, 7vw, 104px); line-height: .86; letter-spacing: -.03em; }
.about h2 span { color: var(--yellow); }
.about-copy { color: #cecec9; font-size: clamp(16px, 1.55vw, 20px); line-height: 1.75; max-width: 650px; }
.about-copy p { margin: 0 0 20px; }

.services { background: #050505; }
.services > h2 { font-size: clamp(48px, 6vw, 88px); margin-bottom: 46px; letter-spacing: -.03em; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.service-grid article { min-height: 330px; padding: 32px; border-right: 1px solid var(--line); position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(255,255,255,.025), transparent); }
.service-grid article:last-child { border-right: 0; }
.service-grid article::after { content:""; position:absolute; inset:auto 0 0; height:4px; background:var(--yellow); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.service-grid article:hover::after { transform: scaleX(1); }
.service-grid span { color: var(--yellow); font: 700 13px/1 Inter, sans-serif; letter-spacing: .2em; }
.service-grid h3 { font-size: clamp(42px, 4vw, 66px); line-height: .9; margin: 110px 0 18px; }
.service-grid p { color: var(--muted); line-height: 1.65; max-width: 330px; }

.contact { position: relative; overflow: hidden; text-align: center; background: #0a0a0a; }
.contact-glow { position:absolute; width:520px; height:520px; border-radius:50%; background:rgba(245,196,0,.13); filter:blur(110px); left:50%; top:45%; transform:translate(-50%,-50%); }
.contact > *:not(.contact-glow) { position: relative; z-index: 2; }
.contact h2 { font-size: clamp(72px, 11vw, 170px); line-height: .82; letter-spacing: -.04em; }
.contact p { color: #c6c6c1; margin: 28px auto 38px; font-size: clamp(16px, 1.6vw, 20px); }
.contact-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.contact-links a { min-width: 180px; border: 1px solid rgba(245,196,0,.7); padding: 17px 24px; color: var(--yellow); font: 800 18px/1 Barlow Condensed, sans-serif; letter-spacing: .1em; text-transform: uppercase; transition: all .2s; }
.contact-links a:hover { background: var(--yellow); color: #050505; transform: translateY(-2px); }
.contact-data { margin-top: 56px; display:flex; justify-content:center; gap:28px; flex-wrap:wrap; color:#8f8f8b; font-size:13px; letter-spacing:.08em; text-transform:uppercase; }

footer { padding: 30px clamp(22px,5vw,72px); display:flex; justify-content:space-between; align-items:center; gap:24px; border-top:1px solid var(--line); background:#030303; color:#777; font-size:12px; }
footer img { width:90px; height:52px; object-fit:contain; }

.reveal { opacity: 0; transform: translateY(24px); animation: reveal .8s .15s ease forwards; }

@keyframes reveal { to { opacity: 1; transform: none; } }
@keyframes sweep { to { transform: rotate(-8deg) translateX(4vw); } }
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(2%,-1%)} 50%{transform:translate(-1%,2%)} 75%{transform:translate(1%,1%)} 100%{transform:translate(-2%,-1%)} }

@media (max-width: 860px) {
  .site-header { padding: 15px 18px; }
  .brand img { width: 84px; height: 46px; }
  nav { gap: 16px; font-size: 13px; }
  nav a:not(.nav-cta) { display: none; }
  .hero-inner { padding-top: 80px; }
  .hero-logo { width: 215px; }
  .eyebrow { letter-spacing: .18em; }
  .hero h1 { line-height: .84; }
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-grid article { min-height: 240px; border-right: 0; border-bottom: 1px solid var(--line); }
  .service-grid article:last-child { border-bottom: 0; }
  .service-grid h3 { margin-top: 65px; }
  footer { flex-direction: column; text-align: center; }
}

@media (max-width: 520px) {
  .hero-copy { font-size: 15px; }
  .primary-button { width: 100%; justify-content: center; }
  .contact-links { flex-direction: column; }
  .contact-links a { width: 100%; }
  .contact-data { flex-direction: column; gap: 10px; }
}