:root{
    --ink:#0c0a08;
    --panel:#161310;
    --panel-alt:#1c1815;
    --gold:#d9b878;
    --gold-soft:#e8cd9a;
    --cream:#f3ece0;
    --muted:#b7ad9f;
    --hairline:rgba(217,184,120,0.2);
  }




/* ============ SECTION 5 – GALLERY ============ */
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-auto-rows:170px;
    gap:0.9rem;
    margin-top:3rem;
  }

  .gallery-item{
    border-radius:2px;
    position:relative;
    overflow:hidden;
    border:1px solid var(--hairline);
    background-size:cover;
    background-position:center;
    padding:0;
    cursor:pointer;
    display:block;
    width:100%;
    height:100%;
  }
a.gallery-item {
    height: 272px !important;
    object-fit: cover !important;
    border-radius: 10px;
}
  .gallery-item::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(10,8,6,0.15);
    transition:background .25s ease;
  }

  .gallery-item:hover::after{
    background:rgba(10,8,6,0.5);
  }

  .zoom-overlay{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%) scale(0.8);
    width:44px; height:44px;
    border:1px solid var(--gold-soft);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity .25s ease, transform .25s ease;
    z-index:2;
  }

  .zoom-overlay svg{
    width:20px; height:20px;
    fill:none;
    stroke:var(--gold-soft);
    stroke-width:1.6;
  }

  .gallery-item:hover .zoom-overlay{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
  }

  .g1{ grid-column:span 2; grid-row:span 2; }
  .g2{ grid-column:span 1; grid-row:span 1; }
  .g3{ grid-column:span 1; grid-row:span 1; }
  .g4{ grid-column:span 1; grid-row:span 1; }
  .g5{ grid-column:span 1; grid-row:span 1; }

  /* ============ LIGHTBOX ============ */
  .lightbox{
    position:fixed;
    inset:0;
    background:rgba(6,5,4,0.94);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:999;
    padding:2rem;
  }

  .lightbox.active{
    display:flex;
  }

  .lightbox-frame{
    max-width:min(90vw, 900px);
    max-height:85vh;
    animation:lightbox-in .25s ease;
  }

  @keyframes lightbox-in{
    from{ opacity:0; transform:scale(0.96); }
    to{ opacity:1; transform:scale(1); }
  }

  .lightbox-frame img{
    max-width:100%;
    max-height:85vh;
    border:1px solid var(--hairline);
    box-shadow:0 30px 70px -20px rgba(0,0,0,0.7);
  }

  .lightbox-close{
    position:absolute;
    top:1.6rem;
    right:1.8rem;
    background:transparent;
    border:1px solid var(--hairline);
    color:var(--cream);
    width:42px;
    height:42px;
    border-radius:50%;
    font-size:1.4rem;
    line-height:1;
    cursor:pointer;
    transition:all .2s ease;
  }
  .lightbox-close:hover{ border-color:var(--gold-soft); color:var(--gold-soft); }

  .lightbox-nav{
    background:transparent;
    border:1px solid var(--hairline);
    color:var(--cream);
    width:48px;
    height:48px;
    border-radius:50%;
    font-size:1rem;
    cursor:pointer;
    transition:all .2s ease;
    flex-shrink:0;
    margin:0 1.5rem;
  }
  .lightbox-nav:hover{ border-color:var(--gold-soft); color:var(--gold-soft); }

  @media (max-width:640px){
    .lightbox{ padding:1rem; }
    .lightbox-nav{ width:40px; height:40px; margin:0 0.6rem; }
    .lightbox-close{ top:1rem; right:1rem; width:38px; height:38px; }
    a.gallery-item {
    /* height: 272px !important; */
    /* object-fit: cover !important; */
    border-radius: 10px;
}

.wrap.booking-grid {
    grid-template-columns: repeat(1, 1fr) !important;
}

.gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}

.gallery-grid a.gallery-item {
    height: 100% !important;
    object-fit: contain !important;
}
.about-grid {
    display: grid;
    grid-template-columns: 1fr !important;
}
  }



 .eyebrow{
    font-size:0.72rem;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:500;
  }
