/* =====================================================
   HUMMING HOUR — Rooftop Lounge · Bar · Restaurant
   Theme derived from brand logo: Azure → Teal gradient
   ===================================================== */
   
   /* ===== FINAL MOBILE FIX ===== */

html,
body {
    width: 100%;
    overflow-x: hidden !important;
}

body {
    position: relative;
}

section,
div,
img,
iframe {
    max-width: 100%;
}

@media (max-width: 768px) {

    .container,
    .container.narrow {
        width: calc(100% - 24px) !important;
        margin-left: auto;
        margin-right: auto;
    }

    .main-nav {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    .hero-inner,
    .reserve-wrap,
    .footer-grid,
    .services-grid,
    .why-grid,
    .testi-grid,
    .stats-grid {
        width: 100%;
        overflow: hidden;
    }

    .hero h1 {
        font-size: 1.9rem !important;
        word-break: break-word;
    }

    .hero-strip {
        padding: 0 10px;
    }

    .masonry {
        columns: 1 !important;
    }

    .lightbox img {
        max-width: 95vw;
        max-height: 80vh;
    }

    .float-reserve {
        right: 10px;
        bottom: 10px;
    }
}
:root {
  /* Logo-derived palette */
  --ink:        #061520;   /* deep ocean night */
  --ink-2:      #0A1F2E;   /* raised surface   */
  --ink-3:      #0E2A3C;   /* card surface     */
  --azure:      #2E8FC8;   /* logo "Humming"   */
  --teal:       #3BC6BD;   /* logo "Hour"      */
  --teal-soft:  #7FDCD6;
  --grad:       linear-gradient(120deg, #2E8FC8 0%, #3BC6BD 100%);
  --grad-soft:  linear-gradient(120deg, rgba(46,143,200,.16), rgba(59,198,189,.16));
  --text:       #EAF6F7;
  --muted:      #93AEBB;
  --line:       rgba(59,198,189,.16);
  --glass-bg:   rgba(14,42,60,.5);
  --glass-line: rgba(127,220,214,.14);

  --font-display: 'Marcellus', serif;
  --font-body:    'Jost', sans-serif;

  --radius: 18px;
  --shadow: 0 24px 60px rgba(0,0,0,.45);
  --ease: cubic-bezier(.22,.8,.26,.99);
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--text);
  line-height: 1.65;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }

.container { width:min(1180px, 92%); margin-inline:auto; }
.container.narrow { width:min(880px, 92%); }

/* ---------- Type ---------- */
h1,h2,h3 { font-family: var(--font-display); font-weight:400; line-height:1.15; letter-spacing:.01em; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.25rem; }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  font-size:.78rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color: var(--teal);
  font-weight:500;
  margin-bottom:.9rem;
}

.section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; position:relative; }

.section-head { text-align:center; max-width:720px; margin:0 auto clamp(2.5rem,5vw,4rem); }
.section-sub { color:var(--muted); margin-top:1rem; font-size:1.05rem; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-body); font-weight:500; font-size:.95rem;
  letter-spacing:.04em;
  padding:.8rem 1.6rem; border-radius:999px;
  border:1px solid transparent; cursor:pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s, border-color .35s;
  white-space:nowrap;
}
.btn-lg { padding:1rem 2.1rem; font-size:1rem; }
.btn-block { width:100%; justify-content:center; }

.btn-primary {
  background: var(--grad);
  color:#04141B;
  font-weight:600;
  box-shadow: 0 10px 30px rgba(59,198,189,.28);
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(59,198,189,.4); }

.btn-glass {
  background: rgba(255,255,255,.06);
  border-color: var(--glass-line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text);
}
.btn-glass:hover { background:rgba(127,220,214,.12); border-color:var(--teal); transform:translateY(-3px); }

