*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --gold:#C9933A;--gold-light:#E8C47A;--gold-pale:#FAF0DC;
  --dark:#130C02;--dark-mid:#241504;--dark-soft:#3A2008;--cream:#FBF6ED;
  --text:#1E1205;--muted:#7A5C35;
  --ff-head:'Cormorant Garamond',serif;
  --ff-body:'DM Sans',sans-serif;
  --ff-mono:'DM Mono',monospace;
}
html{scroll-behavior:smooth}
body{font-family:var(--ff-body);background:var(--cream);color:var(--text);overflow-x:hidden}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--dark)}::-webkit-scrollbar-thumb{background:var(--gold)}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:1.1rem 3.5rem;transition:background 0.4s,padding 0.3s,backdrop-filter 0.4s}
nav.scrolled{background:rgba(19,12,2,0.95);backdrop-filter:blur(12px);padding:0.75rem 3.5rem;border-bottom:1px solid rgba(201,147,58,0.15)}
.logo{font-family:var(--ff-head);font-size:1.55rem;font-weight:700;color:#fff;letter-spacing:0.03em;text-decoration:none;line-height:1}
.logo span{color:var(--gold-light);font-style:italic}
.nav-links{display:flex;align-items:center;gap:2.2rem;list-style:none}
.nav-links a{display:flex;align-items:center;color:rgba(255,255,255,0.75);text-decoration:none;font-size:0.82rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:500;transition:color 0.2s;position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:1px;background:var(--gold);transform:scaleX(0);transition:transform 0.25s}
.nav-links a:hover{color:#fff}.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a.active-nav{color:var(--gold-light)}.nav-links a.active-nav::after{transform:scaleX(1)}
.nav-dropdown{position:relative}
.nav-dropdown>a{gap:0.35rem;cursor:pointer}
.nav-dropdown>a .arr{font-size:0.6rem;transition:transform 0.25s;color:rgba(255,255,255,0.5)}
.drop-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(6px);background:rgba(19,12,2,0.97);border:1px solid rgba(201,147,58,0.22);border-radius:3px;min-width:210px;padding:0.5rem 0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.22s ease,transform 0.22s ease,visibility 0.22s;backdrop-filter:blur(16px);box-shadow:0 16px 40px rgba(0,0,0,0.45);z-index:300}
.drop-menu::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid rgba(201,147,58,0.22)}
.drop-menu::after{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid rgba(19,12,2,0.97)}
.nav-dropdown:hover .drop-menu,.nav-dropdown.open .drop-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-dropdown.open>a .arr{transform:rotate(180deg)}
.drop-menu a{display:flex;align-items:center;gap:0.7rem;padding:0.65rem 1.2rem;color:rgba(255,255,255,0.65);text-decoration:none;font-size:0.8rem;letter-spacing:0.06em;transition:background 0.18s,color 0.18s;white-space:nowrap}
.drop-menu a::after{display:none}.drop-menu a:hover{background:rgba(201,147,58,0.1);color:var(--gold-light)}
.drop-menu a .di{font-size:1rem;width:20px;text-align:center;flex-shrink:0}
.drop-divider{height:1px;background:rgba(201,147,58,0.12);margin:0.35rem 0}
.drop-menu a.active-page{color:var(--gold-light);background:rgba(201,147,58,0.08)}
.nav-book{background:transparent;border:1px solid var(--gold);color:var(--gold-light);padding:0.55rem 1.4rem;font-family:var(--ff-body);font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:500;cursor:pointer;transition:background 0.2s,color 0.2s;border-radius:1px;white-space:nowrap}
.nav-book:hover{background:var(--gold);color:var(--dark)}
.nav-mobile-book{display:none}

