/* Brand introduction. All styles are scoped to the hero. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  background: #08080a;
}
.hero__media, .hero__atmosphere, .hero__grain { position: absolute; pointer-events: none; }
.hero__media { inset: -3%; z-index: -3; transform: translate3d(0, var(--hero-drift, 0px), 0); }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: 65% center; opacity: .8; filter: blur(5px); }
.hero__media img.is-loading { opacity: 0; }
.hero__media img.is-ready { animation: hero-image-enter 1.4s ease-out both; }
@keyframes hero-image-enter {
  from { opacity: 0; transform: scale(1.025); }
  to { opacity: .8; transform: scale(1); }
}
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,8,10,.78), rgba(8,8,10,.15)), linear-gradient(0deg, #08080a, transparent 65%);
}
.hero__atmosphere {
  opacity: .35;
  z-index: -2;
  inset: -12%;
  background:
    linear-gradient(180deg, rgba(8,8,10,.22), transparent 30%, #08080a 100%),
    radial-gradient(ellipse at 80% 48%, rgba(143,20,29,.55), transparent 58%),
    conic-gradient(from 218deg at 80% 0%, transparent 0deg, rgba(185,184,195,.22) 12deg, transparent 24deg 360deg),
    conic-gradient(from 190deg at 62% 0%, transparent 0deg, rgba(137,19,29,.42) 13deg, transparent 29deg 360deg);
  transform: translate3d(0, var(--hero-drift, 0px), 0);
}
.hero__atmosphere::after {
  content: '';
  position: absolute;
  inset: 10% 0;
  background: radial-gradient(ellipse at 35% 55%, rgba(151,158,173,.11), transparent 48%);
  animation: hero-atmosphere 16s ease-in-out infinite alternate;
}
.hero__grain {
  z-index: -1;
  inset: 0;
  opacity: .04;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--content-max);
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: calc(var(--nav-height) + 56px) var(--edge-padding) 28px;
  display: flex;
  flex-direction: column;
}
.hero p, .hero h1 { margin: 0; }
.hero__content { margin-block: auto; padding-block: 30px 48px; }
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .26em;
  color: #b7b1b4;
}
.hero__eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--color-red); }
.hero .hero__title {
  margin: 26px 0 30px;
  font-family: var(--font-body);
  font-size: clamp(3rem, 10.8vw, 138px);
  font-weight: 800;
  letter-spacing: -.075em;
  line-height: .95;
}
.hero__title span { display: inline-block; font-style: italic; padding-right: .08em; }
.hero__story { max-width: 540px; }
.hero__statement { font-size: clamp(.95rem, 1.3vw, 1.1rem); line-height: 1.8; color: #d2cdd0; text-wrap: pretty; }
.hero .hero__community { margin-top: 9px; font-size: .82rem; line-height: 1.8; color: #aaa4aa; }
.hero .hero__manifesto { margin-top: 22px; font-size: .61rem; font-weight: 700; letter-spacing: .12em; line-height: 1.9; color: #eeeaed; }
.hero .hero__origin { margin-top: 28px; font-size: .6rem; letter-spacing: .18em; color: #aaa4aa; }
.hero__origin span { margin-inline: 8px; color: #d2cdd0; }
.hero__actions { display: flex; flex-direction: row; align-items: center; gap: 18px; margin-top: 30px; }
.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 50px;
  padding: 15px 20px;
  border: 1px solid transparent;
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .1em;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.hero__cta--primary { background: #aa1823; border-color: rgba(255,160,165,.15); }
.hero__cta--secondary { border-color: rgba(222,219,226,.3); background: rgba(12,12,15,.2); }
.hero__cta span { font-size: 1.15rem; line-height: 1; transition: transform .25s ease; }
.hero__cta:hover { transform: translateY(-2px); }
.hero__cta--primary:hover { background: #c5202c; }
.hero__cta--secondary:hover { background: rgba(222,219,226,.07); border-color: #c1bac4; }
.hero__cta--primary:hover span { transform: translateY(3px); }
.hero__cta--secondary:hover span { transform: translate(2px,-2px); }
.hero__edge {
  position: absolute;
  right: var(--edge-padding);
  top: 48%;
  writing-mode: vertical-rl;
  font-size: .55rem;
  letter-spacing: .24em;
  color: #8f8990;
}
.hero__scroll {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 20px;
  min-height: 44px;
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .2em;
  color: #b8b3b8;
}
.hero__scroll span { font-size: 1rem; animation: hero-scroll 3s ease-in-out infinite; }
.hero__brand, .hero__story, .hero__actions { animation: hero-enter 1s both cubic-bezier(.16,1,.3,1); }
.hero__story { animation-delay: .16s; }
.hero__actions { animation-delay: .32s; }
@keyframes hero-enter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-atmosphere { from { opacity: .4; transform: translateX(-3%); } to { opacity: 1; transform: translateX(3%); } }
@keyframes hero-scroll { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (max-width: 760px) {
  .hero__inner { padding-top: calc(var(--nav-height) + 24px); padding-bottom: 18px; }
  .hero__content { padding-block: 24px 32px; }
  .hero__eyebrow { font-size: .53rem; letter-spacing: .18em; }
  .hero .hero__title { font-size: clamp(2.25rem, 12.6vw, 92px); margin: 26px 0; }
  .hero__story { max-width: 470px; }
  .hero__statement { font-size: .94rem; line-height: 1.7; }
  .hero .hero__community { font-size: .76rem; max-width: 280px; }
  .hero .hero__manifesto { font-size: .56rem; letter-spacing: .08em; margin-top: 20px; }
  .hero__manifesto span { display: block; }
  .hero .hero__origin { margin-top: 22px; font-size: .55rem; }
  .hero__actions { gap: 10px; margin-top: 24px; }
  .hero__cta { padding: 14px 12px; gap: 12px; font-size: .54rem; }
  .hero__edge { position: static; writing-mode: horizontal-tb; font-size: .47rem; letter-spacing: .15em; padding-bottom: 12px; }
  .hero__scroll { font-size: .5rem; }
}
@media (max-width: 350px) {
  .hero__actions { gap: 8px; }
  .hero__cta { padding-inline: 9px; gap: 8px; font-size: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__media img.is-ready { animation: none; }
  .hero__brand, .hero__story, .hero__actions, .hero__scroll span, .hero__atmosphere::after { animation: none; }
  .hero__atmosphere, .hero__media { transform: none; }
  .hero__cta, .hero__cta span { transition: none; }
}