/* =========================================================================
   KAAYA GLOW — EDITORIAL DESIGN SYSTEM
   Scoped, additive stylesheet for the upgraded sections only:
   About, Why Choose Us, Services, Special Offers, Memberships, Reviews,
   Booking dropdown, Footer. Loaded after the existing stylesheets so it
   can safely extend them without touching untouched pages/sections.
   All new component classes are namespaced with "kg-" to avoid colliding
   with the existing .service-card / .membership-card / .review-card etc.
   ========================================================================= */

:root {
    /* ===== Kaaya Glow — Deep Forest luxury palette ===== */
    --kaaya-black: #051F20;
    --kaaya-charcoal: #0B2B26;
    --kaaya-deep: #163832;
    --kaaya-moss: #235347;
    --kaaya-olive: #235347;
    --kaaya-sage: #8EB69B;
    --kaaya-taupe: #B4D3BC;
    --kaaya-beige: #C9E4D2;
    --kaaya-ivory: #DAF1DE;
    --kaaya-white: #FFFFFF;
    --kaaya-gold: #8EB69B;

    --kg-heading-font: 'Cormorant Garamond', serif;
    --kg-body-font: 'Inter', 'Poppins', sans-serif;

    --kg-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --kg-speed-slow: 600ms;
    --kg-speed-mid: 400ms;
    --kg-speed-fast: 250ms;
}

/* ================= SHARED EDITORIAL UTILITIES ================= */

.kg-section { position: relative; }
.kg-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

.kg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--kg-body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kaaya-olive);
    margin-bottom: 18px;
}
.kg-eyebrow::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 1px;
    background: var(--kaaya-gold);
}
.kg-on-dark .kg-eyebrow { color: var(--kaaya-taupe); }
.kg-on-dark .kg-eyebrow::before { background: var(--kaaya-gold); }

.kg-heading {
    font-family: var(--kg-heading-font);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: 0.01em;
    color: var(--kaaya-black);
    text-transform: uppercase;
    margin: 0 0 20px;
}
.kg-heading-xl { font-size: clamp(38px, 5.2vw, 72px); }
.kg-heading-lg { font-size: clamp(32px, 3.6vw, 52px); }
.kg-heading-md { font-size: clamp(26px, 2.6vw, 34px); }
.kg-on-dark .kg-heading { color: var(--kaaya-white); }

.kg-body-text {
    font-family: var(--kg-body-font);
    font-size: 16px;
    line-height: 1.75;
    color: var(--kaaya-charcoal);
    font-weight: 400;
}
.kg-on-dark .kg-body-text { color: var(--kaaya-beige); }

.kg-lede {
    font-family: var(--kg-body-font);
    font-size: 17px;
    line-height: 1.7;
    /* FIX: was var(--kaaya-sage) (#8EB69B), which measures ~2.25:1 against
       white and ~1.89:1 against the site's ivory section backgrounds —
       both fail WCAG AA's 4.5:1 minimum for body text and render as
       near-invisible pale text (reported: About, Services, Team sections).
       --kaaya-moss is already used elsewhere in this file as the "readable
       accent ink" color (the eyebrow labels) and gives ~7.3–8.75:1 on
       these same backgrounds. .kg-on-dark overrides this back to a light
       tone below, which is correct there — taupe-on-charcoal already
       measures ~9.4:1. */
    color: var(--kaaya-moss);
    max-width: 560px;
}
.kg-on-dark .kg-lede { color: var(--kaaya-taupe); }

.kg-number {
    font-family: var(--kg-heading-font);
    font-size: 15px;
    letter-spacing: 0.08em;
    color: var(--kaaya-gold);
    font-weight: 600;
}
/* Homepage only: every "01"–"06" numeral (journey index numbers + the
   Why-Choose-Us card numbers, both use .kg-number) switches to the
   sans-serif body typeface instead of the heading serif. Scoped to
   .kg-home (set on <body> only for index.php — see includes/header.php)
   so other pages reusing .kg-number, like the branch cards on
   branches.php, keep the serif treatment untouched. */
.kg-home .kg-number { font-family: var(--kg-body-font); }

.kg-divider-v {
    width: 1px;
    height: 46px;
    background: var(--kaaya-gold);
    opacity: 0.6;
}

/* Editorial link-style CTA used across every upgraded section */
.kg-link-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--kg-body-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kaaya-black);
    padding: 0 0 4px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--kaaya-olive);
    border-radius: 0;
    cursor: pointer;
    transition: color var(--kg-speed-fast) var(--kg-ease), border-color var(--kg-speed-fast) var(--kg-ease), gap var(--kg-speed-fast) var(--kg-ease);
}
.kg-link-cta svg { width: 15px; height: 15px; transition: transform var(--kg-speed-fast) var(--kg-ease); flex-shrink: 0; }
.kg-link-cta:hover { color: var(--kaaya-gold); border-color: var(--kaaya-gold); }
.kg-link-cta:hover svg { transform: translateX(6px); }
.kg-on-dark .kg-link-cta { color: var(--kaaya-white); border-color: var(--kaaya-taupe); }
.kg-on-dark .kg-link-cta:hover { color: var(--kaaya-gold); border-color: var(--kaaya-gold); }

/* Solid editorial button (for primary CTAs inside dark sections/modals) */
.kg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--kg-body-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 16px 30px;
    border-radius: 2px;
    background: var(--kaaya-white);
    color: var(--kaaya-black);
    border: 1px solid var(--kaaya-white);
    cursor: pointer;
    transition: background var(--kg-speed-fast) var(--kg-ease), color var(--kg-speed-fast) var(--kg-ease), transform var(--kg-speed-fast) var(--kg-ease);
}
.kg-btn svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform var(--kg-speed-fast) var(--kg-ease); }
.kg-btn:hover svg { transform: translateX(4px); }
.kg-btn:hover { background: var(--kaaya-gold); border-color: var(--kaaya-gold); color: var(--kaaya-black); transform: translateY(-2px); }
.kg-btn-outline {
    background: transparent;
    color: var(--kaaya-white);
    border-color: rgba(218,241,222,0.4);
}
.kg-btn-outline:hover { background: var(--kaaya-white); color: var(--kaaya-black); border-color: var(--kaaya-white); }
.kg-btn-sm { padding: 10px 20px; font-size: 11px; }
.kg-btn-dark { background: var(--kaaya-black); color: var(--kaaya-white); border-color: var(--kaaya-black); }
.kg-btn-dark:hover { background: var(--kaaya-gold); border-color: var(--kaaya-gold); color: var(--kaaya-black); }

/* Book Now button on Beauty Package cards */
.package-content { display: flex; flex-direction: column; align-items: flex-start; }
.package-book-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 9px 18px;
    font-family: var(--kg-body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kaaya-black);
    background: var(--kaaya-white);
    border: 1px solid var(--kaaya-white);
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--kg-speed-fast) var(--kg-ease), border-color var(--kg-speed-fast) var(--kg-ease), transform var(--kg-speed-fast) var(--kg-ease);
}
.package-book-btn:hover {
    background: var(--kaaya-gold);
    border-color: var(--kaaya-gold);
    transform: translateY(-2px);
}

/* Reusable entry animation, consistent with the site's existing
   [data-animate] scroll-reveal system in base.css/animation.js */
.kg-section [data-animate] { transition-duration: 600ms; }
@media (prefers-reduced-motion: reduce) {
    .kg-section [data-animate] { transition: none !important; transform: none !important; opacity: 1 !important; }
    .kg-section * { animation: none !important; }
}

/* Visible keyboard focus states across every new interactive element */
.kg-section a:focus-visible,
.kg-section button:focus-visible,
.kg-section [tabindex]:focus-visible,
.kg-section input:focus-visible,
.kg-section select:focus-visible {
    outline: 2px solid var(--kaaya-gold);
    outline-offset: 3px;
}

.kg-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================================
   PAGE HERO SYSTEM
   Replaces the old one-size-fits-all .hero-banner (full-bleed photo +
   centered title) on About / Services / Gallery / Book / Contact with a
   shared, editorial two-column component. Each page picks a media
   variant (split portrait / stacked collage / single frame) and its own
   copy + stat/step/pill row, so no two pages read as the same template.
   ========================================================================= */
.kg-phero { background: var(--kaaya-ivory); padding: 105px 0 75px; overflow: hidden; }
.kg-phero-grid {
    display: grid;
    grid-template-columns: 1fr 0.92fr;
    gap: 64px;
    align-items: center;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}
.kg-phero-content .kg-heading { margin-bottom: 22px; }
.kg-phero-content .kg-lede { margin-bottom: 34px; }
.kg-phero-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

/* ---- Media variant: split portrait (About) ---- */
.kg-phero-media { position: relative; }
.kg-phero-media--split {
    display: grid;
    grid-template-columns: 1fr 0.65fr;
    gap: 18px;
    align-items: end;
}
.kg-phero-media--split .kg-phero-media-main { border-radius: 24px; overflow: hidden; aspect-ratio: 3/4; box-shadow: 0 40px 70px -30px rgba(5,31,32,0.4); }
.kg-phero-media--split .kg-phero-media-accent { border-radius: 24px; overflow: hidden; aspect-ratio: 3/4.6; margin-bottom: -36px; box-shadow: 0 30px 60px -26px rgba(5,31,32,0.4); }
.kg-phero-media--split img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Media variant: single framed shot (Services) ---- */
.kg-phero-media--single { border-radius: 26px; overflow: hidden; aspect-ratio: 4/5; box-shadow: 0 40px 80px -30px rgba(5,31,32,0.42); }
.kg-phero-media--single img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Media variant: overlapping collage (Gallery) ---- */
.kg-phero-media--collage { height: 500px; }
.kg-phero-collage-a, .kg-phero-collage-b, .kg-phero-collage-c {
    position: absolute;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px -26px rgba(5,31,32,0.42);
}
.kg-phero-collage-a { width: 62%; height: 66%; top: 0; right: 0; z-index: 2; }
.kg-phero-collage-b { width: 46%; height: 48%; bottom: 0; left: 0; z-index: 3; border: 6px solid var(--kaaya-ivory); }
.kg-phero-collage-c { width: 36%; height: 40%; top: 14%; left: 6%; z-index: 1; opacity: 0.9; }
.kg-phero-media--collage img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Floating stat badge (used on split/single/collage media) ---- */
.kg-phero-badge {
    position: absolute;
    left: -14px;
    bottom: 34px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--kaaya-black);
    color: var(--kaaya-white);
    padding: 16px 22px;
    border-radius: 16px;
    box-shadow: 0 24px 44px -18px rgba(5,31,32,0.55);
}
.kg-phero-badge strong { font-family: var(--kg-heading-font); font-size: 28px; color: var(--kaaya-gold); line-height: 1; }
.kg-phero-badge span { font-family: var(--kg-body-font); font-size: 11.5px; letter-spacing: 0.03em; line-height: 1.3; max-width: 110px; display: block; color: var(--kaaya-taupe); }

/* ---- Category pill row (Services) ---- */
.kg-phero-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.kg-phero-pill {
    font-family: var(--kg-body-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--kaaya-black);
    background: var(--kaaya-white);
    border: 1px solid rgba(5,31,32,0.16);
    padding: 10px 18px;
    border-radius: 30px;
    transition: background var(--kg-speed-fast) var(--kg-ease), color var(--kg-speed-fast) var(--kg-ease), border-color var(--kg-speed-fast) var(--kg-ease), transform var(--kg-speed-fast) var(--kg-ease);
}
.kg-phero-pill:hover { background: var(--kaaya-olive); color: var(--kaaya-white); border-color: var(--kaaya-olive); transform: translateY(-2px); }

/* ---- Numbered step row (Book Appointment) ---- */
.kg-phero-steps { display: flex; align-items: flex-start; gap: 0; margin-top: 12px; flex-wrap: wrap; }
.kg-phero-step { display: flex; align-items: flex-start; gap: 14px; flex: 0 0 auto; }
.kg-phero-step-num {
    font-family: var(--kg-heading-font);
    font-size: 22px;
    color: transparent;
    -webkit-text-stroke: 1px var(--kaaya-olive);
    flex-shrink: 0;
}
.kg-phero-step-text { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; }
.kg-phero-step-text strong { font-family: var(--kg-body-font); font-size: 13.5px; font-weight: 600; color: var(--kaaya-black); }
.kg-phero-step-text span { font-family: var(--kg-body-font); font-size: 12px; color: var(--kaaya-moss); }
.kg-phero-step-connector { width: 46px; height: 1px; background: rgba(5,31,32,0.25); margin: 20px 16px 0; flex-shrink: 0; }

/* ---- Quick-contact pill row (Contact) ---- */
.kg-phero-contact-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.kg-phero-contact-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--kg-body-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--kaaya-black);
    background: var(--kaaya-white);
    border: 1px solid rgba(5,31,32,0.16);
    padding: 12px 20px;
    border-radius: 30px;
    transition: background var(--kg-speed-fast) var(--kg-ease), color var(--kg-speed-fast) var(--kg-ease), border-color var(--kg-speed-fast) var(--kg-ease), transform var(--kg-speed-fast) var(--kg-ease);
}
.kg-phero-contact-pill svg { width: 15px; height: 15px; color: var(--kaaya-olive); transition: color var(--kg-speed-fast) var(--kg-ease); flex-shrink: 0; }
.kg-phero-contact-pill:hover { background: var(--kaaya-olive); color: var(--kaaya-white); border-color: var(--kaaya-olive); transform: translateY(-2px); }
.kg-phero-contact-pill:hover svg { color: var(--kaaya-white); }

@media (max-width: 992px) {
    .kg-phero { padding: 85px 0 55px; }
    .kg-phero-grid { grid-template-columns: 1fr; gap: 44px; }
    .kg-phero-media--collage { height: 380px; max-width: 460px; margin: 0 auto; }
    .kg-phero-badge { left: 10px; }
    .kg-phero-step-connector { display: none; }
    .kg-phero-steps { flex-direction: column; gap: 18px; }
}

/* =========================================================================
   CONTACT — IMPACT STATEMENT SECTION
   Bold, high-contrast editorial break between the contact hero and the
   form/info panel: a breadcrumb-style headline, two flanking copy blocks
   around a centered product shot, and a four-stat band underneath.
   ========================================================================= */