.nav-links a::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: #fff;
    transition: width 0.4s var(--transition-smooth);
}
.nav-links a.active
 {
    color: #fff !important;
}
  /* ============ HERO ============ */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:8rem 1.5rem 6rem;
    overflow:hidden;
  }

  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background: url(https://www.spektrumhotels.com/images/banquet-hall.jpg);
    z-index:0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .hero::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgba(10,8,6,0.35) 0%, rgba(10,8,6,0.55) 60%, rgba(10,8,6,0.92) 100%);
    z-index:1;
  }

  .hero-content{
    position:relative;
    z-index:2;
    max-width:920px;
  }

  .hero .eyebrow{margin-bottom:1.4rem; display:block;}

  .hero h1{
    font-size:clamp(2.4rem, 6vw, 4.6rem);
    line-height:1.12;
    color:#fbf6ec;
    font-style:normal;
    font-family: "Playfair Display", serif;
  }

  .hero p.sub{
    max-width:640px;
    margin:1.8rem auto 2.6rem;
    color:#fff;
    font-size:1.02rem;
    font-weight:300;
  }

  .btn-row{
    display:flex;
    gap:1rem;
    justify-content:center;
    flex-wrap:wrap;
  }

  .btn{
    padding:0.95rem 2.1rem;
    font-size:0.76rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    font-weight:500;
    cursor:pointer;
    transition:all .25s ease;
    display:inline-block;
  }
.navbar.scrolled .nav-links a {
    color: var(--charcoal) !important;
}

.navbar.scrolled .nav-links a::before {
    background: var(--charcoal) !important;
}

.g1 {
    grid-column: span 2;
    grid-row: span 2;
}
.wrap.gallery-grid.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery-item {
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--hairline);
    background-size: cover;
    background-position: center;
    padding: 0;
    cursor: pointer;
    display: block;
    width: 100%;
    height: 100%;
}
.zoom-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 44px;
    height: 44px;
    border: 1px solid #d9b87833;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 2;
}
.gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10, 8, 6, 0.15);
    transition: background .25s ease;
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 170px;
    gap: 0.9rem;
    margin-top: 3rem !important;
}

