@charset "UTF-8";

/* ============================================
   SELF-HOSTED FONTS (migrated from Google Fonts 2026-07-27).
   Blocks mirror the Google Fonts API output verbatim (latin + latin-ext
   subsets, font-display: swap) with same-origin sources. Variable files
   serve every declared weight of their family.
   ============================================ */
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-600-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-600-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-600-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-600-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('assets/fonts/inter-200-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('assets/fonts/inter-200-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/outfit-500-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/outfit-500-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/outfit-500-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/outfit-500-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/outfit-500-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/outfit-500-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/outfit-500-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/outfit-500-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('assets/fonts/playfair-display-400-900-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('assets/fonts/playfair-display-400-900-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('assets/fonts/playfair-display-400-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('assets/fonts/playfair-display-400-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Teko';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/teko-300-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Teko';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/teko-300-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 
   Bachata Passion - Main Stylesheet
   Theme: Dark Modern (Deep Plum / Fiery Accent)
*/

/* Fonts are loaded via <link> tags in each page's <head> (parallel discovery,
   no render-blocking @import chain). Do not re-add @import here. */

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

:root {
  /* PALETTE - DARK MODERN (REFINED) */
    --bg-main: #050208;
  /* Deepest Black-Purple */
    --bg-secondary: #0f0816;
  /* Darker Plum */

    --accent-start: #8B5CF7;
  /* Fiery Red (User Preferred) */
    --accent-end: #7B5CFF;
  /* Orange (User Preferred) */

    --grad: linear-gradient(to right, #8B5CF7, #7B5CFF);
  --text-main: #ffffff;
  /* Pure White */
    --text-muted: #9ca3af;
  /* Neutral Cool Gray */
    --text-dark: #0f0518;
  /* For buttons/light backgrounds */
    --title-cream: #EDEDFA;
  --glass-bg: rgba(20, 10, 30, 0.6);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-highlight: rgba(255, 255, 255, 0.05);
  /* SPACING & SIZING */
    --container-width: 1200px;
  --header-height: 80px;
  --header-height-mobile: 64px;
  /* Thinner mobile header */

    /* ANIMATIONS */
    --transition-fast: 0.2s ease;
  --transition-medium: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* FONTS */
    --font-display: 'Teko', sans-serif;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
}

/* UTILITY CLASSES */
.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

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

/* HERO REFACTOR UTILITIES */
.relative-container {
    position: relative;
    overflow: hidden;
}

.hero-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    z-index: 0;
}

.hero-overlay {
  pointer-events: none;
}

.hero-content-z {
    position: relative;
    z-index: 2;
}

.glass-card {
    background: rgba(20, 10, 30, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all var(--transition-medium);
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 20px rgba(139, 92, 247, 0.15);
    transform: translateY(-5px);
}

/* SCROLL REVEAL */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Schedule Hero Modern */
.schedule-hero-modern {
    padding-top: calc(var(--header-height) + 2rem);
    padding-bottom: 4rem;
    position: relative;
    overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}

.hero-content-left {
    order: 2;
    /* Text below image on mobile */
    text-align: center;
    margin-top: 4rem;
    /* Push text lower to clear scaled image */
}

.hero-content-right {
    order: 1;
    /* Image on top on mobile */
    position: relative;
    height: auto;
    width: 100%;
    max-width: 80%;
    /* Make it smaller on mobile */
    margin: 0 auto;
    /* Center it */
}


@media (min-width: 900px) {
    .hero-grid {
  text-align: left;
}

    .hero-content-left {
        order: 1;
        text-align: left;
        margin-top: 0;
    }

    .hero-content-right {
        order: 2;
        height: 500px;
        /* Full height on desktop */
    }

    
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-main);
    color: var(--text-main);
    overflow-x: hidden;
    line-height: 1.5;
    position: relative;
    /* Ensure z-index works on children relative to body */
}

/* NOISE OVERLAY - MODERNIZATION - Removed */

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img,
svg {
    max-width: 100%;
    display: block;
}

/* UTILITIES */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1rem;
    /* Reduced padding for mobile */
}

@media (min-width: 768px) {
    .container {
        padding: 0 1.5rem;
    }
}

.text-gradient {
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: var(--accent-end);
    text-shadow: none;
}

/* Mobile Typography Fixes */
@media (max-width: 767px) {

    .hero-title-large {
  line-height: 0.8 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

    

    .hero-desc-border {
        font-size: 1.1rem !important;
    }
}

/* iOS Input Zoom Fix */
input,
select,
textarea {
    font-size: 16px !important;
}

.hidden-mobile {
    display: none;
}

@media (min-width: 900px) {
    .hidden-mobile {
        display: block;
    }

    .hidden-desktop {
        display: none;
    }
}

/* BACKGROUND BLOBS - Removed */

/* NAVIGATION */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 11000;
    /* Higher than menu overlay (10000) */
    background: rgba(15, 5, 24, 0.6);
    /* Lower opacity for better glass effect */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    height: var(--header-height);
    display: flex;
    align-items: center;
    transition: all 0.4s ease;
}

@media (max-width: 899px) {
    .main-header {
        height: var(--header-height-mobile);
        background: #050208 !important;
        /* Solid background */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
        /* Lift over the content */
    }

    .logo {
        transform: scale(0.9);
        /* Slightly smaller for balance */
        transform-origin: center;
        text-shadow: 0 0 10px rgba(123, 92, 255, 0.4);
        /* Elegant orange glow */
    }

    .mobile-menu-btn {
        animation: subtlePulse 4s infinite ease-in-out;
    }
}

@keyframes subtlePulse {

    0%,
    100% {
        transform: translateY(-50%) scale(1);
    }

    50% {
        transform: translateY(-50%) scale(1.1);
    }
}

/* Glassmorphism 2.0 - Shine Border */
.main-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.0) 20%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0.0) 80%,
            transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.main-header.header-hidden {
    /* transform: translateY(-100%); DISABLED AUTO-HIDE */
    transform: none !important;
}

/* MOBILE BOTTOM NAVIGATION */
/* MOBILE BOTTOM NAVIGATION - Removed in favor of Smart Sticky Header */


.main-header.scrolled {
    background: rgba(15, 5, 24, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.main-header.scrolled::after {
    opacity: 1;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
    /* Anchor for absolute button */
}


.mobile-menu-btn svg {
  width: 28px !important;
  /* Explicit size */
    height: 28px !important;
}

.logo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -0.05em;
    font-size: 1.8rem;
    transform: none;
    /* Reset transform */
}

.logo-title {
    color: white;
    font-family: var(--font-display);
    font-size: 2.5rem;
    letter-spacing: 0.05em;
}

.logo-subtitle {
    font-size: 0.6em;
    /* Smaller DANCE */
    letter-spacing: 0.1em;
    display: block;
}

.nav-links {
    display: none;
    gap: clamp(0.85rem, 1vw, 1.35rem);
    align-items: center;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.lang-switch {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-weight: 500;
    font-size: 0.95rem;
    z-index: 10001;
}

@media (min-width: 900px) {
    .lang-switch {
        margin-left: 10px;
        margin-right: 10px;
    }
}

@media (max-width: 899px) {
    .lang-switch {
        position: absolute !important;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        gap: 6px;
        font-size: 0.85rem;
    }
}

.lang-switch span,
.lang-switch a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s;
    display: inline-block;
}

.lang-switch .active {
    color: white;
    border-bottom: 2px solid var(--accent-start);
    padding-bottom: 2px;
}

.lang-switch .divider {
    color: rgba(255, 255, 255, 0.4);
}

/* Desktop-row declutter (opt-in per page): Home and Login get a flat,
   one-tap-away entry in the mobile overlay's main list (the vertical
   burger menu has no width constraint, so there is no reason to bury
   them there), but are hidden from the horizontal desktop row — the
   logo covers Home and the .header-login icon covers Login. Every other
   destination (including Contact) sits directly on the row: there is no
   "More" dropdown anymore. */
@media (min-width: 900px) {
    .nav-links:not(.active) .nav-home,
    .nav-links:not(.active) .nav-portal-item {
        display: none;
    }

    /* Only home-page previously had nowrap and a compact 0.8rem link size
       on the desktop row (it was the only page whose desktop nav ever
       rendered below 1080px, via its own unconditional "LOGO-LED HOMEPAGE
       REMODEL" rules further down this file). Every other nav-declutter
       page now reaches the desktop row at 1024px too, and without the same
       compaction its 14px links + heavier default logo eat the breathing
       room the pilot was meant to create. Match home-page's row density
       everywhere the declutter is opted into. Scoped to the non-overlay
       state so the mobile burger menu keeps its normal wrapping. */
    body.nav-declutter .nav-links:not(.active) {
        font-size: 0.8rem;
    }

    body.nav-declutter .nav-links:not(.active) a,
    body.nav-declutter .nav-links:not(.active) .dropbtn,
    body.nav-declutter .btn-header-cta {
        white-space: nowrap;
    }

    /* Spread the desktop row across the full header width: the nav fills
       the space after the logo, the CTA rides the right edge, and the link
       group floats centered between them. The two auto margins (::before
       and the CTA) each absorb half of the free space, so extra room on
       wide screens is shared on both sides of the links instead of piling
       up in a single dead zone next to the logo. */
    body.nav-declutter .nav-links:not(.active) {
        flex: 1;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
        gap: clamp(1.25rem, 2.5vw, 2.75rem);
    }

    body.nav-declutter .nav-links:not(.active)::before {
        content: '';
        margin-left: auto;
    }

    body.nav-declutter .nav-links:not(.active) .btn-header-cta {
        margin-left: auto;
    }
}

/* The header login icon is a desktop-row control; on mobile the burger
   overlay's Login entry is the single path to the portal. */
.header-login {
    display: none;
}

@media (min-width: 900px) {
    .header-login {
        display: inline-flex;
        align-items: center;
        margin-left: 4px;
    }
}

.header-login__link--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s;
}

.header-login__link--icon:hover,
.header-login__link--icon:focus-visible {
    color: #fff;
}

/* Dropdown Styles */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    background-color: transparent;
    color: var(--text-muted);
    padding: 0;
    padding-bottom: 5px;
    /* Align with nav links */
    font-size: 0.875rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: inherit;
    transition: all var(--transition-fast);
}

.dropdown:hover .dropbtn,
.dropbtn:hover {
    color: var(--text-main);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.dropbtn {
    position: relative;
    /* Ensure pseudo-element positioning */
}

.dropbtn.active {
    color: white;
}

.dropbtn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.5);
    transition: width 0.3s ease;
}

.dropbtn:hover::after {
    width: 80%;
}

.dropbtn.active::after {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-start), var(--accent-end), transparent);
    box-shadow: 0 2px 10px rgba(139, 92, 247, 0.4);
}

.dropdown-content {
    display: block;
    /* Always block for animation, but hidden by opacity/visibility */
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background-color: rgba(15, 5, 24, 0.95);
    min-width: 180px;
    box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.4);
    z-index: 1;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    backdrop-filter: blur(16px);
    top: 120%;
    /* Start slightly lower */
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown:hover .dropdown-content {
    visibility: visible;
    opacity: 1;
    top: 100%;
    /* Slide up to position */
}

.dropdown-content a {
    color: var(--text-muted);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.875rem;
    transition: all var(--transition-fast);
}

.dropdown-content a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    transform: translateX(4px);
}

/* Dropdown Underline on Text Only */
.dropdown-content a::after {
    display: none !important;
    /* Remove wide underline */
}

.dropdown-content a span {
    position: relative;
    display: inline-block;
    /* Ensure span respects width */
}

.dropdown-content a span::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.5);
    transition: width 0.3s ease;
}

.dropdown-content a:hover span::after {
    width: 100%;
}

.dropdown-content a.active span::after {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-start), var(--accent-end), transparent);
    box-shadow: 0 2px 10px rgba(139, 92, 247, 0.4);
}

/* ... existing code ... */

.nav-links a:not(.btn-header-cta):not(.btn-header-secondary) {
    position: relative;
    padding-bottom: 5px;
    /* Space for underline */
}

.nav-links a:not(.btn-header-cta):not(.btn-header-secondary)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    /* Thinner for modern look */
    background: rgba(255, 255, 255, 0.5);
    /* Grey for hover */
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.nav-links a:not(.btn-header-cta):not(.btn-header-secondary):hover {
    color: var(--text-main);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.nav-links a:not(.btn-header-cta):not(.btn-header-secondary):hover::after {
    width: 80%;
    /* Grey underline on hover */
}

.nav-links a:not(.btn-header-cta):not(.btn-header-secondary).active {
    color: white;
}

.nav-links a:not(.btn-header-cta):not(.btn-header-secondary).active::after {
    width: 120%;
    /* Longer underline */
    height: 2px;
    /* Thinner active state */
    background: linear-gradient(90deg, transparent, var(--accent-start), var(--accent-end), transparent);
    box-shadow: 0 2px 10px rgba(139, 92, 247, 0.4);
}


.btn-header-cta {
    position: relative;
    background: rgba(139, 92, 247, 0.15);
    border: 1px solid var(--accent-start);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
    margin-left: 0.25rem;
    display: none;
    isolation: isolate;
    /* Create stacking context for ::before */
}

/* The Rotating Point Border */
/* Animation moved to hero button */

@keyframes rotate-point {
    to {
        --angle: 360deg;
    }
}

.btn-header-cta:hover {
    background: rgba(139, 92, 247, 0.3);
    box-shadow: 0 0 15px rgba(139, 92, 247, 0.25);
    color: white;
}

@media (min-width: 768px) {
    .btn-header-cta {
        display: inline-block;
    }
}


/* Mobile Menu Button - Left Side */
.mobile-menu-btn {
    display: none !important;
    background: none;
    border: none;
    color: white !important;
    cursor: pointer;
    padding: 0;
    /* Remove padding to avoid hitbox size issues with absolute */
    z-index: 10001;
    /* High z-index */

    /* Position Left */
    position: absolute !important;
    left: 1rem;
    /* 16px from left */
    top: 50%;
    transform: translateY(-50%);

    width: 44px;
    /* Explicit size */
    height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Center Logo on Mobile Screens < 900px */
@media (max-width: 899px) {
    .navbar {
        justify-content: center;
    }

    .logo-title {
        font-size: 2rem;
    }

    /* Enforce Mobile Menu Visibility ONLY here */
    .mobile-menu-btn {
        display: flex !important;
        position: absolute !important;
        /* Absolute relative to fixed header */
        top: 50% !important;
        transform: translateY(-50%) !important;
        left: 1rem !important;
        z-index: 10001 !important;

        background: none !important;
        /* Remove blue box */
        border: none !important;
        color: white !important;

        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
}

@media (min-width: 900px) {
    .mobile-menu-btn {
        display: none !important;
    }
}

.mobile-menu-btn svg {
    display: block;
    transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1), scale 0.2s ease;
}

.mobile-menu-btn:active svg {
    scale: 0.85;
}

.mobile-menu-btn .line-top,
.mobile-menu-btn .line-middle,
.mobile-menu-btn .line-bottom {
    /* Without fill-box, "center" resolves to the shared SVG viewport center
       (12,12) for all three lines instead of each bar's own midpoint — top
       and bottom then rotate around a pivot that is not their own center,
       sweeping them off-axis into a lopsided X. fill-box scopes the origin
       to each line's own bounding box so every bar spins in place. */
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease, stroke 0.35s ease;
}

/* Open: one choreographed move — the middle bar slips out sideways first,
   then the whole glyph spins a half turn while the outer bars overshoot
   into a gradient X. */
.mobile-menu-btn.active svg {
    transform: rotate(180deg);
}

/* The X stays compact: the bars shorten as they fold (scaleX), so the mark
   floats slim and centered inside the frame instead of filling it. */
.mobile-menu-btn.active .line-top {
    transform: translateY(6px) rotate(45deg) scaleX(0.66);
    stroke: var(--accent-start);
    transition-delay: 0.06s, 0s, 0s;
}

.mobile-menu-btn.active .line-middle {
    opacity: 0;
    transform: translateX(10px) scaleX(0.3);
}

.mobile-menu-btn.active .line-bottom {
    transform: translateY(-6px) rotate(-45deg) scaleX(0.66);
    stroke: var(--accent-end);
    transition-delay: 0.06s, 0s, 0s;
}

.nav-links.active {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--header-height-mobile);
    /* Start below header */
    left: 0;
    width: 100%;
    /* Full screen width */
    height: calc(100vh - var(--header-height-mobile));
    /* Adjust height */
    background: rgba(8, 4, 15, 0.95);
    /* Slightly more opaque for contrast */
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    padding: 2rem 2rem 3rem;
    /* Normal padding since it's not starting at top */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    /* Separator line from header */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    overflow-y: auto;
    animation: navCurtain 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    /* Curtain reveal from the header down */
    align-items: center;
    /* Center horizontally */
    text-align: center;
    /* Center text */
    gap: 0.55rem;
    /* Breathing room between items */
    z-index: 10000;
}

/* Menu entries cascade in one beat after the curtain, top to bottom. */
.nav-links.active>* {
    opacity: 0;
    animation: navItemIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.nav-links.active>*:nth-child(1) { animation-delay: 0.07s; }
.nav-links.active>*:nth-child(2) { animation-delay: 0.115s; }
.nav-links.active>*:nth-child(3) { animation-delay: 0.16s; }
.nav-links.active>*:nth-child(4) { animation-delay: 0.205s; }
.nav-links.active>*:nth-child(5) { animation-delay: 0.25s; }
.nav-links.active>*:nth-child(6) { animation-delay: 0.295s; }
.nav-links.active>*:nth-child(7) { animation-delay: 0.34s; }
.nav-links.active>*:nth-child(8) { animation-delay: 0.385s; }
.nav-links.active>*:nth-child(9) { animation-delay: 0.43s; }
.nav-links.active>*:nth-child(n + 10) { animation-delay: 0.475s; }

@keyframes navCurtain {
    from {
        clip-path: inset(0 0 100% 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes navItemIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-links.active {
        animation: none;
    }

    .nav-links.active>* {
        animation: none;
        opacity: 1;
    }

    .mobile-menu-btn svg,
    .mobile-menu-btn .line-top,
    .mobile-menu-btn .line-middle,
    .mobile-menu-btn .line-bottom {
        transition: none;
    }
}

.nav-links.active>a {
    font-size: 0.82rem;
    font-weight: 500;
    width: auto;
    padding: 0.2rem 0;
    /* Tighter vertical padding */
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.9);
}

.nav-links.active .btn-header-cta {
    display: inline-block;
    width: auto;
    margin: 0.5rem 0;
    /* Tighter margin */
    padding: 0.4rem 1.2rem;
    border-bottom: 0;
    font-size: 0.78rem;
    border-radius: 20px;
    background: var(--grad);
    color: white;
}


.nav-links.active .dropdown {
    width: 100%;
    margin-top: 0.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-links.active .dropbtn {
  font-size: 0.85rem;
  font-weight: 500;
  width: auto;
  padding: 0.4rem 0;
  text-align: center;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  text-transform: uppercase;
  background: none;
  border: none;
}

.nav-links.active .dropdown.active .dropbtn {
    color: white;
}

.nav-links.active .dropdown-content {
  flex-direction: column;
  padding-left: 0;
  /* No indent for centered layout */
    gap: 0.3rem;
  margin-top: 0.4rem;
}


.nav-links.active .dropdown-content a {
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 0.2rem 0;
    justify-content: center;
    /* Center sub-links */
    border: none;
}

.nav-links.active .dropdown-content a:hover {
    color: white;
}

/* Contact lives in both places: the desktop "More" dropdown (.nav-contact-dropdown)
   and, on mobile, a flat top-level entry (.nav-contact-item) in the main
   overlay list. Hide the dropdown copy specifically inside the open mobile
   overlay so it does not also appear a second time once "More" expands. */
.nav-links.active .dropdown-content .nav-contact-dropdown {
    display: none;
}

.nav-links.active .lang-switch {
    margin-top: 2rem;
    padding-top: 1.5rem;
    width: 150px;
    /* Slimmer for better visual balance */
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    font-size: 0.85rem;
    position: relative;
}

.nav-links.active .lang-switch::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--grad);
}


@media (min-width: 900px) {
    .time-slot {
        display: flex;
    }

    .nav-links {
        display: flex;
        margin-left: auto;
        /* Push nav and following lang-switch to the right */
    }


}

/* TESTIMONIALS REDESIGN */


/* Gradient Border Effect via Pseudo-element */


/* HERO SECTION */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: calc(var(--header-height) + 6rem);
    padding-bottom: 5rem;
    overflow: hidden;
}


.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.20);
    /* Dark overlay for readability — lightened for better video visibility */
    z-index: 1;
}

.hero-content-center {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 900px;
}

/* Hero Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.hero-badge-line {
    width: 3rem;
    height: 1px;
    background-color: var(--accent-start);
}

.hero-badge-text {
    color: var(--accent-start);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}


/* Hero Typography */


.hero-title-large {
    font-family: var(--font-display);
    font-size: 6rem;
    font-weight: 600;
    line-height: 0.85;
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
    color: white;
    text-transform: uppercase;
    /* Ensure white text on video */
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}


@media (min-width: 768px) {
    .hero-title-large {
        font-size: 10rem;
    }
}

/* Text Reveal Animation */


/* 
   Improved Hero Notice Box 
   Replaces inline styles with a structured component
*/


/* Shine effect on hover */


/* Mobile Responsiveness */


/* Stagger the second line */


/* BREADCRUMBS - Globally hidden for premium aesthetic while keeping in DOM for SEO */


/* Align left for standard pages if needed, but hero is usually centered */


.hero-desc-border {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    /* Lighter text */
    max-width: 60rem;
    margin-bottom: 2.5rem;
    font-weight: 300;
    line-height: 1.6;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}


.hero-desc-border strong {
    color: white;
    font-weight: 700;
}

/* Hero Social Proof Stats */


/* Hero Buttons */
.hero-buttons-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

@media (min-width: 1024px) {
    .hero-buttons-group {
        justify-content: flex-start;
    }
}

/* Hero Buttons (Pill Shaped) */
.btn-hero {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 3rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 9999px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
    font-size: 1rem;
}

.btn-hero-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Base Primary Button (No Animation by Default) */
.btn-hero-primary {
    background: rgba(139, 92, 247, 0.15);
    border: 1px solid var(--accent-start);
    /* Default static border */
    color: white;
    box-shadow: 0 0 20px rgba(139, 92, 247, 0.2), inset 0 0 10px rgba(139, 92, 247, 0.1);
    isolation: isolate;
    position: relative;
    /* Ensure it can hold pseudo-elements if added */
}

/* Rotating Border Modifier (Home Only) */


.btn-hero-primary:hover {
    background: rgba(139, 92, 247, 0.3);
    border-color: var(--accent-start);
    /* transform: translateY(-4px); Removed to keep static */
    border: 1px solid var(--accent-start);
    /* box-shadow: 0 0 40px rgba(139, 92, 247, 0.5), inset 0 0 20px rgba(139, 92, 247, 0.2); Removed per user request */
    color: white;
}

.btn-hero-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: white;
    backdrop-filter: blur(10px);
}

.btn-hero-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: white;
    transform: translateY(-2px);
    color: white;
}


/* Framed Hero Image Style */
.framed-hero-wrapper {
    position: relative;
    position: relative;
    padding: 2rem;
    transform: scale(1.25) translateY(30px);
    /* Bigger & Lower */
    /* Space for frames */
}

.framed-hero-inner {
  z-index: 2;
}

.framed-hero-inner img {
  border-radius: 20px;
}

/* Rotated white frame */
.framed-hero-inner::after {
    content: '';
    position: absolute;
    inset: -12px;
    border: 2px solid white;
    /* Changed back to white */
    border-radius: 28px;
    transform: rotate(-3deg);
    z-index: -1;
    pointer-events: none;
}

/* Outer faint frame */
.framed-hero-inner::before {
    content: '';
    position: absolute;
    inset: -18px;
    border: 2px solid var(--accent-start);
    border-radius: 35px;
    transform: rotate(3deg);
    z-index: -2;
    pointer-events: none;
}


@keyframes pulse {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.6;
    }
}

.skew-divider {
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    height: 100px;
    background: var(--bg-main);
    transform: skewY(-2deg);
    z-index: 10;
}

/* VALUES SECTION */
.reviews-section {
  z-index: 20;
}

/* GALLERY & VALUES SPLIT */
.gallery-values-section {
    padding: 6rem 0;
    background-color: var(--bg-main);
    overflow: hidden;
}

.split-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
}

@media (min-width: 992px) {
    .split-layout {
        grid-template-columns: 1.4fr 0.6fr;
        align-items: start;
    }
}

/* Gallery Column */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1rem;
}