.kg-impact {
    position: relative;
    background:
        radial-gradient(ellipse 800px 420px at 50% 0%, rgba(142,182,155,0.28), transparent 70%),
        linear-gradient(155deg, var(--kaaya-black) 0%, var(--kaaya-charcoal) 55%, var(--kaaya-olive) 150%);
    padding: 75px 24px 0;
    overflow: hidden;
}
.kg-impact-head { max-width: 1100px; margin: 0 auto; text-align: center; }
.kg-impact-title {
    font-family: var(--kg-heading-font);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--kaaya-white);
    font-size: clamp(26px, 4.2vw, 50px);
    line-height: 1.12;
    letter-spacing: 0.01em;
    margin: 0 0 22px;
}
.kg-impact-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--kg-body-font);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kaaya-taupe);
}
.kg-impact-breadcrumb span:not(.kg-impact-arrow) { white-space: nowrap; }
.kg-impact-arrow { color: var(--kaaya-gold); font-size: 10px; margin: 0 2px; }

.kg-impact-body {
    max-width: 1200px;
    margin: 56px auto 0;
    display: grid;
    grid-template-columns: 1fr 0.9fr 1fr;
    gap: 40px;
    align-items: center;
}
.kg-impact-col h3 {
    font-family: var(--kg-heading-font);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--kaaya-white);
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.3;
    margin: 0 0 14px;
}
.kg-impact-col p {
    font-family: var(--kg-body-font);
    font-size: 14px;
    line-height: 1.75;
    color: var(--kaaya-taupe);
    margin: 0;
}
.kg-impact-col--right { text-align: right; }

.kg-impact-media {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    aspect-ratio: 4/5;
    box-shadow: 0 50px 90px -30px rgba(0,0,0,0.6);
}
.kg-impact-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05); }
.kg-impact-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5,31,32,0) 55%, rgba(5,31,32,0.5) 100%);
}

.kg-impact-stats {
    max-width: 1200px;
    margin: 64px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(218,241,222,0.16);
}
.kg-impact-stat {
    padding: 32px 20px;
    text-align: center;
    border-left: 1px solid rgba(218,241,222,0.16);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kg-impact-stat:first-child { border-left: 0; }
.kg-impact-stat strong {
    font-family: var(--kg-heading-font);
    font-size: clamp(26px, 3vw, 36px);
    color: var(--kaaya-gold);
    line-height: 1;
}
.kg-impact-stat span {
    font-family: var(--kg-body-font);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--kaaya-taupe);
}

@media (max-width: 900px) {
    .kg-impact { padding: 60px 20px 0; }
    .kg-impact-body { grid-template-columns: 1fr; text-align: center; gap: 30px; }
    .kg-impact-col--right { text-align: center; }
    .kg-impact-media { max-width: 320px; margin: 0 auto; }
    .kg-impact-stats { grid-template-columns: repeat(2, 1fr); }
    .kg-impact-stat:nth-child(3) { border-left: 0; }
    .kg-impact-stat:nth-child(1), .kg-impact-stat:nth-child(2) { border-bottom: 1px solid rgba(218,241,222,0.16); }
}

/* =========================================================================
   ABOUT / OUR PHILOSOPHY
   ========================================================================= */
.kg-about { background: var(--kaaya-ivory); padding: 80px 0; overflow: hidden; }
.kg-about-grid {
    display: grid;
    grid-template-columns: 0.9fr 1fr;
    gap: 72px;
    align-items: center;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}
.kg-about-media { position: relative; }
.kg-about-media-main {
    aspect-ratio: 4 / 5;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 40px 80px -30px rgba(5,31,32,0.35);
}
.kg-about-media-main img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--kg-speed-slow) var(--kg-ease);
}
.kg-about-media:hover .kg-about-media-main img { transform: scale(1.04); }
.kg-about-media-accent {
    position: absolute;
    width: 46%;
    aspect-ratio: 3 / 4;
    right: -8%;
    bottom: -10%;
    border-radius: 2px;
    overflow: hidden;
    border: 8px solid var(--kaaya-ivory);
    box-shadow: 0 30px 60px -20px rgba(5,31,32,0.4);
}
.kg-about-media-accent img { width: 100%; height: 100%; object-fit: cover; }

.kg-about-content { max-width: 480px; }
.kg-about-index {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}
.kg-about-lede { margin: 0 0 22px; }
.kg-about-secondary {
    font-style: italic;
    /* FIX: same low-contrast sage-on-light issue as .kg-lede above — this
       sits on .kg-about's ivory background. */
    color: var(--kaaya-moss);
    border-left: 2px solid var(--kaaya-gold);
    padding-left: 18px;
    margin: 0 0 36px;
}
@media (max-width: 992px) {
    .kg-about { padding: 60px 0; }
    .kg-about-grid { grid-template-columns: 1fr; gap: 56px; }
    .kg-about-media-accent { right: 0; bottom: -8%; width: 55%; }
    .kg-about-content { max-width: none; }
}
@media (max-width: 560px) {
    .kg-about-media-accent { display: none; }
}

/* =========================================================================
   WHO WE ARE (About page — mission / vision)
   ========================================================================= */
.kg-who { background: var(--kaaya-white); padding: 70px 0 80px; }
.kg-who-head {
    display: grid;
    grid-template-columns: 0.9fr 1fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 64px;
}
.kg-who-head-title .kg-heading { margin-bottom: 0; }
.kg-who-lede { max-width: 480px; margin: 0 0 4px; }

.kg-who-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 64px;
}
.kg-who-card {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    aspect-ratio: 5 / 4;
    background: var(--kaaya-charcoal);
}
.kg-who-card img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--kg-speed-slow) var(--kg-ease);
}
.kg-who-card:hover img { transform: scale(1.05); }
.kg-who-card::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(5,31,32,0.55) 0%, rgba(5,31,32,0) 55%);
    pointer-events: none;
}
.kg-who-card-panel {
    position: absolute;
    left: 24px; right: 24px; bottom: 24px;
    background: var(--kaaya-white);
    border-radius: 0;
    padding: 26px 28px;
    box-shadow: 0 30px 60px -20px rgba(5,31,32,0.4);
    z-index: 2;
}
.kg-who-card-panel h3 {
    font-family: var(--kg-heading-font);
    font-size: 22px;
    text-transform: uppercase;
    color: var(--kaaya-black);
    margin: 0 0 10px;
}
.kg-who-card-panel p {
    font-family: var(--kg-body-font);
    font-size: 14px;
    line-height: 1.65;
    color: var(--kaaya-moss);
    margin: 0;
}

.kg-who-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    background: var(--kaaya-beige);
    border: 1px solid var(--kaaya-beige);
}
.kg-who-stat {
    background: var(--kaaya-ivory);
    padding: 34px 20px;
    text-align: center;
}
.kg-who-stat-num {
    display: block;
    font-family: var(--kg-heading-font);
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 600;
    color: var(--kaaya-olive);
    margin-bottom: 8px;
}
.kg-who-stat-label {
    display: block;
    font-family: var(--kg-body-font);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kaaya-moss);
}

/* About page: make the numbers the hero of each stat. --kaaya-gold is a light
   sage (only ~1.9:1 on the ivory/white the stats used to sit on), so the stat
   cells and the "01" chip sit on deep forest, where the gold reads at ~6.7:1.
   Labels stay small and quiet underneath. */
.kg-who-stats { background: rgba(142, 182, 155, 0.22); border-color: rgba(142, 182, 155, 0.22); }
.kg-who-stat { background: var(--kaaya-charcoal); padding: 40px 16px 36px; }
.kg-who-stat-num {
    font-size: clamp(46px, 6vw, 76px);
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--kaaya-gold);
    margin-bottom: 12px;
}
.kg-who-stat-label {
    font-size: 11px;
    letter-spacing: 0.1em;
    color: rgba(218, 241, 222, 0.6);
}
.kg-about-index:not(.kg-journey-index) .kg-number {
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--kaaya-gold);
    background: var(--kaaya-charcoal);
    padding: 10px 16px 8px;
    border-radius: 10px;
}
@media (max-width: 480px) {
    .kg-who-stat { padding: 28px 8px 26px; }
    .kg-who-stat-num { font-size: clamp(38px, 12vw, 46px); }
    .kg-who-stat-label { font-size: 10px; letter-spacing: 0.08em; }
}

@media (max-width: 900px) {
    .kg-who { padding: 55px 0 60px; }
    .kg-who-head { grid-template-columns: 1fr; gap: 20px; align-items: start; }
    .kg-who-cards { grid-template-columns: 1fr; gap: 24px; }
    .kg-who-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .kg-who-card-panel { left: 16px; right: 16px; bottom: 16px; padding: 20px; }
}

/* =========================================================================
   FOUNDER (About page)
   ========================================================================= */
.kg-founder { background: var(--kaaya-ivory); padding: 80px 0; overflow: hidden; }
.kg-founder-grid {
    display: grid;
    grid-template-columns: 0.8fr 1fr;
    gap: 72px;
    align-items: center;
}
.kg-founder-media {
    aspect-ratio: 4 / 5;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 40px 80px -30px rgba(5,31,32,0.35);
}
.kg-founder-media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--kg-speed-slow) var(--kg-ease);
}
.kg-founder-media:hover img { transform: scale(1.04); }
.kg-founder-content { max-width: 540px; }
.kg-founder-content .kg-heading { margin: 6px 0 6px; }
.kg-founder-role {
    font-family: var(--kg-body-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kaaya-olive);
    margin: 0 0 28px;
}
.kg-founder-quote {
    font-family: var(--kg-heading-font);
    font-style: italic;
    font-size: 22px;
    line-height: 1.5;
    color: var(--kaaya-black);
    border-left: 2px solid var(--kaaya-gold);
    padding-left: 22px;
    margin: 0 0 26px;
}
.kg-founder-content .kg-body-text { margin: 0 0 30px; }

@media (max-width: 900px) {
    .kg-founder { padding: 60px 0; }
    .kg-founder-grid { grid-template-columns: 1fr; gap: 44px; }
    .kg-founder-content { max-width: none; }
    .kg-founder-quote { font-size: 19px; }
}

/* =========================================================================
   TEAM (About page)
   ========================================================================= */
.kg-team { background: var(--kaaya-white); padding: 80px 0; }
.kg-team-head { max-width: 640px; margin: 0 auto 60px; text-align: center; }
.kg-team-head .kg-eyebrow { justify-content: center; }
.kg-team-head .kg-eyebrow::before { display: none; }
.kg-team-head .kg-lede { margin: 0 auto; }

.kg-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.kg-team-card {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    background: var(--kaaya-ivory);
    transition: transform var(--kg-speed-mid) var(--kg-ease), box-shadow var(--kg-speed-mid) var(--kg-ease);
}
.kg-team-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -24px rgba(5,31,32,0.35); }
.kg-team-card-media { aspect-ratio: 4 / 4.8; overflow: hidden; }
.kg-team-card-media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--kg-speed-slow) var(--kg-ease);
}
.kg-team-card:hover .kg-team-card-media img { transform: scale(1.06); }
.kg-team-card-body {
    padding: 22px 24px 26px;
    border-top: 2px solid var(--kaaya-gold);
}
.kg-team-card-body h3 {
    font-family: var(--kg-heading-font);
    font-size: 20px;
    text-transform: uppercase;
    color: var(--kaaya-black);
    margin: 0 0 8px;
}
.kg-team-card-body p {
    font-family: var(--kg-body-font);
    font-size: 14px;
    line-height: 1.6;
    color: var(--kaaya-moss);
    margin: 0;
}

@media (max-width: 900px) {
    .kg-team { padding: 60px 0; }
    .kg-team-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (max-width: 560px) {
    .kg-team-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
}

/* =========================================================================
   WHY CHOOSE US
   ========================================================================= */
.kg-why { background: var(--kaaya-white); padding: 80px 0; }
.kg-why-head { margin: 0 auto 64px; text-align: left; }
.kg-why-head .kg-eyebrow { justify-content: flex-start; }
.kg-why-head .kg-heading,
.kg-why-head .kg-lede { max-width: 640px; }
.kg-why-head .kg-lede { margin: 0; }

.kg-why-top {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--kaaya-beige);
    border: 1px solid var(--kaaya-beige);
    margin-bottom: 2px;
}
.kg-why-card {
    background: var(--kaaya-white);
    padding: 44px 32px;
}
.kg-why-card .kg-number { display: block; margin-bottom: 22px; font-size: 22px; }
.kg-why-card h3 {
    font-family: var(--kg-heading-font);
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--kaaya-black);
    margin: 0 0 12px;
}
.kg-why-card p {
    font-family: var(--kg-body-font);
    font-size: 15px;
    line-height: 1.7;
    color: var(--kaaya-moss);
    margin: 0;
}

.kg-why-bottom {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2px;
    background: var(--kaaya-beige);
    border: 1px solid var(--kaaya-beige);
}
.kg-why-feature {
    position: relative;
    min-height: 340px;
    overflow: hidden;
    background: var(--kaaya-charcoal);
}
.kg-why-feature img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--kg-speed-slow) var(--kg-ease);
}
.kg-why-feature::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(5,31,32,0.55) 0%, rgba(5,31,32,0) 55%);
}
.kg-why-feature:hover img { transform: scale(1.04); }
.kg-why-feature-content {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 36px;
    z-index: 2;
}
.kg-why-feature-content h3 {
    font-family: var(--kg-heading-font);
    color: var(--kaaya-white);
    font-size: 26px;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.kg-why-feature-content p {
    font-family: var(--kg-body-font);
    color: var(--kaaya-beige);
    font-size: 14px;
    max-width: 380px;
    margin: 0;
}

.kg-why-statement {
    background: var(--kaaya-black);
    padding: 44px 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.kg-why-statement h3 {
    font-family: var(--kg-heading-font);
    color: var(--kaaya-white);
    font-size: clamp(24px, 2.6vw, 32px);
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0;
}
.kg-why-statement-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 30px;
}
.kg-why-statement-tags span {
    font-family: var(--kg-body-font);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kaaya-taupe);
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(142,182,155,0.5);
}

@media (max-width: 992px) {
    .kg-why { padding: 60px 0; }
    .kg-why-top { grid-template-columns: 1fr; }
    .kg-why-bottom { grid-template-columns: 1fr; }
    .kg-why-feature { min-height: 260px; }
}

/* =========================================================================
   SERVICES — asymmetric editorial grid + category/detail modal
   ========================================================================= */
.kg-services { background: var(--kaaya-ivory); padding: 80px 0; }
.kg-services-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    max-width: 1240px;
    margin: 0 auto 56px;
    padding: 0 24px;
}
.kg-services-head .kg-lede { margin: 0; }

/* ---- Home page services grid (kept as-is for index.php) ---- */
.kg-services-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 280px;
    gap: 20px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}
