/* ═══════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --black: #080808;
    --dark-1: #0F0F0F;
    --dark-2: #141414;
    --dark-3: #1C1C1C;
    --dark-4: #242424;
    --gold: #C9A84C;
    --gold-lt: #E8D5A3;
    --gold-dk: #8A6F30;
    /* AA-compliant gold for text on light backgrounds (>=4.5:1) */
    --gold-aa: #7A6029;
    --white: #FFFFFF;
    --ivory: #F5F0E8;
    --muted: #8E8E8E;
    --muted-lt: #B4B4B4;
    --border: rgba(201, 168, 76, .18);
    --border-md: rgba(201, 168, 76, .35);
    --border-lg: rgba(201, 168, 76, .55);
    --grad-gold: linear-gradient(135deg, #8A6F30 0%, #C9A84C 30%, #E8D5A3 50%, #C9A84C 70%, #8A6F30 100%);
    --grad-gold-h: linear-gradient(90deg, #8A6F30 0%, #C9A84C 35%, #E8D5A3 50%, #C9A84C 65%, #8A6F30 100%);
    --grad-dark: linear-gradient(180deg, var(--dark-2) 0%, var(--dark-1) 100%);
    --ff-display: 'Cormorant Garamond', Georgia, serif;
    --ff-script: 'Great Vibes', cursive;
    --ff-body: 'Montserrat', Arial, sans-serif;
    --nav-h: 76px;
    --ease: cubic-bezier(.25, .46, .45, .94);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 8px);
    -webkit-text-size-adjust: 100%;   /* stop iOS inflating text in landscape */
    text-size-adjust: 100%;
}
body {
    background: var(--black);
    color: var(--ivory);
    font-family: var(--ff-body);
    font-weight: 400;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Prevent accidental pull-to-refresh and improve scroll */
    overscroll-behavior: none;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { border: none; background: none; cursor: pointer; font-family: inherit; touch-action: manipulation; }

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--dark-1); }
::-webkit-scrollbar-thumb { background: var(--gold); }

/* ═══════════════════════════════════════════════════
   UTILITIES
═══════════════════════════════════════════════════ */
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }
.gold-text { background: var(--grad-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: 10px; font-weight: 700; letter-spacing: .35em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.eyebrow::before, .eyebrow::after { content: ''; display: block; width: 28px; height: 1px; background: var(--grad-gold-h); }
.eyebrow-center { justify-content: center; }
.h-display { font-family: var(--ff-display); font-size: clamp(38px, 5.5vw, 72px); font-weight: 300; line-height: 1.08; letter-spacing: -.01em; color: var(--white); }
.h-display em { font-style: italic; }
.section-sub { font-size: clamp(13px, 1.4vw, 15px); font-weight: 300; color: var(--muted); line-height: 1.85; max-width: 500px; }
.gold-rule { width: 52px; height: 1px; background: var(--grad-gold-h); margin: 20px 0; }
.gold-rule-center { margin: 20px auto; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 34px; font-family: var(--ff-body); font-size: 10px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; transition: all .3s var(--ease); position: relative; overflow: hidden; min-height: 48px; touch-action: manipulation; }
.btn-primary { background: var(--grad-gold); color: var(--black); }
.btn-primary::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.12); opacity: 0; transition: opacity .3s; }
.btn-primary:hover::after { opacity: 1; }
.btn-primary:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 44px rgba(201,168,76,.42); }
.btn-ghost { border: 1px solid var(--border-md); color: var(--gold); }
.btn-ghost:hover { border-color: var(--gold); background: rgba(201,168,76,.06); transform: translateY(-2px) scale(1.02); }

.rv { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in { opacity: 1; transform: translateY(0); }
.rv.d1 { transition-delay: .1s; }
.rv.d2 { transition-delay: .2s; }
.rv.d3 { transition-delay: .3s; }
.rv.d4 { transition-delay: .4s; }
.rv.d5 { transition-delay: .5s; }
.rv.d6 { transition-delay: .6s; }

/* ═══════════════════════════════════════════════════
   PAGE LOADER
═══════════════════════════════════════════════════ */
#loader { position: fixed; inset: 0; z-index: 9999; background: var(--black); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; transition: opacity .9s var(--ease), visibility .9s; }
#loader.out { opacity: 0; visibility: hidden; }
.ldr-brand { text-align: center; }
.ldr-name { font-family: var(--ff-script); font-size: clamp(52px, 12vw, 88px); background: var(--grad-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; opacity: 0; transform: translateY(16px); animation: ldrUp .8s var(--ease) .3s forwards; }
.ldr-sub { font-size: 9px; font-weight: 700; letter-spacing: .4em; text-transform: uppercase; color: var(--muted); margin-top: 6px; opacity: 0; animation: ldrUp .6s var(--ease) .9s forwards; }
.ldr-bar { width: 180px; height: 1px; background: var(--dark-4); overflow: hidden; }
.ldr-fill { height: 100%; width: 0; background: var(--grad-gold-h); animation: ldrFill 1.8s var(--ease) .4s forwards; }
@keyframes ldrUp { to { opacity: 1; transform: translateY(0); } }
@keyframes ldrFill { to { width: 100%; } }

/* ═══════════════════════════════════════════════════
   CUSTOM CURSOR
═══════════════════════════════════════════════════ */
@media (pointer:fine) {
    * { cursor: none !important; }
    #cur-dot, #cur-ring { position: fixed; pointer-events: none; z-index: 10000; border-radius: 50%; will-change: transform; transition: opacity .3s; }
    #cur-dot { width: 6px; height: 6px; background: var(--gold); top: -3px; left: -3px; }
    #cur-ring { width: 28px; height: 28px; border: 1px solid rgba(201,168,76,.45); top: -14px; left: -14px; transition: width .25s, height .25s, top .25s, left .25s, border-color .25s; }
    #cur-ring.big { width: 48px; height: 48px; top: -24px; left: -24px; border-color: var(--gold); }
}

/* ═══════════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════════ */
#nav { position: fixed; top: 0; left: 0; right: 0; z-index: 800; height: var(--nav-h); display: flex; align-items: center; transition: background .45s, border-color .45s, backdrop-filter .45s; padding-top: var(--safe-top); }
#nav.stuck { background: rgba(8,8,8,.93); backdrop-filter: blur(24px); border-bottom: 1px solid var(--border); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 16px; }
.nav-logo { display: flex; flex-direction: column; line-height: 1; flex-shrink: 0; }
.nav-logo-name { font-family: var(--ff-script); font-size: 30px; background: var(--grad-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.nav-logo-tag { font-size: 7.5px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-top: 3px; }
.nav-links { display: flex; align-items: center; gap: 40px; list-style: none; }
.nav-links a { font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ivory); position: relative; padding-bottom: 3px; transition: color .3s; touch-action: manipulation; }
.nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--grad-gold-h); transition: width .32s var(--ease); }
.nav-links a:hover { color: var(--gold); }
.nav-links a:hover::after { width: 100%; }
.nav-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.hamburger { display: none; flex-direction: column; gap: 5px; padding: 10px 8px; margin-right: -4px; touch-action: manipulation; min-height: 44px; min-width: 44px; align-items: center; justify-content: center; flex-shrink: 0; }
.hamburger span { display: block; width: 22px; height: 1.5px; background: var(--gold); transition: all .3s var(--ease); }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

#mob-menu { position: fixed; inset: 0; z-index: 799; background: var(--black); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 44px; opacity: 0; visibility: hidden; transition: all .4s var(--ease); padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); }
#mob-menu.open { opacity: 1; visibility: visible; }
#mob-menu a { font-family: var(--ff-display); font-size: clamp(30px, 8vw, 52px); font-weight: 300; color: var(--white); transition: color .3s; letter-spacing: .02em; min-height: 48px; display: flex; align-items: center; touch-action: manipulation; }
#mob-menu a:hover { color: var(--gold); }

/* ═══════════════════════════════════════════════════
   HERO — Full‑bleed background image, refined typography
═══════════════════════════════════════════════════ */
#hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 100% 60% at 75% 35%, rgba(201,168,76,.055) 0%, transparent 65%), radial-gradient(ellipse 55% 90% at 5% 50%, rgba(201,168,76,.035) 0%, transparent 55%), radial-gradient(ellipse 80% 50% at 50% 100%, rgba(201,168,76,.025) 0%, transparent 60%), var(--black); }
.hero-bg::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(201,168,76,.12) 1px, transparent 1px); background-size: 52px 52px; }
.hero-bg::after { content: ''; position: absolute; top: -10%; right: 25%; width: 1px; height: 140%; background: linear-gradient(180deg, transparent 0%, rgba(201,168,76,.25) 30%, rgba(201,168,76,.12) 70%, transparent 100%); transform: rotate(-18deg); transform-origin: top center; }

/* ── Full‑width hero image — covers entire hero section ── */
.hero-img-wrap { position: absolute; right: 0; top: 0; bottom: 0; width: 100%; overflow: hidden; }
.hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: .30; filter: saturate(.55) brightness(.95); will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
/* Refined fade overlay — protects text readability while revealing more of the image */
.hero-img-fade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--black) 0%, rgba(8,8,8,.88) 18%, rgba(8,8,8,.55) 42%, rgba(8,8,8,.22) 68%, rgba(8,8,8,.04) 100%); }

.hero-content { position: relative; z-index: 2; padding-top: calc(var(--nav-h) + 20px); padding-bottom: 80px; max-width: 680px; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 9.5px; font-weight: 700; letter-spacing: .38em; text-transform: uppercase; color: var(--gold); margin-bottom: 28px; opacity: 0; animation: rvUp .6s var(--ease) .25s forwards; }
.hero-eyebrow::before { content: ''; width: 36px; height: 1px; background: var(--grad-gold-h); }

