/* ================================
   HERO SECTION
================================ */
/* Mobile */

.navbar__mobile-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.menu-toggle{
    width:44px;
    height:44px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
}

.menu-toggle span{
    width:24px;
    height:2px;
    background:#fff;
    border-radius:5px;
}

/* Desktop */

@media(min-width:900px){

    .navbar__mobile-actions{
        display:none;
    }

}
.hero {
  position: relative;
  height: 100svh;
  min-height: 640px;
  width: 100%;
  overflow: hidden;
  background: var(--navy);
}
/* ---------- Media layer ---------- */
.hero__media {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.hero__media--video {
  display: none;
}

.hero__media--image {
  object-position: center 30%;
}

@media (min-width: 768px) {
  .hero__media--video {
    display: block;
  }
  .hero__media--image {
    display: none;
  }
}

/* ---------- Scrim layers ---------- */
.hero__scrim {
  position: absolute;
  inset: 0;
}

.hero__scrim--desktop {
  display: none;
  background: linear-gradient(
    90deg,
    rgba(6, 21, 45, 0.92) 0%,
    rgba(6, 21, 45, 0.72) 30%,
    rgba(6, 21, 45, 0.15) 58%,
    rgba(6, 21, 45, 0) 75%
  );
}

.hero__scrim--mobile {
  background: linear-gradient(
    0deg,
    rgba(6, 21, 45, 0.95) 0%,
    rgba(6, 21, 45, 0.55) 45%,
    rgba(6, 21, 45, 0.15) 70%,
    rgba(6, 21, 45, 0) 100%
  );
}

@media (min-width: 768px) {
  .hero__scrim--desktop { display: block; }
  .hero__scrim--mobile { display: none; }
}

/* ---------- Content layer ---------- */
.hero__content {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: var(--space-7);
   margin-top:80px;
}

@media (min-width: 768px) {
  .hero__content {
    justify-content: center;
    padding-bottom: 0;
  }
}

.hero__inner {
  max-width: 720px;
}

.hero__eyebrow {
  font-family: var(--font-heading);
  text-transform: uppercase;
  color: var(--white);
  font-size: 44px;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}

.hero__headline {
  font-family: var(--font-heading);
  text-transform: uppercase;
  color: var(--white);
  font-size: 44px;
  line-height: 0.98;
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .hero__headline { font-size: 72px; }
}

@media (min-width: 1200px) {
  .hero__headline { font-size: var(--fs-hero); }
}

.hero__subhead {
  margin-top: var(--space-4);
  max-width: 440px;
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font -heading);
  text-transform: uppercase;
  color: var(--white);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .hero__subhead {
    margin-top: var(--space-5);
    font-size: 30px;
  }
}

.hero__cta-row {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .hero__cta-row {
    margin-top: var(--space-5);
    flex-direction: row;
    align-items: center;
    gap: var(--space-5);
  }
}

.hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255, 255, 255, 0.6);
}

.hero__divider {
  display: none;
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.2);
}

@media (min-width: 768px) {
  .hero__divider { display: block; }
}

.hero__date {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* ---------- Scroll cue ---------- */
.hero__scroll-cue {
  position: absolute;
  bottom: var(--space-2);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: none;
  opacity: 0;
}

@media (min-width: 768px) {
  .hero__scroll-cue { display: block; }
}

.hero__scroll-cue span {
  display: block;
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.4);
  animation: scrollPulse 4s ease-in-out infinite;
  animation-delay: 1.4s;
}

@keyframes scrollPulse {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  60%  { opacity: 0.4; }
  100% { opacity: 1; }
}

/* ---------- Staged reveal ---------- */
/* JS adds .is-visible to .hero__content shortly after load.
   Each child animates in with its own delay — nothing appears at once. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-premium), transform 0.9s var(--ease-premium);
}

.is-visible .reveal { opacity: 1; transform: translateY(0); }

.is-visible .reveal--1 { transition-delay: 0.1s; }
.is-visible .reveal--2 { transition-delay: 0.28s; }
.is-visible .reveal--3 { transition-delay: 0.5s; }
.is-visible .reveal--4 { transition-delay: 0.68s; }