:root{
  --z-bg: #0b0b0b;
  --z-ink: #f6f6f6;
  --z-muted: rgba(246,246,246,.72);
  --z-faint-2: rgba(246,246,246,.08);
  --z-line: rgba(246,246,246,.16);
  --z-card: rgba(255,255,255,.06);

  --z-radius: 18px;
  --z-radius-lg: 26px;

  --z-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --z-tracking: 0.08em;

  --marquee-duration: 26s;

  /* Navbar height used for body padding */
  --nav-h: 70px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body.zuri-body{
  margin:0;
  background: var(--z-bg);
  color: var(--z-ink);
  font-family: var(--z-font);
  letter-spacing: 0.01em;
  padding-top: var(--nav-h); /* prevents content hiding under fixed nav */
}

/* -------------------------------------------------------
   NAV (always displayed)
------------------------------------------------------- */
.zuri-navbar{
  position: fixed;   /* always visible */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: rgba(11,11,11,.62);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--z-faint-2);
  min-height: var(--nav-h);
}

.zuri-logo{
  height: 200px;      /* enlarged */
  max-height: calc(var(--nav-h) - 18px); /* prevents nav growth */
  width: auto;
  display:block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

.zuri-toggler{ border-color: var(--z-line) !important; }
.zuri-toggler .navbar-toggler-icon{ filter: invert(1); opacity:.9; }

.zuri-nav .nav-link{
  color: var(--z-ink) !important;
  text-transform: uppercase;
  letter-spacing: var(--z-tracking);
  font-weight: 600;
  font-size: 0.86rem;
  padding: .7rem .85rem;
  opacity: .92;
}
.zuri-nav .nav-link:hover{ opacity:1; }

/* keep SOCIALS visible when open */
.zuri-nav .nav-link:focus,
.zuri-nav .nav-link:active,
.zuri-nav .nav-link.show{
  color: var(--z-ink) !important;
  opacity: 1 !important;
}

.zuri-dropdown{
  background: rgba(13,13,13,.98);
  border: 1px solid var(--z-line);
  border-radius: 14px;
  padding: .35rem;
}
.zuri-dropdown .dropdown-item{
  color: var(--z-ink);
  border-radius: 10px;
  padding: .65rem .75rem;
  text-transform: uppercase;
  letter-spacing: var(--z-tracking);
  font-weight: 600;
  font-size: .78rem;
}
.zuri-dropdown .dropdown-item:hover{ background: var(--z-card); }

/* -------------------------------------------------------
   HERO
------------------------------------------------------- */
.zuri-hero{
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  overflow: hidden;
  border-bottom: 1px solid var(--z-faint-2);
}

.hero-carousel,
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item{
  height: calc(100vh - var(--nav-h));
}

/* Scale-to-fit hero images */
.hero-slide{
  position: relative;
  height: 100%;
  width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #0f0f0f;
}

.hero-slide::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(60% 60% at 20% 20%, rgba(0,0,0,.15), rgba(0,0,0,.75)),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.75));
  pointer-events:none;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.55));
  pointer-events:none;
}

.hero-content{
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

.hero-kicker{
  margin:0 0 .75rem 0;
  color: var(--z-muted);
  text-transform: uppercase;
  letter-spacing: var(--z-tracking);
  font-weight: 700;
  font-size: .85rem;
}

.hero-title{
  margin:0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 900;
  line-height: .92;
  font-size: clamp(3rem, 8vw, 6.5rem);
}
.hero-title-sm{ font-size: clamp(2.1rem, 5.6vw, 4.6rem); }

.hero-subtitle{
  margin: 1rem 0 1.4rem;
  max-width: 52ch;
  color: rgba(246,246,246,.86);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.6;
}

.zuri-btn{
  border-radius: 999px;
  padding: .85rem 1.1rem;
  font-weight: 800;
  letter-spacing: var(--z-tracking);
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.12);
}
.zuri-btn-outline{
  border-radius: 999px;
  padding: .85rem 1.1rem;
  font-weight: 800;
  letter-spacing: var(--z-tracking);
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.45) !important;
}