/* Refined hero heading — more breathing space, elegant line‑height */
.hero-h1 { font-family: var(--ff-display); font-size: clamp(46px, 7.5vw, 100px); font-weight: 300; line-height: 1.06; letter-spacing: -.012em; color: var(--white); margin-bottom: 32px; }
.hero-h1 .line { display: block; overflow: hidden; }
.hero-h1 .li { display: block; transform: translateY(110%); animation: lineUp .9s var(--ease) forwards; }
.hero-h1 .line:nth-child(1) .li { animation-delay: .45s; }
.hero-h1 .line:nth-child(2) .li { animation-delay: .6s; }
.hero-h1 .line:nth-child(3) .li { animation-delay: .75s; }

/* Improved paragraph readability */
.hero-desc { font-size: clamp(13.5px,1.5vw,15px); font-weight: 300; color: var(--muted-lt); line-height: 2.0; max-width: 460px; margin-bottom: 44px; opacity: 0; animation: rvUp .6s var(--ease) 1.0s forwards; }
.hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; opacity: 0; animation: rvUp .6s var(--ease) 1.2s forwards; }
.scroll-cue { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; animation: rvUp .6s var(--ease) 1.8s forwards; }
.scroll-cue span { font-size: 8.5px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.scroll-mouse { width: 20px; height: 32px; border: 1px solid var(--border-md); border-radius: 10px; position: relative; }
.scroll-mouse::after { content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 2px; height: 7px; background: var(--gold); border-radius: 1px; animation: scrollPulse 1.6s ease infinite; }

@keyframes lineUp { to { transform: translateY(0); } }
@keyframes rvUp { to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: translateY(22px); } }
@keyframes scrollPulse { 0%,100% { opacity: 1; transform: translateX(-50%) translateY(0) } 60% { opacity: 0; transform: translateX(-50%) translateY(12px) } }

/* ═══════════════════════════════════════════════════
   MARQUEE TICKER
═══════════════════════════════════════════════════ */
.marquee-strip { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--dark-2); padding: 16px 0; }
.marquee-track { display: flex; width: max-content; animation: marqRun 32s linear infinite; }
.marquee-strip:hover .marquee-track { animation-play-state: paused; }
.m-item { display: inline-flex; align-items: center; gap: 18px; padding: 0 36px; font-size: 10px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.m-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.m-item.hi { color: var(--gold); }
@keyframes marqRun { to { transform: translateX(-50%); } }

/* ═══════════════════════════════════════════════════
   SECTION COMMONS
═══════════════════════════════════════════════════ */
.section { padding: clamp(80px,10vw,140px) 0; }
.s-dark { background: var(--dark-2); }
.s-darker { background: var(--dark-1); }
.sh { margin-bottom: clamp(48px,7vw,80px); }
.sh-center { text-align: center; }
.sh-center .section-sub { margin: 0 auto; }
.sh-center .gold-rule { margin: 18px auto; }

/* ═══════════════════════════════════════════════════
   SERVICES
═══════════════════════════════════════════════════ */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.svc-card { display: block; background: var(--dark-3); padding: 36px 28px 32px; position: relative; overflow: hidden; transition: background .35s var(--ease), border-color .35s; border: 1px solid transparent; cursor: pointer; touch-action: manipulation; }
.svc-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--grad-gold); transform: scaleY(0); transform-origin: bottom; transition: transform .38s var(--ease); z-index: 2; }
.svc-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 110%, rgba(201,168,76,.06), transparent); opacity: 0; transition: opacity .35s; z-index: 1; }
.svc-card:hover { background: var(--dark-1); border-color: var(--border); }
.svc-card:hover::before { transform: scaleY(1); }
.svc-card:hover::after { opacity: 1; }
.svc-bg-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .38; z-index: 0; transition: opacity .4s var(--ease), transform .6s var(--ease); }
.svc-card:hover .svc-bg-img { opacity: .48; transform: scale(1.05); }
.svc-content { position: relative; z-index: 1; }
.svc-icon { width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 22px; transition: border-color .3s, transform .3s var(--ease-spring); }
.svc-card:hover .svc-icon { border-color: var(--gold); transform: scale(1.08) rotate(-3deg); }
.svc-name { font-family: var(--ff-display); font-size: 22px; font-weight: 400; color: var(--white); margin-bottom: 10px; letter-spacing: .01em; }
.svc-desc { font-size: 12.5px; color: var(--muted); line-height: 1.75; margin-bottom: 22px; }
.svc-price { font-family: var(--ff-display); font-size: 20px; font-weight: 400; background: var(--grad-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.svc-price span { font-family: var(--ff-body); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); -webkit-text-fill-color: var(--muted); }
.svc-arrow { position: absolute; bottom: 28px; right: 24px; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 13px; opacity: 0; transform: translateX(-8px); transition: all .3s var(--ease); }
.svc-card:hover .svc-arrow { opacity: 1; transform: translateX(0); }

/* ═══════════════════════════════════════════════════
   GALLERY
═══════════════════════════════════════════════════ */
.gal-tabs { display: flex; gap: 4px; background: var(--dark-3); border: 1px solid var(--border); padding: 4px; width: fit-content; margin: 0 auto 48px; }
.gal-tab { padding: 10px 28px; font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); cursor: pointer; transition: all .3s; min-height: 44px; touch-action: manipulation; }
.gal-tab.on { background: var(--grad-gold); color: var(--black); }
.ba-wrap { position: relative; max-width: 760px; margin: 0 auto; aspect-ratio: 4/3; overflow: hidden; user-select: none; cursor: ew-resize; touch-action: none; }
.ba-side { position: absolute; inset: 0; }
.ba-side img { width: 100%; height: 100%; object-fit: cover; }
.ba-after { clip-path: inset(0 50% 0 0); }
.ba-line-wrap { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 10; display: flex; flex-direction: column; align-items: center; }
.ba-line-el { width: 2px; flex: 1; background: var(--gold); }
.ba-handle { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; background: var(--grad-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--black); box-shadow: 0 0 24px rgba(201,168,76,.5); pointer-events: none; }
.ba-lbl { position: absolute; bottom: 18px; font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; padding: 5px 14px; background: rgba(0,0,0,.65); backdrop-filter: blur(6px); }
.ba-lbl.bl { left: 18px; color: var(--ivory); }
.ba-lbl.al { right: 18px; color: var(--gold); }

.gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 220px 220px; gap: 8px; }
.gi { position: relative; overflow: hidden; }
.gi img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gi:hover img { transform: scale(1.06); }
.gi:nth-child(1) { grid-column: 1; grid-row: 1/3; }
.gi-ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 55%); opacity: 0; transition: opacity .32s; display: flex; align-items: flex-end; padding: 20px; }
.gi:hover .gi-ov { opacity: 1; }
.gi-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }

/* ═══════════════════════════════════════════════════
   TESTIMONIALS – JS‑driven carousel
═══════════════════════════════════════════════════ */
.testi-viewport { overflow: hidden; position: relative; mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%); }
.testi-track { display: flex; gap: 24px; width: max-content; will-change: transform; }
.testi-card { flex: 0 0 380px; background: var(--dark-3); border: 1px solid var(--border); padding: 40px 32px 36px; position: relative; user-select: none; }
.tc-q { font-family: var(--ff-display); font-size: 72px; font-weight: 300; line-height: .6; display: block; margin-bottom: 20px; }
.tc-text { font-family: var(--ff-display); font-size: 17px; font-style: italic; font-weight: 300; color: var(--ivory); line-height: 1.75; margin-bottom: 28px; }
.tc-stars { display: flex; gap: 3px; margin-bottom: 20px; }
.tc-star { font-size: 12px; color: var(--gold); }
.tc-author { display: flex; align-items: center; gap: 14px; }
.tc-av { width: 42px; height: 42px; border-radius: 50%; background: var(--dark-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--ff-display); font-size: 17px; font-style: italic; color: var(--gold); }
.tc-name { font-size: 13px; font-weight: 600; color: var(--white); }
.tc-svc { font-size: 11px; color: var(--muted); margin-top: 3px; letter-spacing: .05em; }
.testi-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 44px; }
.tc-btn { width: 42px; height: 42px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 14px; cursor: pointer; transition: all .3s; min-height: 44px; min-width: 44px; touch-action: manipulation; }
.tc-btn:hover { border-color: var(--gold); background: rgba(201,168,76,.08); }
.tc-dots { display: flex; gap: 6px; }
.tc-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--dark-4); border: 1px solid var(--border); cursor: pointer; transition: all .3s; }
.tc-dot.on { background: var(--gold); border-color: var(--gold); width: 18px; border-radius: 3px; }