.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.zoom-overlay svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #e8cd9a;
    stroke-width: 1.6;
}
 .btn-solid {
        background: var(--warm-gold);
    color: var(--charcoal);
    text-decoration: none;
}
  .btn-solid:hover{ background:#327a5d; transform:translateY(-1px); }
  .btn-outline:hover {
    background: #327a5d;
    transform: translateY(-1px);
    color: #fff !important;
    border-color: #327a5d !important;
}

 .btn-outline {
    background: transparent;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-decoration: none;
}
  .btn-outline:hover{ border-color:var(--gold-soft); color:var(--gold-soft); }

  /* ============ FEATURES ============ */
  .features{
    background:#fff;
    padding:5.5rem 1.5rem;
    border-top:1px solid var(--hairline);
  }

  .features-grid{
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:3rem;
  }

  .feature{
    padding:0 1rem;
    position:relative;
  }

  .feature:not(:last-child)::after{
    content:"";
    position:absolute;
    top:0.2rem;
    right:-1.5rem;
    height:100%;
    width:.5px;
    background:#307a7b;
  }

  .feature-icon{
    width:34px;
    height:34px;
    margin-bottom:1.4rem;
    color:var(--gold);
  }
  .feature-icon svg{width:100%; height:100%; fill:none; stroke:#307a7b; stroke-width:1.3;}

  .feature h3{
    font-size:1.5rem;
    color:var(--gold-soft);
    margin-bottom:0.9rem;
    font-weight:500;
  }
.section-label {
    color: var(--light-cyan);
}
.section-label::before {
    background: var(--light-cyan);
}
  .feature p{
    color:var(--muted);
    font-size:0.95rem;
    font-weight:300;
  }

  /* ============ STANDARD / SHOWCASE ============ */
  .standard{
    background:var(--charcoal);
    padding:6rem 1.5rem 5rem;
    position:relative;
  }

  .standard-grid{
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1.15fr;
    gap:4rem;
    align-items:center;
  }

  .standard-text .eyebrow{margin-bottom:1rem; display:block;}

  .standard-text h2{
    font-size:clamp(2rem, 4vw, 2.9rem);
    color:#fbf6ec;
    line-height:1.2;
    margin-bottom:2.6rem;
    font-family: "Playfair Display", serif;
  }

  .point{
    display:flex;
    gap:1rem;
    margin-bottom:1.8rem;
  }

  .point-icon{
    flex:0 0 22px;
    width:22px;
    height:22px;
    margin-top:0.2rem;
    color:var(--gold);
  }
  .point-icon svg{width:100%; height:100%; fill:none; stroke:#fff; stroke-width:1.4;}

  .point-body h4{
    font-family:'Jost', sans-serif;
    color:#fff;
    font-size:1rem;
    font-weight:600;
    letter-spacing:0.01em;
    margin-bottom:0.35rem;
  }

  .point-body p{
    color:#fff;
    font-size:0.94rem;
    font-weight:300;
  }

  .standard-image{
    position:relative;
    isolation:isolate;
  }

  .standard-image .frame-offset{
    position:absolute;
    top:-1.75rem;
    right:-1.75rem;
    width:65%;
    height:60%;
    border:1px solid var(--hairline);
    z-index:0;
  }

  .standard-image .photo{
    position:relative;
    z-index:1;
    width:100%;
    aspect-ratio:4/5;
    border-radius:2px;
    background:
      radial-gradient(circle at 30% 78%, rgba(255,205,120,0.55), transparent 12%),
      radial-gradient(circle at 55% 80%, rgba(255,205,120,0.45), transparent 10%),
      radial-gradient(circle at 78% 76%, rgba(255,205,120,0.4), transparent 10%),
      linear-gradient(200deg, #142027 0%, #0c1418 55%, #050807 100%);
    overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
  }

  .photo .stem{
    position:absolute;
    bottom:38%;
    left:12%;
    width:6px;
    height:55%;
    background:linear-gradient(180deg, #c99a4a, #8a6427);
  }
  .photo .stem.s2{left:22%; height:62%;}
  .photo .stem.s3{left:75%; height:58%;}
  .photo .stem.s4{left:85%; height:66%;}

  .photo .bloom{
    position:absolute;
    width:34px; height:34px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 35%, #f4e9da, #cbb99a 70%);
    box-shadow:0 4px 14px rgba(0,0,0,0.4);
  }
  .photo .bloom.b1{bottom:60%; left:8%;}
  .photo .bloom.b2{bottom:70%; left:71%;}

  .stat-badge{
    position:absolute;
    left:50%;
    bottom:-2.4rem;
    transform:translateX(-50%);
    background:var(--midnight);
    color:#1c1408;
    padding:1.3rem 2.6rem;
    text-align:center;
    z-index:2;
    box-shadow:0 20px 40px -15px rgba(0,0,0,0.55);
  }
  .stat-badge .num{
    font-family:'Playfair Display', serif;
    font-size:1.9rem;
    line-height:1;
    display:block;
    margin-bottom:0.3rem;
    color:#fff;
  }
  .stat-badge .label{
    font-size:0.62rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    font-weight:600;
    color:#fff;
  }

  .standard-bottom-spacer{ height:3rem; }

  /* ============ RESPONSIVE ============ */
  @media (max-width:900px){
    .features-grid{
      grid-template-columns:1fr;
      gap:2.8rem;
    }
    .feature:not(:last-child)::after{ display:none; }
    .feature{
      padding-bottom:2.4rem;
      border-bottom:1px solid var(--hairline);
    }
    .feature:last-child{border-bottom:none; padding-bottom:0;}

    .standard-grid{
      grid-template-columns:1fr;
      gap:3.2rem;
    }
    .standard-image{ order:1; }
    .standard-text{ order:2; }
    .standard-image .frame-offset{ display:none; }
    .standard-bottom-spacer{ height:3.4rem; }
  }


/* ============ FINAL CTA ============ */
 .final-cta {
    text-align: center;
    padding: 6.5rem 0 7rem;
    border-top: 1px solid #d9b87833;
    background: linear-gradient(135deg, rgba(15, 26, 26, 0.92) 0%, rgba(15, 26, 26, 0.7) 40%, rgba(46, 128, 124, 0.4) 70%, rgba(15, 26, 26, 0.85) 100%);
}

  .final-cta h2 {
    font-size: clamp(2rem, 4.5vw, 3rem);
    color: #fbf6ec;
    max-width: 700px;
    margin: 0 auto 1.2rem;
    line-height: 1.25;
    font-family: "Playfair Display", serif;
}

  .final-cta p {
    max-width: 560px;
    margin: 0 auto 2.4rem;
    color: #ffffffb3;
    font-size: 1rem;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

.final-cta .btn {
    display: inline-block;
    padding: 1rem 2.6rem;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
    background: #5e8d59;
    color: #fff;
    transition: all .25s ease;
    text-decoration: none;
}
  .btn:hover{ background:#f2e0b6; transform:translateY(-1px); }

.catering {
    position: relative;
    padding: 6rem 0;
    text-align: center;
    background: #1a1a1a !important;
}
.eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    display: block;
    margin-bottom: 1rem;
}
.section-title {
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    color: #fbf6ec;
    line-height: 1.2;
    margin-bottom: 1.4rem;
}

.catering p {
    max-width: 640px;
    margin: 0 auto;
    color: #fff;
    font-size: 1rem;
}

.cuisine-tags span {
    border: 1px solid var(--mid-teal);
    padding: 0.55rem 1.4rem;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mid-teal);
}
.cuisine-tags {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2.2rem;
}

.center {
    text-align: center;
}

section {
    padding: 5.5rem 0;
    border-top: 1px solid #d9b87833;
}

.booking-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--warm-gold);
    stroke-width: 1.3;
}
.booking-card h4 {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--warm-gold);
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    margin-bottom: 0.9rem;
}

.booking-card {
    border: 1px solid #d9b87833;
    padding: 2.4rem 2rem;
    text-align: center;
}

.booking-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem !important;
}
.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.booking-icon {
    width: 32px;
    height: 32px;
    margin: 0 auto 1.2rem;
    color: var(--warm-gold);
}
.eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--warm-gold);
    font-weight: 500;
    display: block;
    margin-bottom: 1rem;
}
.booking-card p {
    color: #f3ece0;
    font-size: 1.05rem;
    font-family: 'Playfair Display', serif;
}
.booking-card .sub-detail {
    color: #b7ad9f;
    font-size: 0.85rem;
    font-family: 'Jost', sans-serif;
    margin-top: 0.4rem;
}

.about-image img {
    width: 100%;
}

.about-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 4rem;
    align-items: center;
}

section#about {
    background: #fff;
}

.about-text h2 {
    font-family: "Playfair Display", serif;
    font-size: 45px;
    font-weight: 400;
    color: var(--charcoal);
    line-height: 1.2;
    margin-bottom: 30px;
}



.about-text .section-title em {
    color: var(--warm-gold);
}
section#faq .section-title em {
    font-style: italic;
    color: var(--mid-teal);
}

section#booking {
    background: var(--midnight);
}











  @media (max-width:520px){
    .hero{ padding:6rem 1.2rem 5rem; min-height:auto;}
    .hero p.sub{font-size:0.95rem;}
    .btn{ width:100%; text-align:center; }
    .btn-row{ flex-direction:column; width:100%; max-width:320px; margin:0 auto;}
    .features{ padding:4rem 1.2rem; }
    .standard{ padding:4.5rem 1.2rem 4.5rem; }
    .stat-badge{ padding:1rem 1.8rem; }
  }