/* ============ FOLD 02 · Hero ============ */
/* =========================================
   HERO EVENT DETAILS
   ========================================= */

.hero__facts {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hero__fact {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}

.hero__fact-label {
    width: 80px !important;
    min-width: 80px !important;
    flex: 0 0 80px !important;

    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;

      color: rgba(255, 255, 255, 0.62) !important;
}

.hero__fact-value {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;

    font-size: 20px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;

    color: #ffffff !important;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .hero__fact {
        align-items: flex-start !important;
        margin-bottom: 10px !important;
    }

    .hero__fact-label {
        width: 70px !important;
        min-width: 70px !important;
        flex-basis: 70px !important;
        font-size: 13px !important;
    }

    .hero__fact-value {
        font-size: 1.4rem !important;
    }
}
.hero {
  position: relative;
  width: 100%;
  height: 85.738rem;
  overflow: hidden;
}

/* Poster (frame 1) + looping video share the same box */
.hero__bg,
.hero__video {
  position: absolute; left: 50%; top: 50%;
  width: 152.4232rem; height: 85.835rem;
  transform: translate(-50%, -50%);
  object-fit: cover;
  pointer-events: none;
}
.hero__video { display: block; }

/* Blurred blue wash behind the copy (SVG carries its own blur bleed) */
.hero__shade {
  position: absolute; left: -29.968rem; top: 0;
  width: 148.6693rem; height: 59.4736rem;
  pointer-events: none;
}
.hero__shade img {
  /* SVG includes the 6.6rem layer-blur bleed around the shape */
  position: absolute; left: -6.6129rem; top: -6.6129rem;
  width: 161.895rem; height: 72.6995rem;
}

.hero__content {
  position: absolute; left: 7.063rem; top: 9.697rem;
  width: 92.9607rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2.8692rem;
}
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap:1.4585rem; width: 100%; }
.hero__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 0.8195rem; }

.hero__pill {
  position: relative; display: inline-flex; align-items: center;
  padding: 1.0244rem 2.2536rem 1.0244rem 1.4341rem;
  border: 0.1024rem solid var(--white);
  border-radius: 999.9rem;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(0.4098rem); backdrop-filter: blur(0.4098rem);
  box-shadow: 0 0.8195rem 2.0488rem 0 rgba(10, 60, 100, 0.16), inset 0 0.1024rem 0.2049rem 0 var(--white);
  font-weight: 900; font-size: 12px; line-height: normal; text-transform: uppercase;
  color: var(--brand-blue); white-space: nowrap;
}

.hero__title {
  font-weight: 700; font-size: 58px; line-height: 1.14; ;
  color: var(--white); white-space: nowrap;
}
@media(max-width:700px){
    .hero__title {
  font-weight: 700; font-size: 38px; line-height: 1.14; letter-spacing: -0.28rem;
  color: var(--white); white-space: nowrap;
}
}
.hero__title-accent { font-weight: 900; color: var(--accent-gold); letter-spacing: -0.15rem; }

.hero__text {
  display: flex; flex-direction: column; gap: 0.8195rem;
  font-size: 2rem; line-height: 1.4;  color: var(--white);
}
.hero__lead { font-weight: 700; width: 74.1611rem; }
.hero__sub  { font-weight: 400; white-space: nowrap; }

/* Event facts: frosted pills (Dates / Venue / Where) */
.hero__facts { display: flex; flex-wrap: wrap; gap: 1rem; max-width: 70rem; list-style: none; margin: 0; padding: 0;    flex-direction: column; }


.hero__fact-label::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 0.1rem; height: 1.4rem; margin-left: 1rem;
  background: rgba(255, 255, 255, 0.4);
}
.hero__fact-value { font-weight: 500; font-size: 15px; line-height: 1.2; color: var(--white);letter-spacing: 0.12rem; }

.hero__actions { display: flex; align-items: center; gap: 0.8627rem; }

/* Hero intro starts after the header has begun animating */
.hero { --reveal-start: 0.45s; }

/* Headline lines slide up from behind a mask (see [data-reveal="mask"] in base.css) */
.hero__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em; margin-bottom: -0.14em;   /* room for descenders (g, p) */
}
.hero__line-inner { display: block; }

/* hero CTAs: slimmer than the Figma export */
.hero .btn-icon { gap: 1.2rem; padding: 0.8rem 3rem 0.8rem 0.8rem; }
.hero .btn-icon__circle { width: 4.2rem; height: 4.2rem; }
.hero .btn-icon__circle img { width: 1.7rem; height: 1.7rem; }
.hero .btn-icon__label { font-size: 1.8rem; }
.hero .btn-ghost { padding: 0.8rem 2.4rem; font-size: 1.8rem; }