/* ═══════════════════════════════════════════════════
   BOOKING
═══════════════════════════════════════════════════ */
.book-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(48px,7vw,88px); align-items: start; }
.book-info p { font-size: 14px; font-weight: 300; color: var(--muted); line-height: 1.85; margin-bottom: 32px; }
.book-detail { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--border); }
.bd-icon { font-size: 20px; color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.bd-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 5px; }
.bd-val { font-size: 13.5px; color: var(--ivory); line-height: 1.65; }
.bd-val a { transition: color .3s; }
.bd-val a:hover { color: var(--gold); }
.book-form { display: flex; flex-direction: column; gap: 18px; }
.fg { display: flex; flex-direction: column; gap: 7px; }
.fg label { font-size: 9px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.fc { background: var(--dark-3); border: 1px solid var(--border); color: var(--ivory); padding: 14px 18px; font-family: var(--ff-body); font-size: 16px; /* prevent zoom on focus */ outline: none; transition: border-color .3s; width: 100%; -webkit-appearance: none; appearance: none; min-height: 48px; touch-action: manipulation; }
.fc::placeholder { color: var(--muted); }
.fc:focus { border-color: var(--gold); }
select.fc { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23C9A84C' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; cursor: pointer; }
select.fc option { background: var(--dark-3); color: var(--ivory); }
select.fc optgroup { font-weight: 700; font-style: normal; color: var(--gold); background: var(--dark-2); font-family: var(--ff-body); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
textarea.fc { resize: vertical; min-height: 88px; }
.book-note { font-size: 11px; color: var(--muted); line-height: 1.65; }
.book-note strong { color: var(--gold); }

/* ═══════════════════════════════════════════════════
   INSTAGRAM FEED
═══════════════════════════════════════════════════ */
.insta-scroll-wrap { overflow: hidden; position: relative; cursor: grab; touch-action: pan-y; margin-bottom: 36px; mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%); }
.insta-scroll-wrap.dragging { cursor: grabbing; }
.insta-track { display: flex; gap: 6px; width: max-content; will-change: transform; }
.insta-item { flex: 0 0 190px; aspect-ratio: 1; position: relative; overflow: hidden; user-select: none; }
.insta-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); pointer-events: none; -webkit-user-drag: none; }
.insta-item:hover img { transform: scale(1.1); }
.ig-ov { position: absolute; inset: 0; background: rgba(8,8,8,.55); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; font-size: 22px; color: var(--white); }
.insta-item:hover .ig-ov { opacity: 1; }
.insta-footer { text-align: center; }
.insta-handle { font-family: var(--ff-display); font-size: 22px; font-style: italic; color: var(--gold); display: block; margin-bottom: 16px; }

/* ═══════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════ */
.faq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,72px); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 0; cursor: pointer; min-height: 48px; touch-action: manipulation; width: 100%; background: none; border: none; text-align: left; color: inherit; font-family: inherit; }
.faq-q-text { font-family: var(--ff-display); font-size: 19px; font-weight: 400; color: var(--white); transition: color .3s; }
.faq-item.open .faq-q-text { color: var(--gold); }
.faq-ico { flex-shrink: 0; width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 13px; transition: all .3s var(--ease); }
.faq-item.open .faq-ico { background: var(--gold); color: var(--black); transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .42s var(--ease); }
.faq-item.open .faq-a { max-height: 220px; }
.faq-a-inner { font-size: 13.5px; color: var(--muted); line-height: 1.8; padding-bottom: 22px; }

/* ═══════════════════════════════════════════════════
   CONTACT + MAP
═══════════════════════════════════════════════════ */
.contact-wrap { display: grid; grid-template-columns: 1fr 1.3fr; border: 1px solid var(--border); }
.contact-info { padding: clamp(36px,5vw,64px); background: var(--dark-3); }
.ci-item { display: flex; gap: 16px; margin-bottom: 28px; }
.ci-icon { font-size: 18px; color: var(--gold); flex-shrink: 0; margin-top: 3px; }
.ci-lbl { font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 5px; }
.ci-val { font-size: 13.5px; color: var(--ivory); line-height: 1.7; }
.ci-val a { transition: color .3s; }
.ci-val a:hover { color: var(--gold); }
.hours-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.hours-table td { padding: 5px 0; font-size: 12.5px; color: var(--muted); }
.hours-table td:first-child { color: var(--ivory); font-weight: 500; }
.hours-table tr.today td { color: var(--gold); }
.contact-map { min-height: 480px; position: relative; }
.contact-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; filter: invert(95%) hue-rotate(180deg) brightness(90%) contrast(88%) saturate(.7); }

/* ═══════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════ */
#footer { background: var(--dark-1); border-top: 1px solid var(--border); padding-bottom: var(--safe-bottom); }
.footer-main { padding: clamp(64px,8vw,100px) 0 56px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(36px,5vw,64px); }
.ft-logo-name { font-family: var(--ff-script); font-size: 42px; background: var(--grad-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: block; margin-bottom: 14px; }
.ft-about { font-size: 13px; color: var(--muted); line-height: 1.85; margin-bottom: 24px; }
.ft-social { display: flex; gap: 10px; }
.ft-soc { width: 34px; height: 34px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--muted); transition: all .3s; min-height: 44px; min-width: 44px; touch-action: manipulation; }
.ft-soc:hover { border-color: var(--gold); color: var(--gold); }
.ft-col-title { font-size: 9px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; }
.ft-links { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.ft-links a { font-size: 13px; color: var(--muted); transition: color .3s; padding: 4px 0; display: inline-block; touch-action: manipulation; }
.ft-links a:hover { color: var(--ivory); }
.footer-bottom { border-top: 1px solid var(--border); padding: 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fb-copy { font-size: 12px; color: var(--muted); }
.fb-copy span { color: var(--gold); }
.fb-links { display: flex; gap: 22px; list-style: none; }
.fb-links a { font-size: 12px; color: var(--muted); transition: color .3s; padding: 4px 0; display: inline-block; touch-action: manipulation; }
.fb-links a:hover { color: var(--gold); }

/* ═══════════════════════════════════════════════════
   FLOATING ACTION BUTTONS — consistent sizing & premium style
═══════════════════════════════════════════════════ */
.float-stack { position: fixed; bottom: calc(26px + var(--safe-bottom)); right: calc(26px + var(--safe-right)); z-index: 700; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.wa-float { display: flex; align-items: center; gap: 12px; }
.wa-tip { background: var(--dark-3); border: 1px solid var(--border); padding: 8px 16px; font-size: 11.5px; font-weight: 600; color: var(--ivory); white-space: nowrap; opacity: 0; transform: translateX(8px); transition: all .3s var(--ease); pointer-events: none; }
.wa-float:hover .wa-tip { opacity: 1; transform: translateX(0); }

/* Base floating button — shared by all three, with touch-action for mobile */
.wa-btn { position: relative; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 18px rgba(37,211,102,.4); transition: transform .3s var(--ease-spring), box-shadow .3s; min-height: 56px; min-width: 56px; touch-action: manipulation; overflow: hidden; user-select: none; -webkit-user-select: none; }
.wa-btn:hover { transform: scale(1.1); box-shadow: 0 8px 28px rgba(37,211,102,.5); }
.wa-btn svg { width: 26px; height: 26px; fill: #fff; position: relative; z-index: 1; }
.wa-pulse { position: absolute; inset: 0; border-radius: 50%; background: #25D366; animation: waPulse 2.2s ease-out infinite; }
@keyframes waPulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.9); opacity: 0; } }

/* ── GURU AI Chatbot button — logo fills the circular area perfectly ── */
.chatbot-btn { background: var(--grad-gold); box-shadow: 0 4px 18px rgba(201,168,76,.35); animation: chatBounce 3s ease-in-out infinite; overflow: hidden; }
.chatbot-btn:hover { animation-play-state: paused; box-shadow: 0 8px 28px rgba(201,168,76,.5); }
/* Logo image: fills the button, object-fit:cover crops the square to a perfect circle */
.chatbot-btn img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
@keyframes chatBounce { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-8px); } 60% { transform: translateY(0); } 80% { transform: translateY(-4px); } }

