#home {
  min-height: 100vh;
  padding-top: 58px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
#home::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('../pics/hero-bg.jpg');
  background-size: cover;
  background-position: center 20%;
  filter: brightness(1.1) contrast(1.0);
  pointer-events: none;
}
#home::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8,6,4,0) 0%,
    rgba(8,6,4,.15) 50%,
    rgba(8,6,4,.72) 100%
  );
  pointer-events: none;
}
.hero-grain {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .38;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' fill='%23bf1c12'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
.hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(40px,8vh,100px) clamp(18px,5vw,56px) clamp(48px,8vh,80px);
  min-height: calc(100vh - 58px);
}
.hero-city {
  font-family: var(--font-s);
  font-size: 11px;
  letter-spacing: .45em;
  color: rgba(237,228,208,.9);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.hero-h1 {
  font-family: var(--font-d);
  font-size: clamp(64px,14vw,200px);
  line-height: .86;
  letter-spacing: .04em;
  color: var(--fg);
  white-space: nowrap;
  text-shadow: 5px 0 0 rgba(191,28,18,.55), -2px 0 0 rgba(80,180,220,.1);
  overflow: hidden;
  border-right: .06em solid var(--fg);
  width: 0;
  animation:
    h1-typing 1.4s steps(6,end) 0.3s forwards,
    h1-cursor .75s step-end infinite;
}
@keyframes h1-typing { from{width:0} to{width:calc(6ch + 0.6em)} }
@keyframes h1-cursor { 0%,100%{border-color:var(--fg)} 50%{border-color:transparent} }
.hero-sub {
  font-family: var(--font-s);
  font-size: clamp(10px,1.3vw,13px);
  letter-spacing: .35em;
  text-transform: uppercase;
  color: rgba(237,228,208,.9);
  margin-top: 22px;
}
.hero-sub::after {
  content: '_';
  animation: blink .9s step-end infinite;
  color: var(--red);
}
.hero-cta {
  display: inline-block;
  margin-top: 44px;
  align-self: flex-start;
  font-family: var(--font-d);
  font-size: 21px;
  letter-spacing: .18em;
  color: var(--bg);
  background: var(--red);
  padding: 12px 38px 10px;
  clip-path: polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);
  transition: background .14s, transform .12s;
}
.hero-cta:hover { background: var(--fg); transform: translate(-2px,-2px); }
.hero-cta:active { transform: translate(1px,1px); }
.hero-socials {
  position: absolute;
  bottom: 40px;
  right: clamp(18px,5vw,56px);
  display: flex;
  gap: 20px;
  z-index: 2;
  align-items: center;
}
.hero-social-link {
  width: 40px !important;
  height: 40px !important;
  color: var(--red);
  transition: opacity .2s, transform .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero-social-link svg {
  width: 40px !important;
  height: 40px !important;
  display: block;
}
.hero-social-link img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain;
  display: block;
}
.hero-social-link i {
  font-size: 48px !important;
  color: var(--red);
}
.hero-social-link:hover {
  opacity: .7;
  transform: translateY(-3px);
}