.kg-service-card {
    position: relative;
    grid-column: span 3;
    grid-row: span 1;
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
    background: var(--kaaya-charcoal);
    border: 0;
    padding: 0;
    text-align: left;
    display: block;
    width: 100%;
    height: 100%;
    box-shadow: 0 22px 46px -26px rgba(5,31,32,0.4);
    transition: transform var(--kg-speed-mid) var(--kg-ease), box-shadow var(--kg-speed-mid) var(--kg-ease);
}
.kg-service-card:hover { transform: translateY(-8px); box-shadow: 0 34px 60px -24px rgba(5,31,32,0.5); }
.kg-service-card--wide { grid-column: span 4; }
.kg-service-card--narrow { grid-column: span 2; }
.kg-service-card--tall { grid-row: span 2; }
.kg-service-card img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--kg-speed-slow) var(--kg-ease);
}
.kg-service-card:hover img { transform: scale(1.05); }
.kg-service-card::after {
    content: '';
    position: absolute; inset: 0;
    background: none;
    transition: background var(--kg-speed-mid) var(--kg-ease);
}
.kg-service-card:hover::after { background: none; }
.kg-service-card-body {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 28px;
    z-index: 2;
}
.kg-service-card-number {
    /* Sans-serif to match the body typeface — same change made to every
       other 01–06 numeral on the homepage. Only used in index.php's
       Services grid, so no page-scoping needed here. */
    font-family: var(--kg-body-font);
    color: var(--kaaya-gold);
    font-size: 14px;
    letter-spacing: 0.08em;
    display: block;
    margin-bottom: 10px;
}
.kg-service-card-title {
    font-family: var(--kg-heading-font);
    color: var(--kaaya-white);
    font-size: clamp(20px, 1.6vw, 26px);
    text-transform: uppercase;
    margin: 0 0 8px;
    line-height: 1.15;
}
.kg-service-card-desc {
    font-family: var(--kg-body-font);
    color: var(--kaaya-beige);
    font-size: 13px;
    line-height: 1.6;
    max-width: 260px;
    margin: 0 0 16px;
    opacity: 0.9;
}
.kg-service-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(218,241,222,0.5);
    color: var(--kaaya-white);
    transition: transform var(--kg-speed-fast) var(--kg-ease), background var(--kg-speed-fast) var(--kg-ease);
}
.kg-service-card-arrow svg { width: 15px; height: 15px; }
.kg-service-card:hover .kg-service-card-arrow { background: var(--kaaya-gold); border-color: var(--kaaya-gold); transform: translateX(4px); }

@media (max-width: 992px) {
    .kg-services-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 240px; }
    .kg-service-card, .kg-service-card--wide, .kg-service-card--narrow { grid-column: span 1; }
}
@media (max-width: 560px) {
    .kg-services-grid { grid-template-columns: 1fr; }
}

@media (max-width: 992px) {
    .kg-services { padding: 60px 0; }
    .kg-services-head { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ---- Category drawer (lists services within one category) ---- */
.kg-drawer-overlay,
.kg-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(5,31,32,0.55);
    backdrop-filter: blur(2px);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--kg-speed-mid) var(--kg-ease);
}
.kg-drawer-overlay.is-open,
.kg-modal-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.kg-drawer {
    position: fixed;
    z-index: 1001;
    left: 50%; top: 50%;
    transform: translate(-50%, -48%) scale(0.97);
    width: min(560px, 92vw);
    max-height: 85vh;
    background: var(--kaaya-white);
    border-radius: 4px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    box-shadow: 0 50px 100px -20px rgba(5,31,32,0.5);
    transition: opacity var(--kg-speed-mid) var(--kg-ease), transform var(--kg-speed-mid) var(--kg-ease);
}
.kg-drawer.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.kg-drawer-banner {
    position: relative;
    flex-shrink: 0;
    height: 200px;
    background: var(--kaaya-charcoal);
}
.kg-drawer-banner img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.kg-drawer-banner::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(5,31,32,0.05) 0%, rgba(5,31,32,0.75) 100%);
}
.kg-drawer-banner-text {
    position: absolute; left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 20px 30px 18px;
}
.kg-drawer-banner-text h3 {
    font-family: var(--kg-heading-font);
    font-size: 26px;
    text-transform: uppercase;
    color: var(--kaaya-white);
    margin: 0 0 6px;
}
.kg-drawer-banner-text p { font-family: var(--kg-body-font); font-size: 13px; color: var(--kaaya-beige); margin: 0; }
.kg-drawer-close {
    position: absolute;
    top: 18px; right: 18px;
    z-index: 3;
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(218,241,222,0.6);
    background: rgba(5,31,32,0.35);
    color: var(--kaaya-white);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background var(--kg-speed-fast) var(--kg-ease);
}
.kg-drawer-close:hover { background: rgba(5,31,32,0.6); }
.kg-drawer-close svg { width: 15px; height: 15px; }
.kg-drawer-list { flex: 1; overflow-y: auto; padding: 10px 30px 30px; }
.kg-drawer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    border-bottom: 1px solid var(--kaaya-beige);
    padding: 18px 0;
    font-family: var(--kg-body-font);
}
.kg-drawer-item-info {
    display: block;
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--kg-body-font);
}
.kg-drawer-item-name { font-size: 15px; color: var(--kaaya-black); font-weight: 500; display: block; }
.kg-drawer-item-meta { font-size: 12px; color: var(--kaaya-moss); display: block; margin-top: 4px; }
.kg-drawer-item-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.kg-drawer-item-price { font-family: var(--kg-heading-font); font-size: 17px; color: var(--kaaya-olive); flex-shrink: 0; }
.kg-drawer-item-info:hover .kg-drawer-item-name { color: var(--kaaya-gold); }
.kg-drawer-item-book {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 1px solid var(--kaaya-olive);
    border-radius: 999px;
    font-family: var(--kg-body-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--kaaya-olive);
    background: transparent;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--kg-speed-fast) var(--kg-ease), color var(--kg-speed-fast) var(--kg-ease);
}
.kg-drawer-item-book:hover {
    background: var(--kaaya-olive);
    color: var(--kaaya-white);
}

/* ---- Service detail modal ---- */
.kg-modal {
    position: fixed;
    z-index: 1002;
    background: var(--kaaya-white);
    left: 50%; top: 50%;
    transform: translate(-50%, -48%);
    width: min(720px, 92vw);
    max-height: 88vh;
    overflow: hidden;
    border-radius: 2px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--kg-speed-mid) var(--kg-ease), transform var(--kg-speed-mid) var(--kg-ease);
    display: grid;
    grid-template-columns: 0.9fr 1fr;
    box-shadow: 0 50px 100px -20px rgba(5,31,32,0.5);
}
.kg-modal.is-open { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.kg-modal-media { position: relative; min-height: 260px; background: var(--kaaya-charcoal); }
.kg-modal-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kg-modal-body { padding: 40px 36px; overflow-y: auto; }
.kg-modal-close {
    position: absolute;
    top: 18px; right: 18px;
    z-index: 3;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(218,241,222,0.6);
    background: rgba(5,31,32,0.35);
    color: var(--kaaya-white);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.kg-modal-close svg { width: 15px; height: 15px; }
.kg-modal-category {
    font-family: var(--kg-body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kaaya-olive);
    margin-bottom: 12px;
}
.kg-modal-title {
    font-family: var(--kg-heading-font);
    font-size: clamp(24px, 2.4vw, 32px);
    text-transform: uppercase;
    color: var(--kaaya-black);
    margin: 0 0 16px;
    line-height: 1.15;
}
.kg-modal-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
    font-family: var(--kg-body-font);
}
.kg-modal-meta .kg-modal-duration { font-size: 13px; color: var(--kaaya-moss); letter-spacing: 0.04em; }
.kg-modal-meta .kg-modal-price { font-family: var(--kg-heading-font); font-size: 24px; color: var(--kaaya-olive); }
.kg-modal-desc { font-family: var(--kg-body-font); font-size: 15px; line-height: 1.7; color: var(--kaaya-charcoal); margin: 0 0 26px; font-style: italic; }
.kg-modal-included-label {
    font-family: var(--kg-body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kaaya-black);
    margin-bottom: 14px;
}
.kg-modal-included { list-style: none; padding: 0; margin: 0 0 30px; }
.kg-modal-included li {
    position: relative;
    padding-left: 22px;
    font-family: var(--kg-body-font);
    font-size: 14px;
    color: var(--kaaya-charcoal);
    margin-bottom: 10px;
}
.kg-modal-included li::before {
    content: '';
    position: absolute; left: 0; top: 8px;
    width: 8px; height: 1px;
    background: var(--kaaya-gold);
}
.kg-modal-cta { width: 100%; justify-content: center; background: var(--kaaya-black); color: var(--kaaya-white); border-color: var(--kaaya-black); }
.kg-modal-cta:hover { background: var(--kaaya-gold); border-color: var(--kaaya-gold); }

@media (max-width: 720px) {
    .kg-modal, .kg-drawer {
        left: 0; right: 0; top: auto; bottom: 0; transform: translateY(100%);
        width: 100%; max-width: 100%;
        border-radius: 16px 16px 0 0;
        grid-template-columns: 1fr;
        max-height: 90vh;
    }
    .kg-modal.is-open, .kg-drawer.is-open { transform: translateY(0); }
    .kg-modal-media { min-height: 180px; }
    .kg-drawer-banner { height: 160px; }
}
body.kg-lock-scroll { overflow: hidden; }

/* SPECIAL OFFERS: now assets/css/kg-seasonal-offers.css */

/* =========================================================================
   MEMBERSHIPS — luxury minimal card deck
   ========================================================================= */
.kg-memberships { background: var(--kaaya-black); padding: 88px 0; }
.kg-memberships-head { max-width: 640px; margin: 0 auto 64px; text-align: center; }
.kg-memberships-head .kg-eyebrow { justify-content: center; }
.kg-memberships-head .kg-eyebrow::before { display: none; }
.kg-memberships-head .kg-lede { margin: 0 auto; }

/* ---- "Gallery hero" treatment (art-gallery reference layout) ----
   Rounded pill badge, mixed-weight heading with an italic accent word
   and a small inline orb, a centered pill CTA, and a soft curved seam
   that flows into the plan cards below — echoing the reference hero's
   pill nav + big statement headline + swooping curve into the photo row. */
.kg-gallery-hero { padding-bottom: 0; overflow: hidden; }
.kg-gallery-head { position: relative; padding-bottom: 56px; }
.kg-gallery-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: 999px;
    background: rgba(218,241,222,0.08);
    border: 1px solid rgba(218,241,222,0.22);
    font-family: var(--kg-body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kaaya-taupe);
    margin-bottom: 26px;
}
.kg-gallery-badge svg { width: 13px; height: 13px; color: var(--kaaya-gold); }
.kg-gallery-heading { position: relative; display: inline-block; }
.kg-gallery-heading em {
    font-style: italic;
    font-weight: 400;
    color: var(--kaaya-gold);
}
.kg-gallery-heading-orb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--kaaya-gold);
    color: var(--kaaya-black);
    margin-left: 10px;
    vertical-align: middle;
    transform: translateY(-6px);
}
.kg-gallery-heading-orb svg { width: 15px; height: 15px; }
.kg-gallery-lede { margin: 0 auto 30px; }
.kg-gallery-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 17px 32px;
    border-radius: 999px;
    background: var(--kaaya-white);
    color: var(--kaaya-black);
    font-family: var(--kg-body-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background var(--kg-speed-fast) var(--kg-ease), color var(--kg-speed-fast) var(--kg-ease), transform var(--kg-speed-fast) var(--kg-ease);
}
.kg-gallery-pill-btn svg { width: 14px; height: 14px; transition: transform var(--kg-speed-fast) var(--kg-ease); }
.kg-gallery-pill-btn:hover { background: var(--kaaya-gold); transform: translateY(-2px); }
.kg-gallery-pill-btn:hover svg { transform: translateX(4px); }

/* The curved seam: a light arc cut from the dark hero, revealing the
   plan-card row underneath as if it were photos peeking through a
   scalloped bottom edge, matching the reference template's swoop. */
.kg-gallery-curve {
    height: 64px;
    margin-top: -1px;
    background: var(--kaaya-black);
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.kg-gallery-stage { margin-top: -8px; }

/* Plan cards, restyled to read as an image-forward gallery collage
   rather than pricing tiles — bigger radius, quieter chrome. */
.kg-gallery-hero .kg-deck-card { border-radius: 28px; overflow: hidden; }
.kg-gallery-hero .kg-deck-card-media { border-radius: 28px 28px 0 0; }

.kg-deck-stage {
    --deck-center-w: min(600px, 54vw);
    --deck-peek-w: clamp(64px, 9vw, 128px);
    height: 560px;
    max-width: 1360px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.kg-deck-track {
    position: relative;
    width: 100%;
    height: 100%;
    touch-action: pan-y;
}
/* Editorial "peek" deck — one full slide centered in the stage, its
   neighbours cropped to slim, quiet edge panels (no labels — the cursor
   and a faint brightening on hover are the only affordance), and a
   restrained dot + arrow pagination below. Motion is plain left/width,
   no 3D coverflow. */
.kg-deck-card {
    position: absolute;
    top: 50%;
    border-radius: 4px;
    background: var(--kaaya-charcoal);
    cursor: pointer;
    overflow: hidden;
    transition: left 750ms var(--kg-ease), width 750ms var(--kg-ease), height 750ms var(--kg-ease),
                transform 750ms var(--kg-ease), opacity 600ms var(--kg-ease),
                box-shadow 750ms var(--kg-ease);
}
.kg-deck-card[data-pos="0"] {
    left: 50%;
    width: var(--deck-center-w);
    height: 100%;
    transform: translate(-50%, -50%);
    z-index: 5;
    opacity: 1;
    box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7);
    border: 1px solid rgba(255,255,255,0.08);
}
.kg-deck-card[data-pos="-1"] {
    left: 0;
    width: var(--deck-peek-w);
    height: 88%;
    transform: translateY(-50%);
    z-index: 2;
    opacity: 0.55;
    border: 0;
    border-radius: 4px 0 0 4px;
}
.kg-deck-card[data-pos="1"] {
    left: calc(100% - var(--deck-peek-w));
    width: var(--deck-peek-w);
    height: 88%;
    transform: translateY(-50%);
    z-index: 2;
    opacity: 0.55;
    border: 0;
    border-radius: 0 4px 4px 0;
}
.kg-deck-card[data-pos="far"] {
    left: 50%;
    width: var(--deck-center-w);
    height: 100%;
    transform: translate(-50%, -50%) scale(0.94);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}
.kg-deck-card[data-pos="-1"]:hover,
.kg-deck-card[data-pos="1"]:hover { opacity: 0.85; }

/* Quiet tint on the side panels — legible without a label or border,
   the crop and dim alone read as "more this way". */
.kg-deck-card[data-pos="-1"]::before,
.kg-deck-card[data-pos="1"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(5,31,32,0.18);
    z-index: 1;
    transition: background 450ms var(--kg-ease);
}
.kg-deck-card[data-pos="-1"]:hover::before,
.kg-deck-card[data-pos="1"]:hover::before { background: rgba(5,31,32,0.08); }

.kg-deck-card-media {
    position: absolute;
    inset: 0;
    background: var(--kaaya-black);
}
.kg-deck-card-media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 900ms var(--kg-ease);
}
.kg-deck-card[data-pos="0"]:hover .kg-deck-card-media img { transform: scale(1.035); }
.kg-deck-card-media::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(5,31,32,0) 48%, rgba(5,31,32,0.5) 80%, rgba(5,31,32,0.65) 100%);
}
.kg-deck-card-badge,
.kg-deck-card-menu {
    position: absolute;
    top: 22px;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid rgba(218,241,222,0.4);
    color: var(--kaaya-white);
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transition: opacity 350ms ease, border-color 250ms ease, background 250ms ease;
}
.kg-deck-card-badge:hover,
.kg-deck-card-menu:hover { border-color: var(--kaaya-gold); background: rgba(142,182,155,0.12); }
.kg-deck-card-badge { left: 22px; color: var(--kaaya-gold); border-color: rgba(142,182,155,0.5); }
.kg-deck-card-badge svg { width: 13px; height: 13px; }
.kg-deck-card-menu { right: 22px; }
.kg-deck-card-menu svg { width: 15px; height: 15px; }

