:root {
  --red: #ef233c;
  --red-dark: #b9132c;
  --orange: #ff7b00;
  --yellow: #ffd60a;
  --green: #2dc653;
  --blue: #20a4f3;
  --blue-deep: #073b5c;
  --ink: #101014;
  --muted: #5d626d;
  --paper: #f5f5f2;
  --white: #fff;
  --line: rgba(16,16,20,.14);
  --radius: 24px;
  --shadow: 0 20px 60px rgba(16,16,20,.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.top-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 4px;
  background: transparent; z-index: 1000;
}
.top-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--red), var(--orange), var(--yellow), var(--green), var(--blue));
}

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 78px; display: flex; align-items: center; gap: 28px;
  padding: 0 5vw; color: var(--white);
  background: rgba(10,10,14,.68); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; letter-spacing: -.06em; white-space: nowrap; }
.brand > span:last-child span, .footer-brand span { color: var(--yellow); }
.brand-mark {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; background: linear-gradient(135deg,var(--red),var(--orange),var(--green),var(--blue));
  color: white; font-family: "Bebas Neue", sans-serif; font-size: 24px; letter-spacing: 0;
}
.main-nav { display: flex; align-items: center; justify-content: center; gap: 22px; flex: 1; }
.main-nav a { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .86; transition: .2s ease; }
.main-nav a:hover { opacity: 1; color: var(--yellow); }
.header-phone { display: flex; flex-direction: column; align-items: flex-end; }
.header-phone a { font-weight: 800; font-size: 14px; }
.header-phone span { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; opacity: .6; margin-top: 3px; }
.menu-toggle { display: none; background: none; border: 0; color: white; font-size: 28px; }

