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

:root {
    /* PALETTE — "Rosewood & Champagne". Single light theme.
       Token NAMES are unchanged; only their VALUES are remapped, so
       the rest of the stylesheet needs no rewrite. The dark-plum
       surfaces (hero, footer, mobile menu, marquee, chat header) are
       set explicitly near the end of this file. */

    /* Blush-cream surface ramp (was the dark ramp) */
    --black:  #FCEFEC;   /* page background — soft blush-cream */
    --dark-1: #F8E1DE;   /* deeper blush panels (footer/marquee tint) */
    --dark-2: #FBE7E4;   /* inputs, chips, chat header base */
    --dark-3: #FFFFFF;   /* cards / raised surfaces */
    --dark-4: #F5D7DB;   /* petal accent surface */

    /* Rose-gold accent ramp (was the gold ramp) */
    --gold:    #C15A79;  /* primary rose accent */
    --gold-lt: #E28BA6;  /* light rose highlight */
    --gold-dk: #9C3C5B;  /* deep rose */
    --gold-aa: #9C3C5B;  /* AA-safe rose for text on blush (>=4.5:1) */

    /* Text on light surfaces (was white/ivory on dark) */
    --white: #3D2530;    /* headings — warm rosewood */
    --ivory: #3D2530;    /* body text — warm rosewood */
    --muted:    #806069;  /* secondary/body copy — AA on blush and on white */
    --muted-lt: #6E4E57;  /* secondary text */

    /* Rose-tinted borders (was gold-tinted) */
    --border:    rgba(156, 60, 91, .15);
    --border-md: rgba(156, 60, 91, .28);
    --border-lg: rgba(156, 60, 91, .44);

    /* Accent gradients — rose-gold foil ramp */
    --grad-gold: linear-gradient(135deg, #B37C52 0%, #C28A63 22%, #ECCBA3 50%, #C28A63 78%, #B37C52 100%);
    --grad-gold-h: linear-gradient(90deg, #B37C52 0%, #D8AB7E 30%, #F2D5B4 50%, #D8AB7E 70%, #B37C52 100%);
    --grad-rose: linear-gradient(135deg, #9C3C5B 0%, #C15A79 52%, #E28BA6 100%);
    --grad-plum: linear-gradient(165deg, #43202F 0%, #2C1220 100%);
    --grad-dark: linear-gradient(180deg, var(--dark-2) 0%, var(--dark-1) 100%);

    /* Rose-gold text-foil used where gold text sat on dark before.
       On the light page, primary "gold" TEXT must read as rose for
       contrast (the foil gradient is too pale on cream). */
    --gold-ink: #9C3C5B;

    --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);
    color-scheme: light;
}

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-ink); 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-rose); color: #fff; box-shadow: 0 10px 26px -12px rgba(193,90,121,.7); }
.btn-primary::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.18); opacity: 0; transition: opacity .3s; }
.btn-primary:hover::after { opacity: 1; }
.btn-primary:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 18px 44px -12px rgba(193,90,121,.8), 0 0 30px -6px rgba(224,139,166,.6); }
.btn-ghost { border: 1px solid var(--border-lg); color: var(--gold-ink); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); background: rgba(193,90,121,.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); }
/* Once the reveal transition settles, drop the transform entirely so a
   lingering translateY(0) can't act as a containing block for grid /
   absolutely-positioned descendants — the cause of gallery tiles shifting
   on WebKit (iPad) and Brave. Applied by initReveal() after transitionend. */
.rv.in.rv-settled { transform: none; }
.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(193,90,121,.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; }
/* Superseded by the consolidated .nav-logo rule further down (logo mark + wordmark). */
.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-ink); 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-ink); }
.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: 32px; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s var(--ease); padding: calc(var(--safe-top) + 24px) 24px calc(var(--safe-bottom) + 24px); overflow-y: auto; }
#mob-menu.open { opacity: 1; visibility: visible; }
#mob-menu a:not(.btn) { font-family: var(--ff-display); font-size: clamp(28px, 7.5vw, 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:not(.btn):hover { color: var(--gold-ink); }
#mob-menu .mob-book { margin-top: 6px; width: 100%; max-width: 300px; justify-content: center; }
/* The hamburger is hidden above 768px, so the overlay must never be able to
   show there — a hard guard in case a resize outruns the JS close handler. */