.kg-deck-card-media-foot {
    position: absolute; left: 32px; right: 32px; bottom: 134px;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transition: opacity 400ms ease 120ms, transform 400ms ease 120ms;
    transform: translateY(6px);
}
.kg-deck-card-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--kg-body-font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kaaya-gold);
    margin-bottom: 14px;
}
.kg-deck-card-label::before {
    content: '';
    width: 16px;
    height: 1px;
    background: var(--kaaya-gold);
}
.kg-deck-card-name {
    font-family: var(--kg-heading-font);
    font-weight: 400;
    font-size: 34px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--kaaya-white);
    margin: 0;
    line-height: 1.12;
}

.kg-deck-card-foot {
    position: absolute; left: 32px; right: 32px; bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 0 0 30px;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transition: opacity 400ms ease 120ms, transform 400ms ease 120ms;
    transform: translateY(6px);
}
.kg-deck-card-foot::after {
    content: '';
    position: absolute;
    left: -32px; right: -32px; top: -22px; bottom: 0;
    background: rgba(5,31,32,0.97);
    z-index: -1;
}
.kg-deck-card-foot::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: rgba(218,241,222,0.16);
}
.kg-deck-card[data-pos="0"] .kg-deck-card-badge,
.kg-deck-card[data-pos="0"] .kg-deck-card-menu,
.kg-deck-card[data-pos="0"] .kg-deck-card-media-foot,
.kg-deck-card[data-pos="0"] .kg-deck-card-foot {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.kg-deck-card-foot-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding-top: 20px; }
.kg-deck-card-foot-title {
    font-family: var(--kg-heading-font);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.3;
    color: var(--kaaya-white);
}
.kg-deck-card-foot-title small { font-family: var(--kg-body-font); font-size: 11px; letter-spacing: 0.04em; color: var(--kaaya-taupe); margin-left: 2px; }
.kg-deck-card-foot-sub {
    font-family: var(--kg-body-font);
    font-size: 12px;
    line-height: 1.4;
    color: var(--kaaya-taupe);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kg-deck-card-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--kg-body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kaaya-black);
    background: var(--kaaya-gold);
    border: 1px solid var(--kaaya-gold);
    padding: 13px 22px;
    border-radius: 2px;
    cursor: pointer;
    transition: background var(--kg-speed-fast) var(--kg-ease), color var(--kg-speed-fast) var(--kg-ease), transform var(--kg-speed-fast) var(--kg-ease);
}
.kg-deck-card-cta svg { width: 13px; height: 13px; }
.kg-deck-card-cta:hover { background: transparent; color: var(--kaaya-white); transform: translateY(-2px); }

.kg-deck-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-top: 44px;
}
.kg-deck-arrow {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(218,241,222,0.24);
    background: transparent;
    color: var(--kaaya-white);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background var(--kg-speed-fast) var(--kg-ease), border-color var(--kg-speed-fast) var(--kg-ease), color var(--kg-speed-fast) var(--kg-ease);
}
.kg-deck-arrow:hover { background: var(--kaaya-gold); border-color: var(--kaaya-gold); color: var(--kaaya-black); }
.kg-deck-arrow svg { width: 15px; height: 15px; }
.kg-deck-dots { display: flex; align-items: center; gap: 8px; }
.kg-deck-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(218,241,222,0.28);
    border: 0;
    cursor: pointer;
    padding: 0;
    transition: background var(--kg-speed-fast) var(--kg-ease), width var(--kg-speed-fast) var(--kg-ease);
}
.kg-deck-dot.is-active { background: var(--kaaya-gold); width: 20px; border-radius: 3px; }

.kg-memberships-foot {
    text-align: center;
    margin-top: 44px;
}

@media (max-width: 992px) {
    .kg-deck-stage { --deck-peek-w: clamp(48px, 8vw, 90px); height: 500px; }
    .kg-deck-card[data-pos="0"] { --deck-center-w: min(560px, 68vw); }
}
@media (max-width: 768px) {
    .kg-memberships { padding: 64px 0; }
    .kg-deck-stage { --deck-peek-w: 28px; height: 460px; }
    .kg-deck-card[data-pos="0"] { --deck-center-w: 80vw; }
}
@media (max-width: 560px) {
    .kg-deck-stage { height: 440px; }
    .kg-deck-card[data-pos="0"] { --deck-center-w: 88vw; border-radius: 4px; }
    .kg-deck-card[data-pos="-1"],
    .kg-deck-card[data-pos="1"] { opacity: 0; pointer-events: none; }
    .kg-deck-card-foot,
    .kg-deck-card-foot-text { flex-direction: column; align-items: flex-start; }
    .kg-deck-card-cta { width: 100%; justify-content: center; align-self: stretch; }
}

/* =========================================================================
   MEMBERSHIPS V2 — plan-first card treatment
   The original deck put all of the useful plan information into a small
   footer over the image. Keep the deck interaction, but give the active
   card a readable editorial image header + generous plan body so visitors
   can compare value before opening the detail modal.
   ========================================================================= */
