:root{
  --bg:#272726;
  --panel:#1a1a1a;
  --muted:#bfbfbf;
  --text:#f2f2f2;
  --accent:#F4C97C;
  --accent-dark:#756347;
  --radius:12px;
  --maxw:1200px;
  --ff: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:var(--ff);-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.container{max-width:var(--maxw);margin:0 auto;padding:28px}
.header, .navbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 28px}
.logo img{height:56px;border-radius:8px;}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--muted);text-decoration:none;font-weight:700}
.cta{background:var(--accent);color:#111;padding:10px 14px;border-radius:8px;font-weight:800}

/* HERO */
.hero{position:relative;height:75vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);filter:brightness(0.55);transition:transform 18s ease}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,10,10,0.35), rgba(10,10,10,0.6));pointer-events:none}
.hero-content{position:relative;z-index:2;text-align:center;padding:24px;max-width:900px}
.glow-gold{color:var(--accent);text-shadow:0 0 14px rgba(244,201,124,0.9),0 0 30px rgba(244,201,124,0.35);animation:glow 3s infinite;}
@keyframes glow{0%{text-shadow:0 0 6px rgba(244,201,124,0.8)}50%{text-shadow:0 0 22px rgba(244,201,124,1)}100%{text-shadow:0 0 6px rgba(244,201,124,0.8)}}
.hero-btn{display:inline-block;padding:14px 28px;margin-top:18px;border:2px solid var(--accent);color:var(--accent);text-decoration:none;border-radius:10px;transition:all .28s ease}
.hero-btn:hover{background:var(--accent);color:#111;transform:translateY(-4px)}

/* Marquee */
.marquee-container{width:100%;overflow:hidden;background:#0f0f0f;padding:10px 0;border-top:1px solid rgba(244,201,124,0.12);border-bottom:1px solid rgba(244,201,124,0.12)}
.marquee-inner{display:inline-block;white-space:nowrap;animation:marquee 20s linear infinite;color:var(--accent);font-weight:700;letter-spacing:2px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Highlights */
.highlights{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;padding:60px 28px}
.highlight{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));padding:28px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);text-align:center;transition:all .28s ease}
.highlight:hover{transform:translateY(-8px);border-color:var(--accent)}

/* Instagram feed */
.instagram-section{padding:60px 28px;background:#0d0d0d;text-align:center}
.instagram-feed iframe{width:100%;height:520px;border:0;overflow:hidden}

/* Acts grid */
.grid{display:grid;gap:18px}
.cols-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--panel);padding:14px;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}

/* Gallery modal */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gallery-item{height:160px;border-radius:8px;overflow:hidden;cursor:pointer}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.75);z-index:60}
.modal.open{display:flex}
.modal .frame{max-width:980px;width:94%;background:var(--panel);padding:12px;border-radius:12px}
.modal img{width:100%;height:auto;border-radius:8px}