/* Indicators styled like your bars */
.hero-dots{
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  display:flex;
  gap: 10px;
  z-index: 3;
  opacity: .9;
  margin: 0;
}
.hero-dots [data-bs-target]{
  width: 46px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.35) !important;
  border: 0 !important;
  opacity: 1 !important;
}
.hero-dots .active{
  background: rgba(255,255,255,.85) !important;
}
.carousel-indicators{ margin-bottom: 0 !important; }

/* -------------------------------------------------------
   SECTIONS
------------------------------------------------------- */
.zuri-section{
  padding: clamp(2.2rem, 4.5vw, 4rem) 0;
  border-bottom: 1px solid var(--z-faint-2);
}
.zuri-section-tight{
  padding: clamp(1.6rem, 3.5vw, 2.6rem) 0;
}
.zuri-section-muted{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
}
.section-kicker{
  margin:0 0 .5rem 0;
  color: var(--z-muted);
  text-transform: uppercase;
  letter-spacing: var(--z-tracking);
  font-weight: 800;
  font-size: .8rem;
}
.section-title{
  margin:0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 900;
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
}
.zuri-paragraph{
  max-width: 70ch;
  color: rgba(246,246,246,.84);
  line-height: 1.75;
  font-size: 1.02rem;
}

/* -------------------------------------------------------
   MARQUEE (ACTS)
------------------------------------------------------- */
.marquee-wrap{
  overflow: hidden;
  border-top: 1px solid var(--z-faint-2);
  border-bottom: 1px solid var(--z-faint-2);
  background: rgba(255,255,255,.02);
}
.marquee-track{
  display:flex;
  width: max-content;
  animation: marquee var(--marquee-duration) linear infinite;
}
.marquee-wrap:hover .marquee-track{ animation-play-state: paused; }

.marquee-row{
  display:flex;
  align-items:center;
  gap: 22px;
  padding: 18px 22px;
}
.marquee-item{
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: clamp(1rem, 2vw, 1.4rem);
  opacity: .95;
  white-space: nowrap;
}
.marquee-dot{ opacity: .35; font-weight: 900; }

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

/* -------------------------------------------------------
   EVENTS (MANUAL SCROLL)
------------------------------------------------------- */
.events-arrow{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  color: rgba(246,246,246,.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.events-arrow:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.08);
}
.events-wrap{ overflow: hidden; position: relative; padding: 6px 0; }
.events-row{
  display:flex;
  gap: 14px;
  padding: 10px 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.events-row::-webkit-scrollbar{ display:none; }

.event-card{
  flex: 0 0 auto;
  width: clamp(220px, 22vw, 310px);
  border: 1px solid var(--z-line);
  border-radius: var(--z-radius);
  overflow: hidden;
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  transition: transform .2s ease, border-color .2s ease;
}
.event-card:hover{ transform: translateY(-3px); border-color: rgba(255,255,255,.28); }

.event-art{
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: #111;
  position: relative;
}
.event-art::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.55));
}
.event-body{ padding: 14px 14px 16px; }
.event-meta{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.event-date{
  color: var(--z-muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--z-tracking);
  font-size: .76rem;
}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .28rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.event-title{
  margin: 0 0 10px 0;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.05rem;
  line-height: 1.2;
}
.event-link{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  color: rgba(246,246,246,.92);
  text-decoration: none;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--z-tracking);
  font-size: .78rem;
  border-bottom: 1px solid rgba(255,255,255,.25);
  padding-bottom: 3px;
}
.event-link:hover{ border-bottom-color: rgba(255,255,255,.7); }
.event-card.is-featured{
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.06);
}