.kg-deck-stage { height: 600px; }
.kg-deck-card[data-pos="0"] {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 10px;
    background: var(--kaaya-ivory);
    border: 1px solid rgba(218,241,222,0.18);
    box-shadow: 0 32px 80px -24px rgba(0,0,0,0.72);
}
.kg-deck-card[data-pos="0"].is-popular {
    border-color: rgba(142,182,155,0.8);
    box-shadow: 0 32px 90px -24px rgba(142,182,155,0.26);
}
.kg-deck-card[data-pos="0"] .kg-deck-card-media {
    position: relative;
    inset: auto;
    height: 238px;
    flex: 0 0 238px;
    background: var(--kaaya-charcoal);
}
.kg-deck-card[data-pos="0"] .kg-deck-card-media img {
    object-position: center 42%;
}
.kg-deck-card[data-pos="0"] .kg-deck-card-media::after {
    background: linear-gradient(180deg, rgba(5,31,32,0.28) 0%, rgba(5,31,32,0.02) 42%, rgba(5,31,32,0.78) 100%);
}
.kg-deck-card-topline {
    position: absolute;
    top: 18px;
    left: 22px;
    right: 22px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.kg-deck-card-index {
    color: rgba(255,255,255,0.78);
    font-family: var(--kg-body-font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
}
.kg-deck-card-popular {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid rgba(218,241,222,0.4);
    border-radius: 999px;
    color: var(--kaaya-white);
    background: rgba(5,31,32,0.42);
    backdrop-filter: blur(8px);
    font-family: var(--kg-body-font);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    white-space: nowrap;
}
.kg-deck-card-popular svg {
    width: 11px;
    height: 11px;
    color: var(--kaaya-gold);
}
.kg-deck-card[data-pos="0"] .kg-deck-card-media-foot {
    left: 25px;
    right: 25px;
    bottom: 23px;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.kg-deck-card[data-pos="0"] .kg-deck-card-label {
    margin-bottom: 9px;
    color: var(--kaaya-beige);
    font-size: 9px;
}
.kg-deck-card[data-pos="0"] .kg-deck-card-label::before {
    width: 13px;
    background: var(--kaaya-gold);
}
.kg-deck-card[data-pos="0"] .kg-deck-card-name {
    font-size: clamp(28px, 3vw, 38px);
    letter-spacing: 0.015em;
}
.kg-deck-card-body {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    padding: 22px 25px 21px;
    color: var(--kaaya-black);
    background:
        radial-gradient(circle at 100% 0%, rgba(142,182,155,0.22), transparent 34%),
        var(--kaaya-ivory);
}
.kg-deck-card-price {
    display: flex;
    align-items: baseline;
    gap: 7px;
    line-height: 1;
}
.kg-deck-card-price-value {
    color: var(--kaaya-black);
    font-family: var(--kg-heading-font);
    font-size: 35px;
    font-weight: 500;
}
.kg-deck-card-price-period {
    color: var(--kaaya-moss);
    font-family: var(--kg-body-font);
    font-size: 11px;
    letter-spacing: 0.05em;
}
.kg-deck-card-description {
    max-width: 470px;
    margin: 8px 0 17px;
    color: var(--kaaya-moss);
    font-family: var(--kg-body-font);
    font-size: 12px;
    line-height: 1.55;
}
.kg-deck-card-benefits-label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    color: var(--kaaya-black);
    font-family: var(--kg-body-font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.kg-deck-card-benefits-label::after {
    content: '';
    height: 1px;
    flex: 1;
    background: rgba(35,83,71,0.16);
}
.kg-deck-card-benefits {
    display: grid;
    gap: 8px;
    margin: 0;
    list-style: none;
}
.kg-deck-card-benefits li {
    position: relative;
    padding-left: 20px;
    color: var(--kaaya-moss);
    font-family: var(--kg-body-font);
    font-size: 11px;
    line-height: 1.35;
}
.kg-deck-card-benefits li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: -1px;
    color: var(--kaaya-olive);
    font-size: 12px;
    font-weight: 700;
}
.kg-deck-card-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(35,83,71,0.16);
}
.kg-deck-card-action-note {
    color: var(--kaaya-moss);
    font-family: var(--kg-body-font);
    font-size: 10px;
    line-height: 1.35;
}
.kg-deck-card-cta {
    padding: 12px 16px;
    border-radius: 999px;
    color: var(--kaaya-black);
    background: var(--kaaya-gold);
    border-color: var(--kaaya-gold);
    font-size: 10px;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.kg-deck-card-cta:hover {
    color: var(--kaaya-white);
    background: var(--kaaya-black);
    border-color: var(--kaaya-black);
}
.kg-deck-card:not([data-pos="0"]) .kg-deck-card-body {
    display: none;
}
.kg-deck-card:not([data-pos="0"]) .kg-deck-card-media {
    position: absolute;
    inset: 0;
    height: auto;
}
.kg-deck-card:not([data-pos="0"]) .kg-deck-card-media-foot {
    opacity: 0;
    visibility: hidden;
}
.kg-deck-card:not([data-pos="0"]) .kg-deck-card-topline {
    opacity: 0;
}

@media (max-width: 768px) {
    .kg-deck-stage { height: 560px; }
    .kg-deck-card[data-pos="0"] .kg-deck-card-media {
        height: 205px;
        flex-basis: 205px;
    }
    .kg-deck-card-body { padding: 19px 20px 18px; }
    .kg-deck-card-action-note { max-width: 120px; }
}
@media (max-width: 560px) {
    .kg-deck-stage { height: 540px; }
    .kg-deck-card[data-pos="0"] { height: 100%; }
    .kg-deck-card[data-pos="0"] .kg-deck-card-media {
        height: 190px;
        flex-basis: 190px;
    }
    .kg-deck-card[data-pos="0"] .kg-deck-card-media-foot {
        left: 20px;
        right: 20px;
    }
    .kg-deck-card-topline { left: 18px; right: 18px; }
    .kg-deck-card-popular { padding: 6px 8px; font-size: 8px; }
    .kg-deck-card-price-value { font-size: 31px; }
    .kg-deck-card-action { align-items: flex-end; }
    .kg-deck-card-action-note { display: none; }
    .kg-deck-card-cta { width: 100%; justify-content: center; }
}

/* =========================================================================
   MEMBERSHIP DECK — screenshot match
   Compact image-led cards with a flat, unfiltered photo area. The previous
   version added a linear tint over the photography; keep the type readable
   through the solid information rail instead of tinting the image.
   ========================================================================= */
.kg-deck-stage { height: 430px; }
.kg-deck-card[data-pos="0"] {
    height: 326px;
    border-radius: 12px;
    background: var(--kaaya-charcoal);
    border: 1px solid rgba(218,241,222,0.34);
    box-shadow: 0 26px 58px -20px rgba(0,0,0,0.72);
}
.kg-deck-card[data-pos="0"].is-popular {
    border-color: rgba(142,182,155,0.9);
    box-shadow: 0 30px 70px -20px rgba(142,182,155,0.28);
}
.kg-deck-card[data-pos="0"] .kg-deck-card-media {
    height: 235px;
    flex-basis: 235px;
}
.kg-deck-card-media::after {
    background: transparent !important;
}
.kg-deck-card[data-pos="0"] .kg-deck-card-topline {
    top: 15px;
    left: 16px;
    right: 16px;
}
.kg-deck-card-index {
    width: 30px;
    height: 30px;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    background: rgba(5,31,32,0.46);
    color: rgba(255,255,255,0.7);
    font-size: 0;
}
.kg-deck-card-index::after {
    content: '✦';
    display: block;
    color: var(--kaaya-gold);
    font-size: 13px;
    line-height: 30px;
    text-align: center;
}
.kg-deck-card-popular {
    padding: 7px 10px;
    border-color: rgba(218,241,222,0.36);
    background: rgba(5,31,32,0.46);
    font-size: 9px;
}
.kg-deck-card[data-pos="0"] .kg-deck-card-media-foot {
    left: 20px;
    right: 20px;
    bottom: 18px;
}
.kg-deck-card[data-pos="0"] .kg-deck-card-label {
    display: inline-flex;
    margin-bottom: 8px;
    padding: 5px 9px;
    border-radius: 999px;
    color: var(--kaaya-beige);
    background: rgba(142,182,155,0.74);
    font-size: 8px;
    letter-spacing: 0.12em;
}
.kg-deck-card[data-pos="0"] .kg-deck-card-label::before {
    display: none;
}
.kg-deck-card[data-pos="0"] .kg-deck-card-name {
    font-size: 27px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.62);
}
.kg-deck-card-body {
    display: flex;
    flex: 1 1 91px;
    min-height: 91px;
    flex-direction: row;
    align-items: center;
    gap: 13px;
    padding: 13px 20px 14px;
    color: var(--kaaya-white);
    background: var(--kaaya-charcoal);
}
.kg-deck-card-price {
    flex: 0 0 auto;
    display: block;
    line-height: 1;
}
.kg-deck-card-price-value {
    color: var(--kaaya-white);
    font-size: 19px;
}
.kg-deck-card-price-period {
    margin-left: 3px;
    color: var(--kaaya-taupe);
    font-size: 10px;
}
.kg-deck-card-description {
    min-width: 0;
    flex: 1;
    margin: 0;
    overflow: hidden;
    color: var(--kaaya-taupe);
    font-size: 10px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kg-deck-card-benefits-label,
.kg-deck-card-benefits,
.kg-deck-card-action-note {
    display: none;
}
.kg-deck-card-action {
    flex: 0 0 auto;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
}
.kg-deck-card-cta {
    padding: 11px 15px;
    border-radius: 999px;
    color: var(--kaaya-black);
    background: var(--kaaya-beige);
    border-color: var(--kaaya-beige);
    font-size: 9px;
    letter-spacing: 0.08em;
}
.kg-deck-card-cta:hover {
    color: var(--kaaya-black);
    background: var(--kaaya-gold);
    border-color: var(--kaaya-gold);
}
@media (max-width: 768px) {
    .kg-deck-stage { height: 400px; }
    .kg-deck-card[data-pos="0"] { height: 312px; }
    .kg-deck-card[data-pos="0"] .kg-deck-card-media {
        height: 220px;
        flex-basis: 220px;
    }
}
@media (max-width: 560px) {
    .kg-deck-stage { height: 365px; }
    .kg-deck-card[data-pos="0"] { height: 300px; }
    .kg-deck-card[data-pos="0"] .kg-deck-card-media {
        height: 205px;
        flex-basis: 205px;
    }
    .kg-deck-card-body {
        gap: 7px;
        padding: 12px 14px;
    }
    .kg-deck-card-description { display: none; }
    .kg-deck-card-price-value { font-size: 17px; }
    .kg-deck-card-cta { padding: 10px 12px; }
}

/* Reference proportions + palette refinement */
.kg-memberships {
    min-height: 740px;
    background: #252E1D;
}
.kg-deck-stage {
    --deck-center-w: 414px;
    --deck-peek-w: 320px;
    height: 430px;
    max-width: 1000px;
}
.kg-deck-card[data-pos="0"] {
    width: var(--deck-center-w);
    height: 320px;
    background: #303A27;
    border-color: #747D5D;
    border-radius: 17px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
}
.kg-deck-card[data-pos="-1"],
.kg-deck-card[data-pos="1"] {
    width: var(--deck-peek-w);
    height: 268px;
    opacity: 0.62;
    filter: brightness(0.78);
    border-radius: 12px;
}
.kg-deck-card[data-pos="-1"] {
    left: calc(50% - 500px);
}
.kg-deck-card[data-pos="1"] {
    left: calc(50% + 180px);
}
.kg-deck-card[data-pos="-1"]::before,
.kg-deck-card[data-pos="1"]::before {
    background: rgba(29,37,24,0.22);
}
.kg-deck-card[data-pos="-1"]:hover,
.kg-deck-card[data-pos="1"]:hover {
    opacity: 0.78;
    filter: brightness(0.9);
}
.kg-deck-card[data-pos="0"] .kg-deck-card-media {
    height: 235px;
    flex-basis: 235px;
}
.kg-deck-card-topline {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.kg-deck-card[data-pos="0"] .kg-deck-card-index {
    background: rgba(54,58,43,0.72);
}
.kg-deck-card-menu {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: 8px;
    border: 0;
    border-radius: 50%;
    background: rgba(54,58,43,0.72);
    color: rgba(242,235,213,0.82);
    opacity: 1;
    visibility: visible;
}
.kg-deck-card-menu svg {
    width: 13px;
    height: 13px;
}
.kg-deck-card[data-pos="-1"] .kg-deck-card-menu,
.kg-deck-card[data-pos="1"] .kg-deck-card-menu {
    margin-left: auto;
}
.kg-deck-card[data-pos="-1"] .kg-deck-card-media-foot,
.kg-deck-card[data-pos="1"] .kg-deck-card-media-foot {
    left: 18px;
    right: 18px;
    bottom: 78px;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.kg-deck-card[data-pos="-1"] .kg-deck-card-label,
.kg-deck-card[data-pos="1"] .kg-deck-card-label {
    margin-bottom: 7px;
    color: #303A27;
    background: #C8D39A;
    font-size: 7px;
}
.kg-deck-card[data-pos="-1"] .kg-deck-card-name,
.kg-deck-card[data-pos="1"] .kg-deck-card-name {
    font-size: 22px;
    color: #F2EBD5;
}
.kg-deck-card[data-pos="-1"] .kg-deck-card-body,
.kg-deck-card[data-pos="1"] .kg-deck-card-body {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 70px;
    height: 70px;
    padding: 10px 16px;
}
.kg-deck-card[data-pos="-1"] .kg-deck-card-description,
.kg-deck-card[data-pos="1"] .kg-deck-card-description {
    display: none;
}
.kg-deck-card[data-pos="-1"] .kg-deck-card-price-value,
.kg-deck-card[data-pos="1"] .kg-deck-card-price-value {
    font-size: 16px;
}
.kg-deck-card[data-pos="-1"] .kg-deck-card-cta,
.kg-deck-card[data-pos="1"] .kg-deck-card-cta {
    min-width: 84px;
    height: 34px;
    padding: 8px 10px;
    font-size: 8px;
}
.kg-deck-card-popular {
    margin-left: auto;
    color: #303A27;
    background: #C8D39A;
    border-color: #C8D39A;
}
.kg-deck-card-popular svg {
    display: none;
}
.kg-deck-card[data-pos="0"] .kg-deck-card-label {
    color: #303A27;
    background: #C8D39A;
}
.kg-deck-card[data-pos="0"] .kg-deck-card-name {
    color: #F2EBD5;
}
.kg-deck-card-body {
    min-height: 85px;
    flex-basis: 85px;
    padding: 12px 20px;
    background: #303A27;
}
.kg-deck-card-price-value {
    color: #F2EBD5;
}
.kg-deck-card-price-period,
.kg-deck-card-description {
    color: #BDB993;
}
.kg-deck-card-cta {
    min-width: 112px;
    height: 42px;
    padding: 10px 15px;
    color: #303A27;
    background: #C8D39A;
    border-color: #C8D39A;
}
.kg-deck-card-cta:hover {
    color: #303A27;
    background: #E0E5B6;
    border-color: #E0E5B6;
}
.kg-deck-card-cta svg {
    transition: transform 250ms ease;
}
.kg-deck-card-cta:hover svg {
    transform: translateX(3px);
}
@media (max-width: 1100px) and (min-width: 769px) {
    .kg-deck-stage {
        --deck-center-w: min(414px, 45vw);
        --deck-peek-w: min(280px, 30vw);
    }
    .kg-deck-card[data-pos="-1"] { left: 0; }
    .kg-deck-card[data-pos="1"] { left: calc(100% - var(--deck-peek-w)); }
}
@media (max-width: 768px) {
    .kg-memberships { min-height: 680px; }
    .kg-deck-stage {
        --deck-center-w: min(400px, calc(100vw - 36px));
        height: 400px;
    }
    .kg-deck-card[data-pos="0"] {
        width: var(--deck-center-w);
        height: 310px;
    }
    .kg-deck-card[data-pos="-1"],
    .kg-deck-card[data-pos="1"] {
        opacity: 0;
        pointer-events: none;
    }
}

/* Final cleanup: keep the photography and membership titles completely flat.
   No text glow, image gradient, or translucent card wash. */
.kg-deck-card-media::after,
.kg-deck-card[data-pos="-1"]::before,
.kg-deck-card[data-pos="1"]::before {
    display: none !important;
    background: none !important;
    opacity: 0 !important;
}
.kg-deck-card[data-pos="0"] .kg-deck-card-name,
.kg-deck-card[data-pos="-1"] .kg-deck-card-name,
.kg-deck-card[data-pos="1"] .kg-deck-card-name {
    text-shadow: none !important;
}

/* Membership palette sampled from the supplied reference swatch. */
.kg-memberships,
.kg-deck-card,
.kg-deck-card[data-pos="0"],
.kg-deck-card-body,
.kg-deck-card[data-pos="-1"] .kg-deck-card-body,
.kg-deck-card[data-pos="1"] .kg-deck-card-body {
    background-color: #0B2B26;
}

/* ---- Membership detail modal + comparison table ---- */
.kg-mem-modal {
    position: fixed;
    z-index: 1002;
    left: 50%; top: 50%;
    transform: translate(-50%, -48%);
    width: min(560px, 92vw);
    max-height: 88vh;
    overflow-y: auto;
    background: var(--kaaya-white);
    border-radius: 2px;
    padding: 44px 40px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--kg-speed-mid) var(--kg-ease), transform var(--kg-speed-mid) var(--kg-ease);
    box-shadow: 0 50px 100px -20px rgba(5,31,32,0.5);
}
.kg-mem-modal.is-open { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.kg-mem-modal .kg-modal-close { background: var(--kaaya-ivory); color: var(--kaaya-black); border-color: var(--kaaya-beige); }
.kg-mem-modal-price { font-family: var(--kg-heading-font); font-size: 34px; color: var(--kaaya-olive); margin: 6px 0 20px; }
.kg-mem-modal-price span { font-family: var(--kg-body-font); font-size: 14px; color: var(--kaaya-moss); }
.kg-mem-modal-terms {
    font-family: var(--kg-body-font);
    font-size: 12px;
    color: var(--kaaya-moss);
    border-top: 1px solid var(--kaaya-beige);
    padding-top: 18px;
    margin-top: 6px;
    line-height: 1.6;
}

.kg-compare-modal {
    position: fixed;
    z-index: 1002;
    left: 50%; top: 50%;
    transform: translate(-50%, -48%);
    width: min(760px, 94vw);
    max-height: 88vh;
    overflow: auto;
    background: var(--kaaya-white);
    border-radius: 2px;
    padding: 44px 40px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--kg-speed-mid) var(--kg-ease), transform var(--kg-speed-mid) var(--kg-ease);
    box-shadow: 0 50px 100px -20px rgba(5,31,32,0.5);
}
.kg-compare-modal.is-open { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.kg-compare-table { width: 100%; border-collapse: collapse; font-family: var(--kg-body-font); margin-top: 20px; }
.kg-compare-table th, .kg-compare-table td {
    text-align: left;
    padding: 14px 12px;
    border-bottom: 1px solid var(--kaaya-beige);
    font-size: 13px;
}
.kg-compare-table th {
    font-family: var(--kg-heading-font);
    font-size: 15px;
    text-transform: uppercase;
    color: var(--kaaya-black);
}
.kg-compare-table td:first-child { color: var(--kaaya-moss); font-weight: 500; }
.kg-compare-table td:not(:first-child), .kg-compare-table th:not(:first-child) { text-align: center; }

/* Phones: the modal's 40px side padding left ~270px for a 450px table, so only
   two of the plan columns were visible and nothing hinted that it scrolls.
   Reclaim the padding and compact the cells so every plan column is on screen;
   the first column stays pinned in case a narrow phone still has to scroll. */
@media (max-width: 600px) {
    .kg-compare-modal { padding: 28px 14px 20px; width: 96vw; }
    .kg-compare-table { margin-top: 14px; }
    .kg-compare-table th,
    .kg-compare-table td { padding: 9px 3px; font-size: 11.5px; }
    .kg-compare-table th { font-size: 10px; letter-spacing: 0; line-height: 1.25; }
    .kg-compare-table td:first-child { font-size: 11px; }
    .kg-compare-table th:first-child,
    .kg-compare-table td:first-child {
        position: sticky; left: 0; z-index: 1;
        background: var(--kaaya-white);
        min-width: 0; width: 60px; padding-right: 6px;
    }
}

/* =========================================================================
   CUSTOMER REVIEWS — hover-to-expand editorial accordion
   Cards sit in a flex row at equal width; hovering (or focusing, or
   tapping "More Details" on touch) grows that panel and swaps its teaser
   copy for the full verified review + star rating.
   ========================================================================= */
.kg-reviews {
    background:
        radial-gradient(ellipse 900px 500px at 8% 0%, rgba(142,182,155,0.16), transparent 65%),
        var(--kaaya-beige);
    padding: 90px 0 100px;
    overflow: hidden;
}
.kg-reviews-top {
    max-width: 1320px;
    margin: 0 auto 44px;
    padding: 0 24px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
}
.kg-reviews-top .kg-eyebrow::before { background: var(--kaaya-olive); }
.kg-text-accent { color: var(--kaaya-gold); font-style: italic; }
.kg-reviews-top-hint {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--kg-body-font);
    font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em;
    color: var(--kaaya-moss);
    padding-bottom: 8px;
    white-space: nowrap;
}
.kg-reviews-top-hint svg { width: 15px; height: 15px; flex-shrink: 0; }
.kg-reviews-top-hint .kg-hint-touch { display: none; }
@media (hover: none) {
    .kg-reviews-top-hint .kg-hint-hover { display: none; }
    .kg-reviews-top-hint .kg-hint-touch { display: inline; }
}

/* ---- Accordion track ---- */
.kg-reviews-track-wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}
.kg-acc-track {
    display: flex;
    align-items: stretch;
    gap: 14px;
    height: 560px;
}

.kg-acc-card {
    position: relative;
    flex: 1 1 0%;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    background: var(--kaaya-black);
    box-shadow: 0 30px 60px -34px rgba(5,31,32,0.4);
    transition: flex var(--kg-speed-slow) var(--kg-ease), box-shadow var(--kg-speed-mid) var(--kg-ease);
    outline: none;
}
.kg-acc-card:hover,
.kg-acc-card:focus-within,
.kg-acc-card.is-active {
    flex: 3.1 1 0%;
    box-shadow: 0 44px 80px -30px rgba(5,31,32,0.55);
}

.kg-acc-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.5) saturate(0.8) contrast(1.05);
    transition: transform var(--kg-speed-slow) var(--kg-ease), filter var(--kg-speed-slow) var(--kg-ease);
}
.kg-acc-card:hover .kg-acc-img,
.kg-acc-card:focus-within .kg-acc-img,
.kg-acc-card.is-active .kg-acc-img { transform: scale(1.04); filter: brightness(0.6) saturate(0.95) contrast(1.05); }

.kg-acc-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5,31,32,0.55) 0%, rgba(5,31,32,0.1) 32%, rgba(5,31,32,0.18) 56%, rgba(5,31,32,0.95) 100%);
}