@media (min-width: 769px) { #mob-menu { display: none; } }

/* ═══════════════════════════════════════════════════
   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(193,90,121,.055) 0%, transparent 65%), radial-gradient(ellipse 55% 90% at 5% 50%, rgba(193,90,121,.035) 0%, transparent 55%), radial-gradient(ellipse 80% 50% at 50% 100%, rgba(193,90,121,.025) 0%, transparent 60%), var(--black); }
.hero-bg::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(193,90,121,.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(193,90,121,.25) 30%, rgba(193,90,121,.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-ink); 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; }

/* Hero CTA glow. Pauses on hover/focus so the interactive state stays
   crisp; disabled under reduced-motion. */
.hero-actions .btn-primary.hero-cta {
    box-shadow: 0 10px 30px rgba(193,90,121,.28);
    animation: heroCtaGlow 3s var(--ease) 1.9s infinite;
}
.hero-actions .btn-primary.hero-cta:hover,
.hero-actions .btn-primary.hero-cta:focus-visible {
    animation-play-state: paused;
}
@keyframes heroCtaGlow {
    0%, 100% { box-shadow: 0 8px 26px rgba(193,90,121,.26); }
    50%      { box-shadow: 0 14px 46px rgba(193,90,121,.55); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-actions .btn-primary.hero-cta { animation: none; }
}
.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-ink); }
@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(193,90,121,.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; }
/* ── SERVICE CARD BACKGROUND — viewport-responsive ──
   Each card sets --bg-420/--bg-640/--bg-900 inline (via image-set,
   so format negotiation still applies per width tier). This rule
   picks the tier; the media queries below override it by width so
   phones never download the 900w asset and desktops get full detail. */
.svc-bg-img { position: absolute; inset: 0; background-image: var(--bg-640); background-size: cover; background-position: center; opacity: .38; z-index: 0; transition: opacity .4s var(--ease), transform .6s var(--ease); }
@media (max-width: 640px) { .svc-bg-img { background-image: var(--bg-420); } }
@media (min-width: 1400px) { .svc-bg-img { background-image: var(--bg-900); } }
.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-ink); 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-rose); color: #fff; }
.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-rose); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; box-shadow: 0 0 24px rgba(193,90,121,.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-ink); }

.gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 220px 220px; gap: 8px; }
/* The inner masonry grid must resolve its track placement against its own
   box, so it never carries a transform of its own. The reveal wrapper
   (#gal-grid) settles to transform:none via .rv-settled once its animation
   finishes (see initReveal). The mobile slider sets an inline transform on
   this element, which still wins over this rule, so the slider is unaffected. */
.gal-grid:not(.gal-slider) { transform: none; }
.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-ink); }

