/* ============================================================
   Omar Hamid Dental — Design System
   Glassmorphism / Liquid Glass / Luxury
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root {
    /* Colors */
    --color-bg-deep:          #1A1715;
    --color-bg-cream:         #F5F0EB;
    --color-bg-cream-light:   #FAF8F5;
    --color-gold:             #C4A265;
    --color-gold-light:       #D4B87A;
    --color-gold-dark:        #A8874E;

    /* Metallic gold gradient */
    --gold-metallic:          linear-gradient(135deg, #BF953F 0%, #FCF6BA 25%, #B38728 50%, #FBF5B7 75%, #AA771C 100%);
    --gold-metallic-subtle:   linear-gradient(135deg, #BF953F 0%, #D4B87A 30%, #B38728 60%, #D4B87A 80%, #AA771C 100%);
    --gold-shine:             linear-gradient(135deg, #AA771C 0%, #C6A44E 20%, #FCF6BA 40%, #D4B060 60%, #B38728 80%, #AA771C 100%);
    --color-charcoal:         #333334;
    --color-charcoal-light:   #4A4A4B;
    --color-charcoal-muted:   rgba(51, 51, 52, 0.6);
    --color-white:            #FFFFFF;
    --color-black:            #1A1A1A;
    --color-text-light:       #B6BAC5;
    --color-success:          #25D366;
    --color-error:            #A04040;

    /* Glass */
    --glass-bg:               rgba(255, 255, 255, 0.08);
    --glass-bg-hover:         rgba(255, 255, 255, 0.12);
    --glass-border:           rgba(255, 255, 255, 0.15);
    --glass-border-hover:     rgba(255, 255, 255, 0.25);
    --glass-blur:             30px;
    --glass-shadow:           0 8px 32px rgba(0, 0, 0, 0.2);

    /* Typography */
    --font-serif:             'Roboto', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-sans:              'Roboto', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Font Sizes */
    --text-xs:    0.75rem;
    --text-sm:    0.875rem;
    --text-base:  1rem;
    --text-lg:    1.125rem;
    --text-xl:    1.25rem;
    --text-2xl:   1.5rem;
    --text-3xl:   2rem;
    --text-4xl:   2.5rem;
    --text-5xl:   3.5rem;
    --text-6xl:   4.5rem;
    --text-hero:  clamp(3rem, 8vw, 6rem);

    /* Spacing */
    --space-1:    0.25rem;
    --space-2:    0.5rem;
    --space-3:    0.75rem;
    --space-4:    1rem;
    --space-6:    1.5rem;
    --space-8:    2rem;
    --space-12:   3rem;
    --space-16:   4rem;
    --space-24:   6rem;
    --space-32:   8rem;

    /* Layout */
    --max-width:       1200px;
    --max-width-wide:  1400px;
    --header-height:   80px;

    /* Transitions */
    --transition-fast:  150ms ease;
    --transition-base:  250ms ease;
    --transition-slow:  400ms cubic-bezier(0.16, 1, 0.3, 1);

    /* Borders */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   24px;
    --radius-full: 9999px;
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    background:
        linear-gradient(to top, rgba(232, 224, 214, 0.7) 0%, transparent 25%),
        radial-gradient(ellipse at 50% 0%, #E8E0D6 0%, #D5CBBD 35%, #B8A892 70%, #96856E 100%);
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-charcoal);
    background-color: var(--color-bg-cream);
    width: 100%;
    min-width: 100%;
    margin: 0;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-gold);
}

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 300;
    font-style: normal;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-5xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }

/* ---------- LAYOUT ---------- */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.section {
    padding: var(--space-24) 0;
}

/* ---------- GLASSMORPHISM ---------- */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
    transition: all var(--transition-slow);
}

.glass-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
}

/* ---------- BUTTONS ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
}

.btn--gold {
    background: var(--gold-metallic);
    background-size: 200% 200%;
    color: #3A2A0F;
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(255, 245, 200, 0.3);
    border: 1px solid rgba(191, 149, 63, 0.4);
    box-shadow: 0 2px 8px rgba(170, 119, 28, 0.3), inset 0 1px 0 rgba(252, 246, 186, 0.4);
    transition: all 0.4s ease;
}
.btn--gold:hover {
    background-position: 100% 100%;
    color: #2A1A05;
    box-shadow: 0 4px 16px rgba(170, 119, 28, 0.5), inset 0 1px 0 rgba(252, 246, 186, 0.6);
    transform: translateY(-1px);
}

.btn--outline {
    background: transparent;
    color: var(--color-charcoal);
    border: 1px solid rgba(51, 51, 52, 0.3);
}
.btn--outline:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

.btn--glass {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}
.btn--glass:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.4);
}

.btn--whatsapp {
    background: var(--color-success);
    color: var(--color-white);
}
.btn--whatsapp:hover {
    background: #1FAF53;
    color: var(--color-white);
}

.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }

/* ---------- HEADER ---------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    z-index: 100;
    background: rgba(245, 240, 235, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: background var(--transition-base);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.site-header__logo img {
    border-radius: 50%;
}

.site-nav {
    display: flex;
    gap: var(--space-6);
}

.site-nav__link {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--color-charcoal);
    position: relative;
}

.site-nav__link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-gold);
    transition: width var(--transition-base);
}

.site-nav__link:hover::after {
    width: 100%;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Language Switcher */
.lang-switcher {
    display: flex;
    gap: var(--space-1);
}

.lang-switcher__link {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-charcoal-muted);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.lang-switcher__link--active,
.lang-switcher__link:hover {
    color: var(--color-gold);
    background: rgba(196, 162, 101, 0.1);
}

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: var(--space-2);
    background: none;
    border: none;
    cursor: pointer;
}

.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-charcoal);
    transition: all var(--transition-fast);
}

/* ---------- FOOTER ---------- */
.site-footer {
    background: var(--color-bg-deep);
    color: var(--color-text-light);
    padding: var(--space-16) 0 var(--space-8);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}

.site-footer__heading {
    font-family: var(--font-serif);
    color: var(--color-white);
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
}

.site-footer a {
    color: var(--color-text-light);
}

.site-footer a:hover {
    color: var(--color-gold);
}

.site-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--space-6);
    font-size: var(--text-sm);
    color: rgba(182, 186, 197, 0.5);
}

/* ---------- WHATSAPP FLOAT ---------- */
.whatsapp-float {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    width: 56px;
    height: 56px;
    background: var(--color-success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
    z-index: 90;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    animation: whatsapp-pulse 2s infinite;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.6);
    color: var(--color-white);
}

@keyframes whatsapp-pulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4); }
    50% { box-shadow: 0 4px 24px rgba(37, 211, 102, 0.6); }
}