/* ---- Top: avatar + name/handle (fades in once the panel has room) ---- */
.kg-acc-top {
    position: absolute;
    top: 20px; left: 20px; right: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity var(--kg-speed-mid) ease 0.05s, transform var(--kg-speed-mid) ease 0.05s;
}
.kg-acc-card:hover .kg-acc-top,
.kg-acc-card:focus-within .kg-acc-top,
.kg-acc-card.is-active .kg-acc-top { opacity: 1; transform: none; }
.kg-acc-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.75);
    flex-shrink: 0;
}
.kg-acc-top-text { display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; }
.kg-acc-name {
    font-family: var(--kg-body-font);
    font-size: 12.5px; font-weight: 600;
    color: var(--kaaya-white);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kg-acc-handle {
    font-family: var(--kg-body-font);
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- Bottom: headline always visible; teaser <-> review swap on hover ---- */
.kg-acc-bottom {
    position: absolute;
    left: 20px; right: 20px; bottom: 22px;
}
.kg-acc-headline {
    font-family: var(--kg-heading-font);
    font-weight: 600;
    color: var(--kaaya-white);
    font-size: clamp(17px, 1.9vw, 25px);
    line-height: 1.2;
    margin: 0 0 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kg-acc-teaser {
    font-family: var(--kg-body-font);
    font-size: 11.5px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.68);
    margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-height: 20px;
    transition: opacity var(--kg-speed-fast) ease, max-height var(--kg-speed-fast) ease, margin var(--kg-speed-fast) ease;
}
.kg-acc-card:hover .kg-acc-teaser,
.kg-acc-card:focus-within .kg-acc-teaser,
.kg-acc-card.is-active .kg-acc-teaser { opacity: 0; max-height: 0; }

.kg-acc-reveal {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height var(--kg-speed-slow) var(--kg-ease), opacity var(--kg-speed-mid) ease 0.08s, margin var(--kg-speed-slow) var(--kg-ease);
}
.kg-acc-card:hover .kg-acc-reveal,
.kg-acc-card:focus-within .kg-acc-reveal,
.kg-acc-card.is-active .kg-acc-reveal { max-height: 220px; opacity: 1; margin-bottom: 14px; }
.kg-acc-stars {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--kg-body-font);
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em;
    color: var(--kaaya-black);
    background: var(--kaaya-gold);
    padding: 5px 12px;
    border-radius: 30px;
    margin-bottom: 10px;
}
.kg-acc-stars svg { width: 11px; height: 11px; }
.kg-acc-quote {
    font-family: var(--kg-body-font);
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(255,255,255,0.92);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kg-acc-more {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: none; padding: 0;
    font-family: var(--kg-body-font);
    font-size: 12.5px; font-weight: 600; letter-spacing: 0.03em;
    color: var(--kaaya-white);
    cursor: pointer;
    white-space: nowrap;
}
.kg-acc-more svg { width: 14px; height: 14px; transition: transform var(--kg-speed-fast) ease; }
.kg-acc-card:hover .kg-acc-more svg,
.kg-acc-card:focus-within .kg-acc-more svg,
.kg-acc-card.is-active .kg-acc-more svg { transform: translateX(4px); color: var(--kaaya-gold); }

@media (max-width: 992px) {
    .kg-reviews { padding: 70px 0 80px; }
    .kg-reviews-top { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 34px; }
    .kg-acc-track { height: 480px; }
}
@media (max-width: 720px) {
    .kg-acc-track {
        flex-direction: column;
        height: auto;
        gap: 12px;
    }
    .kg-acc-card { height: 130px; flex: none !important; }
    .kg-acc-card.is-active, .kg-acc-card:focus-within { height: 400px; }
    .kg-acc-headline { font-size: 19px; }
}

/* =========================================================================
   BOOKING FORM — custom searchable, categorized service dropdown
   ========================================================================= */
.kg-booking-field { position: relative; }
.kg-booking-field label {
    display: block;
    font-family: var(--kg-body-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kaaya-olive);
    margin-bottom: 10px;
}
.kg-native-select { position: absolute; opacity: 0; pointer-events: none; height: 0; width: 0; }

.kg-select-trigger {
    width: 100%;
    margin: 0;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    background: var(--kaaya-white);
    border: 1px solid var(--kaaya-taupe);
    border-radius: 12px;
    font-family: var(--kg-body-font);
    font-size: 15px;
    color: var(--kaaya-black);
    cursor: pointer;
    transition: border-color var(--kg-speed-fast) var(--kg-ease), box-shadow var(--kg-speed-fast) var(--kg-ease);
}
.kg-select-trigger[data-empty="true"] { color: var(--kaaya-moss); }
.kg-select-trigger:disabled { opacity: 0.6; cursor: not-allowed; }
.kg-select-trigger:hover { border-color: var(--kaaya-olive); }
.kg-select-trigger.is-open,
.kg-select-trigger:focus-visible {
    outline: none;
    border-color: var(--kaaya-gold);
    box-shadow: 0 0 0 3px rgba(142,182,155,0.25);
}
.kg-select-trigger svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform var(--kg-speed-fast) var(--kg-ease); color: var(--kaaya-olive); }
.kg-select-trigger.is-open svg { transform: rotate(180deg); }

.kg-select-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    background: var(--kaaya-white);
    border: 1px solid var(--kaaya-beige);
    border-radius: 12px;
    box-shadow: 0 30px 60px -15px rgba(5,31,32,0.25);
    z-index: 50;
    display: none;
    max-height: 460px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--kg-speed-fast) var(--kg-ease), transform var(--kg-speed-fast) var(--kg-ease);
    pointer-events: none;
}
.kg-select-panel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.kg-select-search {
    padding: 14px;
    border-bottom: 1px solid var(--kaaya-beige);
    flex-shrink: 0;
    position: relative;
}
.kg-select-search input {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--kaaya-beige);
    border-radius: 10px;
    font-family: var(--kg-body-font);
    font-size: 14px;
    background: var(--kaaya-ivory);
    color: var(--kaaya-black);
}
.kg-select-search input:focus { outline: none; border-color: var(--kaaya-gold); }
/* ---- Service list — editorial "price menu" layout -----------------------
   Restyled to read like a printed spa menu: each category sits in its own
   bordered card with a centered, letter-spaced heading, and services are
   listed as plain name/price rows separated by hairlines (no thumbnails,
   no accent bars) — matching the boutique price-list reference. Thumbnail
   markup is left in the DOM (other templates/JS may still reference it)
   but hidden here since the menu look has no imagery. ------------------- */
.kg-select-options { overflow-y: auto; padding: 20px 24px; }
.kg-select-group {
    margin-bottom: 30px;
}
.kg-select-group:last-child { margin-bottom: 6px; }
.kg-select-group-label {
    display: block;
    text-align: left;
    font-family: var(--kg-body-font);
    padding: 0 0 8px;
}
.kg-select-group-label-text {
    font-family: var(--kg-body-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kaaya-black);
}
.kg-select-group-count { display: none; }
.kg-select-option {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--kaaya-beige);
    padding: 13px 0;
    font-family: var(--kg-body-font);
    font-size: 14.5px;
    color: var(--kaaya-charcoal);
    cursor: pointer;
    transition: background var(--kg-speed-fast) var(--kg-ease);
}
.kg-select-group .kg-select-option:last-child { border-bottom: 0; }
.kg-select-option-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

/* Service name on the left, price (+ optional struck-through MRP and
   discount badge) on the right, on one row. */
.kg-select-option-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    row-gap: 2px;
    gap: 8px 16px;
}
.kg-select-option-name {
    flex: 1 1 auto;
    min-width: 0;
    letter-spacing: 0.01em;
}
.kg-select-option-price {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.kg-select-option-mrp { color: var(--kaaya-sage); font-size: 12px; }
.kg-select-option-current { font-weight: 400; color: var(--kaaya-charcoal); }
.kg-select-option-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--kaaya-sage);
}
.kg-select-option-duration { display: inline-flex; align-items: center; gap: 4px; }
.kg-select-option-duration svg { width: 12px; height: 12px; flex-shrink: 0; }
.kg-select-option-discount {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kaaya-gold);
    background: rgba(196, 158, 74, 0.14);
    border-radius: 999px;
    padding: 2px 7px;
}
.kg-select-option:hover { background: var(--kaaya-ivory); }
.kg-select-option.is-active { background: var(--kaaya-ivory); color: var(--kaaya-black); }
.kg-select-option.is-active .kg-select-option-name { font-weight: 600; }
.kg-select-option.is-active .kg-select-option-current { color: var(--kaaya-black); }
.kg-select-empty { padding: 30px 20px; text-align: center; font-family: var(--kg-body-font); font-size: 13px; color: var(--kaaya-moss); }
.kg-field-error {
    display: none;
    font-family: var(--kg-body-font);
    font-size: 12px;
    color: #8a2f2b;
    margin-top: 8px;
}
.kg-booking-field.has-error .kg-select-trigger { border-color: #b3413c; }
.kg-booking-field.has-error .kg-field-error { display: block; }

/* Mobile: full-screen bottom sheet */
@media (max-width: 640px) {
    .kg-select-panel {
        position: fixed;
        left: 0; right: 0; bottom: 0; top: auto;
        border-radius: 18px 18px 0 0;
        max-height: 82vh;
        transform: translateY(100%);
    }
    .kg-select-panel.is-open { transform: translateY(0); }
    .kg-select-panel::before {
        content: '';
        display: block;
        width: 40px; height: 4px;
        background: var(--kaaya-beige);
        border-radius: 4px;
        margin: 12px auto 0;
    }
}

/* =========================================================================
   FOOTER — premium editorial footer
   ========================================================================= */
.kg-footer { background: var(--kaaya-moss); color: var(--kaaya-white); padding: 70px 0 0; }
.kg-footer-top {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 0.8fr 1.1fr;
    gap: 50px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px 70px;
    border-bottom: 1px solid rgba(218,241,222,0.15);
}
.kg-footer-brand-name {
    font-family: var(--kg-heading-font);
    font-size: 34px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--kaaya-white);
    margin: 0 0 18px;
}
.kg-footer-tagline {
    font-family: var(--kg-body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kaaya-gold);
    line-height: 1.9;
    margin: 0 0 20px;
}
.kg-footer-desc {
    font-family: var(--kg-body-font);
    font-size: 14px;
    line-height: 1.75;
    color: var(--kaaya-beige);
    max-width: 320px;
    margin: 0 0 26px;
}

.kg-footer-heading {
    font-family: var(--kg-body-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kaaya-taupe);
    margin: 0 0 22px;
}
.kg-footer-links { list-style: none; padding: 0; margin: 0; }
.kg-footer-links li { margin-bottom: 13px; }
.kg-footer-links a {
    font-family: var(--kg-body-font);
    font-size: 14px;
    color: var(--kaaya-white);
    transition: color var(--kg-speed-fast) var(--kg-ease), padding-left var(--kg-speed-fast) var(--kg-ease);
}
.kg-footer-links a:hover { color: var(--kaaya-gold); padding-left: 4px; }

.kg-footer-contact-buttons { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.kg-footer-contact-buttons .kg-link-cta { border-color: rgba(218,241,222,0.35); }
.kg-footer-hours { list-style: none; padding: 0; margin: 0; }
.kg-footer-hours li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--kg-body-font);
    font-size: 13px;
    color: var(--kaaya-beige);
    padding: 7px 0;
    border-bottom: 1px solid rgba(218,241,222,0.08);
}
.kg-footer-hours li.is-today { color: var(--kaaya-white); font-weight: 600; }
.kg-footer-hours li.is-today .kg-footer-day::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--kaaya-gold);
    margin-right: 8px;
}

.kg-footer-location { max-width: 320px; }
.kg-footer-address {
    font-family: var(--kg-body-font);
    font-size: 14px;
    line-height: 1.7;
    color: var(--kaaya-beige);
    margin: 0 0 14px;
}
.kg-footer-address a { color: var(--kaaya-beige); text-decoration: underline; text-underline-offset: 3px; }
.kg-footer-address a:hover { color: var(--kaaya-gold); }
.kg-footer-map {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
    border: 1px solid rgba(218,241,222,0.15);
    filter: grayscale(0.3) sepia(0.15);
}
.kg-footer-map iframe { display: block; width: 100%; height: 160px; border: 0; }

.kg-footer-mid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    max-width: 1280px;
    margin: 0 auto;
    padding: 44px 24px;
    border-bottom: 1px solid rgba(218,241,222,0.15);
}
.kg-footer-newsletter { max-width: 420px; width: 100%; min-width: 0; }
.kg-footer-newsletter p { font-family: var(--kg-body-font); font-size: 13px; color: var(--kaaya-beige); margin: 8px 0 18px; }
.kg-footer-newsletter-form { display: flex; gap: 10px; }
.kg-footer-newsletter-form input {
    flex: 1;
    min-width: 0;
    height: 50px;
    padding: 0 18px;
    border-radius: 30px;
    border: 1px solid rgba(218,241,222,0.3);
    background: transparent;
    color: var(--kaaya-white);
    font-family: var(--kg-body-font);
    font-size: 14px;
}
.kg-footer-newsletter-form input::placeholder { color: rgba(218,241,222,0.5); }
.kg-footer-newsletter-form input:focus { outline: none; border-color: var(--kaaya-gold); }
.kg-footer-newsletter-form button {
    flex-shrink: 0;
    width: auto;
    margin-top: 0;
    height: 50px;
    padding: 0 26px;
    border-radius: 30px;
    border: 1px solid var(--kaaya-gold);
    background: var(--kaaya-gold);
    color: var(--kaaya-black);
    font-family: var(--kg-body-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--kg-speed-fast) var(--kg-ease);
}
.kg-footer-newsletter-form button:hover { background: transparent; color: var(--kaaya-white); }
.kg-footer-newsletter-note { font-size: 11px; color: var(--kaaya-taupe); margin-top: 10px; min-height: 1em; }

.kg-footer-social { display: flex; gap: 12px; }
.kg-footer-social-note { color: var(--kaaya-taupe); font-size: 12px; line-height: 1.6; max-width: 220px; }
.kg-footer-social a {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(218,241,222,0.25);
    color: var(--kaaya-white);
    display: flex; align-items: center; justify-content: center;
    transition: all var(--kg-speed-fast) var(--kg-ease);
}
.kg-footer-social a svg { width: 18px; height: 18px; }
.kg-footer-social a:hover { background: var(--kaaya-gold); border-color: var(--kaaya-gold); color: var(--kaaya-black); transform: translateY(-3px); }

