/* ════════════════════════════════════════════════
   BEAUTY TIME — Shared Stylesheet
   ════════════════════════════════════════════════ */

/* ── Variables ── */
:root {
    --gold:        #C9A84C;
    --gold-light:  #E8D27A;
    --gold-dark:   #9A7730;
    --gold-grad:   linear-gradient(120deg, #9A7730 0%, #C9A84C 38%, #EDD887 65%, #C9A84C 100%);
    --cream:       #FAF8F3;
    --white:       #FFFFFF;
    --dark:        #181818;
    --dark2:       #252525;
    --gray:        #888;
    --trans:       all 0.42s cubic-bezier(.25,.46,.45,.94);
    --shadow:      0 22px 64px rgba(0,0,0,.13);
    --shadow-gold: 0 12px 42px rgba(201,168,76,.26);
    --serif:       'Cormorant Garamond', Georgia, serif;
    --sans:        'Montserrat', Arial, sans-serif;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--sans); color: var(--dark); background: var(--white); overflow-x: hidden; line-height: 1.75; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ── Typography helpers ── */
.label {
    font-family: var(--sans); font-size: .67rem; font-weight: 600;
    letter-spacing: .28em; text-transform: uppercase;
    color: var(--gold); display: block; margin-bottom: .85rem;
}
.heading {
    font-family: var(--serif);
    font-size: clamp(2.1rem, 4.2vw, 3.6rem);
    font-weight: 300; line-height: 1.12; color: var(--dark);
}
.heading em { font-style: italic; color: var(--gold); }
.heading--white { color: #fff; }
.heading--white em { color: var(--gold-light); }
.body-text {
    font-size: .88rem; font-weight: 300; color: var(--gray); line-height: 1.95;
}
.body-text--light { color: rgba(255,255,255,.58); }
.gold-rule {
    width: 52px; height: 1.5px;
    background: var(--gold-grad); background-size: 200%;
    border: none; margin: 1.4rem 0 2.2rem;
}
.gold-rule--center { margin-left: auto; margin-right: auto; }

/* ── Buttons ── */
.btn {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .92rem 2.3rem;
    font-family: var(--sans); font-size: .69rem;
    font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
    cursor: pointer; border: none; position: relative; overflow: hidden;
    transition: var(--trans);
}
.btn::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(255,255,255,.13); transform: translateX(-110%);
    transition: transform .4s ease;
}
.btn:hover::after { transform: translateX(110%); }

.btn-gold  { background: var(--gold-grad); background-size: 200%; color: #fff; }
.btn-gold:hover  { transform: translateY(-3px); box-shadow: var(--shadow-gold); }

.btn-outline { background: transparent; color: var(--gold); border: 1.5px solid var(--gold); }
.btn-outline:hover { background: var(--gold); color: #fff; transform: translateY(-3px); }

.btn-ghost { background: rgba(255,255,255,.1); color: #fff; border: 1.5px solid rgba(255,255,255,.42); }
.btn-ghost:hover { background: #fff; color: var(--dark); transform: translateY(-3px); }

/* ── Scroll reveal ── */
.sr { opacity: 0; transition: opacity .82s ease, transform .82s ease; }
.sr.up    { transform: translateY(44px); }
.sr.left  { transform: translateX(-50px); }
.sr.right { transform: translateX(50px); }
.sr.vis   { opacity: 1; transform: translate(0,0); }

/* ════════════════════════════════════════════════
   NAVIGATION
   ════════════════════════════════════════════════ */
#nav {
    position: fixed; inset: 0 0 auto 0; z-index: 900;
    padding: 1.5rem 5vw;
    display: flex; align-items: center; justify-content: space-between;
    transition: var(--trans);
}
#nav.solid {
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(18px);
    padding: 1rem 5vw;
    box-shadow: 0 4px 28px rgba(0,0,0,.07);
}
/* On pages without a hero image the nav starts solid */
#nav.always-solid {
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(18px);
    box-shadow: 0 4px 28px rgba(0,0,0,.07);
}

.nav-logo { height: 50px; transition: var(--trans); }
#nav.solid .nav-logo,
#nav.always-solid .nav-logo { height: 40px; }

.nav-links { list-style: none; display: flex; gap: 2.4rem; }
.nav-links a {
    font-size: .69rem; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase;
    color: #fff; transition: var(--trans); position: relative;
}
#nav.solid   .nav-links a,
#nav.always-solid .nav-links a { color: var(--dark); }

.nav-links a::after {
    content: ''; position: absolute; bottom: -4px; left: 0;
    width: 0; height: 1.5px; background: var(--gold);
    transition: width .3s ease;
}
.nav-links a:hover,
.nav-links a.active         { color: var(--gold); }
.nav-links a:hover::after,
.nav-links a.active::after  { width: 100%; }

.nav-book {
    font-size: .68rem; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: var(--gold);
    padding: .52rem 1.35rem; border: 1.5px solid var(--gold);
    transition: var(--trans); cursor: pointer; background: none;
    font-family: var(--sans);
}
.nav-book:hover { background: var(--gold); color: #fff; }

/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; border: none; background: none; padding: 4px; }
.hamburger span { display: block; width: 26px; height: 1.5px; background: #fff; transition: var(--trans); transform-origin: center; }
#nav.solid   .hamburger span,
#nav.always-solid .hamburger span { background: var(--dark); }
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile overlay */
#mobileMenu {
    position: fixed; inset: 0; background: var(--dark); z-index: 800;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2rem; opacity: 0; pointer-events: none;
    transition: opacity .38s ease;
}
#mobileMenu.open { opacity: 1; pointer-events: all; }
#mobileMenu a {
    font-family: var(--serif); font-size: clamp(1.9rem, 8vw, 2.7rem);
    font-weight: 300; color: #fff; letter-spacing: .04em; transition: color .3s;
}
#mobileMenu a:hover { color: var(--gold); }
.mob-div { width: 38px; height: 1px; background: rgba(201,168,76,.35); }

/* ════════════════════════════════════════════════
   PAGE HERO (non-home pages)
   ════════════════════════════════════════════════ */
.page-hero {
    height: 42vh; min-height: 320px;
    background-size: cover; background-position: center center;
    position: relative; display: flex; align-items: flex-end;
    padding-bottom: 4rem; padding-left: 5vw; padding-right: 5vw;
}
.page-hero::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.4) 100%);
}
.page-hero-content {
    position: relative; z-index: 2; color: #fff;
    max-width: 1260px; margin: 0 auto; width: 100%;
}
.page-hero-eyebrow {
    font-size: .67rem; font-weight: 500; letter-spacing: .32em;
    text-transform: uppercase; color: var(--gold-light); margin-bottom: .6rem;
}
.page-hero-title {
    font-family: var(--serif);
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    font-weight: 300; line-height: 1;
}
.page-hero-title em { font-style: italic; color: var(--gold-light); }