/* ---------- CHOOSER (Landing Page) ---------- */
.chooser {
    position: relative;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 600px;
    background:
        linear-gradient(to top, rgba(232, 224, 214, 0.7) 0%, transparent 25%),
        radial-gradient(ellipse at 50% 0%, #E8E0D6 0%, #D5CBBD 35%, #B8A892 70%, #96856E 100%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body.layout-minimal {
    overflow-x: hidden;
    min-height: 100dvh;
    background:
        linear-gradient(to top, rgba(232, 224, 214, 0.7) 0%, transparent 25%),
        radial-gradient(ellipse at 50% 0%, #E8E0D6 0%, #D5CBBD 35%, #B8A892 70%, #96856E 100%);
}

html:has(body.layout-minimal) {
    background:
        linear-gradient(to top, rgba(232, 224, 214, 0.7) 0%, transparent 25%),
        radial-gradient(ellipse at 50% 0%, #E8E0D6 0%, #D5CBBD 35%, #B8A892 70%, #96856E 100%);
}

.chooser__lang {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    display: flex;
    gap: var(--space-2);
    z-index: 10;
}

.chooser__lang-link {
    color: rgba(51, 51, 52, 0.5);
    font-size: var(--text-sm);
    font-weight: 500;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.chooser__lang-link--active,
.chooser__lang-link:hover {
    background: var(--gold-metallic-subtle);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---------- HOLIDAY POPUP ---------- */
.holiday-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 23, 21, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: var(--space-4);
}

.holiday-popup {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    padding: var(--space-10) var(--space-12);
    max-width: 520px;
    width: 100%;
    text-align: center;
    color: var(--color-white);
}

.holiday-popup__greeting {
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--color-white);
    margin-bottom: var(--space-4);
}

.holiday-popup__message {
    font-size: var(--text-lg);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--space-6);
    background: var(--gold-shine);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gold-shimmer 4s ease-in-out infinite;
}

.holiday-popup__email-note {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--space-2);
}

.holiday-popup__email {
    display: inline-block;
    font-size: var(--text-base);
    color: var(--color-gold-light);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-bottom: var(--space-6);
    transition: color var(--transition-fast);
}

.holiday-popup__email:hover {
    color: #FCF6BA;
}

.holiday-popup__signature {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: var(--space-8);
    line-height: 1.6;
}

.holiday-popup__close {
    display: inline-block;
    padding: var(--space-3) var(--space-8);
    background: var(--gold-metallic);
    background-size: 200% 200%;
    color: #3A2A0F;
    font-weight: 600;
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    border: 1px solid rgba(191, 149, 63, 0.4);
    border-radius: var(--radius-full);
    box-shadow: 0 2px 8px rgba(170, 119, 28, 0.3), inset 0 1px 0 rgba(252, 246, 186, 0.4);
    cursor: pointer;
    transition: all 0.4s ease;
}

.holiday-popup__close:hover {
    background-position: 100% 100%;
    box-shadow: 0 4px 16px rgba(170, 119, 28, 0.5), inset 0 1px 0 rgba(252, 246, 186, 0.6);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .holiday-popup {
        padding: var(--space-6) var(--space-6);
        border-radius: 20px;
    }

    .holiday-popup__greeting {
        font-size: var(--text-lg);
    }

    .holiday-popup__message {
        font-size: var(--text-base);
    }
}

/* Background layer */
.chooser__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Soft ambient spotlights from below */
.chooser__laser {
    position: absolute;
    bottom: -10%;
    width: 750px;
    height: 130vh;
    opacity: 0.5;
    filter: blur(40px);
    transform-origin: bottom center;
    will-change: transform, opacity;
    contain: strict;
}

.chooser__laser--left {
    left: 10%;
    background: radial-gradient(
        ellipse at 50% 100%,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.6) 20%,
        rgba(255, 250, 240, 0.3) 45%,
        transparent 75%
    );
    animation: laser-sway-left 12s ease-in-out infinite;
}

.chooser__laser--right {
    right: 10%;
    background: radial-gradient(
        ellipse at 50% 100%,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.6) 20%,
        rgba(255, 250, 240, 0.3) 45%,
        transparent 75%
    );
    animation: laser-sway-right 12s ease-in-out infinite;
}

@keyframes laser-sway-left {
    0%, 100% { transform: rotate(-2deg); opacity: 0.2; }
    50% { transform: rotate(3deg); opacity: 0.3; }
}

@keyframes laser-sway-right {
    0%, 100% { transform: rotate(2deg); opacity: 0.2; }
    50% { transform: rotate(-3deg); opacity: 0.3; }
}

/* Cards container */
.chooser__cards {
    position: relative;
    z-index: 5;
    display: flex;
    gap: 80px;
    padding: var(--space-6);
    align-items: center;
    justify-content: center;
}

/* ---------- INTRO ANIMATION ---------- */
/* Split offset: how far each card travels from center to final position */
.chooser__cards {
    --split-offset: calc(210px + 40px); /* half card (420/2) + half gap (80/2) */
}

