/* Main Events Page CSS */
    /* ===== VARIABLES & RESET ===== */
    :root {
      --bg: #030303;
      --text: #f5f0e5;
      --gold: #d6ac45;
      --gold2: #f0d98b;
      --gold3: #f5e6b8;
      --panel: rgba(10, 10, 12, .75);
      --card: rgba(17, 17, 20, .92);
      --r: 14px;
      --ff-head: 'Cinzel', serif;
      --ff-text: 'Inter', sans-serif;
      --fs-body: clamp(15px, 2.8vw, 16px);
      --fs-btn: clamp(15px, 2.8vw, 16px);
      --fs-h1: clamp(30px, 9vw, 64px);
      --fs-h2: clamp(22px, 5vw, 34px);
      --fs-h3: clamp(17px, 3.6vw, 20px)
    }

    * {
      margin: 0;
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth;
      -webkit-tap-highlight-color: transparent
    }

    body {
      font: 400 var(--fs-body) var(--ff-text);
      color: var(--text);
      background: #000;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased
    }

    a {
      color: inherit;
      text-decoration: none
    }

    img {
      max-width: 100%;
      height: auto;
      display: block
    }

    button {
      font-family: var(--ff-text)
    }

    @media(prefers-reduced-motion:reduce) {
      * {
        animation: none !important;
        transition: none !important
      }
    }

    /* ===== PRELOADER ===== */
    .preloader {
      display: none !important
    }

    .preloader.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none
    }

    .preloader__spinner {
      width: 48px;
      height: 48px;
      border: 3px solid rgba(203, 161, 53, .15);
      border-top-color: var(--gold);
      border-radius: 50%;
      animation: spin .8s linear infinite
    }

    .preloader__text {
      font: 700 clamp(18px, 5vw, 24px) var(--ff-head);
      color: var(--gold);
      letter-spacing: .1em;
      opacity: 0;
      animation: fadeUp .8s ease .3s forwards
    }

    @keyframes spin {
      to {
        transform: rotate(360deg)
      }
    }

    @keyframes fadeUp {
      to {
        opacity: 1;
        transform: translateY(0)
      }

      from {
        opacity: 0;
        transform: translateY(10px)
      }
    }

    /* ===== SCROLL PROGRESS ===== */
    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--gold), var(--gold2), var(--gold3));
      z-index: 9998;
      width: 0%;
      border-radius: 0 2px 2px 0;
      box-shadow: 0 0 8px rgba(203, 161, 53, .4)
    }

    /* ===== NOISE OVERLAY ===== */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 9997;
      pointer-events: none;
      opacity: .035;
      background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 200px 200px
    }

    /* ===== SCROLL REVEAL ===== */
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity .8s ease, transform .8s ease
    }

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

    .reveal-d1 {
      transition-delay: .1s
    }

    .reveal-d2 {
      transition-delay: .2s
    }

    .reveal-d3 {
      transition-delay: .3s
    }

    .reveal-d4 {
      transition-delay: .35s
    }

    /* ===== BUTTONS ===== */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      padding: .9rem 1.4rem;
      border-radius: var(--r);
      border: 1.5px solid rgba(255, 255, 255, .12);
      background: rgba(255, 255, 255, .06);
      color: #fff;
      font: 600 var(--fs-btn) var(--ff-text);
      cursor: pointer;
      transition: all .25s ease;
      line-height: 1;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px)
    }

    .btn:active {
      transform: scale(.96)
    }

    .btn--primary {
      border: none;
      color: #111;
      background: linear-gradient(135deg, var(--gold), var(--gold2), var(--gold3));
      box-shadow: 0 6px 24px rgba(203, 161, 53, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
      font-weight: 700;
      letter-spacing: .02em
    }

    .btn--primary:active,
    .btn--primary:hover {
      /* Ghost/Brand Icon Style on Interaction */
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.4);
      color: #fff;
      box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
      text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
      transform: scale(.98);
    }

    .btn--outline {
      border: 1.5px solid var(--gold);
      color: var(--gold);
      background: transparent
    }

    .btn--outline:active {
      background: rgba(203, 161, 53, .1)
    }

    /* ===== PARTICLES ===== */
    #particles {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: .5
    }

    /* ===== HERO ===== */
    .hero {
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      text-align: center;
      gap: .7rem;
      padding: 0 16px 28px;
      position: relative;
      overflow: hidden
    }

    .hero__bg {
      position: absolute;
      inset: 0;
      z-index: -2
    }

    .hero__bg video,
    .hero__bg img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      /* Fix face cropping */
    }

    .hero__video {
      z-index: -2;
      opacity: 0;
      transition: opacity 1.2s ease-in-out;
    }

    .hero__fallback {
      z-index: -2;
      opacity: 1;
      transition: opacity 1.2s ease-in-out;
      pointer-events: none;
    }

    .hero__overlay {
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .45) 55%, #000 88%), linear-gradient(90deg, rgba(0, 0, 0, .4) 0%, transparent 25%, transparent 75%, rgba(0, 0, 0, .4) 100%)
    }

    .hero__content {
      position: relative;
      z-index: 1;
      animation: heroIn 1.2s ease-out both
    }

    @keyframes heroIn {
      from {
        opacity: 0;
        transform: translateY(24px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .title {
      color: var(--gold);
      font: 900 var(--fs-h1) var(--ff-head);
      letter-spacing: .06em;
      position: relative;
      display: inline-block;
      isolation: isolate;
      max-width: 100%;
      text-shadow: 0 2px 26px rgba(203, 161, 53, .34), 0 0 1px rgba(255, 235, 183, .85);
      animation: titleBreath 5.6s ease-in-out infinite
    }

    .title::before,
    .title::after {
      content: attr(data-txt);
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0
    }

    .title::before {
      color: #7fd6ff;
      transform: translate(0);
      text-shadow: -1px 0 rgba(127, 214, 255, .55);
    }

    .title::after {
      color: #ff7fa9;
      transform: translate(0);
      text-shadow: 1px 0 rgba(255, 127, 169, .55)
    }

    .title.is-glitching::before {
      opacity: .75;
      animation: titleGlitchBlue .34s steps(2, end)
    }

    .title.is-glitching::after {
      opacity: .7;
      animation: titleGlitchPink .34s steps(2, end)
    }

    @keyframes titleBreath {
      0%,
      100% {
        text-shadow: 0 2px 24px rgba(203, 161, 53, .28), 0 0 1px rgba(255, 235, 183, .8)
      }

      50% {
        text-shadow: 0 4px 34px rgba(203, 161, 53, .45), 0 0 2px rgba(255, 235, 183, .95)
      }
    }

    @keyframes titleGlitchBlue {
      0% {
        transform: translate(0, 0);
        clip-path: inset(0 0 0 0)
      }

      25% {
        transform: translate(-3px, -1px);
        clip-path: inset(12% 0 56% 0)
      }

      50% {
        transform: translate(2px, 1px);
        clip-path: inset(68% 0 7% 0)
      }

      75% {
        transform: translate(-2px, 0);
        clip-path: inset(35% 0 32% 0)
      }

      100% {
        transform: translate(0, 0);
        clip-path: inset(0 0 0 0)
      }
    }

    @keyframes titleGlitchPink {
      0% {
        transform: translate(0, 0);
        clip-path: inset(0 0 0 0)
      }

      20% {
        transform: translate(3px, 0);
        clip-path: inset(63% 0 9% 0)
      }

      45% {
        transform: translate(-2px, -1px);
        clip-path: inset(10% 0 66% 0)
      }

      70% {
        transform: translate(2px, 1px);
        clip-path: inset(42% 0 31% 0)
      }

      100% {
        transform: translate(0, 0);
        clip-path: inset(0 0 0 0)
      }
    }

    .subtitle {
      font: 700 clamp(16px, 4vw, 26px) var(--ff-head);
      color: var(--gold2);
      letter-spacing: .16em;
      opacity: .9
    }

    .hero-cta {
      display: flex;
      width: 100%;
      justify-content: center;
      margin-top: .5rem
    }

    .hero-cta .btn--primary {
      width: min(92vw, 420px);
      padding: 1rem 1.5rem;
      font-size: clamp(16px, 3.2vw, 18px)
    }

    .metrics {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: .4rem .8rem;
      margin-top: .6rem;
      text-align: center
    }

    .metric {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .1rem
    }

    .metric__num {
      color: var(--gold2);
      font: 700 clamp(22px, 6vw, 32px) var(--ff-head);
      line-height: 1
    }

    .metric__label {
      font-size: .75rem;
      color: rgba(255, 255, 255, .6);
      letter-spacing: .03em
    }

    .scroll-hint {
      margin-top: .8rem;
      animation: bounce 2s ease-in-out infinite;
      opacity: .4;
      font-size: 1.3rem
    }

    @keyframes bounce {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(8px)
      }
    }

    /* ===== WAVE DIVIDERS ===== */
    .wave {
      width: 100%;
      overflow: hidden;
      line-height: 0;
      margin: -1px 0;
      position: relative;
      z-index: 1
    }

    .wave svg {
      display: block;
      width: 100%;
      height: clamp(28px, 5vw, 48px)
    }

    .wave--flip svg {
      transform: scaleY(-1)
    }

    /* ===== SECTIONS ===== */
    .section {
      width: 100%;
      max-width: 960px;
      margin: 0 auto;
      padding: 2.5rem 16px
    }

    .sectionTitle {
      font: 900 var(--fs-h2) var(--ff-head);
      color: var(--gold);
      text-align: center;
      margin-bottom: 1.2rem;
      letter-spacing: .03em
    }

    /* ===== BRANDS ===== */
    .brands {
      padding: 1.5rem 0;
      overflow: hidden;
      position: relative
    }

    .brands::before,
    .brands::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 40px;
      z-index: 2
    }

    .brands::before {
      left: 0;
      background: linear-gradient(90deg, #000, transparent)
    }

    .brands::after {
      right: 0;
      background: linear-gradient(-90deg, #000, transparent)
    }

    .brands__label {
      text-align: center;
      color: var(--gold);
      font-weight: 700;
      font-size: .88rem;
      text-transform: uppercase;
      letter-spacing: .22em;
      margin-bottom: 1.2rem;
      opacity: 0.95;
    }

    .brands__track {
      display: flex;
      width: max-content;
      will-change: transform;
      animation: marquee var(--brands-duration, 20s) linear infinite;
    }

    .brand-set {
      display: flex;
      gap: 3.5rem;
      padding-right: 3.5rem;
      align-items: center;
      flex: 0 0 auto;
    }

    .brand-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      color: #aaa69d;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .brand-logo {
      height: 52px;
      width: auto;
      max-width: 130px;
      padding: 6px 12px;
      filter: invert(1) grayscale(1) brightness(1.5) contrast(1.1);
      mix-blend-mode: screen;
      opacity: 0.72;
      display: block;
      object-fit: contain;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.15);
      transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease, filter 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    }
    .brand-logo:hover {
      opacity: 1;
      filter: none;
      transform: scale(1.08);
      background: rgba(255, 255, 255, 0.07);
      border-color: rgba(203, 161, 40, 0.3);
    }

    @keyframes marquee {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(calc(-1 * var(--brands-shift, 50%)));
      }
    }

    /* ===== PACK CARDS ===== */
    .packGrid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      max-width: 900px;
      margin: 0 auto;
    }

    @media (max-width: 768px) {
      .packGrid {
        grid-template-columns: 1fr;
        max-width: 380px;
      }
    }

    @keyframes premiumGlow {

      0%,
      100% {
        box-shadow: 0 0 15px rgba(203, 161, 53, 0.05);
        border-color: rgba(255, 255, 255, 0.07);
        transform: translateY(0);
      }

      50% {
        box-shadow: 0 10px 30px rgba(203, 161, 53, 0.2);
        border-color: rgba(203, 161, 53, 0.3);
        transform: translateY(-4px);
      }
    }

    .pack {
      background: var(--card);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 18px;
      padding: 1.8rem 1.4rem;
      position: relative;
      overflow: hidden;
      transition: all .35s ease;
      animation: premiumGlow 6s ease-in-out infinite;
      display: flex;
      flex-direction: column;
    }

    .pack:nth-child(even) {
      animation-delay: -3s;
    }

    .pack::before {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: 18px;
      padding: 1px;
      background: linear-gradient(135deg, rgba(203, 161, 53, .35), transparent 60%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      opacity: 0;
      transition: opacity .35s;
    }

    .pack:hover {
      animation-play-state: paused;
      box-shadow: 0 0 30px rgba(255, 255, 255, 0.4), 0 0 60px rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.7);
      transform: translateY(-4px) scale(1.02);
    }

    .pack:hover::before {
      opacity: 1;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), transparent 60%);
    }

    .pack__icon {
      width: 72px;
      height: 72px;
      margin: 0 auto .75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0;
      line-height: 0;
      flex: 0 0 auto;
    }

    .icon-svg,
    .icon-nav,
    .icon-mt,
    .fab-icon {
      display: block;
      object-fit: contain;
      filter: invert(1) grayscale(1) brightness(2) contrast(1.2);
      opacity: 0.92;
      mix-blend-mode: screen;
    }

    .icon-svg {
      width: 56px;
      height: 56px;
      max-width: 56px;
      max-height: 56px;
    }

    .icon-nav {
      width: 24px;
      height: 24px;
      filter: invert(0.5) grayscale(1);
      opacity: 0.6;
    }

    .icon-mt {
      width: 32px;
      height: 32px;
      margin: 0 auto 5px;
    }

    .fab-icon {
      width: 32px;
      height: 32px;
    }

    .pack__badge {
      position: absolute;
      top: 14px;
      right: 14px;
      background: linear-gradient(135deg, var(--gold), var(--gold2));
      color: #111;
      font-size: .7rem;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      letter-spacing: .04em
    }

    .pack h3 {
      font: 900 var(--fs-h3) var(--ff-head);
      color: var(--gold2);
      letter-spacing: .03em
    }

    .pack .from {
      opacity: .75;
      margin: .35rem 0 .5rem;
      font-size: .95rem
    }

    .pack ul {
      text-align: left;
      margin: .3rem 0 1rem;
      padding-left: 1.2rem;
      line-height: 1.55;
      font-size: .92rem;
      opacity: .8
    }

    .pack ul li::marker {
      color: var(--gold)
    }

    .pack .btn {
      width: 100%
    }

    .packGrid--formats {
      max-width: 860px;
      gap: 14px;
      align-items: stretch;
    }

    .packGrid--formats .pack {
      padding: 1.2rem 1rem;
      border-radius: 14px;
      min-height: 0;
    }

    .packGrid--formats .pack__badge {
      top: 10px;
      right: 10px;
    }

    .packGrid--formats .pack h3 {
      font-size: clamp(16px, 2.1vw, 19px);
    }

    .packGrid--formats .pack .from {
      margin: .2rem 0 .35rem;
      font-size: .88rem;
    }

    .packGrid--formats .pack ul {
      margin: .2rem 0 .75rem;
      font-size: .86rem;
      line-height: 1.45;
    }

    .packGrid--formats .pack .btn {
      margin-top: auto;
      padding: .72rem 1rem;
      font-size: 14px;
    }

    /* ===== HOW IT WORKS ===== */
    .process {
      display: flex;
      flex-direction: column;
      gap: 0;
      position: relative;
      padding-left: 32px
    }

    .process::before {
      content: '';
      position: absolute;
      left: 15px;
      top: 8px;
      bottom: 8px;
      width: 2px;
      background: linear-gradient(to bottom, var(--gold), rgba(203, 161, 53, .1))
    }

    .process__step {
      position: relative;
      padding: .8rem 0
    }

    .process__dot {
      position: absolute;
      left: -25px;
      top: 1rem;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--gold);
      box-shadow: 0 0 12px rgba(203, 161, 53, .4)
    }

    .process__num {
      font: 700 .7rem var(--ff-text);
      color: var(--gold);
      text-transform: uppercase;
      letter-spacing: .1em;
      margin-bottom: .2rem
    }

    .process__title {
      font: 700 1rem var(--ff-text);
      color: #fff;
      margin-bottom: .15rem
    }

    .process__desc {
      font-size: .88rem;
      color: #888;
      line-height: 1.5
    }

    /* ===== VIDEO ===== */
    .video-wrap {
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, .08);
      box-shadow: 0 10px 40px rgba(0, 0, 0, .5)
    }

    .video-wrap iframe,
    .video-wrap video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      object-fit: cover
    }

    #showreelVideo {
      object-position: center 22%;
      background: #000;
    }

    /* ===== ABOUT ===== */
    .about-text {
      text-align: center;
      max-width: 600px;
      margin: 0 auto;
      line-height: 1.75;
      font-size: 1rem;
      color: #aaa
    }

    .about-text strong {
      color: var(--gold2)
    }

    /* ===== SINGLE REVIEW ===== */
    .single-review {
      max-width: 760px;
      margin: 0 auto;
      border-radius: 16px;
      border: 1px solid rgba(203, 161, 53, .22);
      background: linear-gradient(180deg, rgba(18, 19, 26, .95), rgba(12, 12, 18, .92));
      padding: 1.2rem 1.1rem;
      box-shadow: 0 14px 45px rgba(0, 0, 0, .45);
      text-align: left;
    }

    .single-review__header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: .9rem;
    }

    .single-review__avatarLink {
      display: inline-flex;
      width: 54px;
      height: 54px;
      border-radius: 50%;
      overflow: hidden;
      border: 2px solid rgba(203, 161, 53, .55);
      box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
      flex-shrink: 0;
    }

    .single-review__avatar {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .single-review__profile {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .single-review__vkTag {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .16);
      color: #aaa69d;
      font-size: .72rem;
      letter-spacing: .03em;
      text-transform: uppercase;
      background: rgba(255, 255, 255, .03);
    }

    .single-review__authorLink {
      color: var(--gold2);
      font-weight: 700;
      letter-spacing: .01em;
      font-size: 1rem;
      text-decoration: none;
    }

    .single-review__authorLink:hover {
      text-decoration: underline;
    }

    .single-review__text {
      color: #f0f0f0;
      font-size: clamp(16px, 2.4vw, 20px);
      line-height: 1.45;
      margin-bottom: 0;
      font-weight: 500;
    }

    .swiper-reviews {
      max-width: 760px;
      margin: 0 auto;
      padding: 2px 0;
    }

    .swiper-reviews .swiper-slide {
      height: auto;
    }

    .reviews-nav {
      max-width: 760px;
      margin: 12px auto 0;
      display: flex;
      justify-content: center;
      gap: 10px;
    }

    .reviews-nav__btn {
      min-width: 124px;
      height: 40px;
      border-radius: 12px;
      border: 1px solid rgba(203, 161, 53, .55);
      background: rgba(12, 12, 18, .75);
      color: var(--gold2);
      font: 600 14px var(--ff-text);
      letter-spacing: .02em;
      cursor: pointer;
      transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
    }

    .reviews-nav__btn:hover {
      border-color: var(--gold2);
      color: #fff;
      background: rgba(203, 161, 53, .16);
    }

    .reviews-nav__btn:active {
      transform: translateY(1px) scale(.98);
    }

    /* ===== GALLERY ===== */
    .gallery {
      columns: 2;
      column-gap: 8px
    }

    .gallery img {
      width: 100%;
      border-radius: 10px;
      margin-bottom: 8px;
      border: 1px solid rgba(255, 255, 255, .05);
      cursor: pointer;
      transition: transform .25s, opacity .25s;
      break-inside: avoid
    }

    .gallery img:active {
      transform: scale(.97);
      opacity: .85
    }

    /* ===== LIGHTBOX ===== */
    .lightbox {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .94);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 200;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px)
    }

    .lightbox.open {
      display: flex
    }

    .lightbox__img {
      max-width: 94vw;
      max-height: 85dvh;
      border-radius: 10px;
      object-fit: contain;
      z-index: 2
    }

    .lightbox__close {
      position: absolute;
      top: 14px;
      right: 14px;
      z-index: 3;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .12);
      border: none;
      color: #fff;
      font-size: 1.2rem;
      cursor: pointer;
      display: grid;
      place-items: center
    }

    .lightbox__nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 3;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .08);
      border: none;
      color: #fff;
      font-size: 1.3rem;
      cursor: pointer;
      display: grid;
      place-items: center
    }

    .lightbox__nav--prev {
      left: 8px
    }

    .lightbox__nav--next {
      right: 8px
    }

    /* ===== FLOATING BUTTON ===== */
    .fab {
      position: fixed;
      bottom: 16px;
      right: 16px;
      z-index: 99;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--gold), var(--gold2));
      border: none;
      color: #111;
      font-size: 1.5rem;
      cursor: pointer;
      box-shadow: 0 4px 24px rgba(203, 161, 53, .4);
      transition: transform .25s, box-shadow .25s;
      display: grid;
      place-items: center
    }

    .fab:active {
      transform: scale(.92)
    }

    .fab::after {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      border: 2px solid var(--gold);
      opacity: 0;
      animation: fabPulse 2.5s ease-in-out infinite
    }

    @keyframes fabPulse {

      0%,
      100% {
        opacity: 0;
        transform: scale(1)
      }

      50% {
        opacity: .4;
        transform: scale(1.15)
      }
    }

    /* ===== MODAL ===== */
    .modal {
      position: fixed;
      inset: 0;
      z-index: 150;
      display: none;
      place-items: center;
      padding: 16px
    }

    .modal.open {
      display: grid
    }

    .modal__bg {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .75);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px)
    }

    .modal__panel {
      position: relative;
      width: min(94vw, 440px);
      border-radius: 20px;
      background: rgba(14, 15, 20, .97);
      border: 1px solid rgba(203, 161, 53, .15);
      box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
      padding: 1.5rem 1.2rem;
      max-height: 88dvh;
      overflow-y: auto
    }

    .modal__panel h2 {
      font: 900 var(--fs-h2) var(--ff-head);
      color: var(--gold);
      text-align: center;
      margin-bottom: 1rem
    }

    .modal__close {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .06);
      border: none;
      color: #fff;
      font-size: 1rem;
      cursor: pointer;
      display: grid;
      place-items: center;
      z-index: 5
    }

    .form-group {
      margin-bottom: .75rem
    }

    .form-group label {
      display: block;
      font-size: .82rem;
      color: #888;
      margin-bottom: .25rem;
      font-weight: 500
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
      width: 100%;
      padding: .75rem 1rem;
      border-radius: var(--r);
      background: rgba(255, 255, 255, .05);
      border: 1.5px solid rgba(255, 255, 255, .08);
      color: #fff;
      font: 400 var(--fs-body) var(--ff-text);
      transition: border-color .3s
    }

    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus {
      outline: none;
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(203, 161, 53, .12)
    }

    .form-group textarea {
      resize: vertical;
      min-height: 60px
    }

    .form-group select {
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center
    }

    #bookingSuccess {
      display: none;
      text-align: center;
      padding: 2rem .5rem
    }

    #bookingSuccess .success-icon {
      font-size: 3.5rem;
      margin-bottom: .8rem;
      animation: popIn .5s ease
    }

    @keyframes popIn {
      from {
        transform: scale(0);
        opacity: 0
      }

      to {
        transform: scale(1);
        opacity: 1
      }
    }

    /* ===== FOOTER ===== */
    footer {
      padding: 1.2rem 16px 24px;
      text-align: center
    }

    .copy {
      color: #444;
      font-size: .75rem
    }

    /* ===== RESPONSIVE ===== */
    @media(min-width:768px) {
      .packGrid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px
      }

      .packGrid--formats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .gallery {
        columns: 3
      }

      .hero {
        padding-bottom: 48px
      }

      .metrics {
        grid-template-columns: repeat(4, 1fr)
      }
    }

    @media(min-width:1024px) {
      .gallery {
        columns: 4
      }
    }

    @media (max-width: 900px) {
      .packGrid--formats {
        grid-template-columns: 1fr;
        max-width: 420px;
      }
    }


    /* ===== MAGIC SCHOOL BLOCK ===== */
    .magic-school {
      text-align: center;
    }
    .magic-school__card {
      max-width: 560px;
      margin: 0 auto;
      padding: 2.2rem 1.5rem;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 18px;
    }
    .magic-school__logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 1.2rem;
    }
    .magic-school__logo img {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid rgba(203, 161, 40, 0.3);
    }
    .magic-school__logo span {
      font: 600 14px var(--ff-head);
      color: var(--gold);
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }
    .magic-school__title {
      font: 700 clamp(20px, 4.5vw, 28px) var(--ff-head);
      color: var(--gold);
      margin-bottom: 0.8rem;
      line-height: 1.25;
    }
    .magic-school__subtitle {
      font-size: 0.95rem;
      color: #bbb;
      line-height: 1.55;
      margin: 0 auto 1.8rem;
      max-width: 460px;
    }
    .magic-school__cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 28px;
      border-radius: 30px;
      background: transparent;
      border: 1px solid rgba(203, 161, 40, 0.4);
      color: var(--gold);
      font: 600 14px var(--ff-head);
      letter-spacing: 0.05em;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.3s;
    }
    .magic-school__cta:hover {
      background: rgba(203, 161, 40, 0.08);
      border-color: rgba(203, 161, 40, 0.7);
      transform: translateY(-1px);
    }

    /* ===== KOSTYUK PORTAL OVERLAY ===== */
    #kostyukPortal {
      position: fixed;
      inset: 0;
      z-index: 99999;
      pointer-events: none;
      opacity: 0;
      background: radial-gradient(ellipse at center, #0b0a18 0%, #000 75%);
      transition: opacity 0.5s ease;
      overflow: hidden;
    }
    #kostyukPortal.active {
      opacity: 1;
      pointer-events: all;
      animation: kpZoom 1.8s cubic-bezier(0.5,0,0.3,1) forwards;
    }
    @keyframes kpZoom {
      0%   { transform: scale(1); filter: blur(0); }
      70%  { transform: scale(1.05); }
      100% { transform: scale(1.25); filter: blur(2px); }
    }
    .kp-ring-outer, .kp-ring-inner {
      position: absolute;
      top: 50%; left: 50%;
      border-radius: 50%;
      opacity: 0;
      transform: translate(-50%,-50%) scale(0.2);
    }
    .kp-ring-outer {
      width: 460px; height: 460px;
      margin: -230px 0 0 -230px;
      border: 1px solid rgba(203,161,40,0.55);
      box-shadow: 0 0 60px rgba(203,161,40,0.25), inset 0 0 60px rgba(203,161,40,0.18);
    }
    .kp-ring-inner {
      width: 280px; height: 280px;
      margin: -140px 0 0 -140px;
      border: 1px dashed rgba(231,199,118,0.75);
      box-shadow: 0 0 40px rgba(231,199,118,0.3);
    }
    #kostyukPortal.active .kp-ring-outer { animation: kpRingOut 1.8s cubic-bezier(0.22,1,0.36,1) forwards; }
    #kostyukPortal.active .kp-ring-inner { animation: kpRingIn 1.8s cubic-bezier(0.22,1,0.36,1) forwards 0.15s; }
    @keyframes kpRingOut {
      0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.2) rotate(0deg);  border-width: 3px; }
      40%  { opacity: 1; }
      100% { opacity: 0; transform: translate(-50%,-50%) scale(4) rotate(120deg);  border-width: 0.5px; }
    }
    @keyframes kpRingIn {
      0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.15) rotate(0deg); }
      35%  { opacity: 1; }
      100% { opacity: 0; transform: translate(-50%,-50%) scale(3) rotate(-180deg); }
    }
    .kp-core {
      position: absolute;
      top: 50%; left: 50%;
      width: 14px; height: 14px;
      margin: -7px 0 0 -7px;
      border-radius: 50%;
      background: radial-gradient(circle, #fff8d6, #cba128 40%, transparent 80%);
      box-shadow: 0 0 30px rgba(255,248,214,0.9), 0 0 80px rgba(203,161,40,0.7), 0 0 160px rgba(203,161,40,0.4);
      opacity: 0;
    }
    #kostyukPortal.active .kp-core { animation: kpCore 1.8s ease-out forwards; }
    @keyframes kpCore {
      0%   { opacity: 0; transform: scale(0); }
      15%  { opacity: 1; transform: scale(1); }
      55%  { opacity: 1; transform: scale(3.5); box-shadow: 0 0 80px #fff8d6, 0 0 160px rgba(203,161,40,1), 0 0 240px rgba(203,161,40,0.6); }
      100% { opacity: 0; transform: scale(18); }
    }
    .kp-rays {
      position: absolute;
      top: 50%; left: 50%;
      width: 4px; height: 4px;
      margin: -2px 0 0 -2px;
      opacity: 0;
    }
    .kp-ray {
      position: absolute;
      top: 50%; left: 50%;
      width: 2px; height: 0;
      transform-origin: top center;
      background: linear-gradient(180deg, rgba(231,199,118,0.9), transparent 80%);
      box-shadow: 0 0 14px rgba(203,161,40,0.7);
    }
    .kp-ray:nth-child(1){transform:translateX(-50%) rotate(0deg)}
    .kp-ray:nth-child(2){transform:translateX(-50%) rotate(45deg)}
    .kp-ray:nth-child(3){transform:translateX(-50%) rotate(90deg)}
    .kp-ray:nth-child(4){transform:translateX(-50%) rotate(135deg)}
    .kp-ray:nth-child(5){transform:translateX(-50%) rotate(180deg)}
    .kp-ray:nth-child(6){transform:translateX(-50%) rotate(225deg)}
    .kp-ray:nth-child(7){transform:translateX(-50%) rotate(270deg)}
    .kp-ray:nth-child(8){transform:translateX(-50%) rotate(315deg)}
    #kostyukPortal.active .kp-rays { animation: kpRaysFade 1.8s ease-out forwards 0.2s; }
    #kostyukPortal.active .kp-ray  { animation: kpRayGrow 1.6s ease-out forwards 0.2s; }
    @keyframes kpRaysFade { 0%{opacity:0} 30%{opacity:1} 100%{opacity:0.3} }
    @keyframes kpRayGrow  { 0%{height:0} 100%{height:60vh} }
    .kp-star {
      position: absolute;
      width: 2px; height: 2px;
      border-radius: 50%;
      background: #fff8d6;
      box-shadow: 0 0 4px #fff8d6;
      opacity: 0;
    }
    #kostyukPortal.active .kp-star { animation: kpStar 1.8s ease-out forwards; }
    @keyframes kpStar {
      0%   { opacity: 0; transform: scale(0); }
      50%  { opacity: 1; transform: scale(1); }
      100% { opacity: 0; transform: scale(0.3); }
    }
    .kp-name {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%) translateY(120px);
      font-family: var(--ff-head, "Cormorant Garamond", serif);
      font-size: clamp(22px, 4.5vw, 44px);
      color: var(--gold, #cba128);
      letter-spacing: 0.45em;
      white-space: nowrap;
      text-shadow: 0 0 24px rgba(203,161,40,0.6), 0 0 60px rgba(203,161,40,0.3);
      display: flex;
      gap: 0;
    }
    .kp-name span {
      display: inline-block;
      opacity: 0;
      transform: translateY(20px);
      filter: blur(6px);
    }
    #kostyukPortal.active .kp-name span { animation: kpLetter 0.6s ease-out forwards; }
    @keyframes kpLetter {
      0%   { opacity: 0; transform: translateY(20px); filter: blur(6px); }
      60%  { opacity: 1; transform: translateY(0);    filter: blur(0); }
      100% { opacity: 0; transform: translateY(-8px); filter: blur(2px); }
    }
    .kp-vignette {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.85) 100%);
      opacity: 0;
    }
    #kostyukPortal.active .kp-vignette { animation: kpVig 1.8s ease-out forwards; }
    @keyframes kpVig { 0%{opacity:0} 100%{opacity:1} }
    .magic-school__badge {
      display: inline-block;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 0.8rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    /* Modify pack cards button */
    .pack .btn {
      margin-top: 15px;
    }



    /* ===== PREMIUM DRUM CAROUSEL ===== */
    .concerts-section {
      padding: 4rem 0 3rem;
      overflow: hidden;
      position: relative;
    }

    .swiper-concerts {
      width: 100%;
      padding-top: 20px;
      padding-bottom: 40px;
    }

    .swiper-concerts .swiper-slide {
      background-position: center;
      background-size: cover;
      width: 280px;
      height: 400px;
      border-radius: 16px;
      box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8);
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: #080816;
      display: flex;
      /* Centering fallback */
      justify-content: center;
      align-items: center;
    }

    .swiper-concerts .swiper-slide img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      pointer-events: none;
    }

    .swiper-concerts .swiper-slide-shadow-left,
    .swiper-concerts .swiper-slide-shadow-right {
      background-image: none !important;
      /* Adjust swiper shadow */
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(2px);
    }

    .concert-info-container {
      max-width: 600px;
      margin: 0 auto;
      text-align: center;
      padding: 0 20px;
      min-height: 140px;
    }

    .concert-info-box {
      display: none;
      animation: fadeIn 0.4s ease;
    }

    .concert-info-box.active {
      display: block;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .cinfo-title {
      font: 800 clamp(24px, 6vw, 32px) var(--ff-head);
      color: var(--gold);
      margin-bottom: 8px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .cinfo-desc {
      font-size: 0.95rem;
      color: #ccc;
      margin-bottom: 20px;
      line-height: 1.5;
    }

    .swiper-button-next,
    .swiper-button-prev {
      color: var(--gold) !important;
      background: rgba(0, 0, 0, 0.5);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(4px);
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
      font-size: 18px !important;
    }


    /* ===== EVENTS AUTHOR SHOWS PARITY FIXES ===== */
    #formats {
      max-width: 1160px;
    }

    .packGrid--formats {
      width: min(100%, 1080px);
      max-width: 1080px;
      grid-template-columns: repeat(3, minmax(310px, 1fr));
      gap: 24px;
    }

    .packGrid--formats .pack {
      min-width: 0;
      min-height: 100%;
      padding: 1.45rem 1.25rem;
      border-radius: 18px;
    }

    .packGrid--formats .pack h3 {
      font-size: clamp(20px, 2.1vw, 24px);
      line-height: 1.15;
      overflow-wrap: normal;
      word-break: normal;
      hyphens: none;
      text-wrap: balance;
    }

    .packGrid--formats .pack ul {
      font-size: .94rem;
      line-height: 1.55;
    }

    .packGrid--formats .pack .btn {
      height: 54px;
      min-height: 54px;
      padding: 0 12px;
      border-radius: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 13px;
      letter-spacing: .02em;
      line-height: 1;
      flex-shrink: 0;
    }

    .events-shows-section {
      max-width: 1180px;
      padding: 4.5rem 16px 4rem;
    }

    .events-shows-grid {
      width: min(100%, 1120px);
      margin: 28px auto 0;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 28px;
      align-items: start;
    }

    .events-show-card {
      --show-card-accent: rgba(214, 172, 69, .55);
      --show-card-frame: rgba(231, 199, 118, .26);
      --show-card-badge: #e7c776;
      position: relative;
      display: flex;
      flex-direction: column;
      min-width: 0;
      overflow: hidden;
      border-radius: 24px;
      background: #07070c;
      isolation: isolate;
      transform: translateZ(0);
      transition: transform .55s cubic-bezier(.2, .8, .2, 1), filter .35s ease;
    }

    .events-show-card:hover {
      transform: translateY(-10px);
    }

    .events-show-card::before {
      content: '';
      position: absolute;
      inset: -2px;
      z-index: -1;
      border-radius: 26px;
      background: radial-gradient(circle at 50% 18%, var(--show-card-accent), transparent 58%);
      opacity: .45;
      filter: blur(18px);
      transition: opacity .35s ease;
    }

    .events-show-card:hover::before {
      opacity: .78;
    }

    .events-show-card__poster {
      display: block;
      width: 100%;
      aspect-ratio: 720 / 1080;
      height: auto;
      object-fit: contain;
      background: #050507;
      transition: filter .35s ease;
    }

    .events-show-card:hover .events-show-card__poster {
      filter: brightness(1.04);
    }

    .events-show-card__frame {
      position: absolute;
      inset: 0;
      z-index: 2;
      border: 1px solid var(--show-card-frame);
      border-radius: 24px;
      box-shadow: inset 0 0 70px rgba(0, 0, 0, .45);
      pointer-events: none;
    }

    .events-show-card__overlay {
      display: none;
    }

    .events-show-card__content {
      position: relative;
      z-index: 3;
      display: grid;
      gap: 12px;
      padding: 16px 18px 18px;
      background: #07070c;
      color: #fff;
      text-align: left;
    }

    .events-show-card__badge {
      display: inline-flex;
      justify-self: start;
      padding: 6px 14px;
      border-radius: 999px;
      border: 1.5px solid color-mix(in srgb, var(--show-card-badge) 70%, transparent);
      color: var(--show-card-badge);
      font: 800 11px var(--ff-text);
      letter-spacing: .14em;
      text-transform: uppercase;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .events-show-card__content strong {
      color: var(--show-card-badge);
      font: 900 clamp(22px, 2.8vw, 34px) var(--ff-head);
      line-height: 1;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .events-show-card__content small {
      color: rgba(245, 240, 229, .74);
      font: 600 13px var(--ff-text);
      line-height: 1.35;
    }

    .events-show-card__content em {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      width: 100%;
      padding: 0 18px;
      border-radius: 999px;
      background: linear-gradient(135deg, #fff0c2 0%, var(--gold2) 100%);
      color: #141006;
      font: 900 12px var(--ff-text);
      letter-spacing: .16em;
      text-transform: uppercase;
      font-style: normal;
      white-space: nowrap;
    }

    .events-show-card__content em::after {
      content: '→';
      margin-left: 10px;
      font-weight: 900;
    }

    .events-show-card--huligan {
      --show-card-accent: rgba(255, 110, 0, .58);
      --show-card-frame: rgba(255, 110, 0, .42);
      --show-card-badge: #ff6e00;
    }

    .events-show-card--huligan .events-show-card__poster {
      aspect-ratio: 2 / 3;
    }

    .events-show-card--huligan .events-show-card__content {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .82) 24%, rgba(0, 0, 0, .95));
    }

    .events-show-card--huligan .events-show-card__content em {
      background: linear-gradient(135deg, #ff9000 0%, #ff6a00 100%);
      color: #1a0800;
    }

    .events-show-card--matvey {
      --show-card-accent: rgba(174, 105, 255, .52);
      --show-card-frame: rgba(184, 126, 255, .38);
      --show-card-badge: #b979ff;
    }

    .events-show-card--matvey .events-show-card__content em {
      background: linear-gradient(135deg, #c996ff 0%, #9d5df5 100%);
      color: #15051d;
    }



    .events-shows-carousel.swiper-concerts {
      width: min(100%, 760px);
      margin: 24px auto 0;
      padding: 18px 58px 42px;
      overflow: hidden;
    }

    .events-shows-carousel.swiper-concerts .swiper-wrapper {
      align-items: center;
    }

    .events-shows-carousel.swiper-concerts .swiper-slide {
      width: clamp(260px, 22vw, 330px);
      height: auto;
      aspect-ratio: 2 / 3;
      border-radius: 18px;
      background: #050507;
      box-shadow: 0 18px 58px rgba(0, 0, 0, .72), 0 0 0 1px rgba(214, 172, 69, .18);
    }

    .events-shows-carousel.swiper-concerts .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: #050507;
    }

    .events-shows-carousel .swiper-button-next,
    .events-shows-carousel .swiper-button-prev {
      top: 50%;
      width: 42px;
      height: 42px;
      margin-top: -21px;
      border-color: rgba(214, 172, 69, .45);
      background: rgba(5, 5, 7, .72);
      box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
    }

    .events-shows-carousel .swiper-button-prev {
      left: 8px;
    }

    .events-shows-carousel .swiper-button-next {
      right: 8px;
    }

    .events-shows-carousel + .concert-info-container {
      min-height: 108px;
      margin-top: 0;
    }

    .events-shows-link {
      margin: 30px auto 0;
      display: flex;
      justify-content: center;
      padding: 0 16px;
    }

    .events-shows-link__button {
      width: auto;
      min-width: 230px;
      max-width: calc(100vw - 40px);
      height: 52px;
      min-height: 52px;
      padding: 0 28px;
      border-radius: 999px;
      white-space: nowrap;
      line-height: 1;
      letter-spacing: .03em;
    }

    body #formats .packGrid--formats .pack .btn.btn--primary {
      height: 54px !important;
      min-height: 54px !important;
      padding: 0 12px !important;
      border-radius: 14px !important;
      font-size: 13px !important;
      letter-spacing: .02em !important;
      line-height: 1 !important;
      text-transform: none !important;
    }

    body .events-shows-link .events-shows-link__button.btn--primary {
      height: 52px !important;
      min-height: 52px !important;
      padding: 0 28px !important;
      border-radius: 999px !important;
      font-size: 15px !important;
      letter-spacing: .03em !important;
      line-height: 1 !important;
      text-transform: none !important;
    }

    .events-shows-link__button:hover,
    .events-shows-link__button:active {
      transform: translateY(-1px);
      background: linear-gradient(135deg, var(--gold), var(--gold2), var(--gold3));
      color: #111;
      border: none;
      box-shadow: 0 8px 26px rgba(203, 161, 53, .35), inset 0 1px 0 rgba(255,255,255,.28);
      text-shadow: none;
    }

    @media (max-width: 980px) {
      #formats {
        max-width: 500px;
      }

      .packGrid--formats {
        width: min(100%, 440px);
        max-width: 440px;
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .packGrid--formats .pack {
        padding: 1.35rem 1.2rem;
      }

      .events-shows-section {
        max-width: 480px;
        padding-top: 4rem;
      }

      .events-shows-grid {
        width: min(100%, 420px);
        grid-template-columns: 1fr;
        gap: 18px;
      }


      .events-shows-carousel.swiper-concerts {
        width: min(100%, 390px);
        padding: 14px 42px 34px;
      }

      .events-shows-carousel.swiper-concerts .swiper-slide {
        width: clamp(230px, 68vw, 280px);
      }

      .events-shows-carousel + .concert-info-container {
        min-height: 120px;
      }

      .events-show-card {
        border-radius: 20px;
      }

      .events-show-card__frame {
        border-radius: 20px;
      }

      .events-show-card:hover {
        transform: none;
      }
    }

    /* Photo Gallery Swiper */
    .swiper-gallery {
      width: 100%;
      padding-bottom: 50px;
      overflow: hidden;
    }

    .swiper-gallery .swiper-slide {
      --w: clamp(220px, 60vw, 320px);
      width: var(--w);
      aspect-ratio: 62/88;
      opacity: 0.5;
      transform: scale(0.9);
      transition: .4s;
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      background: rgba(255, 255, 255, 0.05);
      /* placeholder background while loading */
    }

    .swiper-gallery .swiper-slide-active {
      opacity: 1;
      transform: scale(1);
      box-shadow: 0 15px 40px rgba(203, 161, 40, 0.3);
    }

    .swiper-gallery img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      /* Ensures photo is not cropped */
      border-radius: 12px;
    }

    /* Lightbox Modal */
    .lightbox {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.9);
      backdrop-filter: blur(10px);
      z-index: 10000;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transition: opacity 0.3s;
    }

    .lightbox.active {
      display: flex;
      opacity: 1;
    }

    .lightbox-content {
      max-width: 95vw;
      max-height: 85vh;
      width: auto;
      height: auto;
      object-fit: contain;
      border-radius: 8px;
      box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .lightbox-close {
      position: absolute;
      top: 20px;
      right: 30px;
      color: #fff;
      font-size: 40px;
      cursor: pointer;
      line-height: 1;
      text-shadow: 0 0 10px #000;
    }

    /* Project Switcher premium styling like the hub cards */
    .project-switcher__list a {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      min-height: 250px !important;
      text-align: left;
    }
    .project-switcher__list a::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -2;
      background-size: cover;
      background-position: center;
      opacity: 0.35;
      filter: saturate(0.75) contrast(1.03);
      transition: opacity 0.4s ease, transform 0.6s ease;
    }
    .project-switcher__list a::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(to bottom, rgba(5,5,5,0.08) 0%, rgba(5,5,5,0.16) 38%, rgba(7,7,7,0.94) 78%, #070707 100%);
    }
    .project-switcher__list a:hover::before {
      opacity: 0.65;
      transform: scale(1.03);
    }
    .project-switcher__list .switcher-item--shows::before {
      background-image: url('../images/direction-shows.png');
      background-position: 50% 44%;
    }
    .project-switcher__list .switcher-item--events::before {
      background-image: url('../images/direction-events.png');
      background-position: 50% 43%;
    }
    .project-switcher__list .switcher-item--school::before {
      background-image: url('../images/direction-school.png');
      background-position: 50% 42%;
    }
    
    /* Current navigation state style */
    .project-switcher__list a.is-current {
      border-color: var(--kp-gold) !important;
      box-shadow: 0 0 20px rgba(214, 172, 69, 0.25) !important;
    }
    .project-switcher__list a.is-current::before {
      opacity: 0.5;
    }
    .project-switcher__list .switcher-badge {
      align-self: flex-start;
      margin-bottom: auto;
      padding: 4px 8px;
      border: 1px solid rgba(214,172,69,0.3);
      border-radius: 20px;
      color: var(--kp-gold);
      font-size: 8px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }
    .project-switcher__list .switcher-index {
      color: rgba(255,255,255,0.4);
      font-size: 10px;
      letter-spacing: 0.1em;
      margin-bottom: 12px;
    }
    .project-switcher__list b {
      display: flex;
      justify-content: space-between;
      margin-top: 16px;
      padding-top: 12px;
      border-top: 1px solid rgba(255,255,255,0.09);
      color: var(--kp-muted);
      font-size: 11px;
      font-weight: 500;
    }
    .project-switcher__list a.is-current b {
      color: var(--kp-gold);
    }
    @media(max-width:900px) {
      .project-switcher__list a {
        min-height: 140px !important;
      }
      .project-switcher__list .switcher-index {
        margin-bottom: 4px;
      }
      .project-switcher__list b {
        margin-top: 8px;
        padding-top: 6px;
      }
    }

    /* End Custom CSS */