/* Booking form */
.contact-hero{padding:80px 28px;text-align:center;background:#111}
.booking-form-section{padding:60px 28px;background:#0d0d0d}
.booking-form{max-width:720px;margin:0 auto;background:transparent;padding:18px;display:flex;flex-direction:column;gap:10px}
.booking-form label{color:var(--accent);font-weight:700;margin-top:6px}
.input, textarea, select{padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:#121212;color:var(--text)}
.submit-btn{margin-top:12px;padding:12px;background:var(--accent);color:#111;border:none;border-radius:8px;font-weight:800}

/* Footer */
.footer{padding:28px;text-align:center;color:var(--muted);border-top:1px solid rgba(255,255,255,0.03)}

/* animations */
.reveal{opacity:0;transform:translateY(18px);transition:all 600ms ease}
.reveal.visible{opacity:1;transform:none}

/* responsive */
@media(max-width:980px){.cols-3{grid-template-columns:repeat(2,1fr)}.hero{height:55vh}}
@media(max-width:640px){.nav{display:none}.gallery-grid{grid-template-columns:repeat(2,1fr)}.hero{height:46vh}.hero-image{transform:scale(1.0)}}

.act-card img{width:100%;height:240px;object-fit:cover;display:block;}

/* FIX ACT CARD IMAGE SIZING */
.card.act .thumb img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}


/* Basic nav + acts grid helpers injected */
.navbar{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#111;position:sticky;top:0;z-index:50;}
.nav-toggle{display:none;border:none;background:transparent;cursor:pointer;padding:6px;}
.nav-toggle span{display:block;width:20px;height:2px;background:#fff;margin:3px 0;}
.nav{display:flex;gap:16px;align-items:center;}
.nav a{color:#fff;text-decoration:none;font-weight:500;}
.nav .cta{background:#f4c97c;color:#111;padding:6px 12px;border-radius:8px;}
.acts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:20px;}
.card.act{background:#1a1a1a;border-radius:12px;overflow:hidden;padding:12px;}
.card.act .thumb img{width:100%;height:220px;object-fit:cover;display:block;border-radius:8px;}
.footer{padding:20px 24px;border-top:1px solid rgba(255,255,255,0.1);font-size:0.9rem;color:#ccc;}
@media(max-width:768px){
  .nav-toggle{display:block;}
  .nav{display:none;flex-direction:column;align-items:flex-start;background:#111;padding:12px 24px;margin-top:8px;border-radius:8px;}
  .nav.open{display:flex;}
}


/* === Cinematic acts layout === */

.page-hero {
  padding: 3rem 1.5rem 1.5rem;
  background: #111;
}
.page-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.page-hero h1 {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
}
.page-hero p {
  max-width: 540px;
  color: #b7b7b7;
}

.acts-list {
  max-width: 1200px;
  margin: 0 auto 3rem;
  padding: 0 1.5rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.act-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #000;
  min-height: 260px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}

.act-card-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  transition: transform 0.5s ease-out;
}

.act-card-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 15%, rgba(255, 207, 72, 0.25), transparent 55%),
              linear-gradient(120deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

.act-card-content {
  position: relative;
  z-index: 1;
  padding: 2.25rem 2.5rem;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.act-card h2 {
  font-size: 1.7rem;
  margin: 0 0 0.25rem;
}

.act-card p {
  margin: 0 0 1rem;
  color: #dadada;
}

.act-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary {
  background: #f4bf4a;
  color: #111;
}

.btn-secondary {
  background: #2b2b2b;
  color: #f5f5f5;
}

.btn-primary:hover,
.btn-secondary:hover {
  filter: brightness(1.08);
}

.act-card:hover .act-card-media {
  transform: scale(1.06);
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .acts-list {
    padding-inline: 1.25rem;
  }
  .act-card-content {
    padding: 1.75rem 1.5rem 1.6rem;
    max-width: none;
  }
  .act-card h2 {
    font-size: 1.4rem;
  }
}

/* Dynamic background images for each act category */
.act-bonfire .act-card-media {
  background-image: url("assets/acts/bonfire/56e2606d-7f0e-49c0-8b76-b67de750a0e7.JPG");
}
.act-childrencos-entertainment .act-card-media {
  background-image: url("assets/acts/childrencos-entertainment/IMG_4783.jpg");
}
.act-christmas .act-card-media {
  background-image: url("assets/acts/christmas/78c3aaf4-7808-412c-a736-9bf5d53e7cfd.jpg");
}
.act-festival .act-card-media {
  background-image: url("assets/acts/festival/IMG_2638.JPG");
}
.act-halloween .act-card-media {
  background-image: url("assets/acts/halloween/IMG_3581.PNG");
}
.act-led-light-night .act-card-media {
  background-image: url("assets/acts/led-light-night/56e2606d-7f0e-49c0-8b76-b67de750a0e7.JPG");
}
.act-party .act-card-media {
  background-image: url("assets/acts/party/IMG_4769.jpg");
}
.act-stilt-walkers .act-card-media {
  background-image: url("assets/acts/stilt-walkers/IMG_4446.jpg");
}


/* === 3-level acts system === */
.acts-grid, .subcats-grid {
  max-width: 1200px;
  margin: 0 auto 3rem;
  padding: 0 1.5rem 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

.page-hero { padding: 2.5rem 1.5rem 1.25rem; background: #111; }
.page-hero-inner { max-width: 1200px; margin: 0 auto; }
.page-hero h1 { margin: 0 0 0.5rem; }
.page-hero p { margin: 0; color: #b7b7b7; max-width: 720px; }

.card {
  display: block;
  border-radius: 18px;
  overflow: hidden;
  background: #0b0b0b;
  border: 1px solid rgba(255,255,255,0.06);
  text-decoration: none;
  color: #f5f5f5;
  box-shadow: 0 16px 36px rgba(0,0,0,0.55);
}

.card-thumb {
  width: 100%;
  height: 190px;
  background: #111;
  background-size: cover;
  background-position: center;
}

.card-meta { padding: 0.9rem 1rem 1.1rem; }
.card-title { font-weight: 800; font-size: 1.05rem; margin: 0 0 0.6rem; }

.tag {
  display: inline-block;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: rgba(244,191,74,0.15);
  border: 1px solid rgba(244,191,74,0.35);
  color: #f4bf4a;
  font-size: 0.8rem;
  font-weight: 700;
}

.gallery-grid {
  max-width: 1200px;
  margin: 0 auto 3rem;
  padding: 0 1.5rem 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.gallery-grid img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

.btn-primary {
  display:inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  background: #f4bf4a;
  color: #111;
  text-decoration:none;
  font-weight: 800;
}

@media (max-width: 768px) {
  .card-thumb { height: 165px; }
  .gallery-grid img { height: 200px; }
}