/* Combined fadein + split as single keyframe sequence (no pop between animations) */
@keyframes sphere-enter-left {
    0%   { opacity: 0; transform: translateX(var(--split-offset)) scale(0.8); }
    40%  { opacity: 1; transform: translateX(var(--split-offset)) scale(1); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes sphere-enter-right {
    0%   { opacity: 0; transform: translateX(calc(-1 * var(--split-offset))) scale(0.8); }
    40%  { opacity: 1; transform: translateX(calc(-1 * var(--split-offset))) scale(1); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes sphere-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes sphere-split-up {
    from { transform: translateY(var(--split-offset)); }
    to   { transform: translateY(0); }
}
@keyframes sphere-split-down {
    from { transform: translateY(calc(-1 * var(--split-offset))); }
    to   { transform: translateY(0); }
}
@keyframes sphere-split-left {
    from { transform: translateX(calc(-1 * var(--split-offset))); }
    to   { transform: translateX(0); }
}
@keyframes sphere-split-right {
    from { transform: translateX(var(--split-offset)); }
    to   { transform: translateX(0); }
}
@keyframes content-reveal {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes simple-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Default hidden state until chooser is marked ready */
.chooser__card { opacity: 0; }
.chooser__card-inner > * { opacity: 0; }
.chooser__lang { opacity: 0; }
.chooser__footer { opacity: 0; }

/* --- Ready state: sphere fade in + split (single seamless animation) --- */
.chooser--ready .chooser__card:first-child {
    animation: sphere-enter-left 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.chooser--ready .chooser__card:last-child {
    animation: sphere-enter-right 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* --- Content gradual reveal (staggered) --- */
.chooser--ready .chooser__card-logo    { animation: content-reveal 0.5s ease-out 1.3s both; }
.chooser--ready .chooser__card-title   { animation: content-reveal 0.4s ease-out 1.7s both; }
.chooser--ready .chooser__card-subtitle { animation: content-reveal 0.4s ease-out 1.85s both, gold-shimmer 4s ease-in-out 2.25s infinite; }
.chooser--ready .chooser__card-address { animation: content-reveal 0.4s ease-out 2.0s both; }
.chooser--ready .chooser__card-contact { animation: content-reveal 0.4s ease-out 2.2s both; }
.chooser--ready .chooser__card-cta     { animation: content-reveal 0.4s ease-out 2.4s both; }
.chooser--ready .chooser__footer       { animation: simple-fadein 0.5s ease-out 2.6s both; }
.chooser--ready .chooser__lang         { animation: simple-fadein 0.5s ease-out 2.6s both; }

/* Circular bubble card */
.chooser__card {
    width: 420px;
    height: 420px;
    border-radius: 50%;
    padding: var(--space-8);
    text-align: center;
    color: var(--color-charcoal);
    background: radial-gradient(ellipse at 30% 20%,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0.15) 100%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.12),
        0 8px 24px rgba(0, 0, 0, 0.08),
        inset 0 -8px 20px rgba(255, 255, 255, 0.15),
        inset 0 2px 0 rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    will-change: transform;
    transition: box-shadow 0.4s ease;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    contain: layout style;
}

/* Soap-bubble shimmer highlight */
.chooser__card::before {
    content: '';
    position: absolute;
    top: 8%;
    left: 15%;
    width: 45%;
    height: 25%;
    background: radial-gradient(ellipse,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.1) 60%,
        transparent 100%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

/* Subtle rainbow refraction at edges */
.chooser__card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: conic-gradient(from 120deg,
        transparent 0%,
        rgba(180, 200, 255, 0.12) 15%,
        rgba(255, 180, 220, 0.1) 30%,
        transparent 45%,
        rgba(180, 255, 200, 0.08) 60%,
        rgba(200, 180, 255, 0.1) 75%,
        transparent 100%);
    pointer-events: none;
    z-index: 2;
}

.chooser__card:hover {
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.18),
        0 12px 30px rgba(0, 0, 0, 0.1),
        inset 0 -8px 20px rgba(255, 255, 255, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.6);
}

.chooser__card-inner {
    transform: translateZ(20px);
    position: relative;
    z-index: 3;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chooser__card-logo {
    margin-bottom: var(--space-6);
    position: relative;
    display: flex;
    justify-content: center;
}

.chooser__card-logo img {
    margin: 0 auto;
    max-width: 100%;
    max-height: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0;
}

/* Gold gradient masked by logo shape */
.chooser__card-logo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        #AA771C 0%,
        #C6A44E 15%,
        #FCF6BA 30%,
        #D4B060 45%,
        #B38728 60%,
        #FCF6BA 75%,
        #AA771C 100%
    );
    background-size: 200% auto;
    -webkit-mask-image: var(--logo);
    mask-image: var(--logo);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    animation: none;
    will-change: background-position;
    filter: drop-shadow(0 2px 6px rgba(170, 119, 28, 0.4));
}

/* Gold shimmer starts only after the chooser is actually ready */
.chooser--ready .chooser__card-logo.is-loaded::after {
    animation: gold-logo-shine 2.5s ease-in-out 1.8s infinite;
}

/* Animated GIF logo — show img directly, skip mask overlay */
.chooser__card-logo--animated img {
    opacity: 1;
    filter: drop-shadow(0 2px 6px rgba(170, 119, 28, 0.4));
}
.chooser__card-logo--animated::after {
    display: none;
}

@keyframes gold-logo-shine {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

.chooser__card-title {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-charcoal);
    margin-bottom: var(--space-1);
    line-height: 1.3;
}

.chooser__card-subtitle {
    font-size: var(--text-sm);
    font-weight: 500;
    margin-bottom: var(--space-2);
    background: var(--gold-shine);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* Gold shimmer on subtitle only after the ready-state reveal */
.chooser--ready .chooser__card-subtitle {
    animation: content-reveal 0.4s ease-out 1.85s both, gold-shimmer 4s ease-in-out 2.25s infinite;
}

@keyframes gold-shimmer {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

.chooser__card-address {
    font-size: var(--text-xs);
    color: var(--color-charcoal-muted);
    margin-bottom: var(--space-3);
    line-height: 1.6;
}

.chooser__card-contact {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.chooser__contact-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--color-charcoal);
    transition: all var(--transition-base);
}

.chooser__contact-btn svg {
    width: 16px;
    height: 16px;
}

.chooser__contact-btn:hover {
    background: rgba(196, 162, 101, 0.15);
    border-color: #BF953F;
    color: #B38728;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(170, 119, 28, 0.2);
}

.chooser__contact-btn--whatsapp:hover {
    background: rgba(37, 211, 102, 0.1);
    border-color: var(--color-success);
    color: var(--color-success);
}

.chooser__contact-btn--email:hover {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.45);
    color: #dc2626;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.22);
}

.chooser__contact-btn--vcard:hover {
    background: rgba(236, 72, 153, 0.12);
    border-color: rgba(236, 72, 153, 0.45);
    color: #ec4899;
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.22);
}

.chooser__contact-btn--maps:hover {
    background: rgba(66, 133, 244, 0.1);
    border-color: #4285F4;
    color: #4285F4;
}

/* Hours clock icon + tooltip */
.chooser__contact-btn--hours {
    position: relative;
    cursor: pointer;
    font-family: var(--font-sans);
}

.chooser__contact-btn--hours:hover {
    background: rgba(196, 162, 101, 0.15);
    border-color: #BF953F;
    color: #B38728;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(170, 119, 28, 0.2);
}

.chooser__hours-tooltip {
    display: none;
    position: fixed;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(40px) saturate(1.2);
    -webkit-backdrop-filter: blur(40px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px 24px;
    min-width: 230px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
    flex-direction: column;
    gap: 5px;
}

.chooser__hours-tooltip::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
}

.chooser__hours-tooltip.arrow-down::after {
    bottom: -14px;
    border-top-color: rgba(0, 0, 0, 0.55);
}

.chooser__hours-tooltip.arrow-up::after {
    top: -14px;
    border-bottom-color: rgba(0, 0, 0, 0.55);
}

/* Mobile: center as a mini-overlay */
@media (max-width: 768px) {
    .chooser__hours-tooltip {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
        min-width: 250px;
    }

    .chooser__hours-tooltip::after {
        display: none;
    }
}

.chooser__hours-tooltip.show {
    display: flex;
}

.chooser__hours-tooltip strong {
    font-size: 0.7rem;
    color: var(--color-gold-light);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.chooser__hours-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.7rem;
    line-height: 1.6;
}

.chooser__hours-day {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.chooser__hours-time {
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}

.chooser__hours-note {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
    line-height: 1.5;
}

.chooser__card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-charcoal);
    border: 1px solid rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 4;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.chooser__card-cta-label {
    position: relative;
    z-index: 2;
}

.chooser__card-cta::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(
        115deg,
        transparent 0%,
        transparent 30%,
        rgba(252, 246, 186, 0.0) 38%,
        rgba(252, 246, 186, 0.55) 50%,
        rgba(252, 246, 186, 0.0) 62%,
        transparent 70%,
        transparent 100%
    );
    transform: translateX(-140%);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.chooser__card-cta:hover {
    background: linear-gradient(135deg, #AA771C 0%, #C6A44E 18%, #FCF6BA 40%, #D4B060 58%, #B38728 78%, #FCF6BA 100%);
    color: #3A2A0F;
    font-weight: 600;
    border-color: rgba(191, 149, 63, 0.5);
    box-shadow: 0 2px 12px rgba(170, 119, 28, 0.3), inset 0 1px 0 rgba(252, 246, 186, 0.3);
}

.chooser__card-cta:hover::before {
    opacity: 1;
    animation: chooser-btn-sheen 1.8s linear infinite;
}

.chooser__card-cta:focus-visible {
    outline: 2px solid rgba(191, 149, 63, 0.6);
    outline-offset: 2px;
}

@keyframes gold-btn-shine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes chooser-btn-sheen {
    0% { transform: translateX(-140%); }
    100% { transform: translateX(140%); }
}

.chooser__footer {
    position: absolute;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 5;
    white-space: nowrap;
}

.chooser__copyright {
    font-size: var(--text-xs);
    color: rgba(51, 51, 52, 0.4);
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 400;
    margin-bottom: var(--space-1);
}

.chooser__footer-links {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    align-items: center;
}

.chooser__footer-links a {
    font-size: var(--text-xs);
    color: rgba(51, 51, 52, 0.4);
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 400;
    transition: color var(--transition-fast);
}

.chooser__footer-links a:hover {
    background: var(--gold-metallic-subtle);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.chooser__footer-sep {
    font-size: var(--text-xs);
    color: rgba(51, 51, 52, 0.2);
}

/* Accessibility: disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .chooser__card,
    .chooser__card-inner > *,
    .chooser__lang,
    .chooser__footer { opacity: 1; }
    .chooser__card { animation: none !important; }
    .chooser__card-inner > * { animation: none !important; opacity: 1 !important; }
    .chooser__lang, .chooser__footer { animation: none !important; opacity: 1 !important; }
    .chooser__card-logo::after { animation: none; }
    .chooser__card-subtitle { animation: none; }
    .chooser__laser { animation: none; }
    .btn--glass.chooser__card-cta { animation: none !important; }
}

/* ---------- HERO ---------- */
.hero {
    padding: calc(var(--header-height) + var(--space-24)) 0 var(--space-24);
    text-align: center;
}

.hero__title {
    margin-bottom: var(--space-6);
}

.hero__subtitle {
    font-size: var(--text-xl);
    color: var(--color-charcoal-muted);
    max-width: 600px;
    margin: 0 auto var(--space-8);
}

.hero__cta {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------- CTA SECTION ---------- */
.cta-section {
    background: var(--color-bg-deep);
    color: var(--color-white);
    text-align: center;
}

.cta-section__title {
    color: var(--color-white);
    margin-bottom: var(--space-4);
}

.cta-section__text {
    color: var(--color-text-light);
    font-size: var(--text-lg);
    max-width: 500px;
    margin: 0 auto var(--space-8);
}

.cta-section__buttons {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------- SECTION ---------- */
.section__title {
    text-align: center;
    margin-bottom: var(--space-4);
}

.section__subtitle {
    text-align: center;
    color: var(--color-charcoal-muted);
    font-size: var(--text-lg);
    max-width: 600px;
    margin: 0 auto var(--space-12);
}

/* ---------- UTILITIES ---------- */
.hide-mobile {
    display: inline;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
    .site-nav {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .site-footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet landscape */
@media (max-width: 900px) {
    .chooser__cards {
        gap: 50px;
        --split-offset: calc(170px + 25px); /* half card (340/2) + half gap (50/2) */
    }

    .chooser__card {
        width: 340px;
        height: 340px;
        padding: var(--space-6);
    }

    .chooser__card-logo {
        max-width: 100px;
        height: 55px;
    }

    .chooser__card-title {
        font-size: var(--text-base);
    }

    .chooser__laser {
        width: 350px;
    }
}

/* Tablet portrait + large phones — static, no scroll */
@media (max-width: 768px) {
    .chooser {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        max-height: 100dvh;
        padding: 0;
        overflow: hidden;
    }

    .chooser__lang {
        top: var(--space-3);
        right: var(--space-3);
    }

    .chooser__cards {
        flex-direction: column;
        gap: 20px;
        --split-offset: calc(min(70vw, 42vh) / 2 + 10px); /* half card + half gap */
    }

    .chooser--ready .chooser__card:first-child {
        animation: sphere-fadein 0.6s cubic-bezier(0.22, 1, 0.36, 1) both,
                   sphere-split-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
    }
    .chooser--ready .chooser__card:last-child {
        animation: sphere-fadein 0.6s cubic-bezier(0.22, 1, 0.36, 1) both,
                   sphere-split-down 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
    }

    /* Use viewport-relative sizing so bubbles + footer always fit */
    .chooser__card {
        width: min(70vw, 42vh);
        height: min(70vw, 42vh);
        padding: min(5vw, 4vh);
    }

    .chooser__card-logo {
        max-width: min(80px, 18vw);
        height: min(45px, 6vh);
        margin-bottom: var(--space-1);
    }

    .chooser__card-title {
        font-size: clamp(0.75rem, 2vw, 1rem);
    }

    .chooser__card-subtitle {
        font-size: clamp(0.6rem, 1.5vw, 0.8rem);
    }

    .chooser__card-address {
        font-size: clamp(0.55rem, 1.3vw, 0.7rem);
        margin-bottom: var(--space-3);
        line-height: 1.5;
    }

    .chooser__card-contact {
        gap: 6px;
        margin-bottom: var(--space-4);
    }

    .chooser__contact-btn {
        width: 30px;
        height: 30px;
    }

    .chooser__contact-btn svg {
        width: 13px;
        height: 13px;
    }

    .chooser__card-cta {
        padding: 4px var(--space-3);
        font-size: clamp(0.55rem, 1.3vw, 0.7rem);
    }

    .chooser__footer {
        bottom: var(--space-2);
        position: absolute;
    }

    .chooser__copyright {
        font-size: 0.6rem;
    }

    .chooser__footer-links a {
        font-size: 0.6rem;
    }

    .chooser__laser--left {
        left: -5%;
        width: 300px;
    }

    .chooser__laser--right {
        right: -5%;
        width: 300px;
    }

    .hide-mobile {
        display: none;
    }

    h2 { font-size: var(--text-4xl); }
    h3 { font-size: var(--text-2xl); }

    .site-footer__grid {
        grid-template-columns: 1fr;
    }
}

/* Landscape phones — side by side again */
@media (orientation: landscape) and (max-width: 932px) and (max-height: 540px) {
    .chooser {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        max-height: 100dvh;
        width: 100dvw;
        min-width: 100dvw;
        overflow-x: hidden;
        overflow-y: auto;
        justify-content: center;
        padding-top: max(12px, env(safe-area-inset-top, 0px));
        padding-right: max(8px, env(safe-area-inset-right, 0px));
        padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
        padding-left: max(8px, env(safe-area-inset-left, 0px));
    }

    .chooser__lang {
        top: 8px;
        right: 12px;
    }

    .chooser__cards {
        --chooser-landscape-gap: clamp(14px, 2vw, 24px);
        --chooser-landscape-card: min(
            460px,
            calc((100dvw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 20px - var(--chooser-landscape-gap)) / 2),
            calc(100dvh - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))
        );
        flex-direction: row;
        gap: var(--chooser-landscape-gap);
        width: 100%;
        max-width: 100%;
        padding: 8px 2px 4px;
        --split-offset: calc(var(--chooser-landscape-card) / 2 + 8px);
    }
    /* Back to horizontal split */
    .chooser--ready .chooser__card:first-child {
        animation: sphere-fadein 0.6s cubic-bezier(0.22, 1, 0.36, 1) both,
                   sphere-split-left 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
    }
    .chooser--ready .chooser__card:last-child {
        animation: sphere-fadein 0.6s cubic-bezier(0.22, 1, 0.36, 1) both,
                   sphere-split-right 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
    }

    .chooser__card {
        width: var(--chooser-landscape-card);
        height: var(--chooser-landscape-card);
        padding: clamp(14px, calc(var(--chooser-landscape-card) * 0.06), 24px);
    }

    .chooser__card-logo {
        max-width: clamp(64px, calc(var(--chooser-landscape-card) * 0.22), 92px);
        height: clamp(30px, calc(var(--chooser-landscape-card) * 0.105), 44px);
        margin-bottom: clamp(4px, calc(var(--chooser-landscape-card) * 0.015), 8px);
    }

    .chooser__card-logo img {
        max-height: 100%;
    }

    .chooser__card-title {
        font-size: clamp(0.8rem, calc(var(--chooser-landscape-card) * 0.034), 1rem);
        line-height: 1.22;
    }

    .chooser__card-subtitle {
        font-size: clamp(0.66rem, calc(var(--chooser-landscape-card) * 0.0285), 0.82rem);
        margin-bottom: clamp(5px, calc(var(--chooser-landscape-card) * 0.02), 10px);
        line-height: 1.2;
    }

    .chooser__card-address {
        font-size: clamp(0.56rem, calc(var(--chooser-landscape-card) * 0.0235), 0.7rem);
        line-height: 1.35;
        margin-bottom: clamp(8px, calc(var(--chooser-landscape-card) * 0.03), 14px);
    }

    .chooser__card-contact {
        gap: clamp(5px, calc(var(--chooser-landscape-card) * 0.015), 8px);
        margin-bottom: clamp(10px, calc(var(--chooser-landscape-card) * 0.035), 16px);
    }

    .chooser__contact-btn {
        width: clamp(26px, calc(var(--chooser-landscape-card) * 0.086), 36px);
        height: clamp(26px, calc(var(--chooser-landscape-card) * 0.086), 36px);
    }

    .chooser__contact-btn svg {
        width: clamp(11px, calc(var(--chooser-landscape-card) * 0.038), 15px);
        height: clamp(11px, calc(var(--chooser-landscape-card) * 0.038), 15px);
    }

    .chooser__card-cta {
        font-size: clamp(0.58rem, calc(var(--chooser-landscape-card) * 0.024), 0.72rem);
        padding:
            clamp(4px, calc(var(--chooser-landscape-card) * 0.012), 6px)
            clamp(10px, calc(var(--chooser-landscape-card) * 0.03), 14px);
    }

    .chooser__footer {
        position: static;
        margin-top: 4px;
        padding-bottom: 4px;
        width: 100%;
        left: auto;
        transform: none;
        text-align: center;
    }

    .chooser__copyright,
    .chooser__footer-links a {
        font-size: 0.56rem;
    }
}

/* ==========================================================
   CLINIC PAGE (Jerusalemgasse / State Clinic)
   ========================================================== */

.clinic-page {
    position: relative;
    width: 100vw;
    min-height: 100dvh;
    background:
        linear-gradient(to top, rgba(232, 224, 214, 0.7) 0%, transparent 25%),
        radial-gradient(ellipse at 50% 0%, #E8E0D6 0%, #D5CBBD 35%, #B8A892 70%, #96856E 100%);
    display: flex;
    flex-direction: column;
}

/* Laser spotlights — fixed, stay in place while scrolling */
.clinic-page__bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.clinic-page__laser {
    position: absolute;
    bottom: -10%;
    width: 750px;
    height: 130vh;
    opacity: 0.5;
    filter: blur(60px);
    transform-origin: bottom center;
}

.clinic-page__laser--left {
    left: 10%;
    background: radial-gradient(
        ellipse at 50% 100%,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.6) 20%,
        transparent 75%
    );
    animation: laser-sway-left 12s ease-in-out infinite;
}

.clinic-page__laser--right {
    right: 10%;
    background: radial-gradient(
        ellipse at 50% 100%,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.6) 20%,
        transparent 75%
    );
    animation: laser-sway-right 15s ease-in-out infinite;
}

/* ---------- Clinic Header ---------- */
.clinic-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    padding: var(--space-4) var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.4s ease;
}

/* V1: Transparent */
.clinic-header--transparent {
    background: transparent;
}

/* V2: Milky Glass */
.clinic-header--milky {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* V3: Liquid Glass */
.clinic-header--liquid {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.3) 100%
    );
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

/* Header Logo (solid gold — no gradient shimmer) */
.clinic-header__logo {
    display: block;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    background: var(--color-gold);
    -webkit-mask-image: var(--logo);
    mask-image: var(--logo);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Header Center Nav (service menu for bubble scene) */
.clinic-header__nav {
    display: flex;
    gap: 4px;
    align-items: center;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.clinic-header__nav-item {
    background: none;
    border: none;
    font: 400 0.72rem/1 'Inter', sans-serif;
    color: var(--color-charcoal-muted);
    padding: 6px 12px;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
    border-radius: 16px;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.clinic-header__nav-item:hover {
    color: var(--color-charcoal);
    background: rgba(0, 0, 0, 0.04);
}

.clinic-header__nav-item.is-active {
    color: var(--color-gold);
}

.clinic-header__nav.is-burst-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Header Flat Language Links */
.clinic-header__langs {
    display: flex;
    gap: 2px;
    align-items: center;
    flex-shrink: 0;
}

.clinic-header__lang {
    font: 500 0.7rem/1 'Inter', sans-serif;
    color: var(--color-charcoal-muted);
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
    transition: color 0.15s;
    letter-spacing: 0.03em;
}

.clinic-header__lang:hover {
    color: var(--color-charcoal);
}

.clinic-header__lang--active {
    color: var(--color-gold);
}

/* Language links fade-out when scrolled past hero (desktop) */
.clinic-header__langs.is-scrolled-away {
    opacity: 0;
    pointer-events: none;
}

/* ---------- Mobile Burger Button ---------- */
.clinic-header__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 12;
    flex-shrink: 0;
}

.clinic-header__burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-charcoal);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
}

.clinic-header__burger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.clinic-header__burger.is-open span:nth-child(2) {
    opacity: 0;
}

.clinic-header__burger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Mobile Drawer — Milky Glass ---------- */
.clinic-header__drawer {
    position: fixed;
    top: 58px;
    right: 0;
    bottom: 0;
    width: 75vw;
    max-width: 300px;
    z-index: 11;
    display: none;

    /* Glassmorphism — CodePen technique */
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(35px);
    backdrop-filter: blur(35px);
    transform: translate3d(100%, 0, 0);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;

    /* Glass edge details */
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
    padding: 16px 0;
}

.clinic-header__drawer.is-open {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    pointer-events: auto;
}

/* Drawer service items */
.clinic-drawer__services {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
}

.clinic-drawer__svc-item {
    background: none;
    border: none;
    font: 400 1.1rem/1.4 'Inter', sans-serif;
    color: var(--color-charcoal);
    padding: 18px 24px;
    cursor: pointer;
    text-align: left;
    transition: color 0.2s, background 0.2s;
}

.clinic-drawer__svc-item:hover,
.clinic-drawer__svc-item:active {
    color: var(--color-gold);
    background: rgba(196, 162, 101, 0.1);
}

/* Drawer language links */
.clinic-drawer__langs {
    display: flex;
    gap: 4px;
    padding: 14px 24px 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    margin-top: 4px;
}

.clinic-drawer__lang {
    font: 500 0.85rem/1 'Inter', sans-serif;
    color: var(--color-charcoal-muted);
    padding: 6px 10px;
    border-radius: 4px;
    text-decoration: none;
    transition: color 0.15s;
    letter-spacing: 0.03em;
}

.clinic-drawer__lang:hover {
    color: var(--color-charcoal);
}

.clinic-drawer__lang--active {
    color: var(--color-gold);
}

/* Clinic main content area */
.clinic-page__content {
    position: relative;
    z-index: 1;
    flex: 1;
    padding-top: 70px;
}

/* ---------- Clinic Sections ---------- */
.clinic-section {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    padding: var(--space-8) var(--space-6);
}

.clinic-section__inner {
    max-width: var(--max-width);
    width: 100%;
    text-align: center;
}

.clinic-section--hero {
    padding-top: 0;
}

/* Screen-reader only (SEO h1) */
.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;
}

.clinic-hero__signature {
    display: block;
    margin: 0 auto var(--space-6);
    max-width: 520px;
    height: auto;
    opacity: 0.85;
}

.clinic-hero__field {
    font-size: clamp(0.72rem, 2.8vw, 1.9rem);
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin: 0 0 var(--space-2);
    white-space: nowrap;
}

.clinic-hero__specialty {
    font-size: clamp(0.62rem, 2.3vw, 1.55rem);
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-charcoal-muted);
    margin: 0;
    white-space: nowrap;
}

.clinic-hero__awards {
    display: flex;
    justify-content: center;
    gap: 160px;
    flex-wrap: wrap;
    margin-top: calc(var(--space-8) * 1.5);
}

.clinic-hero__award {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    text-align: center;
}

.clinic-hero__award-logo {
    flex-shrink: 0;
    height: 65px;
    width: auto;
    filter: invert(1);
    opacity: 0.4;
    margin-bottom: var(--space-1);
}

.clinic-hero__award-org {
    font-size: var(--text-xs);
    font-weight: 300;
    letter-spacing: 0.05em;
    color: var(--color-charcoal-muted);
    line-height: 1.3;
}

.clinic-hero__award-title {
    font-size: clamp(0.65rem, 1.3vw, 0.78rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-charcoal);
    line-height: 1.3;
}

@media (max-width: 768px) {
    .clinic-hero__signature {
        max-width: 320px;
        margin: 0 auto var(--space-4);
    }

    .clinic-hero__awards {
        gap: var(--space-6);
    }

    .clinic-hero__award-logo {
        height: 45px;
    }

    .clinic-hero__award-org {
        font-size: 0.65rem;
    }

    .clinic-hero__award-title {
        font-size: 0.6rem;
    }
}

@media (max-width: 400px) {
    .clinic-hero__signature {
        max-width: 220px;
    }

    .clinic-hero__award-logo {
        height: 35px;
    }
}

/* Philosophy — subtle dark overlay fading in */
.clinic-section--philosophy::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(26, 23, 21, 0.15) 30%,
        rgba(26, 23, 21, 0.25) 100%
    );
    pointer-events: none;
}

/* CTA — deeper tint, lighter at bottom */
.clinic-section--cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(26, 23, 21, 0.25) 0%,
        rgba(26, 23, 21, 0.35) 50%,
        rgba(26, 23, 21, 0.2) 100%
    );
    pointer-events: none;
}