@media (min-width: 640px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.gallery-item {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    aspect-ratio: 4/3;
    /* Better for horizontal images */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 4px solid white;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Artistic Tilt Effect */
.gallery-item:nth-child(odd) {
    transform: rotate(-3deg);
    margin-top: 1rem;
}

.gallery-item:nth-child(even) {
    transform: rotate(3deg);
    margin-bottom: 1rem;
}

.gallery-item:hover {
    transform: rotate(0deg) scale(1.05);
    z-index: 10;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    border-color: var(--accent-start);
}

/* Removed legacy gallery item background images */

/* Gallery Hero - No Background Image */
.gallery-hero {
    background: var(--bg-main);
    padding: 6rem 0 2rem 0;
    position: relative;
    /* Ensure no inherited backgrounds show */
}


/* Right Column: Values */
.values-col {
    width: 100%;
}

.section-title-left {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    display: block;
}

.values-stack {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.value-item {
    position: relative;
    padding: 2rem;
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.01);
    cursor: pointer;
    transition: all 0.3s ease;
    height: auto;
    display: flex;
    flex-direction: column;
}

.value-item:hover {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
}

.value-number {
  position: absolute;
  top: -1.5rem;
  left: 1rem;
  font-size: 6rem;
  font-weight: 900;
  opacity: 0.1;
  line-height: 1;
  z-index: 0;
  transition: opacity 0.5s ease, color 0.5s ease;
  user-select: none;
}

.value-item:hover .value-number,
.value-item.active .value-number {
    opacity: 0.2;
    color: var(--accent-start);
}

.value-item:nth-child(odd) .value-number,
.value-item:nth-child(even) .value-number {
    left: 1rem;
    right: auto;
}

@media (min-width: 768px) {
    .value-number {
        font-size: 8rem;
    }
}

.value-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    width: 100%;
}

@media (min-width: 768px) {
    .value-content {
        flex-direction: column;
    }

    .value-item:nth-child(even) .value-content {
        flex-direction: column;
    }
}

.value-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 0.5rem;
}

.value-title {
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0;
  transition: color 0.3s ease;
}


.value-item:hover .value-title,
.value-item.active .value-title {
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

@media (min-width: 768px) {
    .value-title {
        font-size: 2rem;
    }
}

/* Modern Section Title - Global */
/* Modern Section Title - Global */


.footer-logo .logo-title {
    color: white;
    font-family: var(--font-display);
    font-size: 2.5rem;
    letter-spacing: 0.05em;
}

.footer-logo .logo-subtitle {
    font-size: 0.6em;
    letter-spacing: 0.1em;
    display: block;
}

.section-title-modern {
  position: relative;
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-title-modern::after {
    content: none;
}

@media (min-width: 768px) {
    .section-title-modern {
        font-size: 5rem;
        margin-bottom: 4rem;
    }
}


.value-details {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.5s ease, margin-top 0.3s ease;
}

.value-item.active .value-details {
    max-height: 500px;
    opacity: 1;
    margin-top: 1rem;
}

.value-desc {
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 40rem;
}

/* CLASSES GALLERY */


.section-title {
    font-size: 2.25rem;
    font-weight: 900;
    color: var(--text-main);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 3rem;
    letter-spacing: -0.02em;
}


/* SCHEDULE SECTION */
.schedule-section {
    padding: 8rem 0 2rem 0;
    /* Reduced bottom padding from 8rem (implied) to 2rem */
    background-color: var(--bg-main);
}

.schedule-header {
    text-align: center;
    margin-bottom: 4rem;
}


.schedule-meta {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.875rem;
    font-weight: 700;
}

.schedule-grid-header {
  grid-template-columns: 100px repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 0 1rem;
}


.col-header {
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.col-header.time {
    text-align: right;
    color: var(--text-muted);
}

.col-header.day {
    color: var(--accent-start);
}

.schedule-row {
  grid-template-columns: 1fr;
}


.time-slot {
  font-family: var(--font-display);
  /* White for contrast */
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  line-height: 1;
  text-align: right;
  padding-top: 0.5rem;
}

/* Hover Effect for Row */
.schedule-row:hover .time-slot {
    color: var(--accent-start);
}

/* TRIAL CLASS FORM */
.trial-section {
    padding: 8rem 0;
    background-color: var(--bg-secondary);
}

.form-wrapper {
    max-width: 900px;
    margin: 0 auto;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 2rem;
    padding: 3rem 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
    .form-wrapper {
        padding: 4rem;
    }
}

.reg-form-container {
    max-width: 1050px !important;
}


.trial-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.trial-step {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.trial-step__header {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto;
}

.trial-step__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.55rem;
    color: var(--accent-gold);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.trial-step__title {
    margin: 0;
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 700;
    line-height: 1.15;
}

.trial-step__note {
    margin: 0.55rem auto 0;
    color: var(--text-muted);
    font-size: 0.96rem;
    line-height: 1.6;
}

.trial-step--contact {
    margin-top: 0.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--glass-border);
}

.trial-consent {
    max-width: 44rem;
    margin: 0 auto;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.55;
    text-align: center;
}

.trial-consent a {
    color: var(--accent-start);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.form-grid {
    display: grid;
    gap: 1.5rem;
}


.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-group input,
.form-group select {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 0.75rem;
    padding: 1rem;
    color: var(--text-main);
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent-start);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 4px rgba(224, 93, 68, 0.1);
}


.form-group select {
    width: 100%;
    appearance: none;
    cursor: pointer;
}

/* Visual Schedule Selector */
.class-selection-grid {
    display: grid;
    gap: 1.5rem;
    margin-top: 0.5rem;
}

@media (min-width: 900px) {
    .class-selection-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
    }
}

.day-column {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
}

.day-title {
    font-size: 1rem;
    font-weight: 900;
    color: var(--accent-start);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    text-align: center;
}

/* Timetable Selection Grid */
.timetable-selection-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .timetable-selection-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem 1.5rem;
    }
}

@media (min-width: 1024px) {
    .timetable-selection-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
}

.timetable-col {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.timetable-day-header {
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--accent-start);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    text-align: center;
}

.class-option {
    cursor: pointer;
    position: relative;
    display: block;
}

.class-option input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}

.class-option-card {
    background: rgba(20, 10, 30, 0.6);
    /* Darker background */
    border: 1px solid var(--glass-border);
    border-radius: 0.75rem;
    padding: 0.6rem 0.7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    transition: all 0.2s ease;
    min-height: 4.5rem;
    /* Ensure consistent height for alignment */
}

.class-details {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.class-instructor-small {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 0.25rem;
}

.class-option:hover .class-option-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.class-option input:checked~.class-option-card {
    background: rgba(139, 92, 247, 0.1);
    border-color: var(--accent-start);
    box-shadow: 0 0 15px rgba(139, 92, 247, 0.2);
}

.class-option-card .time {
    font-size: 0.95rem;
    font-weight: 800;
    color: white;
    min-width: 48px;
}

.class-option-card .name {
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
    text-align: right;
    flex: 1;
    line-height: 1.25;
}

.class-option input:checked~.class-option-card .name {
    color: white;
}

/* Per-Class Role Selection */
.class-option-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.02);
    padding: 0.5rem;
    border-radius: 0.85rem;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    height: 100%;
    /* Fill available height */
}

.class-option-wrapper:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.class-role-select {
    display: flex;
    justify-content: space-between;
    /* Distribute evenly */
    gap: 1rem;
    padding: 0 0.5rem;
    margin-top: auto;
    /* Push to bottom if wrapper expands */
}

.class-role-select label {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center text */
    gap: 0.3rem;
    font-size: 0.74rem;
    color: var(--text-muted);
    cursor: pointer;
    flex: 1;
    /* Equal width */
    padding: 0.2rem;
    border-radius: 0.5rem;
    transition: background 0.2s;
}

.class-role-select label:hover {
    background: rgba(255, 255, 255, 0.05);
}

.class-role-select input[type="radio"] {
    accent-color: var(--accent-start);
    width: 14px;
    height: 14px;
}

/* The invisible spacer cards only exist to align time rows across the
   4-column desktop grid; below that they are pure blank space. */
@media (max-width: 1023px) {
    .desktop-only-spacer {
        display: none;
    }
}

/* Compact single-column class picker on phones */
@media (max-width: 639px) {
    .timetable-selection-grid {
        gap: 0.9rem;
    }

    .timetable-col {
        gap: 0.45rem;
    }

    .timetable-day-header {
        font-size: 0.85rem;
        margin-bottom: 0;
        text-align: left;
        padding-left: 0.25rem;
    }

    .class-option-wrapper {
        padding: 0.3rem;
        gap: 0.2rem;
    }

    .class-option-card {
        min-height: 0;
        padding: 0.45rem 0.6rem;
        border-radius: 0.6rem;
    }

    .class-option-card .time {
        font-size: 0.85rem;
        min-width: 42px;
    }

    .class-option-card .name {
        font-size: 0.72rem;
    }

    .class-instructor-small {
        font-size: 0.7rem;
        margin-top: 0.1rem;
    }

    .class-role-select {
        gap: 0.5rem;
        padding: 0 0.25rem;
    }

    .class-role-select label {
        font-size: 0.7rem;
        padding: 0.1rem;
    }
}

/* Checkboxes */


.checkbox-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    height: 1.25rem;
    width: 1.25rem;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 0.25rem;
    position: relative;
    transition: all 0.2s ease;
}

.checkbox-container:hover input~.checkmark {
    background-color: rgba(255, 255, 255, 0.08);
}

.checkbox-container input:checked~.checkmark {
    background-color: var(--accent-start);
    border-color: var(--accent-start);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-container input:checked~.checkmark:after {
    display: block;
}

.checkbox-text {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.checkbox-text a {
    color: var(--accent-start);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Submit Button */
/* Submit Button */
.btn-submit {
    margin-top: 1rem;
    background: rgba(139, 92, 247, 0.15);
    border: 1px solid var(--accent-start);
    color: white;
    padding: 1.25rem;
    border-radius: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(139, 92, 247, 0.2);
}

.btn-submit:hover {
    background: rgba(139, 92, 247, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(139, 92, 247, 0.25);
}

@media (min-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* REGISTRATION HEADER */


/* PRICING CARDS */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    
}


.pricing-option {
    cursor: pointer;
    position: relative;
    display: block;
}

.pricing-option input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}

.class-card {
  color: inherit;
  cursor: pointer;
}


.pricing-card {
  border: 1px solid var(--glass-border);
  border-radius: 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}


.popular-tag {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--grad);
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.25rem 0.75rem;
    border-bottom-left-radius: 0.75rem;
    text-transform: uppercase;
}

.pricing-option:hover .pricing-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
}

.pricing-option input:checked~.pricing-card {
    background: rgba(139, 92, 247, 0.1);
    border-color: var(--accent-start);
    box-shadow: 0 0 20px rgba(139, 92, 247, 0.2);
}

.pricing-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}

.pricing-title {
  font-weight: 800;
  color: white;
}

.pricing-card__sub {
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.pricing-card__row {
  align-items: baseline;
  flex-wrap: wrap;
  margin-top: auto;
}

.pricing-price {
  font-weight: 900;
  color: white;
}

.pricing-card__per {
  font-weight: 600;
  color: var(--accent-start);
}

.pricing-card.flexible .pricing-title {
    color: #98A2FF;
    /* Amber for flexible */
}

@media (min-width: 768px) {
    .time-slot {
        display: flex;
    }
}

.class-card::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 1.5rem;
    width: 1.1rem;
    height: 1.1rem;
    transform: translateY(-50%);
    background-color: var(--accent-start);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    opacity: 0.4;
    transition: all 0.3s ease;
}


.class-card:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(5px);
    text-shadow: 0 0 10px var(--accent-start);
}


.badge-full {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(220, 38, 38, 0.2);
    color: #fca5a5;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(252, 165, 165, 0.3);
}

.class-name {
  font-weight: 700;
}


/* MOBILE SCHEDULE REDESIGN (COMPACT & INTUITIVE) */
.mobile-schedule-day {
    margin-bottom: 2rem;
}

.mobile-day-title {
    color: var(--accent-start);
    font-weight: 800;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    background: rgba(139, 92, 247, 0.05);
    padding: 6px 16px;
    border-radius: 30px;
    width: fit-content;
    border: 1px solid rgba(139, 92, 247, 0.1);
}

@media (max-width: 899px) {
    .schedule-row {
        gap: 0.6rem;
        margin-bottom: 1rem;
    }

    .class-card {
        display: grid !important;
        grid-template-columns: 65px 1fr !important;
        grid-template-areas:
            "time tag"
            "time name"
            "time experience" !important;
        align-items: center !important;
        padding: 0.7rem 0.9rem !important;
        min-height: auto !important;
        gap: 2px 1rem !important;
        background: rgba(12, 6, 20, 0.5) !important;
    }

    .class-card .level-tag {
        grid-area: tag;
        align-self: end;
        margin: 0 !important;
        white-space: nowrap;
    }

    .mobile-time {
        grid-area: time;
        font-family: var(--font-body);
        font-weight: 700;
        font-size: 0.9rem;
        color: white;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        padding-right: 0.75rem !important;
        display: flex;
        align-items: center;
        height: 100%;
        margin: 0 !important;
    }

    .class-name {
        grid-area: name;
        font-size: 0.9rem !important;
        margin: 0 !important;
        text-align: left;
        align-self: end;
    }

    .class-experience {
        grid-area: experience;
        font-size: 0.72rem !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        text-align: left;
        align-self: start;
    }

    
}

/* FOOTER CTA */


/* MAIN FOOTER */
.main-footer {
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* CONTACT PAGE */
.contact-section {
    padding: 8rem 0;
    position: relative;
    z-index: 10;
}


.contact-info-card {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.2);
    height: 100%;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
}

.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.section-title-modern {
  font-size: 3.5rem;
  margin-bottom: 0.5rem;
  -webkit-background-clip: text;
  background-clip: text;
}


/* Contact Form */
.contact-form {
    background: var(--bg-secondary);
    padding: 3rem;
    border-radius: 1.5rem;
    border: 1px solid var(--glass-border);
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.3);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: 0.75rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--text-main);
    transition: all 0.3s ease;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--accent-start);
    box-shadow: 0 0 0 4px rgba(139, 92, 247, 0.1);
    background: rgba(0, 0, 0, 0.5);
}

.form-textarea {
  resize: vertical;
}

/* BUTTONS */


.btn-primary {
    background: rgba(139, 92, 247, 0.15);
    border: 1px solid var(--accent-start);
    color: white;
    box-shadow: 0 10px 25px rgba(139, 92, 247, 0.25);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: rgba(139, 92, 247, 0.3);
    transform: translateY(-2px);
}

.btn-secondary {
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(4px);
}

.btn-secondary:hover {
  background-color: transparent !important;
  border-color: var(--accent-start);
}

/* Compact Class Selection (Trial Form) */
.compact-class-list {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex: 1;
}

.compact-option {
    cursor: pointer;
    position: relative;
    display: block;
    height: 100%;
    min-width: 0;
}

.compact-option--spacer {
    visibility: hidden;
    pointer-events: none;
}

.compact-option input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}

.compact-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    transition: all 0.2s ease;
    height: 100%;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.compact-option input:checked+.compact-card {
    background: rgba(108, 92, 231, 0.15);
    border-color: var(--accent-start);
    box-shadow: 0 0 15px rgba(108, 92, 231, 0.2);
}

.compact-time {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    color: var(--accent-light);
    font-size: 0.9rem;
    flex: 0 0 3.1rem;
    min-width: 0;
}

.compact-name {
    font-weight: 500;
    color: var(--text-light);
    font-size: 0.95rem;
    min-width: 0;
    line-height: 1.28;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
}


/* REVIEWS SECTION */
.reviews-section {
    padding: clamp(3.25rem, 7vw, 5rem) 0;
    background-color: var(--bg-main);
    position: relative;
    overflow: hidden;
}

.reviews-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(139, 92, 247, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.section-subtitle {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 1.75rem;
    font-size: 1rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.reviews-proof {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    max-width: 46rem;
    margin: 0.15rem auto 1rem;
    text-align: center;
}

.reviews-proof__rating-figure {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
        "stars stars"
        "score source";
    align-items: center;
    justify-content: center;
    column-gap: 0.35rem;
    row-gap: 0.32rem;
}

.reviews-proof__score {
    grid-area: score;
    justify-self: end;
    background: linear-gradient(135deg, #E0E4FF 0%, #B9C2FF 55%, #F5F4FC 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0.35rem 0.9rem rgba(180, 188, 255, 0.2));
    font-family: 'Outfit', sans-serif;
    font-size: clamp(0.95rem, 1.7vw, 1.16rem);
    font-weight: 900;
    line-height: 1;
}

.reviews-proof__starfield {
    grid-area: stars;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 2rem;
}

.reviews-proof__starfield span {
    color: #B9C2FF;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    line-height: 1;
    text-shadow:
        0 0 0.55rem rgba(205, 210, 255, 0.48),
        0 0.45rem 1.2rem rgba(160, 170, 255, 0.38);
    animation: ratingStarGlow 3.2s ease-in-out infinite;
}

.reviews-proof__starfield span:nth-child(1) {
    animation-delay: 0s;
}

.reviews-proof__starfield span:nth-child(2) {
    animation-delay: 0.18s;
}

.reviews-proof__starfield span:nth-child(3) {
    animation-delay: 0.36s;
}

.reviews-proof__starfield span:nth-child(4) {
    animation-delay: 0.54s;
}

.reviews-proof__starfield span:nth-child(5) {
    animation-delay: 0.72s;
}

.reviews-proof__source-line {
    grid-area: source;
    justify-self: start;
    color: var(--text-muted);
    font-family: 'Outfit', sans-serif;
    font-size: clamp(0.72rem, 1.4vw, 0.86rem);
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 0.35rem 1rem rgba(245, 244, 252, 0.16);
    text-transform: uppercase;
}

.reviews-proof__copy {
    margin: 0;
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    font-weight: 800;
    line-height: 1.15;
}

@keyframes ratingStarGlow {
    0%,
    100% {
        opacity: 0.72;
    }

    50% {
        opacity: 1;
    }
}

/* Lightweight review badge + quotes for non-homepage pages (Schedule, Registration) */
.mini-reviews-section {
    padding: 2.5rem 0;
}

.mini-reviews-section .reviews-proof {
    margin-bottom: 1.75rem;
}

.mini-reviews__quotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    max-width: 54rem;
    margin: 0 auto;
}

.mini-review {
    margin: 0;
    padding: 1.1rem 1.25rem;
    border-radius: 0.85rem;
}

.mini-review p {
    margin: 0 0 0.5rem;
    color: var(--text-light);
    font-size: 0.88rem;
    font-style: italic;
    line-height: 1.5;
}

.mini-review cite {
    display: block;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.reviews-slider-wrapper {
    position: relative;
}

/* Swipe progress bar (injected by JS): only the <=700px layout scrolls,
   so only that layout shows it. */
.reviews-progress {
    display: none;
}

.reviews-grid {
    display: grid;
    gap: 0.85rem;
    padding: 0.25rem 0 0.4rem;
    overflow: hidden;
}

.reviews-rail {
    overflow: visible;
}

.reviews-rail__track {
    --rail-gap: clamp(0.65rem, 1.6vw, 1rem);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--rail-gap);
}

/* Cloned cards exist only so the marquee can loop seamlessly */
.review-card.review-card--clone {
    display: none;
}

/* Slow horizontal drift: the two rails glide in opposite directions and
   pause on hover. Reduced-motion users keep the static grid instead. */
@media (min-width: 701px) and (prefers-reduced-motion: no-preference) {
    .reviews-grid {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    }

    .reviews-rail__track {
        display: flex;
        gap: 0;
        width: max-content;
        animation: reviews-drift-left 55s linear infinite;
    }

    .reviews-rail__track .review-card {
        flex: 0 0 auto;
        width: clamp(17rem, 23vw, 21rem);
        margin-right: var(--rail-gap);
    }

    .reviews-rail__track .review-card--clone {
        display: flex;
    }

    .reviews-rail--right .reviews-rail__track {
        animation-name: reviews-drift-right;
        animation-duration: 70s;
    }

    .reviews-rail:hover .reviews-rail__track,
    .reviews-rail:focus-within .reviews-rail__track {
        animation-play-state: paused;
    }
}

@keyframes reviews-drift-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes reviews-drift-right {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

@media (max-width: 1020px) {
    .reviews-rail__track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .reviews-rail__track {
        grid-template-columns: 1fr;
    }
}

.review-card {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 0.85rem;
    padding: 1rem;
    min-height: 17rem;
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.review-card:hover {
    /* Override glass-card:hover transform/shadow */
    transform: none;
    box-shadow: none;
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--accent-start);
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.7rem;
}

.reviewer-info {
    display: flex;
    flex-direction: column;
}

.reviewer-name {
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--text-main);
}

.review-date {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 0.18rem;
}

.google-badge {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.review-card:hover .google-badge {
    background: white;
    color: #4285F4;
}

.review-stars {
    color: #AEB8FF;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    margin-bottom: 0.65rem;
}

.review-text {
    margin: 0;
    font-size: 0.83rem;
    color: var(--text-light);
    line-height: 1.48;
    font-style: italic;
    opacity: 0.9;
    /* Pairs with the non-scrollable desktop card: long reviews end in an
       ellipsis instead of hiding behind an inner scrollbar. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    overflow: hidden;
}

@media (max-width: 700px) {
    .reviews-section {
        padding: 2.2rem 0;
    }

    .section-subtitle {
        margin-bottom: 1.35rem;
    }

    .reviews-proof {
        gap: 0.4rem;
        margin-bottom: 0.7rem;
    }

    /* The copy line sits inside the proof grid; the generic mobile
       subtitle margin above would double the gap before the cards. */
    .reviews-proof__copy {
        margin-bottom: 0;
    }

    /* Compact phone layout: all reviews collapse into one swipeable row
       (the rails dissolve via display: contents), so the section takes
       one card of height instead of a long vertical stack. */
    .reviews-grid {
        display: flex;
        gap: 0.7rem;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0.25rem 0.25rem 0.7rem;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .reviews-grid::-webkit-scrollbar {
        display: none;
    }

    .reviews-rail,
    .reviews-rail__track {
        display: contents;
    }

    .review-card {
        flex: 0 0 min(70vw, 17rem);
        scroll-snap-align: center;
        min-height: 13rem;
        padding: 0.9rem;
    }

    /* Narrower cards need a tighter clamp so the text never clips */
    .review-text {
        -webkit-line-clamp: 6;
    }

    /* Cards hidden from the phone row: the swipe stays short and strong,
       the desktop marquee still shows the full set. */
    .review-card--desktop-only {
        display: none;
    }

    /* Swipe progress: a slim rounded track with a thumb sized to the
       visible fraction, moved by the injector in script.js. */
    .reviews-progress.is-active {
        display: block;
        position: relative;
        height: 3px;
        width: min(70vw, 16rem);
        margin: 0.55rem auto 0;
        border-radius: 999px;
        overflow: hidden;
        background: rgba(234, 234, 251, 0.16);
    }

    .reviews-progress__thumb {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        border-radius: 999px;
        background: var(--accent-gold, #9FA8FF);
        will-change: transform;
    }

    /* Closer card: the swipe row's destination */
    .review-card--cta {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        text-align: center;
        text-decoration: none;
        color: inherit;
    }
}

/* The closer card is a phone-only affordance. Plain media query on
   purpose: reduced-motion desktops render the static base grid, and the
   card must disappear there too. */
@media (min-width: 701px) {
    .review-card--cta {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reviews-proof__starfield span {
        animation: none;
    }
}

/* --- FOOTER --- */
.main-footer {
    background-color: #020103;
    padding: 4rem 0 2rem;
    border-top: 1px solid transparent;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.main-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-start), var(--accent-end), transparent);
    opacity: 0.5;
    transform: scaleX(var(--footer-accent-scale, 1));
    transform-origin: center;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1.5fr;
    }
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.main-footer.is-footer-motion-ready .footer-col,
.main-footer.is-footer-motion-ready .footer-map-full,
.main-footer.is-footer-motion-ready .footer-bottom {
    opacity: 0;
    will-change: transform, opacity;
}

.footer-logo {
    margin-bottom: 0;
}

.footer-address {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.footer-socials {
    display: flex;
    gap: 1rem;
}

.footer-socials a {
    color: var(--text-muted);
    transition: color 0.3s ease;
}

.footer-socials a:hover {
    color: var(--accent-start);
}

.footer-socials a[aria-label="Instagram"] {
    display: inline-flex;
    width: 24px;
    height: 24px;
}

.footer-socials a[aria-label="Instagram"] > svg {
    display: none;
}

.footer-socials a[aria-label="Instagram"]::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='black' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='black' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}

.footer-heading {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: white;
    margin-bottom: 0.5rem;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-links a {
    color: var(--text-muted);
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: white;
}


.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    font-size: 0.8rem;
}


/* Page Title for Secondary Pages */
.page-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: white;
    text-transform: uppercase;
    margin-bottom: 1rem;
    line-height: 1.1;
}

@media (max-width: 768px) {
    .page-title {
        font-size: 2.5rem;
    }
}

/* --- COURSE DETAIL PAGES --- */
.course-hero {
    padding: 160px 20px 80px;
    text-align: center;
    background: linear-gradient(to bottom, rgba(5, 2, 8, 0.8), var(--bg-main)), url('assets/images/schedule_hero_placeholder.webp');
    background-size: cover;
    background-position: center;
    position: relative;
}

.course-hero-content {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.course-level-badge {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50px;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
}


.course-content-section {
    padding: 4rem 0;
}

.course-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
}

@media (max-width: 900px) {
    .course-content-grid {
        grid-template-columns: 1fr;
    }
}

.course-info-block {
    margin-bottom: 3rem;
}

.course-info-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}


/* --- HOMEPAGE GUIDES SECTION --- */
.guides-section {
    padding: 1.5rem 0;
    position: relative;
    background: linear-gradient(to bottom, var(--bg-main), var(--bg-secondary));
}

.guides-grid {
  margin-top: 2rem;
}

.guide-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.25rem;
    /* Reduced padding */
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
}

.guide-card:hover {
    transform: translateY(-5px);
    /* Reduced movement */
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent-start);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}


.guide-icon {
    font-size: 2.25rem;
    margin-bottom: 0.25rem;
}


