:root{
      --muted:#9aa6b2; --text:#e6edf3;
      --accent:#25d0e2; --accent-2:#69e2a8;
      --lam-photo: url('https://www.lightsactionmusic.com/assets/lam_studios_site_background.png'); /* Shared drum+guitar photo */
      --bg-x: calc(100% - clamp(16rem, 30vw, 30rem)); /* 16rem≈256px, 30rem≈480px */
      --bg-y: center;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;line-height:1.5}

    body{
      background-image:
        linear-gradient(rgba(12,15,19,.62), rgba(12,15,19,.62)),
        var(--lam-photo);
      background-size: cover, cover;      /* both layers cover the viewport */
      background-position: center, center;/* centers the image */
      background-repeat: no-repeat, no-repeat;
      background-attachment: scroll, fixed;
    }

    @media (max-width: 640px){
      :root{ --bg-x: 70%; } /* keep subject visible on phones */
    }
    @media (min-width: 1280px){
      :root{ --bg-x: calc(100% - 30rem); } /* cap the shift at ~480px on very wide screens */
    }

    a{color:var(--accent);text-decoration:none} 
    a:hover{opacity:.9}

    header{
      position:sticky;top:0;z-index:50;
      background:rgba(12,15,19,.80);
      backdrop-filter:saturate(140%) blur(8px);
      border-bottom:1px solid rgba(255,255,255,.06);
	  min-height: 62px;
    }
    .inner{max-width:1120px;margin:0 auto;padding:16px}
    .row{display:flex;align-items:center;justify-content:space-between;gap:16px}
/* .brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.3px}
    .brand .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2))} */
	
	.brand {display: flex;align-items:center;gap:10px;font-weight:700;letter-spacing:0.3px;}
	/* Logo image in header */
	.brand-logo {width: 28px;height: 28px; border-radius: 10px; display:block; flex-shrink: 0; box-shadow:0 0 12px rgba(0, 0, 0, 0.65);}
	/* No dot needed anymore, but keep this to be safe */
	.brand .dot {display: none;}

	.brand-link {display:inline-flex; align-items:center; gap:10px; color:inherit; text-decoration:none;}
	.brand-link:hover {opacity: 0.9;}
		
    nav a{margin:0 10px;padding:6px 10px;border-radius:10px}
    nav a:hover{background:rgba(255,255,255,.06)}
    .tel{font-weight:600}

    /* HERO inherits the page image; add subtle glow */
    .hero{
      background:
        radial-gradient(1200px 500px at 70% -10%, rgba(37,208,226,.22), transparent 60%),
        radial-gradient(800px 500px at 10% 10%, rgba(105,226,168,.12), transparent 60%);
    }
    .hero .inner{padding:84px 16px}
    .h1{font-size:clamp(32px,4.5vw,52px);font-weight:800;margin:6px 0 10px}
    .lead{color:var(--muted);font-size:clamp(16px,1.8vw,19px);margin-bottom:22px}
    .ctas{display:flex;gap:12px;flex-wrap:wrap}
    .btn{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.10);background:rgba(15,20,26,.85);padding:12px 16px;border-radius:12px;color:var(--text);font-weight:600}
    .btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#061016;border:0}
    section{padding:56px 16px}
    h2{font-size:clamp(22px,2.8vw,30px);margin:0 0 14px}
	.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
    .card{background:rgba(18,23,30,.82);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px}
	
	#rooms-detail .card { display: flex; flex-direction: column; height: 100%; }

/* --- NEW SCOPED REVIEW STYLES --- */

/* 1. Target the grid ONLY within the reviews section */
#reviews .grid {
  display: flex;
  flex-wrap: wrap; /* Allows wrapping on mobile */
  gap: 16px;
}

/* 2. Logic for 3 columns on desktop / 1 on mobile */
.review-card {
  /* Default for mobile: full width */
  flex: 1 1 100%; 
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(18,23,30,.82);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 18px;
}

/* On Desktop (900px+): Force the 3-column 'floating' look */
@media (min-width: 900px) {
  .review-card {
    /* 33% minus the gap to keep them side-by-side */
    flex: 0 1 calc(33.333% - 16px); 
  }
}