/* Section typography */
.clinic-section__tagline {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 300;
    color: var(--color-charcoal);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-4);
}

.clinic-section__subtitle {
    font-size: clamp(1rem, 2vw, 1.35rem);
    font-weight: 300;
    color: var(--color-charcoal-light);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

.clinic-section__heading {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 300;
    color: var(--color-charcoal);
    margin-bottom: var(--space-6);
    letter-spacing: -0.01em;
}

.clinic-section__text {
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    font-weight: 300;
    color: var(--color-charcoal-light);
    line-height: 1.8;
    max-width: 650px;
    margin: 0 auto var(--space-6);
}

/* Services grid */
.clinic-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}

.clinic-service h3 {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-gold);
    margin: 0 0 var(--space-2);
    letter-spacing: 0.02em;
}

.clinic-service p {
    font-size: var(--text-sm);
    font-weight: 300;
    color: var(--color-charcoal-muted);
    line-height: 1.6;
    margin: 0;
}

/* CTA signature */
.clinic-cta__signature {
    display: block;
    margin: 0 auto var(--space-6);
    max-width: 360px;
    width: 80%;
    opacity: 0.9;
}

/* Locations */
.clinic-locations {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}

.clinic-location {
    text-align: center;
    min-width: 200px;
}

.clinic-location h3 {
    font-size: clamp(0.85rem, 1.5vw, 1.1rem);
    font-weight: 500;
    color: var(--color-gold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 var(--space-2);
}

.clinic-location__address {
    font-size: var(--text-sm);
    font-weight: 300;
    color: var(--color-charcoal-light);
    line-height: 1.6;
    margin: 0 0 var(--space-1);
}

.clinic-location__info {
    font-size: var(--text-xs);
    font-weight: 300;
    color: var(--color-charcoal-muted);
    line-height: 1.5;
    margin: 0 0 var(--space-3);
}

/* Contact icon buttons — matches chooser style */
.clinic-location__contact {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
}

.clinic-location__btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--color-charcoal-light);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.clinic-location__btn svg {
    width: 16px;
    height: 16px;
}