/* ── Call button — consistent with the stack ── */
.call-btn { background: var(--dark-3); border: 1px solid var(--border-lg); box-shadow: 0 4px 18px rgba(201,168,76,.22); animation: none; }
.call-btn:hover { box-shadow: 0 8px 28px rgba(201,168,76,.32); }
.call-btn svg { width: 24px; height: 24px; fill: var(--gold); position: relative; z-index: 1; }
.call-pulse { position: absolute; inset: 0; border-radius: 50%; background: var(--gold); animation: callSoftPulse 3s ease-out infinite; }
@keyframes callSoftPulse { 0% { transform: scale(1); opacity: .18; } 100% { transform: scale(1.5); opacity: 0; } }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media (max-width:1100px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-main { grid-template-columns: 1fr 1fr; }
    .testi-card { flex: 0 0 340px; }
}
@media (max-width:900px) {
    .book-grid { grid-template-columns: 1fr; }
    .contact-wrap { grid-template-columns: 1fr; }
    .contact-map { min-height: 320px; }
    .testi-card { flex: 0 0 300px; }
    .faq-cols { grid-template-columns: 1fr; }
}
@media (max-width:768px) {
    :root { --nav-h: 64px; }
    .nav-links, .nav-right .btn { display: none; }
    .hamburger { display: flex; }
    .nav-inner { padding-left: 0; padding-right: 0; gap: 8px; }
    .nav-logo { margin-left: 0; padding-left: 0; }
    .nav-logo-name { font-size: 26px; }
    .nav-logo-tag { font-size: 7px; }
    .hamburger { margin-right: 0; padding-right: 6px; min-height: 44px; min-width: 44px; }

    /* Hero — full‑width image on mobile with stronger overlay for readability */
    .hero-img-wrap { width: 100%; }
    .hero-img-fade { background: linear-gradient(180deg, rgba(8,8,8,.78) 0%, rgba(8,8,8,.55) 35%, rgba(8,8,8,.4) 65%, rgba(8,8,8,.55) 100%); }
    .scroll-cue { display: none; }
    .hero-content { padding-top: calc(var(--nav-h) + 16px); padding-bottom: 60px; max-width: 100%; }
    .hero-h1 { font-size: clamp(38px,10vw,56px); margin-bottom: 20px; }
    .hero-desc { max-width: 100%; margin-bottom: 28px; }
    .hero-actions { gap: 12px; }

    .services-grid { grid-template-columns: 1fr; gap: 2px; }
    .gal-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .gi:nth-child(1) { grid-column: auto; grid-row: auto; }
    .testi-card { flex: 0 0 85vw; }
    .footer-main { grid-template-columns: 1fr; gap: 28px; padding-bottom: 36px; }
    .insta-item { flex: 0 0 140px; }
    .testi-viewport { mask-image: linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%); }
    .ba-handle { width: 38px; height: 38px; font-size: 13px; }

    /* Floating buttons — slightly smaller on mobile, same proportions */
    .float-stack { bottom: calc(16px + var(--safe-bottom)); right: calc(16px + var(--safe-right)); gap: 12px; }
    .wa-btn { width: 48px; height: 48px; min-height: 48px; min-width: 48px; }
    .wa-btn svg { width: 22px; height: 22px; }
    .call-btn svg { width: 20px; height: 20px; }
    /* Chatbot logo scales automatically via 100% width/height */
}
@media (max-width:520px) {
    .hero-actions { flex-direction: column; width: 100%; }
    .hero-actions .btn { width: 100%; justify-content: center; }
    .fg-row { grid-template-columns: 1fr; }
    .gal-grid { grid-template-columns: 1fr; }
    .gi:nth-child(n+4) { display: none; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .fb-links { justify-content: center; }
    .testi-card { flex: 0 0 88vw; padding: 28px 22px 28px; }
    .tc-text { font-size: 15px; }
    .tc-q { font-size: 56px; }
    .insta-item { flex: 0 0 120px; }
    .book-form { gap: 14px; }
    .fc { padding: 12px 14px; font-size: 16px; min-height: 44px; }
}
@media (max-width:380px) {
    .nav-logo-name { font-size: 22px; }
    .nav-logo-tag { font-size: 6px; letter-spacing: .2em; }
    .hamburger { min-height: 40px; min-width: 40px; padding: 8px 4px; }
    .hamburger span { width: 20px; }
    .hero-h1 { font-size: clamp(32px,11vw,44px); }
    .hero-desc { font-size: 13px; }
    .btn { padding: 13px 20px; font-size: 9px; letter-spacing: .2em; min-height: 44px; }
}
@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* ═══════════════════════════════════════════════════
   ACCESSIBILITY & FORM FEEDBACK
═══════════════════════════════════════════════════ */
.skip-link { position: fixed; top: -60px; left: 16px; z-index: 10001; background: var(--grad-gold); color: var(--black); padding: 10px 22px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; transition: top .25s var(--ease); }
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.nav-links a.active { color: var(--gold); }
.nav-links a.active::after { width: 100%; }

.field-err { font-size: 11px; color: #E06A5A; line-height: 1.5; min-height: 0; display: block; }
.field-err:empty { display: none; }
.fc.error { border-color: #E06A5A; }
.fc[aria-invalid="true"]:focus { border-color: #E06A5A; }

.form-status { font-size: 12.5px; line-height: 1.6; margin-top: 4px; min-height: 0; }
.form-status.ok { color: var(--gold-lt); }
.form-status.err { color: #E06A5A; }
.form-status:empty { display: none; }

.btn-submit:disabled { opacity: .65; cursor: wait; transform: none; box-shadow: none; }

/* Honeypot — visually removed, still in the DOM for bots */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ═══════════════════════════════════════════════════
   GURU AI CHATBOT PANEL — mobile-hardened
   • Fullscreen on mobile: no dvh math, no keyboard glitches
   • visualViewport-aware: --vv-bottom is set by JS when keyboard opens
   • No visibility transition: only opacity + pointer-events flip
   • contain: prevents layout thrashing from siblings
═══════════════════════════════════════════════════ */
#guru-panel {
    position: fixed;
    bottom: calc(96px + var(--safe-bottom));
    right: calc(26px + var(--safe-right));
    z-index: 900;
    width: min(390px, calc(100vw - 32px));
    height: min(600px, calc(100vh - 140px));
    background: var(--dark-1);
    border: 1px solid var(--border-md);
    box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(201,168,76,.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px) scale(.98);
    transition: opacity .28s var(--ease), transform .28s var(--ease);
    contain: layout paint style;
    will-change: transform, opacity;
    isolation: isolate;
}
#guru-panel.open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }

.guru-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--dark-2); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.guru-head-logo { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 1px solid var(--border-md); flex-shrink: 0; }
.guru-head-logo img { width: 100%; height: 100%; object-fit: cover; }
.guru-head-title { min-width: 0; flex: 1; }
.guru-head-name { font-family: var(--ff-display); font-size: 19px; color: var(--white); line-height: 1.1; }
.guru-head-sub { font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.guru-online { width: 6px; height: 6px; border-radius: 50%; background: #4CAF50; box-shadow: 0 0 6px rgba(76,175,80,.8); }
.guru-close { margin-left: auto; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 50%; color: var(--muted-lt); font-size: 15px; display: flex; align-items: center; justify-content: center; transition: border-color .25s, color .25s; flex-shrink: 0; background: transparent; cursor: pointer; }
.guru-close:hover, .guru-close:focus-visible { border-color: var(--gold); color: var(--gold); }

.guru-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}
.guru-body::-webkit-scrollbar { width: 3px; }
.guru-body::-webkit-scrollbar-thumb { background: var(--border-md); }

.guru-msg { max-width: 84%; padding: 12px 15px; font-size: 13px; line-height: 1.65; white-space: pre-line; word-break: break-word; }
.guru-msg.bot { align-self: flex-start; background: var(--dark-3); border: 1px solid var(--border); color: var(--ivory); border-radius: 2px 14px 14px 14px; }
.guru-msg.user { align-self: flex-end; background: var(--grad-gold); color: var(--black); font-weight: 500; border-radius: 14px 2px 14px 14px; }
.guru-msg.typing { display: inline-flex; gap: 5px; align-items: center; padding: 14px 18px; }
.guru-msg.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: guruDot 1.2s ease-in-out infinite; }
.guru-msg.typing span:nth-child(2) { animation-delay: .15s; }
.guru-msg.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes guruDot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

.guru-chips { display: flex; flex-wrap: wrap; gap: 7px; align-self: flex-start; max-width: 100%; }
.guru-chip { padding: 8px 15px; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--gold); background: transparent; border: 1px solid var(--border-md); border-radius: 20px; cursor: pointer; transition: background .25s, border-color .25s; min-height: 36px; touch-action: manipulation; font-family: inherit; }
.guru-chip:hover, .guru-chip:focus-visible { background: rgba(201,168,76,.1); border-color: var(--gold); }

.guru-foot { display: flex; gap: 10px; padding: 14px 16px calc(14px + var(--safe-bottom)); background: var(--dark-2); border-top: 1px solid var(--border); flex-shrink: 0; margin: 0; }
.guru-input { flex: 1; min-width: 0; background: var(--dark-3); border: 1px solid var(--border); color: var(--ivory); padding: 12px 16px; font-family: var(--ff-body); font-size: 16px; outline: none; border-radius: 24px; transition: border-color .3s; min-height: 46px; -webkit-appearance: none; appearance: none; }
.guru-input:focus { border-color: var(--gold); }
.guru-input::placeholder { color: var(--muted); }
.guru-send { width: 46px; height: 46px; border-radius: 50%; background: var(--grad-gold); color: var(--black); border: none; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .25s var(--ease-spring), opacity .25s; touch-action: manipulation; cursor: pointer; }
.guru-send:hover { transform: scale(1.08); }
.guru-send:disabled { opacity: .5; transform: none; cursor: default; }
.guru-send svg { width: 19px; height: 19px; fill: var(--black); }

/* Mobile — fullscreen with visualViewport-anchored bottom for keyboard safety */
@media (max-width: 768px) {
    #guru-panel {
        top: 0;
        left: 0;
        right: 0;
        bottom: var(--vv-bottom, 0px);
        width: 100vw;
        width: 100dvw;
        height: auto;
        border: none;
        border-radius: 0;
        transform: translateY(24px);
    }
    #guru-panel.open { transform: translateY(0); }
    .guru-head { padding: calc(14px + var(--safe-top)) 18px 14px; }
    .guru-body { padding: 16px 14px; }
    .guru-msg { font-size: 14px; }
    .guru-chip { font-size: 12px; padding: 9px 16px; }
}

/* ═══════════════════════════════════════════════════
   GURU HINT BUBBLE
   Small notification above the chatbot button. Fades in
   ~2s after load, dismisses on scroll or after 6s.
═══════════════════════════════════════════════════ */
#guru-hint {
    position: fixed;
    bottom: calc(96px + var(--safe-bottom));
    right: calc(28px + var(--safe-right));
    z-index: 750;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 44px 12px 18px;
    background: linear-gradient(135deg, var(--dark-2) 0%, var(--dark-1) 100%);
    border: 1px solid var(--border-md);
    box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(201,168,76,.08);
    font-size: 12px;
    font-weight: 500;
    color: var(--ivory);
    letter-spacing: .01em;
    max-width: 260px;
    opacity: 0;
    transform: translateY(10px) scale(.94);
    transition: opacity .5s var(--ease), transform .5s var(--ease-spring), visibility .5s;
    visibility: hidden;
    pointer-events: none;
    border-radius: 4px;
}
#guru-hint.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; }
#guru-hint::before {
    content: '';
    position: absolute;
    right: 20px;
    bottom: -7px;
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, transparent 50%, var(--dark-1) 50%);
    border-right: 1px solid var(--border-md);
    border-bottom: 1px solid var(--border-md);
    transform: rotate(45deg);
}
.hint-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); flex-shrink: 0; animation: hintPulse 1.6s ease-in-out infinite; }
@keyframes hintPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: .6; } }
.hint-text { line-height: 1.5; }
.hint-text strong { color: var(--gold); font-weight: 600; }
.hint-close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 14px;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    transition: color .2s;
}
.hint-close:hover { color: var(--gold); }

@media (max-width: 520px) {
    #guru-hint { bottom: calc(80px + var(--safe-bottom)); right: calc(16px + var(--safe-right)); max-width: calc(100vw - 88px); font-size: 11.5px; padding: 11px 40px 11px 14px; }
}