/* -------------------------------------------------------
   TAGLINE
------------------------------------------------------- */
.zuri-tagline{
  padding: clamp(2.2rem, 4vw, 3.2rem) 0;
  background: radial-gradient(70% 70% at 20% 10%, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-bottom: 1px solid var(--z-faint-2);
}
.tagline-text{
  margin:0;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.25;
  font-size: clamp(1.1rem, 2.2vw, 1.75rem);
  color: rgba(246,246,246,.92);
}

/* -------------------------------------------------------
   GALLERY (video reduced + scale-to-fit) + lightbox triggers
------------------------------------------------------- */
.lightbox-trigger{
  cursor: pointer;
  outline: none;
}
.lightbox-trigger:focus{
  box-shadow: 0 0 0 3px rgba(255,255,255,.14);
  border-radius: var(--z-radius);
}

.zuri-video{
  border-radius: var(--z-radius-lg);
  overflow:hidden;
  border: 1px solid var(--z-line);
  position: relative;
  background: #0f0f0f;

  /* tighter height like before */
  height: clamp(220px, 32vw, 420px);
}
.zuri-video video{
  display:block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* scale-to-fit */
  background: #0f0f0f;
}

.video-overlay{
  position:absolute;
  inset:auto 14px 14px auto;
  z-index:2;
  display:flex;
  gap: 10px;
  align-items:center;
}
.video-label{
  display:inline-flex;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.35);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .7rem;
}
.video-expand{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(246,246,246,.92);
}

.zuri-photo{
  border-radius: var(--z-radius);
  border: 1px solid var(--z-line);
  background-color: #111;
  background-size: cover;
  background-position: center;
  height: 260px;
  box-shadow: 0 18px 45px rgba(0,0,0,.32);
  transition: transform .2s ease, border-color .2s ease;
}
.zuri-photo:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.28);
}

/* -------------------------------------------------------
   LIGHTBOX MODAL (luxe)
------------------------------------------------------- */
.zuri-lightbox-content{
  background: rgba(10,10,10,.92);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  overflow: hidden;
}
.zuri-lightbox-header{
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}
.zuri-lightbox-body{
  padding: 0;
  background: rgba(0,0,0,.35);
}
#zuriLightboxStage{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 60vh;
  padding: 16px;
}
.zuri-lightbox-media{
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: #000;
}

/* -------------------------------------------------------
   FOOTER
------------------------------------------------------- */
.zuri-footer{ background: #080808; border-top: 1px solid var(--z-faint-2); }
.footer-title{
  margin:0 0 .75rem 0;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: .86rem;
}
.footer-title-luxe{ position: relative; display:inline-block; padding-bottom: 8px; }
.footer-title-luxe::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width: 54px; height: 1px;
  background: rgba(255,255,255,.35);
}
.footer-text{ margin:0 0 1rem 0; color: rgba(246,246,246,.78); line-height: 1.6; }
.footer-links{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction: column; gap: .55rem;
}
.footer-links a{
  color: rgba(246,246,246,.82);
  text-decoration:none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  font-size: .76rem;
  display:inline-flex;
  gap: .55rem;
  align-items:center;
}
.footer-links a:hover{ color: rgba(255,255,255,.98); }
.footer-links-inline i{ font-size: 1rem; opacity:.9; }
.footer-divider{ height:1px; background: rgba(255,255,255,.12); margin: 14px 0; }
.footer-embed{
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 12px;
  background: rgba(255,255,255,.03);
}
.embed-placeholder{
  border: 1px dashed rgba(255,255,255,.22);
  border-radius: 14px;
  padding: 16px;
  color: rgba(246,246,246,.7);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  font-size: .72rem;
}
.footer-bottom{ border-top: 1px solid rgba(255,255,255,.10); }
.footer-small{ color: rgba(246,246,246,.62); font-size: .86rem; }
.footer-credit{
  color: rgba(246,246,246,.82);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.22);
  padding-bottom: 2px;
}
.footer-credit:hover{
  color: rgba(255,255,255,.98);
  border-bottom-color: rgba(255,255,255,.6);
}

/* responsive */
@media (max-width: 991px){
  :root{ --nav-h: 74px; }
  .zuri-logo{ height: 46px; }
  .zuri-nav .nav-link{ padding: .85rem .25rem; }
  .zuri-photo{ height: 240px; }
  .zuri-video{ height: clamp(200px, 52vw, 340px); }
}
