:root {
  --red: #ed1c24;
  --black: #121212;
  --paper: #f3efe7;
  --mono: "DM Mono", monospace;
  --body: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--paper); color: var(--black); font-family: var(--body); overflow: hidden; }
body::before { position: fixed; inset: 0; z-index: 10; pointer-events: none; content: ""; opacity: .18; background-image: radial-gradient(rgba(18,18,18,.3) .6px, transparent .6px); background-size: 7px 7px; mix-blend-mode: multiply; }
.page-shell { position: relative; width: 100%; min-height: 100svh; padding: 0 5.3vw; }
.topbar { position: relative; z-index: 5; height: 86px; display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid rgba(18,18,18,.23); font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.wordmark { display: block; width: 112px; line-height: 0; text-decoration: none; }
.wordmark img { display: block; width: 100%; height: auto; }
.contact-link { justify-self: end; color: inherit; text-underline-offset: 5px; }
.contact-link span, .action span { color: var(--red); margin-left: 6px; font-size: 15px; }
.concept { position: relative; height: calc(100svh - 86px); overflow: hidden; }
.kicker { margin: 0 0 22px; color: var(--red); font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; font-family: var(--body); font-size: clamp(64px, 9.3vw, 142px); font-weight: 800; letter-spacing: -.09em; line-height: .82; text-transform: uppercase; }
h1 i { color: var(--red); font-style: normal; }
.concept-signal { display: grid; grid-template-columns: 45% 55%; align-items: center; }
.concept-signal .concept-copy { position: relative; z-index: 2; padding-bottom: 28px; }
.action { display: inline-block; margin-top: 36px; padding-bottom: 9px; border-bottom: 1px solid var(--red); color: inherit; font: 500 11px var(--mono); letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.logo-stage { position: relative; display: grid; place-items: center; min-height: calc(100svh - 160px); }
.logo-stage::before { position: absolute; width: min(40vw, 530px); aspect-ratio: 1; border: 1px solid var(--red); border-radius: 50%; content: ""; }
.logo-stage img { position: relative; width: min(37vw, 500px); animation: float 6s ease-in-out infinite; }
.stage-note, .stage-index { position: absolute; font: 10px/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.stage-note { top: 16%; left: 3%; text-align: center; }
.stage-index { right: 4%; bottom: 17%; color: var(--red); }
.bottom-line { position: absolute; bottom: 5%; left: 0; max-width: 280px; margin: 0; font: 11px/1.45 var(--mono); text-transform: uppercase; }
@keyframes float { 50% { transform: translateY(-10px) rotate(1deg); } }
@media (max-width: 760px) {
  body { overflow: auto; }
  .page-shell { padding: 0 20px; }
  .topbar { height: 74px; grid-template-columns: 1fr auto; }
  .wordmark { width: 96px; }
  .contact-link { font-size: 9px; }
  .concept { height: calc(100svh - 74px); min-height: 600px; }
  .concept-signal { display: block; }
  .concept-signal .concept-copy { padding-top: 16%; }
  .concept-signal h1 { font-size: clamp(59px, 17vw, 100px); }
  .logo-stage { min-height: 46vh; margin-top: 3%; }
  .logo-stage::before { width: 72vw; }
  .logo-stage img { width: 65vw; }
  .stage-note { top: 11%; left: 0; }
  .stage-index { bottom: 6%; }
  .bottom-line { bottom: 2%; font-size: 9px; }
}