/* ════════════════════════════════════════════════
   TICKER STRIP
   ════════════════════════════════════════════════ */
.ticker { background: var(--dark); padding: 1.25rem 0; overflow: hidden; }
.ticker-track {
    display: flex; gap: 3.2rem; white-space: nowrap;
    animation: ticker 26s linear infinite;
}
.ticker-item {
    font-family: var(--serif); font-style: italic;
    font-size: 1.02rem; color: var(--gold); flex-shrink: 0;
}
.ticker-dot { color: rgba(201,168,76,.35); margin: 0 .7rem; }

/* ════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════ */
footer { background: #0f0f0f; padding: 4rem 5vw 2.5rem; text-align: center; }
.footer-logo { height: 62px; margin: 0 auto 1.8rem; opacity: .8; }
.footer-rule { width: 50px; height: 1px; background: var(--gold-grad); background-size: 200%; margin: 0 auto 1.8rem; border: none; }
.footer-nav { display: flex; gap: 2rem; justify-content: center; list-style: none; flex-wrap: wrap; margin-bottom: 1.8rem; }
.footer-nav a { font-size: .65rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.35); transition: color .3s; }
.footer-nav a:hover { color: var(--gold); }
.footer-sep { width: 1px; height: 14px; background: rgba(255,255,255,.12); margin: auto; }
.footer-social { display: flex; gap: .7rem; justify-content: center; margin-bottom: 2rem; }
.footer-soc-btn {
    width: 40px; height: 40px; border: 1.5px solid rgba(201,168,76,.3);
    display: flex; align-items: center; justify-content: center;
    font-size: .66rem; font-weight: 600; color: var(--gold);
    transition: var(--trans);
}
.footer-soc-btn:hover { background: var(--gold); color: #fff; border-color: var(--gold); }
.footer-copy { font-size: .68rem; color: rgba(255,255,255,.18); font-weight: 300; margin-bottom: .5rem; }
.footer-credit {
    font-size: .64rem; color: rgba(255,255,255,.22); font-weight: 300;
}
.footer-credit a { color: var(--gold-dark); transition: color .3s; }
.footer-credit a:hover { color: var(--gold); }

/* ════════════════════════════════════════════════
   BOOKING POPUP MODAL
   ════════════════════════════════════════════════ */
#bookingPopup {
    display: none; position: fixed; inset: 0; z-index: 1500;
    background: rgba(0,0,0,.72); backdrop-filter: blur(6px);
    align-items: center; justify-content: center;
    padding: 1.5rem;
}
#bookingPopup.open { display: flex; }