/* ═══════════════════════════════════════════════════
   THEME TOGGLE BUTTON
═══════════════════════════════════════════════════ */
.theme-toggle {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-md);
    border-radius: 50%;
    color: var(--gold);
    transition: background .3s, border-color .3s, transform .3s var(--ease-spring);
    touch-action: manipulation;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0;
}
.theme-toggle:hover, .theme-toggle:focus-visible { background: rgba(201,168,76,.08); border-color: var(--gold); transform: rotate(-15deg); }
.theme-toggle svg { width: 18px; height: 18px; fill: currentColor; transition: opacity .3s; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html.theme-light .theme-toggle .icon-sun { display: block; }
html.theme-light .theme-toggle .icon-moon { display: none; }

@media (max-width: 768px) {
    .theme-toggle { width: 40px; height: 40px; }
    .theme-toggle svg { width: 17px; height: 17px; }
}

/* ═══════════════════════════════════════════════════
   LIGHT THEME
   Same design tokens, remapped. WhatsApp button stays green.
═══════════════════════════════════════════════════ */
html.theme-light {
    --black:    #F7F3EA;   /* warm cream — becomes the page background */
    --dark-1:   #F1EBDD;
    --dark-2:   #EBE3D0;
    --dark-3:   #E4DAC1;
    --dark-4:   #D9CDAE;
    --white:    #0B0A08;   /* body headings — deep charcoal-ink */
    --ivory:    #1A1613;
    --muted:    #6E6558;
    --muted-lt: #4E4741;
    --border:    rgba(138, 111, 48, .28);
    --border-md: rgba(138, 111, 48, .45);
    --border-lg: rgba(138, 111, 48, .65);
    --grad-dark: linear-gradient(180deg, #EFE7D3 0%, #F7F3EA 100%);
    color-scheme: light;
}
html.theme-light body { background: var(--black); }
html.theme-light ::-webkit-scrollbar-track { background: var(--dark-1); }
html.theme-light #nav.stuck { background: rgba(247,243,234,.94); }
html.theme-light .hero-img-wrap img { opacity: .38; filter: saturate(.8) brightness(.9) contrast(1.02); }
html.theme-light .hero-img-fade { background: linear-gradient(90deg, var(--black) 0%, rgba(247,243,234,.86) 18%, rgba(247,243,234,.55) 42%, rgba(247,243,234,.22) 68%, rgba(247,243,234,.04) 100%); }
html.theme-light .svc-bg-img { opacity: .22; }
html.theme-light .svc-card:hover .svc-bg-img { opacity: .32; }
html.theme-light .contact-map iframe { filter: none; }
html.theme-light .h-display,
html.theme-light .hero-h1 { color: var(--white); }
html.theme-light .hero-h1 .line .li,
html.theme-light .h-display em { color: var(--white); }
html.theme-light .hero-desc { color: var(--muted-lt); }
html.theme-light .footer-main .ft-about,
html.theme-light .book-note,
html.theme-light .section-sub { color: var(--muted-lt); }
/* Mobile menu overlay: keep it opaque on the current theme */
html.theme-light #mob-menu { background: var(--black); }
/* Loader */
html.theme-light #loader { background: var(--black); }
/* Testimonials avatars — slightly stronger border on light bg */
html.theme-light .tc-av { background: var(--dark-2); }
/* Instagram overlay — invert */
html.theme-light .ig-ov { background: rgba(247,243,234,.55); color: var(--gold-aa); }
/* WhatsApp button — force original green branding regardless of theme */
html.theme-light .wa-btn { color: #fff; }
/* Chatbot input readability in light mode */
html.theme-light .guru-input,
html.theme-light .fc { background: var(--dark-2); color: var(--ivory); }
html.theme-light .guru-msg.bot { color: var(--ivory); background: var(--dark-2); }
/* Marquee readable in light theme */
html.theme-light .marquee-strip { background: var(--dark-1); }
html.theme-light .m-item { color: var(--muted-lt); }
html.theme-light .m-item.hi { color: var(--gold-aa); }
/* Nav logo tag & eyebrows stay gold */

/* ═══════════════════════════════════════════════════
   GALLERY — universal masonry-style responsive grid
   Any image, any aspect ratio, always looks balanced.
   No stretching, no distortion. Uses grid auto-fit.
═══════════════════════════════════════════════════ */
.gal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-auto-rows: 260px;
    grid-auto-flow: dense;
    gap: 8px;
}
.gal-grid .gi { position: relative; overflow: hidden; }
.gal-grid .gi img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .6s var(--ease); }
.gal-grid .gi:hover img { transform: scale(1.06); }
/* Optional per-image emphasis — add class="gi tall" or class="gi wide" in HTML */
.gal-grid .gi.tall { grid-row: span 2; }
.gal-grid .gi.wide { grid-column: span 2; }
/* Auto-emphasise the first tile as tall on wider screens for editorial rhythm */
@media (min-width: 900px) {
    .gal-grid .gi:first-child { grid-row: span 2; }
}
/* Mobile tightening */
@media (max-width: 520px) {
    .gal-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; gap: 6px; }
    .gal-grid .gi.wide { grid-column: span 2; }
    .gal-grid .gi:first-child { grid-row: auto; grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 380px) {
    .gal-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
    .gal-grid .gi.wide, .gal-grid .gi:first-child { grid-column: auto; }
}

/* ═══════════════════════════════════════════════════
   FLOATING BUTTON HARDENING
   • GPU layer to prevent scroll-flicker on iOS
   • Suspend attention-bounce animation while user scrolls
═══════════════════════════════════════════════════ */
.float-stack {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
}
.wa-btn {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
/* When body has this class (set by JS on scroll), pause the bounce so
   the button never jumps mid-scroll. */
body.is-scrolling .chatbot-btn { animation-play-state: paused; }
body.is-scrolling .call-pulse,
body.is-scrolling .wa-pulse { animation-play-state: paused; }

/* Reduce the bounce amplitude — a smaller move never looks like a bug */
@keyframes chatBounceSubtle { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-4px); } 70% { transform: translateY(0); } }
.chatbot-btn { animation-name: chatBounceSubtle; }

/* ═══════════════════════════════════════════════════
   FOOTER REFINEMENTS — The Sarita's Hair N' Beauty Lounge
   Premium alignment + "Powered by" credit
═══════════════════════════════════════════════════ */
.ft-tagline {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--muted);
    margin: -8px 0 18px 2px;
}
.ft-brand .ft-logo-name { margin-bottom: 8px; }
.ft-contact { gap: 13px; }
.ft-plain { color: var(--muted); font-size: 13px; line-height: 1.75; }
.ft-hours { font-size: 12px; letter-spacing: .04em; }
.ft-note { font-size: 11px; color: var(--muted); }

/* Bottom bar: copyright · powered-by · legal links, balanced on all screens */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px 28px;
    flex-wrap: wrap;
}
.fb-powered {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 6px 0;
    display: inline-block;
    touch-action: manipulation;
    transition: color .3s;
    white-space: nowrap;
}
.fb-powered strong {
    font-weight: 700;
    background: var(--grad-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.fb-powered:hover { color: var(--ivory); }
.fb-powered:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 760px) {
    .footer-bottom { flex-direction: column; text-align: center; gap: 10px; }
    .fb-links { justify-content: center; }
    .ft-tagline { letter-spacing: .28em; }
}
html.theme-light .ft-plain,
html.theme-light .ft-note,
html.theme-light .fb-powered { color: var(--muted-lt); }
html.theme-light .fb-powered:hover { color: var(--gold-aa); }

/* ═══════════════════════════════════════════════════
   ENHANCEMENTS — v2
   1. Floating tooltip hit-area fix + WhatsApp glow
   2. GURU hint indicator (JS-positioned to the bot button)
   3. Mobile gallery + full-gallery modal
   4. Booking actions + success popup
   5. Responsive hardening
═══════════════════════════════════════════════════ */

/* ── 1. FLOATING BUTTONS: precise hover area ──────────
   Previously .wa-float was a flex row that INCLUDED the
   invisible tooltip in its box, so the tip appeared when
   the cursor was still far from the button. The tip is now
   absolutely positioned, so .wa-float shrink-wraps to the
   button and only a real hover/tap on the button triggers it. */
.wa-float {
    position: relative;
    display: block;
    width: max-content;
    gap: 0;
    line-height: 0;
}
.wa-tip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    line-height: 1.4;
    border-radius: 3px;
    z-index: 2;
}
/* Only fire on true hover-capable pointers (avoids sticky
   tooltips on touch), plus keyboard focus and active tap. */
@media (hover: hover) and (pointer: fine) {
    .wa-float:hover .wa-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
}
.wa-float:focus-within .wa-tip,
.wa-float:active .wa-tip { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Slightly richer green glow on the WhatsApp button only */
.wa-btn:not(.chatbot-btn):not(.call-btn) {
    box-shadow: 0 4px 20px rgba(37,211,102,.48), 0 0 26px rgba(37,211,102,.26);
}
.wa-btn:not(.chatbot-btn):not(.call-btn):hover {
    box-shadow: 0 8px 32px rgba(37,211,102,.60), 0 0 42px rgba(37,211,102,.38);
}

/* ── 2. GURU HINT: anchored to the bot button by JS ──── */
#guru-hint {
    max-width: min(260px, calc(100vw - 32px));
    right: var(--hint-right, calc(28px + var(--safe-right)));
    bottom: var(--hint-bottom, calc(96px + var(--safe-bottom)));
}
#guru-hint::before { right: var(--hint-arrow-right, 20px); }
@media (max-width: 520px) {
    #guru-hint {
        right: var(--hint-right, calc(16px + var(--safe-right)));
        bottom: var(--hint-bottom, calc(80px + var(--safe-bottom)));
        max-width: min(260px, calc(100vw - 32px));
    }
}