/* ═══════════════════════════════════════════════════
   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-ink); }
.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-ink); }
.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-ink); 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(193,90,121,.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-ink); flex-shrink: 0; margin-top: 2px; }
.bd-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); 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-ink); }
.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-ink); }
.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-ink); 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-ink); }

/* ═══════════════════════════════════════════════════
   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-ink); 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-ink); }
.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-ink); font-size: 13px; transition: all .3s var(--ease); }
.faq-item.open .faq-ico { background: var(--gold); color: #fff; 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-ink); flex-shrink: 0; margin-top: 3px; }
.ci-lbl { font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); 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-ink); }
.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-ink); }
.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-ink); }
.ft-col-title { font-size: 9px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-ink); 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-ink); }
.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-ink); }

/* ═══════════════════════════════════════════════════
   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.6s ease-out infinite; }
@keyframes waPulse { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(2.1); opacity: 0; } }

/* ── GURU AI Chatbot button — logo fills the circular area perfectly ── */
.chatbot-btn { background: var(--grad-rose); box-shadow: 0 4px 18px rgba(193,90,121,.35); animation: chatBounce 3s ease-in-out infinite; overflow: hidden; }
.chatbot-btn:hover { animation-play-state: paused; box-shadow: 0 8px 28px rgba(193,90,121,.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(193,90,121,.22); animation: none; }
.call-btn:hover { box-shadow: 0 8px 28px rgba(193,90,121,.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) {
    /* ── MOBILE HEADER REDESIGN ──
       Only the logo (top-left) and the hamburger (top-right)
       remain in the bar. Dark Mode moves into the menu itself
       (see #mob-menu below). Height and logo both reduced for a
       lighter, more premium mobile header. */
    :root { --nav-h: 56px; }
    .nav-links, .nav-right .btn, .nav-right .theme-toggle { display: none; }
    .hamburger { display: flex; }
    .nav-inner { padding-left: 0; padding-right: 0; gap: 8px; justify-content: space-between; }
    .nav-right { gap: 0; }
    .nav-logo { margin-left: 0; padding-left: 0; gap: 8px; }
    .nav-logo-mark { width: 34px; height: 34px; }
    .nav-logo-name { font-size: 21px; }
    .nav-logo-tag { font-size: 6px; letter-spacing: .24em; margin-top: 2px; }
    .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(38,15,26,.9) 0%, rgba(38,15,26,.66) 32%, rgba(38,15,26,.6) 62%, rgba(38,15,26,.8) 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 { gap: 7px; }
    .nav-logo-mark { width: 30px; height: 30px; }
    .nav-logo-name { font-size: 19px; }
    .nav-logo-tag { font-size: 5.5px; 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-rose); color: #fff; 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-ink); }
.nav-links a.active::after { width: 100%; }

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

/* Kept in flow at all times (never display:none) so populating it on submit
   does not change document height. A display:none→block toggle here shifted
   the page via the browser's scroll-anchoring when the form sat above the
   viewport — the cause of the appointment box "jumping" on submit.
   overflow-anchor:none also excludes it as a scroll anchor candidate. */
.form-status { font-size: 12.5px; line-height: 1.6; margin-top: 6px; min-height: 1.6em; overflow-anchor: none; transition: color .2s var(--ease); }
.form-status.ok { color: var(--gold-lt); }
.form-status.err { color: #C0392B; }

.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(193,90,121,.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-ink); 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-ink); }

.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-rose); color: #fff; 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-ink); 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(193,90,121,.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-rose); color: #fff; 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: #fff; }

/* 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(193,90,121,.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-ink); 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-ink); }

@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 removed — single light theme.)
═══════════════════════════════════════════════════ */
/* 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; }
}

/* ═══════════════════════════════════════════════════
   FLOATING BUTTONS, GURU HINT, GALLERY MODAL
   4. Booking actions + success popup
   5. Responsive hardening
═══════════════════════════════════════════════════ */

/* Tooltip is absolutely positioned so the row's hit area is
   exactly the button, not the button plus the invisible tip. */
.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); }

/* Premium WhatsApp glow — layered soft halo in the official green
   (#25D366). Larger and softer than a single hard shadow, with a gentle
   always-on breathing pulse so it reads as inviting, never cheap. */
.wa-btn:not(.chatbot-btn):not(.call-btn) {
    background: #25D366;
    box-shadow:
        0 4px 16px rgba(37,211,102,.42),
        0 0 22px rgba(37,211,102,.34),
        0 0 44px rgba(37,211,102,.20);
    animation: waGlow 3.4s ease-in-out infinite;
}
.wa-btn:not(.chatbot-btn):not(.call-btn):hover {
    box-shadow:
        0 8px 26px rgba(37,211,102,.55),
        0 0 34px rgba(37,211,102,.46),
        0 0 60px rgba(37,211,102,.30);
    animation-play-state: paused;
}
@keyframes waGlow {
    0%, 100% {
        box-shadow:
            0 4px 16px rgba(37,211,102,.42),
            0 0 22px rgba(37,211,102,.30),
            0 0 40px rgba(37,211,102,.16);
    }
    50% {
        box-shadow:
            0 4px 18px rgba(37,211,102,.50),
            0 0 30px rgba(37,211,102,.42),
            0 0 56px rgba(37,211,102,.26);
    }
}
body.is-scrolling .wa-btn:not(.chatbot-btn):not(.call-btn) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .wa-btn:not(.chatbot-btn):not(.call-btn) { animation: none; }
}