.kg-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 1280px;
    margin: 0 auto;
    padding: 26px 24px 34px;
}
.kg-footer-bottom p { font-family: var(--kg-body-font); font-size: 12px; color: var(--kaaya-taupe); margin: 0; }
.kg-footer-legal { display: flex; gap: 24px; list-style: none; padding: 0; margin: 0; }
.kg-footer-legal a { font-family: var(--kg-body-font); font-size: 12px; color: var(--kaaya-taupe); }
.kg-footer-legal a:hover { color: var(--kaaya-white); }

/* Mobile accordion groups: on desktop this is just the plain heading row
   (chevron hidden, not clickable); on mobile it becomes the accordion
   header. Using a <button> throughout keeps it keyboard-accessible even
   though it's inert on desktop. */
.kg-footer-accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
    background: none;
    border: 0;
    padding: 0;
    margin: 0 0 22px;
    cursor: default;
    color: inherit;
    font: inherit;
    text-align: left;
}
.kg-footer-accordion-toggle .kg-footer-heading { margin: 0; }
.kg-footer-accordion-toggle svg { display: none; width: 14px; height: 14px; flex-shrink: 0; transition: transform var(--kg-speed-fast) var(--kg-ease); }

@media (max-width: 992px) {
    .kg-footer { padding-top: 70px; }
    .kg-footer-top { grid-template-columns: 1fr 1fr; gap: 40px 30px; padding-bottom: 50px; }
}
@media (max-width: 640px) {
    .kg-footer-top { grid-template-columns: 1fr; padding-bottom: 10px; }
    .kg-footer-col:not(.kg-footer-brand) { border-top: 1px solid rgba(218,241,222,0.12); padding: 6px 0; }
    .kg-footer-accordion-toggle {
        padding: 20px 0;
        cursor: pointer;
        margin: 0;
    }
    .kg-footer-accordion-toggle svg { display: block; }
    .kg-footer-col.is-open .kg-footer-accordion-toggle svg { transform: rotate(180deg); }
    .kg-footer-col-content {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows var(--kg-speed-mid) var(--kg-ease);
    }
    .kg-footer-col.is-open .kg-footer-col-content { grid-template-rows: 1fr; }
    .kg-footer-col-content > div { overflow: hidden; }
    .kg-footer-col-content-inner { padding-bottom: 22px; }
    .kg-footer-mid { flex-direction: column; align-items: flex-start; }
    .kg-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   CONTACT PAGE — Get In Touch, Map, Branches, FAQ
   ========================================================================= */
.kg-contact { background: var(--kaaya-ivory); padding: 75px 0; }
.kg-contact-grid {
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    gap: 72px;
    align-items: start;
}
.kg-contact-info .kg-lede { margin: 0 0 36px; }

.kg-contact-details {
    list-style: none;
    margin: 0 0 32px;
    padding: 24px 0 0;
    border-top: 1px solid var(--kaaya-beige);
}
.kg-contact-details li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 0;
    border-bottom: 1px solid var(--kaaya-beige);
}
.kg-contact-details-label {
    font-family: var(--kg-body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kaaya-olive);
}
.kg-contact-details li a,
.kg-contact-details li span:not(.kg-contact-details-label) {
    font-family: var(--kg-body-font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--kaaya-charcoal);
}
.kg-contact-details li a { text-decoration: none; }
.kg-contact-details li a:hover { color: var(--kaaya-olive); }

.kg-contact-social { display: flex; gap: 12px; }
.kg-contact-social a {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid var(--kaaya-beige);
    color: var(--kaaya-black);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--kg-speed-fast) var(--kg-ease), border-color var(--kg-speed-fast) var(--kg-ease), color var(--kg-speed-fast) var(--kg-ease), transform var(--kg-speed-fast) var(--kg-ease);
}
.kg-contact-social svg { width: 18px; height: 18px; }
.kg-contact-social a:hover { background: var(--kaaya-black); border-color: var(--kaaya-black); color: var(--kaaya-white); transform: translateY(-3px); }

.kg-contact-form-wrap {
    background: var(--kaaya-white);
    border-radius: 4px;
    padding: 44px 40px;
    box-shadow: 0 40px 80px -30px rgba(5,31,32,0.2);
}
.kg-contact-form { display: flex; flex-direction: column; gap: 20px; }
.kg-field { display: flex; flex-direction: column; gap: 8px; }
.kg-field label {
    font-family: var(--kg-body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kaaya-olive);
}
.kg-field input,
.kg-field textarea {
    font-family: var(--kg-body-font);
    font-size: 15px;
    color: var(--kaaya-black);
    background: var(--kaaya-ivory);
    border: 1px solid var(--kaaya-beige);
    border-radius: 2px;
    padding: 14px 16px;
    resize: vertical;
    transition: border-color var(--kg-speed-fast) var(--kg-ease), background var(--kg-speed-fast) var(--kg-ease);
}
.kg-field input:focus,
.kg-field textarea:focus {
    outline: none;
    border-color: var(--kaaya-gold);
    background: var(--kaaya-white);
}
.kg-contact-submit { margin-top: 6px; align-self: flex-start; }

.kg-alert {
    font-family: var(--kg-body-font);
    font-size: 14px;
    padding: 16px 18px;
    border-radius: 2px;
    margin-bottom: 24px;
}
.kg-alert-success { background: rgba(35,83,71,0.12); color: var(--kaaya-moss); border: 1px solid rgba(35,83,71,0.3); }
.kg-alert-error { background: rgba(178,58,58,0.1); color: #8f3232; border: 1px solid rgba(178,58,58,0.3); }

@media (max-width: 900px) {
    .kg-contact { padding: 55px 0; }
    .kg-contact-grid { grid-template-columns: 1fr; gap: 48px; }
    .kg-contact-form-wrap { padding: 32px 26px; }
}

/* ---- Map ---- */
.kg-map { background: var(--kaaya-white); padding: 0 0 110px; }
.kg-map-frame {
    position: relative;
    height: 460px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 40px 80px -30px rgba(5,31,32,0.25);
}
.kg-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.15); }
.kg-map-card {
    position: absolute;
    left: 32px; bottom: 32px;
    background: var(--kaaya-white);
    padding: 26px 30px;
    max-width: 320px;
    border-radius: 0;
    box-shadow: 0 30px 60px -20px rgba(5,31,32,0.4);
}
.kg-map-address { font-family: var(--kg-body-font); font-size: 14px; line-height: 1.6; color: var(--kaaya-moss); margin: 0 0 14px; }
@media (max-width: 640px) {
    .kg-map-frame { height: 380px; }
    .kg-map-card { left: 16px; right: 16px; bottom: 16px; max-width: none; padding: 20px; }
}

/* ---- Branches ---- */
.kg-branches-section { background: var(--kaaya-ivory); padding: 75px 0; }
.kg-branches-head { max-width: 560px; margin: 0 auto 56px; text-align: center; }
.kg-branches-head .kg-eyebrow { justify-content: center; }
.kg-branches-head .kg-eyebrow::before { display: none; }
.kg-branches-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.kg-branch-card {
    background: var(--kaaya-white);
    padding: 40px 32px;
    border-radius: 0;
    border: 1px solid var(--kaaya-beige);
    transition: transform var(--kg-speed-mid) var(--kg-ease), box-shadow var(--kg-speed-mid) var(--kg-ease), border-color var(--kg-speed-mid) var(--kg-ease);
}
.kg-branch-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -24px rgba(5,31,32,0.25); border-color: var(--kaaya-gold); }
.kg-branch-card .kg-number { display: block; margin-bottom: 18px; font-size: 20px; }
.kg-branch-card h3 { font-family: var(--kg-heading-font); font-size: 22px; text-transform: uppercase; color: var(--kaaya-black); margin: 0 0 10px; }
.kg-branch-card p { font-family: var(--kg-body-font); font-size: 14px; color: var(--kaaya-moss); margin: 0; }
@media (max-width: 900px) {
    .kg-branches-section { padding: 55px 0; }
    .kg-branches-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; gap: 18px; }
}

/* ---- FAQ (accordion via native <details>) ---- */
.kg-faq { background: var(--kaaya-white); padding: 75px 0; }
.kg-faq-container { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 60px; align-items: start; }
.kg-faq-head .kg-lede { margin: 0; }
.kg-faq-list { display: flex; flex-direction: column; }
.kg-faq-item {
    border-bottom: 1px solid var(--kaaya-beige);
    padding: 6px 0;
}
.kg-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    list-style: none;
    cursor: pointer;
    padding: 18px 2px;
    font-family: var(--kg-heading-font);
    font-size: 19px;
    color: var(--kaaya-black);
    -webkit-tap-highlight-color: transparent;
}
.kg-faq-item summary::-webkit-details-marker { display: none; }
.kg-faq-icon { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--kaaya-beige); display: flex; align-items: center; justify-content: center; transition: transform var(--kg-speed-fast) var(--kg-ease), background var(--kg-speed-fast) var(--kg-ease); }
.kg-faq-icon svg { width: 12px; height: 12px; color: var(--kaaya-olive); }
.kg-faq-item[open] .kg-faq-icon { transform: rotate(180deg); background: var(--kaaya-gold); border-color: var(--kaaya-gold); }
.kg-faq-item[open] .kg-faq-icon svg { color: var(--kaaya-black); }
.kg-faq-item p {
    font-family: var(--kg-body-font);
    font-size: 14px;
    line-height: 1.7;
    color: var(--kaaya-moss);
    margin: 0 0 20px;
    padding-right: 46px;
}
@media (max-width: 900px) {
    .kg-faq { padding: 80px 0; }
    .kg-faq-container { grid-template-columns: 1fr; gap: 28px; }
}

/* =========================================================================
   FAQ + GET IN TOUCH — combined two-column section (used on Services page)
   ========================================================================= */
.kg-faq-touch { background: var(--kaaya-ivory); padding: 75px 0; }
.kg-faq-touch-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: start; }
.kg-faq-touch-head { margin-bottom: 34px; }
.kg-faq-touch-head .kg-lede { margin: 0; }

.kg-touch-card {
    background: var(--kaaya-black);
    border-radius: 0;
    padding: 44px 38px;
    color: var(--kaaya-white);
}
.kg-touch-card .kg-eyebrow { color: var(--kaaya-taupe); }
.kg-touch-card .kg-eyebrow::before { background: var(--kaaya-gold); }
.kg-touch-card h3 {
    font-family: var(--kg-heading-font);
    font-size: 28px;
    text-transform: uppercase;
    color: var(--kaaya-white);
    margin: 4px 0 14px;
}
.kg-touch-card p {
    font-family: var(--kg-body-font);
    font-size: 14px;
    line-height: 1.7;
    color: var(--kaaya-beige);
    opacity: 0.85;
    margin: 0 0 28px;
}
.kg-touch-actions { display: flex; flex-direction: column; gap: 14px; margin-bottom: 30px; }
.kg-touch-actions a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 2px;
    border: 1px solid rgba(218,241,222,0.2);
    font-family: var(--kg-body-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--kaaya-white);
    transition: background var(--kg-speed-fast) var(--kg-ease), border-color var(--kg-speed-fast) var(--kg-ease);
}
.kg-touch-actions a svg { width: 15px; height: 15px; flex-shrink: 0; }
.kg-touch-actions a:hover { background: var(--kaaya-gold); border-color: var(--kaaya-gold); color: var(--kaaya-black); }
.kg-touch-card .kg-btn { width: 100%; justify-content: center; }

@media (max-width: 900px) {
    .kg-faq-touch { padding: 55px 0; }
    .kg-faq-touch-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* =========================================================================
   AUTH / BOOKING FORMS — editorial redesign
   Restyles the shared .kg-auth-card / .form-group markup used by
   login.php, register.php, book-appointment.php, forgot-password.php,
   reset-password.php, and verify-email.php. Loaded last so it overrides
   the plain defaults in forms.css.
   ========================================================================= */

.login-section,
.appointment-form {
    background: var(--kaaya-ivory);
    padding: 100px 0;
}

.register-section {
    position: relative;
    background-color: var(--kaaya-ivory);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 110px 0 150px;
    overflow: hidden;
}
.register-section-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(5,31,32,0.82) 0%, rgba(5,31,32,0.62) 45%, rgba(5,31,32,0.82) 100%);
}

.kg-auth-card {
    position: relative;
    z-index: 1;
    max-width: 620px;
    margin: 0 auto;
    background: var(--kaaya-white);
    border: 1px solid var(--kaaya-beige);
    border-radius: 0;
    padding: 56px;
    box-shadow: 0 30px 70px rgba(5,31,32,0.08);
}
.appointment-form .kg-auth-card { max-width: 720px; }

.kg-auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 56px;
    width: 48px;
    height: 3px;
    background: var(--kaaya-gold);
}

.kg-form-eyebrow {
    display: block;
    font-family: var(--kg-body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kaaya-olive);
    margin: 20px 0 10px;
}
.kg-form-heading {
    font-family: var(--kg-heading-font);
    font-size: 34px;
    font-weight: 500;
    color: var(--kaaya-black);
    margin: 0 0 8px;
}
.kg-form-subheading {
    font-family: var(--kg-body-font);
    font-size: 14px;
    color: var(--kaaya-moss);
    margin: 0 0 36px;
    line-height: 1.6;
}

.kg-form-section-label {
    font-family: var(--kg-body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kaaya-taupe);
    margin: 36px 0 18px;
    padding-top: 24px;
    border-top: 1px solid var(--kaaya-beige);
}
.kg-form-section-label:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

.kg-auth-card .alert {
    border-radius: 2px;
    font-family: var(--kg-body-font);
    font-size: 13.5px;
}
.kg-auth-card .alert-success {
    background: rgba(91,96,72,0.08);
    border-color: var(--kaaya-olive);
    color: var(--kaaya-olive);
}
.kg-auth-card .alert-error {
    background: #FBEAEA;
    border-color: #B3413C;
    color: #8A2F2B;
}
.kg-auth-card .alert a { color: inherit; text-decoration: underline; }

.hero-overlay {
    background: linear-gradient(115deg,
        rgba(63,73,53,0.78) 0%,
        rgba(91,96,72,0.55) 32%,
        rgba(91,96,72,0.22) 58%,
        rgba(218,241,222,0.12) 100%);
    mix-blend-mode: multiply;
}
.hero-banner.home-hero .hero-overlay { background: linear-gradient(115deg,
        rgba(5,31,32,0.75) 0%,
        rgba(5,31,32,0.4) 38%,
        rgba(5,31,32,0.12) 70%,
        rgba(5,31,32,0) 100%); mix-blend-mode: normal; }

.hero-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(5,31,32,0.35) 0%, rgba(5,31,32,0) 45%);
    pointer-events: none;
}

