/* =====================================================================
   Healing Touch – public website
   Main colours come from CMS settings: --site-primary / --site-accent
   ===================================================================== */
:root {
    --site-primary: #123c3a;
    --site-accent: #c8a165;
    --site-deep: #0b2726;
    --site-ink: #1d2a29;
    --site-muted: #6b7675;
    --site-cream: #faf6f0;
    --site-blush: #f3e5dc;
    --site-line: #ebe3d6;
    --site-radius: 1.25rem;
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Jost', system-ui, sans-serif;
    --shadow-soft: 0 10px 30px rgba(18, 60, 58, .08);
    --shadow-lift: 0 24px 60px rgba(18, 60, 58, .18);
}
body.site { font-family: var(--font-body); color: var(--site-ink); background: #fff; -webkit-font-smoothing: antialiased; }
.site a { color: var(--site-primary); }
.site ::selection { background: var(--site-accent); color: #fff; }

/* ---------- type ---------- */
.display-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.1rem, 3.6vw, 3.2rem); line-height: 1.08; margin-bottom: 1rem; letter-spacing: -.01em; }
.display-title em, .hero-content h1 em, .hero-content .hero-title em { font-style: italic; color: var(--site-accent); font-weight: 500; }
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; text-transform: uppercase; letter-spacing: .26em; font-size: .72rem; color: var(--site-accent); font-weight: 600; margin-bottom: .8rem; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.section-head .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.eyebrow.light { color: #e6cf9f; }
.small-cat { text-transform: uppercase; letter-spacing: .16em; font-size: .68rem; color: var(--site-accent); font-weight: 600; }
.lead-soft { font-size: 1.08rem; line-height: 1.85; color: var(--site-muted); }
.section-dark .lead-soft, .site-banner .lead-soft { color: rgba(255,255,255,.8); }
.link-site { color: var(--site-primary); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--site-accent); padding-bottom: 2px; }
.link-site:hover { color: var(--site-accent); }
.rich p:last-child { margin-bottom: 0; }
.rich img { max-width: 100%; height: auto; border-radius: .8rem; }
.rich .ql-align-center { text-align: center; } .rich .ql-align-right { text-align: right; } .rich .ql-align-justify { text-align: justify; }
.rich blockquote { border-left: 3px solid var(--site-accent); padding: .3rem 0 .3rem 1.2rem; font-family: var(--font-display); font-size: 1.4rem; font-style: italic; color: var(--site-primary); }
.rich ul { padding-left: 1.2rem; } .rich li::marker { color: var(--site-accent); }
.article { font-size: 1.1rem; line-height: 1.9; color: #3a4645; }
.article h2, .article h3 { font-family: var(--font-display); font-weight: 600; margin-top: 2.2rem; color: var(--site-ink); }
.article h2 { font-size: 2rem; } .article h3 { font-size: 1.6rem; }

/* ---------- sections ---------- */
.section { padding: 6.5rem 0; position: relative; }
.section-soft { background: var(--site-cream); }
.section-dark { background: radial-gradient(1200px 500px at 85% 0%, rgba(200,161,101,.18), transparent 60%), linear-gradient(160deg, var(--site-primary), var(--site-deep)); color: #fff; }
.section-dark .display-title { color: #fff; }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 3.5rem; }
.section-head-row { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem; }

/* ---------- buttons ---------- */
.btn { transition: all .25s ease; }
.btn-site { background: linear-gradient(135deg, var(--site-accent), color-mix(in srgb, var(--site-accent) 75%, #6b4a1e)); border: 0; color: #fff !important; border-radius: 999px; padding: .7rem 1.7rem; letter-spacing: .05em; font-weight: 500; box-shadow: 0 10px 24px color-mix(in srgb, var(--site-accent) 35%, transparent); }
.btn-site:hover { transform: translateY(-2px); box-shadow: 0 16px 30px color-mix(in srgb, var(--site-accent) 45%, transparent); }
.btn-site.btn-sm { padding: .42rem 1.1rem; }
.btn-site.btn-lg { padding: .9rem 2.1rem; font-size: 1.02rem; }
.btn-site-outline { border: 1.5px solid var(--site-primary); color: var(--site-primary) !important; border-radius: 999px; padding: .62rem 1.5rem; font-weight: 500; background: transparent; }
.btn-site-outline:hover { background: var(--site-primary); color: #fff !important; }
.btn-site-outline.btn-sm { padding: .38rem 1rem; }
.btn-light-outline { border: 1.5px solid rgba(255,255,255,.75); color: #fff !important; border-radius: 999px; padding: .7rem 1.7rem; background: rgba(255,255,255,.06); backdrop-filter: blur(6px); }
.btn-light-outline:hover { background: #fff; color: var(--site-ink) !important; }
.btn-light-outline.btn-lg { padding: .9rem 2.1rem; }
.btn-icon { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--site-line); display: inline-flex; align-items: center; justify-content: center; color: var(--site-primary) !important; text-decoration: none; }
.btn-icon:hover { background: var(--site-primary); color: #fff !important; border-color: var(--site-primary); }

/* ---------- top bar & header ---------- */
.topbar { background: var(--site-deep); color: rgba(255,255,255,.75); font-size: .8rem; padding: .45rem 0; position: relative; z-index: 1031; }
.topbar a { color: rgba(255,255,255,.75); text-decoration: none; }
.topbar a:hover { color: var(--site-accent); }
.topbar i { color: var(--site-accent); margin-right: .25rem; }
.topbar-sep { width: 1px; background: rgba(255,255,255,.18); align-self: stretch; }
.topbar-login { border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: .05rem .7rem; }
.topbar-login:hover { border-color: var(--site-accent); }
.site-header { position: sticky; top: 0; z-index: 1030; background: rgba(255,255,255,.92); backdrop-filter: saturate(160%) blur(14px); transition: background .3s, box-shadow .3s; }
.site-header.scrolled { box-shadow: 0 8px 30px rgba(0,0,0,.07); background: rgba(255,255,255,.97); }
.site-header .navbar { padding: .9rem 0; transition: padding .3s; }
.site-header.scrolled .navbar { padding: .55rem 0; }
.site-logo { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.site-logo img { height: 52px; width: auto; max-width: 62vw; transition: height .3s; }
.site-header.scrolled .site-logo img { height: 44px; }
.site-logo .logo-light { display: none; }
.site-logo-mark { width: 42px; height: 42px; border-radius: 50%; background: var(--site-primary); color: #f1e3c6; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.site-logo-text { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--site-primary); line-height: 1; }
.site-header .nav-link { color: var(--site-ink); font-size: .88rem; letter-spacing: .06em; padding: .5rem .85rem !important; position: relative; font-weight: 500; }
.site-header .nav-link::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .2rem; height: 1.5px; background: var(--site-accent); transform: scaleX(0); transition: transform .25s; transform-origin: left; }
.site-header .nav-link:hover::after, .site-header .nav-link.active::after { transform: scaleX(1); }
.site-header .nav-link:hover, .site-header .nav-link.active { color: var(--site-accent); }
.site-header .dropdown-toggle::after { border: 0; }
.site-header .dropdown-menu { border: 0; border-radius: 1rem; box-shadow: var(--shadow-lift); padding: .6rem; min-width: 230px; }
.site-header .dropdown-item { border-radius: .6rem; padding: .5rem .8rem; font-size: .92rem; }
.site-header .dropdown-item:hover { background: var(--site-cream); color: var(--site-primary); }
.navbar-toggler { border: 0; font-size: 1.8rem; color: var(--site-primary); }
.navbar-toggler:focus { box-shadow: none; }
/* header floating over the hero (home page) */
@media (min-width: 992px) {
    .has-overlay .site-header.overlay { position: fixed; left: 0; right: 0; top: 34px; background: transparent; backdrop-filter: none; }
    .has-overlay .site-header.overlay:not(.scrolled) .nav-link { color: #fff; }
    .has-overlay .site-header.overlay:not(.scrolled) .logo-dark { display: none; }
    .has-overlay .site-header.overlay:not(.scrolled) .logo-light { display: block; }
    .has-overlay .site-header.overlay:not(.scrolled) .site-logo-text { color: #fff; }
    .has-overlay .site-header.overlay.scrolled { top: 0; background: rgba(255,255,255,.97); backdrop-filter: saturate(160%) blur(14px); }
}

/* ---------- hero ---------- */
.hero { position: relative; }
.hero-slide { min-height: 100vh; min-height: 100svh; background: var(--site-deep) center/cover no-repeat; position: relative; display: flex; align-items: center; padding: 9rem 0 10rem; }
.carousel-item.active .hero-slide { animation: heroZoom 14s ease-out both; }
@keyframes heroZoom { from { background-size: 112%; } to { background-size: 100%; } }
@supports not (background-size: 112%) { .carousel-item.active .hero-slide { animation: none; } }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(95deg, rgba(8,26,25,.9) 0%, rgba(8,26,25,.62) 42%, rgba(8,26,25,.1) 75%), linear-gradient(0deg, rgba(8,26,25,.55), transparent 35%); }
.hero-content { position: relative; color: #fff; }
.hero-content > * { max-width: 680px; }
.hero-content h1, .hero-content .hero-title { font-family: var(--font-display); font-size: clamp(2.8rem, 6.4vw, 5.6rem); font-weight: 600; line-height: .98; letter-spacing: -.015em; text-shadow: 0 4px 30px rgba(0,0,0,.25); }
.hero-content .lead { font-weight: 300; font-size: 1.22rem; line-height: 1.7; opacity: .9; margin-top: 1.3rem; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: .8rem; text-transform: uppercase; letter-spacing: .32em; font-size: .76rem; color: #e6cf9f; margin-bottom: 1.4rem; font-weight: 500; }
.hero-eyebrow span { width: 44px; height: 1px; background: #e6cf9f; }
.carousel-item.active .hero-content > * { animation: fadeUp .9s ease both; }
.carousel-item.active .hero-content > *:nth-child(2) { animation-delay: .12s; }
.carousel-item.active .hero-content > *:nth-child(3) { animation-delay: .24s; }
.carousel-item.active .hero-content > *:nth-child(4) { animation-delay: .36s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero-nav { position: absolute; left: 0; right: 0; bottom: 9.5rem; display: flex; gap: 1.4rem; z-index: 3; justify-content: flex-end; }
.hero-nav button { background: none; border: 0; color: rgba(255,255,255,.55); font-size: .8rem; letter-spacing: .15em; padding: .4rem 0; position: relative; width: 70px; text-align: left; }
.hero-nav button::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: rgba(255,255,255,.25); }
.hero-nav button.active { color: #fff; }
.hero-nav button.active::before { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; background: var(--site-accent); z-index: 1; animation: progress 6.5s linear forwards; }
@keyframes progress { from { width: 0; } to { width: 100%; } }

/* ---------- quick booking ---------- */
.quick-book { position: relative; z-index: 5; margin-top: -5.5rem; }
.quick-book-form { background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-radius: 1.4rem; box-shadow: var(--shadow-lift); padding: 1.3rem 1.4rem; display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; border: 1px solid rgba(255,255,255,.6); }
.qb-title { display: flex; gap: .8rem; align-items: center; padding-right: 1.4rem; border-right: 1px solid var(--site-line); }
.qb-title i { width: 48px; height: 48px; border-radius: 50%; background: var(--site-blush); color: var(--site-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.qb-title strong { display: block; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.1; }
.qb-title small { color: var(--site-muted); font-size: .8rem; }
.qb-field { flex: 1 1 200px; }
.qb-field label { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .16em; color: var(--site-muted); margin-bottom: .1rem; font-weight: 600; }
.quick-book .form-select { border: 0; border-bottom: 1.5px solid var(--site-line); border-radius: 0; padding-left: 0; font-size: 1.05rem; background-color: transparent; }
.quick-book .form-select:focus { box-shadow: none; border-color: var(--site-accent); }

/* ---------- spa picker (home) ---------- */
.spa-picker { position: relative; z-index: 5; margin-top: -4.5rem; }
.spa-picker-box { background: rgba(255,255,255,.97); backdrop-filter: blur(12px); border-radius: 1.4rem; box-shadow: var(--shadow-lift); padding: 1.3rem 1.4rem; display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.spa-picker-list { display: flex; flex-wrap: wrap; gap: .5rem; flex: 1; }
.spa-chip { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--site-line); border-radius: 999px; padding: .55rem 1.05rem; text-decoration: none; color: var(--site-ink) !important; font-weight: 500; font-size: .92rem; background: #fff; transition: all .2s; }
.spa-chip i { color: var(--site-accent); font-size: .8rem; transition: transform .2s; }
.spa-chip:hover { background: var(--site-primary); border-color: var(--site-primary); color: #fff !important; box-shadow: 0 8px 20px rgba(18,60,58,.2); }
.spa-chip:hover i { transform: translateX(3px); color: #e6cf9f; }
.spas-intro { color: rgba(255,255,255,.75); max-width: 420px; }
@media (max-width: 991.98px) { .spa-picker { margin-top: -3rem; } .spa-picker-box .qb-title { border-right: 0; padding-right: 0; width: 100%; } }

/* ---------- highlights ---------- */
.highlights { padding: 3.5rem 0 1rem; }
.highlight { display: flex; gap: 1rem; align-items: center; padding: 1.1rem 1.2rem; border-radius: 1rem; background: #fff; border: 1px solid var(--site-line); height: 100%; transition: all .25s; }
.highlight:hover { border-color: var(--site-accent); box-shadow: var(--shadow-soft); transform: translateY(-3px); }
.highlight i { flex-shrink: 0; width: 52px; height: 52px; border-radius: 1rem; background: linear-gradient(135deg, var(--site-primary), var(--site-deep)); color: #e6cf9f; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; }
.highlight strong { display: block; font-weight: 600; }
.highlight span { font-size: .85rem; color: var(--site-muted); }

/* ---------- split sections ---------- */
.split-frame { position: relative; padding: 0 1.5rem 1.5rem 0; }
.split-frame::before { content: ""; position: absolute; right: 0; bottom: 0; top: 2rem; left: 2rem; border: 1.5px solid var(--site-accent); border-radius: var(--site-radius); opacity: .55; }
.split-section .row.flex-lg-row-reverse .split-frame { padding: 0 0 1.5rem 1.5rem; }
.split-section .row.flex-lg-row-reverse .split-frame::before { left: 0; right: 2rem; }
.split-img { position: relative; border-radius: var(--site-radius); overflow: hidden; aspect-ratio: 4/3; background: var(--site-cream); box-shadow: var(--shadow-lift); }
.split-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s ease; }
.split-frame:hover .split-img img { transform: scale(1.04); }
.split-img.tall { aspect-ratio: 4/5; }
.split-badge { position: absolute; left: -1rem; top: -1rem; width: 84px; height: 84px; border-radius: 50%; background: var(--site-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2rem; box-shadow: 0 14px 30px rgba(0,0,0,.18); }

/* ---------- category tiles ---------- */
.cat-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 340px; border-radius: var(--site-radius); overflow: hidden; background: var(--site-primary) center/cover no-repeat; text-decoration: none; color: #fff !important; padding: 1.5rem; isolation: isolate; transition: transform .35s, box-shadow .35s; }
.cat-tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,26,25,0) 30%, rgba(8,26,25,.88)); z-index: -1; transition: opacity .35s; }
.cat-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.cat-tile-icon { position: absolute; top: 1.2rem; left: 1.2rem; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.18); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff; border: 1px solid rgba(255,255,255,.3); }
.cat-tile-body strong { display: block; font-family: var(--font-display); font-size: 1.85rem; font-weight: 600; line-height: 1.05; }
.cat-tile-body small { color: #e6cf9f; font-size: .85rem; letter-spacing: .03em; }

/* ---------- service cards ---------- */
.service-card, .post-card { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: var(--site-radius); overflow: hidden; text-decoration: none; color: inherit !important; border: 1px solid var(--site-line); transition: transform .35s, box-shadow .35s, border-color .35s; }
.service-card:hover, .post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: transparent; }
.service-card-img, .post-card-img { aspect-ratio: 4/3; position: relative; overflow: hidden; background: var(--site-cream); }
.service-card-img img, .post-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.service-card:hover img, .post-card:hover img { transform: scale(1.07); }
.service-card-img .tag { position: absolute; top: .9rem; left: .9rem; background: rgba(255,255,255,.92); color: var(--site-primary); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; padding: .32rem .7rem; border-radius: 999px; font-weight: 600; }
.service-card-img .tag i { color: var(--site-accent); }
.price-chip { position: absolute; right: .9rem; bottom: .9rem; background: var(--site-primary); color: #fff; border-radius: 999px; padding: .35rem .85rem; font-weight: 600; font-size: .88rem; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.price-chip small { color: #e6cf9f; font-weight: 400; margin-right: .15rem; }
.service-card-body, .post-card-body { padding: 1.35rem 1.4rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.service-card h3, .post-card h3 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; margin: .35rem 0 .5rem; line-height: 1.1; }
.service-card p, .post-card p { color: var(--site-muted); font-size: .92rem; flex: 1; line-height: 1.65; }
.service-card-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--site-line); padding-top: .9rem; font-size: .85rem; color: var(--site-muted); }
.service-card-foot i { color: var(--site-accent); }
.go { color: var(--site-primary); font-weight: 500; font-size: .88rem; }
.go i { transition: transform .25s; display: inline-block; }
.service-card:hover .go i, .post-card:hover .go i { transform: translateX(4px); }
.post-date { position: absolute; left: 1rem; top: 1rem; background: #fff; border-radius: .8rem; padding: .35rem .6rem; text-align: center; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--site-muted); line-height: 1.1; box-shadow: var(--shadow-soft); }
.post-date b { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--site-primary); letter-spacing: 0; }

/* ---------- spa cards ---------- */
.spa-card { background: #fff; border-radius: var(--site-radius); overflow: hidden; height: 100%; display: flex; flex-direction: column; color: var(--site-ink); box-shadow: var(--shadow-soft); transition: transform .35s, box-shadow .35s; }
.spa-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.spa-card-img { display: block; aspect-ratio: 16/10; position: relative; overflow: hidden; }
.spa-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s ease; }
.spa-card:hover .spa-card-img img { transform: scale(1.06); }
.spa-card-count { position: absolute; left: 1rem; top: 1rem; background: rgba(255,255,255,.92); color: var(--site-primary); border-radius: 999px; padding: .28rem .8rem; font-size: .78rem; font-weight: 600; }
.spa-card-body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.spa-card h3 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; margin-bottom: .6rem; }
.spa-card h3 a { text-decoration: none; color: var(--site-ink); }
.spa-card .meta { display: flex; gap: .5rem; font-size: .87rem; color: var(--site-muted); margin-bottom: .35rem; line-height: 1.5; }
.spa-card .meta i { color: var(--site-accent); }
.spa-card-actions { display: flex; gap: .5rem; align-items: center; margin-top: auto; padding-top: 1rem; }

/* ---------- promotions ---------- */
.offers-section { background: linear-gradient(180deg, #fff, var(--site-blush)); }
.promo-card { background: #fff; color: var(--site-ink); border-radius: var(--site-radius); overflow: hidden; height: 100%; display: flex; flex-direction: column; box-shadow: var(--shadow-soft); border: 1px solid var(--site-line); transition: transform .35s, box-shadow .35s; }
.promo-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.promo-card-img { aspect-ratio: 16/9; position: relative; overflow: hidden; }
.promo-card-img img { width: 100%; height: 100%; object-fit: cover; }
.promo-where { position: absolute; left: 1rem; top: 1rem; background: var(--site-accent); color: #fff; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .75rem; border-radius: 999px; font-weight: 600; }
.promo-where.inline { position: static; display: inline-block; margin-bottom: .6rem; }
.promo-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.promo-card h3 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; margin: 0 0 .25rem; }
.promo-sub { font-weight: 600; color: var(--site-accent); margin-bottom: .6rem; letter-spacing: .02em; }
.promo-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: 1.1rem; border-top: 1px dashed var(--site-line); }
.promo-until { font-size: .82rem; color: var(--site-muted); }
.promo-until i { color: var(--site-accent); }

/* ---------- steps ---------- */
.step-card { position: relative; background: #fff; border-radius: var(--site-radius); padding: 2.2rem 1.8rem; height: 100%; border: 1px solid var(--site-line); overflow: hidden; transition: all .3s; }
.step-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.step-num { position: absolute; right: 1.2rem; top: .4rem; font-family: var(--font-display); font-size: 4.5rem; font-weight: 700; color: var(--site-blush); line-height: 1; }
.step-card i { position: relative; width: 58px; height: 58px; border-radius: 50%; background: var(--site-primary); color: #e6cf9f; display: inline-flex; align-items: center; justify-content: center; font-size: 1.45rem; margin-bottom: 1.2rem; }
.step-card h3 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; position: relative; }
.step-card p { color: var(--site-muted); margin: 0; position: relative; }

/* ---------- testimonials ---------- */
.testimonial { position: relative; background: #fff; border-radius: var(--site-radius); padding: 2rem; height: 100%; margin: 0; border: 1px solid var(--site-line); box-shadow: var(--shadow-soft); }
.quote-mark { position: absolute; right: 1.4rem; top: .6rem; font-size: 3.6rem; color: var(--site-blush); }
.testimonial .stars { color: var(--site-accent); margin-bottom: .8rem; letter-spacing: .1em; }
.testimonial blockquote { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.4; position: relative; }
.testimonial figcaption { color: var(--site-primary); font-weight: 600; font-size: .9rem; }

/* ---------- banner & gallery strip ---------- */
.site-banner { position: relative; padding: 7rem 0; color: #fff; background: linear-gradient(120deg, rgba(11,39,38,.92), rgba(18,60,58,.78)), var(--banner-img, none) center/cover no-repeat, var(--site-primary); overflow: hidden; }
.site-banner::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; border: 1px solid rgba(230,207,159,.25); right: -160px; top: -200px; box-shadow: 0 0 0 60px rgba(230,207,159,.05), 0 0 0 120px rgba(230,207,159,.03); }
.site-banner .display-title { color: #fff; font-size: clamp(2.4rem, 4.4vw, 3.8rem); }
.gallery-strip { display: grid; grid-template-columns: repeat(6, 1fr); position: relative; }
.gallery-strip-item { aspect-ratio: 1; background: center/cover no-repeat; position: relative; overflow: hidden; }
.gallery-strip-item::after { content: ""; position: absolute; inset: 0; background: rgba(11,39,38,.0); transition: background .3s; }
.gallery-strip-item:hover::after { background: rgba(11,39,38,.45); }
.gallery-strip-item span { position: absolute; left: 1rem; bottom: .8rem; color: #fff; z-index: 1; font-size: .85rem; opacity: 0; transform: translateY(8px); transition: all .3s; }
.gallery-strip-item:hover span { opacity: 1; transform: none; }
.gallery-strip-more { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; color: var(--site-primary) !important; text-decoration: none; border-radius: 999px; padding: .8rem 1.6rem; font-weight: 500; box-shadow: var(--shadow-lift); }

/* ---------- page hero ---------- */
.page-hero { position: relative; padding: 8.5rem 0 5.5rem; background: radial-gradient(900px 400px at 85% 10%, rgba(200,161,101,.25), transparent 60%), linear-gradient(150deg, var(--site-primary), var(--site-deep)); background-size: cover; background-position: center; color: #fff; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; border: 1px solid rgba(230,207,159,.25); right: -120px; bottom: -220px; box-shadow: 0 0 0 50px rgba(230,207,159,.05), 0 0 0 100px rgba(230,207,159,.03); }
.page-hero.has-img .page-hero-overlay { position: absolute; inset: 0; background: linear-gradient(95deg, rgba(8,26,25,.88), rgba(8,26,25,.45)); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.02; }
.page-hero .lead { font-weight: 300; opacity: .88; max-width: 640px; }
.page-hero-crumbs { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #e6cf9f; margin-bottom: .8rem; }
.page-hero-crumbs a { color: rgba(255,255,255,.75); text-decoration: none; }
.page-hero-crumbs i { font-size: .65rem; margin: 0 .3rem; }

/* ---------- filters / listing ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2.4rem; }
.chip { border: 1px solid var(--site-line); background: #fff; color: var(--site-ink) !important; border-radius: 999px; padding: .5rem 1.2rem; text-decoration: none; font-size: .9rem; transition: all .2s; }
.chip.active, .chip:hover { background: var(--site-primary); border-color: var(--site-primary); color: #fff !important; box-shadow: 0 8px 20px rgba(18,60,58,.2); }
.small-chips { margin-top: -1.2rem; }
.chip-link { font-size: .85rem; color: var(--site-muted) !important; text-decoration: none; padding: .2rem .7rem; border-bottom: 1px solid transparent; }
.chip-link:hover { color: var(--site-accent) !important; border-color: var(--site-accent); }
.cat-block { margin-bottom: 4rem; scroll-margin-top: 110px; }
.cat-title { font-family: var(--font-display); font-weight: 600; font-size: 2.2rem; display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.cat-title::after { content: ""; flex: 1; height: 1px; background: var(--site-line); }

/* ---------- details ---------- */
.crumbs { font-size: .82rem; color: var(--site-muted); margin-bottom: 1.6rem; letter-spacing: .05em; }
.crumbs a { color: var(--site-muted); text-decoration: none; }
.crumbs a:hover { color: var(--site-accent); }
.badge-soft { display: inline-block; background: var(--site-blush); color: var(--site-primary); border-radius: 999px; padding: .3rem .9rem; font-size: .85rem; }
.benefits { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .4rem 1rem; }
.benefits li { padding: .35rem 0; }
.benefits i { color: var(--site-accent); margin-right: .45rem; }
.price-table { border: 1px solid var(--site-line); border-radius: var(--site-radius); overflow: hidden; background: #fff; box-shadow: var(--shadow-soft); }
.price-row { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--site-line); flex-wrap: wrap; transition: background .2s; }
.price-row:hover { background: var(--site-cream); }
.price-row:last-child { border-bottom: 0; }
.price-spa { font-weight: 600; min-width: 150px; text-decoration: none; }
.price-options { flex: 1; display: flex; flex-wrap: wrap; gap: .4rem; }
.price-pill { background: var(--site-cream); border: 1px solid var(--site-line); border-radius: 999px; padding: .28rem .8rem; font-size: .85rem; white-space: nowrap; }
.price-pill b { font-weight: 600; color: var(--site-primary); }
.menu-cat { margin-bottom: 2.8rem; }
.menu-cat h3 { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; color: var(--site-primary); display: flex; align-items: center; gap: 1rem; margin-bottom: .4rem; }
.menu-cat h3::after { content: ""; flex: 1; height: 1px; background: var(--site-line); }
.menu-item { display: flex; gap: 1rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px dashed var(--site-line); flex-wrap: wrap; }
.menu-item-main { flex: 1 1 280px; }
.menu-item-name { font-weight: 600; font-size: 1.08rem; text-decoration: none; color: var(--site-ink) !important; }
.menu-item-name:hover { color: var(--site-accent) !important; }
.menu-item-desc { font-size: .88rem; color: var(--site-muted); }
.menu-item-prices { display: flex; flex-wrap: wrap; gap: .4rem; }
.side-card { background: linear-gradient(160deg, var(--site-cream), var(--site-blush)); border-radius: var(--site-radius); padding: 2rem; border: 1px solid var(--site-line); }
.side-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.8rem; }
.side-card p i { color: var(--site-accent); margin-right: .35rem; }
.map-embed { border-radius: 1rem; overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-soft); }
.map-embed iframe { width: 100%; height: 100%; border: 0; }
.steps { padding-left: 1.2rem; margin: 0; }
.steps li { padding: .3rem 0; }
.steps li::marker { color: var(--site-accent); font-weight: 600; }

/* ---------- forms ---------- */
.site-form { background: #fff; border-radius: var(--site-radius); padding: 2rem; border: 1px solid var(--site-line); box-shadow: var(--shadow-soft); }
.site-form .form-control, .site-form .form-select { border-radius: .8rem; padding: .78rem 1rem; border-color: var(--site-line); background-color: var(--site-cream); }
.site-form .form-control:focus, .site-form .form-select:focus { border-color: var(--site-accent); box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--site-accent) 18%, transparent); background-color: #fff; }
.site-form .form-label { font-size: .78rem; color: var(--site-muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-list > div { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 0; border-bottom: 1px solid var(--site-line); }
.contact-list i { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; background: var(--site-blush); color: var(--site-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.contact-list strong { display: block; font-weight: 600; }
.spa-contact li { padding: .3rem 0; }
.thanks-icon { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, var(--site-accent), #9a7638); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 3rem; margin-bottom: 1.2rem; box-shadow: 0 18px 40px color-mix(in srgb, var(--site-accent) 40%, transparent); }

/* ---------- faq ---------- */
.site-accordion .accordion-item { border: 0; border-bottom: 1px solid var(--site-line); background: transparent; }
.site-accordion .accordion-button { background: transparent; font-weight: 500; font-size: 1.04rem; padding: 1.15rem 0; color: var(--site-ink); box-shadow: none; }
.site-accordion .accordion-button:not(.collapsed) { color: var(--site-primary); }
.site-accordion .accordion-button::after { background-image: none; content: "+"; font-size: 1.5rem; line-height: 1; color: var(--site-accent); transform: none; width: auto; height: auto; }
.site-accordion .accordion-button:not(.collapsed)::after { content: "−"; }
.site-accordion .accordion-body { padding: 0 0 1.2rem; color: var(--site-muted); line-height: 1.75; }

/* ---------- gallery page ---------- */
.gallery-grid { columns: 3 280px; column-gap: 1.1rem; }
.gallery-item { display: block; position: relative; margin-bottom: 1.1rem; border-radius: var(--site-radius); overflow: hidden; break-inside: avoid; }
.gallery-item img { width: 100%; display: block; transition: transform .7s; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 1.1rem .9rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6)); font-size: .92rem; }
.gallery-item.hide { display: none; }
.lightbox { position: fixed; inset: 0; background: rgba(8,20,19,.94); z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 82vh; border-radius: .8rem; }
.lightbox-caption { color: #fff; margin-top: 1rem; }
.lightbox-close { position: absolute; top: 1rem; right: 1.2rem; background: none; border: 0; color: #fff; font-size: 1.8rem; }

/* ---------- footer ---------- */
.site-footer { position: relative; background: var(--site-deep); color: rgba(255,255,255,.72); padding: 0 0 1.5rem; overflow: hidden; }
.footer-glow { position: absolute; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(200,161,101,.16), transparent 65%); right: -200px; top: -250px; }
.footer-cta { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: center; padding: 3.5rem 0; margin-bottom: 3.5rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-cta h2 { font-family: var(--font-display); color: #fff; font-size: clamp(2rem, 3.6vw, 3rem); margin: 0; font-weight: 600; }
.footer-logo img { height: 62px; }
.footer-about { line-height: 1.8; font-size: .93rem; }
.footer-title { font-size: .74rem; text-transform: uppercase; letter-spacing: .2em; color: var(--site-accent); margin-bottom: 1.1rem; font-weight: 600; }
.footer-links li { padding: .25rem 0; font-size: .93rem; }
.footer-links a { color: rgba(255,255,255,.72); text-decoration: none; transition: color .2s, padding .2s; }
.footer-links a:hover { color: #fff; padding-left: 4px; }
.footer-contact li { display: flex; gap: .7rem; }
.footer-contact i { color: var(--site-accent); }
.site-social { display: flex; gap: .6rem; }
.site-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; transition: all .2s; }
.site-social a:hover { background: var(--site-accent); border-color: var(--site-accent); transform: translateY(-3px); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; border-top: 1px solid rgba(255,255,255,.08); margin-top: 3.5rem; padding-top: 1.4rem; font-size: .82rem; color: rgba(255,255,255,.5); }
.staff-links { display: inline-flex; gap: 1rem; }
.credit a { color: #e6cf9f; text-decoration: none; font-weight: 500; }
.credit a:hover { text-decoration: underline; }
.staff-links a { color: rgba(255,255,255,.6); text-decoration: none; }
.staff-links a:hover { color: var(--site-accent); }
.wa-float { position: fixed; right: 1.3rem; bottom: 1.3rem; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff !important; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; box-shadow: 0 12px 30px rgba(37,211,102,.4); z-index: 1040; text-decoration: none; animation: pulse 2.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.45); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .carousel-item.active .hero-slide, .carousel-item.active .hero-content > *, .wa-float { animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
    .site-header .navbar-collapse { padding: 1rem 0; }
    .hero-slide { min-height: 82vh; padding: 5rem 0 7rem; }
    .hero-nav { bottom: 6.5rem; justify-content: flex-start; padding-left: 1.5rem; }
    .quick-book { margin-top: -3.5rem; }
    .qb-title { border-right: 0; padding-right: 0; width: 100%; }
    .quick-book-form .btn { width: 100%; }
    .section { padding: 4.2rem 0; }
    .gallery-strip { grid-template-columns: repeat(3, 1fr); }
    .split-badge { width: 64px; height: 64px; font-size: 1.5rem; }
    .site-form { padding: 1.4rem; }
}