/* ── 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(193,90,121,.10) 0%, rgba(193,90,121,.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(193,90,121,0), inset 0 0 0 rgba(193,90,121,0); }
    50%      { box-shadow: 0 6px 26px rgba(193,90,121,.22), inset 0 0 18px rgba(193,90,121,.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-width: 100%;
    max-height: 100%;
    overflow-x: hidden;
    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-ink); }
.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-ink); border-color: var(--gold); transform: rotate(90deg); }
.gal-modal-body {
    flex: 1;
    overflow-y: auto;
    /* The tiles are lazy-loaded, so content grows taller as the visitor
       scrolls. Without a reserved gutter the scrollbar appears mid-scroll,
       narrows the content box and shunts the whole gallery sideways.
       `stable` keeps the gutter reserved from the start, so nothing moves. */
    scrollbar-gutter: stable;
    overflow-x: hidden;          /* nothing may ever scroll horizontally */
    -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-ink); 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; }
}

/* ── 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(193,90,121,.10) 0%, rgba(193,90,121,.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(193,90,121,0), inset 0 0 0 rgba(193,90,121,0); }
    50%      { box-shadow: 0 6px 26px rgba(193,90,121,.22), inset 0 0 18px rgba(193,90,121,.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-rose);
    color: #fff;
    border-color: transparent;
    font-weight: 700;
}
.guru-chip-primary:hover { filter: brightness(1.06); color: #fff; }
.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 offset for the fixed header is handled once by
   html { scroll-padding-top } above; a per-section scroll-margin-top here
   stacked on top of it and pushed every deep-linked section ~90px too low. */