.about-hero      { background: url('../images/photos/kg-52-facial-treatment-ocean-view.jpg') center/cover no-repeat; }
.gallery-hero    { background: url('../images/photos/kg-48-facial-treatment-garden-lounge.jpg') center/cover no-repeat; }
.services-hero   { background: url('../images/photos/kg-47-facial-mask-brush-window-light.jpg') center/cover no-repeat; }
.contact-hero    { background: url('../images/photos/kg-49-facial-brush-stone-bowl-greenery.jpg') center/cover no-repeat; }
.login-hero      { background: url('../images/photos/kg-56-portrait-serene-teahouse.jpg') center/cover no-repeat; }
.register-hero   { background: url('../images/photos/kg-55-portrait-blonde-mediterranean.jpg') center/cover no-repeat; }
.appointment-hero{ background: url('../images/photos/kg-45-facial-serum-brush-closeup.jpg') center/cover no-repeat; }
.forgot-hero     { background: url('../images/photos/kg-52-facial-treatment-ocean-view.jpg') center/cover no-repeat; }
.reset-hero      { background: url('../images/photos/kg-45-facial-serum-brush-closeup.jpg') center/cover no-repeat; }
.service-hero    { background: url('../images/photos/kg-54-brow-threading-detail.jpg') center/cover no-repeat; }
.terms-hero      { background: url('../images/photos/kg-50-facial-brush-orchid-chinhold.jpg') center/cover no-repeat; }
.privacy-hero    { background: url('../images/photos/kg-46-brow-mapping-ruler-gloves.jpg') center/cover no-repeat; }
.error-hero      { background: url('../images/photos/kg-51-brow-mapping-vanity-mirror.jpg') center/cover no-repeat; }

.kg-auth-card .form-group { margin-bottom: 22px; }

.kg-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.kg-form-row .form-group { margin-bottom: 22px; }
@media (max-width: 560px) {
    .kg-form-row { grid-template-columns: 1fr; gap: 0; }
}

.kg-auth-card .form-group label {
    display: block;
    font-family: var(--kg-body-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--kaaya-black);
    margin-bottom: 9px;
}
.kg-auth-card .form-group small {
    display: block;
    margin-top: 7px;
    font-family: var(--kg-body-font);
    font-size: 11.5px;
    color: var(--kaaya-moss);
    line-height: 1.5;
}

.kg-auth-card .form-group input,
.kg-auth-card .form-group select,
.kg-auth-card .form-group textarea {
    width: 100%;
    padding: 13px 16px;
    background: var(--kaaya-white);
    border: 1px solid var(--kaaya-beige);
    border-radius: 2px;
    font-family: var(--kg-body-font);
    font-size: 14.5px;
    color: var(--kaaya-black);
    transition: border-color var(--kg-speed-fast) var(--kg-ease), box-shadow var(--kg-speed-fast) var(--kg-ease);
}
.kg-auth-card .form-group input::placeholder,
.kg-auth-card .form-group textarea::placeholder { color: var(--kaaya-taupe); }
.kg-auth-card .form-group input:focus,
.kg-auth-card .form-group select:focus,
.kg-auth-card .form-group textarea:focus {
    outline: none;
    border-color: var(--kaaya-gold);
    box-shadow: 0 0 0 3px rgba(142,182,155,0.18);
}
.kg-auth-card .form-group textarea { resize: vertical; min-height: 100px; }
.kg-auth-card .form-group input[type="file"] {
    padding: 10px 14px;
    font-size: 13px;
    cursor: pointer;
}

.kg-auth-card .form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -6px 0 28px;
    font-family: var(--kg-body-font);
    font-size: 13px;
    color: var(--kaaya-moss);
}
.kg-auth-card .form-options label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 400;
    color: var(--kaaya-moss);
    margin: 0;
    cursor: pointer;
}
.kg-auth-card .forgot-link,
.kg-auth-card .register-link a {
    color: var(--kaaya-olive);
    font-weight: 600;
}
.kg-auth-card .forgot-link:hover,
.kg-auth-card .register-link a:hover { color: var(--kaaya-gold); }

.kg-auth-card .terms label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--kg-body-font);
    font-size: 13px;
    font-weight: 400;
    color: var(--kaaya-moss);
    cursor: pointer;
}
.kg-auth-card .terms input { width: auto; margin-top: 3px; }

.kg-auth-card button[type="submit"] {
    width: 100%;
    margin-top: 12px;
    padding: 16px 30px;
    background: var(--kaaya-black);
    color: var(--kaaya-white);
    border: 1px solid var(--kaaya-black);
    border-radius: 2px;
    font-family: var(--kg-body-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--kg-speed-fast) var(--kg-ease), color var(--kg-speed-fast) var(--kg-ease), border-color var(--kg-speed-fast) var(--kg-ease);
}
.kg-auth-card button[type="submit"]:hover {
    background: var(--kaaya-gold);
    border-color: var(--kaaya-gold);
    color: var(--kaaya-black);
}

.kg-auth-card .register-link {
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid var(--kaaya-beige);
    text-align: center;
    font-family: var(--kg-body-font);
    font-size: 13.5px;
    color: var(--kaaya-moss);
}

@media (max-width: 700px) {
    .kg-auth-card { padding: 40px 26px; }
    .kg-auth-card::before { left: 26px; }
    .kg-form-heading { font-size: 28px; }
}

/* =========================================================================
   SITE-WIDE PREMIUM POLISH
   Small, additive refinements applied on top of the existing components
   (buttons, gallery grid, final CTA) so the whole site reads consistently
   with the editorial sections above — deeper shadows, softer corners,
   calmer hover motion. Nothing here changes layout/structure.
   ========================================================================= */

/* ---- Buttons: refined depth + easing, site-wide ---- */
.btn-primary, .btn-secondary, .btn-luxury {
    letter-spacing: 0.02em;
    transition: transform var(--kg-speed-fast) var(--kg-ease), box-shadow var(--kg-speed-fast) var(--kg-ease), background var(--kg-speed-fast) var(--kg-ease), color var(--kg-speed-fast) var(--kg-ease);
}
.btn-luxury { box-shadow: 0 14px 34px -12px rgba(35,83,71,0.45); }
.btn-luxury:hover { box-shadow: 0 22px 44px -14px rgba(35,83,71,0.6); }

/* ---- Gallery grid: softer, deeper cards ---- */
.gallery-item {
    border-radius: 0 !important;
    box-shadow: 0 24px 50px -28px rgba(5,31,32,0.4);
    transition: transform var(--kg-speed-mid) var(--kg-ease), box-shadow var(--kg-speed-mid) var(--kg-ease);
}
.gallery-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -24px rgba(5,31,32,0.5);
}

/* ---- Final "Ready to Glow" CTA: richer, more editorial ---- */
.appointment-cta {
    position: relative;
    background:
        radial-gradient(ellipse 700px 380px at 50% -10%, rgba(142,182,155,0.35), transparent 70%),
        linear-gradient(160deg, var(--kaaya-black) 0%, var(--kaaya-charcoal) 60%, var(--kaaya-olive) 140%);
    padding: 130px 24px !important;
    overflow: hidden;
}
.appointment-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(218,241,222,0.09) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: 0.5;
    pointer-events: none;
}
.appointment-cta h2 {
    position: relative;
    font-family: var(--kg-heading-font);
    font-weight: 500;
    font-size: clamp(38px, 5vw, 62px) !important;
    letter-spacing: 0.01em;
    margin-bottom: 34px !important;
}
.appointment-cta .btn-luxury { position: relative; padding: 1.1rem 3.2rem; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; }

@media (max-width: 700px) {
    .appointment-cta { padding: 90px 24px !important; }
}

/* =========================================================================
   SCROLL TO TOP — fixed, site-wide floating button (footer.php)
   ========================================================================= */
.kg-scroll-top {
    position: fixed;
    right: 26px;
    bottom: 26px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--kaaya-black);
    color: var(--kaaya-beige);
    border: 1px solid rgba(201,228,210,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 16px 34px -14px rgba(5,31,32,0.55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity 0.35s var(--kg-ease), transform 0.35s var(--kg-ease), visibility 0.35s, background 0.3s ease, border-color 0.3s ease;
    z-index: 60;
}
.kg-scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.kg-scroll-top:hover { background: var(--kaaya-olive); border-color: var(--kaaya-olive); }
.kg-scroll-top svg { width: 20px; height: 20px; }

@media (max-width: 560px) {
    .kg-scroll-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
    .kg-scroll-top svg { width: 18px; height: 18px; }
}

/* =========================================================================
   SITEWIDE FULL-BLEED HERO (Services / About / Contact / Gallery)
   Namespaced "sv-hero" for historical reasons (first built for Services)
   but loaded globally here since it's now reused across multiple pages.
   ========================================================================= */
.sv-hero {
    position: relative;
    min-height: 62vh;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.sv-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        rgba(5,31,32,0.78) 0%,
        rgba(5,31,32,0.5) 42%,
        rgba(5,31,32,0.22) 75%,
        rgba(5,31,32,0.08) 100%);
}
.sv-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 130px 24px 60px;
    box-sizing: border-box;
}
.sv-hero-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--kg-body-font);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--kaaya-beige);
    opacity: 0.85;
    margin: 0 0 18px;
}
.sv-hero-meta-sep { width: 16px; height: 1px; background: currentColor; opacity: 0.6; flex-shrink: 0; }
.sv-hero-title-wrap { width: 100%; text-align: center; }
.sv-hero-title {
    font-family: var(--kg-heading-font);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: clamp(40px, 7vw, 96px);
    line-height: 0.96;
    color: var(--kaaya-beige);
    margin: 0 0 22px;
}
.sv-hero-link {
    display: inline-block;
    font-family: var(--kg-body-font);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--kaaya-beige);
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
    transition: color 0.3s ease;
}
.sv-hero-link:hover { color: var(--kaaya-gold); }

@media (max-width: 768px) {
    .sv-hero { min-height: 58vh; }
    .sv-hero-content { padding: 120px 20px 50px; }
}

/* Services hero collage — several category photos blended together behind
   a faded dark gradient, instead of one single flat photo, so the hero
   reads as "a range of services" at a glance. */
.sv-hero-collage-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    filter: grayscale(0.15) saturate(1.05);
}
.sv-hero-collage-tile {
    background-size: cover;
    background-position: center;
    opacity: 0.85;
    /* Fade each tile into its neighbours rather than showing hard seams. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%);
}
.sv-hero-collage-tile:first-child,
.sv-hero-collage-tile:last-child {
    -webkit-mask-image: none;
    mask-image: none;
}
.sv-hero-collage .sv-hero-overlay {
    background: linear-gradient(180deg,
        rgba(5,31,32,0.55) 0%,
        rgba(5,31,32,0.72) 55%,
        rgba(5,31,32,0.92) 100%);
}
@media (max-width: 768px) {
    .sv-hero-collage-grid { grid-template-columns: repeat(3, 1fr); }
}

/* "Shop by concern" quick-filter pills — jump straight to the matching
   category tab below (see data-sv-goto handling in sv-services.js). */
.sv-outcome-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}
.sv-outcome-pill {
    font-family: var(--kg-body-font);
    font-size: 12.5px;
    font-weight: 500;
    padding: 9px 18px;
    border-radius: 999px;
    background: rgba(218, 241, 222, 0.08);
    border: 1px solid rgba(218, 241, 222, 0.35);
    color: var(--kaaya-beige);
    text-decoration: none;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.sv-outcome-pill:hover,
.sv-outcome-pill:focus-visible {
    background: var(--kaaya-gold);
    border-color: var(--kaaya-gold);
    color: var(--kaaya-black);
    transform: translateY(-2px);
}

/* =========================================================================
   UNIFIED HERO BUTTON THEME
   Every hero section, site-wide, now uses the same two button looks:
     1) a bordered "outline" pill for the explore/browse action (paired
        with an arrow icon)
     2) a solid mint "filled" pill for the single booking action (no icon)
   Scoped strictly to hero containers (.hero-banner.home-hero, .sv-hero)
   so it never touches .kg-btn / .btn-primary / .btn-secondary used
   elsewhere on the site (final CTAs, membership cards, navbar, etc.).
   ========================================================================= */

/* ---- 1) Bordered outline pill — homepage "Explore…", and every other
   hero's single kg-btn CTA (service-details "Book This Treatment",
   packages "View Packages") ---- */
.hero-banner.home-hero .hero-buttons .btn-primary,
.sv-hero .kg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    border-radius: 999px;
    border: 1.5px solid rgba(218, 241, 222, 0.35);
    background: rgba(11, 43, 38, 0.55);
    color: var(--kaaya-white);
    font-family: var(--kg-body-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    box-shadow: none;
    transition: background var(--kg-speed-fast) var(--kg-ease), border-color var(--kg-speed-fast) var(--kg-ease), color var(--kg-speed-fast) var(--kg-ease), transform var(--kg-speed-fast) var(--kg-ease);
}
.hero-banner.home-hero .hero-buttons .btn-primary svg,
.sv-hero .kg-btn svg {
    width: 15px;
    height: 15px;
}
.hero-banner.home-hero .hero-buttons .btn-primary:hover,
.sv-hero .kg-btn:hover {
    background: rgba(218, 241, 222, 0.12);
    border-color: var(--kaaya-gold);
    color: var(--kaaya-white);
    transform: translateY(-2px);
    box-shadow: none;
}

/* ---- 2) Solid mint filled pill — homepage "Book Appointment", and every
   other hero's single link CTA (about "Book a Visit", services "Book
   Appointment", contact "Send a Message") ---- */
.hero-banner.home-hero .hero-buttons .btn-secondary,
.sv-hero-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    border-radius: 999px;
    border: none;
    background: var(--kaaya-gold);
    color: var(--kaaya-black);
    font-family: var(--kg-body-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    text-transform: none;
    text-underline-offset: unset;
    transition: background var(--kg-speed-fast) var(--kg-ease), color var(--kg-speed-fast) var(--kg-ease), transform var(--kg-speed-fast) var(--kg-ease);
}
.hero-banner.home-hero .hero-buttons .btn-secondary:hover,
.sv-hero-link:hover {
    background: var(--kaaya-white);
    color: var(--kaaya-black);
    transform: translateY(-2px);
}

@media (max-width: 480px) {
    .hero-banner.home-hero .hero-buttons .btn-primary,
    .hero-banner.home-hero .hero-buttons .btn-secondary,
    .sv-hero .kg-btn,
    .sv-hero-link {
        padding: 14px 22px;
        font-size: 13px;
    }
}

/* ROUND 42 - footer wordmark image */
.kg-footer-brand-name { display: inline-block; }
.kg-footer-wordmark { display: block; width: 240px; max-width: 100%; height: auto; }