.hero {
  min-height: 100vh; padding: 150px 7vw 80px;
  position: relative; display: grid; grid-template-columns: 1fr .92fr;
  align-items: center; gap: 6vw; overflow: hidden;
  color: white; background:
    radial-gradient(circle at 82% 28%, rgba(255,123,0,.38), transparent 28%),
    radial-gradient(circle at 12% 78%, rgba(239,35,60,.28), transparent 30%),
    linear-gradient(140deg,#240009 0%,#820b20 42%,#e51b37 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; opacity: .16; pointer-events: none;
  background-image: linear-gradient(135deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size: 38px 38px; mask-image: linear-gradient(to bottom,black,transparent);
}
.hero-glow { position:absolute; width:420px; height:420px; border-radius:50%; filter:blur(60px); opacity:.2; }
.hero-glow-one { background:var(--yellow); top:-180px; right:8%; }
.hero-glow-two { background:var(--blue); bottom:-240px; left:10%; }
.hero-content, .hero-image-wrap { position: relative; z-index: 2; }
.eyebrow {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .18em;
  margin-bottom: 18px; opacity: .72;
}
.hero h1, .gallery-hero h1 {
  font-family: "Bebas Neue", Impact, sans-serif; font-size: clamp(76px, 11vw, 160px);
  line-height: .78; letter-spacing: -.02em;
}
.hero h1 span, .gallery-hero h1 span { color: var(--yellow); }
.hero-copy { max-width: 620px; margin-top: 28px; font-size: clamp(16px,1.5vw,20px); line-height: 1.7; color: rgba(255,255,255,.84); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 50px; padding: 0 23px; border: 1px solid transparent;
  border-radius: 999px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-3px); }
.btn-light { background: white; color: var(--ink); }
.btn-light:hover { background: var(--yellow); }
.btn-ghost { border-color: rgba(255,255,255,.35); color: white; }
.btn-ghost:hover { border-color: white; background: rgba(255,255,255,.08); }
.btn-dark { background: var(--ink); color: white; width: 100%; border: 0; }
.btn-dark:hover { background: var(--red); }
.hero-note { margin-top: 16px; font-size: 11px; opacity: .55; }
.hero-image-frame {
  position: relative; overflow: hidden; border-radius: 32px; box-shadow: 0 30px 100px rgba(0,0,0,.34);
  transform: rotate(2deg); border: 7px solid rgba(255,255,255,.9);
}
.hero-image-frame img { width: 100%; aspect-ratio: 1.35 / 1; object-fit: cover; }
.image-badge {
  position: absolute; left: 18px; bottom: 18px; padding: 10px 14px;
  background: var(--ink); color: white; font-size: 10px; font-weight: 800; letter-spacing: .1em;
}
.scroll-cue { position: absolute; bottom: 25px; left: 7vw; z-index: 3; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; opacity: .55; }
.scroll-cue span { display:inline-block; width: 28px; height: 1px; background:white; vertical-align: middle; margin-right: 10px; }

.ticker {
  min-height: 62px; display:flex; align-items:center; justify-content:center; gap: 24px;
  overflow:hidden; background: var(--yellow); color:var(--ink); font-size:12px; font-weight:900;
  text-transform:uppercase; letter-spacing:.14em; white-space:nowrap;
}

.section-pad { padding: 120px 7vw; }
.intro { background: #f5f5f2; }
.section-heading h2, .faq-intro h2, .contact-heading h2 {
  font-family:"Bebas Neue",Impact,sans-serif; font-size: clamp(58px,7vw,104px); line-height:.86;
  letter-spacing:-.015em;
}
.section-heading h2 em, .faq-intro h2 em, .contact-heading h2 em { font-style:normal; color:var(--red); }
.intro-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 9vw; margin-top: 70px; align-items:start; }
.intro-copy { max-width:650px; }
.intro-copy p { color:var(--muted); line-height:1.8; margin-bottom:24px; }
.intro-copy .lead { font-size:22px; line-height:1.55; color:var(--ink); font-weight:600; }
.benefit-cards { display:grid; gap:12px; }
.benefit-card { display:grid; grid-template-columns: 55px 1fr; column-gap:15px; padding:25px 0; border-top:1px solid var(--line); }
.benefit-card span { font-size:11px; font-weight:800; opacity:.4; grid-row:span 2; }
.benefit-card strong { font-size:20px; }
.benefit-card p { margin-top:6px; color:var(--muted); line-height:1.6; font-size:14px; }

/* =========================================================
   MASSIVE GLASS BREAK TRANSITION
   ========================================================= */

.smash-section {
  position: relative;
  min-height: 100vh;
  overflow: hidden;

  background:
    linear-gradient(
      155deg,
      #17171b 0%,
      #252831 42%,
      #0878a8 75%,
      #073b5c 100%
    );
}


/* =========================================================
   ACTUAL CONTENT UNDERNEATH THE GLASS
   ========================================================= */

.smash-content {
  position: relative;

  min-height: 100vh;

  padding: 140px 7vw;

  display: grid;
  grid-template-columns: 1fr 1fr;

  align-items: center;

  gap: 8vw;

  color: white;

  opacity: 0;

  transform:
    scale(.94)
    translateY(50px);

  transition:
    opacity 1s ease,
    transform 1.2s cubic-bezier(.2,.8,.2,1);
}


/*
   The content becomes visible after
   the glass has been smashed.
*/

.smash-section.content-revealed
.smash-content {

  opacity: 1;

  transform:
    scale(1)
    translateY(0);
}


/* =========================================================
   TEXT UNDERNEATH
   ========================================================= */

.smash-copy {
  max-width: 620px;
}

.smash-copy h2 {

  font-family:
    "Bebas Neue",
    Impact,
    sans-serif;

  font-size:
    clamp(
      75px,
      10vw,
      145px
    );

  line-height: .78;

  letter-spacing: -.02em;
}

.smash-copy h2 span {
  color: var(--yellow);
}

.smash-copy p:not(.eyebrow) {

  max-width: 520px;

  margin-top: 25px;

  color:
    rgba(255,255,255,.72);

  line-height: 1.8;
}

.smash-copy .btn {
  margin-top: 32px;
}


/* =========================================================
   VISUAL UNDERNEATH
   ========================================================= */

.smash-visual {

  position: relative;

  min-height: 500px;

  display: grid;

  place-items: center;
}

.visual-circle {

  width:
    min(
      420px,
      70vw
    );

  aspect-ratio: 1;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255,214,10,.9) 0%,
      rgba(255,123,0,.65) 30%,
      rgba(239,35,60,.4) 55%,
      transparent 72%
    );

  filter: blur(3px);

  animation:
    pulseRelease
    4s
    ease-in-out
    infinite;
}