@media (max-width: 768px) {
    

    

    .guide-card {
        padding: 1rem;
        flex-direction: row;
        /* Horizontal layout on mobile */
        align-items: center;
        gap: 1rem;
    }

    .guide-icon {
        margin-bottom: 0;
        font-size: 1.5rem;
    }

    .guide-title {
  flex-grow: 1;
}

    

    

    
}


/* --- GUIDE DETAIL PAGES --- */
.guide-article {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--text-muted);
}

.guide-article h2 {
    font-size: 2rem;
    color: white;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

.guide-article p {
    margin-bottom: 1.5rem;
}


/* --- ROOM RENTAL PAGE --- */


.rental-form-col {
    padding: 3rem;
}


/* Modern Input Styles */
.form-group.floating-label {
    position: relative;
}

.form-input-modern,
.form-textarea-modern {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem;
    color: white !important;
    /* Force white text */
    font-family: var(--font-body);
    font-size: 1rem;
    transition: all 0.3s ease;
    outline: none;
}

/* Fix for default red validation */
.form-input-modern:required:invalid,
.form-textarea-modern:required:invalid {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.form-textarea-modern {
    resize: vertical;
}

.form-input-modern:focus,
.form-textarea-modern:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-start);
    box-shadow: 0 0 0 4px rgba(139, 92, 247, 0.1);
}

/* Floating Label Logic */
.form-group.floating-label label {
    position: absolute;
    left: 1rem;
    top: 1rem;
    color: var(--text-muted);
    pointer-events: none;
    transition: all 0.2s ease;
    background: transparent;
    padding: 0 0.25rem;
}

.form-input-modern:focus~label,
.form-input-modern:not(:placeholder-shown)~label,
.form-textarea-modern:focus~label,
.form-textarea-modern:not(:placeholder-shown)~label {
    top: -0.75rem;
    left: 0.75rem;
    font-size: 0.75rem;
    color: var(--accent-start);
    background: #0f0816;
    /* Match card bg to hide line */
    font-weight: 700;
}

/* Rental Card Options */


/* MODERN BLOG STYLES */

/* Featured Section */


/* Filter Bar */
.blog-filters {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.filter-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    padding: 0.6rem 1.5rem;
    border-radius: 99px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.filter-btn.active {
    background: var(--accent-start);
    border-color: var(--accent-start);
    color: white;
    box-shadow: 0 0 20px rgba(139, 92, 247, 0.3);
}

/* SCHEDULE GRID SYSTEM */
.schedule-grid-header {
    display: none;
    /* Mobile first */
}

.time-slot {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-start);
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 92, 247, 0.05);
    border-radius: 12px;
    margin-bottom: 0.5rem;
}

.schedule-row {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (min-width: 900px) {
    .schedule-grid-header {
        display: grid;
        grid-template-columns: 92px repeat(4, minmax(0, 1fr));
        gap: 1.2rem;
        margin-bottom: 2rem;
        padding: 0 1rem;
    }

    .col-header {
        font-family: var(--font-heading);
        font-size: clamp(1rem, 1.2vw, 1.35rem);
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: center;
    }

    .col-header.time {
        text-align: right;
        padding-right: 1.5rem;
    }

    .schedule-row {
        grid-template-columns: 92px repeat(4, minmax(0, 1fr));
        gap: 1.2rem;
        align-items: stretch;
        /* Equal height cards */
        margin-bottom: 1rem;
        /* Reduced bottom margin */
    }

    .time-slot {
        background: none;
        justify-content: flex-end;
        align-items: flex-start;
        padding-top: 1.5rem;
        padding-right: 1.5rem;
        font-size: 1.25rem;
        color: var(--text-muted);
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 0;
        border-radius: 0;
    }
}

/* CLASS CARD MODERNIZATION */
.class-card {
    background: rgba(20, 10, 30, 0.4);
    /* Darker, deeper base */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    /* Slightly smaller radius */
    padding: 1rem;
    /* Reduced padding */
    padding-right: 3.5rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 122px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Hover Effect: Lift & Glow */
.class-card:hover {
    transform: translateY(-3px) scale(1.01);
    /* Subtler lift */
    border-color: rgba(139, 92, 247, 0.3);
    box-shadow: 0 8px 20px rgba(139, 92, 247, 0.15);
    background: rgba(30, 15, 40, 0.6);
}

/* Internal Elements */
.class-name {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    /* Smaller font */
    color: white;
    margin: 0.25rem 0;
    line-height: 1.2;
}

.class-experience {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0.1rem 0 0;
}


/* Level Tags */
.level-tag {
    display: inline-block;
    padding: 2px 10px;
    /* Smaller padding */
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    width: fit-content;
}


.tag-styling {
    background: rgba(156, 39, 176, 0.15);
    color: #ce93d8;
    border: 1px solid rgba(156, 39, 176, 0.3);
}

/* Modern Grid Cards */
.blog-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.modern-card {
    background: rgba(20, 10, 30, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.modern-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.card-image-wrap {
    height: 220px;
    overflow: hidden;
    position: relative;
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.modern-card:hover .card-image {
    transform: scale(1.05);
}

.card-category {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-date {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.card-title {
    font-size: 1.25rem;
    font-family: var(--font-heading);
    color: white;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.card-desc {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
    /* Pushes button to bottom */
}

.card-link {
    color: var(--accent-start);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: gap 0.3s ease;
}

.card-link:hover {
    gap: 0.8rem;
}

/* PAGE TRANSITION OVERLAY - Removed */


/* Founders Title unique style */
.founders-outline {
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8);
    opacity: 0.9;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    line-height: 1;
}

@media (max-width: 768px) {
    .founders-outline {
        font-size: 2.5rem;
    }
}

/* ------------------------------------------------------------------
   PREMIUM CTA SECTION (Homepage)
   ------------------------------------------------------------------ */
.cta-premium-wrapper {
    text-align: center;
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at center, rgba(30, 10, 50, 0.4), transparent 70%);
    margin-bottom: 1rem;
}

.cta-premium-title {
    font-size: 4rem;
    line-height: 1;
    /* Tighter line height for impact */
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.cta-outline {
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.3);
    transition: all 0.5s ease;
}

.cta-filled {
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: var(--accent-end);
    filter: drop-shadow(0 0 20px rgba(108, 92, 231, 0.4));
}

.cta-premium-wrapper:hover .cta-outline {
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.8);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}


@media (max-width: 899px) {
    .compact-class-list {
        grid-template-rows: none;
    }

    .compact-option--spacer {
        display: none;
    }

    .cta-premium-title {
        font-size: 3rem;
    }

    .cta-outline {
        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
    }
}

/* ------------------------------------------------------------------
   SECTION SPACER (Reviews -> Form)
   ------------------------------------------------------------------ */
/* User requested no visible line, just space */
.reviews-section {
    padding-bottom: 8rem !important;
    /* Increased spacing */
}

/* --- LEGAL PAGES (Imprint, Privacy, Terms) --- */
.legal-content {
  color: var(--text-light);
}

.legal-content.padded-top {
    padding-top: 8rem;
    /* For pages without hero section */
}

.legal-content h1 {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.legal-content h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.legal-content p,
.legal-content ul,
.legal-content li {
    margin-bottom: 1rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.legal-content ul {
    padding-left: 1.5rem;
}

/* ============================================
   PASS PRICE CARDS (registration EN/DE)
   ============================================ */
.pass-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

/* Container for the segmented switch */
.pricing-switch-container {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 4px;
    position: relative;
    width: fit-content;
    margin: 0 auto;
    /* Center in parent */
}

.pricing-switch-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 140px;
    /* Ensure equal width */
    text-align: center;
}

.pricing-switch-btn:hover {
    color: white;
}

.pricing-switch-btn.active {
    background: var(--accent-start);
    color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* ============================================
   WhatsApp Floating Button
   ============================================ */
.whatsapp-float__bubble {
    position: fixed;
    right: 92px;
    bottom: 30px;
    z-index: 998;
    max-width: 260px;
    padding: 0.8rem 1rem;
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    background: var(--bg-elevated);
    box-shadow: var(--shadow-soft);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
    pointer-events: none;
    opacity: 0;
    animation: whatsapp-bubble-fade 4s ease forwards;
}

.whatsapp-float__bubble::after {
    content: "";
    position: absolute;
    right: -9px;
    bottom: 18px;
    width: 16px;
    height: 16px;
    border-top: 1px solid var(--glass-border);
    border-right: 1px solid var(--glass-border);
    background: var(--bg-elevated);
    transform: rotate(45deg);
}

@keyframes whatsapp-bubble-fade {
    0%,
    12%,
    78% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: #25D366;
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}

.whatsapp-float svg {
    width: 32px;
    height: 32px;
}

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

.whatsapp-float:active {
    transform: scale(0.95);
}

@media (max-width: 768px) {
    .whatsapp-float__bubble {
        right: 78px;
        bottom: 18px;
        max-width: min(230px, calc(100vw - 104px));
        padding: 0.7rem 0.86rem;
        border-radius: 16px;
        font-size: 0.82rem;
    }

    .whatsapp-float__bubble::after {
        bottom: 16px;
    }

    .whatsapp-float {
        bottom: 16px;
        right: 16px;
        width: 58px;
        height: 58px;
    }

    .whatsapp-float svg {
        width: 28px;
        height: 28px;
    }
}

/* --- BLOG POST BODY LINKS (Internal Link Styling) --- */
.post-content a {
    color: var(--accent-start);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(139, 92, 247, 0.4);
    transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

.post-content a:hover {
    color: var(--accent-end);
    text-decoration-color: var(--accent-end);
}

/* --- LOCATION FEATURE SECTION --- */


/* BREADCRUMBS */


/* Hide breadcrumbs on homepage */

/* MOBILE/DESKTOP UTILITY CLASSES */


@media (max-width: 767px) {
    
    
    
    /* NEW MOBILE HERO REFACTOR - 50/50 Split */
    .hero {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

    .hero-content-center {
  justify-content: center !important;
  align-items: center !important;
  padding-top: var(--header-height) !important;
  /* Content at top */
        width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

    /* Video occupies the bottom 50% */
    

    .hero-overlay {
        position: absolute !important;
        top: 50vh !important;
        height: 50vh !important;
        z-index: 5 !important;
    }
    
    /* Scale Typography */
    .hero-title-large {
        font-size: 3.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .hero-desc-border p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }
    
    
    
    

    /* Hide the stats on mobile hero screen to keep the 50% clear */
    
}

/* ==========================================================================
   MOBILE UX OPTIMIZATIONS (Consolidated)
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. Hero Structural Fixes */
    .hero {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        background: var(--bg-main) !important;
    }

    /* 2. Brand Frame (Video + Overlays) */
    

    

    

    

    

    /* 3. Hero Content Center (Desc + Buttons) */
    .hero-content-center {
        position: relative !important;
        order: 2 !important;
        height: auto !important;
        min-height: auto !important;
        padding: 1.25rem 1.5rem !important; /* COMPRESSED PADDING */
        background: var(--bg-main) !important;
        z-index: 20 !important;
        display: block !important;
        text-align: center !important;
    }

    

    .hero-buttons-group {
        margin-top: 0 !important;
        gap: 0.75rem !important; /* Tighter buttons */
    }

    .btn-hero {
        padding: 0.8rem 1.5rem !important; /* More compact buttons on phone */
        font-size: 0.9rem !important;
    }

    .hero-title-large, .hero-overlay:not(.mobile-video-wrapper .hero-overlay) {
  display: none !important;
}

    /* 4. Guides Section (Vertical Fix) */
    .guides-section {
        position: relative !important;
        order: 3 !important;
        padding: 2.5rem 1.5rem !important; /* COMPRESSED PADDING */
        margin-top: 0 !important;
        background: var(--bg-secondary) !important;
        display: block !important;
        z-index: 25 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .section-header {
        margin-bottom: 1rem !important; /* COMPRESSED MARGIN */
        text-align: center !important;
    }

    .section-title-modern {
        font-size: 2.25rem !important; /* Slightly smaller for mobile */
        margin-bottom: 0.5rem !important;
        font-style: italic !important;
        display: block !important;
    }

    .guides-grid {
        display: flex !important;
        flex-direction: column !important; /* VERTICAL STACK */
        gap: 0.85rem !important; /* ULTRA COMPRESSED GAP */
        width: 100% !important;
        overflow: visible !important;
    }

    .guide-card {
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        margin: 0 !important;
        opacity: 1 !important;
        padding: 1rem 1.25rem !important; /* ULTRA COMPACT */
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        align-items: center !important;
        gap: 1rem !important;
        border-radius: 12px !important;
        transform: none !important;
    }

    

    .guide-card .guide-icon {
        font-size: 1.5rem !important;
        margin: 0 !important;
    }

    .guide-card h3.guide-title {
        font-size: 1rem !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        text-align: left !important;
        font-weight: 700 !important;
    }

    
}

/* ==========================================================================
   URBANIST TITLE STYLE
   ========================================================================== */
.section-title-modern {
    background: none;
    color: var(--title-cream);
    font-family: 'Outfit', sans-serif;
    font-style: normal;
    font-weight: 800;
    letter-spacing: -0.012em;
    line-height: 1.02;
    text-transform: none;
    -webkit-text-fill-color: currentColor;
    text-shadow:
        0 0 22px rgba(232, 232, 248, 0.12),
        0 10px 34px rgba(0, 0, 0, 0.28);
}

/* ==========================================================================
   HOME HERO SHOWCASE
   ========================================================================== */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 42%, rgba(139, 92, 247, 0.16), transparent 32rem),
        var(--bg-main);
    color: var(--text-main);
    pointer-events: none;
    animation: loaderExit 0.5s ease 1.05s forwards;
}

.page-loader__mark {
    font-family: var(--font-display);
    font-size: clamp(3rem, 9vw, 7rem);
    font-weight: 700;
    line-height: 0.85;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transform: translateY(0);
    animation: loaderMark 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page-loader__ax {
    color: var(--text-main);
}

.page-loader__mark span:last-child {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.page-loader__line {
    position: absolute;
    top: calc(50% + 4.5rem);
    left: 50%;
    width: min(14rem, 46vw);
    height: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.12);
    transform: translateX(-50%);
}

.page-loader__line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--grad);
    transform: scaleX(0);
    transform-origin: left center;
    animation: loaderLine 0.88s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Signature intro variant (homepage): holds the Marco y Valeria mark longer */
.page-loader--signature {
    animation-delay: 2.55s;
}

.page-loader__mark--signature {
    line-height: 0;
}

.page-loader__mark--signature img {
    width: min(30rem, 82vw);
    height: auto;
}

body.page-loaded .page-loader {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.34s ease, visibility 0.34s ease;
}

.home-hero {
    position: relative;
    min-height: auto;
    padding: calc(var(--header-height) + 1rem) 1.5rem 1.5rem;
    background:
        radial-gradient(circle at 80% 42%, rgba(123, 92, 255, 0.11), transparent 26rem),
        radial-gradient(circle at 18% 72%, rgba(139, 92, 247, 0.08), transparent 28rem),
        var(--bg-main);
    /* Column: the flyer schedule strip sits under the video/panel grid. */
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
}

.home-hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(13rem, 1fr);
    gap: 0;
    width: min(100%, 1480px);
    height: calc(100vh - var(--header-height) - 14rem);
    min-height: 26rem;
    max-height: 38rem;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018) 44%, rgba(139, 92, 247, 0.06)),
        rgba(7, 3, 11, 0.86);
    box-shadow:
        0 24px 90px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);
    isolation: isolate;
    animation: homeHeroEnter 0.58s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-hero__grid::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
        linear-gradient(90deg, rgba(139, 92, 247, 0.1), transparent 28%, transparent 72%, rgba(123, 92, 255, 0.08)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 30%);
    pointer-events: none;
}

.home-hero__stage {
    position: relative;
    min-height: 0;
    height: auto;
    overflow: hidden;
    border: 0;
    border-radius: 15px 0 0 15px;
    background: #000;
    box-shadow: none;
    isolation: isolate;
}

.home-hero__stage::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background:
        linear-gradient(90deg, rgba(139, 92, 247, 0.12), transparent 18%, transparent 70%, rgba(5, 2, 8, 0.42)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 20%, transparent 76%, rgba(5, 2, 8, 0.72));
    pointer-events: none;
}

.home-hero__stage::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    height: min(9rem, 34%);
    border-radius: 0;
    background:
        linear-gradient(0deg, rgba(139, 92, 247, 0.16), rgba(123, 92, 255, 0.05) 36%, transparent 76%);
    box-shadow: none;
    pointer-events: none;
}

.home-hero__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
    opacity: 1;
    transition: opacity 0.28s ease;
}

.home-hero__video.is-switching {
    opacity: 0;
}

.home-hero__poster-frame {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s ease;
}

.home-hero__poster-frame.is-active {
    opacity: 1;
}

.home-hero__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(5, 2, 8, 0.08), rgba(5, 2, 8, 0.22)),
        linear-gradient(180deg, rgba(5, 2, 8, 0.08), rgba(5, 2, 8, 0.34));
    pointer-events: none;
}

.home-hero__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
    min-height: 0;
    padding: 0.76rem 0.7rem 0.7rem 1rem;
    border: 0;
    border-left: 0;
    border-radius: 0 15px 15px 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
        rgba(7, 3, 11, 0.82);
    box-shadow: none;
}

.home-hero__panel::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    width: 1px;
    border-radius: 999px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.18), rgba(139, 92, 247, 0.16), transparent);
    box-shadow: none;
}

.home-hero__title {
    margin: 0 0 0.42rem;
    color: var(--text-main);
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}

.home-hero__brand {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.34rem;
    margin-top: 0;
    max-width: 100%;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-body);
    font-size: 1.62rem;
    font-weight: 780;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    text-shadow: 0 0 24px rgba(139, 92, 247, 0.18);
}

.home-hero__brand-name,
.home-hero__brand-dance {
    display: inline-block;
}

.home-hero__brand-name {
    font-weight: 850;
}


.home-hero__brand-dance {
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--font-heading);
    font-size: 1.04em;
    font-style: italic;
    font-weight: 650;
}

.home-hero__intro {
    margin: 0 0 0.58rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.38;
}

.home-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.58rem;
}

.home-hero__meta span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.28rem 0.48rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.home-hero__selector {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 0.28rem;
    min-height: 0;
    margin-bottom: 0;
}

.home-hero__selector-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.45rem;
    margin: 0.02rem 0;
    color: rgba(123, 92, 255, 0.88);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.home-hero__selector-divider::before,
.home-hero__selector-divider::after {
    content: '';
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 247, 0.42));
}

.home-hero__selector-divider::after {
    background: linear-gradient(90deg, rgba(139, 92, 247, 0.42), transparent);
}

.home-hero__choice {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    flex: 1 1 0;
    gap: 0;
    isolation: isolate;
    --choice-sheen-x: -118%;
    --choice-sheen-opacity: 0;
    --choice-rail-opacity: 0;
    --choice-rail-scale: 0.42;
    --choice-shadow-opacity: 0;
    min-height: 36px;
    padding: 0.28rem 0.55rem 0.28rem 0.78rem;
    border: 0;
    border-left: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 0 8px 8px 0;
    background: rgba(255, 255, 255, 0.015);
    color: rgba(255, 255, 255, 0.62);
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    box-shadow:
        inset 0 0 0 1px transparent,
        0 18px 34px rgba(109, 79, 212, var(--choice-shadow-opacity));
    transition: color 0.24s ease, border-color 0.24s ease, background 0.24s ease, box-shadow 0.24s ease;
}

.home-hero__choice::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: 1;
    border-radius: inherit;
    background: linear-gradient(108deg,
            transparent 24%,
            rgba(255, 255, 255, var(--choice-sheen-opacity)) 43%,
            rgba(184, 135, 43, var(--choice-sheen-opacity)) 50%,
            transparent 69%);
    pointer-events: none;
    transform: translateX(var(--choice-sheen-x));
}

.home-hero__choice::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(90deg, rgba(139, 92, 247, 0.2), transparent 68%);
    opacity: 0;
    transform: translateX(-12%);
    transition: opacity 0.24s ease, transform 0.24s ease;
    pointer-events: none;
}

.home-hero__choice-copy {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 0.1rem;
}

.home-hero__choice-copy::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -0.62rem;
    width: 2px;
    height: 78%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(245, 244, 252, 0.18), rgba(184, 135, 43, 0.72), rgba(138, 108, 240, 0.86));
    box-shadow:
        0 0 12px rgba(184, 135, 43, 0.36),
        0 0 22px rgba(109, 79, 212, 0.24);
    opacity: var(--choice-rail-opacity);
    pointer-events: none;
    transform: translateY(-50%) scaleY(var(--choice-rail-scale));
    transform-origin: center;
}

.home-hero__choice-title {
    color: currentColor;
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.42vw, 1.55rem);
    font-weight: 650;
    line-height: 0.98;
    letter-spacing: 0;
    text-transform: uppercase;
}

.home-hero__choice-note {
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-hero__choice-note:has(.home-hero__choice-date) {
    font-size: 0.68rem;
}

.home-hero__choice-date {
    color: var(--accent-gold, rgba(123, 92, 255, 0.88));
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.home-hero__choice:hover,
.home-hero__choice:focus-visible,
.home-hero__choice.is-active {
    border-color: var(--accent-start);
    color: var(--text-main);
}

.home-hero__choice.is-active {
    --choice-rail-opacity: 0.82;
    --choice-rail-scale: 1;
    --choice-shadow-opacity: 0.13;
    background: rgba(139, 92, 247, 0.075);
}

.home-hero__choice:hover::after,
.home-hero__choice:focus-visible::after,
.home-hero__choice.is-active::after {
    opacity: 1;
    transform: translateX(0);
}

.home-hero__choice.is-active .home-hero__choice-note {
    color: rgba(255, 255, 255, 0.68);
}

/* Weekly plan: two evening columns instead of a shared time axis. Monday and
   Thursday start at different times, so a real table could only line them up
   by leaving half its cells empty — here each night owns its own times. */
.week-plan {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1.15rem;
    margin-top: 2rem;
}

.week-plan__day {
    display: flex;
    flex-direction: column;
    padding: 1.35rem 1.35rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 18px;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 48%, rgba(139, 92, 247, 0.05)),
        rgba(7, 3, 11, 0.8);
    box-shadow:
        0 20px 56px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.week-plan__day-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    padding-bottom: 0.85rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.week-plan__day-name {
    margin: 0;
    color: var(--text-main);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.2vw, 1.95rem);
    font-weight: 650;
    line-height: 1;
    text-transform: uppercase;
}

.week-plan__day-note {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.week-plan__list {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.week-plan__card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    --timetable-sheen: -140%;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.028);
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.24s ease, background 0.24s ease, transform 0.24s ease, box-shadow 0.24s ease;
}

.week-plan__card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(108deg,
            transparent 30%,
            rgba(255, 255, 255, 0.07) 48%,
            transparent 66%);
    pointer-events: none;
    transform: translateX(var(--timetable-sheen));
}

.week-plan__card--highlight {
    border-color: rgba(139, 92, 247, 0.34);
    background: rgba(139, 92, 247, 0.075);
}

.week-plan__card:hover,
.week-plan__card:focus-visible {
    border-color: var(--accent-start);
    background: rgba(139, 92, 247, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(109, 79, 212, 0.22);
}

.week-plan__slot {
    display: grid;
    justify-items: start;
    gap: 0.1rem;
    min-width: 4.1rem;
    padding-left: 0.7rem;
    border-left: 2px solid rgba(139, 92, 247, 0.6);
}

.week-plan__start {
    color: var(--accent-gold, rgba(123, 92, 255, 0.92));
    font-size: 1.02rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    line-height: 1.1;
}

.week-plan__end {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.66rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.week-plan__end::before {
    content: '→ ';
}

.week-plan__copy {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
}

.week-plan__tag {
    justify-self: start;
    padding: 0.13rem 0.46rem;
    border: 1px solid rgba(139, 92, 247, 0.5);
    border-radius: 999px;
    background: rgba(139, 92, 247, 0.16);
    color: rgba(215, 205, 255, 0.95);
    font-size: 0.54rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.week-plan__name {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-body);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
}

.week-plan__note {
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.78rem;
    line-height: 1.35;
}

.week-plan__go {
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
    transition: border-color 0.24s ease, color 0.24s ease, transform 0.24s ease;
}

.week-plan__card:hover .week-plan__go,
.week-plan__card:focus-visible .week-plan__go {
    border-color: var(--accent-start);
    color: var(--text-main);
    transform: translateX(2px);
}

@media (max-width: 480px) {
    .week-plan__day {
        padding: 1.1rem 0.95rem 1.2rem;
    }

    .week-plan__card {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.75rem;
    }

    .week-plan__go {
        display: none;
    }
}

/* Flyer schedule under the video: one shared clip covers every class, so the
   selector no longer carries per-day entries — the days live here instead. */
.home-hero__schedule {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: 0.85rem;
    width: min(100%, 1480px);
    margin: 0.85rem auto 0;
}

.home-hero__schedule-day {
    padding: 0.85rem 1.1rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015) 46%, rgba(139, 92, 247, 0.05)),
        rgba(7, 3, 11, 0.82);
    box-shadow:
        0 16px 44px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.home-hero__schedule-day-title {
    display: block;
    margin-bottom: 0.6rem;
    color: var(--text-main);
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.3vw, 1.35rem);
    font-weight: 650;
    line-height: 1;
    text-transform: uppercase;
}