/* 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; flex-direction: row; align-items: center; gap: 11px; flex-shrink: 0; }
.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(193,90,121,.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 (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; 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;
    }
    /* Card needs an explicit aspect ratio: sized by text alone, a
       portrait photo behind it collapses to a thin band. */
    .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: .82;
        transform: none !important;
    }
    /* Full-bleed image card: dark gradient from the base up so the copy in
       the lower third stays sharp against any photo. Text is light here. */
    .services-grid.svc-slider .svc-card::after {
        content: '';
        position: absolute; inset: 0;
        background: linear-gradient(180deg, rgba(38,15,26,.12) 0%, rgba(38,15,26,.45) 46%, rgba(38,15,26,.82) 78%, rgba(38,15,26,.94) 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-name { color: #FCF2EE; }
    .services-grid.svc-slider .svc-desc { color: rgba(251,239,234,.9); }
    .services-grid.svc-slider .svc-price { -webkit-text-fill-color: #ECCBA3; color: #ECCBA3; }
    .services-grid.svc-slider .svc-price span { color: rgba(251,239,234,.72); -webkit-text-fill-color: rgba(251,239,234,.72); }
    .services-grid.svc-slider .svc-icon { border-color: rgba(236,203,163,.5); }
    .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: .40; }
    /* Expanded (mobile "View All") reuses the plain grid look, not the
       desktop scrim — without this the card silently inherited the
       desktop .svc-card::after wash, which read as the whole section
       "switching to desktop style" after tapping View All. */
    .services-grid.svc-expanded .svc-card::after { display: none; }
}

/* ── 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;
}

/* ── 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(193,90,121,.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-ink); 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-ink);
    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; }
}

@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; 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); }
}

/* ═══════════════════════════════════════════════════
   MOBILE POLISH — v2 SUPPLEMENT
   Card, form and footer spacing for a calmer, more
   premium rhythm. Scoped to phones; desktop untouched.
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Comfortable page gutters */
    .wrap { padding-left: 22px; padding-right: 22px; }

    /* Headings breathe a little more before their content */
    .section-head, .sh { margin-bottom: clamp(30px, 7vw, 44px); }

    /* Cards: a touch more internal padding reads more premium */
    .svc-card { padding: 30px 24px 28px; }
    .testi-card { padding: 30px 24px; }
    .faq-q { padding: 19px 18px; }
    .faq-a-inner { padding: 0 18px 20px; }

    /* Booking form spacing */
    .book-form { gap: 15px; }
    .book-detail { padding: 16px 0; gap: 15px; }

    /* Footer breathing room + safe area at the very bottom */
    .footer-main { gap: 30px; padding-bottom: 32px; }
    .ft-links a { padding: 8px 0; }
    .footer-bottom { padding-bottom: calc(20px + var(--safe-bottom)); }
}

@media (max-width: 380px) {
    .wrap { padding-left: 18px; padding-right: 18px; }
    .svc-card { padding: 26px 20px 24px; }
}

/* ═══════════════════════════════════════════════════
   MOBILE HEADER (≤768px)
   Must stay last in the file: the base .nav-logo rules appear
   after the earlier mobile queries and would otherwise win at
   equal specificity. Sizing is fluid so the logo scales without
   a jump at any breakpoint. Desktop is untouched.
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Bar height and gutters are the reference for everything else.
       The gutter is fluid so the logo keeps a proportional, never
       cramped margin from the screen edge on every device. */
    :root {
        --nav-h: 56px;
        --nav-gutter: clamp(16px, 4.8vw, 20px);
    }

    /* #nav is display:flex, so .wrap is a flex item and would
       shrink-to-fit then self-centre. Force it to fill the bar so the
       logo sits hard left and the hamburger hard right. */
    #nav > .wrap {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding-left: var(--nav-gutter);
        padding-right: var(--nav-gutter);
    }
    .nav-inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        min-width: 0;                 /* lets children shrink instead of overflowing */
    }

    /* ── Logo: top-left, fluid, never clipped ── */
    .nav-logo {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: clamp(9px, 3vw, 13px);
        margin-left: 0;
        padding-left: 0;
        min-width: 0;
        flex: 0 1 auto;
    }
    .nav-logo-mark {
        width: clamp(28px, 8vw, 34px);
        height: clamp(28px, 8vw, 34px);
        flex-shrink: 0;
    }
    .nav-logo-text { min-width: 0; }
    .nav-logo-name {
        font-size: clamp(24px, 7vw, 29px);
        line-height: 1.05;
        white-space: nowrap;          /* the script wordmark must never wrap */
    }
    .nav-logo-tag {
        font-size: clamp(6px, 1.75vw, 7.2px);
        letter-spacing: .26em;
        margin-top: 3px;
        white-space: nowrap;
    }

    /* ── Hamburger: top-right, optically aligned to the same gutter ──
       The button keeps a 44px touch target, but its 22px icon would
       otherwise sit ~11px inside the gutter and read as misaligned
       against the logo. The negative margin pulls the target into the
       padding so the icon lines up with the logo's left edge. */
    .nav-right { gap: 0; flex-shrink: 0; }
    .hamburger {
        display: flex;
        padding: 10px 0;
        margin-right: calc((22px - 44px) / 2);   /* -11px */
        min-height: 44px;
        min-width: 44px;
        flex-shrink: 0;
    }
    .nav-links, .nav-right .btn, .nav-right .theme-toggle { display: none; }
}

@media (max-width: 380px) {
    :root { --nav-h: 54px; }
    .hamburger {
        min-height: 40px;
        min-width: 40px;
        margin-right: calc((20px - 40px) / 2);   /* -10px */
    }
    .hamburger span { width: 20px; }
}

/* Belt-and-braces: nothing in the header may cause a horizontal
   scrollbar, whatever the device width. */
@media (max-width: 768px) {
    #nav, #nav .wrap, .nav-inner { max-width: 100%; }
    #nav { overflow-x: clip; }
}

/* ═══════════════════════════════════════════════════
   KEYBOARD SKIP LINK
   The first focusable element on the page. Hidden until
   focused, so it never affects the visual design, but it
   lets keyboard and screen-reader users bypass the nav.
═══════════════════════════════════════════════════ */
.skip-link {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -120%);
    z-index: 1000;
    padding: 12px 22px;
    font-family: var(--ff-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--black);
    background: var(--gold);
    border-radius: 0 0 4px 4px;
    transition: transform .25s var(--ease);
}
.skip-link:focus-visible,
.skip-link:focus {
    transform: translate(-50%, 0);
    outline: 2px solid var(--white);
    outline-offset: -4px;
}