.visual-text {

  position: absolute;

  text-align: center;

  color: white;
}

.visual-text span {

  display: block;

  font-size: 12px;

  letter-spacing: .2em;

  font-weight: 800;

  margin-bottom: 15px;
}

.visual-text strong {

  display: block;

  font-family:
    "Bebas Neue";

  font-size:
    clamp(
      55px,
      7vw,
      100px
    );

  line-height: .8;
}

@keyframes pulseRelease {

  0%,
  100% {

    transform:
      scale(.95);

    opacity: .75;
  }

  50% {

    transform:
      scale(1.05);

    opacity: 1;
  }
}


/* =========================================================
   FULL SCREEN GLASS
   ========================================================= */

.glass-transition {

  position: fixed;

  z-index: 20;

  top: 0;
  left: 0;

  width: 100%;

  height: 100vh;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.16),
      rgba(255,255,255,.03)
    );

  backdrop-filter:
    blur(8px);

  border-bottom:
    1px solid
    rgba(255,255,255,.5);

  transition:
    opacity .7s ease,
    visibility .7s ease;
}

.glass-transition {
  opacity: 0;
  visibility: hidden;
}

.glass-transition.approaching {
  opacity: 1;
  visibility: visible;
}

/* =========================================================
   GLASS SURFACE
   ========================================================= */

.glass-surface {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      110deg,
      rgba(255,255,255,.20),
      rgba(255,255,255,.05) 45%,
      rgba(255,255,255,.15)
    );

  border:
    2px solid
    rgba(255,255,255,.45);

  box-shadow:
    inset 0 0 100px
    rgba(255,255,255,.08),

    0 0 100px
    rgba(0,0,0,.25);

  transition:
    opacity .3s ease,
    transform .7s
    cubic-bezier(.2,.8,.2,1);
}


/* =========================================================
   TEXT ON THE GLASS
   ========================================================= */

.glass-text {

  position: absolute;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%,-50%);

  text-align: center;

  color:
    rgba(255,255,255,.9);

  pointer-events: none;
}

.glass-text span {

  display: block;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: .3em;

  margin-bottom: 20px;
}

.glass-text strong {

  display: block;

  font-family:
    "Bebas Neue";

  font-size:
    clamp(
      70px,
      12vw,
      180px
    );

  line-height: .75;

  letter-spacing: -.02em;
}


/* =========================================================
   GLASS CRACKS
   ========================================================= */

.crack {

  position: absolute;

  left: 50%;
  top: 50%;

  width: 2px;

  background:
    rgba(255,255,255,.9);

  transform-origin:
    top center;

  opacity: 0;

  filter:
    drop-shadow(
      0 0 5px
      rgba(255,255,255,.8)
    );

  transition:
    opacity .2s ease,
    height .35s ease;
}


/* Crack directions */

.crack-1 {
  transform: rotate(0deg);
}

.crack-2 {
  transform: rotate(45deg);
}

.crack-3 {
  transform: rotate(90deg);
}

.crack-4 {
  transform: rotate(135deg);
}

.crack-5 {
  transform: rotate(180deg);
}

.crack-6 {
  transform: rotate(225deg);
}


/* =========================================================
   GLASS SHARDS
   ========================================================= */

.glass-shard {

  position: absolute;

  left: 50%;
  top: 50%;

  width: 0;
  height: 0;

  opacity: 0;

  border-style: solid;

  filter:
    drop-shadow(
      0 0 4px
      rgba(255,255,255,.8)
    );

  transition:
    opacity .1s ease,
    transform .9s
    cubic-bezier(.15,.7,.2,1);
}


/* Shard shapes */

.shard-1 {

  border-width:
    0 35px 80px 35px;

  border-color:
    transparent
    transparent
    rgba(255,255,255,.4)
    transparent;
}

.shard-2 {

  border-width:
    55px 0 55px 35px;

  border-color:
    transparent
    transparent
    transparent
    rgba(255,255,255,.35);
}