.home-hero__schedule-list {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-hero__schedule-slot {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
    padding-left: 0.7rem;
    border-left: 2px solid rgba(139, 92, 247, 0.55);
}

.home-hero__schedule-time {
    color: var(--accent-gold, rgba(123, 92, 255, 0.88));
    font-size: 0.78rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.home-hero__schedule-name {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.82rem;
    font-weight: 650;
}

.home-hero__schedule-badge {
    align-self: center;
    padding: 0.12rem 0.42rem;
    border: 1px solid rgba(139, 92, 247, 0.5);
    border-radius: 999px;
    background: rgba(139, 92, 247, 0.16);
    color: rgba(215, 205, 255, 0.95);
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.home-hero__actions {
    position: absolute;
    left: 1.25rem;
    bottom: 2.05rem;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    max-width: calc(100% - 2.5rem);
}

.home-hero__actions .btn-hero {
    min-width: 11.45rem;
    padding: 0.98rem 1.45rem;
    font-size: 0.88rem;
    letter-spacing: 0;
    text-transform: none;
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.32),
        0 0 26px rgba(139, 92, 247, 0.18);
}

/* The hero switcher hides the secondary CTA while an event overlay is
   active; .btn-hero's inline-flex would otherwise override [hidden]. */
.home-hero__actions .btn-hero[hidden] {
    display: none;
}

.home-hero__actions .btn-hero-content {
    justify-content: center;
    gap: 0.28rem;
    min-width: 0;
    white-space: nowrap;
}

.home-hero__actions .btn-hero svg {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
}

@media (min-width: 1024px) and (max-height: 760px) {
    .home-hero__panel {
        padding: 0.62rem 0.6rem 0.56rem 0.86rem;
    }

    .home-hero__title {
        margin: 0 0 0.3rem;
    }

    .home-hero__brand {
        font-size: 1.34rem;
    }

    .home-hero__intro {
        margin-bottom: 0.38rem;
        font-size: 0.76rem;
        line-height: 1.28;
    }

    .home-hero__meta {
        gap: 0.24rem;
        margin-bottom: 0.38rem;
    }

    .home-hero__meta span {
        min-height: 20px;
        padding: 0.2rem 0.36rem;
        font-size: 0.52rem;
    }

    .home-hero__selector {
        gap: 0.2rem;
        margin-bottom: 0.34rem;
    }

    .home-hero__selector-divider {
        gap: 0.34rem;
        margin: 0;
        font-size: 0.6rem;
    }

    .home-hero__choice {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        min-height: 34px;
        padding: 0.22rem 0.48rem 0.22rem 0.64rem;
    }

    .home-hero__choice-title {
        font-size: clamp(0.9rem, 1.14vw, 1.2rem);
    }

    .home-hero__choice-note {
        font-size: 0.5rem;
    }

    .home-hero__choice-note:has(.home-hero__choice-date) {
        font-size: 0.62rem;
    }

    .home-hero__actions .btn-hero {
        min-width: 9.9rem;
        padding: 0.8rem 1.08rem;
        font-size: 0.76rem;
    }

    .home-hero__actions .btn-hero-content {
        gap: 0.18rem;
    }
}

@keyframes loaderMark {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes loaderLine {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes loaderExit {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes homeHeroEnter {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1023px) {
    .home-hero {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .home-hero__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        height: auto;
        min-height: auto;
        max-height: none;
        padding: 0;
    }

    .home-hero__stage {
        height: auto;
        min-height: min(68svh, 42rem);
        border: 0;
        border-radius: 15px 15px 0 0;
    }

    .home-hero__panel {
        padding: 1rem;
        border-top: 0;
        border-left: 0;
        border-radius: 0 0 15px 15px;
    }

    .home-hero__panel::before {
        top: -1px;
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), rgba(139, 92, 247, 0.14), transparent);
    }

    .home-hero__selector {
        display: grid;
        flex: initial;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-hero__selector-divider {
        grid-column: 1 / -1;
    }

    .home-hero__choice {
        flex: initial;
        min-height: 52px;
    }

    .home-hero__choice-title {
        font-size: clamp(1.28rem, 4.4vw, 2rem);
    }
}

@media (min-width: 900px) and (max-width: 1023px) {
    .home-hero__grid {
        grid-template-columns: minmax(0, 3.2fr) minmax(13rem, 1fr);
        height: calc(100vh - var(--header-height) - 5rem);
        min-height: 29rem;
        max-height: 36rem;
    }

    .home-hero__stage {
        min-height: 0;
        border: 0;
        border-radius: 15px 0 0 15px;
    }

    .home-hero__panel {
        padding: 0.85rem 0.58rem 0.78rem 0.82rem;
        border-top: 0;
        border-left: 0;
        border-radius: 0 15px 15px 0;
    }

    .home-hero__panel::before {
        top: 0;
        bottom: 0;
        left: -1px;
        right: auto;
        width: 1px;
        height: auto;
        background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.18), rgba(139, 92, 247, 0.16), transparent);
    }

    .home-hero__title {
        margin-bottom: 0.36rem;
    }

    .home-hero__brand {
        font-size: 1.38rem;
    }

    .home-hero__intro {
        font-size: 0.78rem;
    }

    .home-hero__selector {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        grid-template-columns: minmax(0, 1fr);
    }

    .home-hero__choice {
        flex: 1 1 0;
        min-height: 40px;
    }

    .home-hero__choice-title {
        font-size: clamp(0.92rem, 1.5vw, 1.18rem);
    }
}

@media (max-width: 767px) {
    .home-hero.hero {
        display: block !important;
        min-height: 100svh !important;
        height: auto !important;
        padding: calc(var(--header-height-mobile) + 0.75rem) 0.85rem 1.5rem !important;
        overflow: visible !important;
        background: var(--bg-main) !important;
    }

    .home-hero__grid {
        display: grid !important;
        gap: 0;
        min-height: auto;
        padding: 0;
        border-radius: 14px;
    }

    .home-hero__stage {
        min-height: 38svh;
        border-radius: 13px 13px 0 0;
    }

    .home-hero__panel {
        display: flex !important;
        padding: 0.9rem 0.72rem 0.8rem !important;
        text-align: left;
    }

    .home-hero__title {
        margin-top: 0;
        line-height: 0.92;
    }

    .home-hero__brand {
        font-size: 1.68rem;
    }

    .home-hero__intro {
        margin-bottom: 1.1rem;
        font-size: 0.92rem;
    }

    .home-hero__selector {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.25rem;
        margin-bottom: 1.15rem;
    }

    .home-hero__choice {
        min-height: 44px;
        padding: 0.52rem 0.56rem 0.52rem 0.72rem;
        gap: 0;
        grid-template-columns: minmax(0, 1fr);
    }

    .home-hero__choice-title {
        font-size: clamp(1rem, 5.6vw, 1.32rem);
        line-height: 0.98;
    }

    .home-hero__choice-note {
        font-size: 0.58rem;
        letter-spacing: 0.08em;
    }

    .home-hero__actions {
        left: 0.85rem;
        right: 0.85rem;
        bottom: 1.15rem;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
        gap: 0.45rem;
    }

    .home-hero__actions .btn-hero {
        width: 100%;
        min-width: 0;
        padding: 0.86rem 0.52rem !important;
        font-size: 0.7rem !important;
    }

    .home-hero__actions .btn-hero-content {
        white-space: nowrap;
        text-align: center;
        line-height: 1.05;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-loader,
    .page-loader__mark,
    .page-loader__line::after,
    .home-hero__grid,
    body.home-page .btn-header-cta,
    body.home-page .home-hero__actions .btn-hero-primary,
    body.home-page .home-hero__panel-actions .btn-hero-primary,
    body.home-page .btn-header-cta::before,
    body.home-page .home-hero__actions .btn-hero-primary::before,
    body.home-page .home-hero__panel-actions .btn-hero-primary::before {
        animation: none !important;
    }

    .page-loader {
        display: none;
    }

    .home-hero__video {
        transition: none;
    }
}

/* ==========================================================================
   LOGO-LED HOMEPAGE REMODEL
   ========================================================================== */
body.home-page {
    --bg-main: #EFEEFA;
    --bg-secondary: #E4E2F6;
    --bg-elevated: #F5F4FC;
    --bg-dark: #24103a;
    --text-main: #2a0f3f;
    --text-muted: #6f586c;
    --text-dark: #1b0a2b;
    --text-inverse: #F5F4FC;
    --accent-start: #6D4FD4;
    --accent-end: #8A6CF0;
    --accent-gold: #6F7AE0;
    --accent-purple: #2a0f3f;
    --accent-navy: #24103a;
    --accent-navy-soft: #2a0f3f;
    --accent-navy-deep: #1b0a2b;
    --accent-bronze: #5A64C8;
    --accent-bronze-soft: #D8DAF4;
    --accent-bronze-muted: #7E88E0;
    --accent-bronze-glow: rgba(90, 100, 200, 0.3);
    --grad: linear-gradient(90deg, #6D4FD4, #8A6CF0);
    --brand-grad: linear-gradient(135deg, #2a0f3f 0%, #6D4FD4 58%, #6F7AE0 100%);
    --glass-bg: rgba(245, 244, 252, 0.74);
    --glass-border: rgba(42, 15, 63, 0.12);
    --glass-highlight: rgba(255, 255, 255, 0.55);
    --shadow-soft: 0 14px 35px rgba(42, 15, 63, 0.1);
    --shadow-warm: 0 18px 40px rgba(109, 79, 212, 0.14);
    --font-display: 'Outfit', sans-serif;
    --font-heading: 'Cormorant Garamond', serif;
    color: var(--text-main);
    background: var(--bg-elevated);
}

body.home-page::selection {
    background: rgba(109, 79, 212, 0.22);
    color: var(--text-dark);
}

body.home-page main {
    background: var(--bg-elevated);
}


body.home-page .page-loader__mark {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3.5rem, 10vw, 8rem);
  letter-spacing: 0.01em;
  text-transform: none;
}


body.home-page .page-loader__mark span:last-child,
body.home-page .text-gradient {
    background: var(--brand-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


body.home-page .page-loader__line::after {
    background: linear-gradient(90deg, transparent, var(--accent-gold), var(--accent-start), transparent);
}

body.home-page .main-header {
    background: rgba(245, 244, 252, 0.95);
    border-bottom: 1px solid rgba(42, 15, 63, 0.16);
    box-shadow: 0 10px 26px rgba(42, 15, 63, 0.09);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.home-page .main-header.scrolled {
    background: rgba(245, 244, 252, 0.94);
    box-shadow: 0 14px 36px rgba(42, 15, 63, 0.12);
}

body.home-page .main-header::after,
body.home-page .main-footer::before {
    background: linear-gradient(90deg, transparent, rgba(184, 135, 43, 0.68), rgba(109, 79, 212, 0.52), transparent);
}

body.home-page .logo {
    gap: 0.08rem;
    letter-spacing: 0;
    min-width: 10.25rem;
}

body.home-page .logo-title {
    color: var(--text-main);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.9rem, 3vw, 2.45rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 0.78;
}

body.home-page .logo-subtitle {
    color: var(--accent-purple);
    background: none;
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.42em;
    text-transform: uppercase;
}

body.home-page .nav-links,
body.home-page .dropbtn,
body.home-page .nav-links a:not(.btn-header-cta):not(.btn-header-secondary),
body.home-page .lang-switch span,
body.home-page .lang-switch a {
    color: rgba(42, 15, 63, 0.72);
}

body.home-page .nav-links {
    gap: clamp(0.85rem, 1.15vw, 1.25rem);
    font-size: 0.8rem;
}

body.home-page .nav-links a, body.home-page .dropbtn, body.home-page .btn-header-cta {
  white-space: nowrap;
}

body.home-page .nav-links a:not(.btn-header-cta):not(.btn-header-secondary):hover,
body.home-page .dropbtn:hover,
body.home-page .dropdown:hover .dropbtn,
body.home-page .nav-links a:not(.btn-header-cta):not(.btn-header-secondary).active,
body.home-page .dropbtn.active,
body.home-page .lang-switch .active {
    color: var(--text-main);
    text-shadow: none;
}

body.home-page .nav-links a:not(.btn-header-cta):not(.btn-header-secondary)::after,
body.home-page .dropbtn::after,
body.home-page .dropdown-content a span::after {
    background: rgba(184, 135, 43, 0.55);
    box-shadow: none;
}

body.home-page .nav-links a:not(.btn-header-cta):not(.btn-header-secondary).active::after,
body.home-page .dropbtn.active::after,
body.home-page .dropdown-content a.active span::after {
    background: linear-gradient(90deg, transparent, var(--accent-gold), var(--accent-start), transparent);
    box-shadow: none;
}

body.home-page .dropdown-content {
    background: rgba(245, 244, 252, 0.96);
    border-color: rgba(42, 15, 63, 0.12);
    box-shadow: 0 18px 42px rgba(42, 15, 63, 0.12);
}

body.home-page .dropdown-content a {
    color: rgba(42, 15, 63, 0.72);
}

body.home-page .dropdown-content a:hover {
    background: rgba(109, 79, 212, 0.08);
    color: var(--text-main);
    padding-left: 16px;
}

body.home-page .lang-switch .active {
    border-bottom-color: var(--accent-gold);
}

body.home-page .lang-switch .divider {
    color: rgba(42, 15, 63, 0.35);
}


body.home-page .btn-header-cta {
    --luxury-glow: 0.22;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 18%, rgba(245, 244, 252, 0.12), transparent 34%),
        radial-gradient(circle at 88% 16%, rgba(184, 135, 43, 0.22), transparent 32%),
        linear-gradient(145deg, var(--accent-navy-soft) 0%, var(--accent-navy) 58%, var(--accent-navy-deep) 100%);
    border-color: rgba(245, 244, 252, 0.18);
    color: var(--text-inverse);
    padding: 0.78rem 1.25rem;
    box-shadow:
        0 14px 30px rgba(13, 26, 38, 0.24),
        0 0 0 1px rgba(245, 244, 252, 0.1),
        0 0 calc(22px * var(--luxury-glow)) rgba(109, 79, 212, 0.24);
    text-transform: none;
    letter-spacing: 0.01em;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, outline-color 0.3s ease;
}

body.home-page .btn-header-cta::before,
body.home-page .home-hero__actions .btn-hero-primary::before,
body.home-page .home-hero__panel-actions .btn-hero-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background:
        conic-gradient(from var(--angle),
            transparent 0 64%,
            rgba(245, 244, 252, 0.08) 70%,
            rgba(184, 135, 43, 0.9) 76%,
            rgba(245, 244, 252, 1) 81%,
            rgba(138, 108, 240, 0.95) 87%,
            rgba(109, 79, 212, 0.5) 93%,
            transparent 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter:
        drop-shadow(0 0 4px rgba(245, 244, 252, 0.24))
        drop-shadow(0 0 8px rgba(109, 79, 212, 0.22));
    opacity: 0.76;
    animation: rotate-point 2.8s linear infinite;
    transition: opacity 0.3s ease, filter 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

body.home-page .btn-header-cta:hover {
    --luxury-glow: 0.52;
    border-color: rgba(245, 244, 252, 0.28);
    color: var(--text-inverse);
    transform: none;
    box-shadow:
        0 16px 34px rgba(42, 15, 63, 0.26),
        0 0 0 1px rgba(245, 244, 252, 0.14),
        0 0 calc(26px * var(--luxury-glow)) rgba(109, 79, 212, 0.3);
}

body.home-page .btn-header-cta:hover::before,
body.home-page .home-hero__actions .btn-hero-primary:hover::before,
body.home-page .home-hero__panel-actions .btn-hero-primary:hover::before {
    filter:
        drop-shadow(0 0 5px rgba(245, 244, 252, 0.32))
        drop-shadow(0 0 10px rgba(109, 79, 212, 0.3));
    opacity: 0.92;
}

body.home-page .btn-header-cta:focus-visible,
body.home-page .home-hero__actions .btn-hero-primary:focus-visible,
body.home-page .home-hero__panel-actions .btn-hero-primary:focus-visible {
    outline: 2px solid rgba(184, 135, 43, 0.62);
    outline-offset: 3px;
}

body.home-page .mobile-menu-btn {
    color: var(--text-main) !important;
    animation: none;
}

body.home-page .mobile-menu-btn svg,
body.home-page .mobile-menu-btn line {
    stroke: currentColor;
}

body.home-page .home-hero {
    padding: calc(var(--header-height) + 1rem) 1.5rem 1rem;
    background:
        linear-gradient(180deg,
            var(--bg-elevated) 0%,
            var(--bg-elevated) 11%,
            var(--bg-dark) 11%,
            var(--bg-dark) 78%,
            var(--bg-elevated) 78%,
            var(--bg-elevated) 100%);
}

body.home-page .home-hero__grid {
    grid-template-columns: minmax(0, 3.8fr) minmax(15.25rem, 1.05fr);
    border-color: rgba(245, 244, 252, 0.16);
    border-radius: 24px;
    background: var(--bg-dark);
    box-shadow:
        0 24px 70px rgba(42, 15, 63, 0.22),
        inset 0 1px 0 rgba(245, 244, 252, 0.16);
    height: calc(100vh - var(--header-height) - 5.5rem);
    min-height: 28rem;
    max-height: 35rem;
}

body.home-page .home-hero__grid::before {
    background:
        linear-gradient(90deg, rgba(184, 135, 43, 0.1), transparent 21%, transparent 74%, rgba(109, 79, 212, 0.1)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 36%);
}

body.home-page .home-hero__stage {
    border-radius: 23px 0 0 23px;
    background: var(--bg-dark);
}

body.home-page .home-hero__stage::before {
    display: none;
}

body.home-page .home-hero__stage::after {
    display: none;
}

body.home-page .home-hero__shade {
    display: none;
}

body.home-page .home-hero__panel {
    border-radius: 0 23px 23px 0;
    background:
        linear-gradient(180deg, rgba(42, 15, 63, 0.96), rgba(36, 16, 58, 0.94)),
        var(--bg-dark);
    border-left: 1px solid rgba(245, 244, 252, 0.14);
    color: var(--text-inverse);
}

body.home-page .home-hero__panel::before {
    background: linear-gradient(to bottom, transparent, rgba(184, 135, 43, 0.48), rgba(109, 79, 212, 0.3), transparent);
}

body.home-page .home-hero__brand {
  color: var(--text-inverse);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  text-shadow: none;
}

body.home-page .home-hero__brand-name {
    display: inline-block;
    color: var(--text-inverse);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    font-weight: 700;
    letter-spacing: -0.045em;
}

body.home-page .home-hero__brand-a,
body.home-page .home-hero__brand-x {
    display: inline;
    font-size: 1.18em;
    line-height: 0.82;
}

body.home-page .home-hero__brand-a {
    color: var(--text-inverse);
}

body.home-page .home-hero__brand-x {
  margin-left: -0.025em;
  margin-right: 0.035em;
}

body.home-page .home-hero__brand-cent {
    color: var(--text-inverse);
    font-style: italic;
    font-weight: 600;
    letter-spacing: -0.035em;
}

body.home-page .home-hero__brand-dance {
    color: var(--text-inverse);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 700;
}

body.home-page .home-hero__intro,
body.home-page .section-subtitle,
body.home-page .schedule-meta {
    color: var(--text-muted);
}


body.home-page .home-hero__meta span {
    min-height: 0;
    padding: 0;
    border: 0;
    border-color: transparent;
    border-radius: 0;
    background: transparent;
    color: rgba(245, 244, 252, 0.78);
    font-size: clamp(0.82rem, 1.05vw, 0.96rem);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.42;
    text-transform: none;
}

body.home-page .home-hero__panel-actions {
    display: none;
}

body.home-page .home-hero__assurance {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

body.home-page .home-hero__assurance li {
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(245, 244, 252, 0.16);
    border-radius: 999px;
    background: rgba(245, 244, 252, 0.08);
    color: rgba(245, 244, 252, 0.82);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
}

@media (min-width: 900px) {
    body.home-page .home-hero__assurance {
        display: flex;
        flex-wrap: wrap;
        gap: 0.18rem 0.52rem;
        margin: 0.15rem 0 0.42rem;
    }

    body.home-page .home-hero__assurance li {
        min-height: 0;
        justify-content: flex-start;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: rgba(245, 244, 252, 0.74);
        font-size: 0.66rem;
        line-height: 1.24;
        text-align: left;
    }
}

@media (min-width: 1024px) and (max-height: 760px) {
    body.home-page .home-hero__brand {
        font-size: 2.35rem;
    }

    body.home-page .home-hero__intro {
        margin-bottom: 0.38rem;
        font-size: 0.8rem;
        line-height: 1.3;
    }

    body.home-page .home-hero__meta {
        margin-bottom: 0.28rem;
    }

    body.home-page .home-hero__assurance {
        gap: 0.14rem 0.42rem;
        margin: 0 0 0.34rem;
    }

    body.home-page .home-hero__assurance li {
        font-size: 0.62rem;
    }

    body.home-page .home-hero__choice {
        min-height: 38px;
        padding: 0.28rem 0.48rem 0.28rem 0.6rem;
    }

    body.home-page .home-hero__choice-title {
        font-size: 1rem;
    }

    body.home-page .home-hero__choice-note {
        font-size: 0.5rem;
    }
}

body.home-page .home-hero__selector-divider {
    color: var(--accent-gold);
}

body.home-page .home-hero__selector-divider::before,
body.home-page .home-hero__selector-divider::after {
    background: linear-gradient(90deg, transparent, rgba(184, 135, 43, 0.44));
}

body.home-page .home-hero__selector-divider::after {
    background: linear-gradient(90deg, rgba(184, 135, 43, 0.44), transparent);
}

body.home-page .home-hero__choice {
  border-left-color: rgba(245, 244, 252, 0.16);
}

body.home-page .home-hero__choice::before {
    background: linear-gradient(108deg,
            transparent 22%,
            rgba(245, 244, 252, var(--choice-sheen-opacity)) 40%,
            rgba(184, 135, 43, var(--choice-sheen-opacity)) 47%,
            rgba(245, 244, 252, var(--choice-sheen-opacity)) 54%,
            transparent 70%);
}

body.home-page .home-hero__choice::after {
  border-radius: 0 11px 11px 0;
  background:
        linear-gradient(90deg, rgba(245, 244, 252, 0.12), rgba(245, 244, 252, 0.035) 44%, transparent),
        linear-gradient(135deg, rgba(184, 135, 43, 0.16), transparent 38%);
}

body.home-page .home-hero__choice-copy::before {
    background: linear-gradient(180deg, rgba(245, 244, 252, 0.74), rgba(184, 135, 43, 0.88), rgba(245, 244, 252, 0.42));
    box-shadow: 0 0 12px rgba(245, 244, 252, 0.18);
}

body.home-page .home-hero__choice:hover,
body.home-page .home-hero__choice:focus-visible,
body.home-page .home-hero__choice.is-active {
    border-color: rgba(184, 135, 43, 0.76);
    color: var(--text-inverse);
}

body.home-page .home-hero__choice.is-active {
    --choice-rail-opacity: 0.92;
    --choice-shadow-opacity: 0;
    background:
        linear-gradient(180deg, rgba(245, 244, 252, 0.12), rgba(245, 244, 252, 0.065)),
        rgba(42, 15, 63, 0.22);
    box-shadow:
        inset 0 0 0 1px rgba(245, 244, 252, 0.22),
        inset 0 0 0 2px rgba(184, 135, 43, 0.16),
        0 10px 24px rgba(7, 2, 10, 0.18);
}

body.home-page .home-hero__choice-note,
body.home-page .home-hero__choice.is-active .home-hero__choice-note {
    color: rgba(245, 244, 252, 0.6);
}

/* This is the rule that actually governs size at every breakpoint (higher
   specificity than the unscoped breakpoint rules above), so it carries the
   fix for "Milano Sensual Congress" wrapping to two lines and being clipped
   by the hero's fixed-height overflow: smaller clamp + zero letter-spacing
   keeps every choice label, including the longest one, on a single line
   with real margin, from the 1024px two-column breakpoint upward. */
body.home-page .home-hero__choice-title {
    font-size: clamp(0.76rem, 0.97vw, 1.14rem);
    line-height: 0.98;
    letter-spacing: 0;
}

body.home-page .home-hero__choice-note {
    font-size: 0.5rem;
}

body.home-page .home-hero__choice-note:has(.home-hero__choice-date) {
    font-size: 0.68rem;
}

body.home-page .home-hero__actions .btn-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 3rem;
    border: 1px solid rgba(245, 244, 252, 0.64);
    box-shadow:
        0 12px 26px rgba(36, 16, 58, 0.16),
        0 0 0 1px rgba(184, 135, 43, 0.1);
}

body.home-page .home-hero__actions .btn-hero-primary {
    --luxury-glow: 0.28;
    background:
        radial-gradient(circle at 18% 18%, rgba(245, 244, 252, 0.14), transparent 34%),
        radial-gradient(circle at 88% 16%, rgba(184, 135, 43, 0.22), transparent 32%),
        linear-gradient(145deg, var(--accent-navy-soft) 0%, var(--accent-navy) 58%, var(--accent-navy-deep) 100%);
    color: var(--text-inverse);
    border-color: rgba(245, 244, 252, 0.18);
    box-shadow:
        0 18px 38px rgba(13, 26, 38, 0.36),
        0 0 0 1px rgba(245, 244, 252, 0.1),
        0 0 calc(26px * var(--luxury-glow)) rgba(109, 79, 212, 0.24);
}

body.home-page .home-hero__actions .btn-hero-primary .btn-hero-content::before {
    content: '';
    width: 1.35rem;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(245, 244, 252, 0.32), rgba(184, 135, 43, 0.72), rgba(138, 108, 240, 0.86));
}

body.home-page .home-hero__actions .btn-hero-primary .btn-hero-content::after {
    content: '→';
    color: var(--accent-gold);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}

body.home-page .home-hero__actions .btn-hero-primary:hover,
body.home-page .home-hero__actions .btn-hero-secondary:hover {
    transform: none;
}

body.home-page .home-hero__actions .btn-hero-primary:hover {
    color: var(--text-inverse);
}

body.home-page .home-hero__actions .btn-hero-primary:hover {
    --luxury-glow: 0.58;
    border-color: rgba(245, 244, 252, 0.28);
    box-shadow:
        0 20px 42px rgba(12, 5, 20, 0.38),
        0 0 0 1px rgba(245, 244, 252, 0.14),
        0 0 calc(30px * var(--luxury-glow)) rgba(109, 79, 212, 0.32);
}

body.home-page .home-hero__actions .btn-hero-secondary {
    background: rgba(36, 16, 58, 0.72);
    color: var(--text-inverse);
    border-color: rgba(245, 244, 252, 0.32);
}

body.home-page .home-hero__actions .btn-hero-secondary:hover {
    background: rgba(36, 16, 58, 0.88);
    border-color: rgba(184, 135, 43, 0.48);
    box-shadow:
        0 14px 28px rgba(36, 16, 58, 0.16),
        0 0 0 1px rgba(184, 135, 43, 0.1);
}

body.home-page .section-title-modern {
    color: var(--text-main);
    font-family: 'Cormorant Garamond', serif;
    font-style: normal;
    font-size: clamp(2.8rem, 5.5vw, 4.35rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 0.95;
    max-width: 100%;
    text-shadow: none;
}

body.home-page .section-title-modern::before {
    content: '';
    display: block;
    width: 4.75rem;
    height: 1px;
    margin: 0 auto 0.85rem;
    background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
}

body.home-page .section-title-left::before {
    margin-left: 0;
    margin-right: 0;
}

body.home-page .guides-section,
body.home-page .schedule-section,
body.home-page .gallery-values-section,
body.home-page .trial-section,
body.home-page .home-faq-section {
    position: relative;
    background: transparent;
}

body.home-page .guides-section {
  --guide-canvas-opacity: 0.76;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(4.5rem, 8vw, 7rem) 0 clamp(4.5rem, 7vw, 6.4rem);
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

body.home-page .guides-section::before,
body.home-page .guides-section::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

body.home-page .guides-section::before {
  inset: 0;
  opacity: 0.82;
}

body.home-page .guides-section::after {
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184, 135, 43, 0.65), rgba(109, 79, 212, 0.52), transparent);
}

body.home-page .guides-section__canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    opacity: var(--guide-canvas-opacity);
    pointer-events: none;
}

body.home-page .guides-section__inner {
    position: relative;
    z-index: 1;
}

body.home-page .section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 0.9rem;
    color: var(--accent-start);
    font-family: 'Outfit', sans-serif;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
}

body.home-page .section-kicker::before {
    content: '';
    width: 2.25rem;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-start));
}

body.home-page .guides-section__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(17rem, 0.55fr);
    align-items: stretch;
    gap: clamp(1.2rem, 3vw, 2.4rem);
}

body.home-page .guides-section__story {
    max-width: 780px;
}

body.home-page .glass-card,
body.home-page .guide-card,
body.home-page .class-card,
body.home-page .value-item,
body.home-page .form-wrapper,
body.home-page .glass-panel,
body.home-page .compact-card {
    background: rgba(245, 244, 252, 0.78);
    border: 1px solid rgba(42, 15, 63, 0.12);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.home-page .glass-card:hover,
body.home-page .guide-card:hover,
body.home-page .class-card:hover,
body.home-page .value-item:hover,
body.home-page .compact-option:hover .compact-card {
    transform: none;
    background: rgba(245, 244, 252, 0.95);
    border-color: rgba(109, 79, 212, 0.28);
    box-shadow: var(--shadow-warm);
}


body.home-page .guide-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 1.35rem;
    transform-style: preserve-3d;
}

body.home-page .guide-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.42) 48%, transparent 62%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 46%);
    opacity: var(--guide-card-sheen, 0);
    pointer-events: none;
}