.btn-ghost { color:var(--teal-soft); border-color:var(--line); background:transparent; }
.btn-ghost:hover { border-color:var(--teal); color:#fff; }

/* ---------- Glass utility ---------- */
.glass {
  background: var(--glass-bg);
  border:1px solid var(--glass-line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius);
}

/* =====================================================
   HEADER
   ===================================================== */
.site-header {
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:1rem 0;
  transition: background .4s, padding .4s, box-shadow .4s;
}
.site-header.scrolled {
  background: rgba(6,21,32,.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom:1px solid var(--line);
  padding:.6rem 0;
  box-shadow:0 10px 40px rgba(0,0,0,.35);
}

.header-inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

.brand { display:flex; align-items:center; gap:.7rem; }
.brand-logo {
  width:46px; height:46px; object-fit:contain;
  background:#fff; border-radius:12px; padding:4px;
}
.brand-name { font-family:var(--font-display); font-size:1.25rem; color:#fff; letter-spacing:.02em; }
.brand-name em { font-style:normal; color:var(--teal); }

.main-nav { display:flex; gap:2rem; }
.main-nav a {
  font-size:.92rem; letter-spacing:.06em; color:var(--muted);
  position:relative; padding:.3rem 0; transition:color .3s;
}
.main-nav a::after {
  content:""; position:absolute; left:0; bottom:0;
  width:0; height:1.5px; background:var(--grad);
  transition:width .35s var(--ease);
}
.main-nav a:hover, .main-nav a.active { color:#fff; }
.main-nav a:hover::after, .main-nav a.active::after { width:100%; }

.header-cta { display:flex; align-items:center; gap:.8rem; }

.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:.4rem; }
.nav-toggle span {
  display:block; width:24px; height:2px; background:var(--text);
  margin:5px 0; border-radius:2px; transition:.35s var(--ease);
}
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =====================================================
   HERO
   ===================================================== */
.hero {
  min-height:100svh;
  display:flex; align-items:center;
  position:relative; overflow:hidden;
  padding:7rem 0 5rem;
}

.hero-bg { position:absolute; inset:0; z-index:-2; }
.hero-bg img { width:100%; height:100%; object-fit:cover; filter:brightness(.38) saturate(.85); }

.hero-veil {
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,21,32,.55) 0%, rgba(6,21,32,.25) 45%, var(--ink) 100%),
    radial-gradient(80% 60% at 50% 40%, transparent 40%, rgba(6,21,32,.6) 100%);
}

/* aurora glows — the logo gradient breathing in the sky */
.hero-aurora {
  position:absolute; border-radius:50%;
  filter: blur(90px); opacity:.4;
  animation: drift 14s ease-in-out infinite alternate;
}
.aurora-1 { width:520px; height:520px; background:#2E8FC8; top:-12%; left:-8%; }
.aurora-2 { width:460px; height:460px; background:#3BC6BD; bottom:-14%; right:-6%; animation-delay:-7s; }

@keyframes drift {
  from { transform:translate(0,0) scale(1); }
  to   { transform:translate(60px,40px) scale(1.12); }
}

.hero-inner { text-align:center; max-width:880px; margin-inline:auto; }
.hero h1 { margin:.4rem 0 1.4rem; text-shadow:0 8px 40px rgba(0,0,0,.5); }
.hero-sub { color:#C6DCE3; font-size:clamp(1rem,1.6vw,1.2rem); max-width:640px; margin:0 auto 2.4rem; }

.hero-cta { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.hero-strip {
  margin-top:3.2rem;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:.9rem 1.1rem;
  font-size:.82rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--teal-soft);
}
.hero-strip i { width:4px; height:4px; border-radius:50%; background:var(--teal); opacity:.7; }

.scroll-hint {
  position:absolute; left:50%; bottom:2rem; transform:translateX(-50%);
  width:26px; height:42px; border:1.5px solid var(--glass-line); border-radius:14px;
}
.scroll-hint span {
  position:absolute; left:50%; top:8px; transform:translateX(-50%);
  width:3px; height:8px; border-radius:3px; background:var(--teal);
  animation: scrollDot 1.8s infinite;
}
@keyframes scrollDot { 0%{opacity:0; top:8px} 30%{opacity:1} 100%{opacity:0; top:22px} }

/* Floating reserve button */
.float-reserve {
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:90;
  display:flex; align-items:center; gap:.5rem;
  background:var(--grad); color:#04141B; font-weight:600;
  padding:.85rem 1.4rem; border-radius:999px;
  box-shadow:0 14px 38px rgba(59,198,189,.4);
  transform:translateY(120px); opacity:0;
  transition:transform .5s var(--ease), opacity .5s;
}
.float-reserve.show { transform:translateY(0); opacity:1; }
.float-reserve:hover { transform:translateY(-4px) scale(1.03); }

/* =====================================================
   WHY
   ===================================================== */
.why-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:1.4rem;
}
.why-card {
  padding:2rem 1.6rem;
  transition: transform .45s var(--ease), border-color .45s, background .45s;
}
.why-card:hover {
  transform:translateY(-8px);
  border-color: rgba(59,198,189,.45);
  background: rgba(14,42,60,.75);
}
.why-ico {
  width:56px; height:56px; border-radius:16px;
  display:grid; place-items:center;
  background: var(--grad-soft);
  border:1px solid var(--line);
  color:var(--teal); margin-bottom:1.2rem;
}
.why-card h3 { margin-bottom:.6rem; }
.why-card p { color:var(--muted); font-size:.95rem; }

/* =====================================================
   SERVICES
   ===================================================== */
.services { background: linear-gradient(180deg, var(--ink) 0%, #071A28 50%, var(--ink) 100%); }

.services-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap:1.6rem;
}
.service-card {
  border-radius:var(--radius); overflow:hidden;
  background:var(--ink-3);
  border:1px solid var(--line);
  transition: transform .45s var(--ease), box-shadow .45s;
}
.service-card:hover { transform:translateY(-8px); box-shadow:var(--shadow); }
.service-card img {
  width:100%; height:210px; object-fit:cover;
  transition:transform .8s var(--ease), filter .6s;
  filter:saturate(.9);
}
.service-card:hover img { transform:scale(1.07); filter:saturate(1.05); }
.service-body { padding:1.5rem 1.5rem 1.7rem; }
.service-body h3 { margin-bottom:.55rem; color:#fff; }
.service-body p { color:var(--muted); font-size:.95rem; }

/* =====================================================
   GALLERY (Masonry)
   ===================================================== */
.masonry {
  columns: 3 280px;
  column-gap:1.1rem;
}
.m-item {
  display:block; margin-bottom:1.1rem;
  border-radius:14px; overflow:hidden;
  position:relative;
  break-inside:avoid;
  border:1px solid var(--line);
}
.m-item img {
  width:100%; transition:transform .8s var(--ease), filter .5s;
  filter:brightness(.9);
}
.m-item::after {
  content:"⤢"; position:absolute; inset:auto 14px 14px auto;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(6,21,32,.7); color:var(--teal);
  backdrop-filter:blur(8px);
  opacity:0; transform:scale(.7);
  transition:.4s var(--ease);
  font-size:1.1rem;
}
.m-item:hover img { transform:scale(1.06); filter:brightness(1.02); }
.m-item:hover::after { opacity:1; transform:scale(1); }

/* Lightbox */
.lightbox {
  position:fixed; inset:0; z-index:200;
  background:rgba(4,14,22,.94);
  backdrop-filter:blur(10px);
  display:none; align-items:center; justify-content:center;
}
.lightbox.open { display:flex; }
.lightbox img {
  max-width:88vw; max-height:84vh;
  border-radius:12px; box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.lb-close, .lb-prev, .lb-next {
  position:absolute; background:rgba(255,255,255,.07);
  border:1px solid var(--glass-line); color:#fff;
  width:46px; height:46px; border-radius:50%;
  font-size:1.3rem; cursor:pointer;
  display:grid; place-items:center;
  transition:background .3s;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background:rgba(59,198,189,.25); }
.lb-close { top:1.4rem; right:1.4rem; }
.lb-prev { left:1.4rem; top:50%; transform:translateY(-50%); }
.lb-next { right:1.4rem; top:50%; transform:translateY(-50%); }

/* =====================================================
   STATS BAND
   ===================================================== */
.stats-band {
  background:
    linear-gradient(rgba(6,21,32,.88), rgba(6,21,32,.88)),
    url('https://images.unsplash.com/photo-1574096079513-d8259312b785?auto=format&fit=crop&w=1600&q=60') center/cover fixed;
  border-block:1px solid var(--line);
  padding:4.5rem 0;
}
.stats-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:2rem; text-align:center;
}
.stat-num, .stat-plus {
  font-family:var(--font-display);
  font-size:clamp(2.4rem,4.5vw,3.6rem);
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat p { color:var(--muted); letter-spacing:.12em; text-transform:uppercase; font-size:.8rem; margin-top:.4rem; }

/* =====================================================
   SEO CONTENT
   ===================================================== */
.seo-prose { color:#C2D6DD; }
.seo-prose h3 {
  font-size:1.35rem; color:#fff;
  margin:2.4rem 0 .8rem;
  padding-left:1rem; border-left:3px solid;
  border-image: var(--grad) 1;
}
.seo-prose p { margin-bottom:1rem; font-size:1.02rem; }
.seo-prose strong { color:var(--teal-soft); font-weight:500; }
.seo-close { text-align:center; font-family:var(--font-display); font-size:1.25rem; color:#fff; margin-top:2.4rem; }

/* =====================================================
   TESTIMONIALS
   ===================================================== */
.testimonials { background:linear-gradient(180deg, var(--ink), #071A28); }
.testi-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:1.4rem;
}
.testi { padding:1.9rem 1.7rem; transition:transform .45s var(--ease), border-color .45s; }
.testi:hover { transform:translateY(-6px); border-color:rgba(59,198,189,.4); }
.stars { color:var(--teal); letter-spacing:.25em; margin-bottom:1rem; }
.testi blockquote { color:#CFE2E8; font-size:.97rem; margin-bottom:1.3rem; }
.testi figcaption strong { display:block; font-family:var(--font-display); font-size:1.05rem; color:#fff; }
.testi figcaption span { color:var(--muted); font-size:.85rem; }

/* =====================================================
   RESERVE
   ===================================================== */
.reserve-wrap {
  display:grid; grid-template-columns: 1fr 1.15fr;
  gap:3rem; padding:clamp(1.8rem,4vw,3.2rem);
}
.reserve-info h2 { margin-bottom:1rem; }
.reserve-info > p { color:var(--muted); margin-bottom:1.8rem; }

.info-list li {
  display:flex; gap:.9rem; align-items:flex-start;
  margin-bottom:1.1rem; color:#CFE2E8; font-size:.95rem;
}
.info-list svg { flex-shrink:0; color:var(--teal); margin-top:.15rem; }
.info-list a:hover { color:var(--teal); }

/* Form */
#hp_website { position:absolute; left:-9999px; opacity:0; height:0; }

.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field { margin-bottom:1.1rem; display:flex; flex-direction:column; }
.field label {
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-soft); margin-bottom:.45rem;
}
.field input, .field select, .field textarea {
  font-family:var(--font-body); font-size:.98rem; color:var(--text);
  background:rgba(6,21,32,.55);
  border:1px solid var(--line); border-radius:12px;
  padding:.85rem 1rem;
  transition:border-color .3s, box-shadow .3s;
  width:100%;
}
.field select option { background:var(--ink-2); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(59,198,189,.15);
}
.field input.invalid, .field select.invalid { border-color:#E26D6D; }
.field .err { color:#E89A9A; font-size:.78rem; margin-top:.35rem; min-height:1em; }

input[type="date"], input[type="time"] { color-scheme:dark; }

.btn-spinner {
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(4,20,27,.35); border-top-color:#04141B;
  animation:spin .8s linear infinite;
  display:none;
}
.btn.loading .btn-spinner { display:inline-block; }
.btn.loading .btn-label { opacity:.7; }
@keyframes spin { to { transform:rotate(360deg); } }

.form-status { margin-top:1rem; font-size:.95rem; min-height:1.4em; }
.form-status.ok { color:var(--teal); }
.form-status.fail { color:#E89A9A; }

/* =====================================================
   MAP
   ===================================================== */
.map-section { line-height:0; border-top:1px solid var(--line); }
.map-section iframe { filter:grayscale(.4) invert(.88) hue-rotate(180deg) contrast(.95); }

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer { background:#04101A; border-top:1px solid var(--line); padding-top:4rem; }
.footer-grid {
  display:grid; grid-template-columns:1.4fr 1fr 1.1fr 1fr;
  gap:2.5rem; padding-bottom:3rem;
}
.f-col h4 {
  font-family:var(--font-display); font-size:1.05rem; color:#fff;
  margin-bottom:1.1rem; letter-spacing:.04em;
}
.f-col a, .f-col p { display:block; color:var(--muted); font-size:.93rem; margin-bottom:.55rem; transition:color .3s; }
.f-col a:hover { color:var(--teal); }
.f-brand p { margin-top:1rem; max-width:300px; }
.f-hours { margin-top:1rem; }
.f-hours strong { color:var(--teal-soft); }

.socials { display:flex; gap:.7rem; margin-top:1.2rem; }
.socials a {
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line); color:var(--teal-soft);
  transition:.35s var(--ease);
}
.socials a:hover { background:var(--grad); color:#04141B; border-color:transparent; transform:translateY(-3px); }

.footer-bar { border-top:1px solid rgba(255,255,255,.05); padding:1.3rem 0; }
.footer-bar p { color:#5E7884; font-size:.82rem; text-align:center; }

/* =====================================================
   GSAP initial states (JS removes)
   ===================================================== */
[data-gsap] { opacity:0; transform:translateY(34px); }
.no-js [data-gsap], .gsap-done [data-gsap] { opacity:1; transform:none; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 900px) {
  .main-nav {
    position:fixed; inset:0 0 0 auto; width:min(320px, 82vw);
    background:rgba(6,21,32,.96);
    backdrop-filter:blur(20px);
    flex-direction:column; gap:1.6rem;
    padding:6.5rem 2.2rem;
    transform:translateX(100%);
    transition:transform .45s var(--ease);
    border-left:1px solid var(--line);
    z-index:95;
  }
  .main-nav.open { transform:translateX(0); }
  .main-nav a { font-size:1.1rem; }
  .nav-toggle { display:block; z-index:96; }
  .btn-call { display:none; }
  .reserve-wrap { grid-template-columns:1fr; gap:2.2rem; }
}

@media (max-width: 640px) {
  .header-cta .btn-primary { padding:.65rem 1.1rem; font-size:.85rem; }
  .field-row { grid-template-columns:1fr; gap:0; }
  .hero-strip { gap:.6rem .8rem; font-size:.72rem; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .masonry { columns:2 150px; column-gap:.7rem; }
  .m-item { margin-bottom:.7rem; }
  .float-reserve { padding:.75rem 1.15rem; font-size:.9rem; }
}

/* =====================================================
   ACCESSIBILITY
   ===================================================== */
:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-gsap] { opacity:1; transform:none; }
}