.clinic-location__btn:hover {
    background: rgba(196, 162, 101, 0.15);
    border-color: #BF953F;
    color: #B38728;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(170, 119, 28, 0.2);
}

.clinic-location__btn--whatsapp:hover {
    background: rgba(37, 211, 102, 0.1);
    border-color: var(--color-success);
    color: var(--color-success);
}

.clinic-location__btn--maps:hover {
    background: rgba(66, 133, 244, 0.1);
    border-color: #4285F4;
    color: #4285F4;
}

/* CTA copyright */
.clinic-cta__copyright {
    margin-top: var(--space-4);
    font-size: var(--text-xs);
    font-weight: 300;
    color: var(--color-charcoal-muted);
    letter-spacing: 0.03em;
    opacity: 0.6;
}

@media (max-width: 768px) {
    .clinic-services {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
}

@media (max-width: 500px) {
    .clinic-services {
        grid-template-columns: 1fr;
    }
}

/* CTA button */
.clinic-cta-btn {
    display: inline-block;
    padding: var(--space-4) var(--space-8);
    background: var(--gold-metallic-subtle);
    color: var(--color-white);
    font-size: var(--text-base);
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-slow);
    box-shadow: 0 4px 20px rgba(170, 119, 28, 0.3);
}

.clinic-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(170, 119, 28, 0.45);
}