/* ── 3. MOBILE GALLERY + FULL-GALLERY MODAL ─────────── */
.gal-more-wrap { display: none; margin-top: 22px; }
.gal-more-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 54px;
    padding: 16px 26px;
    font-family: var(--ff-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--gold-lt);
    background: linear-gradient(135deg, rgba(201,168,76,.10) 0%, rgba(201,168,76,.03) 100%);
    border: 1px solid var(--border-md);
    border-radius: 4px;
    overflow: hidden;
    transition: border-color .3s var(--ease), color .3s, transform .3s var(--ease-spring);
    animation: galMoreGlow 3.4s ease-in-out infinite;
}
.gal-more-btn .gmb-arrow { transition: transform .35s var(--ease-spring); font-size: 14px; }
.gal-more-btn:hover, .gal-more-btn:focus-visible { border-color: var(--gold); color: var(--gold-lt); }
.gal-more-btn:hover .gmb-arrow { transform: translateX(4px); }
.gal-more-btn:active { transform: scale(.985); }
/* Sweeping sheen */
.gal-more-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent 0%, rgba(232,213,163,.16) 50%, transparent 100%);
    transform: skewX(-18deg);
    animation: galMoreSheen 3.4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes galMoreGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(201,168,76,0), inset 0 0 0 rgba(201,168,76,0); }
    50%      { box-shadow: 0 6px 26px rgba(201,168,76,.22), inset 0 0 18px rgba(201,168,76,.06); }
}
@keyframes galMoreSheen {
    0%, 62% { left: -60%; }
    100%    { left: 115%; }
}

/* Modal shell */
.gal-modal { position: fixed; inset: 0; z-index: 1200; display: flex; }
.gal-modal[hidden] { display: none; }
.gal-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(4,4,4,.82);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .35s var(--ease);
}
.gal-modal-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 100%;
    background: var(--black);
    transform: translateY(18px);
    opacity: 0;
    transition: transform .42s var(--ease-spring), opacity .35s var(--ease);
}
.gal-modal.open .gal-modal-backdrop { opacity: 1; }
.gal-modal.open .gal-modal-panel { transform: translateY(0); opacity: 1; }
.gal-modal-head {
    position: sticky; top: 0; z-index: 3;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: calc(20px + var(--safe-top)) clamp(16px, 5vw, 28px) 16px;
    background: linear-gradient(180deg, var(--black) 72%, transparent 100%);
    border-bottom: 1px solid var(--border);
}
.gal-modal-title {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: clamp(24px, 7vw, 34px);
    line-height: 1.15;
    color: var(--white);
    margin-top: 6px;
}
.gal-modal-title em { font-style: italic; color: var(--gold); }
.gal-modal-close {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; line-height: 1;
    color: var(--muted);
    background: var(--dark-2);
    border: 1px solid var(--border);
    border-radius: 50%;
    transition: color .25s, border-color .25s, transform .25s var(--ease-spring);
}
.gal-modal-close:hover, .gal-modal-close:focus-visible { color: var(--gold); border-color: var(--gold); transform: rotate(90deg); }
.gal-modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 24px clamp(16px, 5vw, 28px) calc(40px + var(--safe-bottom));
}
/* Inside the modal every tile is visible and both panels show at once */
.gal-modal-body .gal-tabs { display: none; }
.gal-modal-body #gal-grid,
.gal-modal-body #gal-ba { display: block !important; }
.gal-modal-body .gal-grid .gi { display: block !important; }
/* Scroll-reveal never runs for content that was display:none on load,
   so force revealed state for anything moved into the modal. */
.gal-modal-body .rv { opacity: 1 !important; transform: none !important; }
.gal-modal-body #gal-ba { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--border); }
.gal-modal-body #gal-ba::before {
    content: 'Before & After';
    display: block;
    font-size: 9.5px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 18px;
}
/* Stagger the tiles in for a premium reveal */
.gal-modal.open .gal-modal-body .gal-grid .gi {
    animation: galTileIn .5s var(--ease) backwards;
}
.gal-modal.open .gal-modal-body .gal-grid .gi:nth-child(1) { animation-delay: .04s; }
.gal-modal.open .gal-modal-body .gal-grid .gi:nth-child(2) { animation-delay: .10s; }
.gal-modal.open .gal-modal-body .gal-grid .gi:nth-child(3) { animation-delay: .16s; }
.gal-modal.open .gal-modal-body .gal-grid .gi:nth-child(4) { animation-delay: .22s; }
.gal-modal.open .gal-modal-body .gal-grid .gi:nth-child(5) { animation-delay: .28s; }
.gal-modal.open .gal-modal-body .gal-grid .gi:nth-child(n+6) { animation-delay: .34s; }
@keyframes galTileIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Mobile-only collapse: first tile + button. Tablet/laptop/desktop untouched. */
@media (max-width: 767px) {
    .gal-more-wrap { display: block; }
    #galleryBody .gal-tabs { display: none; }
    #galleryBody #gal-ba { display: none !important; }
    #galleryBody .gal-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 0; }
    #galleryBody .gal-grid .gi { display: none; }
    #galleryBody .gal-grid .gi:first-child {
        display: block;
        grid-column: 1; grid-row: auto;
        aspect-ratio: 4/5;
        border-radius: 4px;
    }
    #galleryBody .gal-grid .gi:first-child img { height: 100%; }
    /* Modal grid on phones */
    .gal-modal-body .gal-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px; }
    .gal-modal-body .gal-grid .gi { aspect-ratio: 4/5; border-radius: 4px; grid-column: 1 !important; grid-row: auto !important; }
    .gal-modal-body .gal-grid .gi img { height: 100%; }
}
@media (min-width: 768px) {
    .gal-more-wrap { display: none !important; }
}

/* ── 4. BOOKING ACTIONS + SUCCESS POPUP ─────────────── */
.book-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.book-actions .btn { width: 100%; justify-content: center; padding: 17px 26px; }
.btn-submit { letter-spacing: .2em; }
.book-reply-note {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 11px; font-weight: 500; letter-spacing: .09em;
    color: var(--muted-lt);
    margin: -2px 0 2px;
}
.brn-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #25D366;
    box-shadow: 0 0 8px rgba(37,211,102,.85);
    animation: brnPulse 1.9s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes brnPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .55; } }