body.home-page .level-tag, body.home-page .tag-styling {
  background: rgba(109, 79, 212, 0.11);
  color: var(--accent-start);
}

body.home-page .guide-icon {
    position: relative;
    z-index: 1;
    width: 2.6rem;
    height: 2.6rem;
    color: var(--text-main);
    font-size: 0.72rem;
    filter: none;
}

body.home-page .guide-icon::before,
body.home-page .guide-icon::after {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 1.25rem;
  height: 1px;
  background: var(--accent-gold);
  transform-origin: center;
}

body.home-page .guide-icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

body.home-page .guide-icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

body.home-page .guide-title,
body.home-page .class-name,
body.home-page .mobile-day-title,
body.home-page .day-title,
body.home-page .value-title,
body.home-page .reviewer-name,
body.home-page .form-group label {
    color: var(--text-main);
}

body.home-page .class-name,
body.home-page .guide-title,
body.home-page .value-title {
    font-family: 'Outfit', sans-serif;
}

body.home-page .class-experience, body.home-page .value-desc, body.home-page .review-date, body.home-page .checkbox-text {
  color: var(--text-muted);
}


body.home-page .guides-section .section-title-modern {
    max-width: 830px;
    margin: 0;
    font-size: clamp(2.35rem, 4.8vw, 4.75rem);
    line-height: 0.94;
    text-align: left;
}

body.home-page .guides-section .section-subtitle {
    max-width: 680px;
    margin: 1.1rem 0 0;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.65;
    text-align: left;
}

body.home-page .guide-card {
    display: grid;
    grid-template-columns: 2.8rem minmax(0, 1fr);
    grid-template-areas:
        "icon copy";
    align-items: start;
    gap: 0 1rem;
    min-height: 13rem;
}

body.home-page .guides-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.9rem, 2vw, 1.25rem);
    margin-top: clamp(1.25rem, 3vw, 2.35rem);
}


body.home-page .guide-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-area: icon;
    border: 1px solid rgba(184, 135, 43, 0.38);
    border-radius: 50%;
    background:
        linear-gradient(145deg, rgba(245, 244, 252, 0.92), rgba(228, 226, 246, 0.72));
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 10px 24px rgba(184, 135, 43, 0.16);
}

body.home-page .guide-icon::before,
body.home-page .guide-icon::after {
    content: none;
}

body.home-page .guide-title {
    margin: 0.5rem 0 0;
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    line-height: 1.04;
}


body.home-page .guides-confidence {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  max-width: none;
  margin: clamp(1.05rem, 2vw, 1.45rem) auto 0;
  padding: 1.05rem 1.2rem;
  border-radius: 20px;
  color: var(--text-inverse);
  box-shadow: 0 18px 40px rgba(42, 15, 63, 0.18);
}

body.home-page .guides-confidence p {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.35;
}


body.home-page .guides-confidence .btn-primary,
body.home-page .guides-confidence .btn-secondary {
    min-height: 2.45rem;
    padding: 0.68rem 1rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body.home-page .guides-confidence .btn-primary {
    background: var(--grad);
    color: var(--text-inverse);
    box-shadow: 0 14px 26px rgba(109, 79, 212, 0.22);
}

body.home-page .guides-confidence .btn-secondary {
    border: 1px solid rgba(245, 244, 252, 0.3);
    background: transparent;
    color: var(--text-inverse);
}

body.home-page .guides-confidence .btn-primary:hover,
body.home-page .guides-confidence .btn-primary:focus-visible {
    color: #fff;
    box-shadow: 0 18px 32px rgba(109, 79, 212, 0.28);
}

body.home-page .guides-confidence .btn-secondary:hover,
body.home-page .guides-confidence .btn-secondary:focus-visible {
    border-color: rgba(109, 79, 212, 0.36);
    background: rgba(245, 244, 252, 0.08);
    color: var(--text-inverse);
    box-shadow: 0 12px 24px rgba(42, 15, 63, 0.08);
}

body.home-page .guides-section--starter {
  --guide-canvas-opacity: 0.44;
}

body.home-page .guides-section--starter::before {
    background:
        linear-gradient(115deg, rgba(245, 244, 252, 0.58), transparent 44%),
        linear-gradient(90deg, transparent, rgba(184, 135, 43, 0.12), transparent);
}

body.home-page .guides-section--canvas-fallback .guides-section__canvas {
    display: none;
}

body.home-page .guides-section--starter .guides-section__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

body.home-page .guides-section--starter .guides-section__story {
    max-width: 860px;
}

body.home-page .guides-section--starter .section-title-modern {
  max-width: 760px;
}

body.home-page .guides-section--starter .section-title-modern span {
    display: block;
}

body.home-page .guides-section--starter .section-title-modern span:last-child {
    white-space: nowrap;
}

body.home-page .guides-section--starter .section-subtitle {
  margin-top: 0.75rem;
}

/* Shoe motif inline after "Take your first step." — a pair of soles
   seen from below (rounded sole shape, rectangular heel block) that
   pop in once with the section's entrance, then stay static. Sized by
   height in em so the tall silhouette matches the text instead of
   blowing out the line height. GSAP animates y/scale/opacity on the
   .guides-steps__print svg itself. */
.guides-steps,
body.home-page .guides-section--starter .section-title-modern span.guides-steps {
    display: inline-flex;
    align-items: flex-end;
    gap: 0.12em;
    margin-left: 0.34em;
    vertical-align: baseline;
}

.guides-steps__print {
    height: 0.8em;
    width: auto;
    fill: var(--accent-gold, var(--accent-start));
    flex-shrink: 0;
    overflow: visible;
}

.guides-steps__print--lead {
    margin-bottom: 0.06em;
}


body.home-page .schedule-section {
    padding: 5.1rem 0 3rem;
    background:
        radial-gradient(circle at 82% 12%, rgba(168, 116, 59, 0.28), transparent 26%),
        radial-gradient(circle at 18% 8%, rgba(109, 79, 212, 0.12), transparent 28%),
        linear-gradient(135deg, var(--accent-navy-deep) 0%, var(--accent-navy) 54%, var(--accent-navy-soft) 100%);
    color: var(--text-inverse);
    overflow: hidden;
    scroll-margin-top: 5.5rem;
}

body.home-page .schedule-section .container {
    position: relative;
}

body.home-page .schedule-section .container::before {
    content: '';
    position: absolute;
    top: 8.9rem;
    right: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(168, 116, 59, 0.76), rgba(184, 135, 43, 0.5), rgba(245, 244, 252, 0.34), transparent);
    pointer-events: none;
}

body.home-page .schedule-section .section-title-modern {
    color: var(--text-inverse);
}

body.home-page .schedule-section .section-title-modern::before {
    background: linear-gradient(90deg, transparent, var(--accent-bronze), var(--accent-gold), rgba(245, 244, 252, 0.82), transparent);
}

body.home-page .schedule-section .schedule-meta {
    color: rgba(245, 244, 252, 0.74);
}

body.home-page .schedule-grid-header {
    position: relative;
    grid-template-columns: 104px repeat(4, minmax(0, 1fr));
    gap: 0.72rem;
    margin-bottom: 0.74rem;
    padding: 0.52rem 0.72rem;
    border: 1px solid rgba(216, 216, 244, 0.22);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(168, 116, 59, 0.18), rgba(245, 244, 252, 0.08));
    box-shadow: 0 18px 34px rgba(13, 26, 38, 0.22), inset 0 1px 0 rgba(216, 216, 244, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.home-page .col-header {
    color: rgba(245, 244, 252, 0.74);
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.05rem, 1.25vw, 1.35rem);
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
}

body.home-page .col-header.day {
    color: var(--accent-bronze-soft);
}

body.home-page .schedule-section .hidden-mobile {
    position: relative;
}

body.home-page .schedule-row {
    position: relative;
    grid-template-columns: 104px repeat(4, minmax(0, 1fr));
    gap: 0.72rem;
    margin-bottom: 0.72rem;
    opacity: 1;
    transition: opacity 0.3s ease;
}

body.home-page .schedule-row::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(90deg, rgba(245, 244, 252, 0.08), transparent 28%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

body.home-page .time-slot {
    position: relative;
    align-self: stretch;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0.82rem 1.18rem 0 0;
    border-right: 0;
    background: transparent;
    color: var(--accent-bronze-soft);
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.45rem, 1.85vw, 1.9rem);
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1;
    text-shadow: none;
}

body.home-page .time-slot::before {
    content: '';
    position: absolute;
    top: 0.84rem;
    right: 0.28rem;
    bottom: 0.5rem;
    width: 1px;
    background: linear-gradient(180deg, rgba(216, 216, 244, 0.86), rgba(168, 116, 59, 0.5), rgba(200, 205, 250, 0.14));
}

body.home-page .time-slot::after {
    content: '';
    position: absolute;
    top: 0.78rem;
    right: 0.06rem;
    width: 0.42rem;
    height: 0.42rem;
    border: 1px solid rgba(216, 216, 244, 0.82);
    border-radius: 999px;
    background: var(--accent-bronze);
    box-shadow:
        0 0 0 4px rgba(168, 116, 59, 0.2),
        0 0 18px rgba(168, 116, 59, 0.34);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

body.home-page .class-card {
    --timetable-sheen: -140%;
    min-height: 5.8rem;
    padding: 0.92rem 2.6rem 0.86rem 1rem;
    border-radius: 15px;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(112deg, transparent 0 36%, rgba(216, 216, 244, 0.36) 48%, transparent 60%) var(--timetable-sheen) 0 / 240% 100% no-repeat,
        linear-gradient(145deg, rgba(245, 244, 252, 0.94), rgba(216, 216, 244, 0.42));
    border-color: rgba(216, 216, 244, 0.28);
    box-shadow:
        0 18px 34px rgba(13, 26, 38, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
    opacity: 1;
    transition: opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body.home-page .class-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--accent-bronze), var(--accent-gold), rgba(109, 79, 212, 0.28), transparent);
    opacity: 0.56;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

body.home-page .class-card::after {
    right: 0.84rem;
    width: 1.85rem;
    height: 1.85rem;
    border: 1px solid rgba(168, 116, 59, 0.28);
    border-radius: 999px;
    background-color: rgba(216, 216, 244, 0.72);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239FA8FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    background-size: 45%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-mask-image: none;
    mask-image: none;
    opacity: 1;
    text-shadow: none;
    transition: background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

body.home-page .class-card:hover {
    background:
        linear-gradient(112deg, transparent 0 36%, rgba(216, 216, 244, 0.42) 48%, transparent 60%) var(--timetable-sheen) 0 / 240% 100% no-repeat,
        linear-gradient(145deg, rgba(245, 244, 252, 0.98), rgba(216, 216, 244, 0.56));
    border-color: rgba(168, 116, 59, 0.42);
    box-shadow:
        0 20px 38px rgba(13, 26, 38, 0.32),
        0 0 0 1px rgba(168, 116, 59, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

body.home-page .class-card:hover::before {
    opacity: 0.78;
}

body.home-page .class-card:hover::after {
    border-color: rgba(168, 116, 59, 0.5);
    background-color: rgba(216, 216, 244, 0.88);
    transform: translateY(-50%);
}

body.home-page .class-card .level-tag {
    margin-bottom: 0.36rem;
    padding: 0.18rem 0.52rem;
    border-radius: 999px;
    background: rgba(168, 116, 59, 0.14);
    color: var(--accent-bronze);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
}

body.home-page .class-card .class-name {
    max-width: 13rem;
    font-size: clamp(1rem, 1.28vw, 1.28rem);
    line-height: 1.08;
    margin: 0.05rem 0 0.25rem;
}

body.home-page .class-card .class-experience {
    font-size: clamp(0.72rem, 0.86vw, 0.86rem);
    line-height: 1.24;
}

body.home-page .schedule-row.is-focused .class-card:hover {
    opacity: 1;
}

body.home-page .badge-full {
    background: var(--bg-dark);
    color: var(--text-inverse);
    border-color: rgba(184, 135, 43, 0.34);
    border-radius: 9px;
    box-shadow: 0 8px 18px rgba(42, 15, 63, 0.16);
}

@media (max-width: 899px) {
    body.home-page .schedule-section {
        padding: 4.2rem 0 2.6rem;
        scroll-margin-top: 4.75rem;
    }

    body.home-page .schedule-section .container::before,
    body.home-page .schedule-row::before {
        display: none;
    }

    body.home-page .mobile-schedule-day {
        margin-bottom: 0.82rem;
        padding: 0.72rem;
        border: 1px solid rgba(216, 216, 244, 0.22);
        border-radius: 18px;
        background: linear-gradient(145deg, rgba(168, 116, 59, 0.16), rgba(245, 244, 252, 0.07));
        box-shadow: 0 16px 30px rgba(13, 26, 38, 0.22);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    body.home-page .mobile-day-title {
        margin-bottom: 0.56rem;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--accent-bronze-soft);
        font-size: 0.92rem;
        letter-spacing: 0.12em;
    }

    body.home-page .hidden-desktop .schedule-row {
        display: flex;
        flex-direction: column;
        gap: 0.54rem;
        margin-bottom: 0;
    }

    body.home-page .hidden-desktop .class-card {
        width: 100%;
        min-height: 4.65rem;
        grid-template-columns: 3.35rem minmax(0, 1fr) !important;
        grid-template-areas:
            "time tag"
            "time name"
            "time experience" !important;
        gap: 0.12rem 0.76rem !important;
        padding: 0.7rem 2.5rem 0.68rem 0.76rem !important;
        border-radius: 14px;
        background:
            linear-gradient(112deg, transparent 0 36%, rgba(216, 216, 244, 0.38) 48%, transparent 60%) var(--timetable-sheen) 0 / 240% 100% no-repeat,
            linear-gradient(145deg, rgba(245, 244, 252, 0.96), rgba(216, 216, 244, 0.46)) !important;
        border-color: rgba(168, 116, 59, 0.22);
        box-shadow:
            0 10px 22px rgba(42, 15, 63, 0.07),
            inset 0 1px 0 rgba(255, 255, 255, 0.54);
    }

    body.home-page .hidden-desktop .class-card .level-tag {
        grid-area: tag;
        align-self: end;
        margin: 0 !important;
        white-space: nowrap;
    }

    body.home-page .hidden-desktop .class-card::before {
        width: 2px;
    }

    body.home-page .hidden-desktop .class-card::after {
        right: 0.68rem;
        width: 1.55rem;
        height: 1.55rem;
        font-size: 0.92rem;
    }

    body.home-page .hidden-desktop .mobile-time {
        color: var(--accent-bronze);
        border-right: 1px solid rgba(168, 116, 59, 0.26);
        font-size: 0.98rem;
        font-weight: 900;
        line-height: 1;
    }

    body.home-page .hidden-desktop .class-card .class-name {
        max-width: none;
        padding-right: 1.1rem;
        font-size: 0.92rem !important;
        line-height: 1.05;
    }

    body.home-page .hidden-desktop .class-card .class-experience {
        padding-right: 1.1rem;
        font-size: 0.75rem;
        line-height: 1.18;
    }

body.home-page .hidden-desktop .badge-full {
        top: 0.48rem;
        right: 2.42rem;
        padding: 0.18rem 0.42rem;
        font-size: 0.56rem;
    }
}

body.home-page .gallery-values-section {
    padding: 6.5rem 0;
    background:
        linear-gradient(180deg, rgba(228, 226, 246, 0.78), rgba(239, 238, 250, 0.9));
}

body.home-page .gallery-grid {
    gap: 1rem;
    padding: 0.25rem;
}

body.home-page .gallery-item,
body.home-page .gallery-item:nth-child(odd),
body.home-page .gallery-item:nth-child(even),
body.home-page .gallery-item:hover {
    transform: none;
    margin: 0;
}

body.home-page .gallery-item {
    border: 1px solid rgba(42, 15, 63, 0.12);
    border-radius: 22px;
    box-shadow: 0 16px 38px rgba(42, 15, 63, 0.14);
}

body.home-page .gallery-item:hover {
    border-color: rgba(184, 135, 43, 0.42);
    box-shadow: 0 18px 40px rgba(42, 15, 63, 0.16);
}

body.home-page .gallery-item img {
    transition: opacity 0.3s ease;
}

body.home-page .gallery-item:hover img {
    transform: none;
    opacity: 0.96;
}

body.home-page .value-item {
    border-radius: 24px;
    background: rgba(245, 244, 252, 0.72);
}

body.home-page .value-number {
    color: rgba(184, 135, 43, 0.28);
    opacity: 1;
}

body.home-page .value-item:hover .value-number,
body.home-page .value-item.active .value-number {
    color: rgba(109, 79, 212, 0.28);
    opacity: 1;
}

body.home-page .value-item:hover .value-title,
body.home-page .value-item.active .value-title {
    background: var(--brand-grad);
    -webkit-background-clip: text;
    background-clip: text;
}


body.home-page .gallery-values-section.stay-section {
  position: relative;
  padding: 7rem 0;
  overflow: hidden;
  opacity: 1;
  transform: none;
}

body.home-page .gallery-values-section.stay-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.72;
}

body.home-page .stay-layout {
    position: relative;
    z-index: 1;
    display: block;
}

body.home-page .stay-visual,
body.home-page .stay-copy {
    min-width: 0;
}

body.home-page .stay-visual {
  position: relative;
}

body.home-page .stay-visual__header {
    max-width: 38rem;
    margin-bottom: 0;
}

body.home-page .stay-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.8rem;
    color: #6F7AE0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

body.home-page .stay-eyebrow::before {
    content: "";
    display: inline-block;
    width: 2rem;
    height: 1px;
    background: currentColor;
}

body.home-page .stay-visual .section-title-modern,
body.home-page .stay-copy .section-title-modern {
    margin-bottom: 0;
    font-size: 3.45rem;
    line-height: 0.95;
    letter-spacing: 0;
}

body.home-page .stay-visual .section-title-modern {
    color: #2a0f3f;
}

body.home-page .stay-visual .section-title-modern::before,
body.home-page .stay-copy .section-title-modern::before {
    display: none;
}

body.home-page .atelier-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
  overflow: visible;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

body.home-page .atelier-stage::before,
body.home-page .atelier-stage::after {
    display: none;
}

body.home-page .atelier-lines {
    display: none;
}

body.home-page .atelier-fallback {
    display: contents;
}

body.home-page .atelier-copy {
    position: relative;
    z-index: 2;
    min-width: 0;
}

body.home-page .atelier-copy--intro {
    grid-column: 8 / 13;
    grid-row: 1 / 5;
    align-self: start;
    justify-self: end;
    max-width: 29rem;
    padding: 1.2rem 1.25rem;
    border: 1px solid rgba(42, 15, 63, 0.12);
    border-radius: 10px;
    background: rgba(245, 244, 252, 0.9);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 36px rgba(42, 15, 63, 0.12);
    text-align: right;
}

body.home-page .atelier-copy--intro .stay-eyebrow {
    justify-content: flex-end;
}

body.home-page .atelier-copy--intro .stay-eyebrow::before {
    order: 2;
}

body.home-page .atelier-copy--intro .section-title-modern {
    text-align: right;
}

body.home-page .atelier-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  min-height: 0;
  z-index: 1;
  --atelier-position: 50% 50%;
  --atelier-zoom: 1.02;
  --atelier-clip: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  border-radius: 2px;
  box-shadow: 0 20px 42px rgba(42, 15, 63, 0.13);
  clip-path: var(--atelier-clip);
  transition: border-color 0.26s ease, filter 0.26s ease, box-shadow 0.26s ease;
}

body.home-page .atelier-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 0.26s ease;
}

body.home-page .atelier-photo:hover {
  box-shadow: 0 22px 46px rgba(42, 15, 63, 0.16);
}


body.home-page .atelier-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--atelier-position);
    transform: scale(var(--atelier-zoom));
    transform-origin: var(--atelier-position);
}


body.home-page .atelier-photo--workshop {
    grid-column: 6 / 9;
    grid-row: 4 / 9;
    aspect-ratio: 4 / 5;
    margin-top: 0;
    --atelier-position: 48% 45%;
    --atelier-zoom: 1.04;
    --atelier-clip: polygon(0 0, 92% 0, 100% 100%, 8% 100%);
}

body.home-page .atelier-photo--class {
  aspect-ratio: 3 / 4;
  margin-top: 0;
  --atelier-position: 50% 42%;
  --atelier-zoom: 1.04;
  --atelier-clip: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}

body.home-page .atelier-photo--hero {
  aspect-ratio: 3 / 2;
  --atelier-position: 50% 50%;
  --atelier-zoom: 1;
  --atelier-clip: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}

body.home-page .atelier-photo--event {
  aspect-ratio: 16 / 10;
  margin-top: 0;
  --atelier-position: 50% 44%;
  --atelier-zoom: 1.03;
  --atelier-clip: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
}

body.home-page .atelier-photo--connection {
    grid-column: 2 / 4;
    grid-row: 5 / 9;
    aspect-ratio: 2 / 3;
    --atelier-position: 48% 50%;
    --atelier-zoom: 1;
    --atelier-clip: polygon(0 0, 100% 0, 86% 100%, 12% 100%);
}

body.home-page .atelier-photo--social {
  aspect-ratio: 16 / 10;
  --atelier-position: 52% 48%;
  --atelier-zoom: 1.03;
  --atelier-clip: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
}