/* 3. The 'spring' that handles the internal text height */
.review-content {
  flex-grow: 1;
}
	
    .muted{color:var(--muted)}
    .kpis{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
    .pill{background:rgba(255,255,255,.10);padding:6px 10px;border-radius:999px;font-size:14px}

    /* Rooms grid */
    .rooms{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
    .room-card{
      border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.10);
      min-height:180px; display:flex; flex-direction:column; justify-content:flex-end;
      box-shadow: 0 6px 22px rgba(0,0,0,.25);
      background: linear-gradient(135deg, #194e57 0%, #000000 80%);
    }
    .room-body{padding:16px}
    .price{font-weight:800;font-size:20px}
    .col-6{grid-column:span 12} 
    @media(min-width:900px){ .col-6{grid-column:span 6} }
	.col-4 { grid-column: span 12; }
	@media (min-width: 900px) { .col-4 { grid-column: span 4; } }

    .hours{display:grid;grid-template-columns:1fr auto;gap:6px;margin-top:10px}
    .faq details{background:rgba(18,23,30,.82);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px}
    .faq summary{cursor:pointer;font-weight:600}
    .footer{padding:28px 16px;border-top:1px solid rgba(255,255,255,.08);background:rgba(11,15,19,.88)}
    .nap{display:flex;flex-direction:column;gap:6px}
    .small{font-size:13px;color:var(--muted)}
    .map{width:100%;height:280px;border:0;border-radius:14px;filter:saturate(90%) contrast(95%)}
    .badges{display:flex;gap:10px;flex-wrap:wrap}
    .badge{background:rgba(255,255,255,.10);border-radius:999px;padding:6px 10px;font-size:13px}

    /* === Room card: rounded media banner with acoustic panel texture === */
    :root{
      --card-r: 16px;
      --media-h: clamp(120px, 18vw, 180px);
      --card-bg: rgba(18,23,30,.82);
      --panel-img: url('https://www.lightsactionmusic.com/assets/soundproof_foam.png');
    }
    .room-card{
      position:relative;
      overflow:hidden;
      border-radius:var(--card-r);
      background: var(--card-bg);
    }
    .room-card::before{
      content:"";
      position:absolute;
      inset:0 0 auto 0;
      height:var(--media-h);
      background:
        linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(12,15,19,.85) 100%),
        var(--panel-img);
      background-repeat: no-repeat, repeat;
      background-size: 100% 100%, 180px auto; /* UPDATED from 360px to 180px */
      background-position: center, center;
      border-radius: var(--card-r) var(--card-r) 0 0;
    }
    .room-body{
      padding:16px;
      margin-top: var(--media-h);
	    align-items: center; /* Centers items horizontally */
  text-align: center;  /* Centers the text lines within the items */
    }
	





    /* =========================
       Mobile nav / hamburger
       ========================= */
    .nav-wrapper {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .nav-toggle {
      display: none; /* shown on small screens via media query */
      background: none;
      border: 0;
      padding: 8px;
      margin-left: auto;
      cursor: pointer;
    }

    .nav-toggle-bar {
      display: block;
      width: 20px;
      height: 2px;
      background: #e6edf3;
      border-radius: 999px;
      margin: 4px 0;
      transition: transform 0.18s ease, opacity 0.18s ease;
    }

    /* When menu is open, animate icon into an "X" */
    .nav-open .nav-toggle-bar:nth-child(1) {
      transform: translateY(6px) rotate(45deg);
    }
    .nav-open .nav-toggle-bar:nth-child(2) {
      opacity: 0;
    }
    .nav-open .nav-toggle-bar:nth-child(3) {
      transform: translateY(-6px) rotate(-45deg);
    }

    @media (max-width: 800px) {
      header .row {
        align-items: center;
      }

      .nav-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
      }

      .nav-wrapper {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        margin-top: 0;
        padding: 10px 16px 12px;
        background: rgba(12, 15, 19, 0.96);
        backdrop-filter: saturate(140%) blur(10px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        display: none;
        flex-direction: column;
        gap: 10px;
      }

      body.nav-open .nav-wrapper {
        display: flex;
      }

      header nav {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      header nav a {
        width: 100%;
        padding: 8px 10px;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 10px;
      }

      header .tel {
        font-size: 14px;
        font-weight: 600;
        padding-top: 4px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
      }
    }

    @media (min-width: 801px) {
      .nav-wrapper {
        position: static;
      }
    }