/* ═══════════════════════════════════════════════════
   REDUCED-MOTION SAFETY NET
   Individual components already opt out, but this catches
   anything added later so the preference is never ignored.
   Transforms used purely for layout are left intact.
═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    /* Reveal-on-scroll elements must not stay stuck at opacity 0
       if their animation is cancelled. */
    .rv, .li, .fade-up { opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════
   GALLERY MODAL — OVERFLOW CONTAINMENT
   The grid is a slider track on small screens; when it is
   moved into the modal the slider is unmounted, but these
   guards make certain no stray width can ever produce a
   horizontal scrollbar or a sideways shift.
═══════════════════════════════════════════════════ */
.gal-modal-body .gal-grid,
.gal-modal-body #gal-grid,
.gal-modal-body #gal-ba {
    max-width: 100%;
    transform: none !important;   /* clear any leftover slider offset */
}
.gal-modal-body .gi,
.gal-modal-body .gi img,
.gal-modal-body picture {
    max-width: 100%;
    height: auto;
}

/* ═══════════════════════════════════════════════════════════════
   DARK SURFACES & POPUPS
   The :root remap turns the page light; these surfaces stay dark by
   design (hero, marquee, .s-dark sections, footer, mobile menu, chat
   header) and need light text. Last in the file so it wins on source
   order at equal specificity.
   ═══════════════════════════════════════════════════════════════ */

/* ── NAV (scrolled) — light translucent, was hard dark ── */
#nav.stuck { background: rgba(252,239,236,.9); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--border); box-shadow: 0 12px 30px -24px rgba(61,37,48,.5); }

