:root{
  --bg: #fbff81;
  --text: #111; /* near-black */
}
@font-face{
  font-family: "Arial Narrow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Arial Narrow"), local("ArialNarrow"), local("Arial-Narrow"), local("Arial Narrow Regular"), url("../Arial Narrow Font/arialnarrow.ttf") format("truetype");
}
@font-face{
  font-family: "Arial Narrow";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local("Arial Narrow Italic"), local("ArialNarrow-Italic"), local("Arial Narrow Italic"), url("../Arial Narrow Font/arialnarrow_italic.ttf") format("truetype");
}
@font-face{
  font-family: "Arial Narrow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"), local("Arial Narrow Bold"), url("../Arial Narrow Font/arialnarrow_bold.ttf") format("truetype");
}
@font-face{
  font-family: "Arial Narrow";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local("Arial Narrow Bold Italic"), local("ArialNarrow-BoldItalic"), local("Arial Narrow Bold Italic"), url("../Arial Narrow Font/arialnarrow_bolditalic.ttf") format("truetype");
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  font-family: "Arial Narrow", "Roboto Condensed", Arial, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  color:var(--text);
}
.stage{
  min-height:100dvh;
  display:grid;
  grid-template-rows: 3fr auto 2fr auto 3fr;
  justify-items:center;
  padding-top:0;
  padding-bottom:0;
  position:relative;
}
.hero{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:60.9375vmin; /* 25% bigger than previous 48.75vmin */
  max-width:none;
  margin:0;
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:#000;
  border:none;
  z-index:1;
  pointer-events:none; /* allow clicking text behind (e.g., contact link) */
}
.hero-aspect{
  width:100%;
  aspect-ratio:1 / 1;
  position:relative;
  overflow:hidden;
  /* no border here; border applied to .hero */
}
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:none;
  pointer-events:none;
}
.hero-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
}
.brand{
  position:fixed;
  left:50%;
  top:88%;
  transform:translate(-50%, -50%);
  width:100vw;
  margin:0;
  text-align:center;
  font-size:clamp(21px, 6.6vw, 132px);
  font-weight:700;
  line-height:.85;
  letter-spacing:.02em;
  text-transform:uppercase;
  z-index:0;
  pointer-events:none;
}
.tagline{
  margin:0;
  position:fixed;
  left:50%;
  top:8%;
  transform:translate(-50%, 0);
  width:100vw;
  text-align:center;
  font-size:clamp(21px, 6.6vw, 132px);
  font-weight:700;
  line-height:.85;
  letter-spacing:.02em;
  text-transform:uppercase;
  z-index:0; /* sit behind hero for overlap */
  pointer-events:none;
}
.contact{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:100vw;
  margin:0;
  text-align:center;
  font-size:clamp(21px, 6.6vw, 132px);
  font-weight:700;
  line-height:.85;
  letter-spacing:.02em;
  text-transform:uppercase;
  z-index:0;
  pointer-events:auto;
}

.contact-link{
  color:inherit;
  text-decoration:none;
}
.contact-link:focus,
.contact-link:hover{
  text-decoration:underline;
}
@media (min-width:768px){
}