body.home-page .atelier-photo__caption {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

body.home-page .atelier-sheen {
    display: none;
}


body.home-page .atelier-gallery-meta {
  position: relative;
  z-index: 2;
  display: flex;
  grid-column: 9 / 13;
  grid-row: 4 / 5;
  margin-bottom: 0.6rem;
  margin-top: 0;
}

body.home-page .atelier-gallery-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.7rem;
  padding: 0.72rem 1rem;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  box-shadow: 0 14px 28px rgba(42, 15, 63, 0.12);
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

body.home-page .atelier-gallery-link:hover {
  border-color: rgba(184, 135, 43, 0.7);
  box-shadow: 0 16px 32px rgba(42, 15, 63, 0.14);
}

body.home-page .atelier-gallery-link__text {
    white-space: nowrap;
}

body.home-page .stay-copy {
    position: absolute;
    left: clamp(0rem, 1.4vw, 1.2rem);
    bottom: clamp(1rem, 2vw, 2rem);
    z-index: 4;
    color: #2a0f3f;
    width: min(41rem, 61vw);
    max-width: 36rem;
    padding: clamp(1.1rem, 2vw, 1.45rem);
    border: 1px solid rgba(42, 15, 63, 0.12);
    border-radius: 10px;
    background: rgba(245, 244, 252, 0.92);
    backdrop-filter: blur(14px);
    box-shadow: 0 22px 44px rgba(42, 15, 63, 0.14);
}

body.home-page .stay-copy .section-title-modern {
    color: #2a0f3f;
    font-size: clamp(2rem, 2.7vw, 2.8rem);
    line-height: 1;
}

body.home-page .stay-lede {
    max-width: 35rem;
    margin: 1rem 0 1.25rem;
    color: #6f586c;
    font-size: 1rem;
    line-height: 1.62;
}

@media (min-width: 1021px) {
    body.home-page .stay-copy {
        max-width: 41rem;
    }
}

body.home-page .stay-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  margin-top: 1rem;
  padding: 0.85rem 1.2rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
}

body.home-page .stay-link:hover {
    background: linear-gradient(to right, #5F3DC4, #7C5CE8);
    box-shadow: 0 20px 38px rgba(109, 79, 212, 0.22);
}

@media (max-width: 1020px) {
    body.home-page .gallery-values-section.stay-section {
        background:
            radial-gradient(circle at 18% 10%, rgba(184, 135, 43, 0.16), transparent 28%),
            linear-gradient(180deg, #F5F4FC 0%, #EFEEFA 58%, #E4E2F6 100%);
    }

    body.home-page .stay-layout {
        display: block;
    }

    body.home-page .stay-copy {
        left: 0.4rem;
        bottom: 1rem;
        max-width: 34rem;
    }

    body.home-page .atelier-stage {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.9rem;
}

    body.home-page .atelier-copy--intro {
        grid-column: 5 / 9;
        grid-row: 1 / 4;
        max-width: 24rem;
    }

    body.home-page .atelier-fallback {
        display: contents;
    }

    

    

    body.home-page .atelier-photo--connection {
        grid-column: 2 / 4;
        grid-row: 4 / 8;
    }

    body.home-page .atelier-photo--workshop {
        grid-column: 4 / 7;
        grid-row: 7 / 10;
    }

    

    

    

    body.home-page .atelier-gallery-meta {
  grid-column: 6 / 9;
  grid-row: 6 / 7;
}
}

@media (max-width: 700px) {
    body.home-page .gallery-values-section.stay-section {
        padding: 4.5rem 0;
    }

    body.home-page .stay-visual .section-title-modern,
    body.home-page .stay-copy .section-title-modern {
        font-size: 2.45rem;
    }

    body.home-page .atelier-stage {
  display: block;
  padding: 0;
}

    body.home-page .stay-copy {
        position: relative;
        left: auto;
        bottom: auto;
        width: 100%;
        max-width: none;
        margin-top: 1rem;
    }

    body.home-page .atelier-copy--intro {
        max-width: none;
        padding-top: 0;
        text-align: left;
    }

    body.home-page .atelier-copy--intro .stay-eyebrow {
        justify-content: flex-start;
    }

    body.home-page .atelier-copy--intro .stay-eyebrow::before {
        order: 0;
    }

    body.home-page .atelier-copy--intro .section-title-modern {
        text-align: left;
    }

    body.home-page .atelier-fallback {
        display: block;
        min-height: 0;
        margin-top: 1.25rem;
    }

    body.home-page .atelier-photo {
        aspect-ratio: 16 / 10;
        margin-top: 0;
        margin-bottom: 0.8rem;
        clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%);
    }

    body.home-page .atelier-photo:last-child {
        margin-bottom: 0;
    }

    body.home-page .atelier-photo--hero {
        aspect-ratio: 4 / 3;
    }

    body.home-page .atelier-photo--class {
        aspect-ratio: 4 / 3;
    }

    body.home-page .atelier-photo--connection {
        aspect-ratio: 4 / 5;
    }

    

    

    body.home-page .atelier-gallery-meta {
        justify-content: stretch;
        margin-top: 0.8rem;
    }

    body.home-page .atelier-gallery-link {
        width: 100%;
        justify-content: center;
    }

}

:is(body.home-page, body.schedule-page) .reviews-section {
    padding: clamp(2.6rem, 5vw, 3.5rem) 0;
    background:
        radial-gradient(circle at 82% 8%, rgba(168, 116, 59, 0.18), transparent 28%),
        linear-gradient(135deg, var(--accent-navy-deep) 0%, var(--accent-navy) 55%, var(--accent-navy-soft) 100%);
    color: var(--text-inverse);
}

:is(body.home-page, body.schedule-page) .reviews-section::before {
    background:
        linear-gradient(90deg, transparent, rgba(184, 135, 43, 0.14), transparent);
    width: 100%;
    height: 1px;
    top: 0;
    transform: translateX(-50%);
}

:is(body.home-page, body.schedule-page) .reviews-section .section-title-modern,
:is(body.home-page, body.schedule-page) .reviews-section .reviewer-name {
    color: var(--text-inverse);
}

:is(body.home-page, body.schedule-page) .reviews-section .section-title-modern::before {
    background: linear-gradient(90deg, transparent, var(--accent-gold), rgba(245, 244, 252, 0.78), transparent);
}

:is(body.home-page, body.schedule-page) .reviews-section .section-subtitle,
:is(body.home-page, body.schedule-page) .review-date,
:is(body.home-page, body.schedule-page) .review-text {
    color: rgba(245, 244, 252, 0.76);
}

:is(body.home-page, body.schedule-page) .reviews-proof__copy {
    color: var(--text-inverse);
}

:is(body.home-page, body.schedule-page) .reviews-proof__source-line {
    color: rgba(245, 244, 252, 0.92);
    text-shadow:
        0 0 0.5rem rgba(245, 244, 252, 0.22),
        0 0.45rem 1.2rem rgba(160, 170, 255, 0.18);
}

:is(body.home-page, body.schedule-page) .reviews-slider-wrapper {
    margin-top: 1rem;
}


:is(body.home-page, body.schedule-page) .review-card {
  border-color: rgba(245, 244, 252, 0.16);
}

:is(body.home-page, body.schedule-page) .review-card:hover {
    background: rgba(245, 244, 252, 0.13);
    border-color: rgba(184, 135, 43, 0.46);
}

:is(body.home-page, body.schedule-page) .google-badge {
    background: rgba(245, 244, 252, 0.14);
    color: var(--text-inverse);
}


body.home-page .trial-section {
  scroll-margin-top: calc(var(--header-height) + 1rem);
  padding: 5.5rem 0 6.5rem;
}

body.home-page .cta-premium-wrapper {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  max-width: 900px;
  text-align: left;
  overflow: visible;
  background: none;
  border-bottom: 1px solid rgba(42, 15, 63, 0.14);
}

body.home-page .cta-premium-mark {
  height: auto;
}

body.home-page .cta-premium-copy {
    min-width: 0;
}

body.home-page .cta-premium-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
    color: var(--accent-gold);
    font-family: 'Outfit', sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

body.home-page .cta-premium-kicker::before {
    content: '';
    width: 2rem;
    height: 1px;
    background: var(--accent-gold);
}

body.home-page .cta-premium-title {
  color: var(--text-main);
  font-family: 'Cormorant Garamond', serif;
  display: block;
  margin: 0;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.92;
  text-transform: none;
}

body.home-page .cta-outline {
    display: inline;
    color: var(--text-main);
    -webkit-text-stroke: 0;
}

body.home-page .cta-premium-wrapper:hover .cta-outline {
    -webkit-text-stroke: 0;
    text-shadow: none;
}

body.home-page .cta-filled {
    display: inline;
    color: var(--accent-start);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
    filter: none;
    font-style: italic;
}

body.home-page .cta-premium-note {
  max-width: 30rem;
  color: var(--text-muted);
  font-size: clamp(0.98rem, 1.25vw, 1.08rem);
  line-height: 1.45;
}

body.home-page .trial-expectation__eyebrow {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--accent-gold);
    font-family: 'Outfit', sans-serif;
    font-size: clamp(0.72rem, 0.9vw, 0.86rem);
    font-weight: 800;
    letter-spacing: 0.13em;
    line-height: 1.2;
    text-transform: uppercase;
}

body.home-page .form-wrapper {
  max-width: min(100%, 1080px);
  border-radius: 28px;
}

body.home-page .trial-expectation {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    width: min(100%, 78rem);
    margin-top: 1rem;
}

body.home-page .trial-process {
  --trial-process-progress: 1;
  position: relative;
  isolation: isolate;
  min-width: 0;
  display: flex;
  align-items: center;
}

body.home-page .trial-process__canvas {
    position: absolute;
    inset: -0.8rem -1rem;
    z-index: -2;
    display: block;
    width: calc(100% + 2rem);
    height: calc(100% + 1.6rem);
    opacity: 0.42;
    pointer-events: none;
}

body.home-page .trial-process__track {
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  top: 50%;
  z-index: -1;
  height: 2px;
  border-radius: 999px;
  overflow: hidden;
}

body.home-page .trial-process__track::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: scaleX(var(--trial-process-progress));
  transform-origin: left center;
}

body.home-page .trial-process__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.home-page .trial-process__item {
  position: relative;
  display: inline-flex;
  align-items: center;
}

body.home-page .trial-process__item + .trial-process__item::before {
  border-radius: 999px;
}

body.home-page .trial-process__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
}

body.home-page .trial-process__item strong {
  font-family: 'Outfit', sans-serif;
}

body.home-page .trial-step--contact {
    border-top-color: rgba(42, 15, 63, 0.14);
}

body.home-page .trial-step--choice {
    position: relative;
}

body.home-page .trial-step--choice .trial-step__header,
body.home-page .trial-step--choice .class-selection-grid {
    position: relative;
    z-index: 1;
}

body.home-page .trial-step--choice .class-selection-grid {
  isolation: isolate;
  overflow: hidden;
  padding: clamp(0.78rem, 1.6vw, 1.12rem);
  border-radius: 22px;
}

body.home-page .trial-step--choice .day-column {
  min-width: 0;
  padding: 0.68rem;
  border-radius: 18px;
}

body.home-page .trial-step--choice .day-title {
  margin: 0 0 0.58rem;
  padding: 0.22rem 0 0.52rem;
  border-bottom: 1px solid rgba(42, 15, 63, 0.1);
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-align: left;
}

body.home-page .trial-step--choice .trial-time-rail {
    min-width: 0;
    padding: 0.68rem 0.18rem 0.68rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

body.home-page .trial-step--choice .trial-time-rail__title {
  margin: 0 0 0.58rem;
  padding: 0.22rem 0.5rem 0.52rem 0;
  border-bottom: 1px solid rgba(42, 15, 63, 0.1);
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-align: right;
  text-transform: uppercase;
}

body.home-page .trial-step--choice .trial-time-rail__list {
    display: grid;
    grid-template-rows: repeat(3, 6rem);
    gap: 0.58rem;
}

body.home-page .trial-step--choice .trial-time-rail__list span {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    min-height: 0;
    padding: 0.78rem 0.52rem 0 0;
    color: var(--accent-start);
    font-family: 'Outfit', sans-serif;
    font-size: 0.84rem;
    font-weight: 900;
    line-height: 1;
}

body.home-page .trial-step--choice .trial-time-rail__list span::before {
    content: '';
    position: absolute;
    top: 0.72rem;
    right: 0;
    bottom: -0.58rem;
    width: 1px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(109, 79, 212, 0.48), rgba(184, 135, 43, 0.22));
}

body.home-page .trial-step--choice .trial-time-rail__list span::after {
    content: '';
    position: absolute;
    top: 0.62rem;
    right: -0.21rem;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--accent-start);
    box-shadow: 0 0 0 4px rgba(109, 79, 212, 0.08);
}

body.home-page .trial-step--choice .compact-class-list {
    flex: initial;
    gap: 0.58rem;
    grid-template-rows: repeat(3, 6rem);
    margin-top: 0;
}

body.home-page .form-group input,
body.home-page .form-group select {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(42, 15, 63, 0.18);
    color: var(--text-main);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body.home-page .form-group input::placeholder {
    color: rgba(111, 88, 108, 0.68);
}

body.home-page .form-group input:focus,
body.home-page .form-group select:focus {
    border-color: var(--accent-start);
    box-shadow: 0 0 0 4px rgba(109, 79, 212, 0.11);
}

body.home-page .compact-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(249, 247, 250, 0.92));
    border-color: rgba(42, 15, 63, 0.13);
    border-radius: 14px;
    color: var(--text-main);
    box-shadow:
        0 10px 24px rgba(42, 15, 63, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body.home-page .compact-card::before {
    content: '';
    position: absolute;
    inset: 0.72rem auto 0.72rem 0;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(109, 79, 212, 0.72), rgba(184, 135, 43, 0.42));
    opacity: 0.68;
    z-index: 0;
}

body.home-page .compact-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 92% 8%, rgba(109, 79, 212, 0.05), transparent 31%),
        linear-gradient(132deg, rgba(255, 255, 255, 0.7) 0%, transparent 37%);
    opacity: 0.78;
    pointer-events: none;
    z-index: 0;
}

body.home-page .compact-card > * {
    position: relative;
    z-index: 1;
}

body.home-page .compact-time {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 1.8rem;
    padding: 0.28rem 0.58rem;
    border: 1px solid rgba(42, 15, 63, 0.12);
    border-radius: 999px;
    background: rgba(42, 15, 63, 0.065);
    color: var(--text-main);
    box-shadow: none;
    font-size: 0.82rem;
    line-height: 1;
}

body.home-page .trial-step--choice .compact-time {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

body.home-page .compact-name {
    color: var(--text-main);
    font-weight: 700;
    line-height: 1.22;
}

body.home-page .compact-status {
    display: inline-flex;
    width: fit-content;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(42, 15, 63, 0.1);
    background: rgba(111, 88, 108, 0.1);
    color: rgba(42, 15, 63, 0.72);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}


body.home-page .compact-option--disabled {
    cursor: not-allowed;
}

body.home-page .compact-option--disabled .compact-card {
    border-color: rgba(42, 15, 63, 0.1);
    border-style: dashed;
    background: rgba(255, 255, 255, 0.58);
    color: rgba(42, 15, 63, 0.48);
    box-shadow: none;
}

body.home-page .compact-option--disabled .compact-card::before {
    background: rgba(111, 88, 108, 0.22);
}

body.home-page .compact-option--disabled .compact-card::after {
    opacity: 0.28;
}

body.home-page .compact-option--disabled .compact-time {
    background: rgba(111, 88, 108, 0.14);
    border-color: rgba(111, 88, 108, 0.16);
    color: rgba(111, 88, 108, 0.86);
    box-shadow: none;
}

body.home-page .compact-option--disabled .compact-status {
    background: rgba(111, 88, 108, 0.12);
    color: rgba(111, 88, 108, 0.82);
}

@media (min-width: 900px) {
    body.home-page .trial-step--choice .class-selection-grid {
        grid-template-columns: 4.55rem repeat(4, minmax(10.75rem, 1fr));
        gap: 1rem;
    }

    body.home-page .compact-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        height: 100%;
        min-height: 0;
        padding: 0.84rem 0.92rem;
        gap: 0.34rem;
    }

    body.home-page .compact-time {
        flex: initial;
        min-width: 0;
    }

    body.home-page .compact-name {
        font-size: 0.9rem;
    }
}

@media (max-width: 899px) {
    body.home-page .trial-step--choice .trial-time-rail {
        display: none;
    }

    body.home-page .trial-step--choice .class-selection-grid {
        gap: 1.1rem;
    }

    /* One flat list per day: the day column and each card lose their own
       boxes; a single rounded panel around the list carries the border */
    body.home-page .trial-step--choice .day-column {
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

    body.home-page .trial-step--choice .day-title {
  margin: 0 0 0.42rem;
  padding: 0 0.15rem;
}

    body.home-page .trial-step--choice .compact-class-list {
  grid-template-rows: none;
  grid-auto-rows: auto;
  gap: 0;
  overflow: hidden;
  border-radius: 14px;
}

    body.home-page .trial-step--choice .compact-option--spacer {
        display: none;
    }

    body.home-page .trial-step--choice .compact-card {
        min-height: 2.9rem;
        padding: 0.66rem 0.85rem;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        flex-wrap: wrap;
    }

    

    body.home-page .trial-step--choice .compact-card::before,
    body.home-page .trial-step--choice .compact-card::after {
        content: none;
    }

    body.home-page .trial-step--choice .compact-name br {
        display: none;
    }

    body.home-page .trial-step--choice .compact-name {
        font-size: 0.92rem;
        flex: 1 1 0;
        min-width: 7.5rem;
    }

    body.home-page .trial-step--choice .compact-status {
        order: 3;
        margin-left: auto;
        flex-shrink: 0;
    }

    /* The wide "start here" flag drops to its own line under the name */
    body.home-page .trial-step--choice .compact-option--recommended .compact-card {
        flex-wrap: wrap;
    }

    body.home-page .trial-step--choice .compact-option--recommended .compact-status {
        flex-basis: 100%;
        max-width: fit-content;
        margin-left: calc(3.1rem + 0.65rem);
    }

    /* Time as a plain aligned column, not a bordered pill */
    body.home-page .trial-step--choice .compact-time {
        position: static;
        width: auto;
        height: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        overflow: visible;
        clip: auto;
        clip-path: none;
        white-space: nowrap;
        border: none;
        background: transparent;
        box-shadow: none;
        flex: 0 0 3.1rem;
        font-size: 0.88rem;
        font-weight: 800;
    }

    body.home-page .trial-step--choice .compact-option:not(.compact-option--disabled):hover .compact-card .compact-time,
    body.home-page .trial-step--choice .compact-option:focus-within .compact-card .compact-time {
        background: transparent;
        border: none;
        color: inherit;
        box-shadow: none;
    }

    body.home-page .trial-step--choice .compact-option input:checked + .compact-card .compact-time,
    body.home-page .trial-step--choice .compact-option:not(.compact-option--disabled):hover input:checked + .compact-card .compact-time,
    body.home-page .trial-step--choice .compact-option:focus-within input:checked + .compact-card .compact-time {
  background: transparent;
  border: none;
  box-shadow: none;
}
}

body.home-page .compact-option:not(.compact-option--disabled):hover .compact-card,
body.home-page .compact-option:focus-within .compact-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(251, 249, 252, 0.98));
    border-color: rgba(109, 79, 212, 0.26);
    box-shadow:
        0 15px 34px rgba(42, 15, 63, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

body.home-page .compact-option:not(.compact-option--disabled):hover .compact-card::before,
body.home-page .compact-option:focus-within .compact-card::before {
    background: linear-gradient(180deg, rgba(109, 79, 212, 0.88), rgba(184, 135, 43, 0.38));
    opacity: 0.88;
}

body.home-page .compact-option:not(.compact-option--disabled):hover .compact-card .compact-time,
body.home-page .compact-option:focus-within .compact-card .compact-time {
    background: rgba(42, 15, 63, 0.92);
    border-color: rgba(42, 15, 63, 0.14);
    color: var(--text-inverse);
    box-shadow: 0 9px 18px rgba(42, 15, 63, 0.12);
}

body.home-page .compact-card__selection-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    transition: opacity 0.3s ease;
}