.btn-book-direct { letter-spacing: .22em; }
.btn-book-direct:disabled { opacity: .7; cursor: wait; transform: none; }
/* Inline spinner used by both booking buttons */
.btn-spin {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btnSpin .7s linear infinite;
    vertical-align: -2px;
    margin-right: 8px;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* Success popup */
.bk-toast-wrap { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.bk-toast-wrap[hidden] { display: none; }
.bk-toast-backdrop {
    position: absolute; inset: 0;
    background: rgba(4,4,4,.72);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    opacity: 0; transition: opacity .3s var(--ease);
}
.bk-toast {
    position: relative;
    width: 100%;
    max-width: 380px;
    text-align: center;
    padding: 38px 28px 30px;
    border-radius: 8px;
    background: linear-gradient(160deg, #10221A 0%, #0C1712 60%, #0A0F0C 100%);
    border: 1px solid rgba(37,211,102,.32);
    box-shadow: 0 26px 70px rgba(0,0,0,.6), 0 0 44px rgba(37,211,102,.14);
    opacity: 0;
    transform: translateY(14px) scale(.95);
    transition: opacity .34s var(--ease), transform .44s var(--ease-spring);
}
.bk-toast-wrap.open .bk-toast-backdrop { opacity: 1; }
.bk-toast-wrap.open .bk-toast { opacity: 1; transform: translateY(0) scale(1); }
.bk-toast-ring { width: 76px; height: 76px; margin: 0 auto 20px; position: relative; }
.bk-toast-ring::after {
    content: '';
    position: absolute; inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37,211,102,.20) 0%, transparent 70%);
    animation: bkGlow 2.4s ease-in-out infinite;
}
@keyframes bkGlow { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.bk-tick { width: 76px; height: 76px; position: relative; z-index: 1; }
.bk-tick-circle { stroke: #25D366; stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; }
.bk-tick-path { stroke: #25D366; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.bk-toast-wrap.open .bk-tick-circle { animation: bkDraw .55s var(--ease) forwards; }
.bk-toast-wrap.open .bk-tick-path { animation: bkDraw .35s var(--ease) .42s forwards; }
@keyframes bkDraw { to { stroke-dashoffset: 0; } }
.bk-toast-title {
    font-family: var(--ff-display);
    font-size: clamp(21px, 5.4vw, 26px);
    font-weight: 500;
    line-height: 1.25;
    color: #EAFBF0;
    margin-bottom: 10px;
}
.bk-toast-sub { font-size: 13px; line-height: 1.7; color: #9DBBA8; margin-bottom: 24px; }
.bk-toast-btn {
    width: 100%;
    border-color: rgba(37,211,102,.4);
    color: #7FE0A3;
}
.bk-toast-btn:hover { border-color: #25D366; background: rgba(37,211,102,.08); color: #9FF0BC; }
@media (max-width: 380px) {
    .bk-toast { padding: 32px 20px 26px; }
    .bk-toast-ring, .bk-tick { width: 64px; height: 64px; }
}
html.theme-light .bk-toast-sub { color: #4E7860; }

/* ── 5. RESPONSIVE HARDENING ────────────────────────── */
/* Nothing should ever push the page sideways */
html, body { max-width: 100%; }
body { overflow-x: clip; }
img, svg, video, iframe, canvas { max-width: 100%; }
/* Long unbroken strings (emails, URLs) must wrap, not overflow */
.ci-val, .bd-val, .ft-links a, .fb-copy, .book-note, .form-status { overflow-wrap: anywhere; }
/* Tables and maps stay inside their column */
.hours-table { width: 100%; }
.contact-map iframe { width: 100%; border: 0; }
/* Marquee must never create a scrollbar */
.marquee-strip { max-width: 100%; overflow: hidden; }
/* Comfortable tap targets on touch devices */
@media (max-width: 767px) {
    .gal-tab, .faq-q, .fb-links a, .ft-links a { min-height: 44px; }
    .book-actions .btn { padding: 16px 20px; font-size: 9.5px; letter-spacing: .16em; }
}
@media (max-width: 380px) {
    .book-actions .btn { letter-spacing: .12em; font-size: 9px; }
    .book-reply-note { font-size: 10.5px; }
    /* Let the credit wrap rather than push the footer sideways */
    .fb-powered { white-space: normal; text-align: center; line-height: 1.6; }
}
/* Respect reduced-motion for every new animation */
@media (prefers-reduced-motion: reduce) {
    .gal-more-btn,
    .gal-more-btn::after,
    .brn-dot,
    .bk-toast-ring::after,
    .gal-modal.open .gal-modal-body .gal-grid .gi { animation: none !important; }
    .bk-toast-wrap.open .bk-tick-circle,
    .bk-toast-wrap.open .bk-tick-path { animation: none !important; stroke-dashoffset: 0 !important; }
    .gal-modal-panel, .bk-toast { transition-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════
   SERVICES — MOBILE/TABLET SLIDER (≤1024px only)
   Desktop/laptop grid above 1024px is completely untouched.
   The 6 existing .svc-card elements are reused as-is; JS
   only toggles classes + an inline transform.
═══════════════════════════════════════════════════ */
.svc-slider-controls { display: none; }

@media (max-width: 1024px) {
    /* Slider mode: one full-width card. The engine wraps the grid in a
       .sl-viewport and translates the grid inside it. */
    .services-grid.svc-slider {
        display: flex;
        flex-wrap: nowrap;
        gap: 0;
    }
    .services-grid.svc-slider .svc-card {
        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;
    }
    /* Pause the visible card's hover-only reveal on touch (no real hover) */
    .services-grid.svc-slider .svc-card:hover .svc-bg-img { transform: none; }

    /* Expanded mode (after "View All Services"): clean stacked list */
    .services-grid.svc-expanded {
        display: flex !important;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 14px;
        overflow: visible;
        transform: none !important;
        transition: none;
    }
    .services-grid.svc-expanded .svc-card { flex: none; width: 100%; min-width: 0; }

    .svc-slider-controls {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-top: 28px;
    }
}

.svc-dots { display: flex; gap: 6px; }

.svc-viewall-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 340px;
    min-height: 52px;
    padding: 15px 26px;
    font-family: var(--ff-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--gold-lt);
    background: linear-gradient(135deg, rgba(201,168,76,.10) 0%, rgba(201,168,76,.03) 100%);
    border: 1px solid var(--border-md);
    border-radius: 4px;
    overflow: hidden;
    transition: border-color .3s var(--ease), color .3s, transform .3s var(--ease-spring);
    animation: svcViewAllGlow 3.4s ease-in-out infinite;
}
.svc-viewall-btn .sva-arrow { transition: transform .35s var(--ease-spring); font-size: 14px; }
.svc-viewall-btn:hover, .svc-viewall-btn:focus-visible { border-color: var(--gold); color: var(--gold-lt); }
.svc-viewall-btn:hover .sva-arrow { transform: translateX(4px); }
.svc-viewall-btn:active { transform: scale(.985); }
.svc-viewall-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent 0%, rgba(232,213,163,.16) 50%, transparent 100%);
    transform: skewX(-18deg);
    animation: svcViewAllSheen 3.4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes svcViewAllGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(201,168,76,0), inset 0 0 0 rgba(201,168,76,0); }
    50%      { box-shadow: 0 6px 26px rgba(201,168,76,.22), inset 0 0 18px rgba(201,168,76,.06); }
}
@keyframes svcViewAllSheen {
    0%, 62% { left: -60%; }
    100%    { left: 115%; }
}

@media (prefers-reduced-motion: reduce) {
    .svc-viewall-btn, .svc-viewall-btn::after { animation: none !important; }
}

/* ═══════════════════════════════════════════════════
   GURU CHATBOT — action buttons, links, booking flow
═══════════════════════════════════════════════════ */
.guru-actions { margin-bottom: 4px; }
.guru-chip-primary {
    background: var(--grad-gold);
    color: var(--black);
    border-color: transparent;
    font-weight: 700;
}
.guru-chip-primary:hover { filter: brightness(1.06); color: var(--black); }
.guru-link {
    color: var(--gold-lt);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(232,213,163,.5);
    word-break: break-word;
}
.guru-link:hover { text-decoration-color: var(--gold-lt); }
.guru-msg.user .guru-link { color: inherit; }

/* ═══════════════════════════════════════════════════
   FINAL RESPONSIVE POLISH
   Small-screen gaps found during the production audit.
═══════════════════════════════════════════════════ */

/* Footer wordmark was a fixed 42px while the nav wordmark scales.
   Great Vibes is a wide script face — at 320px the fixed size
   crowded the gutters. Now fluid, matching the nav's behaviour. */
.ft-logo-name { font-size: clamp(30px, 8.5vw, 42px); line-height: 1.2; }

/* Momentum scrolling + contained overscroll on the two panes that
   genuinely scroll natively, so a flick inside them never scrolls the
   page behind. (The testimonial and Instagram carousels are
   transform-driven with overflow:hidden — these props are a no-op there.) */
.gal-modal-body,
.guru-body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Anchor targets clear the fixed header when deep-linked */
section[id] { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* Very small phones (320–360px): tighten the largest type so nothing
   crowds the gutters. */
@media (max-width: 360px) {
    .hero-h1 { font-size: clamp(38px, 11.5vw, 46px); }
    .tc-q { font-size: 46px; }
    .book-actions .btn { padding: 15px 14px; }
    .gal-modal-head { padding-left: 14px; padding-right: 14px; }
    .gal-modal-body { padding-left: 14px; padding-right: 14px; }
}

/* Tablet landscape: the services slider ends at 1024px, so make sure
   the grid it hands back to is comfortable at 1025–1180px. */
@media (min-width: 1025px) and (max-width: 1180px) {
    .services-grid { grid-template-columns: repeat(3, 1fr); }
    .svc-card { padding: 28px 20px 26px; }
    .svc-name { font-size: 20px; }
}

/* Landscape phones are short — stop the hero eating the whole screen */
@media (max-height: 480px) and (orientation: landscape) {
    #hero { min-height: auto; padding-top: calc(var(--nav-h) + 24px); padding-bottom: 40px; }
    .hero-h1 { font-size: clamp(30px, 6vw, 44px); margin-bottom: 18px; }
    #guru-panel { height: 100%; }
}

/* Honour the OS "reduce data" hint by pausing decorative motion */
@media (prefers-reduced-data: reduce) {
    .chatbot-btn, .wa-pulse, .call-pulse,
    .gal-more-btn, .gal-more-btn::after,
    .svc-viewall-btn, .svc-viewall-btn::after { animation: none !important; }
}

/* ═══════════════════════════════════════════════════
   OFFICIAL LOGO PLACEMENTS
   The monogram mark sits beside the existing wordmark in
   the nav; the full lockup anchors the loader and footer.
   Existing typography and colours are untouched.
═══════════════════════════════════════════════════ */

/* Nav: mark + wordmark on one line */
.nav-logo { display: flex; align-items: center; gap: 11px; }
.nav-logo-text { display: flex; flex-direction: column; line-height: 1; }
.nav-logo-mark {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    object-fit: contain;
    transition: transform .4s var(--ease-spring), filter .4s var(--ease);
}
.nav-logo:hover .nav-logo-mark { transform: scale(1.06) rotate(-2deg); }
.nav-logo:focus-visible .nav-logo-mark { filter: drop-shadow(0 0 8px rgba(201,168,76,.55)); }

/* Loader: full lockup above the script name */
.ldr-logo {
    display: block;
    width: clamp(132px, 34vw, 182px);
    height: auto;
    margin: 0 auto 18px;
    opacity: 0;
    animation: ldrLogoIn .9s var(--ease) .12s forwards;
}
@keyframes ldrLogoIn {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

/* Footer: full lockup above the wordmark */
.ft-logo-img {
    display: block;
    width: clamp(122px, 27vw, 158px);
    height: auto;
    margin-bottom: 16px;
}

@media (max-width: 900px) {
    .nav-logo-mark { width: 38px; height: 38px; }
}
@media (max-width: 520px) {
    .nav-logo { gap: 9px; }
    .nav-logo-mark { width: 34px; height: 34px; }
}
@media (max-width: 380px) {
    .nav-logo-mark { width: 31px; height: 31px; }
    .nav-logo { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .ldr-logo { animation: none !important; opacity: 1 !important; }
    .nav-logo:hover .nav-logo-mark { transform: none; }
}

/* The full lockup already contains the wordmark, so the old script
   duplicate is redundant wherever the lockup appears. The <img> carries
   the brand name in its alt text, so nothing is lost for screen readers. */
.ldr-brand .ldr-logo ~ .ldr-name,
.ft-brand .ft-logo-img ~ .ft-logo-name,
.ft-brand .ft-logo-img ~ .ft-tagline { display: none; }

/* ═══════════════════════════════════════════════════
   TOUCH SLIDER (Services + Gallery, mobile/tablet)
   Replaces the previous transform-only slider. Adds
   drag support and fixes the image-cropping bug.
═══════════════════════════════════════════════════ */

/* The track. `pan-y` lets the page scroll vertically while the
   engine claims horizontal gestures. */
/* Static clipping box. Never transformed — that is the whole point of
   it being separate from the track. */
.sl-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
    /* Own stacking + paint layer keeps the transform composited */
    transform: translateZ(0);
}

.sl-track {
    display: flex;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    overflow: visible;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    will-change: transform;
    backface-visibility: hidden;
}
.sl-track > * { flex: 0 0 100% !important; width: 100% !important; min-width: 100% !important; }
/* Images inside a slider must never be dragged as native images */
.sl-track img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }

/* Shared dot indicators */
.sl-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--dark-4);
    border: 1px solid var(--border);
    transition: width .3s var(--ease), background .3s, border-color .3s;
}
.sl-dot.on { background: var(--gold); border-color: var(--gold); width: 18px; border-radius: 3px; }

/* ── Services slider ──────────────────────────────── */
@media (max-width: 1024px) {
    .services-grid.svc-slider {
        display: flex;
        grid-template-columns: none;
    }
    /* THE CROPPING FIX
       Previously the card height came from its text alone, so a
       900x1350 portrait photo behind it was reduced to a thin
       horizontal band. The card now gets a generous aspect ratio and
       the artwork is sized with `contain`, so every service image is
       shown whole — nothing is cut off. */
    .services-grid.svc-slider .svc-card {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 0;
        aspect-ratio: 1 / 1;
        padding: 26px 24px 26px;
    }
    /* Service photos are a mix of 2:3 portraits and 3:2 landscapes, so no
       single ratio avoids BOTH letterbox bars and cropping. A square card
       with `cover` splits the difference: the frame is always filled (no
       blank space) and each image loses only a modest, evenly-centred
       margin rather than being squeezed into a thin band. */
    .services-grid.svc-slider .svc-bg-img {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        opacity: .5;
        transform: none !important;
    }
    /* Keep the copy readable over the artwork */
    .services-grid.svc-slider .svc-card::after {
        content: '';
        position: absolute; inset: 0;
        background: linear-gradient(180deg, rgba(8,8,8,.10) 0%, rgba(8,8,8,.55) 58%, rgba(8,8,8,.88) 100%);
        opacity: 1;
        z-index: 1;
        pointer-events: none;
    }
    .services-grid.svc-slider .svc-content { position: relative; z-index: 2; }
    .services-grid.svc-slider .svc-arrow { display: none; }
    .services-grid.svc-slider .svc-icon { margin-bottom: 14px; }

    /* Expanded list keeps the original card treatment */
    .services-grid.svc-expanded .svc-card { aspect-ratio: auto; display: block; }
    .services-grid.svc-expanded .svc-bg-img { background-size: cover; opacity: .38; }
    .services-grid.svc-expanded .svc-card::after { display: none; }
}
html.theme-light .services-grid.svc-slider .svc-card::after {
    background: linear-gradient(180deg, rgba(247,243,234,.10) 0%, rgba(247,243,234,.60) 58%, rgba(247,243,234,.90) 100%);
}
html.theme-light .services-grid.svc-slider .svc-bg-img { opacity: .38; }

/* ── Gallery slider (mobile only) ─────────────────── */
.gal-slider-dots { display: none; }
@media (max-width: 767px) {
    .gal-slider-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: 16px;
    }
    /* Show every tile again — the slider handles which one is visible.
       (The old rule hid all but the first.) */
    #galleryBody .gal-grid.gal-slider {
        display: flex;
        grid-template-columns: none;
    }
    #galleryBody .gal-grid.gal-slider .gi {
        display: block;
        aspect-ratio: 4 / 5;
        border-radius: 4px;
        grid-column: auto;
        grid-row: auto;
    }
    /* Gallery photos are portrait crops of people — `cover` is correct
       here and fills the frame with no letterboxing. */
    #galleryBody .gal-grid.gal-slider .gi img {
        width: 100%; height: 100%; object-fit: cover;
    }
    .gal-more-wrap { margin-top: 18px; }
}