/* Scroll reveal animation */
.clinic-reveal {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(4px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.8s ease-out;
}

.clinic-reveal.is-visible {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

/* Kill transition on scroll-parallax elements after reveal — instant response to scroll */
.hero-scroll.is-visible {
    transition: none;
}

.clinic-reveal--delay-1 { transition-delay: 0.25s; }
.clinic-reveal--delay-2 { transition-delay: 0.5s; }
.clinic-reveal--delay-3 { transition-delay: 0.75s; }


/* ---------- Clinic Debug Panel ---------- */
.clinic-debug {
    position: fixed;
    bottom: var(--space-4);
    right: var(--space-4);
    z-index: 9999;
    display: none;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
}

.clinic-debug.is-visible {
    display: flex;
}

.clinic-debug__title {
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10px;
    margin-bottom: var(--space-1);
}

.clinic-debug__btn {
    padding: var(--space-2) var(--space-3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--text-xs);
    text-align: left;
}

.clinic-debug__btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.clinic-debug__btn.is-active {
    background: rgba(196, 162, 101, 0.3);
    border-color: var(--color-gold);
    color: var(--color-gold-light);
}

/* ---------- Clinic Page Responsive ---------- */

/* Tablet portrait */
@media (max-width: 768px) {
    .clinic-header {
        padding: var(--space-3) var(--space-4);
    }

    .clinic-header__logo {
        width: 40px;
        height: 40px;
    }

    .clinic-header__nav {
        display: none;
    }

    .clinic-header__langs {
        display: none;
    }

    .clinic-header__burger {
        display: flex;
    }

    .clinic-header__drawer {
        display: block;
    }

    .clinic-page__content {
        padding-top: 58px;
    }

    .clinic-section {
        padding: var(--space-6) var(--space-4);
    }

    .clinic-section--hero {
        padding-top: 70px;
    }

    .clinic-page__laser {
        width: 400px;
    }

    .clinic-cta__signature {
        max-width: 260px;
    }

    .clinic-locations {
        gap: var(--space-6);
    }

    .clinic-location__btn {
        width: 32px;
        height: 32px;
    }

    .clinic-location__btn svg {
        width: 14px;
        height: 14px;
    }
}

/* Small phones */
@media (max-width: 400px) {
    .clinic-header {
        padding: var(--space-2) var(--space-3);
    }

    .clinic-header__logo {
        width: 34px;
        height: 34px;
    }

    .clinic-header__drawer {
        top: 50px;
    }

    .clinic-page__content {
        padding-top: 50px;
    }

    .clinic-section {
        padding: var(--space-4) var(--space-3);
    }

    .clinic-section--hero {
        padding-top: 60px;
    }

    .clinic-page__laser {
        width: 300px;
    }
}

/* Landscape phones */
@media (max-height: 500px) and (max-width: 900px) {
    .clinic-header {
        padding: var(--space-2) var(--space-4);
    }

    .clinic-header__logo {
        width: 34px;
        height: 34px;
    }

    .clinic-page__laser {
        width: 300px;
    }
}

/* ============================================================
   3D Bubble Services Section
   ============================================================ */

/* Section container */
.clinic-section--bubbles {
    position: relative;
    padding: 0;
    min-height: 100dvh;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.service-panel,
.service-nav,
.service-mobile-sheet,
.service-panel-mobile,
.service-nav-mobile {
    pointer-events: auto;
}

.clinic-section--bubbles::before {
    display: none;
}

/* Canvas — fixed full-page background */
#service-bubble-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
}

/* ---------- Glass Info Panel (Left, Desktop) ---------- */
.service-panel {
    position: absolute;
    left: clamp(24px, 4vw, 60px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    padding: 40px 34px;
    max-width: 380px;
    width: 340px;
    pointer-events: none;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.service-panel__title {
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    font-size: 1.45rem;
    font-weight: 500;
    color: var(--color-gold);
    margin: 0 0 16px;
    transition: opacity 0.15s ease;
}

.service-panel__text {
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.75;
    margin: 0;
    transition: opacity 0.15s ease;
}

/* ---------- HUD Nav (Top-Right, Desktop) ---------- */
.service-nav {
    position: absolute;
    right: clamp(16px, 2.5vw, 36px);
    top: clamp(80px, 10vh, 120px);
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    border-radius: 10px;
    padding: 6px 0;
    min-width: 170px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.service-nav__item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 7px 16px;
    cursor: pointer;
    font-family: 'Inter', 'SF Pro Display', -apple-system, system-ui, sans-serif;
    font-size: 0.76rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.2s ease, background 0.2s ease;
    text-align: left;
    white-space: nowrap;
    position: relative;
}

.service-nav__item:hover {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.04);
}

.service-nav__item.is-active {
    color: var(--color-gold);
}

.service-nav__item.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    top: 25%;
    bottom: 25%;
    width: 2px;
    background: var(--color-gold);
    border-radius: 1px;
}

.service-nav__indicator {
    font-size: 0.65rem;
    width: 10px;
    text-align: center;
    color: inherit;
    transition: color 0.2s ease;
    opacity: 0.6;
}

.service-nav__item.is-active .service-nav__indicator {
    color: var(--color-gold);
    opacity: 1;
}

.service-nav__label {
    color: inherit;
}

/* ---------- Mobile Bottom Sheet ---------- */
.service-mobile-sheet {
    display: none;
}

/* ---------- Bubble Section Responsive ---------- */
@media (max-width: 768px) {
    .service-panel {
        display: none;
    }

    .service-nav {
        display: none;
    }

    .service-mobile-sheet {
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 0;
        right: 0;
        z-index: 5;
        gap: 10px;
    }

    /* Info panel ABOVE the bubbles */
    .service-panel-mobile {
        position: absolute;
        top: clamp(70px, 12vh, 110px);
        left: 12px;
        right: 12px;
        z-index: 6;
        background: rgba(255, 255, 255, 0.07);
        backdrop-filter: blur(24px) saturate(1.2);
        -webkit-backdrop-filter: blur(24px) saturate(1.2);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 14px;
        padding: 20px 22px;
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    .service-panel-mobile__title {
        font-family: 'Inter', -apple-system, system-ui, sans-serif;
        font-size: 1.1rem;
        font-weight: 500;
        color: var(--color-gold);
        margin: 0 0 8px;
    }

    .service-panel-mobile__text {
        font-family: 'Inter', -apple-system, system-ui, sans-serif;
        font-size: 0.85rem;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.75);
        line-height: 1.6;
        margin: 0;
    }

    /* Pill nav below bubbles, higher up */
    .service-nav-mobile {
        position: absolute;
        bottom: clamp(100px, 18vh, 160px);
        left: 0;
        right: 0;
        z-index: 6;
        display: flex;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 12px;
        justify-content: flex-start;
    }

    .service-nav-mobile::-webkit-scrollbar {
        display: none;
    }

    .service-nav-mobile__item {
        flex-shrink: 0;
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 20px;
        padding: 7px 16px;
        font-family: 'Inter', -apple-system, system-ui, sans-serif;
        font-size: 0.72rem;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.6);
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
    }

    .service-nav-mobile__item.is-active {
        color: var(--color-gold);
        border-color: rgba(196, 162, 101, 0.5);
        background: rgba(196, 162, 101, 0.08);
    }

    .clinic-section--bubbles {
        min-height: 100dvh;
        min-height: 100vh;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .service-panel {
        max-width: 280px;
        width: 260px;
        padding: 28px 22px;
        left: 20px;
    }

    .service-nav {
        right: 12px;
        min-width: 155px;
    }

    .service-nav__item {
        font-size: 0.7rem;
        padding: 6px 12px;
    }
}

/* ============================================================
   Bubble Scene Active — Hide competing HTML content
   Scoped to .has-bubble-scene so non-bubble pages unaffected
   ============================================================ */

/* Lock page scroll immediately — prevents mobile viewport reflow when JS loads */
body.has-bubble-scene {
    overflow: hidden;
}

/* Page background transparent — let 3D canvas show through */
.has-bubble-scene .clinic-page {
    background: transparent;
}

/* Hide laser spotlights */
.has-bubble-scene .clinic-page__bg {
    display: none;
}

/* All sections: transparent scroll spacers, pointer-events through to canvas */
.has-bubble-scene .clinic-section {
    background: transparent;
    pointer-events: none;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Hide ALL content inside sections — bubbles UI, CTA (but NOT hero) */
.has-bubble-scene .clinic-section *,
.has-bubble-scene .clinic-section::before,
.has-bubble-scene .clinic-section::after {
    visibility: hidden;
    pointer-events: none;
}

/* Hero section content visible as overlay on 3D scene */
.has-bubble-scene .clinic-section--hero,
.has-bubble-scene .clinic-section--hero *,
.has-bubble-scene .clinic-section--hero::before,
.has-bubble-scene .clinic-section--hero::after {
    visibility: visible !important;
}

/* Force hero reveals visible immediately in bubble mode (bypass IntersectionObserver) */
.has-bubble-scene .clinic-section--hero .clinic-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
}

/* Hero: lock content to top with padding — prevents centering shift on mobile */
.has-bubble-scene .clinic-section--hero {
    align-items: flex-start;
    padding-top: max(12vh, 80px);
}

/* Main content wrapper + header + footer: let pointer events pass through to canvas */
.has-bubble-scene .clinic-page__content {
    pointer-events: none;
}
/* Header: visible as fixed overlay on top of bubble scene */
.has-bubble-scene .clinic-header {
    visibility: visible;
    pointer-events: auto;
}

.has-bubble-scene .clinic-footer {
    visibility: hidden;
    pointer-events: none;
}

/* CTA section: reveal as fixed overlay when camera reaches section 3 */
.bubble-at-cta .clinic-section--cta {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    visibility: visible !important;
    pointer-events: auto !important;
}

.bubble-at-cta .clinic-section--cta *,
.bubble-at-cta .clinic-section--cta::before,
.bubble-at-cta .clinic-section--cta::after {
    visibility: visible !important;
}

.bubble-at-cta .clinic-section--cta a,
.bubble-at-cta .clinic-section--cta button {
    pointer-events: auto !important;
}

/* Force CTA reveals visible immediately in bubble mode (like hero) */
.bubble-at-cta .clinic-section--cta .clinic-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
}

/* Lenis smooth scroll base */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

/* ============================================================
   Post-Burst Content Reveal Overlay
   ============================================================ */

.service-reveal {
    position: fixed;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 clamp(40px, 6vw, 100px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.service-reveal.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Body — heading (icon + title) + text */
.service-reveal__body {
    max-width: 520px;
}

/* Heading fades in first */
.service-reveal__heading {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.4s ease 0.1s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.service-reveal.is-visible .service-reveal__heading {
    opacity: 1;
    transform: translateY(0);
}

.service-reveal__heading {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(196, 162, 101, 0.3);
}

.service-reveal__icon-wrap {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.service-reveal__icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
}

.service-reveal__title {
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 500;
    color: var(--color-gold);
    margin: 0;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.service-reveal__text {
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    font-size: clamp(0.9rem, 1.4vw, 1.05rem);
    font-weight: 300;
    color: var(--color-charcoal);
    line-height: 1.75;
    margin: 0;
}

.service-reveal__text p {
    margin: 0 0 0.85em;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-reveal__text p:last-child {
    margin-bottom: 0;
}

/* Lead paragraph — first p is slightly larger */
.service-reveal__text p:first-child {
    font-size: clamp(0.95rem, 1.6vw, 1.12rem);
    font-weight: 400;
    color: var(--color-charcoal);
}

/* Staggered fade-in when visible */
.service-reveal.is-visible .service-reveal__text p:nth-child(1) {
    opacity: 1; transform: translateY(0); transition-delay: 0.35s;
}
.service-reveal.is-visible .service-reveal__text p:nth-child(2) {
    opacity: 1; transform: translateY(0); transition-delay: 0.5s;
}
.service-reveal.is-visible .service-reveal__text p:nth-child(3) {
    opacity: 1; transform: translateY(0); transition-delay: 0.65s;
}
.service-reveal.is-visible .service-reveal__text p:nth-child(4) {
    opacity: 1; transform: translateY(0); transition-delay: 0.8s;
}

.service-reveal__cta {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 32px;
    background: var(--gold-metallic);
    background-size: 200% 200%;
    color: #3A2A0F;
    font: 600 0.85rem/1 'Inter', sans-serif;
    border: 1px solid rgba(191, 149, 63, 0.5);
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 12px rgba(170, 119, 28, 0.3), inset 0 1px 0 rgba(252, 246, 186, 0.3);
    animation: gold-btn-shine 3s ease-in-out infinite;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease 0.85s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.85s;
}
.service-reveal.is-visible .service-reveal__cta {
    opacity: 1;
    transform: translateY(0);
}
.service-reveal__cta:hover {
    box-shadow: 0 4px 18px rgba(170, 119, 28, 0.45), inset 0 1px 0 rgba(252, 246, 186, 0.3);
}

/* Hint — swipe up indicator */
.service-reveal__hint {
    position: absolute;
    bottom: clamp(24px, 4vh, 50px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.5s ease 0.6s;
    color: rgba(255, 255, 255, 0.35);
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.04em;
}

.service-reveal.is-visible .service-reveal__hint {
    opacity: 1;
    animation: hint-bob 2s ease-in-out 1s infinite;
}

@keyframes hint-bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-6px); }
}

/* HUD nav hiding during burst */
.service-nav.is-burst-hidden,
.service-mobile-sheet.is-burst-hidden,
.service-panel.is-burst-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease;
}

/* ── Mobile layout ── */
@media (max-width: 768px) {
    .service-reveal {
        align-items: center;
        padding: 0 var(--space-4);
        text-align: center;
    }

    .service-reveal__body {
        max-width: 100%;
        text-align: center;
    }

    .service-reveal__heading {
        justify-content: center;
        gap: 12px;
    }

    .service-reveal__icon-wrap {
        width: 44px;
        height: 44px;
    }

    .service-reveal__title {
        font-size: clamp(1.2rem, 5vw, 1.6rem);
        letter-spacing: 0.06em;
    }

    .service-reveal__text {
        font-size: clamp(0.82rem, 3.5vw, 0.95rem);
    }

    .service-reveal__cta {
        padding: 11px 28px;
        font-size: 0.8rem;
    }
}