body.home-page .compact-option input:checked + .compact-card {
    background: linear-gradient(135deg, rgba(42, 15, 63, 0.98), rgba(58, 24, 84, 0.95));
    border-color: rgba(109, 79, 212, 0.5);
    color: var(--text-inverse);
    box-shadow:
        0 16px 34px rgba(42, 15, 63, 0.2),
        0 0 0 2px rgba(109, 79, 212, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body.home-page .compact-option input:checked + .compact-card::before {
    background: linear-gradient(180deg, var(--accent-start), var(--accent-gold));
    opacity: 1;
}

body.home-page .compact-option input:checked + .compact-card::after {
    opacity: 0.22;
}

body.home-page .compact-option input:checked + .compact-card .compact-name,
body.home-page .compact-option input:checked + .compact-card .compact-status {
    color: var(--text-inverse);
}

body.home-page .compact-option input:checked + .compact-card .compact-time {
    background: rgba(245, 244, 252, 0.14);
    border-color: rgba(245, 244, 252, 0.22);
    color: var(--text-inverse);
    box-shadow: 0 9px 18px rgba(42, 15, 63, 0.16);
}

body.home-page .compact-option input:checked + .compact-card .compact-card__selection-canvas,
body.home-page .compact-card.compact-card--selected .compact-card__selection-canvas {
    opacity: 0.72;
}

body.home-page .compact-option:not(.compact-option--disabled):hover input:checked + .compact-card,
body.home-page .compact-option:focus-within input:checked + .compact-card {
    background:
        radial-gradient(circle at 84% 18%, rgba(109, 79, 212, 0.28), transparent 32%),
        linear-gradient(135deg, rgba(42, 15, 63, 1), rgba(72, 29, 94, 0.98));
    border-color: rgba(245, 244, 252, 0.42);
    box-shadow:
        0 18px 40px rgba(42, 15, 63, 0.26),
        0 0 0 3px rgba(109, 79, 212, 0.22),
        0 0 28px rgba(184, 135, 43, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body.home-page .compact-option:not(.compact-option--disabled):hover input:checked + .compact-card::before,
body.home-page .compact-option:focus-within input:checked + .compact-card::before {
    background: linear-gradient(180deg, var(--accent-gold), var(--accent-start));
    opacity: 1;
}

body.home-page .compact-option:not(.compact-option--disabled):hover input:checked + .compact-card::after,
body.home-page .compact-option:focus-within input:checked + .compact-card::after {
    opacity: 0.36;
}

body.home-page .compact-option:not(.compact-option--disabled):hover input:checked + .compact-card .compact-time,
body.home-page .compact-option:focus-within input:checked + .compact-card .compact-time {
    background: rgba(245, 244, 252, 0.24);
    border-color: rgba(245, 244, 252, 0.38);
    box-shadow: 0 0 18px rgba(184, 135, 43, 0.18);
}

body.home-page .compact-option:not(.compact-option--disabled):hover input:checked + .compact-card .compact-card__selection-canvas,
body.home-page .compact-option:focus-within input:checked + .compact-card .compact-card__selection-canvas {
    opacity: 0.95;
}


body.home-page .compact-card.compact-card--choice-pulse {
    animation: compactChoicePulse 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes compactChoicePulse {
    0%,
    100% {
        box-shadow:
            0 16px 34px rgba(42, 15, 63, 0.2),
            0 0 0 2px rgba(109, 79, 212, 0.13),
            inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    42% {
        box-shadow:
            0 16px 34px rgba(42, 15, 63, 0.22),
            0 0 0 5px rgba(109, 79, 212, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
}

body.home-page .checkmark {
    border-color: rgba(42, 15, 63, 0.26);
    background: rgba(255, 255, 255, 0.94);
}

body.home-page .checkbox-container input:checked ~ .checkmark {
    background: var(--accent-start);
    border-color: var(--accent-start);
}

body.home-page .btn-submit {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Grid + auto margins so the pill keeps its content width but sits
       centred under the WhatsApp block, like the copy above it. */
    display: grid;
    width: fit-content;
    margin-inline: auto;
    align-items: center;
    justify-content: center;
    min-height: 4.05rem;
    border: 1px solid rgba(245, 244, 252, 0.36);
    border-radius: 1.15rem;
    background:
        linear-gradient(135deg, var(--accent-start) 0%, var(--accent-end) 58%, var(--accent-gold) 100%);
    color: var(--text-inverse);
    text-shadow: 0 1px 0 rgba(42, 15, 63, 0.18);
    box-shadow:
        0 18px 38px rgba(109, 79, 212, 0.24),
        0 0 0 1px rgba(42, 15, 63, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

body.home-page .btn-submit::before,
body.home-page .btn-submit::after {
    position: absolute;
    pointer-events: none;
}

body.home-page .btn-submit::before {
    content: "";
    inset: 1px;
    z-index: 0;
    border-radius: calc(1.15rem - 1px);
    background:
        linear-gradient(100deg, rgba(245, 244, 252, 0.34), transparent 34%, rgba(245, 244, 252, 0.16) 70%, transparent 100%);
    opacity: 0.42;
    transition: opacity 0.3s ease;
}

body.home-page .btn-submit::after {
    content: "→";
    right: 1rem;
    top: 50%;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid rgba(245, 244, 252, 0.32);
    border-radius: 999px;
    background: rgba(245, 244, 252, 0.18);
    color: var(--text-inverse);
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
    transform: translateY(-50%);
}

body.home-page .btn-submit span {
    position: relative;
    z-index: 1;
    padding-inline: 2.8rem;
}

body.home-page .btn-submit:hover {
    transform: none;
    border-color: rgba(245, 244, 252, 0.62);
    color: var(--text-inverse);
    box-shadow:
        0 20px 42px rgba(109, 79, 212, 0.3),
        0 0 0 1px rgba(184, 135, 43, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

body.home-page .btn-submit:hover::before {
    opacity: 0.62;
}

body.home-page .btn-submit:focus-visible {
    outline: 3px solid rgba(184, 135, 43, 0.36);
    outline-offset: 4px;
}

body.home-page .btn-submit:disabled {
    cursor: not-allowed;
    opacity: 0.72;
    box-shadow:
        0 12px 26px rgba(42, 15, 63, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body.home-page .cta-premium-phone {
    color: inherit;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

body.home-page .cta-premium-phone:hover,
body.home-page .cta-premium-phone:focus-visible {
    color: var(--accent-start);
}

body.home-page .trial-submit-note {
    max-width: 32rem;
    margin: -0.55rem auto 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
    text-align: center;
}

body.home-page .home-faq-section {
  max-width: min(860px, calc(100% - 2rem)) !important;
  border: 1px solid rgba(245, 244, 252, 0.16);
  border-radius: 28px;
  box-shadow: 0 26px 60px rgba(42, 15, 63, 0.18);
}

body.home-page .home-faq-section .section-title-modern {
    color: var(--text-inverse);
}

body.home-page .home-faq-section .section-title-modern::before {
    background: linear-gradient(90deg, transparent, var(--accent-gold), rgba(245, 244, 252, 0.56), transparent);
}


body.home-page .home-faq-section summary {
    color: var(--text-main) !important;
    gap: 1rem;
    line-height: 1.25;
}

body.home-page .home-faq-section summary span {
    color: var(--accent-gold) !important;
    flex: 0 0 auto;
    margin-left: auto;
}

body.home-page .home-faq-section details div {
    color: var(--text-muted) !important;
}

/* Scoped to answer bodies only: the section-level CTA pill must keep its
   ink-on-coral label (a section-wide !important once made it invisible) */
body.home-page .home-faq-section details a {
    color: var(--accent-start) !important;
}

body.home-page .main-footer {
    background:
        radial-gradient(circle at 78% 0%, rgba(168, 116, 59, 0.18), transparent 28%),
        linear-gradient(135deg, var(--accent-navy-deep), var(--accent-navy) 56%, var(--accent-navy-soft));
    color: var(--text-inverse);
}

body.home-page .main-footer .logo-title,
body.home-page .main-footer .footer-heading,
body.home-page .main-footer .footer-links a:hover {
    color: var(--text-inverse);
}

body.home-page .main-footer .footer-address,
body.home-page .main-footer .footer-links a,
body.home-page .main-footer .footer-bottom {
    color: rgba(245, 244, 252, 0.72);
}

body.home-page .main-footer .footer-logo .logo-title {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--text-inverse);
}

body.home-page .main-footer .footer-logo .logo-subtitle {
    color: rgba(245, 244, 252, 0.78);
}

body.home-page .whatsapp-float {
    box-shadow: 0 14px 30px rgba(42, 15, 63, 0.16);
}

@media (max-width: 1023px) {
    body.home-page .home-hero__grid {
        border-radius: 22px;
    }

    body.home-page .home-hero__stage {
        border-radius: 21px 21px 0 0;
    }

    body.home-page .home-hero__panel {
        border-radius: 0 0 21px 21px;
    }

    body.home-page .guides-section__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    

    body.home-page .guides-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 900px) and (max-width: 1023px) {
    body.home-page .home-hero__grid {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        min-height: auto;
        max-height: none;
    }

    body.home-page .home-hero__stage {
        min-height: clamp(20rem, 44svh, 26rem);
        border-radius: 21px 21px 0 0;
    }

    body.home-page .home-hero__panel {
        border-top: 1px solid rgba(245, 244, 252, 0.14);
        border-left: 0;
        border-radius: 0 0 21px 21px;
    }

    body.home-page .home-hero__panel::before {
        top: -1px;
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(184, 135, 43, 0.48), rgba(109, 79, 212, 0.3), transparent);
    }

    body.home-page .home-hero__selector {
        display: grid;
        flex: initial;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.home-page .home-hero__selector-divider {
        grid-column: 1 / -1;
    }

    body.home-page .home-hero__choice {
        flex: initial;
        min-height: 56px;
    }
}

@media (min-width: 1024px) and (max-width: 1240px) and (max-height: 760px) {
    body.home-page .home-hero__choice:last-of-type {
        min-height: 48px;
    }
}

@media (max-width: 899px) {
    body.home-page .main-header {
        background: var(--bg-elevated) !important;
        box-shadow: 0 10px 24px rgba(42, 15, 63, 0.12);
    }

    body.home-page .logo {
        text-shadow: none;
    }

    body.home-page .nav-links.active {
        background:
            linear-gradient(180deg, rgba(245, 244, 252, 0.98), rgba(228, 226, 246, 0.98));
        border-top: 1px solid rgba(42, 15, 63, 0.1);
    }

    body.home-page .nav-links.active > a,
    body.home-page .nav-links.active .dropbtn,
    body.home-page .nav-links.active .dropdown-content a {
        color: var(--text-main);
    }

    body.home-page .nav-links.active .btn-header-cta {
        color: var(--text-inverse);
    }

    

    body.home-page .nav-links.active .dropdown-content {
        background: rgba(245, 244, 252, 0.78);
        box-shadow: none;
    }

    body.home-page .home-hero__grid {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        min-height: auto;
        max-height: none;
    }

    body.home-page .home-hero__stage {
        min-height: 38svh;
    }

    

    body.home-page .home-hero__panel-actions {
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 1rem 0 0.9rem;
}

    body.home-page .home-hero__panel-actions .btn-hero {
        flex: 1 1 9rem;
        position: relative;
        min-height: 2.85rem;
        border: 1px solid rgba(245, 244, 252, 0.24);
        border-radius: 999px;
        font-size: 0.74rem;
        box-shadow: 0 12px 24px rgba(7, 2, 10, 0.18);
    }

    body.home-page .home-hero__panel-actions .btn-hero-primary {
        --luxury-glow: 0.28;
        isolation: isolate;
        overflow: hidden;
        background: linear-gradient(145deg, var(--accent-navy-soft) 0%, var(--accent-navy) 62%, var(--accent-navy-deep) 100%);
        border-color: rgba(245, 244, 252, 0.18);
        color: var(--text-inverse);
        box-shadow:
            0 16px 34px rgba(13, 26, 38, 0.32),
            0 0 0 1px rgba(245, 244, 252, 0.1),
            0 0 calc(24px * var(--luxury-glow)) rgba(109, 79, 212, 0.24);
        transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, outline-color 0.3s ease;
    }

    body.home-page .home-hero__panel-actions .btn-hero-primary:hover {
        --luxury-glow: 0.52;
        border-color: rgba(245, 244, 252, 0.28);
        color: var(--text-inverse);
        transform: none;
        box-shadow:
            0 18px 38px rgba(12, 5, 20, 0.36),
            0 0 0 1px rgba(245, 244, 252, 0.14),
            0 0 calc(28px * var(--luxury-glow)) rgba(109, 79, 212, 0.3);
    }

    body.home-page .home-hero__panel-actions .btn-hero-primary .btn-hero-content {
        position: relative;
        z-index: 2;
    }

    body.home-page .home-hero__panel-actions .btn-hero-secondary {
        background: rgba(245, 244, 252, 0.09);
        color: var(--text-inverse);
    }

    body.home-page .trial-expectation {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.7rem;
    }

    body.home-page .trial-process {
        width: 100%;
        min-height: auto;
        overflow: visible;
    }

    body.home-page .trial-process__canvas {
        display: none;
    }

    body.home-page .trial-process__track {
        left: 1.08rem;
        right: auto;
        top: 1.3rem;
        bottom: 1.3rem;
        width: 2px;
        height: auto;
    }

    body.home-page .trial-process__track::after {
        transform: scaleY(var(--trial-process-progress));
        transform-origin: top center;
    }

    body.home-page .trial-process__list {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  padding: 0;
}

    body.home-page .trial-process__item {
  min-height: 3.15rem;
}

    body.home-page .trial-process__item + .trial-process__item::before {
        display: none;
    }

    body.home-page .trial-process__step {
        width: 2.18rem;
        min-width: 2.18rem;
        min-height: 2.18rem;
    }

    body.home-page .trial-process__item strong {
  font-size: 0.95rem;
}

}

/* Keep the compact header until the full CTA stack has enough horizontal room. */
/* Narrow-desktop burger band. Pages whose header row does not fit between
   900px and 1079px fall back to the mobile burger layout. Pages that opt in
   to the decluttered row via body.nav-declutter (.nav-home hidden, single
   login icon — currently the EN homepage pilot) leave the band at 1024px,
   where their slimmer desktop row fits again. */
@media (min-width: 900px) and (max-width: 1079px) {
    body:not(.nav-declutter) .main-header {
        height: var(--header-height-mobile);
        background: #050208 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    }

    body:not(.nav-declutter) .navbar {
        justify-content: center;
    }

    body:not(.nav-declutter) .logo {
        transform: scale(0.9);
        transform-origin: center;
        text-shadow: 0 0 10px rgba(123, 92, 255, 0.4);
    }

    body:not(.nav-declutter) .logo-title {
        font-size: 2rem;
    }

    body:not(.nav-declutter) .mobile-menu-btn {
        display: flex !important;
        position: absolute !important;
        top: 50% !important;
        left: 1rem !important;
        z-index: 10001 !important;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none !important;
        background: none !important;
        color: white !important;
        transform: translateY(-50%) !important;
    }

    body:not(.nav-declutter) .nav-links {
        display: none !important;
    }

    body:not(.nav-declutter) .nav-links.active {
        display: flex !important;
        top: var(--header-height-mobile);
        height: calc(100vh - var(--header-height-mobile));
    }

    body:not(.nav-declutter) .lang-switch {
        position: absolute !important;
        top: 50%;
        right: 1rem;
        gap: 6px;
        margin: 0;
        font-size: 0.85rem;
        transform: translateY(-50%);
    }

    body.home-page:not(.nav-declutter) .main-header {
        background: rgba(245, 244, 252, 0.94) !important;
        box-shadow: 0 10px 24px rgba(42, 15, 63, 0.12);
    }

    body.home-page:not(.nav-declutter) .logo {
        text-shadow: none;
    }

    body.home-page:not(.nav-declutter) .mobile-menu-btn {
        color: var(--text-main) !important;
        animation: none;
    }

    body.home-page:not(.nav-declutter) .nav-links.active {
        background:
            linear-gradient(180deg, rgba(245, 244, 252, 0.98), rgba(228, 226, 246, 0.98));
        border-top: 1px solid rgba(42, 15, 63, 0.1);
    }

    body.home-page:not(.nav-declutter) .nav-links.active > a,
    body.home-page:not(.nav-declutter) .nav-links.active .dropbtn,
    body.home-page:not(.nav-declutter) .nav-links.active .dropdown-content a {
        color: var(--text-main);
    }

    body.home-page:not(.nav-declutter) .nav-links.active .btn-header-cta {
        color: var(--text-inverse);
    }

    
}

/* The decluttered burger band deliberately keeps the page's own dark header
   (no cream repaint): the old cream band rendered the tropic cream logo,
   burger, and EN/DE nearly invisible. The dark header matches the sub-900px
   mobile treatment, and the overlay inherits the legible base styling. */
@media (min-width: 900px) and (max-width: 1023px) {
    body.nav-declutter .main-header {
        height: var(--header-height-mobile);
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.nav-declutter .navbar {
        justify-content: center;
    }

    body.nav-declutter .logo {
        transform: scale(0.9);
        transform-origin: center;
        text-shadow: none;
    }

    body.nav-declutter .logo-title {
        font-size: 2rem;
    }

    body.nav-declutter .mobile-menu-btn {
        display: flex !important;
        position: absolute !important;
        top: 50% !important;
        left: 1rem !important;
        z-index: 10001 !important;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none !important;
        background: none !important;
        color: var(--text-main) !important;
        transform: translateY(-50%) !important;
        animation: none;
    }

    body.nav-declutter .nav-links {
        display: none !important;
    }

    body.nav-declutter .nav-links.active {
        display: flex !important;
        top: var(--header-height-mobile);
        height: calc(100vh - var(--header-height-mobile));
    }

    body.nav-declutter .lang-switch {
        position: absolute !important;
        top: 50%;
        right: 1rem;
        gap: 6px;
        margin: 0;
        font-size: 0.85rem;
        transform: translateY(-50%);
    }

    body.nav-declutter .header-login {
        display: none;
    }
}

/* With .nav-home hidden the decluttered row fits from 1024px, but only
   with slightly tighter gaps and CTA padding until wide desktop. */
@media (min-width: 1024px) and (max-width: 1180px) {
    body.nav-declutter .nav-links {
        gap: 0.5rem;
    }

    body.nav-declutter .btn-header-cta {
        margin-left: 0;
        padding: 0.62rem 0.95rem;
    }

    body.nav-declutter .lang-switch {
        margin-left: 4px;
        margin-right: 4px;
    }
}

/* On wide desktops, open up the spacing between the links themselves so
   the row reads as distinct groups: brand, navigation, booking, utilities.
   (The block's outer position — centered between logo and utilities — is
   handled by the auto margins set at 900px+ above; a fixed margin-right
   here would fight that centering as the viewport widens.) */
@media (min-width: 1240px) {
    body.nav-declutter .nav-links {
        gap: clamp(1.25rem, 0.55rem + 1vw, 1.75rem);
    }

    body.nav-declutter .btn-header-cta {
        margin-left: 1.75rem;
    }
}

.nav-links.active .dropbtn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.nav-links.active .dropdown-content {
    position: static;
    left: auto;
    top: auto;
    display: none;
    visibility: visible;
    opacity: 1;
    min-width: 0;
    transform: none;
}

.nav-links.active .dropdown.active .dropdown-content {
    display: flex;
}

@media (max-width: 767px) {
    body.home-page .home-hero.hero {
        background:
            linear-gradient(180deg,
                var(--bg-elevated) 0%,
                var(--bg-elevated) 9%,
                var(--bg-dark) 9%,
                var(--bg-dark) 82%,
                var(--bg-elevated) 82%,
                var(--bg-elevated) 100%) !important;
    }

    body.home-page .home-hero__grid {
        border-radius: 20px;
    }

    body.home-page .home-hero__stage {
        border-radius: 19px 19px 0 0;
    }

    body.home-page .home-hero__panel {
        border-radius: 0 0 19px 19px;
    }

    body.home-page .home-hero__brand {
        font-size: 2.2rem;
    }

    body.home-page .home-hero__assurance {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
    }

    body.home-page .home-hero__assurance li {
        justify-content: center;
        min-height: 2.35rem;
        padding: 0.45rem 0.55rem;
        font-size: 0.68rem;
        line-height: 1.14;
        text-align: center;
    }

    body.home-page .section-title-modern {
        font-size: clamp(2.55rem, 13vw, 3.5rem);
    }

    body.home-page .guides-section {
        --guide-canvas-opacity: 0.48;
        padding: 3.25rem 0 3.65rem !important;
    }

    body.home-page .guides-section .section-title-modern {
        font-size: clamp(2.05rem, 11vw, 3.1rem) !important;
        line-height: 0.96;
        white-space: normal;
    }

    body.home-page .guides-section .section-subtitle {
        font-size: 0.94rem;
        line-height: 1.55;
    }

    body.home-page .section-kicker {
        font-size: 0.68rem;
        letter-spacing: 0.1em;
    }

    

    

    

    

    body.home-page .guides-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.9rem !important;
        margin-top: 1.1rem;
    }

    body.home-page .guide-card {
        display: grid !important;
        grid-template-columns: 2.35rem minmax(0, 1fr) !important;
        grid-template-areas:
            "icon copy" !important;
        align-items: start !important;
        min-height: auto;
        gap: 0 0.85rem !important;
        padding: 1rem !important;
        border-radius: 18px;
    }

    

    body.home-page .guide-card .guide-icon {
        width: 2.25rem !important;
        height: 2.25rem !important;
        margin: 0 !important;
        color: var(--text-main) !important;
        font-size: 0.68rem !important;
    }

    body.home-page .guide-card h3.guide-title {
        font-size: 1.15rem !important;
        line-height: 1.16 !important;
    }

    

    

    body.home-page .guides-confidence {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 1.25rem;
        padding: 1.1rem;
        border-radius: 18px;
    }

    body.home-page .guides-confidence p {
        font-size: 0.95rem;
    }

    

    body.home-page .guides-confidence .btn-primary,
    body.home-page .guides-confidence .btn-secondary {
        display: inline-flex;
        flex: 1 1 100%;
        align-items: center;
        justify-content: center;
        min-height: 2.85rem;
        text-align: center;
    }

    :is(body.home-page, body.schedule-page) .reviews-section,
    body.home-page .trial-section,
    body.home-page .gallery-values-section,
    body.home-page .schedule-section {
        padding: 4.5rem 0;
    }

    :is(body.home-page, body.schedule-page) .reviews-section {
        padding: 2.3rem 0;
    }

    body.home-page .schedule-section {
        padding: 4.2rem 0 2.6rem;
        scroll-margin-top: 4.75rem;
    }

    body.home-page .guides-section--starter {
        --guide-canvas-opacity: 0.34;
        padding: 2.35rem 0 2.45rem !important;
    }

    body.home-page .guides-section--starter .guides-section__layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1rem;
    }

    body.home-page .guides-section--starter .section-title-modern {
        font-size: clamp(2rem, 10.5vw, 2.85rem) !important;
    }

    body.home-page .guides-section--starter .section-title-modern span:last-child {
        font-size: 0.72em;
    }

    

    

    

    
}

/* Homepage beginner course photo cards */
body.home-page .guides-section--starter .beginner-course-card--photo {
    --beginner-card-image: none;
    --beginner-card-position: center;
    --beginner-card-shade: linear-gradient(90deg, rgba(36, 16, 58, 0.9) 0%, rgba(36, 16, 58, 0.72) 48%, rgba(36, 16, 58, 0.28) 100%);
    --beginner-card-reveal: 0;
    --beginner-card-sheen-x: -128%;
    min-height: clamp(18rem, 25vw, 23rem);
    padding: clamp(1.15rem, 2vw, 1.6rem);
    overflow: visible;
    background:
        var(--beginner-card-shade),
        var(--beginner-card-image);
    background-position: var(--beginner-card-position);
    background-size: cover;
    border-color: rgba(245, 244, 252, 0.24);
    box-shadow: 0 24px 54px rgba(42, 15, 63, 0.22);
    color: var(--text-inverse);
    filter: saturate(0.96) contrast(1.03);
    backface-visibility: hidden;
    transform-style: preserve-3d;
    will-change: transform, opacity;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

body.home-page .guides-section--starter .beginner-course-card--photo:hover,
body.home-page .guides-section--starter .beginner-course-card--photo:focus-within,
body.home-page .guides-section--starter .beginner-course-card--photo.beginner-course-card--motion-active {
    --beginner-card-reveal: 1;
    --beginner-card-sheen-x: 118%;
    background-position: var(--beginner-card-position);
    background-size: cover;
    border-color: rgba(245, 244, 252, 0.4);
    box-shadow:
        0 28px 62px rgba(42, 15, 63, 0.28),
        0 0 0 1px rgba(184, 135, 43, 0.2);
    filter: saturate(1.02) contrast(1.05);
}


body.home-page .guides-section--starter .beginner-course-card--photo::before {
    z-index: 0;
    border-radius: inherit;
    background:
        radial-gradient(ellipse at 78% 14%, rgba(184, 135, 43, 0.22), transparent 34%),
        linear-gradient(180deg, rgba(245, 244, 252, 0.18), transparent 48%),
        linear-gradient(90deg, rgba(245, 244, 252, 0.12), transparent 34%);
    opacity: calc(0.36 + (var(--beginner-card-reveal) * 0.28));
    transition: opacity 0.3s ease;
}

body.home-page .guides-section--starter .beginner-course-card--photo::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background:
        linear-gradient(112deg, transparent 0%, transparent 34%, rgba(245, 244, 252, 0.32) 47%, rgba(184, 135, 43, 0.24) 51%, transparent 64%, transparent 100%) var(--beginner-card-sheen-x) 0 / 260% 100% no-repeat,
        linear-gradient(180deg, rgba(184, 135, 43, 0.28), transparent 18%, transparent 82%, rgba(245, 244, 252, 0.16));
    mix-blend-mode: screen;
    opacity: calc(var(--beginner-card-reveal) * 0.66);
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px rgba(245, 244, 252, 0.3),
        inset 0 0 0 2px rgba(184, 135, 43, 0.18);
    transition: opacity 0.3s ease, background-position 0.62s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
}


body.home-page .guides-section--starter .beginner-course-card--photo .guide-title {
    max-width: 100%;
    margin: 0;
    color: var(--text-inverse);
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2.35rem, 4.7vw, 4.35rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.88;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow:
        0 2px 18px rgba(20, 8, 31, 0.55),
        0 14px 36px rgba(20, 8, 31, 0.48);
}


@media (max-width: 768px) {
    body.home-page .guides-section--starter .beginner-course-card--photo {
        --beginner-card-shade: linear-gradient(180deg, rgba(36, 16, 58, 0.88) 0%, rgba(36, 16, 58, 0.64) 58%, rgba(36, 16, 58, 0.36) 100%);
        min-height: 17rem;
        padding: 1.15rem 0 1.15rem 1.15rem !important;
        background-position: var(--beginner-card-position);
        background-size: cover;
    }

    

    

    

    body.home-page .guides-section--starter .beginner-course-card--photo .guide-title {
        font-size: clamp(2rem, 10.5vw, 3.35rem) !important;
        line-height: 0.9 !important;
    }

    

    

    

    
}

/* CONTACT PAGE - WARM PREMIUM REBRAND */
body.contact-page {
    --bg-main: #EFEEFA;
    --bg-secondary: #E4E2F6;
    --bg-elevated: #F5F4FC;
    --bg-dark: #24103a;
    --text-main: #2a0f3f;
    --text-muted: #6f586c;
    --text-dark: #1b0a2b;
    --text-inverse: #F5F4FC;
    --accent-start: #6D4FD4;
    --accent-end: #8A6CF0;
    --accent-gold: #6F7AE0;
    --accent-purple: #2a0f3f;
    --accent-navy: #24103a;
    --accent-navy-soft: #2a0f3f;
    --accent-navy-deep: #1b0a2b;
    --grad: linear-gradient(90deg, #6D4FD4, #8A6CF0);
    --brand-grad: linear-gradient(135deg, #2a0f3f 0%, #6D4FD4 58%, #6F7AE0 100%);
    --glass-bg: rgba(245, 244, 252, 0.78);
    --glass-border: rgba(42, 15, 63, 0.12);
    --glass-highlight: rgba(255, 255, 255, 0.55);
    --shadow-soft: 0 14px 35px rgba(42, 15, 63, 0.1);
    --shadow-warm: 0 18px 40px rgba(109, 79, 212, 0.14);
    --font-display: 'Outfit', sans-serif;
    --font-heading: 'Cormorant Garamond', serif;
    background: var(--bg-elevated);
    color: var(--text-main);
}

body.contact-page::selection {
    background: rgba(109, 79, 212, 0.22);
    color: var(--text-dark);
}

body.contact-page main {
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(245, 244, 252, 0.98) 0%, rgba(239, 238, 250, 0.94) 34%, rgba(228, 226, 246, 0.96) 67%, rgba(239, 238, 250, 0.98) 100%),
        linear-gradient(118deg, rgba(42, 15, 63, 0.08) 0%, transparent 28%, rgba(109, 79, 212, 0.12) 74%, transparent 100%);
}

body.contact-page main, body.contact-page .contact-quick-actions, body.contact-page .contact-section--modern {
  max-width: 100%;
}

body.contact-page .text-gradient {
    background: var(--brand-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body.contact-page .main-header {
    background: rgba(245, 244, 252, 0.95);
    border-bottom: 1px solid rgba(42, 15, 63, 0.16);
    box-shadow: 0 10px 26px rgba(42, 15, 63, 0.09);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.contact-page .main-header.scrolled {
    background: rgba(245, 244, 252, 0.94);
    box-shadow: 0 14px 36px rgba(42, 15, 63, 0.12);
}

body.contact-page .main-header::after,
body.contact-page .main-footer::before {
    background: linear-gradient(90deg, transparent, rgba(184, 135, 43, 0.68), rgba(109, 79, 212, 0.52), transparent);
}

body.contact-page .logo {
    gap: 0.08rem;
    min-width: 10.25rem;
    text-shadow: none;
}

body.contact-page .logo-title {
    color: var(--text-main);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.15rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 0.78;
}

body.contact-page .logo-subtitle {
    color: var(--accent-purple);
    background: none;
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

body.contact-page .nav-links,
body.contact-page .dropbtn,
body.contact-page .nav-links a:not(.btn-header-cta):not(.btn-header-secondary),
body.contact-page .lang-switch span,
body.contact-page .lang-switch a {
    color: rgba(42, 15, 63, 0.72);
}

body.contact-page .nav-links a,
body.contact-page .dropbtn,
body.contact-page .btn-header-cta {
    white-space: nowrap;
}

body.contact-page .nav-links a:not(.btn-header-cta):not(.btn-header-secondary):hover,
body.contact-page .dropbtn:hover,
body.contact-page .dropdown:hover .dropbtn,
body.contact-page .nav-links a:not(.btn-header-cta):not(.btn-header-secondary).active,
body.contact-page .dropbtn.active,
body.contact-page .lang-switch .active {
    color: var(--text-main);
    text-shadow: none;
}

body.contact-page .nav-links a:not(.btn-header-cta):not(.btn-header-secondary)::after,
body.contact-page .dropbtn::after,
body.contact-page .dropdown-content a span::after {
    background: rgba(184, 135, 43, 0.55);
    box-shadow: none;
}

body.contact-page .dropdown-content {
    background: rgba(245, 244, 252, 0.96);
    border-color: rgba(42, 15, 63, 0.12);
    box-shadow: 0 18px 42px rgba(42, 15, 63, 0.12);
}

body.contact-page .dropdown-content a {
    color: rgba(42, 15, 63, 0.72);
}

body.contact-page .dropdown-content a:hover {
    background: rgba(109, 79, 212, 0.08);
    color: var(--text-main);
    padding-left: 16px;
}

body.contact-page .lang-switch .active {
    border-bottom-color: var(--accent-gold);
}

body.contact-page .lang-switch .divider {
    color: rgba(42, 15, 63, 0.35);
}

body.contact-page .btn-header-cta {
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 18%, rgba(245, 244, 252, 0.12), transparent 34%),
        radial-gradient(circle at 88% 16%, rgba(184, 135, 43, 0.22), transparent 32%),
        linear-gradient(145deg, var(--accent-navy-soft) 0%, var(--accent-navy) 58%, var(--accent-navy-deep) 100%);
    border-color: rgba(245, 244, 252, 0.18);
    color: var(--text-inverse);
    box-shadow:
        0 14px 30px rgba(42, 15, 63, 0.24),
        0 0 0 1px rgba(245, 244, 252, 0.1);
    letter-spacing: 0;
    text-transform: none;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body.contact-page .btn-header-cta:hover,
body.contact-page .btn-header-cta:focus-visible {
    color: var(--text-inverse);
    transform: none;
    box-shadow:
        0 16px 34px rgba(42, 15, 63, 0.26),
        0 0 0 1px rgba(245, 244, 252, 0.14);
}

body.contact-page .mobile-menu-btn {
    color: var(--text-main) !important;
    animation: none;
}

body.contact-page .mobile-menu-btn svg,
body.contact-page .mobile-menu-btn line {
    stroke: currentColor;
}

body.contact-page .section-kicker {
    margin: 0 0 0.8rem;
    color: var(--accent-start);
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
}

body.contact-page .section-kicker::before {
    content: '';
    display: inline-block;
    width: 2.25rem;
    height: 1px;
    margin-right: 0.65rem;
    vertical-align: middle;
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-start));
}


body.contact-page .contact-quick-actions::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  pointer-events: none;
}


body.contact-page .contact-info-card--modern h2, body.contact-page .contact-form--modern h2 {
  color: var(--text-main);
  letter-spacing: 0;
}


body.contact-page .contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
}


body.contact-page .contact-submit:hover, body.contact-page .contact-submit:focus-visible {
  transform: none;
}


body.contact-page .contact-info-card--modern, body.contact-page .contact-form--modern {
  border: 1px solid rgba(42, 15, 63, 0.14);
  box-shadow:
        0 18px 46px rgba(42, 15, 63, 0.13),
        0 0 0 1px rgba(245, 244, 252, 0.36);
}


body.contact-page .contact-quick-actions,
body.contact-page .contact-section--modern {
    position: relative;
    padding: 4rem 0;
}


body.contact-page .contact-question-flow + .contact-section--modern {
    padding-top: 2.4rem;
}

body.contact-page .contact-section--modern::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}


body.contact-page .contact-question-flow {
  overflow: hidden;
  scroll-margin-top: calc(var(--header-height) + 1rem);
  isolation: isolate;
}

body.contact-page main > .contact-question-flow:first-child {
    padding-top: calc(var(--header-height) + 1.1rem);
    padding-bottom: 1.2rem;
}

body.contact-page .contact-question-flow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body.contact-page .contact-question-flow__layout {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 13.6rem;
    text-align: center;
}

body.contact-page .contact-question-flow__copy {
    min-width: 0;
    width: 100%;
    padding: 0.35rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.contact-page .contact-question-flow__title {
  width: 100%;
  max-width: 72rem;
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 4.65rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.96;
}

body.contact-page .contact-question-flow__title > span:first-child {
    display: block;
    width: 100%;
    max-width: none;
}

body.contact-page .contact-question-flow__word-slot {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
  width: min(100%, 18ch);
  min-height: 1em;
  margin: 0.08em auto 0;
  overflow: hidden;
  color: var(--accent-start);
  font-size: 1.04em;
  font-weight: 700;
  line-height: 0.92;
  white-space: nowrap;
}

body.contact-page .contact-question-flow__word-slot::before {
  content: '';
  position: absolute;
  left: 0.04em;
  right: 0.1em;
  z-index: -1;
  height: 0.12em;
  border-radius: 999px;
  transform-origin: left center;
  transform: scaleX(var(--word-line-scale, 1));
}

body.contact-page .contact-question-flow__word {
  display: inline-flex;
  grid-area: 1 / 1;
  align-items: baseline;
  color: var(--accent-start);
}

body.contact-page .contact-question-flow__glyph {
    display: inline-block;
    color: var(--accent-start);
    will-change: transform, opacity;
}

body.contact-page .contact-question-flow__glyph:nth-child(3n) {
    color: var(--accent-end);
}

body.contact-page .contact-question-flow__glyph:nth-child(5n) {
    color: var(--accent-gold);
}

body.contact-page .contact-question-flow__space {
    display: inline-block;
    width: 0.22em;
    color: inherit;
}

body.contact-page .contact-question-flow__intro {
    max-width: 33rem;
    margin: 0.58rem auto 0;
    color: var(--text-muted);
    font-size: 0.98rem;
    line-height: 1.5;
}

body.contact-page .contact-question-flow__canvas {
  position: absolute;
  inset: 0 5%;
  z-index: 1;
  display: block;
  width: 90%;
  height: 100%;
  pointer-events: none;
}

body.contact-page .contact-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(17rem, 0.72fr) minmax(0, 1fr);
    gap: 1.35rem;
    align-items: stretch;
}

body.contact-page .contact-info-card--modern,
body.contact-page .contact-form--modern {
    border-radius: 24px;
    color: var(--text-main);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.contact-page .contact-info-card--modern {
  display: flex;
  flex-direction: column;
  padding: 1.4rem;
  border-color: rgba(245, 244, 252, 0.16);
}

body.contact-page .contact-info-card--modern h2,
body.contact-page .contact-form--modern h2 {
    margin: 0;
    font-size: 2.65rem;
    line-height: 0.98;
}


body.contact-page .contact-info-card--modern .section-kicker::before {
    background: var(--accent-gold);
}

body.contact-page .contact-detail-list {
    display: grid;
    gap: 0.9rem;
    margin-top: 1.3rem;
}

body.contact-page .contact-item--modern {
  margin: 0;
  padding: 0.95rem;
  border-radius: 18px;
}

body.contact-page .contact-icon {
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 50%;
}

body.contact-page .contact-item--modern h3 {
    margin: 0;
    color: var(--text-inverse);
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    line-height: 1.2;
}

body.contact-page .contact-item--modern p {
  margin: 0.25rem 0 0;
  font-size: 0.98rem;
  line-height: 1.5;
}

body.contact-page .contact-address-note {
  display: block;
  margin-top: 0.42rem;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
}

body.contact-page .contact-item--modern a {
    color: var(--text-inverse);
    text-decoration: none;
}

body.contact-page .contact-embedded-map {
  position: relative;
  overflow: hidden;
  min-height: 13rem;
  border-radius: 18px;
}

body.contact-page .contact-embedded-map iframe {
    display: block;
    width: 100%;
    height: 13rem;
}

body.contact-page .contact-item--modern a:hover,
body.contact-page .contact-item--modern a:focus-visible {
  text-decoration: underline;
}

body.contact-page .contact-form--modern {
  position: relative;
  overflow: hidden;
  padding: 1.4rem;
  border-color: rgba(109, 79, 212, 0.18);
}

body.contact-page .contact-form--modern::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: var(--accent-gold);
    pointer-events: none;
}

body.contact-page .contact-form__privacy {
  line-height: 1.6;
}

body.contact-page .contact-form--modern .form-group {
    margin-bottom: 1rem;
}

body.contact-page .contact-form--modern .form-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0;
}

body.contact-page .contact-form--modern .form-input,
body.contact-page .contact-form--modern .form-textarea {
  min-height: 3.2rem;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}


body.contact-page .contact-form--modern .form-textarea {
    min-height: 9.5rem;
}

body.contact-page .contact-submit {
  width: 100%;
  min-height: 3.2rem;
  padding: 0.95rem 1rem;
  border-color: rgba(245, 244, 252, 0.26);
  cursor: pointer;
}

body.contact-page .contact-submit:disabled {
    cursor: not-allowed;
}

body.contact-page .contact-form__privacy {
    margin: 1rem 0 0;
    font-size: 0.9rem;
}

body.contact-page .contact-form__privacy a {
  font-weight: 800;
  text-decoration: none;
}

body.contact-page .contact-form__privacy a:hover,
body.contact-page .contact-form__privacy a:focus-visible {
  text-decoration: underline;
}

body.contact-page .main-footer {
    background: linear-gradient(135deg, var(--accent-navy-deep), var(--accent-navy) 56%, var(--accent-navy-soft));
}

body.contact-page .main-footer .logo-title,
body.contact-page .main-footer .footer-heading,
body.contact-page .main-footer .footer-links a:hover {
    color: var(--text-inverse);
}

body.contact-page .main-footer .footer-address,
body.contact-page .main-footer .footer-links a,
body.contact-page .main-footer .footer-bottom {
    color: rgba(245, 244, 252, 0.72);
}

body.contact-page .main-footer .footer-logo .logo-title {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--text-inverse);
}

body.contact-page .main-footer .footer-logo .logo-subtitle {
    color: rgba(245, 244, 252, 0.78);
}

body.contact-page .contact-whatsapp-float {
    right: max(1.35rem, env(safe-area-inset-right));
    bottom: max(1.35rem, env(safe-area-inset-bottom));
    border: 2px solid rgba(245, 244, 252, 0.9);
    box-shadow:
        0 18px 38px rgba(27, 10, 43, 0.22),
        0 0 0 1px rgba(42, 15, 63, 0.08);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body.contact-page .contact-whatsapp-float:hover,
body.contact-page .contact-whatsapp-float:focus-visible {
    transform: none;
    border-color: rgba(245, 244, 252, 1);
    box-shadow:
        0 20px 42px rgba(27, 10, 43, 0.28),
        0 0 0 4px rgba(37, 211, 102, 0.18);
    outline: none;
}

body.contact-page .contact-whatsapp-float:active {
    transform: none;
}

@media (max-width: 1180px) {
    body.contact-page .contact-layout {
  grid-template-columns: minmax(0, 1fr);
}

    body.contact-page .contact-question-flow__layout {
        min-height: 13rem;
    }

    body.contact-page .contact-question-flow__title {
        font-size: 4.05rem;
    }

    

    body.contact-page .contact-form--modern {
        order: -1;
    }

    
}

@media (max-width: 899px) {
    body.contact-page .main-header {
        background: rgba(245, 244, 252, 0.99) !important;
        border-bottom-color: rgba(42, 15, 63, 0.18);
        box-shadow: 0 10px 24px rgba(42, 15, 63, 0.14);
    }

    body.contact-page .logo {
        gap: 0.12rem;
        min-width: auto;
        text-shadow: none;
        transform: none;
    }

    body.contact-page .logo-title {
        color: var(--text-main) !important;
        font-size: clamp(2.08rem, 8.7vw, 2.28rem);
        line-height: 0.82;
    }

    body.contact-page .logo-subtitle {
        color: var(--accent-purple) !important;
        font-size: 0.68rem;
        line-height: 1;
        opacity: 0.96;
    }

    body.contact-page .mobile-menu-btn {
        width: 44px;
        height: 44px;
        color: var(--text-main) !important;
        background: rgba(245, 244, 252, 0.74) !important;
        border: 1px solid rgba(42, 15, 63, 0.14) !important;
        border-radius: 999px;
        box-shadow: 0 8px 18px rgba(42, 15, 63, 0.1);
    }

    body.contact-page .mobile-menu-btn svg,
    body.contact-page .mobile-menu-btn line {
        stroke: currentColor !important;
        stroke-width: 2.4;
    }

    body.contact-page .lang-switch,
    body.contact-page .lang-switch a,
    body.contact-page .lang-switch span {
        color: var(--text-main) !important;
        font-size: 0.95rem;
        font-weight: 800;
    }

    body.contact-page .lang-switch .divider {
        color: rgba(42, 15, 63, 0.45) !important;
    }

    body.contact-page .nav-links.active {
        background:
            linear-gradient(180deg, rgba(245, 244, 252, 0.98), rgba(228, 226, 246, 0.98));
        border-top: 1px solid rgba(42, 15, 63, 0.1);
    }

    body.contact-page .nav-links.active > a,
    body.contact-page .nav-links.active .dropbtn,
    body.contact-page .nav-links.active .dropdown-content a {
        min-height: 2.7rem;
        color: var(--text-main) !important;
        font-size: 1rem;
        font-weight: 800;
        line-height: 1.2;
    }

    body.contact-page .nav-links.active .btn-header-cta {
        min-height: 2.85rem;
        padding: 0.72rem 1.3rem;
        color: var(--text-inverse) !important;
        font-size: 0.92rem;
        font-weight: 800;
    }

    body.contact-page .nav-links.active .dropdown-content {
        background: rgba(245, 244, 252, 0.78);
        box-shadow: none;
    }

    

    

    

    

    body.contact-page .contact-question-flow__layout {
        min-height: 12.4rem;
    }

    body.contact-page .contact-question-flow__title {
        max-width: 44rem;
        font-size: 3rem;
    }

    body.contact-page .contact-question-flow__intro {
        max-width: 30rem;
    }

}

@media (max-width: 640px) {
    body.contact-page {
        overflow-x: clip;
    }

    body.contact-page .container {
        width: calc(100% - 2rem);
        max-width: calc(100% - 2rem);
        padding-left: 0;
        padding-right: 0;
    }

    

    body.contact-page .contact-layout, body.contact-page .contact-info-card--modern, body.contact-page .contact-form--modern {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

    

    

    

    

    

    

    

    

    

    

    body.contact-page main > .contact-question-flow:first-child {
        padding-top: calc(var(--header-height-mobile) + 0.95rem);
        padding-bottom: 1.05rem;
    }

    body.contact-page .contact-question-flow__layout,
    body.contact-page .contact-question-flow__copy {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    body.contact-page .contact-question-flow__layout {
        min-height: 11.6rem;
    }

    body.contact-page .contact-question-flow__title {
        max-width: 22rem;
        font-size: 2.04rem;
        line-height: 1.02;
    }

    body.contact-page .contact-question-flow__word-slot {
        width: min(100%, 13.8ch);
        min-height: 1.02em;
        white-space: normal;
    }

    body.contact-page .contact-question-flow__intro {
        max-width: 20rem;
        margin-top: 0.45rem;
        font-size: 0.86rem;
        line-height: 1.42;
    }

    body.contact-page .contact-question-flow__canvas {
  inset: 0 -12%;
  width: 124%;
}

    

    body.contact-page .contact-info-card--modern h2,
    body.contact-page .contact-form--modern h2 {
        font-size: 2.1rem;
    }

    body.contact-page .contact-quick-actions,
    body.contact-page .contact-section--modern {
        padding: 3rem 0;
    }

    body.contact-page .contact-question-flow + .contact-section--modern {
        padding-top: 1.8rem;
    }

    body.contact-page .contact-quick-actions.contact-question-flow {
        padding-bottom: 2rem;
    }

    body.contact-page .contact-whatsapp-float {
        right: max(1rem, env(safe-area-inset-right));
        bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/* ==========================================================================
   TRIAL FORM — inline validation errors (both homepages; theme-neutral base.
   The EN homepage overrides the colors in tropic-noir.css for its light
   form island.)
   ========================================================================== */
.trial-form .form-error {
    margin: 0.5rem 0 0;
    color: #B79CFF;
    font-size: 0.88rem;
    font-weight: 500;
}

.trial-form input.input-error {
    border-color: #B79CFF;
}

/* ==================== PRICING STRIP (HOMEPAGE) ==================== */

.pricing-strip {
    padding: 3rem 0;
}

.pricing-strip__inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2.25rem 1.75rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.pricing-strip__title {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    color: var(--text-main);
}

.pricing-strip__title em {
    font-style: italic;
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: var(--accent-end);
}

.pricing-strip__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.pricing-strip__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem 0.4rem 0.95rem;
    border-radius: 999px;
    background: var(--grad);
    color: var(--text-dark);
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
    animation: pricing-badge-pulse 2.6s ease-in-out infinite;
}

.pricing-strip__badge-arrow {
    flex-shrink: 0;
    animation: pricing-badge-nudge 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {

    .pricing-strip__badge,
    .pricing-strip__badge-arrow {
        animation: none;
    }
}

@keyframes pricing-badge-nudge {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(3px);
    }
}

@keyframes pricing-badge-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(123, 92, 255, 0.35);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(123, 92, 255, 0);
    }
}

.pricing-strip__lead {
    color: var(--text-muted);
    line-height: 1.65;
    max-width: 52ch;
    margin-bottom: 1.4rem;
}

.pricing-strip__cta {
    display: inline-block;
    color: var(--accent-start);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 2px;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.pricing-strip__cta:hover,
.pricing-strip__cta:focus-visible {
    color: var(--accent-end);
    border-color: currentColor;
}

.pricing-strip__figure {
    display: block;
    width: 100%;
    padding: 1rem 1.2rem;
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    background: var(--glass-highlight);
}

.pricing-strip__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-variant-numeric: tabular-nums;
}

.pricing-strip__table caption {
    padding: 0 0 0.65rem;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-gold);
}

.pricing-strip__table th,
.pricing-strip__table td {
    padding: 0.58rem 0;
    border-top: 1px solid var(--glass-border);
    line-height: 1.25;
}

.pricing-strip__table th {
    width: 42%;
    padding-right: 0.5rem;
    text-align: left;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted);
}

.pricing-strip__table td {
    text-align: right;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--text-main);
}

.pricing-strip__table tr:nth-child(2) td {
    font-size: 1.05rem;
    color: var(--accent-gold);
}

.pricing-strip__first-pass {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: center;
    column-gap: 0.6rem;
    margin: 0.75rem 0 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid var(--glass-border);
    text-align: center;
}

.pricing-strip__first-pass span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.08rem;
}

.pricing-strip__first-pass b {
    color: var(--text-main);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}

.pricing-strip__first-pass small {
    color: var(--text-muted);
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.pricing-strip__first-pass strong {
    color: var(--accent-start);
    font-size: 2.25rem;
    letter-spacing: -0.05em;
    line-height: 0.9;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .pricing-strip__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 3rem;
        padding: 3rem;
    }

    .pricing-strip__copy {
        flex: 1 1 auto;
    }

    .pricing-strip__figure {
        flex: 0 1 22rem;
        max-width: 22rem;
    }

    .pricing-strip__title {
        font-size: 2.4rem;
    }
}

/* ============================================================
   FLATTENED FROM tropic-noir.css §4 (CTA SYSTEM) — relocated verbatim
   2026-07-28 as step 1 of the flattening workstream (System/flatten/).
   Selectors intentionally unchanged: the :is() scope carries the
   specificity that beats the legacy body.home-page button rules above.
   Step 2 will consolidate those legacy layers into this block.
   ============================================================ */

/* --------------------------------------------------------------------------
   4. CTA SYSTEM — three tiers, no glow, no rotating border
   Tier 1: sunset gradient (coral to amber), ink text — one loud CTA
   per viewport. Tier 2: soft coral tint that fills on engagement.
   Tier 3: hairline marks. The trial submit is ink-on-champagne.
   -------------------------------------------------------------------------- */
/* Tier 1 — the gradient parks at its coral end and glides toward amber
   on hover (background-image cannot transition; background-position can) */
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .btn-hero-primary,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .guides-confidence .btn-primary,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .guides-first-step__actions .btn-primary,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .cta-filled {
    background: var(--cta-grad);
    background-size: 160% 100%;
    background-position: 0% 50%;
    border: 1px solid transparent;
    border-radius: var(--cta-radius);
    color: var(--cta-ink);
    box-shadow: inset 0 -2px 0 var(--cta-base-rest);
    text-shadow: none;
    outline: 1px solid transparent;
    outline-offset: 3px;
    transition: background-position 0.3s ease, box-shadow 0.25s ease, outline-color 0.25s ease, color 0.25s ease;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .btn-hero-primary:hover,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .btn-hero-primary:focus-visible,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .guides-confidence .btn-primary:hover,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .guides-confidence .btn-primary:focus-visible,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .guides-first-step__actions .btn-primary:hover,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .guides-first-step__actions .btn-primary:focus-visible,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .cta-filled:hover,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .cta-filled:focus-visible {
    background-position: 100% 50%;
    color: var(--cta-ink);
    box-shadow: inset 0 -2px 0 var(--cta-base-hover);
}

/* Tier 2 — header pill steps down so the hero owns the fold; the full
   gradient is the reward for hover/focus */
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .btn-header-cta {
    background: var(--cta-soft-bg);
    border: 1px solid var(--cta-soft-border);
    border-radius: var(--cta-radius-sm);
    color: var(--cta-soft-text);
    box-shadow: inset 0 -2px 0 var(--cta-base-soft);
    text-shadow: none;
    outline: 1px solid transparent;
    outline-offset: 3px;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, outline-color 0.25s ease;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .btn-header-cta:hover,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .btn-header-cta:focus-visible {
    background: var(--cta-grad);
    background-size: 160% 100%;
    background-position: 0% 50%;
    border-color: transparent;
    color: var(--cta-ink);
    box-shadow: inset 0 -2px 0 var(--cta-base-hover);
}

/* Trial submit — ink on champagne: the darkest element on the light
   island, with a small sunset arrow */
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .btn-submit {
    background: var(--cta-submit-bg);
    border: 1px solid transparent;
    border-radius: var(--cta-radius);
    min-height: 3.5rem;
    color: var(--cta-submit-text);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35);
    text-shadow: none;
    outline: 1px solid transparent;
    outline-offset: 3px;
    transition: background-color 0.25s ease, box-shadow 0.25s ease, outline-color 0.25s ease;
}

/* The sheen layer follows the new corner radius */
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .btn-submit::before {
    border-radius: calc(var(--cta-radius) - 1px);
}

/* style.css already draws the arrow chip; the glyph turns sunset coral
   and the chip squares up to match the planted shape */
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .btn-submit::after {
    color: #A48BFB;
    border-color: rgba(164, 139, 251, 0.45);
    border-radius: var(--cta-radius-sm);
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .btn-submit:hover,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .btn-submit:focus-visible {
    background: var(--cta-submit-bg-hover);
    color: var(--cta-submit-text);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.55);
}

/* Kill the conic rotating border everywhere on the homepage */
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .btn-header-cta::before,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .btn-hero-primary::before,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .home-hero__actions .btn-hero-primary::before,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .home-hero__panel-actions .btn-hero-primary::before,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .btn-rotating-border::before,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .btn-header-cta::after,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .btn-hero-primary::after {
    content: none;
    animation: none;
}

/* Secondary buttons: transparent + brass hairline + champagne text */
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .btn-hero-secondary,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .btn-header-secondary,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .guides-confidence .btn-secondary,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .cta-outline {
    background: transparent;
    border: 1px solid rgba(159, 168, 255, 0.45);
    border-radius: var(--cta-radius);
    color: #F0F0FA;
    box-shadow: none;
    text-shadow: none;
}

:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .btn-hero-secondary:hover,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .btn-hero-secondary:focus-visible,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .btn-header-secondary:hover,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .btn-header-secondary:focus-visible,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .guides-confidence .btn-secondary:hover,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .guides-confidence .btn-secondary:focus-visible,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .cta-outline:hover,
:is(body.home-page, body.contact-page, body.events-page, body.blog-page, body.guide-page, body.tropic) .cta-outline:focus-visible {
    background: rgba(159, 168, 255, 0.1);
    border-color: #9FA8FF;
    color: #F0F0FA;
    transform: none;
}


/* ==========================================================================
   Skip link (keyboard accessibility)
   First tab stop on every page; visually hidden until keyboard focus, then
   appears as a pill in the top-left and jumps past the header to #main-content.
   ========================================================================== */

.skip-link {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 20001;
    padding: 12px 22px;
    border-radius: 30px;
    background: var(--bg-elevated, #0A1030);
    color: var(--text-main, #F0F0FA);
    border: 1px solid var(--glass-border, rgba(240, 240, 250, 0.3));
    box-shadow: var(--shadow-soft, 0 8px 24px rgba(0, 0, 0, 0.35));
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transform: translateY(calc(-100% - 24px));
}

.skip-link:focus-visible {
    transform: translateY(0);
}


/* ==========================================================================
   AVIF picture wrappers
   <picture> exists only to offer AVIF sources; display: contents removes the
   wrapper from layout so the inner img keeps behaving as the direct flex/grid
   child it was before wrapping. Do not style picture elements directly.
   ========================================================================== */

picture {
    display: contents;
}