.shard-3 {

  border-width:
    30px 50px 0 0;

  border-color:
    rgba(255,255,255,.35)
    transparent
    transparent
    transparent;
}

.shard-4 {

  border-width:
    0 20px 60px 50px;

  border-color:
    transparent
    rgba(255,255,255,.3)
    transparent
    transparent;
}

.shard-5 {

  border-width:
    45px 25px 0 25px;

  border-color:
    rgba(255,255,255,.4)
    transparent
    transparent
    transparent;
}

.shard-6 {

  border-width:
    0 40px 40px 15px;

  border-color:
    transparent
    rgba(255,255,255,.35)
    transparent
    transparent;
}

.shard-7 {

  border-width:
    25px 45px 25px 0;

  border-color:
    transparent
    rgba(255,255,255,.3)
    transparent
    transparent;
}

.shard-8 {

  border-width:
    50px 0 0 40px;

  border-color:
    rgba(255,255,255,.4)
    transparent
    transparent
    transparent;
}


/* =========================================================
   THE FIST
   ========================================================= */

.smash-fist {

  position: absolute;

  z-index: 40;

  left: -220px;

  top: 50%;

  font-size:
    clamp(
      100px,
      15vw,
      220px
    );

  line-height: 1;

  transform:
    translateY(-50%)
    rotate(-18deg)
    scale(1);

  filter:
    drop-shadow(
      20px 25px 15px
      rgba(0,0,0,.35)
    );

  pointer-events: none;

  transition:
    left .05s linear,
    transform .2s ease;
}


/* =========================================================
   IMPACT FLASH
   ========================================================= */

.impact-flash {

  position: absolute;

  z-index: 50;

  left: 50%;
  top: 50%;

  width: 10px;
  height: 10px;

  border-radius: 50%;

  background: white;

  transform:
    translate(-50%,-50%)
    scale(0);

  opacity: 0;

  box-shadow:
    0 0 40px 20px white,
    0 0 120px 60px var(--yellow);
}


/* =========================================================
   BROKEN GLASS STATE
   ========================================================= */

.glass-transition.broken
.glass-surface {

  opacity: 0;

  transform:
    scale(1.08);
}

.glass-transition.broken
.glass-text {

  opacity: 0;
}


/* Cracks become visible */

.glass-transition.broken
.crack {

  opacity: 1;

  height: 45vh;
}


/* Shards become visible */

.glass-transition.broken
.glass-shard {

  opacity: 1;
}


/* =========================================================
   SHARD MOVEMENT
   ========================================================= */

.glass-transition.broken
.shard-1 {

  transform:
    translate(-330px,-250px)
    rotate(130deg);
}

.glass-transition.broken
.shard-2 {

  transform:
    translate(340px,-230px)
    rotate(-80deg);
}

.glass-transition.broken
.shard-3 {

  transform:
    translate(-380px,100px)
    rotate(100deg);
}

.glass-transition.broken
.shard-4 {

  transform:
    translate(380px,160px)
    rotate(-130deg);
}

.glass-transition.broken
.shard-5 {

  transform:
    translate(-170px,300px)
    rotate(170deg);
}

.glass-transition.broken
.shard-6 {

  transform:
    translate(180px,320px)
    rotate(-160deg);
}

.glass-transition.broken
.shard-7 {

  transform:
    translate(450px,-40px)
    rotate(90deg);
}

.glass-transition.broken
.shard-8 {

  transform:
    translate(-450px,-80px)
    rotate(-100deg);
}


/* =========================================================
   IMPACT FLASH ANIMATION
   ========================================================= */

.glass-transition.broken
.impact-flash {

  animation:
    impactFlash
    .55s
    ease-out
    forwards;
}

@keyframes impactFlash {

  0% {

    opacity: 1;

    transform:
      translate(-50%,-50%)
      scale(0);
  }

  35% {

    opacity: 1;

    transform:
      translate(-50%,-50%)
      scale(15);
  }

  100% {

    opacity: 0;

    transform:
      translate(-50%,-50%)
      scale(30);
  }
}


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