/* ── HERO — dark-plum editorial cover ── */
.hero-bg {
    background:
        radial-gradient(ellipse 100% 60% at 75% 35%, rgba(224,139,166,.12) 0%, transparent 65%),
        radial-gradient(ellipse 55% 90% at 5% 50%, rgba(236,203,163,.10) 0%, transparent 55%),
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(193,90,121,.10) 0%, transparent 60%),
        #2C1220;
}
.hero-bg::after { background: linear-gradient(180deg, transparent 0%, rgba(236,203,163,.25) 30%, rgba(236,203,163,.12) 70%, transparent 100%); }
.hero-img-wrap img { opacity: .58; filter: saturate(.82) brightness(.72) contrast(1.03); }
.hero-img-fade { background: linear-gradient(100deg, rgba(38,15,26,.94) 0%, rgba(38,15,26,.84) 26%, rgba(38,15,26,.66) 52%, rgba(38,15,26,.5) 78%, rgba(38,15,26,.42) 100%); }
.hero-eyebrow { color: #ECCBA3; }
.hero-eyebrow::before { background: linear-gradient(90deg, transparent, #ECCBA3); }
.hero-h1 { color: #FCF2EE; }
.hero-h1 .li { color: #FCF2EE; }
.hero-desc { color: rgba(251,239,234,.92); }
.scroll-cue span { color: rgba(236,203,163,.72); }
.scroll-mouse { border-color: rgba(236,203,163,.5); }
.scroll-mouse::after { background: #ECCBA3; }

/* ── MARQUEE — mulberry band, light text ── */
.marquee-strip { background: #7B2D48; border-top-color: var(--border-lg); border-bottom-color: var(--border-lg); }
.m-item { color: #F3DEE2; }
.m-item.hi { color: #ECCBA3; }
.m-dot { background: #ECCBA3; }

/* ── DARK SECTIONS (.s-dark → testimonials, instagram, contact) ── */
.s-dark { background: var(--grad-plum); color: #F7E7E1; }
.s-dark .h-display { color: #FBEFEA; }
.s-dark .h-display em { color: #ECCBA3; }
.s-dark .eyebrow { color: #ECCBA3; }
.s-dark .section-sub { color: #D9BEC4; }
.s-darker { background: #43202F; }

/* testimonials sit on plum; cards remain light (var(--dark-3)=white) */
.s-dark .insta-handle { color: #ECCBA3; }
.s-dark .btn-ghost { color: #F7E7E1; border-color: rgba(236,203,163,.4); }
.s-dark .btn-ghost:hover { border-color: #ECCBA3; color: #ECCBA3; background: rgba(236,203,163,.06); }

/* contact section: white info card on plum; map filter light-appropriate */
.contact-map iframe { filter: grayscale(.25) contrast(1.02); }

/* ── FOOTER — plum, light text ── */
#footer { background: var(--grad-plum); border-top: 1px solid var(--border-lg); }
.ft-about { color: #C9A9B0; }
.ft-col-title { color: #ECCBA3; }
.ft-links a { color: #C9A9B0; }
.ft-links a:hover { color: #ECCBA3; }
.ft-plain, .ft-note { color: #C9A9B0; }
.ft-tagline { color: rgba(236,203,163,.7); }
.ft-soc { border-color: rgba(236,203,163,.24); color: #ECCBA3; }
.ft-soc:hover { border-color: var(--gold); color: #fff; }
.fb-copy { color: rgba(201,169,176,.8); }
.fb-copy span { color: #ECCBA3; }
.fb-links a { color: rgba(201,169,176,.8); }
.fb-links a:hover { color: #ECCBA3; }
.fb-powered { color: rgba(201,169,176,.7); }
.fb-powered:hover { color: #ECCBA3; }

/* ── MOBILE MENU — plum, light links ── */
#mob-menu { background: var(--grad-plum); }
#mob-menu a:not(.btn) { color: #F7E7E1; }
#mob-menu a:not(.btn):hover { color: #ECCBA3; }

/* ── GURU CHAT HEADER — plum, light text (body stays light) ── */
.guru-head { background: var(--grad-plum); border-bottom: 1px solid var(--border-lg); }
.guru-head-name { color: #FBEFEA; }
.guru-head-sub { color: #ECCBA3; }
.guru-close { color: rgba(236,203,163,.8); }
.guru-close:hover, .guru-close:focus-visible { border-color: #ECCBA3; color: #ECCBA3; }

/* ── "VIEW ALL" CTA text — deeper rose for contrast on light ── */
.svc-viewall-btn, .gal-more-btn { color: var(--gold-ink); background: linear-gradient(135deg, rgba(193,90,121,.08) 0%, rgba(193,90,121,.02) 100%); }
.svc-viewall-btn:hover, .svc-viewall-btn:focus-visible,
.gal-more-btn:hover, .gal-more-btn:focus-visible { border-color: var(--gold); color: var(--gold); }

/* ── GURU link — readable rose on the light chat panel ── */
.guru-link { color: var(--gold-ink); }
.guru-link:hover { text-decoration-color: var(--gold); }

/* ── SUCCESS / STATUS — semantic green, readable on light ── */
.form-status.ok { color: #197a43; }

/* ── BOOKING CONFIRM POPUP — light card ── */
.bc-panel { background: linear-gradient(165deg, #FFFFFF 0%, #FBE7E4 100%); border: 1px solid var(--border-md); box-shadow: 0 26px 70px -30px rgba(61,37,48,.6), 0 0 48px -20px rgba(224,139,166,.4); }
.bc-title { color: var(--ink, #3D2530); }
.bc-body p { color: var(--muted-lt); }
.bc-body strong { color: #197a43; }
.bc-call { border-top-color: var(--border); color: var(--muted) !important; }
.bc-call a { color: var(--gold-ink); }
.bc-call a:hover, .bc-call a:focus-visible { color: var(--gold); }

/* ── SUCCESS TOAST — light card ── */
.bk-toast { background: linear-gradient(160deg, #FFFFFF 0%, #F3FBF5 60%, #FBE7E4 100%); border: 1px solid rgba(47,158,95,.32); box-shadow: 0 26px 70px -30px rgba(61,37,48,.55), 0 0 44px -18px rgba(47,158,95,.28); }
.bk-toast-title { color: #1c6b40; }
.bk-toast-sub { color: var(--muted-lt); }
.bk-toast-btn { border-color: rgba(25,122,67,.45); color: #197a43; }
.bk-toast-btn:hover { border-color: #2f9e5f; background: rgba(47,158,95,.08); color: #17693e; }

/* ── PAGE LOADER — soft blush intro (was dark) ── */
#loader { background: linear-gradient(160deg, #FDECEC 0%, #F9DDDF 55%, #F4CBD3 100%); }
.ldr-name { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: currentColor; color: var(--gold-ink); }
.ldr-sub { color: var(--muted-lt); }
.ldr-bar { background: rgba(156,60,91,.18); }

/* ── CONTRAST CORRECTIONS ──
   Surfaces whose polarity flipped during the retheme; each would be
   unreadable without an explicit fix. */

/* ── NAV over the dark hero ──
   The bar is transparent until .stuck, so it sits on the plum hero.
   Links/'logo tag must be LIGHT there and switch to rosewood once the
   bar gains its blush background on scroll. */
.nav-links a { color: rgba(251,239,234,.92); }
.nav-links a:hover, .nav-links a.active { color: #ECCBA3; }
.nav-logo-tag { color: #ECCBA3; }
.hamburger span { background: #ECCBA3; }

#nav.stuck .nav-links a { color: var(--muted-lt); }
#nav.stuck .nav-links a:hover, #nav.stuck .nav-links a.active { color: var(--gold); }
#nav.stuck .nav-logo-tag { color: var(--gold-ink); }
#nav.stuck .hamburger span { background: var(--gold-ink); }
/* Script logotype: pale foil reads well on plum, rose ink on blush. */
/* background-image (longhand), not background (shorthand) — the shorthand
   resets every background sub-property it doesn't mention, including
   background-clip, which silently discarded the base rule's
   background-clip:text and turned the gradient text into an opaque box
   once #nav.stuck applied. This was the actual cause of the logo
   disappearing on scroll. */
#nav.stuck .nav-logo-name { background-image: var(--grad-rose); }
#nav.stuck .nav-links a::after { background: var(--grad-rose); }
/* The mobile menu is plum, so its hamburger stays light while open. */
#nav.stuck .hamburger.active span { background: #ECCBA3; }

/* Service cards: photo opacity raised and the readability scrim's peak +
   spread pulled back, so the image stays clearly visible while the text
   stays sharp — fixes the washed-out card look. */
.svc-bg-img { opacity: .52; filter: saturate(.95) contrast(1.03); }
.svc-card:hover .svc-bg-img { opacity: .64; transform: scale(1.05); }
/* Readability scrim behind the text, fading out before the card midpoint. */
.svc-card::after {
    background: linear-gradient(155deg, rgba(255,250,248,.62) 0%, rgba(255,250,248,.42) 30%, rgba(255,250,248,.12) 52%, rgba(255,250,248,0) 68%);
    opacity: 1;
}
.svc-card:hover::after { opacity: .9; }
.svc-content { position: relative; z-index: 2; }
.svc-card::before { background: var(--grad-rose); }
.svc-price {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: var(--gold-ink);
    color: var(--gold-ink);
}

/* ── IMAGE HOVER OVERLAYS — dark scrims keep LIGHT content ── */
.ig-ov { background: rgba(44,18,32,.55); color: #FBEFEA; }
.gi-ov { background: linear-gradient(to top, rgba(44,18,32,.72) 0%, transparent 55%); }
.gi-tag { color: #ECCBA3; }
.ba-lbl.bl { color: #FBEFEA; }
.ba-lbl.al { color: #ECCBA3; }

/* ── DECORATIVE FOIL ON LIGHT ──
   The champagne foil ramp all but disappears on blush. Keep it for
   dark surfaces; use the rose ramp for rules/eyebrows on light. */
.gold-rule, .eyebrow::before, .eyebrow::after { background: var(--grad-rose); }
.s-dark .gold-rule,
.s-dark .eyebrow::before,
.s-dark .eyebrow::after { background: var(--grad-rg-h, linear-gradient(90deg,#B37C52 0%,#D8AB7E 30%,#F2D5B4 50%,#D8AB7E 70%,#B37C52 100%)); }

/* Testimonial quote glyph sits on a white card — foil is invisible there. */
.testi-card .tc-q {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: rgba(193,90,121,.28);
    color: rgba(193,90,121,.28);
}
.tc-star { color: #C28A63; }

/* Section headings inside light sections */
.h-display em { color: var(--gold-ink); }
.s-dark .h-display em { color: #ECCBA3; }