/* Motion preferences: no autoplay, instant settle, but swipe still works */
@media (prefers-reduced-motion: reduce) {
    .sl-track { transition: none !important; }
}

/* ═══════════════════════════════════════════════════
   APPOINTMENT — highlighted reply note + confirm dialog
═══════════════════════════════════════════════════ */

/* The reply promise is now a glowing WhatsApp-green badge so the
   WhatsApp route reads as the obvious primary choice. */
.book-reply-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 2px auto 4px;
    padding: 9px 18px;
    width: fit-content;
    max-width: 100%;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8FF0B4;
    background: linear-gradient(135deg, rgba(37,211,102,.14) 0%, rgba(37,211,102,.05) 100%);
    border: 1px solid rgba(37,211,102,.34);
    border-radius: 100px;
    animation: brnGlow 2.6s ease-in-out infinite;
}
.book-reply-note .brn-text { line-height: 1.3; }
@keyframes brnGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,.30); border-color: rgba(37,211,102,.34); }
    50%      { box-shadow: 0 0 22px 2px rgba(37,211,102,.26); border-color: rgba(37,211,102,.62); }
}
.brn-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #25D366;
    box-shadow: 0 0 9px rgba(37,211,102,.95);
    animation: brnPulse 1.7s ease-in-out infinite;
    flex-shrink: 0;
}
html.theme-light .book-reply-note { color: #10893E; border-color: rgba(16,137,62,.42); }

/* ── Confirmation dialog ──────────────────────────── */
.bc-wrap {
    position: fixed; inset: 0; z-index: 1350;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.bc-wrap[hidden] { display: none; }
.bc-backdrop {
    position: absolute; inset: 0;
    background: rgba(4,4,4,.74);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    opacity: 0; transition: opacity .3s var(--ease);
}
.bc-panel {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 34px 28px 28px;
    text-align: center;
    background: linear-gradient(165deg, #17140C 0%, #100E0A 58%, #0B0A08 100%);
    border: 1px solid var(--border-md);
    border-radius: 8px;
    box-shadow: 0 26px 70px rgba(0,0,0,.62), 0 0 48px rgba(201,168,76,.10);
    opacity: 0;
    transform: translateY(14px) scale(.96);
    transition: opacity .32s var(--ease), transform .42s var(--ease-spring);
}
.bc-wrap.open .bc-backdrop { opacity: 1; }
.bc-wrap.open .bc-panel { opacity: 1; transform: none; }

.bc-icon {
    width: 54px; height: 54px;
    margin: 0 auto 18px;
    display: flex; align-items: center; justify-content: center;
    color: #25D366;
    background: rgba(37,211,102,.10);
    border: 1px solid rgba(37,211,102,.30);
    border-radius: 50%;
}
.bc-icon svg { width: 26px; height: 26px; }

.bc-title {
    font-family: var(--ff-display);
    font-size: clamp(21px, 5.4vw, 26px);
    font-weight: 400;
    color: var(--white);
    margin-bottom: 14px;
    overflow-wrap: anywhere;
}
.bc-title span { color: var(--gold); font-style: italic; }
.bc-body p { font-size: 13.5px; line-height: 1.75; color: var(--muted-lt); margin-bottom: 12px; }
.bc-body strong { color: #8FF0B4; font-weight: 700; }
.bc-call {
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 12.5px !important; color: var(--muted) !important;
}
.bc-call a {
    display: inline-block;
    margin-top: 4px;
    font-family: var(--ff-body);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--gold);
    min-height: 44px;
    line-height: 44px;
    touch-action: manipulation;
}
.bc-call a:hover, .bc-call a:focus-visible { color: var(--gold-lt); text-decoration: underline; }

.bc-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.bc-actions .btn { width: 100%; justify-content: center; padding: 15px 20px; }

@media (max-width: 380px) {
    .bc-panel { padding: 28px 20px 22px; }
    .bc-body p { font-size: 13px; }
    .bc-actions .btn { padding: 14px 14px; font-size: 9px; letter-spacing: .12em; }
}
html.theme-light .bc-panel { background: linear-gradient(165deg, #FFFDF8 0%, #F7F3EA 100%); }
html.theme-light .bc-body strong { color: #10893E; }

@media (prefers-reduced-motion: reduce) {
    .book-reply-note, .brn-dot { animation: none !important; }
    .bc-panel, .bc-backdrop { transition-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════
   MOBILE UI/UX POLISH
   Spacing, touch targets and rendering refinements found
   in the mobile-first audit. No design changes.
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Slightly tighter section rhythm so less scrolling is needed,
       without the sections feeling cramped. */
    section { padding-top: clamp(56px, 12vw, 76px); padding-bottom: clamp(56px, 12vw, 76px); }

    /* Every tappable control clears the 44px minimum */
    .btn, .gal-tab, .faq-q, .nav-links a, .ft-links a, .fb-links a,
    .svc-viewall-btn, .gal-more-btn, .tc-btn, .guru-chip { min-height: 44px; }

    /* Section intros read better slightly narrower */
    .section-sub { padding-left: 4px; padding-right: 4px; }

    /* Sliders: crisp compositing, no text selection while swiping */
    .sl-viewport { -webkit-tap-highlight-color: transparent; }
    .sl-track { -webkit-backface-visibility: hidden; }

    /* Dots are small — give them a comfortable tap/scan band */
    .svc-dots, .gal-slider-dots { min-height: 24px; align-items: center; }
}

/* Keep the floating stack clear of the iOS home indicator */
@supports (padding: max(0px)) {
    .float-stack { bottom: max(26px, calc(env(safe-area-inset-bottom) + 14px)); }
}

/* Images fade in rather than snapping, which reads smoother on mobile
   where they decode progressively. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    .gi img, .insta-item img { transition: opacity .35s var(--ease), transform .5s var(--ease); }
}