/* HAMBURGER */
.nav-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:1px solid rgba(255,255,255,0.2);border-radius:2px;cursor:pointer;padding:0.45rem 0.5rem;z-index:210;flex-shrink:0}
.nav-hamburger span{display:block;width:20px;height:1.5px;background:#fff;border-radius:2px;transition:transform 0.3s,opacity 0.2s,width 0.3s;transform-origin:center}
.nav-hamburger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-hamburger.is-open span:nth-child(2){opacity:0;width:0}
.nav-hamburger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* EYEBROW */
.eyebrow{display:inline-flex;align-items:center;gap:0.65rem;font-family:var(--ff-mono);font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:0.9rem}
.eyebrow::before{content:'';display:block;width:24px;height:1px;background:var(--gold)}

/* FOOTER */
footer{background:#0A0600;padding:2.5rem 3.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.f-logo{font-family:var(--ff-head);font-size:1.2rem;font-weight:700;color:rgba(255,255,255,0.7)}
.f-logo span{color:var(--gold);font-style:italic}
.f-links{display:flex;gap:2rem;flex-wrap:wrap}
.f-links a{color:rgba(255,255,255,0.3);text-decoration:none;font-size:0.78rem;font-family:var(--ff-mono);letter-spacing:0.1em;text-transform:uppercase;transition:color 0.2s}
.f-links a:hover{color:var(--gold-light)}
.f-copy{font-size:0.75rem;color:rgba(255,255,255,0.2);font-family:var(--ff-mono)}

/* REVEAL */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 0.6s ease,transform 0.6s ease}
.reveal.in{opacity:1;transform:none}

@media(max-width:960px){

  /* Nav always has a solid background on mobile.
     NO backdrop-filter here — it creates a containing block for
     position:fixed children, which breaks the full-screen overlay. */
  nav{
    padding:0.85rem 1.2rem;
    background:rgba(13,8,0,0.97) !important;
    backdrop-filter:none !important;
    border-bottom:1px solid rgba(201,147,58,0.15);
  }
  .nav-hamburger{display:flex}
  .nav-book{display:none}

  /* ── Mobile overlay ─────────────────────────────────── */
  .nav-links{
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    width:100%;
    height:100vh;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:rgba(10,6,0,0.99);
    padding:4.8rem 1.4rem 2.5rem;   /* top clears the nav bar */
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:201;
    display:none;
  }
  .nav-links.mobile-open{display:flex}

  /* ── Nav items ──────────────────────────────────────── */
  .nav-links>li{
    border-bottom:1px solid rgba(201,147,58,0.12);
    list-style:none;
  }
  .nav-links>li>a{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    padding:1rem 0.2rem;
    font-size:0.92rem;
    letter-spacing:0.08em;
    color:rgba(255,255,255,0.85);
    width:100%;
    gap:0.5rem;
  }
  .nav-links>li>a::after{display:none !important}
  .nav-links>li>a:hover,
  .nav-links>li>a:active{color:var(--gold-light)}

  /* ── Services sub-menu ──────────────────────────────── */
  .nav-dropdown>a .arr{color:rgba(255,255,255,0.45)}
  .drop-menu{
    position:static !important;
    top:auto !important;
    left:auto !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    background:rgba(255,255,255,0.04);
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    padding:0.2rem 0 0.6rem 0.8rem !important;
    min-width:0 !important;
    width:100%;
    display:none !important;
    transition:none !important;
  }
  .drop-menu::before,.drop-menu::after{display:none !important}
  .nav-dropdown.open>.drop-menu{display:block !important}
  .drop-menu a{
    color:rgba(255,255,255,0.6) !important;
    font-size:0.83rem;
    padding:0.6rem 0.4rem !important;
    white-space:normal;
    background:none !important;
  }
  .drop-menu a:hover,.drop-menu a:active{
    color:var(--gold-light) !important;
    background:none !important;
  }

  /* ── Mobile Book CTA ────────────────────────────────── */
  .nav-mobile-book{
    display:block !important;
    border-bottom:none !important;
    padding-top:1.8rem;
  }
  .nav-mobile-book>a{
    display:flex !important;
    align-items:center;
    justify-content:center !important;
    background:var(--gold) !important;
    color:var(--dark) !important;
    padding:0.95rem 1rem !important;
    font-size:0.82rem;
    letter-spacing:0.12em;
    font-weight:600;
    border-radius:1px;
    width:100%;
    text-align:center;
  }
  .nav-mobile-book>a::after{display:none !important}
  .nav-mobile-book>a:hover{background:var(--gold-light) !important}

  /* ── Nav bar stays on top when overlay is open ─────── */
  nav.nav-open{z-index:203}
  .nav-hamburger{position:relative;z-index:204}
  .logo{position:relative;z-index:204}

  footer{padding:2rem 1.5rem;flex-direction:column;text-align:center}
  .f-links{justify-content:center}
}