@media (max-width: 720px) {

  .smash-section {
    min-height: 130vh;
  }

  .smash-content {

    min-height: 100vh;

    padding:
      100px 5vw;

    grid-template-columns: 1fr;
  }

  .smash-visual {
    min-height: 300px;
  }

  .glass-text strong {
    font-size: 80px;
  }

  .smash-fist {
    font-size: 110px;
  }
}

.rooms { background:linear-gradient(180deg,#f5f5f2 0%,#e9eef2 100%); }
.room-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:70px; }
.room-card { min-height:400px; border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; justify-content:space-between; color:white; position:relative; overflow:hidden; }
.room-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 25%,rgba(0,0,0,.5)); }
.room-card > * { position:relative; z-index:2; }
.room-one { background:linear-gradient(145deg,#e7002a,#ff8a00); }
.room-two { background:linear-gradient(145deg,#ef233c,#7b2cbf,#246bce); }
.room-three { background:linear-gradient(145deg,#1e9b56,#16b4d7,#086788); }
.room-number { font-family:"Bebas Neue"; font-size:76px; line-height:1; opacity:.7; }
.room-label { font-size:10px; letter-spacing:.15em; font-weight:800; opacity:.75; }
.room-card h3 { font-family:"Bebas Neue"; font-size:55px; line-height:.9; margin:8px 0 12px; }
.room-card p:last-child { font-size:13px; line-height:1.65; max-width:330px; opacity:.85; }
.small-note { margin-top:25px; color:var(--muted); font-size:12px; }

.banner-section { min-height:80vh; position:relative; display:grid; place-items:center; overflow:hidden; color:white; }
.banner-section > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.05); }
.banner-overlay { position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(7,8,12,.86),rgba(7,8,12,.35),rgba(7,8,12,.7)); }
.banner-content { position:relative; z-index:2; width:min(1100px,86vw); }
.banner-content h2 { font-family:"Bebas Neue"; font-size:clamp(75px,11vw,160px); line-height:.78; }
.banner-content h2 span { color:var(--yellow); }
.banner-content .btn { margin-top:35px; }

.faq { background:linear-gradient(180deg,#0b80b8 0%,#0b5278 100%); color:white; display:grid; grid-template-columns:.75fr 1.25fr; gap:10vw; }
.faq-intro p:last-child { color:rgba(255,255,255,.72); line-height:1.7; margin-top:30px; max-width:440px; }
.faq-list { border-top:1px solid rgba(255,255,255,.2); }
.faq-list details { border-bottom:1px solid rgba(255,255,255,.2); padding:0; }
.faq-list summary { list-style:none; cursor:pointer; padding:24px 0; font-size:17px; font-weight:700; display:flex; justify-content:space-between; gap:20px; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; font-size:24px; font-weight:400; opacity:.7; }
.faq-list details[open] summary::after { content:"−"; }
.faq-list details p { color:rgba(255,255,255,.7); line-height:1.75; max-width:700px; padding:0 40px 24px 0; }

.social-proof { background:#eaf1f4; padding:120px 7vw; }
.social-inner { max-width:950px; }
.social-inner h2 { font-family:"Bebas Neue"; font-size:clamp(70px,9vw,130px); line-height:.8; }
.social-inner h2 span { color:var(--red); }
.social-inner > p:not(.eyebrow) { color:var(--muted); max-width:550px; line-height:1.7; margin-top:30px; }
.social-links { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:40px; }
.social-links a { padding:25px; border:1px solid var(--line); border-radius:16px; font-weight:800; background:white; }
.social-links a:hover { border-color:var(--red); }
.social-links span { display:block; font-size:11px; color:var(--muted); margin-top:7px; font-weight:500; }

.contact { display:grid; grid-template-columns:.9fr 1.1fr; gap:10vw; background:linear-gradient(155deg,#ff6b00 0%,#ef233c 38%,#7a2bbd 68%,#1166b8 100%); color:white; }
.contact-heading > p:not(.eyebrow) { max-width:500px; line-height:1.7; margin-top:28px; color:rgba(255,255,255,.8); }
.contact-details { margin-top:45px; display:grid; gap:20px; }
.contact-details a { font-weight:700; font-size:17px; }
.contact-details span { display:block; font-size:9px; letter-spacing:.15em; opacity:.6; margin-bottom:5px; }
.contact-form { background:white; color:var(--ink); padding:34px; border-radius:26px; box-shadow:var(--shadow); }
.contact-form label { display:block; font-size:11px; text-transform:uppercase; font-weight:800; letter-spacing:.08em; margin-bottom:18px; }
.contact-form input, .contact-form select, .contact-form textarea {
  display:block; width:100%; margin-top:8px; border:1px solid #d7dbe0; border-radius:10px; padding:14px;
  background:#fafafa; outline:none; resize:vertical;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(32,164,243,.1); }
.form-note { font-size:10px; color:var(--muted); line-height:1.5; margin-top:14px; }
code { background:#eee; padding:2px 5px; border-radius:4px; }

.site-footer { padding:45px 7vw; background:#09090c; color:white; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.footer-brand { font-size:23px; font-weight:900; letter-spacing:-.05em; }
.site-footer p { color:#888; font-size:12px; }
.footer-links { display:flex; gap:18px; font-size:11px; text-transform:uppercase; font-weight:800; letter-spacing:.08em; }
.footer-links a:hover { color:var(--yellow); }

.gallery-hero { min-height:72vh; padding:160px 7vw 100px; display:flex; align-items:end; color:white; position:relative; overflow:hidden; background:
  radial-gradient(circle at 80% 20%,rgba(255,214,10,.4),transparent 25%),
  linear-gradient(135deg,#240009,#d91438 45%,#096b9b 100%); }
.gallery-hero::after { content:""; position:absolute; inset:0; opacity:.15; background-image:linear-gradient(120deg,white 1px,transparent 1px); background-size:50px 50px; }
.gallery-hero-copy { position:relative; z-index:2; max-width:850px; }
.gallery-hero h1 { font-size:clamp(90px,14vw,190px); }
.gallery-hero p:not(.eyebrow) { max-width:620px; line-height:1.7; color:rgba(255,255,255,.8); margin:28px 0; }

.gallery-section { background:#f5f5f2; }
.gallery-toolbar { display:flex; align-items:end; gap:10px; flex-wrap:wrap; margin-bottom:45px; }
.gallery-toolbar > div { margin-right:auto; }
.gallery-toolbar h2 { font-family:"Bebas Neue"; font-size:60px; line-height:.9; }
.filter-btn { border:1px solid var(--line); background:transparent; border-radius:999px; padding:10px 16px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.filter-btn.active, .filter-btn:hover { background:var(--ink); color:white; border-color:var(--ink); }
.media-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.media-card { min-height:390px; border:0; padding:0; overflow:hidden; position:relative; border-radius:18px; background:#ddd; color:white; text-align:left; cursor:pointer; }
.media-card img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.media-card:hover img { transform:scale(1.05); }
.media-card::after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.78)); pointer-events:none; }
.media-type, .media-title { position:absolute; z-index:2; left:20px; }
.media-type { top:18px; padding:7px 9px; border-radius:999px; background:rgba(0,0,0,.65); font-size:9px; font-weight:800; letter-spacing:.12em; }
.media-title { bottom:18px; font-size:19px; font-weight:800; }
.placeholder-card { display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#20232a,#343943); }
.placeholder-card::after { display:none; }
.placeholder-icon { font-size:70px; font-weight:200; opacity:.6; }
.video-card { cursor:default; }
.video-placeholder { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:35px; text-align:center; background:linear-gradient(135deg,#16171c,#0a789f); }
.video-placeholder .play { width:68px; height:68px; border-radius:50%; display:grid; place-items:center; background:var(--yellow); color:var(--ink); font-size:20px; padding-left:3px; }
.video-placeholder strong { font-size:18px; }
.video-placeholder small { color:rgba(255,255,255,.65); line-height:1.5; max-width:250px; }
.gallery-bottom { min-height:65vh; padding:100px 7vw; display:flex; align-items:center; color:white; background:linear-gradient(150deg,#0a86bf,#073b5c); }
.gallery-bottom h2 { font-family:"Bebas Neue"; font-size:clamp(75px,11vw,150px); line-height:.78; }
.gallery-bottom h2 span { color:var(--yellow); }
.gallery-bottom .btn { margin-top:35px; }

.lightbox { position:fixed; inset:0; background:rgba(4,5,8,.92); z-index:300; display:none; place-items:center; padding:40px; }
.lightbox.open { display:grid; }
.lightbox-close { position:absolute; right:25px; top:20px; border:0; background:none; color:white; font-size:45px; z-index:3; }
.lightbox-inner { width:min(1200px,94vw); max-height:90vh; display:grid; grid-template-columns:1.3fr .7fr; gap:35px; align-items:center; }
.lightbox-inner img { width:100%; max-height:80vh; object-fit:contain; }
.lightbox-copy { color:white; }
.lightbox-copy h2 { font-family:"Bebas Neue"; font-size:65px; line-height:.9; }
.lightbox-copy p:last-child { color:#aaa; line-height:1.7; margin-top:18px; }

.reveal { opacity:0; transform:translateY(35px); transition:opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.12s; }
.delay-2 { transition-delay:.24s; }

@media (max-width: 980px) {
  .main-nav { gap:13px; }
  .main-nav a { font-size:10px; }
  .header-phone { display:none; }
  .hero { grid-template-columns:1fr; padding-top:130px; }
  .hero-image-wrap { max-width:760px; width:100%; }
  .intro-grid, .smash-section, .faq, .contact { grid-template-columns:1fr; }
  .room-grid, .media-grid { grid-template-columns:1fr 1fr; }
  .social-links { grid-template-columns:1fr; }
  .smash-copy { order:-1; }
  .smash-stage { min-height:450px; }
  .lightbox-inner { grid-template-columns:1fr; overflow:auto; }
  .lightbox-inner img { max-height:55vh; }
}
@media (max-width: 720px) {
  .site-header { height:68px; padding:0 5vw; }
  .brand { font-size:18px; }
  .main-nav {
    display:none; position:absolute; top:68px; left:0; right:0; padding:25px 5vw;
    background:rgba(10,10,14,.98); flex-direction:column; align-items:flex-start; gap:22px;
  }
  .main-nav.open { display:flex; }
  .main-nav a { font-size:14px; }
  .menu-toggle { display:block; margin-left:auto; }
  .hero { padding:120px 5vw 70px; }
  .hero h1 { font-size:82px; }
  .hero-copy { font-size:15px; }
  .section-pad, .social-proof { padding:80px 5vw; }
  .section-heading h2, .faq-intro h2, .contact-heading h2 { font-size:65px; }
  .intro-grid { margin-top:45px; }
  .smash-section { padding:80px 5vw; }
  .smash-stage { min-height:380px; }
  .glass-card { width:270px; }
  .glass-card p { font-size:44px; }
  .fist { font-size:80px; }
  .room-grid, .media-grid { grid-template-columns:1fr; }
  .room-card { min-height:330px; }
  .banner-section { min-height:70vh; }
  .banner-content h2 { font-size:82px; }
  .social-inner h2 { font-size:82px; }
  .contact-form { padding:24px; }
  .gallery-hero { min-height:70vh; padding:130px 5vw 70px; }
  .gallery-hero h1 { font-size:100px; }
  .site-footer { padding:35px 5vw; align-items:flex-start; flex-direction:column; }
  .footer-links { flex-wrap:wrap; }
  .scroll-cue { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}


/* =========================================================
   UPDATED PRICING / HOURS / TRADE FAQ
   ========================================================= */
.pricing-section { margin-top:45px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
.pricing-card { padding:28px; border-radius:22px; color:white; background:linear-gradient(145deg,#17171b,#303642); box-shadow:var(--shadow); }
.pricing-single { background:linear-gradient(145deg,var(--red),#ff7b00); }
.pricing-group { background:linear-gradient(145deg,#7b2cbf,var(--blue)); }
.pricing-card strong { display:block; font-family:"Bebas Neue"; font-size:72px; line-height:.8; margin:18px 0 8px; }
.pricing-card span { font-size:12px; opacity:.8; }
.pricing-info { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-radius:18px; overflow:hidden; }
.pricing-info div { background:white; padding:20px; }
.pricing-info span, .opening-hours span { display:block; font-size:9px; font-weight:800; letter-spacing:.14em; opacity:.55; margin-bottom:7px; }
.pricing-info strong { font-size:14px; }
.opening-hours { margin-top:35px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.opening-hours .eyebrow { grid-column:1/-1; margin-bottom:0; }
.opening-hours div { padding:20px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.65); }
.opening-hours strong { font-size:20px; }
.trade-faq-image { margin-top:18px; overflow:hidden; border-radius:16px; max-width:760px; }
.trade-faq-image img { width:100%; aspect-ratio:16/9; object-fit:cover; }
@media (max-width:720px) {
  .pricing-section { grid-template-columns:1fr; }
  .pricing-info { grid-template-columns:1fr 1fr; }
  .opening-hours { grid-template-columns:1fr; }
  .opening-hours .eyebrow { grid-column:auto; }
}


/* =========================================================
   PRICING SECTION LAYOUT
   ========================================================= */

.pricing-wrap {
  background: var(--paper);
}

.pricing-wrap > .section-heading {
  display: grid;
  grid-template-columns: 1fr .75fr;
  gap: 8vw;
  align-items: end;
}

.pricing-wrap .pricing-section {
  margin-top: 45px;
}

.pricing-card {
  min-height: 250px;
}

.pricing-card p:last-child {
  margin-top: 24px;
  max-width: 430px;
  line-height: 1.65;
  opacity: .88;
}

.pricing-wrap .opening-hours {
  margin-top: 35px;
}

@media (max-width: 720px) {
  .pricing-wrap > .section-heading {
    grid-template-columns: 1fr;
    gap: 25px;
  }
}


/* =========================================================
   EVENTS + SECTION SEPARATION UPDATE
   ========================================================= */

.section-divider {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 35px 7vw;
  position: relative;
  overflow: hidden;
  color: white;
  text-align: center;
  background: #101014;
}

.section-divider::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(45deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 34px 34px, 54px 54px;
}

.section-divider span {
  position: relative;
  z-index: 1;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(42px, 6vw, 82px);
  line-height: .9;
  letter-spacing: .02em;
}

.experience-to-events-divider {
  background: linear-gradient(135deg, #073b5c 0%, #101014 48%, #7b2cbf 100%);
}

.events-to-rooms-divider {
  background: linear-gradient(135deg, #ef233c 0%, #ff7b00 48%, #ffd60a 100%);
  color: #101014;
}

.events {
  position: relative;
  background: #fff;
  overflow: hidden;
}

.events::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  right: -180px;
  top: -180px;
  background: radial-gradient(circle, rgba(255,214,10,.25), transparent 68%);
  pointer-events: none;
}

.events > * {
  position: relative;
  z-index: 1;
}

.events .section-heading h2 em {
  color: var(--red);
}

.events-grid {
  margin-top: 55px;
}

.events-cta {
  margin-top: 45px;
  max-width: 360px;
}

.events-cta .btn {
  width: 100%;
}

/* Make the transition into the room section unmistakable */
.rooms {
  border-top: 12px solid var(--ink);
  position: relative;
}

.rooms .section-heading {
  position: relative;
  padding-left: 24px;
  border-left: 8px solid var(--red);
}

/* Cloudinary video cards */
.media-card video {
  width: 100%;
  height: 100%;
  min-height: 390px;
  object-fit: cover;
  display: block;
  background: #111;
}

.video-card::after {
  pointer-events: none;
}

@media (max-width: 720px) {
  .section-divider {
    min-height: 110px;
    padding: 28px 5vw;
  }

  .events-grid {
    margin-top: 40px;
  }

  .events-cta {
    max-width: none;
  }

  .rooms {
    border-top-width: 8px;
  }

  .rooms .section-heading {
    padding-left: 16px;
    border-left-width: 6px;
  }

  .media-card video {
    min-height: 330px;
  }
}