.popup-box {
    background: var(--dark); max-width: 560px; width: 100%;
    position: relative; overflow: hidden;
    animation: popIn .38s cubic-bezier(.34,1.56,.64,1) forwards;
}
.popup-close {
    position: absolute; top: 1.1rem; right: 1.3rem; background: none;
    border: none; color: rgba(255,255,255,.5); font-size: 1.5rem;
    cursor: pointer; line-height: 1; z-index: 2; transition: color .2s;
}
.popup-close:hover { color: var(--gold); }
.popup-map { width: 100%; height: 200px; display: block; border: none; filter: grayscale(30%); }
.popup-body { padding: 2rem 2.2rem 2.4rem; }
.popup-label { color: var(--gold); font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 600; margin-bottom: 1rem; }
.popup-title {
    font-family: var(--serif); font-size: 1.75rem; font-weight: 300;
    color: #fff; margin-bottom: 1.6rem; line-height: 1.2;
}
.popup-title em { font-style: italic; color: var(--gold-light); }
.popup-contacts { display: flex; flex-direction: column; gap: 1.1rem; }
.popup-contact-row { display: flex; align-items: center; gap: 1.1rem; }
.popup-icon {
    width: 42px; height: 42px; flex-shrink: 0;
    border: 1.5px solid rgba(201,168,76,.3);
    display: flex; align-items: center; justify-content: center;
}
.popup-icon svg { width: 17px; height: 17px; }
.popup-row-lbl { font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: .18rem; }
.popup-row-val { font-size: .9rem; font-weight: 300; color: rgba(255,255,255,.72); }
.popup-row-val a { color: inherit; transition: color .3s; }
.popup-row-val a:hover { color: var(--gold); }

/* ════════════════════════════════════════════════
   KEYFRAMES
   ════════════════════════════════════════════════ */
@keyframes ticker  { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
@keyframes popIn   { from { opacity:0; transform:scale(.92) translateY(18px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes riseUp  { to   { opacity:1; transform:translateY(0); } }
@keyframes pulse   { 0%,100% { opacity:1; transform:scaleY(1); } 50% { opacity:.3; transform:scaleY(.48); } }

/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */
@media (max-width: 900px) {
    #nav { padding: 1.1rem 5vw; }
    #nav.solid, #nav.always-solid { padding: .8rem 5vw; }
    .nav-links, .nav-book { display: none; }
    .hamburger { display: flex; }
}
@media (max-width: 620px) {
    .popup-box { max-width: 100%; }
    .popup-map { height: 160px; }
}