/* ==================================================
   MAIN.CSS - CLEAN VERSION
   Edit values only in :root
================================================== */

:root {
    /* =========================
       BRAND COLORS
    ========================= */
    --color-dark: #000008;
    --color-red: #de242f;
    --color-red-hover: #b91c26;
    --color-light: #faf9fe;
    --color-white: #ffffff;

    --color-bg: var(--color-light);
    --color-bg-dark: var(--color-dark);
    --color-bg-alt: #f1f0f5;
    --color-text: var(--color-dark);
    --color-text-muted: #666670;
    --color-text-light: var(--color-light);
    --color-primary: var(--color-red);
    --color-primary-hover: var(--color-red-hover);
    --color-border: rgba(0, 0, 8, 0.14);
    --color-border-light: rgba(250, 249, 254, 0.18);

    /* =========================
       FONTS
    ========================= */
    --font-main: "Inter", Arial, sans-serif;
    --font-heading: "Oswald", Arial, sans-serif;
    --font-button: "Oswald", Arial, sans-serif;

    --font-xs: 12px;
    --font-sm: 14px;
    --font-base: 16px;
    --font-md: 20px;
    --font-lg: 28px;
    --font-xl: 44px;
    --font-xxl: 68px;

    /* Site logo (header/footer) */
    --site-logo-max-width-desktop: 152px;
    --site-logo-max-height-desktop: 20px;
    --site-logo-max-width-mobile: 120px;
    --site-logo-max-height-mobile: 20px;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --letter-normal: 0px;
    --letter-small: 0.4px;
    --letter-medium: 1px;
    --letter-large: 2px;

    /* =========================
       GLOBAL TYPOGRAPHY
    ========================= */
    --global-body-font-family: var(--font-main);
    --global-heading-font-family: var(--font-heading);
    --global-button-font-family: var(--font-button);
    --global-body-font-size: var(--font-base);
    --global-body-font-weight: var(--weight-regular);
    --global-body-line-height: 1.7;
    --global-body-letter-spacing: 0px;

    --global-heading-font-weight: 700;
    --global-heading-line-height: 1.05;
    --global-heading-letter-spacing: 0.6px;
    --global-heading-text-transform: uppercase;

    --global-h1-size-desktop: clamp(2.5rem, 5vw, 4.25rem);
    --global-h1-size-tablet: clamp(2.25rem, 4.5vw, 3.5rem);
    --global-h1-size-mobile: clamp(1.25rem, 5.5vw, 1.5rem);
    --global-h2-size-desktop: clamp(1.375rem, 2.2vw, 1.75rem);
    --global-h2-size-tablet: clamp(1.3125rem, 2vw, 1.625rem);
    --global-h2-size-mobile: clamp(1.0625rem, 4.2vw, 1.3125rem);
    --global-h3-size-desktop: clamp(1.125rem, 1.6vw, 1.375rem);
    --global-h3-size-mobile: clamp(1.0625rem, 3.8vw, 1.25rem);

    --global-text-size-desktop: 16px;
    --global-text-size-mobile: clamp(13px, 3.2vw, 15px);
    --global-text-line-height: var(--site-line-height-body);
    --global-text-letter-spacing: 0px;
    --global-text-font-weight: 400;

    --global-eyebrow-size: 15px;
    --global-eyebrow-font-weight: 700;
    --global-eyebrow-line-height: 1;
    --global-eyebrow-letter-spacing: 2px;
    --global-eyebrow-text-transform: uppercase;
    --global-eyebrow-margin-bottom: 0;
    --global-eyebrow-line-width: clamp(24px, 5vw, 48px);
    --global-eyebrow-line-thickness: 1px;
    --global-eyebrow-line-color: rgba(222, 36, 47, 0.48);
    --global-eyebrow-line-gap: clamp(10px, 2vw, 18px);

    --global-link-size: 13px;
    --global-link-letter-spacing: 1px;
    --global-link-font-weight: 700;
    --global-link-text-transform: uppercase;

    --global-button-letter-spacing: 1px;
    --global-button-font-weight: 700;
    --global-button-text-transform: uppercase;

    /* =========================
       SECTION FONT FAMILIES
    ========================= */
    --hero-font-family: var(--font-main);
    --hero-title-font-family: var(--font-heading);
    --programs-font-family: var(--font-main);
    --programs-title-font-family: var(--font-heading);
    --about-font-family: var(--font-main);
    --about-title-font-family: var(--font-heading);
    --bmi-font-family: var(--font-main);
    --bmi-title-font-family: var(--font-heading);
    --location-font-family: var(--font-main);
    --location-title-font-family: var(--font-heading);
    --faq-font-family: var(--font-main);
    --faq-title-font-family: var(--font-heading);
    --blog-font-family: var(--font-main);
    --blog-title-font-family: var(--font-heading);
    --programs-page-font-family: var(--font-main);
    --programs-page-title-font-family: var(--font-heading);
    --contact-page-font-family: var(--font-main);
    --contact-page-title-font-family: var(--font-heading);
    --blog-page-font-family: var(--font-main);
    --blog-page-title-font-family: var(--font-heading);
    --legal-font-family: var(--font-main);
    --legal-title-font-family: var(--font-heading);
    --footer-font-family: var(--font-main);
    --footer-heading-font-family: var(--font-heading);

    /* =========================
       GLOBAL LAYOUT
    ========================= */
    --site-container-max: 1240px;
    --site-container-padding-desktop: 32px;
    --site-container-padding-mobile: 18px;
    --site-section-padding-y-desktop: 96px;
    --site-section-padding-y-mobile: 64px;
    --site-section-padding-y-compact-mobile: 48px;
    --site-section-gap-desktop: 0px;
    --site-section-gap-mobile: 0px;
    --site-section-header-max-width: 720px;
    --site-grid-gap-desktop: 28px;
    --site-grid-gap-mobile: 18px;
    --site-card-padding-desktop: 32px;
    --site-card-padding-mobile: 24px;
    --site-card-inner-gap-desktop: 16px;
    --site-card-inner-gap-mobile: 14px;
    --site-button-min-height-desktop: 48px;
    --site-button-min-height-mobile: 48px;
    --site-button-padding-y: 14px;
    --site-button-padding-x: 24px;
    --booking-panel-head-padding-y: 16px;
    --booking-panel-head-padding-x: 20px;
    --booking-panel-view-padding-y: 24px;
    --booking-panel-view-padding-x: 20px;
    --booking-panel-stack-gap: var(--section-eyebrow-heading-gap-desktop);
    --booking-panel-inner-gap: var(--section-heading-text-gap-desktop);
    --booking-panel-block-gap: var(--section-text-content-gap-desktop);
    --site-line-height-heading-large: 1.02;
    --site-line-height-heading: 1.1;
    --site-line-height-body: 1.65;
    --site-line-height-small: 1.5;
    --site-photo-opacity: 0.88;
    --site-photo-opacity-hover: 0.96;

    --container-width: var(--site-container-max);
    --container-narrow-width: 720px;
    --container-padding: var(--site-container-padding-desktop);
    --section-padding-desktop: var(--site-section-padding-y-desktop);
    --section-padding-tablet: 80px;
    --section-padding-mobile: var(--site-section-padding-y-mobile);
    --site-main-min-height: 60vh;
    --text-center-align: center;
    --section-alt-bg: var(--color-bg-alt);

    /* =========================
       GLOBAL BEHAVIOR
    ========================= */
    --body-line-height: var(--global-body-line-height);
    --body-overflow-x: hidden;
    --menu-open-body-overflow: hidden;
    --html-scroll-behavior: auto;
    --transition-main: 0.25s ease;
    --transition-header: 0.28s ease;
    --hover-lift-small: translateY(-2px);
    --hover-lift-medium: translateY(-3px);
    --hover-arrow-move: translateX(5px);
    --z-index-header: 999;
    --z-index-mobile-menu: 998;
    --z-index-dropdown: 1001;
    --z-index-bg: 1;
    --z-index-content: 2;
    --z-index-overlay-content: 3;

    /* =========================
       RESET / MEDIA
    ========================= */
    --global-box-sizing: border-box;
    --global-zero: 0;
    --button-cursor: pointer;
    --list-style-position: inside;
    --anchor-text-decoration: none;
    --form-font: inherit;
    --image-display: block;
    --image-width: 100%;
    --image-height-auto: auto;
    --image-object-fit-cover: cover;

    /* =========================
       BUTTONS
    ========================= */
    --button-bg: var(--color-red);
    --button-text: var(--color-light);
    --button-bg-hover: var(--color-light);
    --button-text-hover: var(--color-dark);
    --button-border: var(--color-red);
    --button-border-hover: var(--color-light);
    --button-radius: 12px;
    --button-padding: var(--site-button-padding-y) var(--site-button-padding-x);
    --button-min-height: var(--site-button-min-height-desktop);
    --button-font-size: 12px;
    --button-font-weight: var(--global-button-font-weight);
    --button-letter-spacing: var(--global-button-letter-spacing);
    --button-line-height: 1;
    --button-white-space: nowrap;
    --button-text-transform: var(--global-button-text-transform);

    --button-ghost-bg: transparent;
    --button-ghost-text: var(--color-light);
    --button-ghost-bg-hover: transparent;
    --button-ghost-text-hover: var(--color-red);
    --button-ghost-border: transparent;
    --button-ghost-border-hover: transparent;
    --button-ghost-padding: 10px 0;

    /* =========================
       HEADER
       Desktop order: logo / menu / socials / language / phone + email
    ========================= */
    --header-height: 86px;
    --header-position: fixed;
    --header-top: 0;
    --header-left: 0;
    --header-width: 100%;
    --header-bg-static: transparent;
    --header-bg-scrolled: var(--color-dark);
    --header-text-static: var(--color-light);
    --header-text-scrolled: var(--color-light);
    --header-border-static: transparent;
    --header-border-scrolled: rgba(250, 249, 254, 0.12);
    --header-shadow-scrolled: 0 8px 28px rgba(0, 0, 8, 0.22);

    --header-grid-template: auto 1fr auto;
    --header-container-gap: 32px;
    --header-logo-justify: start;
    --header-nav-justify: center;
    --header-actions-justify: end;

    --header-logo-width: 160px;
    --header-logo-max-height: 58px;
    --header-logo-text-size: 24px;

    --header-menu-font-size: 14px;
    --header-menu-font-weight: 700;
    --header-menu-letter-spacing: 1px;
    --header-menu-gap: 60px;
    --header-menu-link-padding: 8px 0;
    --header-menu-underline-height: 2px;
    --header-menu-underline-color: var(--color-red);
    --header-menu-text-transform: uppercase;

    --header-actions-gap: 34px;
    --header-actions-flex-wrap: nowrap;
    --header-actions-white-space: nowrap;

    --header-contact-gap: 22px;
    --header-contact-link-gap: 8px;
    --header-contact-icon-size: 18px;
    --header-contact-text-size: 13px;
    --header-contact-text-weight: 600;
    --header-contact-letter-spacing: 0.3px;
    --header-contact-color: var(--color-light);
    --header-contact-hover-color: var(--color-red);
    --header-contact-white-space: nowrap;
    --header-contact-min-width: max-content;

    --header-social-size: 24px;
    --header-social-gap: 18px;
    --header-social-display: flex;
    --header-social-color: currentColor;
    --header-social-hover-color: var(--color-red);
    --header-social-hover-transform: var(--hover-lift-small);

    /* =========================
       LANGUAGE SWITCHER
    ========================= */
    --language-current-gap: 7px;
    --language-current-padding: 6px 0;
    --language-current-color: var(--color-light);
    --language-current-hover-color: var(--color-red);
    --language-flag-width: 22px;
    --language-code-size: 12px;
    --language-code-weight: 700;
    --language-code-letter-spacing: 0.8px;
    --language-arrow-size: 14px;
    --language-dropdown-bg: var(--color-dark);
    --language-dropdown-border: rgba(222, 36, 47, 0.55);
    --language-dropdown-width: 350px;
    --language-dropdown-top: calc(100% + 14px);
    --language-dropdown-padding: 10px;
    --language-dropdown-link-padding: 10px;
    --language-dropdown-link-gap: 9px;
    --language-dropdown-link-color: var(--color-light);
    --language-dropdown-link-hover-color: var(--color-red);
    --language-dropdown-link-hover-bg: rgba(250, 249, 254, 0.06);
    --language-dropdown-font-size: 13px;

    /* =========================
       MOBILE HEADER / MENU
    ========================= */
    --mobile-header-height: 85px;
    --mobile-logo-width: clamp(108px, 32vw, 142px);
    --mobile-menu-bg: var(--color-dark);
    --mobile-menu-text: var(--color-light);
    --mobile-menu-padding: 30px 24px;
    --mobile-menu-link-size: 18px;
    --mobile-menu-link-gap: 13px;
    --mobile-menu-link-font-family: var(--font-heading);
    --mobile-menu-link-font-weight: var(--weight-bold);
    --mobile-menu-link-letter-spacing: var(--letter-medium);
    --mobile-menu-link-text-transform: uppercase;
    --mobile-menu-link-line-height: 1.1;
    --mobile-menu-link-hover-color: var(--color-red);
    --mobile-menu-panel-width: 100%;
    --mobile-menu-panel-hidden-transform: translateY(-110%);
    --mobile-menu-panel-open-transform: translateY(0);
    --mobile-menu-panel-hidden-opacity: 0;
    --mobile-menu-panel-open-opacity: 1;
    --mobile-menu-panel-bg: rgba(10, 8, 12, 0.48);
    --mobile-menu-panel-border: 1px solid var(--color-border-light);
    --mobile-extra-margin-top: 0;
    --mobile-extra-padding-top: 24px;
    --mobile-extra-border: rgba(250, 249, 254, 0.14);
    --mobile-contact-gap: 13px;
    --mobile-contact-link-gap: 12px;
    --mobile-contact-icon-size: 15px;
    --mobile-contact-size: 15px;
    --mobile-contact-color: rgba(250, 249, 254, 0.78);
    --mobile-contact-hover-color: var(--color-red);
    --mobile-contact-links-margin-bottom: 24px;
    --mobile-language-switcher-display: inline-flex;
    --mobile-language-switcher-margin-top: 0px;
    --mobile-language-dropdown-left: 0;
    --mobile-language-dropdown-right: auto;
    --mobile-header-social-size: 27px;
    --mobile-header-social-gap: 13px;
    --mobile-header-social-color: currentColor;
    --mobile-header-social-hover-color: var(--color-red);
    --mobile-header-social-hover-transform: var(--hover-lift-small);
    --mobile-header-social-display: flex;
    --mobile-menu-toggle-width: 32px;
    --mobile-menu-toggle-height: 24px;
    --mobile-menu-toggle-line-height: 2px;
    --mobile-menu-toggle-line-gap: 8px;
    --mobile-menu-toggle-color: currentColor;
    --mobile-menu-toggle-bg: transparent;
    --mobile-menu-toggle-border: 0;
    --mobile-menu-toggle-padding: 0;
    --mobile-menu-toggle-first-line-transform-open: translateY(10px) rotate(45deg);
    --mobile-menu-toggle-middle-line-opacity-open: 0;
    --mobile-menu-toggle-last-line-transform-open: translateY(-10px) rotate(-45deg);
    --mobile-menu-toggle-display-mobile: block;

    /* =========================
       HERO
    ========================= */
    --hero-min-height-desktop: 100vh;
    --hero-min-height-mobile: 100svh;
    --hero-bg: var(--color-dark);
    --hero-color: var(--color-light);
    --hero-content-width: 760px;
    --hero-content-align: flex-start;
    --hero-text-align: center;

    /* =========================
       GLOBAL EFFECTS — photo overlays (all sections/pages)
    ========================= */
    --global-image-overlay-color: #000008;
    --global-image-overlay-opacity: 0.46;
    --global-image-overlay-opacity-mobile: 0.42;
    --global-image-overlay-opacity-hover: 0.36;
    --global-image-overlay-opacity-card: 0.50;

    /* ==================================================
       PR1ME FLOW — minimal moving lines (no pipelines)
    ================================================== */
    --flow-element-count-desktop: 12;
    --flow-element-count-tablet: 10;
    --flow-element-count-mobile: 8;
    --flow-line-alpha: 0.14;
    --flow-red-line-alpha: 0.24;
    --flow-arc-alpha: 0.2;
    --flow-line-width: 1;
    --flow-red-line-width: 1.35;
    --flow-line-glow: 0.38;
    --flow-line-speed: 0.011;
    --flow-travel-speed: 0.0011;
    --flow-trail-length: 0.22;
    --flow-track-alpha: 0.32;
    --flow-drift-desktop: 52;
    --flow-drift-tablet: 40;
    --flow-drift-mobile: 30;
    --flow-drift-secondary: 0.42;
    --flow-motion-pulse: 0.28;
    --flow-arc-spin: 1.35;
    --flow-shield-center: 0.16;
    --flow-canvas-blur: 0.35px;
    --flow-line-color-white: rgba(250, 249, 254, 1);
    --flow-line-color-red: rgba(222, 36, 47, 1);
    --flow-overlay-column-width: min(92%, 1640px);
    --flow-overlay-column-height: 68%;

    --flow-line-count-desktop: var(--flow-element-count-desktop);
    --flow-line-count-tablet: var(--flow-element-count-tablet);
    --flow-line-count-mobile: var(--flow-element-count-mobile);

    /* ==================================================
       SHIFT CANVAS (unused when pipeline active)
    ================================================== */
    --shift-circle-count-desktop: 120;
    --shift-circle-count-mobile: 95;
    --shift-blur-desktop: 50;
    --shift-blur-mobile: 54;
    --shift-base-speed: 0.035;
    --shift-range-speed: 0.3;
    --shift-base-ttl: 260;
    --shift-range-ttl: 320;
    --shift-base-radius: 110;
    --shift-range-radius: 190;
    --shift-base-radius-mobile: 100;
    --shift-range-radius-mobile: 175;
    --shift-base-hue: 355;
    --shift-hue-range: 14;
    --shift-hue-step: 0.07;
    --shift-noise-x: 0.0005;
    --shift-noise-y: 0.0005;
    --shift-noise-z: 0.0005;
    --shift-saturation: 78;
    --shift-lightness: 26;
    --shift-saturation-mobile: 82;
    --shift-lightness-mobile: 22;
    --shift-fill-alpha: 0.58;
    --shift-fill-alpha-mobile: 0.65;
    --shift-bg-h: 0;
    --shift-bg-s: 0;
    --shift-bg-l: 2;
    --shift-bg-h-mobile: 355;
    --shift-bg-s-mobile: 35;
    --shift-bg-l-mobile: 2;

    /* ==================================================
       AURORA SILK — legacy aliases + overlay tokens
    ================================================== */
    --aurora-bg-base: #000008;
    --aurora-bg-red: #de242f;
    --aurora-bg-light: #faf9fe;
    --aurora-bg-deep: #030106;
    --aurora-bg-mid: #060208;
    --aurora-bg-warm: #0c0408;
    --aurora-red-rgb: 222, 36, 47;
    --aurora-light-rgb: 250, 249, 254;
    --aurora-accent-violet-rgb: 88, 52, 132;
    --aurora-accent-blue-rgb: 42, 68, 148;

    --aurora-base-gradient-angle: 152deg;
    --aurora-canvas-width: 128%;
    --aurora-canvas-min-height: 100%;
    --aurora-overlay-opacity: 0.62;
    --aurora-overlay-vignette: 0.42;
    --aurora-overlay-center: 0.58;
    --aurora-overlay-edge-width: 11%;

    --aurora-blob-opacity: 0.92;
    --aurora-blob-blur: 28px;
    --aurora-blob-red-alpha: 0.52;
    --aurora-blob-deep-alpha: 0.38;
    --aurora-blob-highlight-alpha: 0.22;
    --aurora-blob-violet-alpha: 0.16;
    --aurora-blob-blue-alpha: 0.1;
    --aurora-blob-rim-alpha: 0.14;
    --aurora-flow-ease: cubic-bezier(0.45, 0.12, 0.55, 0.88);
    --aurora-blob-speed-primary: 24s;
    --aurora-blob-speed-secondary: 28s;
    --aurora-blob-speed-tertiary: 26s;
    --aurora-blob-drift: 96px;

    --aurora-highlight-opacity: 0.55;
    --aurora-highlight-blur: 8px;
    --aurora-highlight-light-alpha: 0.28;
    --aurora-highlight-red-alpha: 0.18;
    --aurora-highlight-speed-1: 20s;
    --aurora-highlight-speed-2: 24s;
    --aurora-highlight-drift: 72px;

    --aurora-float-opacity: 0.32;
    --aurora-float-blur: 42px;
    --aurora-float-drift: 56px;
    --aurora-float-speed-1: 22s;
    --aurora-float-speed-2: 26s;
    --aurora-float-speed-3: 30s;

    --aurora-mesh-blur: 64px;
    --aurora-mesh-opacity: 0.38;
    --aurora-mesh-speed: 32s;
    --aurora-mesh-drift: 80px;
    --aurora-mesh-red-alpha: 0.14;
    --aurora-mesh-violet-alpha: 0.08;
    --aurora-mesh-blue-alpha: 0.06;

    --aurora-curtain-blur: 80px;
    --aurora-curtain-opacity: 0.42;
    --aurora-curtain-width: 38%;
    --aurora-curtain-height: 118%;
    --aurora-curtain-red-alpha: 0.22;
    --aurora-curtain-speed-left: 28s;
    --aurora-curtain-speed-right: 32s;
    --aurora-curtain-drift: 88px;

    --aurora-beam-opacity: 0.26;
    --aurora-beam-blur: 28px;
    --aurora-beam-width: 140%;
    --aurora-beam-height: 12%;
    --aurora-beam-red-alpha: 0.24;
    --aurora-beam-speed-1: 18s;
    --aurora-beam-speed-2: 22s;
    --aurora-beam-speed-3: 26s;
    --aurora-beam-drift: 80px;

    --aurora-orb-blur: 72px;
    --aurora-orb-opacity: 0.4;
    --aurora-orb-red-alpha: 0.26;
    --aurora-orb-light-alpha: 0.1;
    --aurora-orb-drift: 72px;
    --aurora-orb-speed-1: 26s;
    --aurora-orb-speed-2: 30s;
    --aurora-orb-speed-3: 24s;
    --aurora-orb-speed-4: 32s;
    --aurora-orb-speed-5: 28s;
    --aurora-orb-1-width: 48%;
    --aurora-orb-1-height: 40%;
    --aurora-orb-1-top: 4%;
    --aurora-orb-1-left: 62%;
    --aurora-orb-2-width: 44%;
    --aurora-orb-2-height: 36%;
    --aurora-orb-2-top: 8%;
    --aurora-orb-2-left: -18%;
    --aurora-orb-3-width: 40%;
    --aurora-orb-3-height: 34%;
    --aurora-orb-3-top: 62%;
    --aurora-orb-3-left: 78%;
    --aurora-orb-4-width: 38%;
    --aurora-orb-4-height: 34%;
    --aurora-orb-4-top: 18%;
    --aurora-orb-4-left: 22%;
    --aurora-orb-5-width: 32%;
    --aurora-orb-5-height: 28%;
    --aurora-orb-5-top: 72%;
    --aurora-orb-5-left: 8%;

    --aurora-silk-opacity: 0.34;
    --aurora-silk-blur: 36px;
    --aurora-silk-speed-1: 22s;
    --aurora-silk-speed-2: 26s;
    --aurora-silk-speed-3: 20s;
    --aurora-silk-speed-4: 28s;
    --aurora-silk-drift: 80px;
    --aurora-silk-red-alpha: 0.2;
    --aurora-silk-light-alpha: 0.12;

    --aurora-accent-opacity: 0.2;
    --aurora-accent-blur: 64px;
    --aurora-accent-violet-alpha: 0.18;
    --aurora-accent-blue-alpha: 0.14;
    --aurora-accent-speed: 24s;
    --aurora-accent-drift: 90px;

    --aurora-pointer-x: 0;
    --aurora-pointer-y: 0;

    --aurora-mobile-canvas-width: 148%;
    --aurora-mobile-blob-opacity: 0.94;
    --aurora-mobile-blob-blur: 22px;
    --aurora-mobile-blob-drift: 80px;
    --aurora-mobile-float-drift: 44px;
    --aurora-mobile-highlight-opacity: 0.5;
    --aurora-mobile-curtain-width: 48%;
    --aurora-mobile-curtain-opacity: 0.48;
    --aurora-mobile-curtain-blur: 56px;
    --aurora-mobile-mesh-opacity: 0.42;
    --aurora-mobile-orb-scale: 1;
    --aurora-mobile-orb-opacity: 0.46;
    --aurora-mobile-orb-blur: 48px;
    --aurora-mobile-orb-drift: 64px;
    --aurora-mobile-silk-opacity: 0.38;
    --aurora-mobile-silk-blur: 28px;
    --aurora-mobile-silk-drift: 64px;
    --aurora-mobile-beam-opacity: 0.28;
    --aurora-mobile-overlay-opacity: 0.58;
    --aurora-mobile-overlay-center: 0.54;
    --aurora-mobile-accent-opacity: 0.2;
    --aurora-mobile-speed-factor: 0.95;

    --hero-aurora-readability-strong: rgba(0, 0, 8, 0.62);
    --hero-aurora-readability-mid: rgba(0, 0, 8, 0.36);
    --hero-aurora-readability-soft: rgba(0, 0, 8, 0.14);
    --hero-aurora-readability-red: rgba(222, 36, 47, 0.06);
    --hero-aurora-readability-size-x: 92%;
    --hero-aurora-readability-size-y: 72%;
    --hero-aurora-readability-pos-x: 50%;
    --hero-aurora-readability-pos-y: 42%;

    /* Legacy flow aliases (admin / older rules) */
    --flow-bg-base: var(--aurora-bg-base);
    --flow-bg-red: var(--aurora-bg-red);
    --flow-bg-deep-red: var(--aurora-bg-deep);
    --flow-overlay-opacity: var(--aurora-overlay-opacity);
    --flow-ribbon-opacity: var(--aurora-silk-opacity);
    --flow-ribbon-blur: var(--aurora-silk-blur);
    --flow-ribbon-speed: var(--aurora-silk-speed-1);
    --flow-ribbon-distance: var(--aurora-silk-drift);
    --flow-ribbon-scale: 1;
    --flow-streak-opacity: var(--aurora-silk-opacity);
    --flow-streak-speed: var(--aurora-silk-speed-2);
    --flow-streak-distance: var(--aurora-silk-drift);
    --flow-particle-opacity: var(--aurora-orb-opacity);
    --flow-particle-speed: var(--aurora-orb-speed-3);
    --flow-particle-size: 4px;
    --flow-glow-opacity: var(--aurora-orb-opacity);
    --flow-glow-speed: var(--aurora-orb-speed-1);
    --flow-glow-size: 78%;
    --flow-interaction-strength: var(--aurora-interaction-strength);
    --flow-pointer-x: var(--aurora-pointer-x);
    --flow-pointer-y: var(--aurora-pointer-y);
    --flow-glass-hover-glow: 0.35;
    --flow-mobile-ribbon-opacity: var(--aurora-mobile-silk-opacity);
    --flow-mobile-ribbon-speed: calc(var(--aurora-orb-speed-1) * var(--aurora-mobile-speed-factor));
    --flow-mobile-ribbon-distance: var(--aurora-mobile-silk-drift);
    --flow-mobile-ribbon-scale: var(--aurora-mobile-orb-scale);
    --flow-mobile-glow-opacity: var(--aurora-mobile-orb-opacity);
    --flow-mobile-streak-opacity: var(--aurora-mobile-silk-opacity);
    --flow-mobile-streak-distance: var(--aurora-mobile-silk-drift);
    --flow-mobile-particle-opacity: var(--aurora-mobile-orb-opacity);
    --flow-mobile-blur: var(--aurora-mobile-orb-blur);
    --flow-mobile-overlay-opacity: var(--aurora-mobile-overlay-opacity);
    --flow-bg-light: var(--aurora-bg-light);
    --flow-bg-burgundy: var(--aurora-bg-mid);
    --flow-ribbon-color: var(--aurora-bg-red);
    --flow-streak-color: var(--aurora-bg-red);
    --flow-ambient-opacity: var(--aurora-orb-opacity);
    --flow-mobile-speed: calc(var(--aurora-orb-speed-1) * var(--aurora-mobile-speed-factor));
    --flow-mobile-distance: var(--aurora-mobile-orb-drift);
    --site-bg-base: var(--aurora-bg-base);
    --site-bg-red: var(--aurora-bg-red);
    --site-bg-base-dark: var(--flow-bg-base);
    --site-bg-base-black: var(--flow-bg-base);
    --site-bg-base-red-deep: var(--flow-bg-deep-red);
    --site-bg-base-red-mid: var(--flow-bg-burgundy);
    --site-bg-base-red-core: #320812;
    --site-bg-base-red-bright: #5c0e1a;
    --site-bg-gradient-angle: 145deg;
    --site-bg-glow-color: var(--flow-bg-red);
    --site-bg-glow-color-rgb: 222, 36, 47;
    --site-bg-glow-opacity: var(--flow-glow-opacity);
    --site-bg-overlay-opacity: var(--flow-overlay-opacity);
    --site-bg-section-visibility: 1;
    --site-bg-animation-enabled: 1;
    --site-bg-flow-distance: var(--flow-ribbon-distance);
    --site-bg-line-speed: var(--flow-ribbon-speed);
    --site-bg-node-speed: var(--flow-ribbon-speed);
    --site-bg-beam-speed: var(--flow-ribbon-speed);
    --site-bg-mobile-glow-opacity: var(--flow-mobile-glow-opacity);
    --site-bg-mobile-flow-distance: var(--flow-mobile-ribbon-distance);

    --site-parallax-enabled: 0;
    --site-parallax-strength-desktop: 22px;
    --site-parallax-strength-mobile: 0px;
    --site-bg-scroll-parallax-enabled: 0;
    --site-bg-parallax-depth-slow: 0.018;
    --site-bg-parallax-depth-mid: 0.038;
    --site-bg-parallax-depth-fast: 0.058;
    --site-bg-parallax-drift-x: 0.08;
    --site-bg-parallax-offset: 0px;
    --site-bg-parallax-offset-slow: 0px;
    --site-bg-parallax-offset-mid: 0px;
    --site-bg-parallax-offset-fast: 0px;
    --site-bg-parallax-offset-drift: 0px;

    /* ==================================================
       PREMIUM GLASS UI SETTINGS
    ================================================== */
    --premium-glass-bg: rgba(0, 0, 8, 0.42);
    --premium-glass-bg-scroll: rgba(0, 0, 8, 0.58);
    --premium-glass-opacity: 0.42;
    --premium-glass-blur: 20px;
    --premium-glass-blur-saturate: 160%;
    --premium-glass-border-color: rgba(250, 249, 254, 0.14);
    --premium-glass-border-opacity: 0.14;
    --premium-glass-border-radius: 28px;
    --premium-glass-shadow: 0 20px 56px rgba(0, 0, 0, 0.42), 0 2px 0 rgba(255, 255, 255, 0.06) inset;
    --premium-glass-inner-highlight: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 28%, transparent 52%);
    --premium-glass-shine-opacity: 0.55;
    --premium-glass-reflection: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.04) 48%, transparent 58%);
    --premium-glass-glow-intensity: 0.28;
    --premium-glass-hover-glow: 0.42;
    --premium-glass-featured-border: rgba(222, 36, 47, 0.45);
    --premium-glass-featured-glow: 0 0 40px rgba(222, 36, 47, 0.22), 0 0 72px rgba(222, 36, 47, 0.1);

    --site-glass-blur: var(--premium-glass-blur);
    --site-glass-saturate: var(--premium-glass-blur-saturate);
    --site-glass-bg: rgba(250, 249, 254, 0.04);
    --site-glass-bg-panel: rgba(0, 0, 8, 0.46);
    --site-glass-bg-strong: var(--premium-glass-bg);
    --site-glass-bg-table-head: rgba(222, 36, 47, 0.38);
    --site-glass-border: var(--premium-glass-border-color);
    --site-glass-border-featured: var(--premium-glass-featured-border);
    --site-glass-highlight: rgba(250, 249, 254, 0.18);
    --site-glass-radius: var(--premium-glass-border-radius);
    --site-faq-radius: 20px;
    --site-glass-shadow: var(--premium-glass-shadow);
    --site-glass-shadow-featured: var(--premium-glass-featured-glow), var(--premium-glass-shadow);
    --site-glass-shadow-gold: 0 0 0 1px rgba(212, 175, 55, 0.42), 0 0 48px rgba(212, 175, 55, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);

    /* ==================================================
       SCROLL GLASS EFFECT SETTINGS
    ================================================== */
    --scroll-glass-enabled: 1;
    --scroll-glass-duration: 0.55s;
    --scroll-glass-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --scroll-glass-transform-y: 0px;
    --scroll-glass-blur-idle: var(--premium-glass-blur);
    --scroll-glass-blur-active: 24px;
    --scroll-glass-opacity-idle: var(--premium-glass-opacity);
    --scroll-glass-opacity-active: 0.58;
    --scroll-glass-border-intensity: 0.32;
    --scroll-glass-border-intensity-active: 0.48;
    --scroll-glass-shadow-active: 0 24px 64px rgba(0, 0, 0, 0.48), 0 0 32px rgba(222, 36, 47, 0.12), inset 0 1px 0 rgba(250, 249, 254, 0.12);
    --scroll-glass-reduced-motion: 0;

    --site-scroll-reveal-intensity: 1;

    /* Reveal behavior */
    --section-reveal-duration-desktop: 0.9s;
    --section-reveal-duration-mobile: 0.32s;
    --section-reveal-distance-desktop: 22px;
    --section-reveal-distance-mobile: 8px;
    --section-reveal-delay-mobile: 20ms;
    --site-reveal-distance: var(--section-reveal-distance-desktop);
    --site-reveal-duration: var(--section-reveal-duration-desktop);

    /* Footer */
    --footer-bg-color: #000008;
    --footer-mobile-bottom-padding: 40px;

    /* =========================
       ABOUT PAGE (standalone)
    ========================= */
    --about-page-hero-padding-desktop: var(--programs-page-hero-padding-desktop);
    --about-page-hero-padding-mobile: var(--programs-page-hero-padding-mobile);
    --about-page-section-padding-desktop: var(--programs-page-section-padding-desktop);
    --about-page-section-padding-mobile: var(--programs-page-section-padding-mobile);
    --about-page-eyebrow-color: var(--programs-page-eyebrow-color);
    --about-page-eyebrow-size: var(--global-eyebrow-size);
    --about-page-eyebrow-weight: var(--programs-page-eyebrow-weight);
    --about-page-eyebrow-letter-spacing: var(--programs-page-eyebrow-letter-spacing);
    --about-page-eyebrow-line-height: var(--programs-page-eyebrow-line-height);
    --about-page-eyebrow-transform: var(--programs-page-eyebrow-transform);
    --about-page-eyebrow-margin-bottom: var(--programs-page-eyebrow-margin-bottom);
    --about-page-title-color: var(--programs-page-title-color);
    --about-page-title-size-desktop: var(--global-h2-size-desktop);
    --about-page-title-size-tablet: var(--global-h2-size-tablet);
    --about-page-title-size-mobile: var(--global-h2-size-mobile);
    --about-page-title-line-height: var(--programs-page-title-line-height);
    --about-page-title-letter-spacing: var(--programs-page-title-letter-spacing);
    --about-page-title-margin-bottom: var(--programs-page-title-margin-bottom);
    --about-page-subtitle-color: var(--programs-page-subtitle-color);
    --about-page-subtitle-size: var(--programs-page-subtitle-size);
    --about-page-subtitle-size-mobile: var(--programs-page-subtitle-size-mobile);
    --about-page-subtitle-line-height: var(--programs-page-subtitle-line-height);
    --about-page-subtitle-width: var(--programs-page-subtitle-width);
    --about-page-content-gap: 36px;
    --about-page-content-gap-mobile: 28px;
    --about-page-hero-min-height-desktop: 560px;
    --about-page-hero-min-height-mobile: 440px;
    --about-page-hero-actions-gap: 28px;
    --about-page-hero-actions-gap-mobile: 22px;
    --about-page-lead-max-width: 760px;
    --about-page-lead-margin-bottom: 56px;
    --about-page-lead-margin-bottom-mobile: 36px;
    --about-page-lead-color: rgba(250, 249, 254, 0.82);
    --about-page-lead-size: 19px;
    --about-page-lead-size-mobile: 16px;
    --about-page-lead-line-height: 1.65;
    --about-page-block-radius: 20px;
    --about-page-block-padding: 32px;
    --about-page-block-padding-mobile: 22px;
    --about-page-block-bg: rgba(250, 249, 254, 0.04);
    --about-page-block-border: rgba(250, 249, 254, 0.10);
    --about-page-block-title-size: var(--global-h3-size-desktop);
    --about-page-block-title-size-mobile: var(--global-h3-size-mobile);
    --about-page-block-text-color: rgba(250, 249, 254, 0.78);
    --about-page-block-text-size: 16px;
    --about-page-block-text-size-mobile: 15px;
    --about-page-block-text-line-height: 1.7;
    --about-page-section-text-align: center;

    /* =========================
       PARTNERSHIPS PAGE (standalone)
    ========================= */
    --partnerships-page-hero-padding-desktop: var(--programs-page-hero-padding-desktop);
    --partnerships-page-hero-padding-mobile: var(--programs-page-hero-padding-mobile);
    --partnerships-page-section-padding-desktop: var(--programs-page-section-padding-desktop);
    --partnerships-page-section-padding-mobile: var(--programs-page-section-padding-mobile);
    --partnerships-page-eyebrow-color: var(--programs-page-eyebrow-color);
    --partnerships-page-eyebrow-size: var(--global-eyebrow-size);
    --partnerships-page-title-color: var(--programs-page-title-color);
    --partnerships-page-title-size-desktop: var(--global-h2-size-desktop);
    --partnerships-page-title-size-mobile: var(--global-h2-size-mobile);
    --partnerships-page-subtitle-color: var(--programs-page-subtitle-color);
    --partnerships-page-subtitle-size: var(--programs-page-subtitle-size);
    --partnerships-page-subtitle-size-mobile: var(--programs-page-subtitle-size-mobile);
    --partnerships-page-grid-gap: 22px;
    --partnerships-page-grid-gap-mobile: 16px;
    --partnerships-page-grid-columns-desktop: 3;
    --partnerships-page-grid-columns-tablet: 2;
    --partnerships-page-grid-columns-mobile: 1;
    --partnerships-page-card-radius: 20px;
    --partnerships-page-card-padding: 28px;
    --partnerships-page-card-padding-mobile: 22px;
    --partnerships-page-card-bg: rgba(255, 255, 255, 0.05);
    --partnerships-page-card-border: rgba(255, 255, 255, 0.12);
    --partnerships-page-card-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
    --partnerships-page-card-logo-height: 70px;
    --partnerships-page-card-logo-height-mobile: 60px;
    --partnerships-page-card-name-size: 18px;
    --partnerships-page-card-discount-color: var(--color-red);
    --partnerships-page-card-discount-size: 16px;
    --partnerships-page-card-description-color: rgba(250, 249, 254, 0.74);
    --partnerships-page-card-description-size: 14px;
    --partnerships-page-section-text-align: center;
    --partnerships-page-intro-padding-desktop: 80px;
    --partnerships-page-intro-padding-bottom-desktop: 56px;
    --partnerships-page-intro-padding-mobile: 56px;
    --partnerships-page-intro-padding-bottom-mobile: 36px;
    --partnerships-page-lead-max-width: 760px;
    --partnerships-page-lead-margin-bottom: 48px;
    --partnerships-page-lead-margin-bottom-mobile: 32px;
    --partnerships-page-lead-color: rgba(250, 249, 254, 0.82);
    --partnerships-page-lead-size: 19px;
    --partnerships-page-lead-size-mobile: 16px;
    --partnerships-page-lead-line-height: 1.65;
    --partnerships-page-benefits-gap: 22px;
    --partnerships-page-benefits-gap-mobile: 14px;
    --partnerships-page-benefit-padding: 26px;
    --partnerships-page-benefit-bg: rgba(250, 249, 254, 0.04);
    --partnerships-page-benefit-border: rgba(250, 249, 254, 0.10);
    --partnerships-page-benefit-radius: 18px;
    --partnerships-page-benefit-title-size: 18px;
    --partnerships-page-benefit-text-size: 15px;
    --partnerships-page-grid-title-gap: 28px;
    --partnerships-page-grid-title-size: 28px;
    --partnerships-page-grid-title-size-mobile: 24px;
    --partnerships-page-hero-padding-bottom-desktop: clamp(24px, 4vw, 40px);
    --partnerships-page-grid-padding-top-desktop: clamp(20px, 3vw, 36px);
    --partnerships-page-intro-padding-top-desktop: clamp(32px, 5vw, 48px);
    --partnerships-page-lead-margin-bottom: clamp(24px, 4vw, 32px);
    --gym-gallery-facilities-photos-only-gap: clamp(28px, 4vw, 40px);
    --facilities-grid-gap-desktop: 16px;
    --facilities-grid-gap-tablet: 14px;
    --facilities-grid-gap-mobile: 14px;
    --facilities-card-radius: 16px;
    --facilities-image-ratio: 4 / 3;
    --facilities-mobile-spacing: clamp(20px, 4vw, 28px);
    --facilities-feature-min-height-desktop: 400px;
    --facilities-feature-min-height-tablet: 300px;
    --facilities-feature-min-height-mobile: clamp(220px, 48vw, 280px);
    --facilities-tile-min-height-mobile: clamp(160px, 38vw, 220px);
    --partnerships-page-footnote-margin-bottom: 24px;

    /* =========================
       PROGRAM DETAIL — extra editorial block
    ========================= */
    --program-detail-gallery-gap: 18px;
    --program-detail-gallery-gap-mobile: 14px;
    --program-detail-gallery-columns-desktop: 3;
    --program-detail-gallery-columns-tablet: 2;
    --program-detail-gallery-columns-mobile: 1;
    --program-detail-gallery-tile-radius: 18px;
    --program-detail-gallery-tile-min-height: 240px;
    --program-detail-gallery-tile-min-height-mobile: 200px;
    --program-detail-actions-gap: 16px;
    --program-detail-actions-margin-top: 48px;
    --program-detail-intro-gap-mobile: 22px;
    --program-detail-block-title-size: var(--global-h3-size-desktop);
    --program-detail-block-title-size-mobile: var(--global-h3-size-mobile);
    --program-detail-block-body-size: 16px;
    --program-detail-block-body-size-mobile: 15px;
    --program-detail-block-body-line-height: 1.7;
    --program-detail-benefits-gap: 14px;
    --program-detail-benefits-icon-color: var(--color-red);

    /* =========================
       INNER-PAGE BLOCK RHYTHM (eyebrow → heading → text gap)
       Shared so every new content block on an inner page can use the
       same spacing system as the front page.
    ========================= */
    /* These reuse the shared section gap variables so any change in the admin
       updates every inner page consistently (front-page rhythm). */
    --inner-page-block-eyebrow-gap: var(--section-eyebrow-heading-gap-desktop, 18px);
    --inner-page-block-eyebrow-gap-mobile: var(--section-eyebrow-heading-gap-mobile, 14px);
    --inner-page-block-heading-gap: var(--section-heading-text-gap-desktop, 22px);
    --inner-page-block-heading-gap-mobile: var(--section-heading-text-gap-mobile, 16px);
    --inner-page-block-gap: var(--section-text-content-gap-desktop, 48px);
    --inner-page-block-gap-mobile: var(--section-text-content-gap-mobile, 32px);

    /* =========================
       LEGAL — heading row with icon
    ========================= */
    --legal-heading-row-gap: 14px;
    --legal-heading-row-gap-mobile: 10px;
    --legal-heading-row-margin-bottom: 28px;
    --legal-heading-row-margin-bottom-mobile: 20px;
    --legal-heading-icon-size: 38px;
    --legal-heading-icon-size-mobile: 32px;
    --legal-heading-icon-color: var(--color-red);
    --legal-heading-icon-bg: rgba(222, 36, 47, 0.10);
    --legal-heading-icon-border: rgba(222, 36, 47, 0.32);
    --legal-heading-icon-radius: 12px;
    --legal-heading-icon-pad: 8px;
    --legal-heading-title-size-desktop: var(--global-h2-size-desktop);
    --legal-heading-title-size-mobile: 32px;
    --legal-heading-title-color: var(--color-light);
    --legal-content-text-align: left;
    --legal-content-h-align: left;

    /* =========================
       CONTACT PAGE — mobile map sizing
    ========================= */
    --contact-page-map-height-desktop: 420px;
    --contact-page-map-height-tablet: 360px;
    --contact-page-map-height-mobile: 280px;
    --contact-page-block-gap-desktop: 56px;
    --contact-page-block-gap-mobile: 40px;
    --contact-page-no-hero-top-padding-desktop: var(--page-inner-padding-top-desktop);
    --contact-page-no-hero-top-padding-mobile: var(--page-inner-padding-top-mobile);

    /* =========================
       GLOBAL INNER PAGE PADDING + RHYTHM
       Shared by every inner page that does not have its own hero
       (Contact, Cookies, Privacy, Terms, future inner pages).
       Mirrors the front-page section rhythm.
    ========================= */
    --page-inner-padding-top-desktop: 260px;
    --page-inner-padding-top-mobile: 180px;
    --page-inner-padding-bottom-desktop: 88px;
    --page-inner-padding-bottom-mobile: 64px;

  --section-eyebrow-heading-gap-desktop: clamp(14px, 2vw, 20px);
  --section-eyebrow-heading-gap-mobile: clamp(12px, 2.5vw, 16px);
  --section-heading-text-gap-desktop: clamp(14px, 2vw, 20px);
  --section-heading-text-gap-mobile: clamp(12px, 2.5vw, 16px);
  --section-text-content-gap-desktop: clamp(32px, 4.5vw, 48px);
  --section-text-content-gap-mobile: clamp(24px, 4vw, 36px);
  --section-header-button-gap-desktop: clamp(14px, 2vw, 20px);
  --section-header-button-gap-mobile: clamp(12px, 2.5vw, 16px);
    --section-reveal-distance-desktop: 16px;
    --section-reveal-distance-mobile: 8px;
    --section-reveal-duration-desktop: 0.72s;
    --section-reveal-duration-mobile: 0.38s;

    /* =========================
       FRONT-PAGE CTAs (Partnerships preview + About preview)
    ========================= */
    --partnerships-cta-margin-top: 36px;
    --partnerships-cta-margin-top-mobile: 28px;
    --partnerships-cta-min-width: 220px;
    --about-cta-margin-top: 28px;
    --about-cta-margin-top-mobile: 22px;
    --about-cta-min-width: 220px;
    --front-cta-min-width-mobile: 180px;

    /* =========================
       BOOKING — back-arrow button (fit the chevron)
    ========================= */
    --booking-back-size-desktop: 36px;
    --booking-back-size-mobile: 40px;
    --booking-back-radius: 12px;
    --booking-back-icon-size: 22px;
    --booking-back-icon-size-mobile: 24px;
    --booking-back-bg: rgba(255, 255, 255, 0.055);
    --booking-back-bg-hover: rgba(255, 255, 255, 0.10);
    --booking-back-color: #ffffff;
    --programs-section-text-align: center;
    --membership-section-text-align: center;
    --partnerships-section-text-align: center;
    --about-section-text-align: center;
    --bmi-section-text-align: center;
    --bmi-form-text-align: left;
    --location-section-text-align: center;
    --faq-section-text-align: center;
    --hero-overlay-color: var(--global-image-overlay-color);
    --hero-overlay-opacity: var(--global-image-overlay-opacity);
    --hero-image-opacity: 1;
    --hero-image-position-desktop: center center;
    --hero-image-position-mobile: center center;
    --hero-padding-top-desktop: var(--header-height);
    --hero-padding-bottom-desktop: 0px;
    --hero-padding-top-mobile: var(--header-height);
    --hero-padding-bottom-mobile: 0px;
    --hero-title-color: var(--color-light);
    --hero-title-size-desktop: var(--global-h1-size-desktop);
    --hero-title-size-tablet: var(--global-h1-size-tablet);
    --hero-title-size-mobile: var(--global-h1-size-mobile);
    --hero-title-weight: var(--global-heading-font-weight);
    --hero-title-line-height: var(--global-heading-line-height);
    --hero-title-letter-spacing: var(--global-heading-letter-spacing);
    --hero-title-margin-bottom: 24px;
    --hero-title-text-transform: var(--global-heading-text-transform);
    --hero-text-color: rgba(250, 249, 254, 0.82);
    --hero-text-size-desktop: var(--global-text-size-desktop);
    --hero-text-size-mobile: var(--global-text-size-mobile);
    --hero-text-weight: var(--global-text-font-weight);
    --hero-text-line-height: var(--global-text-line-height);
    --hero-text-width: 620px;
    --hero-text-margin-bottom: 36px;
    --hero-actions-gap: 18px;

    /* =========================
       HOME PROGRAMS
    ========================= */
    --programs-section-padding-desktop: 120px;
    --programs-section-padding-tablet: 90px;
    --programs-section-padding-mobile: 70px;
    --programs-bg-base: var(--color-dark);
    --programs-gradient-black: rgba(0, 0, 8, 0.96);
    --programs-gradient-red: rgba(222, 36, 47, 0.46);
    --programs-gradient-dark-red: rgba(90, 0, 8, 0.66);
    --programs-gradient-opacity: 1;
    --programs-intro-gap: 70px;
    --programs-intro-margin-bottom: 64px;
    --programs-grid-columns: 3;
    --programs-grid-gap: 22px;
    --programs-button-align: flex-end;
    --programs-button-margin-left: auto;
    --programs-eyebrow-color: var(--color-red);
    --programs-eyebrow-size: var(--global-eyebrow-size);
    --programs-eyebrow-weight: var(--global-eyebrow-font-weight);
    --programs-eyebrow-letter-spacing: var(--global-eyebrow-letter-spacing);
    --programs-eyebrow-text-transform: var(--global-eyebrow-text-transform);
    --programs-eyebrow-margin-bottom: var(--global-eyebrow-margin-bottom);
    --programs-title-color: var(--color-light);
    --programs-title-size-desktop: var(--global-h2-size-desktop);
    --programs-title-size-tablet: var(--global-h2-size-tablet);
    --programs-title-size-mobile: var(--global-h2-size-mobile);
    --programs-title-weight: var(--global-heading-font-weight);
    --programs-title-line-height: var(--global-heading-line-height);
    --programs-title-letter-spacing: var(--global-heading-letter-spacing);
    --programs-title-max-width: 560px;
    --programs-description-color: rgba(250, 249, 254, 0.78);
    --programs-description-size: var(--global-text-size-desktop);
    --programs-description-size-mobile: var(--global-text-size-mobile);
    --programs-description-line-height: var(--global-text-line-height);
    --programs-description-max-width: 560px;
    --programs-description-margin-bottom: var(--section-header-button-gap-desktop, 32px);
    --program-card-min-height: 460px;
    --program-card-min-height-mobile: 420px;
    --program-card-padding: 30px;
    --program-card-radius: 0px;
    --program-card-border: rgba(250, 249, 254, 0.14);
    --program-card-bg: var(--color-dark);
    --program-card-image-opacity: var(--site-photo-opacity);
    --program-card-image-position: center center;
    --program-card-image-scale-hover: 1.07;
    --program-card-overlay-color: var(--global-image-overlay-color);
    --program-card-overlay-opacity: var(--global-image-overlay-opacity-card);
    --program-card-overlay-opacity-hover: var(--global-image-overlay-opacity-hover);
    --program-card-number-color: var(--color-light);
    --program-card-number-size: 15px;
    --program-card-number-weight: 700;
    --program-card-number-letter-spacing: 1px;
    --program-card-number-underline-color: var(--color-red);
    --program-card-number-underline-width: 74px;
    --program-card-number-underline-height: 2px;
    --program-card-number-margin-bottom: 22px;
    --program-card-title-color: var(--color-light);
    --program-card-title-size: var(--global-h3-size-desktop);
    --program-card-title-size-mobile: var(--global-h3-size-mobile);
    --program-card-title-weight: var(--global-heading-font-weight);
    --program-card-title-line-height: 1.05;
    --program-card-title-margin-bottom: 16px;
    --program-card-title-transform: var(--global-heading-text-transform);
    --program-card-text-color: rgba(250, 249, 254, 0.76);
    --program-card-text-size: 15px;
    --program-card-text-line-height: var(--global-text-line-height);
    --program-card-text-margin-bottom: 26px;
    --program-card-link-color: var(--color-light);
    --program-card-link-hover-color: var(--color-red);
    --program-card-link-size: var(--global-link-size);
    --program-card-link-weight: var(--global-link-font-weight);
    --program-card-link-letter-spacing: var(--global-link-letter-spacing);
    --program-card-link-gap: 7px;



    /* =========================
       HOME EQUIPMENT
    ========================= */
    --equipment-section-bg: var(--color-light);
    --equipment-section-padding-desktop: 120px;
    --equipment-section-padding-tablet: 90px;
    --equipment-section-padding-mobile: 70px;
    --equipment-heading-width: 820px;
    --equipment-heading-margin-bottom: 44px;
    --equipment-eyebrow-color: var(--color-red);
    --equipment-eyebrow-size: var(--global-eyebrow-size);
    --equipment-eyebrow-weight: var(--global-eyebrow-font-weight);
    --equipment-eyebrow-letter-spacing: var(--global-eyebrow-letter-spacing);
    --equipment-eyebrow-transform: var(--global-eyebrow-text-transform);
    --equipment-eyebrow-margin-bottom: var(--global-eyebrow-margin-bottom);
    --equipment-title-color: var(--color-dark);
    --equipment-title-size-desktop: var(--global-h2-size-desktop);
    --equipment-title-size-tablet: var(--global-h2-size-tablet);
    --equipment-title-size-mobile: var(--global-h2-size-mobile);
    --equipment-title-weight: var(--global-heading-font-weight);
    --equipment-title-line-height: var(--global-heading-line-height);
    --equipment-title-letter-spacing: var(--global-heading-letter-spacing);
    --equipment-title-margin-bottom: 22px;
    --equipment-text-color: var(--color-text-muted);
    --equipment-text-size: var(--global-text-size-desktop);
    --equipment-text-size-mobile: var(--global-text-size-mobile);
    --equipment-text-line-height: var(--global-text-line-height);
    --equipment-list-display: flex;
    --equipment-list-gap: 12px;
    --equipment-list-margin-bottom: 54px;
    --equipment-list-justify: center;
    --equipment-list-max-width: 980px;
    --equipment-name-bg: rgba(0, 0, 8, 0.045);
    --equipment-name-color: var(--color-dark);
    --equipment-name-border: rgba(0, 0, 8, 0.12);
    --equipment-name-radius: 999px;
    --equipment-name-padding: 12px 18px;
    --equipment-name-size: 13px;
    --equipment-name-weight: 700;
    --equipment-name-letter-spacing: 0.8px;
    --equipment-name-transform: uppercase;
    --equipment-carousel-gap: 20px;
    --equipment-carousel-width: min(1320px, 100%);
    --equipment-carousel-margin: 0 auto;
    --equipment-carousel-box-bg: rgba(255, 255, 255, 0.28);
    --equipment-carousel-box-border: rgba(0, 0, 8, 0.10);
    --equipment-carousel-box-radius: 0px;
    --equipment-carousel-box-padding: 0px;
    --equipment-slide-height: 520px;
    --equipment-slide-height-mobile: 300px;
    --equipment-slide-radius: 0px;
    --equipment-slide-image-opacity: var(--site-photo-opacity);
    --equipment-slide-overlay-bg: #000000;
    --equipment-slide-overlay-opacity: 0.18;
    --equipment-slide-image-position: center center;
    --equipment-arrow-size: 52px;
    --equipment-arrow-bg: transparent;
    --equipment-arrow-color: var(--color-light);
    --equipment-arrow-bg-hover: transparent;
    --equipment-arrow-color-hover: var(--color-light);
    --equipment-arrow-border: transparent;
    --equipment-arrow-radius: 0px;
    --equipment-arrow-font-size: 34px;
    --equipment-arrow-offset: -78px;

    /* =========================
       HOME MEMBERSHIP
    ========================= */
    --membership-section-padding-desktop: 120px;
    --membership-section-padding-tablet: 90px;
    --membership-section-padding-mobile: 70px;
    --membership-bg-base: var(--color-dark);
    --membership-gradient-black: rgba(0, 0, 8, 0.96);
    --membership-gradient-red: rgba(222, 36, 47, 0.42);
    --membership-gradient-dark-red: rgba(90, 0, 8, 0.62);
    --membership-gradient-opacity: 1;
    --membership-heading-width: 780px;
    --membership-heading-margin-bottom: 42px;
    --membership-eyebrow-color: var(--color-red);
    --membership-eyebrow-size: var(--global-eyebrow-size);
    --membership-eyebrow-weight: var(--global-eyebrow-font-weight);
    --membership-eyebrow-letter-spacing: var(--global-eyebrow-letter-spacing);
    --membership-eyebrow-transform: var(--global-eyebrow-text-transform);
    --membership-eyebrow-margin-bottom: var(--global-eyebrow-margin-bottom);
    --membership-title-color: var(--color-light);
    --membership-title-size-desktop: var(--global-h2-size-desktop);
    --membership-title-size-tablet: var(--global-h2-size-tablet);
    --membership-title-size-mobile: var(--global-h2-size-mobile);
    --membership-title-weight: var(--global-heading-font-weight);
    --membership-title-line-height: var(--global-heading-line-height);
    --membership-title-letter-spacing: var(--global-heading-letter-spacing);
    --membership-title-margin-bottom: 22px;
    --membership-text-color: rgba(250, 249, 254, 0.74);
    --membership-text-size: var(--global-text-size-desktop);
    --membership-text-size-mobile: var(--global-text-size-mobile);
    --membership-text-line-height: var(--global-text-line-height);
    --membership-selector-display: flex;
    --membership-selector-justify: center;
    --membership-selector-gap: clamp(4px, 1.2vw, 12px);
    --membership-selector-margin-bottom: 36px;
    --membership-selector-max-width-desktop: min(560px, 78%);
    --membership-selector-padding: clamp(4px, 0.9vw, 8px);
    --membership-selector-bg: rgba(250, 249, 254, 0.06);
    --membership-selector-border: rgba(250, 249, 254, 0.12);
    --membership-selector-radius: 999px;
    --membership-selector-button-padding: clamp(8px, 1.1vw, 13px) clamp(6px, 1.8vw, 22px);
    --membership-selector-button-bg: transparent;
    --membership-selector-button-color: var(--color-light);
    --membership-selector-button-active-bg: var(--color-red);
    --membership-selector-button-active-color: var(--color-light);
    --membership-selector-button-radius: 999px;
    --membership-selector-button-size: clamp(10px, 2.15vw, 13px);
    --membership-selector-button-weight: 700;
    --membership-selector-button-letter-spacing: clamp(0.02em, 0.25vw, 0.08em);
    --membership-selector-button-transform: uppercase;
    --membership-selector-button-glow: 0 0 28px rgba(222, 36, 47, 0.42);
    --membership-grid-columns: 4;
    --membership-grid-columns-tablet: 2;
    --membership-gold: #d4af37;
    --membership-gold-light: #f4e4a8;
    --membership-gold-dark: #8a6d1b;
    --membership-gold-muted: rgba(212, 175, 55, 0.55);
    --membership-grid-gap: 22px;
    --membership-card-bg: rgba(250, 249, 254, 0.045);
    --membership-card-bg-active: rgba(250, 249, 254, 0.075);
    --membership-card-border: rgba(250, 249, 254, 0.14);
    --membership-card-border-active: rgba(222, 36, 47, 0.72);
    --membership-card-radius: 0px;
    --membership-card-padding: 34px;
    --membership-card-glow: 0 0 34px rgba(222, 36, 47, 0.30);
    --membership-card-transform-active: translateY(-6px);
    --membership-card-transition-duration: 520ms;
    --membership-card-transition-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --membership-card-glow-active: 0 24px 76px rgba(222, 36, 47, 0.38), 0 0 34px rgba(222, 36, 47, 0.20), 0 0 0 1px rgba(255, 255, 255, 0.09) inset;
    --membership-card-glow-soft: 0 14px 36px rgba(0, 0, 0, 0.22);
    --membership-card-transform-prev-next: scale(0.965);
    --membership-card-opacity-inactive: 0.78;
    --membership-card-opacity-active: 1;
    --membership-card-width-mobile: min(360px, calc(100vw - 48px));
    --membership-card-center-padding-mobile: calc((100vw - var(--membership-card-width-mobile)) / 2);
    --membership-card-title-color: var(--color-light);
    --membership-card-title-size: var(--global-h3-size-desktop);
    --membership-card-title-size-mobile: var(--global-h3-size-mobile);
    --membership-card-title-weight: var(--global-heading-font-weight);
    --membership-card-title-line-height: 1.05;
    --membership-card-title-margin-bottom: 18px;
    --membership-price-color: var(--color-red);
    --membership-price-size: 46px;
    --membership-price-size-mobile: 38px;
    --membership-price-weight: 700;
    --membership-period-color: rgba(250, 249, 254, 0.68);
    --membership-period-size: 14px;
    --membership-price-margin-bottom: 20px;
    --membership-card-text-color: rgba(250, 249, 254, 0.74);
    --membership-card-text-size: 15px;
    --membership-card-text-line-height: 1.65;
    --membership-card-text-margin-bottom: 24px;
    --membership-features-gap: 11px;
    --membership-features-margin-bottom: 30px;
    --membership-feature-color: rgba(250, 249, 254, 0.76);
    --membership-feature-size: 14px;
    --membership-feature-bullet-color: var(--color-red);
    --membership-button-width: 100%;

    /* =========================
       HOME PARTNERSHIPS
    ========================= */
    --partnerships-section-padding-desktop: 100px;
    --partnerships-section-padding-tablet: 80px;
    --partnerships-section-padding-mobile: 64px;
    --partnerships-bg-base: var(--color-dark);
    --partnerships-heading-width: 780px;
    --partnerships-heading-margin-bottom: 42px;
    --partnerships-eyebrow-color: var(--color-red);
    --partnerships-eyebrow-size: var(--global-eyebrow-size);
    --partnerships-eyebrow-weight: var(--global-eyebrow-font-weight);
    --partnerships-eyebrow-letter-spacing: var(--global-eyebrow-letter-spacing);
    --partnerships-eyebrow-transform: var(--global-eyebrow-text-transform);
    --partnerships-eyebrow-margin-bottom: var(--global-eyebrow-margin-bottom);
    --partnerships-title-color: var(--color-light);
    --partnerships-title-size-desktop: var(--global-h2-size-desktop);
    --partnerships-title-size-tablet: var(--global-h2-size-tablet);
    --partnerships-title-size-mobile: var(--global-h2-size-mobile);
    --partnerships-title-weight: var(--global-heading-font-weight);
    --partnerships-title-line-height: var(--global-heading-line-height);
    --partnerships-title-letter-spacing: var(--global-heading-letter-spacing);
    --partnerships-title-margin-bottom: 22px;
    --partnerships-text-color: rgba(250, 249, 254, 0.74);
    --partnerships-text-size: var(--global-text-size-desktop);
    --partnerships-text-size-mobile: var(--global-text-size-mobile);
    --partnerships-text-line-height: var(--global-text-line-height);
    --partnerships-marquee-margin-top: 8px;
    --partnerships-marquee-duration: 22s;
    --partner-logo-scroll-speed: 28s;
    --partnerships-marquee-gap: 12px;
    --partnerships-marquee-gap-desktop: 20px;
    --partner-logo-gap-desktop: 20px;
    --partner-logo-gap-mobile: 12px;
    --partner-logo-animation-distance: -50%;
    --partnerships-slide-width: min(220px, calc((100vw - (var(--partnerships-marquee-gap) * 2)) / 1.85));
    --partnerships-slide-padding: clamp(20px, 2.5vw, 28px);
    --partnerships-slide-bg: transparent;
    --partnerships-slide-border: transparent;
    --partnerships-slide-radius: 0px;
    --partnerships-logo-max-height: 80px;
    --partnerships-logo-max-height-mobile: 72px;
    --partnerships-logo-opacity: 0.92;
    --partnerships-logo-opacity-hover: 1;
    --partnerships-name-color: var(--color-light);
    --partnerships-name-size: 15px;
    --partnerships-name-weight: 700;
    --partnerships-name-margin-top: 14px;
    --partnerships-discount-color: var(--color-light);
    --partnerships-discount-size: 14px;
    --partnerships-discount-weight: 700;
    --partnerships-discount-margin-top: 8px;
    --partnerships-description-color: var(--color-light);
    --partnerships-description-size: 13px;
    --partnerships-description-margin-top: 6px;
    --partnerships-marquee-fade-width: 48px;

    /* =========================
       ABOUT
    ========================= */
    --about-section-min-height: 720px;
    --about-section-min-height-mobile: 620px;
    --about-section-padding-desktop: 120px;
    --about-section-padding-mobile: 80px;
    --about-bg: var(--color-dark);
    --about-color: var(--color-light);
    --about-bg-position-desktop: center center;
    --about-bg-position-mobile: center center;
    --about-image-opacity: var(--site-photo-opacity);
    --about-overlay-color: var(--global-image-overlay-color);
    --about-overlay-opacity: var(--global-image-overlay-opacity-card);
    --about-content-width: 820px;
    --about-eyebrow-color: var(--color-red);
    --about-eyebrow-size: var(--global-eyebrow-size);
    --about-eyebrow-weight: var(--global-eyebrow-font-weight);
    --about-eyebrow-letter-spacing: var(--global-eyebrow-letter-spacing);
    --about-eyebrow-text-transform: var(--global-eyebrow-text-transform);
    --about-eyebrow-margin-bottom: var(--global-eyebrow-margin-bottom);
    --about-title-color: var(--color-light);
    --about-title-size-desktop: var(--global-h2-size-desktop);
    --about-title-size-tablet: var(--global-h2-size-tablet);
    --about-title-size-mobile: var(--global-h2-size-mobile);
    --about-title-weight: var(--global-heading-font-weight);
    --about-title-line-height: var(--global-heading-line-height);
    --about-title-letter-spacing: var(--global-heading-letter-spacing);
    --about-title-margin-bottom: 24px;
    --about-text-color: rgba(250, 249, 254, 0.78);
    --about-text-size-desktop: var(--global-text-size-desktop);
    --about-text-size-mobile: var(--global-text-size-mobile);
    --about-text-line-height: var(--global-text-line-height);
    --about-text-width: 720px;

    /* =========================
       BMI
    ========================= */
    --bmi-section-bg: var(--color-light);
    --bmi-section-padding-desktop: 120px;
    --bmi-section-padding-tablet: 90px;
    --bmi-section-padding-mobile: 70px;
    --bmi-grid-gap: 70px;
    --bmi-form-width: 520px;
    --bmi-eyebrow-color: var(--color-red);
    --bmi-eyebrow-size: var(--global-eyebrow-size);
    --bmi-eyebrow-weight: var(--global-eyebrow-font-weight);
    --bmi-eyebrow-letter-spacing: var(--global-eyebrow-letter-spacing);
    --bmi-eyebrow-text-transform: var(--global-eyebrow-text-transform);
    --bmi-eyebrow-margin-bottom: var(--global-eyebrow-margin-bottom);
    --bmi-title-color: var(--color-dark);
    --bmi-title-size-desktop: var(--global-h2-size-desktop);
    --bmi-title-size-tablet: var(--global-h2-size-tablet);
    --bmi-title-size-mobile: var(--global-h2-size-mobile);
    --bmi-title-weight: var(--global-heading-font-weight);
    --bmi-title-line-height: var(--global-heading-line-height);
    --bmi-title-letter-spacing: var(--global-heading-letter-spacing);
    --bmi-title-margin-bottom: 22px;
    --bmi-text-color: var(--color-text-muted);
    --bmi-text-size: var(--global-text-size-desktop);
    --bmi-text-line-height: var(--global-text-line-height);
    --bmi-text-width: 560px;
    --bmi-text-margin-bottom: 34px;
    --bmi-form-gap: 18px;
    --bmi-label-color: var(--color-dark);
    --bmi-label-size: 13px;
    --bmi-label-weight: 700;
    --bmi-label-letter-spacing: 1px;
    --bmi-label-transform: uppercase;
    --bmi-label-margin-bottom: 9px;
    --bmi-input-bg: var(--color-white);
    --bmi-input-color: var(--color-dark);
    --bmi-input-placeholder-color: rgba(0, 0, 8, 0.45);
    --bmi-input-border: rgba(0, 0, 8, 0.18);
    --bmi-input-border-focus: var(--color-red);
    --bmi-input-focus-shadow: 0 0 0 3px rgba(222, 36, 47, 0.12);
    --bmi-input-height: 56px;
    --bmi-input-padding: 0 18px;
    --bmi-input-radius: 0px;
    --bmi-input-font-size: 16px;
    --bmi-result-bg: var(--color-dark);
    --bmi-result-color: var(--color-light);
    --bmi-result-muted-color: rgba(250, 249, 254, 0.74);
    --bmi-result-border: var(--color-red);
    --bmi-result-padding: 22px;
    --bmi-result-margin-top: 24px;
    --bmi-result-radius: 0px;
    --bmi-result-label-size: 15px;
    --bmi-result-value-size: 34px;
    --bmi-result-value-weight: 700;
    --bmi-result-status-size: 18px;
    --bmi-table-bg: var(--color-dark);
    --bmi-table-text: var(--color-light);
    --bmi-table-muted: rgba(250, 249, 254, 0.75);
    --bmi-table-border: rgba(250, 249, 254, 0.14);
    --bmi-table-header-bg: var(--color-red);
    --bmi-table-header-text: var(--color-light);
    --bmi-table-radius: 0px;
    --bmi-table-padding: 34px;
    --bmi-table-cell-padding: 20px;
    --bmi-table-font-size: 16px;
    --bmi-table-header-size: 13px;
    --bmi-table-header-letter-spacing: 1px;

    /* =========================
       UNIFIED DARK GRADIENT
    ========================= */
    --unified-gradient-black: var(--color-dark);
    --unified-gradient-red-deep: #0a0104;
    --unified-gradient-red-mid: #180208;
    --unified-gradient-red-soft: rgba(222, 36, 47, 0.08);
    --unified-gradient-red-glow: rgba(70, 0, 6, 0.38);
    --unified-gradient-angle: 155deg;
    --unified-gradient-radial-one-position: 88% 22%;
    --unified-gradient-radial-one-size: 34%;
    --unified-gradient-radial-two-position: 14% 88%;
    --unified-gradient-radial-two-size: 44%;

    /* =========================
       FRONT LOCATION + FAQ
    ========================= */
    --location-faq-section-bg: transparent;
    --location-faq-overlay-display: none;
    --location-section-padding-desktop: 120px;
    --location-section-padding-tablet: 90px;
    --location-section-padding-mobile: 70px;
    --location-heading-width: 760px;
    --location-heading-margin-bottom: 54px;
    --location-eyebrow-color: var(--color-red);
    --location-eyebrow-size: var(--global-eyebrow-size);
    --location-eyebrow-weight: var(--global-eyebrow-font-weight);
    --location-eyebrow-letter-spacing: var(--global-eyebrow-letter-spacing);
    --location-eyebrow-text-transform: var(--global-eyebrow-text-transform);
    --location-eyebrow-margin-bottom: var(--global-eyebrow-margin-bottom);
    --location-title-color: var(--color-light);
    --location-title-size-desktop: var(--global-h2-size-desktop);
    --location-title-size-tablet: var(--global-h2-size-tablet);
    --location-title-size-mobile: var(--global-h2-size-mobile);
    --location-title-weight: var(--global-heading-font-weight);
    --location-title-line-height: var(--global-heading-line-height);
    --location-title-letter-spacing: var(--global-heading-letter-spacing);
    --location-title-margin-bottom: 22px;
    --location-text-color: rgba(250, 249, 254, 0.78);
    --location-text-size: var(--global-text-size-desktop);
    --location-text-line-height: var(--global-text-line-height);
    --location-map-width-desktop: 82vw;
    --location-map-max-width-desktop: 1320px;
    --location-map-width: 94vw;
    --location-map-max-width: 1500px;
    --location-map-height-desktop: 620px;
    --location-map-height-tablet: 520px;
    --location-map-height-mobile: 420px;
    --location-map-radius: 0px;
    --location-map-border-color: transparent;
    --location-map-border-width: 0px;

    --faq-section-padding-desktop: 120px;
    --faq-section-padding-tablet: 90px;
    --faq-section-padding-mobile: 70px;
    --faq-heading-width: 780px;
    --faq-heading-margin-bottom: 54px;
    --faq-eyebrow-color: var(--color-red);
    --faq-eyebrow-size: var(--global-eyebrow-size);
    --faq-eyebrow-weight: var(--global-eyebrow-font-weight);
    --faq-eyebrow-letter-spacing: var(--global-eyebrow-letter-spacing);
    --faq-eyebrow-text-transform: var(--global-eyebrow-text-transform);
    --faq-eyebrow-margin-bottom: var(--global-eyebrow-margin-bottom);
    --faq-title-color: var(--color-light);
    --faq-title-size-desktop: var(--global-h2-size-desktop);
    --faq-title-size-tablet: var(--global-h2-size-tablet);
    --faq-title-size-mobile: var(--global-h2-size-mobile);
    --faq-title-weight: var(--global-heading-font-weight);
    --faq-title-line-height: var(--global-heading-line-height);
    --faq-title-letter-spacing: var(--global-heading-letter-spacing);
    --faq-title-margin-bottom: 22px;
    --faq-intro-color: rgba(250, 249, 254, 0.72);
    --faq-intro-size: var(--global-text-size-desktop);
    --faq-intro-size-mobile: var(--global-text-size-mobile);
    --faq-intro-line-height: var(--global-text-line-height);
    --faq-list-width: 920px;
    --faq-item-bg: rgba(250, 249, 254, 0.035);
    --faq-item-bg-open: rgba(250, 249, 254, 0.06);
    --faq-item-border: rgba(250, 249, 254, 0.13);
    --faq-item-border-open: rgba(222, 36, 47, 0.58);
    --faq-item-radius: 0px;
    --faq-item-margin-bottom: 14px;
    --faq-question-padding-desktop: 24px 26px;
    --faq-question-padding-mobile: 20px 18px;
    --faq-question-gap: 16px;
    --faq-question-left-gap: 0px;
    --faq-question-color: var(--color-light);
    --faq-question-hover-color: var(--color-red);
    --faq-question-size: 18px;
    --faq-question-size-mobile: 16px;
    --faq-question-weight: var(--weight-bold);
    --faq-question-line-height: 1.35;
    --faq-answer-padding-desktop: 0 26px 26px 76px;
    --faq-answer-padding-mobile: 0 18px 22px 18px;
    --faq-answer-color: rgba(250, 249, 254, 0.72);
    --faq-answer-size: 16px;
    --faq-answer-size-mobile: 15px;
    --faq-answer-line-height: var(--global-text-line-height);
    --faq-answer-max-height-closed: 0;
    --faq-icon-display: none;
    --faq-toggle-size: 32px;
    --faq-toggle-color: #000008;
    --faq-toggle-open-color: #000008;
    --faq-toggle-outline-color: rgba(250, 249, 254, 0.9);
    --faq-toggle-outline-offset: -3px;
    --faq-toggle-inner-offset: 2px;
    --faq-toggle-open-transform: rotate(45deg);
    --faq-barbell-mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2064%2024%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M2%2010h4v4H2v-4Zm5-3h5v10H7V7Zm6-3h5v16h-5V4Zm6%207h26v2H19v-2Zm27-7h5v16h-5V4Zm6%203h5v10h-5V7Zm6%203h4v4h-4v-4Z%27%2F%3E%3C%2Fsvg%3E");
    --faq-barbell-mask-size: contain;
    --faq-barbell-icon-scale: 1;
    --faq-toggle-outline-width: 3px;

    /* =========================
       HOME BLOG
    ========================= */
    --blog-section-bg: var(--color-light);
    --blog-section-padding-desktop: 120px;
    --blog-section-padding-tablet: 90px;
    --blog-section-padding-mobile: 70px;
    --blog-bg-color: var(--color-light);
    --blog-heading-width: 780px;
    --blog-heading-margin-bottom: 56px;
    --blog-eyebrow-color: var(--color-red);
    --blog-eyebrow-size: var(--global-eyebrow-size);
    --blog-eyebrow-weight: var(--global-eyebrow-font-weight);
    --blog-eyebrow-letter-spacing: var(--global-eyebrow-letter-spacing);
    --blog-eyebrow-text-transform: var(--global-eyebrow-text-transform);
    --blog-eyebrow-margin-bottom: var(--global-eyebrow-margin-bottom);
    --blog-title-color: var(--color-dark);
    --blog-title-size-desktop: var(--global-h2-size-desktop);
    --blog-title-size-tablet: var(--global-h2-size-tablet);
    --blog-title-size-mobile: var(--global-h2-size-mobile);
    --blog-title-weight: var(--global-heading-font-weight);
    --blog-title-line-height: var(--global-heading-line-height);
    --blog-title-letter-spacing: var(--global-heading-letter-spacing);
    --blog-title-margin-bottom: 22px;
    --blog-intro-color: var(--color-text-muted);
    --blog-intro-size: var(--global-text-size-desktop);
    --blog-intro-size-mobile: var(--global-text-size-mobile);
    --blog-intro-line-height: var(--global-text-line-height);
    --blog-grid-columns: 3;
    --blog-grid-gap: 26px;
    --blog-card-bg: var(--color-white);
    --blog-card-border: rgba(0, 0, 8, 0.12);
    --blog-card-radius: 0px;
    --blog-card-content-padding: 28px;
    --blog-image-height: 280px;
    --blog-image-height-mobile: 240px;
    --blog-image-opacity: var(--site-photo-opacity);
    --blog-image-position: center center;
    --blog-image-overlay-color: var(--global-image-overlay-color);
    --blog-image-overlay-opacity: 0.18;
    --blog-image-overlay-opacity-hover: var(--global-image-overlay-opacity-hover);
    --blog-image-scale-hover: 1.06;
    --blog-date-color: var(--color-red);
    --blog-date-size: 12px;
    --blog-date-weight: 700;
    --blog-date-letter-spacing: 1.2px;
    --blog-date-transform: uppercase;
    --blog-date-margin-bottom: 14px;
    --blog-card-title-color: var(--color-dark);
    --blog-card-title-hover-color: var(--color-red);
    --blog-card-title-size: var(--global-h3-size-desktop);
    --blog-card-title-size-mobile: 22px;
    --blog-card-title-weight: var(--global-heading-font-weight);
    --blog-card-title-line-height: 1.05;
    --blog-card-title-margin-bottom: 14px;
    --blog-excerpt-color: var(--color-text-muted);
    --blog-excerpt-size: 15px;
    --blog-excerpt-line-height: var(--global-text-line-height);
    --blog-excerpt-margin-bottom: 22px;
    --blog-link-color: var(--color-dark);
    --blog-link-hover-color: var(--color-red);
    --blog-link-size: var(--global-link-size);
    --blog-link-weight: var(--global-link-font-weight);
    --blog-link-letter-spacing: var(--global-link-letter-spacing);
    --blog-link-gap: 7px;
    --blog-empty-color: var(--color-text-muted);
    --blog-empty-size: 17px;

    /* =========================
       PROGRAMS PAGE
    ========================= */
    --programs-page-section-text-align: center;
    --programs-page-hero-padding-desktop: 170px 0 100px;
    --programs-page-hero-padding-mobile: 140px 0 70px;
    --programs-page-section-padding-desktop: 110px;
    --programs-page-section-padding-tablet: 90px;
    --programs-page-section-padding-mobile: 70px;
    --programs-page-eyebrow-color: var(--color-red);
    --programs-page-eyebrow-size: var(--global-eyebrow-size);
    --programs-page-eyebrow-weight: 700;
    --programs-page-eyebrow-letter-spacing: 2px;
    --programs-page-eyebrow-line-height: 1;
    --programs-page-eyebrow-transform: uppercase;
    --programs-page-eyebrow-margin-bottom: 18px;
    --programs-page-title-color: var(--color-light);
    --programs-page-title-size-desktop: var(--global-h2-size-desktop);
    --programs-page-title-size-tablet: var(--global-h2-size-tablet);
    --programs-page-title-size-mobile: var(--global-h2-size-mobile);
    --programs-page-title-line-height: var(--global-heading-line-height);
    --programs-page-title-letter-spacing: var(--global-heading-letter-spacing);
    --programs-page-title-margin-bottom: 22px;
    --programs-page-subtitle-color: rgba(250, 249, 254, 0.74);
    --programs-page-subtitle-size: var(--global-text-size-desktop);
    --programs-page-subtitle-size-mobile: var(--global-text-size-mobile);
    --programs-page-subtitle-line-height: 1.7;
    --programs-page-subtitle-width: 760px;
    --programs-page-grid-gap: 28px;
    --programs-page-card-min-height: 620px;
    --programs-page-card-min-height-mobile: 560px;
    --programs-page-card-padding: 34px;
    --programs-page-card-radius: 0px;
    --programs-page-card-border: rgba(250, 249, 254, 0.14);
    --programs-page-card-bg: var(--color-dark);
    --programs-page-card-content-width: 680px;
    --programs-page-card-image-opacity: var(--site-photo-opacity);
    --programs-page-card-image-position: center center;
    --programs-page-card-image-scale-hover: 1.06;
    --programs-page-card-overlay-color: var(--global-image-overlay-color);
    --programs-page-card-overlay-opacity: var(--global-image-overlay-opacity-card);
    --programs-page-card-overlay-opacity-hover: var(--global-image-overlay-opacity-hover);
    --programs-page-card-number-color: var(--color-light);
    --programs-page-card-number-size: 15px;
    --programs-page-card-number-weight: 700;
    --programs-page-card-number-letter-spacing: 1px;
    --programs-page-card-number-underline-color: var(--color-red);
    --programs-page-card-number-underline-width: 74px;
    --programs-page-card-number-underline-height: 2px;
    --programs-page-card-number-margin-bottom: 24px;
    --programs-page-card-title-color: var(--color-light);
    --programs-page-card-title-size: var(--global-h3-size-desktop);
    --programs-page-card-title-size-mobile: var(--global-h3-size-mobile);
    --programs-page-card-title-weight: var(--global-heading-font-weight);
    --programs-page-card-title-line-height: 1.05;
    --programs-page-card-title-margin-bottom: 18px;
    --programs-page-card-title-transform: uppercase;
    --programs-page-card-text-color: rgba(250, 249, 254, 0.76);
    --programs-page-card-text-size: 16px;
    --programs-page-card-text-line-height: 1.65;
    --programs-page-card-text-margin-bottom: 24px;
    --programs-page-list-color: rgba(250, 249, 254, 0.74);
    --programs-page-list-size: 15px;
    --programs-page-list-gap: 10px;
    --programs-page-list-margin-bottom: 30px;
    --programs-page-list-bullet-size: 7px;
    --programs-page-link-color: var(--color-light);
    --programs-page-link-hover-color: var(--color-red);
    --programs-page-link-size: var(--global-link-size);
    --programs-page-link-weight: 700;
    --programs-page-link-letter-spacing: 1px;
    --programs-page-link-gap: 7px;

    /* =========================
       CONTACT PAGE
    ========================= */
    --contact-page-section-text-align: var(--programs-page-section-text-align);
    --contact-page-hero-padding-desktop: var(--programs-page-hero-padding-desktop);
    --contact-page-hero-padding-mobile: var(--programs-page-hero-padding-mobile);
    --contact-page-section-padding-desktop: var(--programs-page-section-padding-desktop);
    --contact-page-section-padding-tablet: var(--programs-page-section-padding-tablet);
    --contact-page-section-padding-mobile: var(--programs-page-section-padding-mobile);
    --contact-page-eyebrow-color: var(--programs-page-eyebrow-color);
    --contact-page-eyebrow-size: var(--programs-page-eyebrow-size);
    --contact-page-eyebrow-weight: var(--programs-page-eyebrow-weight);
    --contact-page-eyebrow-letter-spacing: var(--programs-page-eyebrow-letter-spacing);
    --contact-page-eyebrow-line-height: var(--programs-page-eyebrow-line-height);
    --contact-page-eyebrow-transform: var(--programs-page-eyebrow-transform);
    --contact-page-eyebrow-margin-bottom: var(--programs-page-eyebrow-margin-bottom);
    --contact-page-title-color: var(--programs-page-title-color);
    --contact-page-title-size-desktop: var(--programs-page-title-size-desktop);
    --contact-page-title-size-tablet: var(--programs-page-title-size-tablet);
    --contact-page-title-size-mobile: var(--programs-page-title-size-mobile);
    --contact-page-title-line-height: var(--programs-page-title-line-height);
    --contact-page-title-letter-spacing: var(--programs-page-title-letter-spacing);
    --contact-page-title-margin-bottom: var(--programs-page-title-margin-bottom);
    --contact-page-subtitle-color: var(--programs-page-subtitle-color);
    --contact-page-subtitle-size: var(--programs-page-subtitle-size);
    --contact-page-subtitle-size-mobile: var(--programs-page-subtitle-size-mobile);
    --contact-page-subtitle-line-height: var(--programs-page-subtitle-line-height);
    --contact-page-subtitle-width: var(--programs-page-subtitle-width);
    --contact-location-heading-width: 760px;
    --contact-location-heading-margin-bottom: 54px;
    --contact-location-block-margin-bottom: 56px;
    --contact-location-map-width-desktop: 92vw;
    --contact-location-map-max-width-desktop: 1550px;
    --contact-location-map-width-mobile: calc(100vw - 40px);
    --contact-location-map-height-desktop: 620px;
    --contact-location-map-height-tablet: 520px;
    --contact-location-map-height-mobile: 420px;
    --contact-location-map-radius: var(--programs-page-card-radius);
    --contact-location-map-border-width: 1px;
    --contact-location-map-border-color: var(--programs-page-card-border);
    --lazy-map-placeholder-bg: rgba(0, 0, 8, 0.72);
    --lazy-map-placeholder-color: var(--color-light);
    --lazy-map-placeholder-text-size: 15px;
    --lazy-map-placeholder-button-bg: var(--color-red);
    --lazy-map-placeholder-button-color: var(--color-light);
    --lazy-map-placeholder-button-radius: 999px;
    --lazy-map-placeholder-button-padding: 12px 18px;
    --contact-info-grid-columns-desktop: 4;
    --contact-info-grid-columns-tablet: 2;
    --contact-info-grid-columns-mobile: 1;
    --contact-info-grid-gap: 22px;
    --contact-info-card-bg: rgba(250, 249, 254, 0.045);
    --contact-info-card-border: var(--programs-page-card-border);
    --contact-info-card-border-hover: rgba(222, 36, 47, 0.52);
    --contact-info-card-radius: var(--programs-page-card-radius);
    --contact-info-card-padding: 30px;
    --contact-info-card-gap: 18px;
    --contact-info-card-hover-transform: var(--hover-lift-medium);
    --contact-info-icon-box-size: 44px;
    --contact-info-icon-size: 22px;
    --contact-info-icon-color: var(--color-red);
    --contact-info-icon-bg: rgba(222, 36, 47, 0.10);
    --contact-info-icon-border: rgba(222, 36, 47, 0.28);
    --contact-info-title-color: var(--color-light);
    --contact-info-title-size: 18px;
    --contact-info-title-weight: 700;
    --contact-info-title-margin-bottom: 10px;
    --contact-info-text-color: rgba(250, 249, 254, 0.72);
    --contact-info-text-size: 16px;
    --contact-info-text-line-height: 1.55;
    --contact-info-link-hover-color: var(--color-red);
    --contact-social-icon-size: 22px;
    --contact-social-gap: 16px;

    /* =========================
       BLOG PAGE
    ========================= */
    --blog-page-section-text-align: var(--programs-page-section-text-align);
    --blog-page-hero-padding-desktop: var(--programs-page-hero-padding-desktop);
    --blog-page-hero-padding-mobile: var(--programs-page-hero-padding-mobile);
    --blog-page-section-padding-desktop: var(--programs-page-section-padding-desktop);
    --blog-page-section-padding-tablet: var(--programs-page-section-padding-tablet);
    --blog-page-section-padding-mobile: var(--programs-page-section-padding-mobile);
    --blog-page-eyebrow-color: var(--programs-page-eyebrow-color);
    --blog-page-eyebrow-size: var(--programs-page-eyebrow-size);
    --blog-page-eyebrow-weight: var(--programs-page-eyebrow-weight);
    --blog-page-eyebrow-letter-spacing: var(--programs-page-eyebrow-letter-spacing);
    --blog-page-eyebrow-line-height: var(--programs-page-eyebrow-line-height);
    --blog-page-eyebrow-transform: var(--programs-page-eyebrow-transform);
    --blog-page-eyebrow-margin-bottom: var(--programs-page-eyebrow-margin-bottom);
    --blog-page-title-color: var(--programs-page-title-color);
    --blog-page-title-size-desktop: var(--programs-page-title-size-desktop);
    --blog-page-title-size-tablet: var(--programs-page-title-size-tablet);
    --blog-page-title-size-mobile: var(--programs-page-title-size-mobile);
    --blog-page-title-line-height: var(--programs-page-title-line-height);
    --blog-page-title-letter-spacing: var(--programs-page-title-letter-spacing);
    --blog-page-title-margin-bottom: var(--programs-page-title-margin-bottom);
    --blog-page-subtitle-color: var(--programs-page-subtitle-color);
    --blog-page-subtitle-size: var(--programs-page-subtitle-size);
    --blog-page-subtitle-size-mobile: var(--programs-page-subtitle-size-mobile);
    --blog-page-subtitle-line-height: var(--programs-page-subtitle-line-height);
    --blog-page-subtitle-width: var(--programs-page-subtitle-width);
    --blog-page-grid-columns-desktop: 3;
    --blog-page-grid-columns-tablet: 2;
    --blog-page-grid-columns-mobile: 1;
    --blog-page-grid-gap: 26px;
    --blog-page-card-bg: rgba(250, 249, 254, 0.045);
    --blog-page-card-border: var(--programs-page-card-border);
    --blog-page-card-border-hover: rgba(222, 36, 47, 0.52);
    --blog-page-card-radius: var(--programs-page-card-radius);
    --blog-page-card-hover-transform: var(--hover-lift-medium);
    --blog-page-card-title-color: var(--color-light);
    --blog-page-card-title-hover-color: var(--color-red);
    --blog-page-card-excerpt-color: var(--programs-page-card-text-color);
    --blog-page-card-link-color: var(--color-light);
    --blog-page-card-link-hover-color: var(--color-red);
    --blog-page-image-overlay-opacity: var(--global-image-overlay-opacity);
    --blog-page-image-overlay-opacity-hover: var(--global-image-overlay-opacity-hover);

    /* =========================
       PAGINATION
    ========================= */
    --pagination-margin-top: 50px;
    --pagination-text-align: center;
    --pagination-item-min-width: 42px;
    --pagination-item-height: 42px;
    --pagination-item-margin: 4px;
    --pagination-item-padding: 0 12px;
    --pagination-item-border: rgba(250, 249, 254, 0.18);
    --pagination-item-color: var(--color-light);
    --pagination-item-font-size: var(--font-sm);
    --pagination-item-font-weight: var(--weight-bold);
    --pagination-item-bg-hover: var(--color-red);
    --pagination-item-border-hover: var(--color-red);
    --pagination-item-color-hover: var(--color-light);

    /* =========================
       PAGE DEFAULTS / GENERIC CARDS
    ========================= */
    --page-hero-bg: var(--color-dark);
    --page-hero-color: var(--color-light);
    --page-hero-padding-desktop: calc(var(--header-height) + 80px) 0 90px;
    --page-hero-padding-mobile: calc(var(--header-height) + 60px) 0 70px;
    --page-hero-subtitle-opacity: 0.76;
    --page-content-padding: 70px;
    --page-content-heading-margin: 34px 0 16px;
    --page-content-paragraph-margin-bottom: 18px;
    --page-content-list-margin-bottom: 22px;
    --section-heading-width: var(--site-section-header-max-width);
    --section-heading-margin-bottom: var(--section-text-content-gap-desktop);
    --cards-grid-columns: 3;
    --cards-grid-gap: 24px;
    --card-bg: var(--color-white);
    --card-border: rgba(0, 0, 8, 0.12);
    --card-radius: 0px;
    --card-padding: 32px;
    --card-title-size: var(--font-md);
    --card-title-margin-bottom: 12px;
    --card-text-color: var(--color-text-muted);

    /* =========================
       SINGLE POST
    ========================= */
    --single-post-hero-padding-desktop: calc(var(--header-height) + 90px) 0 80px;
    --single-post-hero-padding-mobile: calc(var(--header-height) + 70px) 0 60px;
    --single-post-title-size: var(--font-xl);
    --single-post-image-height-desktop: 560px;
    --single-post-image-height-mobile: 340px;
    --single-post-content-padding-desktop: 80px;
    --single-post-content-padding-mobile: 60px;
    --single-post-content-size-desktop: 18px;
    --single-post-content-size-mobile: 16px;

    /* =========================
       LEGAL PAGES
    ========================= */
    --legal-flow-black: #000008;
    --legal-flow-red-deep: #120106;
    --legal-flow-red-mid: #26030b;
    --legal-flow-red-soft: rgba(222, 36, 47, 0.10);
    --legal-flow-red-glow: rgba(222, 36, 47, 0.06);
    --legal-section-text-align: var(--programs-page-section-text-align);
    --legal-hero-padding-desktop: 170px 0 90px;
    --legal-hero-padding-mobile: 140px 0 70px;
    --legal-section-padding-desktop: 100px;
    --legal-section-padding-mobile: 70px;
    --legal-eyebrow-color: var(--color-red);
    --legal-eyebrow-size: var(--global-eyebrow-size);
    --legal-eyebrow-weight: 700;
    --legal-eyebrow-letter-spacing: 2px;
    --legal-eyebrow-margin-bottom: 18px;
    --legal-title-color: var(--color-light);
    --legal-title-size-desktop: var(--global-h2-size-desktop);
    --legal-title-size-tablet: var(--global-h2-size-tablet);
    --legal-title-size-mobile: var(--global-h2-size-mobile);
    --legal-title-line-height: var(--global-heading-line-height);
    --legal-title-letter-spacing: var(--global-heading-letter-spacing);
    --legal-title-margin-bottom: 22px;
    --legal-subtitle-color: rgba(250, 249, 254, 0.74);
    --legal-subtitle-size: var(--global-text-size-desktop);
    --legal-subtitle-size-mobile: var(--global-text-size-mobile);
    --legal-subtitle-line-height: 1.7;
    --legal-subtitle-width: 720px;
    --legal-card-bg: rgba(250, 249, 254, 0.045);
    --legal-card-border: rgba(250, 249, 254, 0.13);
    --legal-card-padding: 46px;
    --legal-card-padding-mobile: 26px;
    --legal-card-radius: 0px;
    --legal-content-color: rgba(250, 249, 254, 0.76);
    --legal-content-heading-color: var(--color-light);
    --legal-content-link-color: var(--color-red);
    --legal-content-font-size: 17px;
    --legal-content-font-size-mobile: 16px;
    --legal-content-line-height: 1.8;

    /* =========================
       BOOKING PANEL
    ========================= */
    --booking-panel-gallery-overlay-bg: #000000;
    --booking-panel-gallery-overlay-opacity: 0.28;
    --booking-panel-gallery-image-opacity: 0.82;
    --booking-panel-gallery-aspect-ratio: 4 / 3;
    --booking-panel-gallery-aspect-ratio-mobile: 1 / 1;
    --booking-panel-gallery-image-position: center center;
    --booking-panel-gallery-radius: 12px;
    --booking-panel-gallery-border: rgba(255, 255, 255, 0.12);
    --booking-panel-gallery-gap: 8px;
    --booking-panel-gallery-gap-mobile: 5px;

    /* Booking Dashboard App */
    --dashboard-app-bg: #09090d;
    --dashboard-app-card-bg: #101018;
    --dashboard-app-border: rgba(255, 255, 255, 0.12);
    --dashboard-app-text: #ffffff;
    --dashboard-app-text-muted: rgba(255, 255, 255, 0.56);
    --dashboard-app-accent: #de242f;
    --dashboard-app-accent-soft: rgba(222, 36, 47, 0.22);
    --dashboard-app-radius: 22px;
    --dashboard-app-radius-sm: 12px;
    --dashboard-app-gap: 8px;
    --dashboard-app-padding: 14px;
    --dashboard-app-header-size: 22px;
    --dashboard-app-title-size: 18px;
    --dashboard-app-body-size: 13px;
    --dashboard-app-small-size: 10px;
    --dashboard-app-row-h: 34px;
    --dashboard-app-row-h-desktop: 70px;
    --dashboard-app-head-h: 27px;
    --dashboard-app-head-h-desktop: 48px;
    --dashboard-app-filter-padding: 9px 18px;
    --dashboard-app-filter-size: 13.5px;
    --dashboard-app-filter-padding-desktop: 12px 26px;
    --dashboard-app-filter-size-desktop: 17px;
    --dashboard-app-manual-overlay: rgba(0, 0, 0, 0.42);
    --dashboard-app-inbox-bg: #09090d;
    --dashboard-service-dot-size: 16px;
    --dashboard-service-dot-size-mobile: 14px;
    --dashboard-service-dot-gap: 18px;
    --dashboard-service-dot-ring: rgba(8, 8, 12, 0.55);
    --dashboard-service-dot-active-glow: rgba(255, 255, 255, 0.4);
    --dashboard-service-dot-color-all: #ffffff;
    --dashboard-service-dot-color-personal-training: #de242f;
    --dashboard-service-dot-color-group-training-men: #2f80ed;
    --dashboard-service-dot-color-group-training-women: #ec4899;

    /* =========================
       FOOTER
    ========================= */
    --footer-bg: transparent;
    --footer-text: var(--color-light);
    --footer-muted: rgba(250, 249, 254, 0.68);
    --footer-link: var(--color-light);
    --footer-link-hover: var(--color-red);
    --footer-container-width-desktop: 1560px;
    --footer-container-padding-desktop: 24px;
    --footer-padding-top: 90px;
    --footer-padding-bottom: 72px;
    --footer-column-gap: clamp(48px, 6vw, 72px);
    --footer-heading-color: var(--color-light);
    --footer-heading-size: 20px;
    --footer-heading-size-mobile: 16px;
    --footer-menu-link-size-mobile: 15px;
    --footer-heading-weight: 700;
    --footer-heading-letter-spacing: 1px;
    --footer-heading-text-transform: uppercase;
    --footer-heading-margin-bottom: 28px;
    --footer-heading-underline-width: 45px;
    --footer-heading-underline-height: 3px;
    --footer-heading-underline-color: var(--color-red);
    --footer-heading-underline-gap: 13px;
    --footer-menu-link-size: 16px;
    --footer-menu-link-gap: 18px;
    --footer-contact-icon-size: 19px;
    --footer-contact-icon-color: var(--color-red);
    --footer-contact-text-size: 16px;
    --footer-contact-gap: 14px;
    --footer-contact-item-gap: 16px;
    --footer-hours-text-size: 16px;
    --footer-hours-gap: 14px;
    --footer-hours-border: rgba(250, 249, 254, 0.12);
    --footer-social-icon-size: 22px;
    --footer-social-box-size: 24px;
    --footer-social-gap: 16px;
    --footer-social-color: var(--color-light);
    --footer-social-color-hover: var(--color-red);
    --footer-bottom-border: rgba(250, 249, 254, 0.12);
    --footer-bottom-padding: 34px;
    --footer-bottom-logo-width: 150px;
    --footer-bottom-logo-max-height: 70px;
    --footer-bottom-logo-text-size: 24px;
    --footer-copyright-size: 14px;
    --footer-copyright-color: rgba(250, 249, 254, 0.62);
    --footer-container-columns: 1fr 0.95fr 1.1fr 1.05fr 0.85fr;
    --footer-container-tablet-columns: repeat(2, 1fr);
    --footer-container-mobile-columns: 1fr;
    --footer-bottom-gap: 18px;
    --footer-hours-mobile-gap: 4px;
    --footer-hours-mobile-direction: column;
    --footer-hours-mobile-justify: flex-start;
}

/* ==================================================
   2. RESET / BASE
================================================== */
* { margin: var(--global-zero); padding: var(--global-zero); box-sizing: var(--global-box-sizing); }
html { scroll-behavior: var(--html-scroll-behavior); }
html.menu-scroll-instant { scroll-behavior: auto !important; }
body { font-family: var(--global-body-font-family); font-size: var(--global-body-font-size); font-weight: var(--global-body-font-weight); color: var(--color-text); background: var(--color-bg); line-height: var(--body-line-height); letter-spacing: var(--global-body-letter-spacing); overflow-x: var(--body-overflow-x); }
body.menu-open { overflow: var(--menu-open-body-overflow); }
img, svg { display: block; }
img { max-width: 100%; height: var(--image-height-auto); }
a { color: inherit; text-decoration: var(--anchor-text-decoration); }
button, input, textarea, select { font: var(--form-font); }
button { cursor: var(--button-cursor); }
ul, ol { list-style-position: var(--list-style-position); }

/* ==================================================
   3. GLOBAL LAYOUT / TYPOGRAPHY / BUTTONS
================================================== */
.container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 var(--container-padding); }
.narrow-container { max-width: var(--container-narrow-width); }
.section { padding: var(--section-padding-desktop) 0; }
.section-alt { background: var(--section-alt-bg); }
.text-center { text-align: var(--text-center-align); }
.site-main { min-height: var(--site-main-min-height); }
h1, h2, h3, h4, h5, h6 { font-family: var(--global-heading-font-family); font-weight: var(--global-heading-font-weight); line-height: var(--global-heading-line-height); color: var(--color-text); letter-spacing: var(--global-heading-letter-spacing); text-transform: var(--global-heading-text-transform); }
.section-eyebrow, .hero-eyebrow { margin-bottom: var(--section-eyebrow-heading-gap-desktop, 18px); color: var(--color-primary); font-size: var(--font-xs); letter-spacing: var(--letter-large); text-transform: uppercase; }
.section-title, .page-title { margin-bottom: var(--section-heading-text-gap-desktop, 22px); font-size: var(--font-xl); }
.section-text, .page-subtitle, .page-content-section p { color: var(--color-text-muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--button-padding); border: 1px solid transparent; border-radius: var(--button-radius); font-family: var(--global-button-font-family); font-size: var(--button-font-size); font-weight: var(--button-font-weight); letter-spacing: var(--button-letter-spacing); line-height: var(--button-line-height); text-transform: var(--button-text-transform); white-space: var(--button-white-space); transition: var(--transition-main); }
.btn-primary { background: var(--button-bg); color: var(--button-text); border-color: var(--button-border); }
.btn-primary:hover { background: var(--button-bg-hover); color: var(--button-text-hover); border-color: var(--button-border-hover); }
.btn-ghost { padding: var(--button-ghost-padding); background: var(--button-ghost-bg); color: var(--button-ghost-text); border-color: var(--button-ghost-border); }
.btn-ghost:hover { background: var(--button-ghost-bg-hover); color: var(--button-ghost-text-hover); border-color: var(--button-ghost-border-hover); }

/* ==================================================
   4. HEADER / LANGUAGE / MOBILE MENU
================================================== */
.site-header { position: var(--header-position); top: var(--header-top); left: var(--header-left); z-index: var(--z-index-header); width: var(--header-width); height: var(--header-height); background: var(--header-bg-static); color: var(--header-text-static); border-bottom: 1px solid var(--header-border-static); transition: background-color var(--transition-header), border-color var(--transition-header), color var(--transition-header), box-shadow var(--transition-header); }
.site-header.is-scrolled, body.menu-open .site-header { background: var(--header-bg-scrolled); color: var(--header-text-scrolled); border-bottom-color: var(--header-border-scrolled); box-shadow: var(--header-shadow-scrolled); }
.header-container { height: 100%; display: grid; grid-template-columns: var(--header-grid-template); align-items: center; gap: var(--header-container-gap); }
.header-logo-wrap { justify-self: var(--header-logo-justify); grid-column: 1; min-width: max-content; }
.site-logo { display: inline-flex; align-items: center; max-width: var(--header-logo-width); }
.site-logo img { width: auto; max-width: var(--header-logo-width); max-height: var(--header-logo-max-height); }
.site-logo-text { color: currentColor; font-size: var(--header-logo-text-size); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--letter-small); }
.main-navigation { justify-self: var(--header-nav-justify); grid-column: 2; min-width: 0; }
.main-navigation ul, .mobile-navigation ul { list-style: none; }
.main-menu, .main-navigation .menu { display: flex; align-items: center; justify-content: center; gap: var(--header-menu-gap); list-style: none; white-space: nowrap; }
.main-menu li, .main-navigation .menu li { line-height: 1; }
.main-menu a, .main-navigation .menu a { position: relative; display: inline-flex; align-items: center; padding: var(--header-menu-link-padding); font-size: var(--header-menu-font-size); font-weight: var(--header-menu-font-weight); letter-spacing: var(--header-menu-letter-spacing); line-height: 1; text-transform: var(--header-menu-text-transform); transition: color var(--transition-main); white-space: nowrap; }
.main-menu a::after, .main-navigation .menu a::after { content: ""; position: absolute; left: 0; bottom: 1px; width: 0; height: var(--header-menu-underline-height); background: var(--header-menu-underline-color); transition: width var(--transition-main); }
.main-menu a:hover::after, .main-menu .current-menu-item > a::after, .main-navigation .menu a:hover::after, .main-navigation .menu .current-menu-item > a::after { width: 100%; }
.main-navigation .menu-item-has-children { position: relative; }
.main-navigation .menu-item-has-children > a { gap: 6px; padding-right: calc(var(--header-menu-link-padding, 8px) + 2px); }
.main-navigation .menu-item-has-children > a::before { content: ""; position: static; width: 0; height: 0; margin-top: 2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.85; transition: transform var(--transition-main); }
.main-navigation .menu-item-has-children:hover > a::before, .main-navigation .menu-item-has-children:focus-within > a::before { transform: rotate(180deg); }
.main-navigation .sub-menu { position: absolute; top: calc(100% + 14px); left: 50%; z-index: calc(var(--z-index-dropdown) + 2); display: flex; flex-direction: column; gap: 0; min-width: 220px; margin: 0; padding: 10px 0; list-style: none; border: 1px solid rgba(250, 249, 254, 0.14); background: rgba(0, 0, 8, 0.96); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); transition: opacity var(--transition-main), visibility var(--transition-main), transform var(--transition-main); }
.main-navigation .menu-item-has-children:hover > .sub-menu, .main-navigation .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.main-navigation .sub-menu a { display: block; width: 100%; padding: 12px 20px; white-space: nowrap; }
.main-navigation .sub-menu a::after { display: none; }
.main-navigation .sub-menu a:hover, .main-navigation .sub-menu .current-menu-item > a { color: var(--color-red); }
.mobile-navigation .menu-item-has-children > a { justify-content: space-between; width: 100%; }
.mobile-navigation .menu-item-has-children > a::after { content: "+"; position: static; width: auto; height: auto; background: none; font-size: 1.15rem; line-height: 1; opacity: 0.9; transition: transform var(--transition-main); }
.mobile-navigation .menu-item-has-children.is-submenu-open > a::after { content: "−"; transform: none; }
.mobile-navigation .sub-menu { display: none; flex-direction: column; gap: 10px; margin: 8px 0 0 14px; padding: 0 0 0 12px; list-style: none; border-left: 1px solid rgba(250, 249, 254, 0.16); }
.mobile-navigation .menu-item-has-children.is-submenu-open > .sub-menu { display: flex; }
.header-actions { justify-self: var(--header-actions-justify); grid-column: 3; display: flex; align-items: center; gap: var(--header-actions-gap); flex-wrap: var(--header-actions-flex-wrap); white-space: var(--header-actions-white-space); min-width: max-content; }
.header-contact-links { display: flex; align-items: center; flex-direction: row; flex-wrap: nowrap; gap: var(--header-contact-gap); white-space: var(--header-contact-white-space); min-width: var(--header-contact-min-width); }
.header-contact-link { display: inline-flex; align-items: center; flex-wrap: nowrap; gap: var(--header-contact-link-gap); min-width: var(--header-contact-min-width); color: var(--header-contact-color); font-size: var(--header-contact-text-size); font-weight: var(--header-contact-text-weight); letter-spacing: var(--header-contact-letter-spacing); line-height: 1; white-space: var(--header-contact-white-space); transition: color var(--transition-main), transform var(--transition-main); }
.header-contact-link:hover { color: var(--header-contact-hover-color); transform: var(--hover-lift-small); }
.header-contact-icon { flex: 0 0 auto; width: var(--header-contact-icon-size); height: var(--header-contact-icon-size); color: currentColor; }
.header-contact-text { display: inline-block; min-width: max-content; white-space: nowrap; line-height: 1; }
.header-contact-icon svg, .header-social-link svg, .mobile-contact-icon svg, .footer-contact-icon svg, .contact-info-icon svg, .contact-social-link svg, .footer-social-link svg { width: 100%; height: 100%; fill: currentColor; }
.header-socials { display: var(--header-social-display); align-items: center; flex: 0 0 auto; gap: var(--header-social-gap); white-space: nowrap; }
.header-social-link { display: inline-flex; align-items: center; justify-content: center; width: var(--header-social-size); height: var(--header-social-size); color: var(--header-social-color); transition: color var(--transition-main), transform var(--transition-main), opacity var(--transition-main); }
.header-social-link:hover { color: var(--header-social-hover-color); transform: var(--header-social-hover-transform); }
.header-mobile-left, .menu-toggle { display: none; }
.menu-toggle { width: var(--mobile-menu-toggle-width); height: var(--mobile-menu-toggle-height); border: var(--mobile-menu-toggle-border); background: var(--mobile-menu-toggle-bg); padding: var(--mobile-menu-toggle-padding); color: currentColor; }
.menu-toggle span { display: block; width: 100%; height: var(--mobile-menu-toggle-line-height); margin-bottom: var(--mobile-menu-toggle-line-gap); background: var(--mobile-menu-toggle-color); transition: transform var(--transition-main), opacity var(--transition-main); }
.menu-toggle span:last-child { margin-bottom: 0; }
body.menu-open .menu-toggle span:nth-child(1) { transform: var(--mobile-menu-toggle-first-line-transform-open); }
body.menu-open .menu-toggle span:nth-child(2) { opacity: var(--mobile-menu-toggle-middle-line-opacity-open); }
body.menu-open .menu-toggle span:nth-child(3) { transform: var(--mobile-menu-toggle-last-line-transform-open); }
.language-switcher { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; white-space: nowrap; }
.language-current { display: inline-flex; align-items: center; gap: var(--language-current-gap); padding: var(--language-current-padding); border: 0; background: transparent; color: var(--language-current-color); line-height: 1; transition: color var(--transition-main); }
.language-current:hover, .language-switcher.is-open .language-current { color: var(--language-current-hover-color); }
.language-flag { display: inline-flex; align-items: center; width: var(--language-flag-width); }
.language-flag img { width: var(--language-flag-width); height: auto; }
.language-code { font-size: var(--language-code-size); font-weight: var(--language-code-weight); letter-spacing: var(--language-code-letter-spacing); line-height: 1; }
.language-arrow { font-size: var(--language-arrow-size); line-height: 1; transition: transform var(--transition-main); }
.language-switcher.is-open .language-arrow { transform: rotate(180deg); }
.language-dropdown { position: absolute; top: var(--language-dropdown-top); right: 0; z-index: var(--z-index-dropdown); width: var(--language-dropdown-width); padding: var(--language-dropdown-padding); border: 1px solid var(--language-dropdown-border); background: var(--language-dropdown-bg); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--transition-main), visibility var(--transition-main), transform var(--transition-main); }
.language-switcher.is-open .language-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.language-dropdown-link { display: flex; align-items: center; gap: var(--language-dropdown-link-gap); padding: var(--language-dropdown-link-padding); color: var(--language-dropdown-link-color); font-size: var(--language-dropdown-font-size); line-height: 1; transition: color var(--transition-main), background-color var(--transition-main); }
.language-dropdown-link:hover { color: var(--language-dropdown-link-hover-color); background: var(--language-dropdown-link-hover-bg); }
.mobile-menu-panel { position: fixed; top: 0; left: 0; z-index: var(--z-index-mobile-menu); width: var(--mobile-menu-panel-width); height: 100dvh; max-height: 100dvh; padding: var(--mobile-menu-padding); border-bottom: var(--mobile-menu-panel-border); background: var(--mobile-menu-bg); color: var(--mobile-menu-text); opacity: var(--mobile-menu-panel-hidden-opacity); visibility: hidden; transform: var(--mobile-menu-panel-hidden-transform); transition: transform var(--transition-header), opacity var(--transition-header), visibility var(--transition-header); box-sizing: border-box; overflow-y: auto; overflow-x: hidden; }
body.menu-open .mobile-menu-panel { opacity: var(--mobile-menu-panel-open-opacity); visibility: visible; transform: var(--mobile-menu-panel-open-transform); }
.mobile-menu, .mobile-navigation .menu { display: flex; flex-direction: column; gap: var(--mobile-menu-link-gap); list-style: none; }
.mobile-menu a, .mobile-navigation .menu a { display: inline-flex; font-family: var(--mobile-menu-link-font-family); font-size: var(--mobile-menu-link-size); font-weight: var(--mobile-menu-link-font-weight); line-height: var(--mobile-menu-link-line-height); letter-spacing: var(--mobile-menu-link-letter-spacing); text-transform: var(--mobile-menu-link-text-transform); transition: color var(--transition-main); }
.mobile-menu a:hover, .mobile-menu .current-menu-item > a, .mobile-navigation .menu a:hover, .mobile-navigation .menu .current-menu-item > a { color: var(--mobile-menu-link-hover-color); }
.mobile-menu-divider { border-top: 1px solid var(--mobile-extra-border); }
.mobile-menu-contact { margin-top: var(--mobile-extra-margin-top); padding-top: var(--mobile-extra-padding-top); border-top: 0; }
.mobile-menu-language--bottom { margin-top: auto; }
.mobile-contact-links { display: flex; flex-direction: column; gap: var(--mobile-contact-gap); margin-bottom: var(--mobile-contact-links-margin-bottom); }
.mobile-contact-link { display: inline-flex; align-items: center; gap: var(--mobile-contact-link-gap); width: fit-content; color: var(--mobile-contact-color); font-size: var(--mobile-contact-size); line-height: 1.4; transition: color var(--transition-main); }
.mobile-contact-link:hover { color: var(--mobile-contact-hover-color); }
.mobile-contact-icon { flex: 0 0 auto; width: var(--mobile-contact-icon-size); height: var(--mobile-contact-icon-size); color: var(--color-red); }
.language-switcher-mobile { display: var(--mobile-language-switcher-display); margin-top: var(--mobile-language-switcher-margin-top); }
.language-switcher-mobile .language-dropdown { left: var(--mobile-language-dropdown-left); right: var(--mobile-language-dropdown-right); }

/* ==================================================
   5. FRONT PAGE SECTIONS
================================================== */
.hero-section { font-family: var(--hero-font-family); position: relative; display: flex; align-items: center; min-height: var(--hero-min-height-desktop); overflow: hidden; padding-top: var(--hero-padding-top-desktop); padding-bottom: var(--hero-padding-bottom-desktop); background: var(--hero-bg); color: var(--hero-color); }
.hero-media, .hero-media picture, .hero-image, .hero-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media { z-index: var(--z-index-bg); }
.hero-media picture { display: block; }
.hero-image { object-fit: var(--image-object-fit-cover); object-position: var(--hero-image-position-desktop); opacity: var(--hero-image-opacity); }
.hero-overlay { z-index: var(--z-index-content); background: var(--hero-overlay-color); opacity: var(--hero-overlay-opacity); }
.hero-aurora-layer {
    position: absolute;
    inset: 0;
    z-index: calc(var(--z-index-bg) + 1);
    pointer-events: none;
    overflow: hidden;
}
.hero-aurora-layer__readability {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse var(--hero-aurora-readability-size-x) var(--hero-aurora-readability-size-y) at var(--hero-aurora-readability-pos-x) var(--hero-aurora-readability-pos-y),
            var(--hero-aurora-readability-strong) 0%,
            var(--hero-aurora-readability-mid) 38%,
            var(--hero-aurora-readability-soft) 62%,
            transparent 78%
        ),
        radial-gradient(circle at 78% 22%, var(--hero-aurora-readability-red) 0%, transparent 42%);
}
.hero-container { position: relative; z-index: var(--z-index-overlay-content); display: flex; align-items: center; justify-content: var(--hero-content-align); min-height: calc(var(--hero-min-height-desktop) - var(--header-height)); }
.hero-content { width: 100%; max-width: var(--hero-content-width); text-align: var(--hero-text-align); }
.hero-title { font-family: var(--hero-title-font-family); max-width: var(--hero-content-width); margin-bottom: var(--hero-title-margin-bottom); color: var(--hero-title-color); font-size: var(--hero-title-size-desktop); font-weight: var(--hero-title-weight); line-height: var(--hero-title-line-height); letter-spacing: var(--hero-title-letter-spacing); text-transform: var(--hero-title-text-transform); }
.hero-text { max-width: var(--hero-text-width); margin-bottom: var(--hero-text-margin-bottom); color: var(--hero-text-color); font-size: var(--hero-text-size-desktop); font-weight: var(--hero-text-weight); line-height: var(--hero-text-line-height); }
.hero-actions { display: flex; align-items: center; gap: var(--hero-actions-gap); flex-wrap: wrap; }

.programs-section { font-family: var(--programs-font-family); position: relative; overflow: hidden; padding: var(--programs-section-padding-desktop) 0; background: var(--programs-bg-base); color: var(--color-light); }
.programs-bg { position: absolute; inset: 0; z-index: var(--z-index-bg); opacity: var(--programs-gradient-opacity); background: radial-gradient(circle at 100% 100%, var(--programs-gradient-red) 0%, transparent 34%), radial-gradient(circle at 85% 85%, var(--programs-gradient-dark-red) 0%, transparent 42%), linear-gradient(135deg, var(--programs-gradient-black) 0%, var(--programs-bg-base) 46%, var(--programs-gradient-dark-red) 100%); }
.programs-container { position: relative; z-index: var(--z-index-content); }
.programs-intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--programs-intro-gap); align-items: end; margin-bottom: var(--programs-intro-margin-bottom); }
.programs-eyebrow { margin-bottom: var(--programs-eyebrow-margin-bottom); color: var(--programs-eyebrow-color); font-size: var(--programs-eyebrow-size); font-weight: var(--programs-eyebrow-weight); letter-spacing: var(--programs-eyebrow-letter-spacing); line-height: 1; text-transform: var(--programs-eyebrow-text-transform); }
.programs-title { font-family: var(--programs-title-font-family); max-width: var(--programs-title-max-width); color: var(--programs-title-color); font-size: var(--programs-title-size-desktop); font-weight: var(--programs-title-weight); line-height: var(--programs-title-line-height); letter-spacing: var(--programs-title-letter-spacing); }
.programs-intro-right { justify-self: end; display: flex; flex-direction: column; align-items: var(--programs-button-align); max-width: var(--programs-description-max-width); }
.programs-description { margin-bottom: var(--programs-description-margin-bottom); color: var(--programs-description-color); font-size: var(--programs-description-size); line-height: var(--programs-description-line-height); }
.programs-button { margin-left: var(--programs-button-margin-left); }
.programs-grid { display: grid; grid-template-columns: repeat(var(--programs-grid-columns), minmax(0, 1fr)); gap: var(--programs-grid-gap); }
.program-card { position: relative; min-height: var(--program-card-min-height); overflow: hidden; border: 1px solid var(--program-card-border); border-radius: var(--program-card-radius); background: var(--program-card-bg); color: var(--color-light); }
.program-card-media, .program-card-image, .program-card-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.program-card-media { z-index: var(--z-index-bg); }
.program-card-image { object-fit: var(--image-object-fit-cover); object-position: var(--program-card-image-position); opacity: var(--program-card-image-opacity); transition: transform var(--transition-header); }
.program-card-overlay { z-index: var(--z-index-content); background: var(--program-card-overlay-color); opacity: var(--program-card-overlay-opacity); transition: opacity var(--transition-main); }
.program-card-content { position: relative; z-index: var(--z-index-overlay-content); display: flex; flex-direction: column; justify-content: flex-end; min-height: var(--program-card-min-height); padding: var(--program-card-padding); }
.program-card-number { position: relative; display: inline-flex; width: fit-content; margin-bottom: var(--program-card-number-margin-bottom); padding-bottom: 11px; color: var(--program-card-number-color); font-size: var(--program-card-number-size); font-weight: var(--program-card-number-weight); letter-spacing: var(--program-card-number-letter-spacing); line-height: 1; }
.program-card-number::after { content: ""; position: absolute; left: 0; bottom: 0; width: var(--program-card-number-underline-width); height: var(--program-card-number-underline-height); background: var(--program-card-number-underline-color); }
.program-card-title { font-family: var(--programs-title-font-family); margin-bottom: var(--program-card-title-margin-bottom); color: var(--program-card-title-color); font-size: var(--program-card-title-size); font-weight: var(--program-card-title-weight); line-height: var(--program-card-title-line-height); text-transform: var(--program-card-title-transform); }
.program-card-text { margin-bottom: var(--program-card-text-margin-bottom); color: var(--program-card-text-color); font-size: var(--program-card-text-size); line-height: var(--program-card-text-line-height); overflow: visible; display: block; }
.program-card-title { overflow-wrap: anywhere; word-break: normal; hyphens: auto; }
.program-card-link { display: inline-flex; align-items: center; gap: var(--program-card-link-gap); width: fit-content; color: var(--program-card-link-color); font-size: var(--program-card-link-size); font-weight: var(--program-card-link-weight); letter-spacing: var(--program-card-link-letter-spacing); line-height: 1; text-transform: uppercase; transition: color var(--transition-main); }
.program-card-link span { transition: transform var(--transition-main); }
.program-card:hover .program-card-image { transform: scale(var(--program-card-image-scale-hover)); }
.program-card:hover .program-card-overlay { opacity: var(--program-card-overlay-opacity-hover); }
.program-card:hover .program-card-link { color: var(--program-card-link-hover-color); }
.program-card:hover .program-card-link span { transform: var(--hover-arrow-move); }

/* Tablet + desktop: keep the number + red line right above the heading, and give
   the heading and description a FIXED height (min-height floor + line-clamp ceiling)
   so every card's content block is exactly the same height. Because the content
   is bottom-anchored inside equal-height cards, an identical content height makes
   the number and its red underline line up on every card, regardless of how long
   each title/description is. The mobile carousel (<=760px) keeps the full copy. */
@media (min-width: 761px) {
    .programs-section .program-card-number {
        position: relative;
        margin-bottom: 14px;
    }
    .programs-section .program-card-title {
        min-height: calc(var(--program-card-title-line-height, 1.05) * 2em);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .programs-section .program-card-text {
        min-height: calc(var(--program-card-text-line-height, 1.6) * 3em);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}


.equipment-section { font-family: var(--programs-font-family); position: relative; overflow: hidden; padding: var(--equipment-section-padding-desktop) 0; background: var(--equipment-section-bg); color: var(--color-dark); }
.equipment-container { position: relative; z-index: var(--z-index-content); }
.equipment-heading { max-width: var(--equipment-heading-width); margin: 0 auto var(--equipment-heading-margin-bottom); }
.equipment-eyebrow { margin-bottom: var(--equipment-eyebrow-margin-bottom); color: var(--equipment-eyebrow-color); font-size: var(--equipment-eyebrow-size); font-weight: var(--equipment-eyebrow-weight); letter-spacing: var(--equipment-eyebrow-letter-spacing); line-height: 1; text-transform: var(--equipment-eyebrow-transform); }
.equipment-title { font-family: var(--programs-title-font-family); margin-bottom: var(--equipment-title-margin-bottom); color: var(--equipment-title-color); font-size: var(--equipment-title-size-desktop); font-weight: var(--equipment-title-weight); line-height: var(--equipment-title-line-height); letter-spacing: var(--equipment-title-letter-spacing); }
.equipment-text { color: var(--equipment-text-color); font-size: var(--equipment-text-size); line-height: var(--equipment-text-line-height); }
.equipment-list { display: var(--equipment-list-display); justify-content: var(--equipment-list-justify); flex-wrap: wrap; gap: var(--equipment-list-gap); max-width: var(--equipment-list-max-width); margin: 0 auto var(--equipment-list-margin-bottom); }
.equipment-name { display: inline-flex; align-items: center; justify-content: center; padding: var(--equipment-name-padding); border: 1px solid var(--equipment-name-border); border-radius: var(--equipment-name-radius); background: var(--equipment-name-bg); color: var(--equipment-name-color); font-size: var(--equipment-name-size); font-weight: var(--equipment-name-weight); letter-spacing: var(--equipment-name-letter-spacing); line-height: 1; text-transform: var(--equipment-name-transform); }
.equipment-carousel { position: relative; display: flex; align-items: center; gap: var(--equipment-carousel-gap); width: var(--equipment-carousel-width); margin: var(--equipment-carousel-margin); }
.equipment-carousel-viewport { width: 100%; overflow: hidden; border: 1px solid var(--equipment-carousel-box-border); border-radius: var(--equipment-carousel-box-radius); background: var(--equipment-carousel-box-bg); padding: var(--equipment-carousel-box-padding); }
.equipment-carousel-track { display: flex; transition: transform var(--transition-header); will-change: transform; }
.equipment-slide { position: relative; flex: 0 0 100%; height: var(--equipment-slide-height); overflow: hidden; border-radius: var(--equipment-slide-radius); }
.equipment-slide::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--equipment-slide-overlay-bg); opacity: var(--equipment-slide-overlay-opacity); }
.equipment-slide-image { position: relative; z-index: 0; }
.equipment-slide-image { width: 100%; height: 100%; object-fit: cover; object-position: var(--equipment-slide-image-position); opacity: var(--equipment-slide-image-opacity); }
.equipment-carousel-arrow { position: absolute; top: 50%; z-index: var(--z-index-overlay-content); display: inline-flex; align-items: center; justify-content: center; width: var(--equipment-arrow-size); height: var(--equipment-arrow-size); border: 1px solid var(--equipment-arrow-border); border-radius: var(--equipment-arrow-radius); background: var(--equipment-arrow-bg); color: var(--equipment-arrow-color); font-size: var(--equipment-arrow-font-size); line-height: 1; cursor: pointer; transform: translateY(-50%); transition: background-color var(--transition-main), color var(--transition-main), transform var(--transition-main); }
.equipment-carousel-arrow:hover { background: var(--equipment-arrow-bg-hover); color: var(--equipment-arrow-color-hover); transform: translateY(-50%) scale(1.08); }
.equipment-carousel-arrow-prev { left: var(--equipment-arrow-offset); }
.equipment-carousel-arrow-next { right: var(--equipment-arrow-offset); }

.membership-section { font-family: var(--programs-font-family); position: relative; overflow: hidden; padding: var(--membership-section-padding-desktop) 0; background: var(--membership-bg-base); color: var(--color-light); }
.membership-bg { position: absolute; inset: 0; z-index: var(--z-index-bg); opacity: var(--membership-gradient-opacity); background: radial-gradient(circle at 0% 100%, var(--membership-gradient-red) 0%, transparent 34%), radial-gradient(circle at 16% 90%, var(--membership-gradient-dark-red) 0%, transparent 42%), linear-gradient(135deg, var(--membership-gradient-black) 0%, var(--membership-bg-base) 48%, var(--membership-gradient-dark-red) 100%); }
.membership-container { position: relative; z-index: var(--z-index-content); }
.membership-heading { max-width: var(--membership-heading-width); margin: 0 auto var(--membership-heading-margin-bottom); }
.membership-eyebrow { margin-bottom: var(--membership-eyebrow-margin-bottom); color: var(--membership-eyebrow-color); font-size: var(--membership-eyebrow-size); font-weight: var(--membership-eyebrow-weight); letter-spacing: var(--membership-eyebrow-letter-spacing); line-height: 1; text-transform: var(--membership-eyebrow-transform); }
.membership-title { font-family: var(--programs-title-font-family); margin-bottom: var(--membership-title-margin-bottom); color: var(--membership-title-color); font-size: var(--membership-title-size-desktop); font-weight: var(--membership-title-weight); line-height: var(--membership-title-line-height); letter-spacing: var(--membership-title-letter-spacing); }
.membership-text { color: var(--membership-text-color); font-size: var(--membership-text-size); line-height: var(--membership-text-line-height); }
.membership-selector { display: var(--membership-selector-display); flex-wrap: nowrap; justify-content: var(--membership-selector-justify); align-items: stretch; gap: var(--membership-selector-gap); width: 100%; max-width: 100%; margin: 0 auto var(--membership-selector-margin-bottom); padding: var(--membership-selector-padding); border: 1px solid var(--membership-selector-border); border-radius: var(--membership-selector-radius); background: var(--membership-selector-bg); box-sizing: border-box; }
.membership-selector-button { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; padding: var(--membership-selector-button-padding); border: 0; border-radius: var(--membership-selector-button-radius); background: var(--membership-selector-button-bg); color: var(--membership-selector-button-color); font-family: var(--global-button-font-family); font-size: var(--membership-selector-button-size); font-weight: var(--membership-selector-button-weight); letter-spacing: var(--membership-selector-button-letter-spacing); line-height: 1.1; text-transform: var(--membership-selector-button-transform); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; transition: background-color var(--transition-main), color var(--transition-main), box-shadow var(--transition-main); }
.membership-selector-button.is-active { background: var(--membership-selector-button-active-bg); color: var(--membership-selector-button-active-color); box-shadow: var(--membership-selector-button-glow); }
.membership-grid { display: grid; grid-template-columns: repeat(var(--membership-grid-columns), minmax(0, 1fr)); gap: var(--membership-grid-gap); scroll-behavior: smooth; }
.membership-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: visible; padding: var(--membership-card-padding); border: 1px solid var(--membership-card-border); border-radius: var(--membership-card-radius); background: var(--membership-card-bg); opacity: var(--membership-card-opacity-inactive); box-shadow: var(--membership-card-glow-soft); transition: transform var(--membership-card-transition-duration) var(--membership-card-transition-ease), box-shadow var(--membership-card-transition-duration) var(--membership-card-transition-ease), border-color var(--membership-card-transition-duration) var(--membership-card-transition-ease), background-color var(--membership-card-transition-duration) var(--membership-card-transition-ease), opacity var(--membership-card-transition-duration) var(--membership-card-transition-ease); }
.membership-card.is-active { background: var(--membership-card-bg-active); border-color: var(--membership-card-border-active); box-shadow: var(--membership-card-glow-active); opacity: var(--membership-card-opacity-active); transform: var(--membership-card-transform-active); }
.membership-card.is-prev, .membership-card.is-next { transform: var(--membership-card-transform-prev-next); }
.membership-card-title { font-family: var(--programs-title-font-family); margin-bottom: var(--membership-card-title-margin-bottom); color: var(--membership-card-title-color); font-size: var(--membership-card-title-size); font-weight: var(--membership-card-title-weight); line-height: var(--membership-card-title-line-height); }
.membership-price-wrap { display: flex; align-items: flex-end; gap: 8px; margin-bottom: var(--membership-price-margin-bottom); }
.membership-price { color: var(--membership-price-color); font-size: var(--membership-price-size); font-weight: var(--membership-price-weight); line-height: 1; }
.membership-period { color: var(--membership-period-color); font-size: var(--membership-period-size); line-height: 1.3; }
.membership-card-text { margin-bottom: var(--membership-card-text-margin-bottom); color: var(--membership-card-text-color); font-size: var(--membership-card-text-size); line-height: var(--membership-card-text-line-height); }
.membership-features { display: grid; gap: var(--membership-features-gap); margin-bottom: var(--membership-features-margin-bottom); list-style: none; }
.membership-features li { position: relative; padding-left: 18px; color: var(--membership-feature-color); font-size: var(--membership-feature-size); line-height: 1.5; }
.membership-features li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 7px; height: 7px; border-radius: 999px; background: var(--membership-feature-bullet-color); transform: translateY(-50%); }
.membership-button { width: var(--membership-button-width); margin-top: auto; }

.membership-card-ribbon { margin: 0 0 12px; }
.membership-card-ribbon span { display: inline-block; padding: 5px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--membership-gold-dark) 0%, var(--membership-gold) 42%, var(--membership-gold-light) 100%); color: #1a0f02; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; line-height: 1; text-transform: uppercase; box-shadow: 0 4px 18px rgba(212, 175, 55, 0.35); }

.membership-card--gold { border-color: rgba(212, 175, 55, 0.55); background: linear-gradient(165deg, rgba(212, 175, 55, 0.12) 0%, rgba(250, 249, 254, 0.05) 38%, rgba(10, 8, 4, 0.35) 100%); box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.12) inset, 0 12px 40px rgba(0, 0, 0, 0.28); }
.membership-card--gold .membership-price { color: var(--membership-gold-light); text-shadow: 0 0 22px rgba(212, 175, 55, 0.35); }
.membership-card--gold .membership-features li::before { background: linear-gradient(180deg, var(--membership-gold-light), var(--membership-gold)); }

.membership-selector-button--gold:not(.is-active) { color: #f8efd0; box-shadow: inset 0 0 0 1px var(--membership-gold-muted); }
.membership-selector-button--gold.is-active { background: linear-gradient(135deg, var(--membership-gold-dark) 0%, var(--membership-gold) 55%, var(--membership-gold-light) 100%); color: #120b02; box-shadow: 0 0 26px rgba(212, 175, 55, 0.45); }

@media (min-width: 761px) {
    .membership-section .membership-selector {
        width: auto;
        max-width: var(--membership-selector-max-width-desktop);
    }
}

.membership-dot--gold:not(.is-active) { background: rgba(212, 175, 55, 0.42); }
.membership-dot--gold.is-active { background: linear-gradient(90deg, var(--membership-gold-dark), var(--membership-gold), var(--membership-gold-light)); }

.partnerships-section { font-family: var(--programs-font-family); position: relative; overflow: visible; padding: var(--partnerships-section-padding-desktop) 0; background: var(--partnerships-bg-base); color: var(--color-light); }
.partnerships-bg { position: absolute; inset: 0; z-index: var(--z-index-bg); opacity: 0; pointer-events: none; }
.partnerships-container { position: relative; z-index: var(--z-index-content); }
.partnerships-heading { max-width: var(--partnerships-heading-width); margin: 0 auto var(--partnerships-heading-margin-bottom); }
.partnerships-eyebrow { margin-bottom: var(--partnerships-eyebrow-margin-bottom); color: var(--partnerships-eyebrow-color); font-size: var(--partnerships-eyebrow-size); font-weight: var(--partnerships-eyebrow-weight); letter-spacing: var(--partnerships-eyebrow-letter-spacing); line-height: 1; text-transform: var(--partnerships-eyebrow-transform); }
.partnerships-title { font-family: var(--programs-title-font-family); margin-bottom: var(--partnerships-title-margin-bottom); color: var(--partnerships-title-color); font-size: var(--partnerships-title-size-desktop); font-weight: var(--partnerships-title-weight); line-height: var(--partnerships-title-line-height); letter-spacing: var(--partnerships-title-letter-spacing); }
.partnerships-text { color: var(--partnerships-text-color); font-size: var(--partnerships-text-size); line-height: var(--partnerships-text-line-height); }
.partnerships-marquee-shell { width: 100%; max-width: 100%; margin-top: var(--partnerships-marquee-margin-top); margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.partnerships-marquee { position: relative; width: 100%; overflow: hidden; touch-action: pan-x; cursor: grab; scrollbar-width: none; -ms-overflow-style: none; contain: layout style paint; transform: translateZ(0); }
.partnerships-marquee.is-dragging { cursor: grabbing; }
.partnerships-marquee::-webkit-scrollbar { display: none; width: 0; height: 0; }
.partnerships-marquee-track { display: flex; width: max-content; max-width: none; justify-content: flex-start; transform: translate3d(0, 0, 0); backface-visibility: hidden; }
.partnerships-marquee-track.is-css-fallback { will-change: transform; animation: partnerships-marquee-scroll var(--partner-logo-scroll-speed, var(--partnerships-marquee-duration, 28s)) linear infinite; }
.partnerships-marquee.is-dragging .partnerships-marquee-track.is-css-fallback { animation-play-state: paused; }
.partnerships-slide { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 var(--partnerships-slide-width); width: var(--partnerships-slide-width); min-width: var(--partnerships-slide-width); max-width: var(--partnerships-slide-width); padding: 0 2px; border: 0; border-radius: 0; background: transparent; text-align: center; text-decoration: none; color: inherit; user-select: none; -webkit-user-select: none; box-sizing: border-box; }
.partnerships-marquee-group { display: flex; flex: 0 0 auto; flex-shrink: 0; justify-content: flex-start; gap: var(--partnerships-marquee-gap); width: auto; max-width: none; margin: 0; padding-right: var(--partnerships-marquee-gap); }
.partnerships-marquee-group--clone { display: flex; }
a.partnerships-slide:hover, a.partnerships-slide:focus-visible { background: transparent; }

@keyframes partnerships-marquee-scroll {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(var(--partner-logo-animation-distance, -50%), 0, 0); }
}
.partnerships-slide-logo-wrap { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--partnerships-logo-max-height); }
.partnerships-slide-logo { display: block; max-width: 100%; max-height: var(--partnerships-logo-max-height); width: auto; height: auto; object-fit: contain; opacity: var(--partnerships-logo-opacity); pointer-events: none; }
.partnerships-slide-discount { margin-top: var(--partnerships-discount-margin-top); color: var(--color-light); font-size: var(--partnerships-discount-size); font-weight: var(--partnerships-discount-weight); line-height: 1.35; pointer-events: none; }
.partnerships-slide-description { margin-top: var(--partnerships-description-margin-top); color: var(--partnerships-description-color); font-size: var(--partnerships-description-size); line-height: 1.45; pointer-events: none; }

@media (min-width: 761px) {
    .partnerships-marquee-shell { padding-left: 0; padding-right: 0; box-sizing: border-box; }
    .partnerships-marquee { overflow: hidden; cursor: default; touch-action: none; }
    .partnerships-marquee-track { display: flex; width: max-content; max-width: none; margin: 0; will-change: transform; }
    .partnerships-marquee-group { flex: 0 0 auto; justify-content: flex-start; gap: var(--partnerships-marquee-gap); width: auto; max-width: none; padding-right: 0; }
    .partnerships-marquee-group--clone { display: flex; }
    .partnerships-slide { flex: 0 0 var(--partnerships-slide-width); width: var(--partnerships-slide-width); min-width: var(--partnerships-slide-width); max-width: var(--partnerships-slide-width); padding: 0 2px; }
}

@media (prefers-reduced-motion: reduce) {
    .partnerships-marquee.is-static { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; cursor: auto; touch-action: pan-x; }
    .partnerships-marquee.is-static .partnerships-marquee-track { transform: none !important; }
    .partnerships-marquee-track.is-css-fallback { animation: none !important; will-change: auto !important; }
}

.about-section { font-family: var(--about-font-family); position: relative; display: flex; align-items: center; min-height: var(--about-section-min-height); overflow: hidden; padding: var(--about-section-padding-desktop) 0; background: var(--about-bg); color: var(--about-color); }
.about-media, .about-bg-image, .about-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.about-media { z-index: var(--z-index-bg); }
.about-bg-image { object-fit: var(--image-object-fit-cover); object-position: var(--about-bg-position-desktop); opacity: var(--about-image-opacity); }
.about-overlay { z-index: var(--z-index-content); background: var(--about-overlay-color); opacity: var(--about-overlay-opacity); }
.about-container { position: relative; z-index: var(--z-index-overlay-content); }
.about-content { max-width: var(--about-content-width); margin: 0 auto; }
.about-eyebrow { margin-bottom: var(--about-eyebrow-margin-bottom); color: var(--about-eyebrow-color); font-size: var(--about-eyebrow-size); font-weight: var(--about-eyebrow-weight); letter-spacing: var(--about-eyebrow-letter-spacing); line-height: 1; text-transform: var(--about-eyebrow-text-transform); }
.about-title { font-family: var(--about-title-font-family); margin-bottom: var(--about-title-margin-bottom); color: var(--about-title-color); font-size: var(--about-title-size-desktop); font-weight: var(--about-title-weight); line-height: var(--about-title-line-height); letter-spacing: var(--about-title-letter-spacing); }
.about-text { max-width: var(--about-text-width); margin: 0 auto; color: var(--about-text-color); font-size: var(--about-text-size-desktop); line-height: var(--about-text-line-height); }

/* ==================================================
   6. BMI / LOCATION / FAQ / HOME BLOG
================================================== */
.bmi-section { font-family: var(--bmi-font-family); padding: var(--bmi-section-padding-desktop) 0; background: var(--bmi-section-bg); color: var(--color-dark); }
.bmi-container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bmi-grid-gap); align-items: center; }
.bmi-eyebrow, .location-eyebrow, .faq-eyebrow, .blog-eyebrow, .contact-page-eyebrow, .contact-location-eyebrow, .programs-page-eyebrow, .blog-page-eyebrow, .legal-page-eyebrow { line-height: 1; text-transform: uppercase; }
.bmi-eyebrow { margin-bottom: var(--bmi-eyebrow-margin-bottom); color: var(--bmi-eyebrow-color); font-size: var(--bmi-eyebrow-size); font-weight: var(--bmi-eyebrow-weight); letter-spacing: var(--bmi-eyebrow-letter-spacing); }
.bmi-title { font-family: var(--bmi-title-font-family); margin-bottom: var(--bmi-title-margin-bottom); color: var(--bmi-title-color); font-size: var(--bmi-title-size-desktop); font-weight: var(--bmi-title-weight); line-height: var(--bmi-title-line-height); letter-spacing: var(--bmi-title-letter-spacing); }
.bmi-text { max-width: var(--bmi-text-width); margin-bottom: var(--bmi-text-margin-bottom); color: var(--bmi-text-color); font-size: var(--bmi-text-size); line-height: var(--bmi-text-line-height); }
.bmi-form { display: grid; gap: var(--bmi-form-gap); max-width: var(--bmi-form-width); }
.bmi-input-group { display: flex; flex-direction: column; }
.bmi-input-group label { margin-bottom: var(--bmi-label-margin-bottom); color: var(--bmi-label-color); font-size: var(--bmi-label-size); font-weight: var(--bmi-label-weight); letter-spacing: var(--bmi-label-letter-spacing); line-height: 1; text-transform: var(--bmi-label-transform); }
.bmi-input-group input { width: 100%; height: var(--bmi-input-height); padding: var(--bmi-input-padding); border: 1px solid var(--bmi-input-border); border-radius: var(--bmi-input-radius); background: var(--bmi-input-bg); color: var(--bmi-input-color); font-size: var(--bmi-input-font-size); outline: none; transition: border-color var(--transition-main), box-shadow var(--transition-main); }
.bmi-input-group input::placeholder { color: var(--bmi-input-placeholder-color); }
.bmi-input-group input:focus { border-color: var(--bmi-input-border-focus); box-shadow: var(--bmi-input-focus-shadow); }
.bmi-button { width: fit-content; justify-self: center; margin-inline: auto; }
.bmi-result { max-width: var(--bmi-form-width); margin-top: var(--bmi-result-margin-top); padding: var(--bmi-result-padding); border-left: 4px solid var(--bmi-result-border); border-radius: var(--bmi-result-radius); background: var(--bmi-result-bg); color: var(--bmi-result-color); }
.bmi-result-label { color: var(--bmi-result-muted-color); font-size: var(--bmi-result-label-size); line-height: 1.5; }
.bmi-result-value { display: block; margin-top: 8px; color: var(--color-light); font-size: var(--bmi-result-value-size); font-weight: var(--bmi-result-value-weight); line-height: 1.1; }
.bmi-result-status { display: block; margin-top: 8px; color: var(--color-red); font-size: var(--bmi-result-status-size); font-weight: var(--weight-bold); line-height: 1.3; }
.bmi-result-error { color: var(--color-red); font-weight: var(--weight-bold); }
.bmi-table-wrap { overflow: hidden; padding: var(--bmi-table-padding); border-radius: var(--bmi-table-radius); background: var(--bmi-table-bg); }
.bmi-table { width: 100%; border-collapse: collapse; color: var(--bmi-table-text); font-size: var(--bmi-table-font-size); }
.bmi-table th { background: var(--bmi-table-header-bg); color: var(--bmi-table-header-text); font-size: var(--bmi-table-header-size); font-weight: var(--weight-bold); letter-spacing: var(--bmi-table-header-letter-spacing); text-align: left; text-transform: uppercase; }
.bmi-table th, .bmi-table td { padding: var(--bmi-table-cell-padding); border-bottom: 1px solid var(--bmi-table-border); }
.bmi-table tbody tr:last-child td { border-bottom: 0; }
.bmi-table td:last-child { color: var(--bmi-table-muted); }

.location-faq-flow { position: relative; overflow: visible; isolation: isolate; background: transparent; }
.location-section, .faq-section { position: relative; z-index: 1; overflow: visible; background: var(--location-faq-section-bg); color: var(--color-light); }
.location-section { font-family: var(--location-font-family); padding: var(--location-section-padding-desktop) 0; }
.location-container, .location-map-container, .faq-container { position: relative; z-index: var(--z-index-content); }
.location-heading { max-width: var(--location-heading-width); margin: 0 auto var(--location-heading-margin-bottom); }
.location-eyebrow { margin-bottom: var(--location-eyebrow-margin-bottom); color: var(--location-eyebrow-color); font-size: var(--location-eyebrow-size); font-weight: var(--location-eyebrow-weight); letter-spacing: var(--location-eyebrow-letter-spacing); }
.location-title { font-family: var(--location-title-font-family); margin-bottom: var(--location-title-margin-bottom); color: var(--location-title-color); font-size: var(--location-title-size-desktop); font-weight: var(--location-title-weight); line-height: var(--location-title-line-height); letter-spacing: var(--location-title-letter-spacing); }
.location-text { color: var(--location-text-color); font-size: var(--location-text-size); line-height: var(--location-text-line-height); }
.location-map-container { width: var(--location-map-width); max-width: var(--location-map-max-width); margin: 0 auto; }
.location-map-wrap { overflow: hidden; height: var(--location-map-height-desktop); border: var(--location-map-border-width) solid var(--location-map-border-color); border-radius: var(--location-map-radius); background: transparent; box-shadow: none; }
.location-map { display: var(--image-display); width: var(--image-width); height: 100%; border: 0; }
.lazy-map-wrap { position: relative; }
.lazy-map-placeholder { position: absolute; inset: 0; z-index: 2; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; background: var(--lazy-map-placeholder-bg); color: var(--lazy-map-placeholder-color); text-align: center; font-size: var(--lazy-map-placeholder-text-size); cursor: pointer; transition: opacity 220ms ease, visibility 220ms ease; }
.lazy-map-placeholder button { border: 0; border-radius: var(--lazy-map-placeholder-button-radius); background: var(--lazy-map-placeholder-button-bg); color: var(--lazy-map-placeholder-button-color); padding: var(--lazy-map-placeholder-button-padding); font-weight: 700; cursor: pointer; }
.lazy-map-wrap.is-loaded .lazy-map-placeholder { opacity: 0; visibility: hidden; pointer-events: none; }
.lazy-map-wrap iframe[data-src] { background: transparent; }

.faq-section { font-family: var(--faq-font-family); padding: var(--faq-section-padding-desktop) 0; }
.faq-bg { display: var(--location-faq-overlay-display); position: absolute; inset: 0; z-index: var(--z-index-bg); background: transparent; opacity: 0; }
.faq-heading { max-width: var(--faq-heading-width); margin: 0 auto var(--faq-heading-margin-bottom); }
.faq-eyebrow { margin-bottom: var(--faq-eyebrow-margin-bottom); color: var(--faq-eyebrow-color); font-size: var(--faq-eyebrow-size); font-weight: var(--faq-eyebrow-weight); letter-spacing: var(--faq-eyebrow-letter-spacing); }
.faq-title { font-family: var(--faq-title-font-family); margin-bottom: var(--faq-title-margin-bottom); color: var(--faq-title-color); font-size: var(--faq-title-size-desktop); font-weight: var(--faq-title-weight); line-height: var(--faq-title-line-height); letter-spacing: var(--faq-title-letter-spacing); }
.faq-intro { color: var(--faq-intro-color); font-size: var(--faq-intro-size); line-height: var(--faq-intro-line-height); }
.faq-list { width: 100%; max-width: var(--faq-list-width); margin: 0 auto; }
.faq-item { overflow: visible; margin-bottom: var(--faq-item-margin-bottom); border: 1px solid var(--faq-item-border); border-radius: var(--faq-item-radius); background: var(--faq-item-bg); transition: background-color var(--transition-main), border-color var(--transition-main); }
.faq-item:last-child { margin-bottom: 0; }
.faq-item.is-open { background: var(--faq-item-bg-open); border-color: var(--faq-item-border-open); }
.faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--faq-question-gap); padding: var(--faq-question-padding-desktop); border: 0; background: transparent; color: var(--faq-question-color); text-align: left; transition: color var(--transition-main); }
.faq-question:hover { color: var(--faq-question-hover-color); }
.faq-question-left { display: flex; align-items: center; gap: var(--faq-question-left-gap); min-width: 0; }
.faq-icon { display: var(--faq-icon-display); }
.faq-question-text { color: currentColor; font-size: var(--faq-question-size); font-weight: var(--faq-question-weight); line-height: var(--faq-question-line-height); }
.faq-toggle { position: relative; flex: 0 0 auto; width: var(--faq-toggle-size); height: var(--faq-toggle-size); color: var(--faq-toggle-color); transition: color var(--transition-main), transform var(--transition-main); }
.faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; mask-image: var(--faq-barbell-mask); mask-repeat: no-repeat; mask-position: center; mask-size: var(--faq-barbell-mask-size, contain); -webkit-mask-image: var(--faq-barbell-mask); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: var(--faq-barbell-mask-size, contain); transform: scale(var(--faq-barbell-icon-scale, 1)); transform-origin: center; }
.faq-toggle::before { inset: var(--faq-toggle-outline-offset); background: var(--faq-toggle-outline-color); box-shadow: 0 0 0 var(--faq-toggle-outline-width, 3px) var(--faq-toggle-outline-color); }
.faq-toggle::after { inset: var(--faq-toggle-inner-offset); background: var(--faq-toggle-color); }
.faq-item.is-open .faq-toggle { transform: var(--faq-toggle-open-transform); }
.faq-item.is-open .faq-toggle::after { background: var(--faq-toggle-open-color); }
.faq-answer { max-height: var(--faq-answer-max-height-closed); overflow: hidden; transition: max-height var(--transition-header); }
.faq-answer-inner { padding: var(--faq-answer-padding-desktop); }
.faq-answer p { color: var(--faq-answer-color); font-size: var(--faq-answer-size); line-height: var(--faq-answer-line-height); }

.blog-section, .blog-archive-section { background: var(--blog-section-bg); padding: var(--blog-section-padding-desktop) 0; }
.blog-section { font-family: var(--blog-font-family); position: relative; overflow: hidden; color: var(--color-dark); }
.blog-bg { position: absolute; inset: 0; z-index: var(--z-index-bg); background: var(--blog-bg-color); }
.blog-container { position: relative; z-index: var(--z-index-content); }
.blog-heading { max-width: var(--blog-heading-width); margin: 0 auto var(--blog-heading-margin-bottom); }
.blog-eyebrow { margin-bottom: var(--blog-eyebrow-margin-bottom); color: var(--blog-eyebrow-color); font-size: var(--blog-eyebrow-size); font-weight: var(--blog-eyebrow-weight); letter-spacing: var(--blog-eyebrow-letter-spacing); }
.blog-title { font-family: var(--blog-title-font-family); margin-bottom: var(--blog-title-margin-bottom); color: var(--blog-title-color); font-size: var(--blog-title-size-desktop); font-weight: var(--blog-title-weight); line-height: var(--blog-title-line-height); letter-spacing: var(--blog-title-letter-spacing); }
.blog-intro { color: var(--blog-intro-color); font-size: var(--blog-intro-size); line-height: var(--blog-intro-line-height); }
.blog-grid { display: grid; grid-template-columns: repeat(var(--blog-grid-columns), minmax(0, 1fr)); gap: var(--blog-grid-gap); }
.blog-card { overflow: hidden; border: 1px solid var(--blog-card-border); border-radius: var(--blog-card-radius); background: var(--blog-card-bg); transition: border-color var(--transition-main), background-color var(--transition-main), transform var(--transition-main); }
.blog-card-image-wrap { position: relative; display: block; height: var(--blog-image-height); overflow: hidden; background: var(--color-dark); }
.blog-card-image { width: 100%; height: 100%; object-fit: var(--image-object-fit-cover); object-position: var(--blog-image-position); opacity: var(--blog-image-opacity); transition: transform var(--transition-header); }
.blog-card-image-placeholder { background: linear-gradient(135deg, var(--color-dark) 0%, #24030b 100%); }
.blog-card-image-overlay { position: absolute; inset: 0; background: var(--blog-image-overlay-color); opacity: var(--blog-image-overlay-opacity); transition: opacity var(--transition-main); }
.blog-card-content { padding: var(--blog-card-content-padding); }
.blog-card-date { margin-bottom: var(--blog-date-margin-bottom); color: var(--blog-date-color); font-size: var(--blog-date-size); font-weight: var(--blog-date-weight); letter-spacing: var(--blog-date-letter-spacing); line-height: 1; text-transform: var(--blog-date-transform); }
.blog-card-title { font-family: var(--blog-title-font-family); margin-bottom: var(--blog-card-title-margin-bottom); color: var(--blog-card-title-color); font-size: var(--blog-card-title-size); font-weight: var(--blog-card-title-weight); line-height: var(--blog-card-title-line-height); }
.blog-card-title a { color: inherit; transition: color var(--transition-main); }
.blog-card-excerpt { margin-bottom: var(--blog-excerpt-margin-bottom); color: var(--blog-excerpt-color); font-size: var(--blog-excerpt-size); line-height: var(--blog-excerpt-line-height); }
.blog-card-link { display: inline-flex; align-items: center; width: fit-content; line-height: 1; text-transform: uppercase; transition: color var(--transition-main); gap: var(--blog-link-gap); color: var(--blog-link-color); font-size: var(--blog-link-size); font-weight: var(--blog-link-weight); letter-spacing: var(--blog-link-letter-spacing); }
.blog-card-link span { transition: transform var(--transition-main); }
.blog-card:hover .blog-card-image { transform: scale(var(--blog-image-scale-hover)); }
.blog-card:hover .blog-card-image-overlay { opacity: var(--blog-image-overlay-opacity-hover); }
.blog-card:hover .blog-card-title a, .blog-card:hover .blog-card-link { color: var(--blog-link-hover-color); }
.blog-card:hover .blog-card-link span { transform: var(--hover-arrow-move); }
.blog-empty { grid-column: 1 / -1; color: var(--blog-empty-color); font-size: var(--blog-empty-size); text-align: center; }

/* ==================================================
   7. PROGRAMS / CONTACT / BLOG PAGE SHARED STYLE
================================================== */
.programs-page-flow, .contact-page-flow, .blog-page-flow { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(circle at var(--unified-gradient-radial-one-position), var(--unified-gradient-red-soft) 0%, transparent var(--unified-gradient-radial-one-size)), radial-gradient(circle at var(--unified-gradient-radial-two-position), var(--unified-gradient-red-glow) 0%, transparent var(--unified-gradient-radial-two-size)), linear-gradient(var(--unified-gradient-angle), var(--unified-gradient-black) 0%, var(--unified-gradient-black) 28%, var(--unified-gradient-red-deep) 48%, var(--unified-gradient-red-mid) 66%, var(--unified-gradient-red-deep) 82%, var(--unified-gradient-black) 100%); }
.programs-page-hero, .contact-page-hero, .blog-page-hero { position: relative; overflow: hidden; background: transparent; color: var(--color-light); }
.programs-page-hero { padding: var(--programs-page-hero-padding-desktop); }
.contact-page-hero { padding: var(--contact-page-hero-padding-desktop); }
.blog-page-hero { padding: var(--blog-page-hero-padding-desktop); }
.programs-page-hero .container, .contact-page-hero .container, .blog-page-hero .container { position: relative; z-index: var(--z-index-content); }
.programs-page-section, .contact-page-section, .blog-page-section { position: relative; overflow: visible; background: transparent; color: var(--color-light); }
.programs-page-section { font-family: var(--programs-page-font-family); padding: var(--programs-page-section-padding-desktop) 0; }
.contact-page-section { font-family: var(--contact-page-font-family); padding: var(--contact-page-section-padding-desktop) 0; }
.blog-page-section { font-family: var(--blog-page-font-family); padding: var(--blog-page-section-padding-desktop) 0; }
.programs-page-bg, .contact-page-bg, .blog-page-bg { display: none; }
.programs-page-container, .contact-page-container, .blog-page-container { position: relative; z-index: var(--z-index-content); }
.contact-page-container { max-width: var(--contact-page-container-width-desktop); }
.programs-page-eyebrow, .contact-page-eyebrow, .blog-page-eyebrow { margin-bottom: var(--programs-page-eyebrow-margin-bottom); color: var(--programs-page-eyebrow-color); font-size: var(--programs-page-eyebrow-size); font-weight: var(--programs-page-eyebrow-weight); letter-spacing: var(--programs-page-eyebrow-letter-spacing); line-height: var(--programs-page-eyebrow-line-height); text-transform: var(--programs-page-eyebrow-transform); }
.contact-page-eyebrow { margin-bottom: var(--contact-page-eyebrow-margin-bottom); color: var(--contact-page-eyebrow-color); font-size: var(--contact-page-eyebrow-size); font-weight: var(--contact-page-eyebrow-weight); letter-spacing: var(--contact-page-eyebrow-letter-spacing); line-height: var(--contact-page-eyebrow-line-height); text-transform: var(--contact-page-eyebrow-transform); }
.blog-page-eyebrow { margin-bottom: var(--blog-page-eyebrow-margin-bottom); color: var(--blog-page-eyebrow-color); font-size: var(--blog-page-eyebrow-size); font-weight: var(--blog-page-eyebrow-weight); letter-spacing: var(--blog-page-eyebrow-letter-spacing); line-height: var(--blog-page-eyebrow-line-height); text-transform: var(--blog-page-eyebrow-transform); }
.programs-page-title, .contact-page-title, .blog-page-title { font-family: var(--programs-page-title-font-family); margin-bottom: var(--programs-page-title-margin-bottom); color: var(--programs-page-title-color); font-size: var(--programs-page-title-size-desktop); line-height: var(--programs-page-title-line-height); letter-spacing: var(--programs-page-title-letter-spacing); }
.contact-page-title { font-family: var(--contact-page-title-font-family); margin-bottom: var(--contact-page-title-margin-bottom); color: var(--contact-page-title-color); font-size: var(--contact-page-title-size-desktop); line-height: var(--contact-page-title-line-height); letter-spacing: var(--contact-page-title-letter-spacing); }
.blog-page-title { font-family: var(--blog-page-title-font-family); margin-bottom: var(--blog-page-title-margin-bottom); color: var(--blog-page-title-color); font-size: var(--blog-page-title-size-desktop); line-height: var(--blog-page-title-line-height); letter-spacing: var(--blog-page-title-letter-spacing); }
.programs-page-subtitle, .contact-page-subtitle, .blog-page-subtitle { margin: 0 auto; }
.programs-page-subtitle { max-width: var(--programs-page-subtitle-width); color: var(--programs-page-subtitle-color); font-size: var(--programs-page-subtitle-size); line-height: var(--programs-page-subtitle-line-height); }
.contact-page-subtitle { max-width: var(--contact-page-subtitle-width); color: var(--contact-page-subtitle-color); font-size: var(--contact-page-subtitle-size); line-height: var(--contact-page-subtitle-line-height); }
.blog-page-subtitle { max-width: var(--blog-page-subtitle-width); color: var(--blog-page-subtitle-color); font-size: var(--blog-page-subtitle-size); line-height: var(--blog-page-subtitle-line-height); }

/* Programs page cards */
.programs-page-grid { display: grid; grid-template-columns: 1fr; gap: var(--programs-page-grid-gap); }
.programs-page-card { position: relative; min-height: var(--programs-page-card-min-height); overflow: hidden; border: 1px solid var(--programs-page-card-border); border-radius: var(--programs-page-card-radius); background: var(--programs-page-card-bg); color: var(--color-light); }
.programs-page-card-media, .programs-page-card-image, .programs-page-card-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.programs-page-card-media { z-index: var(--z-index-bg); }
.programs-page-card-image { object-fit: var(--image-object-fit-cover); object-position: var(--programs-page-card-image-position); opacity: var(--programs-page-card-image-opacity); transition: transform var(--transition-header); }
.programs-page-card-overlay { z-index: var(--z-index-content); background: var(--programs-page-card-overlay-color); opacity: var(--programs-page-card-overlay-opacity); transition: opacity var(--transition-main); }
.programs-page-card-content { position: relative; z-index: var(--z-index-overlay-content); display: flex; flex-direction: column; justify-content: flex-end; max-width: var(--programs-page-card-content-width); min-height: var(--programs-page-card-min-height); padding: var(--programs-page-card-padding); }
.programs-page-card-number { position: relative; display: inline-flex; width: fit-content; margin-bottom: var(--programs-page-card-number-margin-bottom); padding-bottom: 11px; color: var(--programs-page-card-number-color); font-size: var(--programs-page-card-number-size); font-weight: var(--programs-page-card-number-weight); letter-spacing: var(--programs-page-card-number-letter-spacing); line-height: 1; }
.programs-page-card-number::after { content: ""; position: absolute; left: 0; bottom: 0; width: var(--programs-page-card-number-underline-width); height: var(--programs-page-card-number-underline-height); background: var(--programs-page-card-number-underline-color); }
.programs-page-card-title { font-family: var(--programs-page-title-font-family); margin-bottom: var(--programs-page-card-title-margin-bottom); color: var(--programs-page-card-title-color); font-size: var(--programs-page-card-title-size); font-weight: var(--programs-page-card-title-weight); line-height: var(--programs-page-card-title-line-height); text-transform: var(--programs-page-card-title-transform); }
.programs-page-card-text { margin-bottom: var(--programs-page-card-text-margin-bottom); color: var(--programs-page-card-text-color); font-size: var(--programs-page-card-text-size); line-height: var(--programs-page-card-text-line-height); }
.programs-page-card-list { display: grid; gap: var(--programs-page-list-gap); margin-bottom: var(--programs-page-list-margin-bottom); color: var(--programs-page-list-color); font-size: var(--programs-page-list-size); line-height: 1.45; list-style: none; }
.programs-page-card-list li { position: relative; padding-left: 20px; }
.programs-page-card-list li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: var(--programs-page-list-bullet-size); height: var(--programs-page-list-bullet-size); background: var(--color-red); }
.programs-page-card-link { display: inline-flex; align-items: center; width: fit-content; line-height: 1; text-transform: uppercase; transition: color var(--transition-main); gap: var(--programs-page-link-gap); color: var(--programs-page-link-color); font-size: var(--programs-page-link-size); font-weight: var(--programs-page-link-weight); letter-spacing: var(--programs-page-link-letter-spacing); }
.programs-page-card-link span { transition: transform var(--transition-main); }
.programs-page-card:hover .programs-page-card-image { transform: scale(var(--programs-page-card-image-scale-hover)); }
.programs-page-card:hover .programs-page-card-overlay { opacity: var(--programs-page-card-overlay-opacity-hover); }
.programs-page-card:hover .programs-page-card-link { color: var(--programs-page-link-hover-color); }
.programs-page-card:hover .programs-page-card-link span { transform: var(--hover-arrow-move); }
.program-detail-container { max-width: 980px; margin: 0 auto; }
.program-detail-card { min-height: 680px; }
.program-detail-card-content { justify-content: flex-end; max-width: 720px; min-height: 680px; }
.program-detail-card-list { display: grid; gap: var(--programs-page-list-gap); margin-bottom: var(--programs-page-list-margin-bottom); }
.program-detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.program-detail-cta-secondary { border-color: rgba(250, 249, 254, 0.28); color: var(--color-light); }

/* Contact page */
.contact-location-block { margin-bottom: var(--contact-location-block-margin-bottom); }
.contact-location-heading { max-width: var(--contact-location-heading-width); margin: 0 auto var(--contact-location-heading-margin-bottom); }
.contact-location-eyebrow { margin-bottom: var(--contact-page-eyebrow-margin-bottom); color: var(--contact-page-eyebrow-color); font-size: var(--contact-page-eyebrow-size); font-weight: var(--contact-page-eyebrow-weight); letter-spacing: var(--contact-page-eyebrow-letter-spacing); line-height: var(--contact-page-eyebrow-line-height); text-transform: var(--contact-page-eyebrow-transform); }
.contact-location-title { font-family: var(--contact-page-title-font-family); margin-bottom: var(--contact-page-title-margin-bottom); color: var(--contact-page-title-color); font-size: var(--contact-page-title-size-desktop); font-weight: var(--global-heading-font-weight); line-height: var(--contact-page-title-line-height); letter-spacing: var(--contact-page-title-letter-spacing); }
.contact-location-text { color: var(--contact-page-subtitle-color); font-size: var(--contact-page-subtitle-size); line-height: var(--contact-page-subtitle-line-height); }
.contact-location-map-container { position: relative; left: 50%; z-index: var(--z-index-content); width: var(--contact-location-map-width-desktop); max-width: var(--contact-location-map-max-width-desktop); margin: 0; transform: translateX(-50%); }
.contact-location-map-wrap { overflow: hidden; height: var(--contact-location-map-height-desktop); border: var(--contact-location-map-border-width) solid var(--contact-location-map-border-color); border-radius: var(--contact-location-map-radius); background: transparent; box-shadow: none; }
.contact-location-map { display: block; width: 100%; height: 100%; border: 0; }
.contact-info-grid, .contact-info-grid-four { display: grid; grid-template-columns: repeat(var(--contact-info-grid-columns-desktop), minmax(0, 1fr)); gap: var(--contact-info-grid-gap); }
.contact-info-card { display: grid; grid-template-columns: var(--contact-info-icon-box-size) 1fr; gap: var(--contact-info-card-gap); align-items: start; padding: var(--contact-info-card-padding); border: 1px solid var(--contact-info-card-border); border-radius: var(--contact-info-card-radius); background: var(--contact-info-card-bg); color: var(--color-light); transition: border-color var(--transition-main), background-color var(--transition-main), transform var(--transition-main); }
.contact-info-card:hover { border-color: var(--contact-info-card-border-hover); transform: var(--contact-info-card-hover-transform); }
.contact-info-icon { width: var(--contact-info-icon-box-size); height: var(--contact-info-icon-box-size); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--contact-info-icon-border); background: var(--contact-info-icon-bg); color: var(--contact-info-icon-color); }
.contact-info-icon svg { width: var(--contact-info-icon-size); height: var(--contact-info-icon-size); }
.contact-info-title { margin-bottom: var(--contact-info-title-margin-bottom); color: var(--contact-info-title-color); font-size: var(--contact-info-title-size); font-weight: var(--contact-info-title-weight); line-height: 1.2; }
.contact-info-text, .contact-info-link { color: var(--contact-info-text-color); font-size: var(--contact-info-text-size); line-height: var(--contact-info-text-line-height); transition: color var(--transition-main); }
.contact-info-link:hover { color: var(--contact-info-link-hover-color); }
.contact-socials { display: flex; align-items: center; gap: var(--contact-social-gap); }
.contact-social-link { display: inline-flex; align-items: center; justify-content: center; width: var(--contact-social-icon-size); height: var(--contact-social-icon-size); color: var(--contact-info-text-color); transition: color var(--transition-main), transform var(--transition-main); }
.contact-social-link svg { width: 100%; height: 100%; fill: currentColor; }
.contact-social-link:hover { color: var(--color-red); transform: var(--hover-lift-small); }

/* Blog page */
.blog-page-grid { display: grid; grid-template-columns: repeat(var(--blog-page-grid-columns-desktop), minmax(0, 1fr)); gap: var(--blog-page-grid-gap); }
.blog-page-flow .blog-card { border-color: var(--blog-page-card-border); border-radius: var(--blog-page-card-radius); background: var(--blog-page-card-bg); color: var(--color-light); transition: border-color var(--transition-main), background-color var(--transition-main), transform var(--transition-main); }
.blog-page-flow .blog-card:hover { border-color: var(--blog-page-card-border-hover); transform: var(--blog-page-card-hover-transform); }
.blog-page-flow .blog-card-title, .blog-page-flow .blog-card-title a { color: var(--blog-page-card-title-color); }
.blog-page-flow .blog-card:hover .blog-card-title a { color: var(--blog-page-card-title-hover-color); }
.blog-page-flow .blog-card-excerpt { color: var(--blog-page-card-excerpt-color); }
.blog-page-flow .blog-card-link { color: var(--blog-page-card-link-color); }
.blog-page-flow .blog-card:hover .blog-card-link { color: var(--blog-page-card-link-hover-color); }
.blog-page-flow .blog-card-image-overlay { opacity: var(--blog-page-image-overlay-opacity); }
.blog-page-flow .blog-card:hover .blog-card-image-overlay { opacity: var(--blog-page-image-overlay-opacity-hover); }
.pagination-wrap { margin-top: var(--pagination-margin-top); text-align: var(--pagination-text-align); grid-column: 1 / -1; }
.pagination-wrap .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: var(--pagination-item-min-width); height: var(--pagination-item-height); margin: var(--pagination-item-margin); padding: var(--pagination-item-padding); border: 1px solid var(--pagination-item-border); color: var(--pagination-item-color); font-size: var(--pagination-item-font-size); font-weight: var(--pagination-item-font-weight); transition: var(--transition-main); }
.pagination-wrap .page-numbers.current, .pagination-wrap .page-numbers:hover { background: var(--pagination-item-bg-hover); border-color: var(--pagination-item-border-hover); color: var(--pagination-item-color-hover); }

/* ==================================================
   8. PAGE TEMPLATE / SINGLE POST / LEGAL / FOOTER
================================================== */
.page-hero { padding: var(--page-hero-padding-desktop); background: var(--page-hero-bg); color: var(--page-hero-color); }
.page-hero .page-title, .page-hero .page-subtitle { color: var(--page-hero-color); }
.page-hero .page-subtitle { opacity: var(--page-hero-subtitle-opacity); }
.page-content-section { padding: var(--page-content-padding) 0; }
.page-content-section h2, .page-content-section h3 { margin: var(--page-content-heading-margin); }
.page-content-section p { margin-bottom: var(--page-content-paragraph-margin-bottom); }
.page-content-section ul, .page-content-section ol { margin-bottom: var(--page-content-list-margin-bottom); }
.section-heading { max-width: var(--section-heading-width); margin: 0 auto var(--section-heading-margin-bottom); }
.cards-grid { display: grid; grid-template-columns: repeat(var(--cards-grid-columns), 1fr); gap: var(--cards-grid-gap); }
.info-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); padding: var(--card-padding); }
.info-card h3 { font-size: var(--card-title-size); margin-bottom: var(--card-title-margin-bottom); }
.info-card p { color: var(--card-text-color); }

.single-post-hero { padding: var(--single-post-hero-padding-desktop); background: var(--color-dark); color: var(--color-light); }
.single-post-date { margin-bottom: 18px; color: var(--color-red); font-size: var(--font-xs); font-weight: var(--weight-bold); letter-spacing: var(--letter-large); text-transform: uppercase; }
.single-post-title { color: var(--color-light); font-size: var(--single-post-title-size); }
.single-post-image-section { background: var(--color-dark); padding-bottom: 70px; }
.single-post-image-wrap { position: relative; overflow: hidden; max-height: var(--single-post-image-height-desktop); background: var(--color-dark); }
.single-post-image { width: 100%; height: var(--single-post-image-height-desktop); object-fit: cover; opacity: 1; }
.single-post-image-overlay { position: absolute; inset: 0; background: var(--color-dark); opacity: 0.22; pointer-events: none; }
.single-post-content-section { padding: var(--single-post-content-padding-desktop) 0; background: var(--color-light); }
.single-post-content { color: var(--color-text-muted); font-size: var(--single-post-content-size-desktop); line-height: 1.8; }
.single-post-content h2, .single-post-content h3, .single-post-content h4 { margin: 42px 0 18px; color: var(--color-dark); }
.single-post-content p, .single-post-content ul, .single-post-content ol { margin-bottom: 22px; }
.single-post-content a { color: var(--color-red); font-weight: var(--weight-bold); }

.legal-page-flow { position: relative; overflow: hidden; background: radial-gradient(circle at 88% 24%, var(--legal-flow-red-soft) 0%, transparent 34%), radial-gradient(circle at 18% 86%, var(--legal-flow-red-glow) 0%, transparent 42%), linear-gradient(155deg, var(--legal-flow-black) 0%, var(--legal-flow-black) 30%, var(--legal-flow-red-deep) 52%, var(--legal-flow-red-mid) 68%, var(--legal-flow-red-deep) 82%, var(--legal-flow-black) 100%); }
.legal-page-hero { position: relative; overflow: hidden; padding: var(--legal-hero-padding-desktop); background: transparent; color: var(--color-light); }
.legal-page-hero .container, .legal-page-container { position: relative; z-index: var(--z-index-content); }
.legal-page-eyebrow { margin-bottom: var(--legal-eyebrow-margin-bottom); color: var(--legal-eyebrow-color); font-size: var(--legal-eyebrow-size); font-weight: var(--legal-eyebrow-weight); letter-spacing: var(--legal-eyebrow-letter-spacing); }
.legal-page-title { font-family: var(--legal-title-font-family); margin-bottom: var(--legal-title-margin-bottom); color: var(--legal-title-color); font-size: var(--legal-title-size-desktop); line-height: var(--legal-title-line-height); letter-spacing: var(--legal-title-letter-spacing); }
.legal-page-subtitle { max-width: var(--legal-subtitle-width); margin: 0 auto; color: var(--legal-subtitle-color); font-size: var(--legal-subtitle-size); line-height: var(--legal-subtitle-line-height); }
.legal-page-section { font-family: var(--legal-font-family); position: relative; overflow: hidden; padding: var(--legal-section-padding-desktop) 0; background: transparent; color: var(--color-light); }
.legal-page-bg { position: absolute; inset: 0; z-index: var(--z-index-bg); background: radial-gradient(circle at 82% 42%, rgba(222, 36, 47, 0.08) 0%, transparent 40%); }
.legal-content-card { padding: var(--legal-card-padding); border: 1px solid var(--legal-card-border); border-radius: var(--legal-card-radius); background: var(--legal-card-bg); color: var(--legal-content-color); font-size: var(--legal-content-font-size); line-height: var(--legal-content-line-height); }
.legal-content-card h2, .legal-content-card h3, .legal-content-card h4 { margin: var(--page-content-heading-margin); color: var(--legal-content-heading-color); line-height: 1.18; }
.legal-content-card h2:first-child, .legal-content-card h3:first-child, .legal-content-card h4:first-child { margin-top: 0; }
.legal-content-card p, .legal-content-card ul, .legal-content-card ol { margin-bottom: 20px; }
.legal-content-card ul, .legal-content-card ol { padding-left: 22px; }
.legal-content-card a { color: var(--legal-content-link-color); font-weight: var(--weight-bold); }

.site-footer { font-family: var(--footer-font-family); background: var(--footer-bg); color: var(--footer-text); border-top: 0; }
.footer-container { display: grid; grid-template-columns: var(--footer-container-columns); gap: var(--footer-column-gap); width: 100%; max-width: var(--footer-container-width-desktop); margin: 0 auto; padding: var(--footer-padding-top) var(--footer-container-padding-desktop) var(--footer-padding-bottom); }
.footer-column { min-width: 0; }
.footer-heading { font-family: var(--footer-heading-font-family); position: relative; margin-bottom: var(--footer-heading-margin-bottom); padding-bottom: var(--footer-heading-underline-gap); color: var(--footer-heading-color); font-size: var(--footer-heading-size); font-weight: var(--footer-heading-weight); letter-spacing: var(--footer-heading-letter-spacing); line-height: 1.1; text-transform: var(--footer-heading-text-transform); }
.footer-heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: var(--footer-heading-underline-width); height: var(--footer-heading-underline-height); background: var(--footer-heading-underline-color); }
.footer-menu, .footer-navigation .menu { display: flex; flex-direction: column; gap: var(--footer-menu-link-gap); list-style: none; }
.footer-menu a,
.footer-navigation .menu a {
    color: var(--footer-link);
    font-size: var(--footer-menu-link-size);
    line-height: 1.4;
    text-transform: none;
    transition: color var(--transition-main);
}
.footer-menu a:hover, .footer-navigation .menu a:hover { color: var(--footer-link-hover); }
.footer-contact-list { display: flex; flex-direction: column; gap: var(--footer-contact-item-gap); list-style: none; }
.footer-contact-item { display: grid; grid-template-columns: var(--footer-contact-icon-size) 1fr; gap: var(--footer-contact-gap); align-items: start; color: var(--footer-muted); font-size: var(--footer-contact-text-size); line-height: 1.55; }
.footer-contact-item a { color: var(--footer-muted); transition: color var(--transition-main); }
.footer-contact-item a:hover { color: var(--footer-link-hover); }
.footer-contact-icon { width: var(--footer-contact-icon-size); height: var(--footer-contact-icon-size); margin-top: 3px; color: var(--footer-contact-icon-color); }
.footer-hours-list { display: flex; flex-direction: column; gap: var(--footer-hours-gap); list-style: none; }
.footer-hours-list li { display: flex; justify-content: space-between; gap: var(--footer-bottom-gap); padding-bottom: var(--footer-hours-gap); border-bottom: 1px solid var(--footer-hours-border); color: var(--footer-muted); font-size: var(--footer-hours-text-size); line-height: 1.4; }
.footer-hours-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.footer-hours-list strong { color: var(--footer-text); font-weight: var(--weight-bold); white-space: nowrap; }
.footer-socials { display: flex; align-items: center; gap: var(--footer-social-gap); }
.footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: var(--footer-social-box-size); height: var(--footer-social-box-size); border: 0; background: transparent; color: var(--footer-social-color); transition: color var(--transition-main), transform var(--transition-main), opacity var(--transition-main); }
.footer-social-link svg { width: var(--footer-social-icon-size); height: var(--footer-social-icon-size); fill: currentColor; }
.footer-social-link:hover { color: var(--footer-social-color-hover); transform: var(--hover-lift-small); }
.footer-bottom { border-top: 1px solid var(--footer-bottom-border); padding: var(--footer-bottom-padding) 0; }
.footer-bottom-container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--footer-bottom-gap); width: 100%; max-width: var(--footer-container-width-desktop); margin: 0 auto; padding-left: var(--footer-container-padding-desktop); padding-right: var(--footer-container-padding-desktop); text-align: center; }
.footer-bottom-logo { display: inline-flex; align-items: center; justify-content: center; max-width: var(--footer-bottom-logo-width); }
.footer-bottom-logo img { width: auto; max-width: var(--footer-bottom-logo-width); max-height: var(--footer-bottom-logo-max-height); }
.footer-logo-text { color: var(--footer-text); font-size: var(--footer-bottom-logo-text-size); font-weight: var(--weight-bold); line-height: 1; }
.footer-copyright { color: var(--footer-copyright-color); font-size: var(--footer-copyright-size); line-height: 1.5; }
.footer-menu--quick,
.footer-menu--legal { display: flex; flex-direction: column; gap: var(--footer-menu-link-gap); margin: 0; padding: 0; list-style: none; }
.footer-menu--quick a,
.footer-menu--legal a { color: var(--footer-link); font-size: var(--footer-menu-link-size); line-height: 1.4; transition: color var(--transition-main); }
.footer-menu--quick a:hover,
.footer-menu--legal a:hover { color: var(--footer-link-hover); }
.footer-menu--quick .menu-item-programs { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.footer-programs-toggle { display: inline-flex; align-items: center; color: var(--footer-link); font-size: var(--footer-menu-link-size); font-weight: var(--weight-bold); line-height: 1.4; cursor: pointer; background: none; border: 0; padding: 0; text-align: left; }
.footer-programs-toggle:hover { color: var(--footer-link-hover); }
.footer-menu--quick .footer-submenu { display: none; flex-direction: column; gap: 8px; margin: 10px 0 0; padding: 0 0 0 12px; list-style: none; border-left: 1px solid rgba(250, 249, 254, 0.16); }
.footer-menu--quick .menu-item-programs.is-submenu-open > .footer-submenu { display: flex; }
.footer-submenu a { color: var(--footer-muted); font-size: calc(var(--footer-menu-link-size) - 1px); line-height: 1.4; transition: color var(--transition-main); }
.footer-submenu a:hover { color: var(--footer-link-hover); }
.footer-column--legal .footer-menu--legal { gap: var(--footer-menu-link-gap); }

/* ==================================================
   9. DESKTOP OVERRIDES
================================================== */
@media (min-width: 1025px) {
    .location-map-container {
        width: var(--location-map-width-desktop);
        max-width: var(--location-map-max-width-desktop);
    }
}

/* Smaller desktop safety: keep contact info on one line and reduce only spacing */
@media (min-width: 1025px) and (max-width: 1480px) {
    :root {
        --container-width: 100%;
        --header-container-gap: 20px;
        --header-menu-gap: 34px;
        --header-actions-gap: 20px;
        --header-contact-gap: 14px;
        --header-contact-text-size: 12px;
        --header-social-size: 22px;
        --header-social-gap: 14px;
    }
}

/* ==================================================
   10. TABLET
================================================== */
@media (max-width: 1024px) {
    :root {
        --font-xxl: 54px;
        --font-xl: 38px;
        --header-menu-gap: 22px;
        --section-padding-desktop: var(--section-padding-tablet);
        --hero-title-size-desktop: var(--hero-title-size-tablet);
        --programs-section-padding-desktop: var(--programs-section-padding-tablet);
        --equipment-section-padding-desktop: var(--equipment-section-padding-tablet);
        --equipment-title-size-desktop: var(--equipment-title-size-tablet);
        --membership-section-padding-desktop: var(--membership-section-padding-tablet);
        --membership-grid-columns: var(--membership-grid-columns-tablet);
        --membership-title-size-desktop: var(--membership-title-size-tablet);
        --partnerships-section-padding-desktop: var(--partnerships-section-padding-tablet);
        --partnerships-title-size-desktop: var(--partnerships-title-size-tablet);
        --programs-title-size-desktop: var(--programs-title-size-tablet);
        --programs-grid-columns: 2;
        --about-title-size-desktop: var(--about-title-size-tablet);
        --bmi-section-padding-desktop: var(--bmi-section-padding-tablet);
        --bmi-title-size-desktop: var(--bmi-title-size-tablet);
        --location-section-padding-desktop: var(--location-section-padding-tablet);
        --location-title-size-desktop: var(--location-title-size-tablet);
        --location-map-height-desktop: var(--location-map-height-tablet);
        --faq-section-padding-desktop: var(--faq-section-padding-tablet);
        --faq-title-size-desktop: var(--faq-title-size-tablet);
        --blog-section-padding-desktop: var(--blog-section-padding-tablet);
        --blog-title-size-desktop: var(--blog-title-size-tablet);
        --blog-grid-columns: 2;
        --programs-page-section-padding-desktop: var(--programs-page-section-padding-tablet);
        --programs-page-title-size-desktop: var(--programs-page-title-size-tablet);
        --contact-page-section-padding-desktop: var(--contact-page-section-padding-tablet);
        --contact-page-title-size-desktop: var(--contact-page-title-size-tablet);
        --contact-location-map-height-desktop: var(--contact-location-map-height-tablet);
        --blog-page-section-padding-desktop: var(--blog-page-section-padding-tablet);
        --blog-page-title-size-desktop: var(--blog-page-title-size-tablet);
        --legal-title-size-desktop: var(--legal-title-size-tablet);
        --footer-column-gap: 34px;
    }

    .contact-info-grid,
    .contact-info-grid-four {
        grid-template-columns: repeat(var(--contact-info-grid-columns-tablet), minmax(0, 1fr));
    }

    .blog-page-grid {
        grid-template-columns: repeat(var(--blog-page-grid-columns-tablet), minmax(0, 1fr));
    }

    .footer-container {
        grid-template-columns: var(--footer-container-mobile-columns);
    }

    .footer-hours-list li {
        justify-content: var(--footer-hours-mobile-justify);
        flex-direction: var(--footer-hours-mobile-direction);
        gap: var(--footer-hours-mobile-gap);
    }
}

@media (max-width: 900px) {
    :root { --cards-grid-columns: 1; }
}

/* ==================================================
   11. MOBILE
================================================== */
@media (max-width: 760px) {
    :root {
        --header-height: var(--mobile-header-height);
        --container-padding: var(--site-container-padding-mobile);
        --site-section-inner-y: var(--site-section-padding-y-mobile);
        --site-section-gap: var(--site-section-gap-mobile);
        --site-grid-gap-desktop: var(--site-grid-gap-mobile);
        --site-card-padding-desktop: var(--site-card-padding-mobile);
        --button-min-height: var(--site-button-min-height-mobile);
        --section-heading-margin-bottom: var(--section-text-content-gap-mobile);
        --section-padding-desktop: var(--section-padding-mobile);
        --header-social-size: var(--mobile-header-social-size);
        --header-social-gap: var(--mobile-header-social-gap);
        --header-social-color: var(--mobile-header-social-color);
        --header-social-hover-color: var(--mobile-header-social-hover-color);
        --header-social-hover-transform: var(--mobile-header-social-hover-transform);
        --header-social-display: var(--mobile-header-social-display);
        --hero-min-height-desktop: var(--hero-min-height-mobile);
        --hero-title-size-desktop: var(--hero-title-size-mobile);
        --hero-text-size-desktop: var(--hero-text-size-mobile);
        --hero-content-width: 100%;
        --hero-text-width: 100%;
        --hero-overlay-opacity: 0.64;
        --programs-section-padding-desktop: var(--programs-section-padding-mobile);
        --equipment-section-padding-desktop: var(--equipment-section-padding-mobile);
        --equipment-title-size-desktop: var(--equipment-title-size-mobile);
        --equipment-text-size: var(--equipment-text-size-mobile);
        --equipment-slide-height: var(--equipment-slide-height-mobile);
        --equipment-list-margin-bottom: 36px;
        --equipment-arrow-size: 44px;
        --equipment-arrow-font-size: 28px;
        --equipment-arrow-offset: 12px;
        --membership-section-padding-desktop: var(--membership-section-padding-mobile);
        --membership-title-size-desktop: var(--membership-title-size-mobile);
        --membership-text-size: var(--membership-text-size-mobile);
        --partnerships-section-padding-desktop: var(--partnerships-section-padding-mobile);
        --partnerships-title-size-desktop: var(--partnerships-title-size-mobile);
        --partnerships-text-size: var(--partnerships-text-size-mobile);
        --partnerships-logo-max-height: var(--partnerships-logo-max-height-mobile);
        --partnerships-slide-width: min(200px, calc((100vw - (var(--partnerships-marquee-gap) * 2)) / 1.65));
        --partnerships-marquee-fade-width: 24px;
        --membership-grid-columns: 1;
        --membership-card-title-size: var(--membership-card-title-size-mobile);
        --membership-price-size: var(--membership-price-size-mobile);
        --programs-intro-gap: 28px;
        --programs-intro-margin-bottom: 42px;
        --programs-title-size-desktop: var(--programs-title-size-mobile);
        --programs-description-size: var(--programs-description-size-mobile);
        --programs-grid-columns: 1;
        --program-card-min-height: var(--program-card-min-height-mobile);
        --program-card-title-size: var(--program-card-title-size-mobile);
        --about-section-min-height: var(--about-section-min-height-mobile);
        --about-section-padding-desktop: var(--about-section-padding-mobile);
        --about-title-size-desktop: var(--about-title-size-mobile);
        --about-text-size-desktop: var(--about-text-size-mobile);
        --bmi-section-padding-desktop: var(--bmi-section-padding-mobile);
        --bmi-title-size-desktop: var(--bmi-title-size-mobile);
        --bmi-grid-gap: 44px;
        --bmi-table-padding: 20px;
        --bmi-table-cell-padding: 16px;
        --location-section-padding-desktop: var(--location-section-padding-mobile);
        --location-title-size-desktop: var(--location-title-size-mobile);
        --location-map-height-desktop: var(--location-map-height-mobile);
        --location-heading-margin-bottom: 40px;
        --location-map-width: calc(100vw - 40px);
        --faq-section-padding-desktop: var(--faq-section-padding-mobile);
        --faq-title-size-desktop: var(--faq-title-size-mobile);
        --faq-intro-size: var(--faq-intro-size-mobile);
        --faq-heading-margin-bottom: 40px;
        --faq-question-padding-desktop: var(--faq-question-padding-mobile);
        --faq-question-size: var(--faq-question-size-mobile);
        --faq-answer-padding-desktop: var(--faq-answer-padding-mobile);
        --faq-answer-size: var(--faq-answer-size-mobile);
        --blog-section-padding-desktop: var(--blog-section-padding-mobile);
        --blog-title-size-desktop: var(--blog-title-size-mobile);
        --blog-intro-size: var(--blog-intro-size-mobile);
        --blog-heading-margin-bottom: 40px;
        --blog-grid-columns: 1;
        --blog-image-height: var(--blog-image-height-mobile);
        --blog-card-title-size: var(--blog-card-title-size-mobile);
        --programs-page-hero-padding-desktop: var(--programs-page-hero-padding-mobile);
        --programs-page-section-padding-desktop: var(--programs-page-section-padding-mobile);
        --programs-page-title-size-desktop: var(--programs-page-title-size-mobile);
        --programs-page-subtitle-size: var(--programs-page-subtitle-size-mobile);
        --programs-page-card-min-height: var(--programs-page-card-min-height-mobile);
        --programs-page-card-title-size: var(--programs-page-card-title-size-mobile);
        --programs-page-card-padding: 26px;
        --unified-gradient-red-soft: rgba(222, 36, 47, 0.09);
        --unified-gradient-red-glow: rgba(90, 0, 8, 0.34);
        --contact-page-hero-padding-desktop: var(--contact-page-hero-padding-mobile);
        --contact-page-section-padding-desktop: var(--contact-page-section-padding-mobile);
        --contact-page-title-size-desktop: var(--contact-page-title-size-mobile);
        --contact-page-subtitle-size: var(--contact-page-subtitle-size-mobile);
        --contact-location-heading-margin-bottom: 40px;
        --contact-location-map-height-desktop: var(--contact-location-map-height-mobile);
        --blog-page-hero-padding-desktop: var(--blog-page-hero-padding-mobile);
        --blog-page-section-padding-desktop: var(--blog-page-section-padding-mobile);
        --blog-page-title-size-desktop: var(--blog-page-title-size-mobile);
        --blog-page-subtitle-size: var(--blog-page-subtitle-size-mobile);
        --legal-hero-padding-desktop: var(--legal-hero-padding-mobile);
        --legal-section-padding-desktop: var(--legal-section-padding-mobile);
        --legal-title-size-desktop: var(--legal-title-size-mobile);
        --legal-subtitle-size: var(--legal-subtitle-size-mobile);
        --legal-card-padding: var(--legal-card-padding-mobile);
        --legal-content-font-size: var(--legal-content-font-size-mobile);
        --footer-padding-top: 70px;
        --footer-padding-bottom: 56px;
        --footer-column-gap: 38px;
        --footer-heading-size: var(--footer-heading-size-mobile);
        --footer-menu-link-size: var(--footer-menu-link-size-mobile);
        --footer-bottom-logo-width: 130px;
        --page-hero-padding-desktop: var(--page-hero-padding-mobile);
        --single-post-hero-padding-desktop: var(--single-post-hero-padding-mobile);
        --single-post-image-height-desktop: var(--single-post-image-height-mobile);
        --single-post-content-padding-desktop: var(--single-post-content-padding-mobile);
        --single-post-content-size-desktop: var(--single-post-content-size-mobile);
    }

    .program-detail-card,
    .program-detail-card-content { min-height: var(--programs-page-card-min-height-mobile); }

    .header-container { grid-template-columns: 1fr auto 1fr; }
    .header-mobile-left { display: flex; justify-self: start; grid-column: 1; }
    .menu-toggle { display: var(--mobile-menu-toggle-display-mobile); }
    .header-logo-wrap { justify-self: center; grid-column: 2; }
    .site-logo, .site-logo img { max-width: var(--mobile-logo-width); }
    .main-navigation { display: none; }
    .header-actions { justify-self: end; grid-column: 3; gap: var(--header-social-gap); min-width: auto; }
    .header-actions .header-contact-links, .header-actions .language-switcher-desktop { display: none; }
    .header-actions .header-socials { display: var(--mobile-header-social-display); }
    .hero-section {
        min-height: var(--hero-min-height-mobile);
        padding-top: 0;
        padding-bottom: 0;
    }

    .hero-container {
        min-height: 0;
    }
    .hero-image { object-position: var(--hero-image-position-mobile); }
    .hero-actions { align-items: center; flex-direction: column; gap: var(--hero-actions-gap); max-width: min(100%, clamp(220px, 78vw, 320px)); margin-inline: auto; }
    .hero-actions .btn { width: 100%; max-width: 100%; }
    .programs-intro { grid-template-columns: 1fr; align-items: start; }
    .programs-grid,
    .blog-grid,
    .membership-grid { width: 100%; min-width: 0; }
    .program-card,
    .blog-card,
    .membership-card { min-width: 0; }
    .equipment-carousel { width: 100%; padding: 0 54px; }
    .equipment-carousel-arrow-prev { left: 0; }
    .equipment-carousel-arrow-next { right: 0; }
    .equipment-list { justify-content: center; }
    .membership-selector { width: 100%; flex-wrap: nowrap; }
    .membership-selector-button { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; }
    .membership-grid {
        display: flex;
        gap: var(--membership-grid-gap);
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--membership-card-center-padding-mobile);
        padding-inline: var(--membership-card-center-padding-mobile);
        padding-top: 10px;
        padding-bottom: 22px;
        margin-inline: calc(var(--membership-card-center-padding-mobile) * -1);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .membership-grid::-webkit-scrollbar { display: none; }
    .membership-card {
        flex: 0 0 var(--membership-card-width-mobile);
        width: var(--membership-card-width-mobile);
        scroll-snap-align: center;
        scroll-snap-stop: always;
        transform: scale(0.96);
    }
    .membership-card.is-active { transform: translateY(-4px) scale(1); }
    .membership-card.is-prev, .membership-card.is-next { transform: scale(0.975); }
    .programs-intro-right { max-width: 100%; justify-self: start; align-items: flex-start; }
    .programs-button { width: auto; margin-left: 0; }
    .about-bg-image { object-position: var(--about-bg-position-mobile); }
    .bmi-container { grid-template-columns: 1fr; }
    .bmi-button { width: fit-content; justify-self: center; margin-inline: auto; }
    .location-map-container { width: calc(100vw - 32px); max-width: calc(100vw - 32px); }
    .location-map-wrap { width: 100%; }
    .contact-location-map-container { width: calc(100vw - 32px); max-width: calc(100vw - 32px); left: auto; transform: none; margin: 0 auto; }
    .contact-location-map-wrap { width: 100%; }
    .contact-info-grid, .contact-info-grid-four { grid-template-columns: repeat(var(--contact-info-grid-columns-mobile), minmax(0, 1fr)); }
    .blog-page-grid { grid-template-columns: repeat(var(--blog-page-grid-columns-mobile), minmax(0, 1fr)); }
    .footer-container { grid-template-columns: var(--footer-container-mobile-columns); }
    .footer-hours-list li { justify-content: var(--footer-hours-mobile-justify); flex-direction: var(--footer-hours-mobile-direction); gap: var(--footer-hours-mobile-gap); }
}


/* ==================================================
   12. SCROLL TO TOP / COOKIE BANNER
================================================== */
:root {
    --scrolltop-size-desktop: 40px;
    --scrolltop-size-mobile: 44px;
    --scroll-top-size: var(--scrolltop-size-desktop);
    --scrolltop-border-width: 1px;
    --scrolltop-arrow-size: 16px;
    --scrolltop-arrow-stroke: 2px;
    --scrolltop-glow-opacity: 0.22;
    --scroll-top-right: 20px;
    --scroll-top-bottom: 20px;
    --scroll-top-bg: var(--color-red);
    --scroll-top-bg-hover: var(--color-light);
    --scroll-top-color: var(--color-light);
    --scroll-top-color-hover: var(--color-dark);
    --scroll-top-border: rgba(250, 249, 254, 0.1);
    --scroll-top-ring-width: var(--scrolltop-border-width);
    --scroll-top-ring-color: rgba(250, 249, 254, 0.12);
    --scroll-top-radius: 0px;
    --scroll-top-font-size: var(--scrolltop-arrow-size);
    --scroll-top-shadow: 0 8px 22px rgba(0, 0, 8, calc(var(--scrolltop-glow-opacity) + 0.1));
    --scroll-top-hidden-transform: translateY(16px);
    --scroll-top-visible-transform: translateY(0);
    --scroll-top-z-index: 997;

    --cookie-banner-left: 50%;
    --cookie-banner-right: auto;
    --cookie-banner-bottom: 24px;
    --cookie-banner-width: min(1180px, calc(100vw - 48px));
    --cookie-banner-max-width: 1180px;
    --cookie-banner-bg: var(--color-dark);
    --cookie-banner-color: var(--color-light);
    --cookie-banner-border: rgba(222, 36, 47, 0.55);
    --cookie-banner-radius: 0px;
    --cookie-banner-padding: 22px 26px;
    --cookie-banner-shadow: 0 20px 60px rgba(0, 0, 8, 0.45);
    --cookie-banner-z-index: 996;
    --cookie-banner-title-size: 24px;
    --cookie-banner-title-margin: 0 0 8px;
    --cookie-banner-text-size: 14px;
    --cookie-banner-text-line-height: 1.55;
    --cookie-banner-text-color: rgba(250, 249, 254, 0.76);
    --cookie-banner-link-color: var(--color-red);
    --cookie-banner-content-gap: 8px;
    --cookie-banner-layout-gap: 24px;
    --cookie-banner-actions-gap: 12px;
    --cookie-banner-actions-margin-top: 0px;
    --cookie-button-padding: 10px 16px;
    --cookie-button-font-size: 11px;
    --cookie-button-font-weight: 700;
    --cookie-button-letter-spacing: 1px;
    --cookie-button-radius: 12px;
    --cookie-accept-bg: var(--color-red);
    --cookie-accept-color: var(--color-light);
    --cookie-accept-border: var(--color-red);
    --cookie-reject-bg: transparent;
    --cookie-reject-color: var(--color-light);
    --cookie-reject-border: rgba(250, 249, 254, 0.24);
}

.scroll-to-top {
    position: fixed;
    right: var(--scroll-top-right);
    bottom: var(--scroll-top-bottom);
    z-index: var(--scroll-top-z-index);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--scroll-top-size);
    height: var(--scroll-top-size);
    border: 0;
    border-radius: var(--scroll-top-radius);
    background: var(--scroll-top-bg);
    color: var(--scroll-top-color);
    font-size: var(--scroll-top-font-size);
    line-height: 1;
    box-shadow:
        var(--scroll-top-shadow),
        inset 0 0 0 var(--scroll-top-ring-width) var(--scroll-top-ring-color);
    opacity: 0;
    visibility: hidden;
    transform: var(--scroll-top-hidden-transform);
    transition: opacity var(--transition-main), visibility var(--transition-main), transform var(--transition-main), background-color var(--transition-main), color var(--transition-main);
}

.scroll-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: var(--scroll-top-visible-transform);
}

.scroll-to-top:hover {
    background: var(--scroll-top-bg-hover);
    color: var(--scroll-top-color-hover);
}

.scroll-to-top__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-main, 0.3s ease);
}

.scroll-to-top__icon svg {
    display: block;
    width: 1.2em;
    height: 1.2em;
}

.scroll-to-top.is-visible:hover {
    transform: translateY(-4px) scale(1.06);
    box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.36),
        inset 0 0 0 var(--scroll-top-ring-width) var(--scroll-top-ring-color),
        0 0 24px rgba(222, 36, 47, 0.42);
}

.scroll-to-top:hover .scroll-to-top__icon {
    transform: translateY(-2px);
}

.scroll-to-top.is-visible:active {
    transform: translateY(-1px) scale(0.97);
}

.scroll-to-top:focus-visible {
    outline: none;
    box-shadow:
        var(--scroll-top-shadow),
        0 0 0 3px rgba(222, 36, 47, 0.55);
}

@media (prefers-reduced-motion: reduce) {
    .scroll-to-top,
    .scroll-to-top__icon {
        transition: opacity var(--transition-main), visibility var(--transition-main);
    }

    .scroll-to-top.is-visible:hover {
        transform: var(--scroll-top-visible-transform);
    }

    .scroll-to-top:hover .scroll-to-top__icon {
        transform: none;
    }
}

.cookie-banner {
    position: fixed;
    left: var(--cookie-banner-left);
    right: var(--cookie-banner-right);
    bottom: var(--cookie-banner-bottom);
    z-index: var(--cookie-banner-z-index);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--cookie-banner-layout-gap);
    row-gap: var(--cookie-banner-content-gap);
    align-items: center;
    width: var(--cookie-banner-width);
    max-width: var(--cookie-banner-max-width);
    padding: var(--cookie-banner-padding);
    border: 1px solid var(--cookie-banner-border);
    border-radius: var(--cookie-banner-radius);
    background: var(--cookie-banner-bg);
    color: var(--cookie-banner-color);
    box-shadow: var(--cookie-banner-shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(18px);
    transition: opacity var(--transition-main), transform var(--transition-main);
}

.cookie-banner.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.cookie-banner-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--cookie-banner-layout-gap);
    align-items: center;
    width: 100%;
}

.cookie-banner-content {
    display: grid;
    gap: var(--cookie-banner-content-gap);
    min-width: 0;
}

.cookie-banner-title {
    grid-column: 1;
    margin: var(--cookie-banner-title-margin);
    color: var(--cookie-banner-color);
    font-size: var(--cookie-banner-title-size);
    line-height: 1;
}

.cookie-banner-text {
    grid-column: 1;
    color: var(--cookie-banner-text-color);
    font-size: var(--cookie-banner-text-size);
    line-height: var(--cookie-banner-text-line-height);
}

.cookie-banner-text a {
    color: var(--cookie-banner-link-color);
    font-weight: var(--weight-bold);
}

.cookie-banner-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--cookie-banner-actions-gap);
    margin-top: var(--cookie-banner-actions-margin-top);
    white-space: nowrap;
}

.cookie-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--cookie-button-padding);
    border-radius: var(--cookie-button-radius);
    font-size: var(--cookie-button-font-size);
    font-weight: var(--cookie-button-font-weight);
    letter-spacing: var(--cookie-button-letter-spacing);
    line-height: 1;
    text-transform: uppercase;
    transition: background-color var(--transition-main), color var(--transition-main), border-color var(--transition-main);
}

.cookie-button-accept {
    border: 1px solid var(--cookie-accept-border);
    background: var(--cookie-accept-bg);
    color: var(--cookie-accept-color);
}

.cookie-button-reject {
    border: 1px solid var(--cookie-reject-border);
    background: var(--cookie-reject-bg);
    color: var(--cookie-reject-color);
}

.cookie-button:hover {
    background: var(--color-light);
    border-color: var(--color-light);
    color: var(--color-dark);
}

@media (max-width: 760px) {
    :root {
        --scroll-top-size: var(--scrolltop-size-mobile);
        --scroll-top-right: 16px;
        --scroll-top-bottom: 16px;
        --partnerships-marquee-gap: var(--partner-logo-gap-mobile);
        --cookie-banner-left: 50%;
        --cookie-banner-right: auto;
        --cookie-banner-bottom: 18px;
        --cookie-banner-width: calc(100vw - 32px);
        --cookie-banner-max-width: calc(100vw - 32px);
        --cookie-banner-padding: 20px;
        --cookie-banner-title-size: 21px;
        --cookie-banner-layout-gap: 18px;
        --cookie-banner-actions-margin-top: 4px;
    }

    .cookie-banner,
    .cookie-banner-inner {
        grid-template-columns: 1fr;
    }

    .cookie-banner-title,
    .cookie-banner-text,
    .cookie-banner-actions {
        grid-column: 1;
        grid-row: auto;
    }

    .cookie-banner-actions {
        align-items: stretch;
        flex-direction: column;
        justify-content: flex-start;
        white-space: normal;
    }

    .cookie-button {
        width: 100%;
    }
}

/* ==================================================
   FINAL FRONT PAGE ORDER / FLOW / MOBILE CARD FIXES
================================================== */
.equipment-flow {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: transparent;
}

.programs-membership-flow {
    position: relative;
    overflow: visible;
    isolation: isolate;
    background: transparent;
}

.programs-membership-flow .programs-section,
.programs-membership-flow .membership-section,
.programs-membership-flow .partnerships-section,
.programs-membership-flow .booking-section,
.equipment-flow .equipment-section {
    background: transparent;
}

.programs-membership-flow .programs-bg,
.programs-membership-flow .membership-bg,
.programs-membership-flow .partnerships-bg {
    display: none;
}


.equipment-flow .equipment-section {
    color: var(--color-light);
}

.equipment-flow .equipment-title {
    color: var(--color-light);
}

.equipment-flow .equipment-text {
    color: rgba(250, 249, 254, 0.78);
}

.equipment-flow .equipment-name {
    background: rgba(250, 249, 254, 0.08);
    color: var(--color-light);
    border-color: rgba(250, 249, 254, 0.16);
}

.equipment-flow .equipment-carousel-viewport {
    background: rgba(250, 249, 254, 0.08);
    border-color: rgba(250, 249, 254, 0.16);
}

@media (max-width: 760px) {
    .programs-grid,
    .blog-grid {
        display: flex;
        grid-template-columns: none;
        gap: var(--programs-grid-gap);
        width: calc(100vw - (var(--container-padding) * 2));
        max-width: none;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 14px;
    }

    .blog-grid {
        gap: var(--blog-grid-gap);
    }

    .program-card,
    .blog-card {
        flex: 0 0 min(84vw, 360px);
        scroll-snap-align: start;
    }

    .programs-grid::-webkit-scrollbar,
    .blog-grid::-webkit-scrollbar,
    .membership-grid::-webkit-scrollbar {
        height: 6px;
    }

    .programs-grid::-webkit-scrollbar-track,
    .blog-grid::-webkit-scrollbar-track,
    .membership-grid::-webkit-scrollbar-track {
        background: rgba(250, 249, 254, 0.08);
    }

    .programs-grid::-webkit-scrollbar-thumb,
    .blog-grid::-webkit-scrollbar-thumb,
    .membership-grid::-webkit-scrollbar-thumb {
        background: rgba(222, 36, 47, 0.75);
    }

    .membership-grid {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 14px;
    }

    .membership-card {
        flex: 0 0 min(84vw, 360px);
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .membership-card.is-active {
        order: 0;
    }
}

@media (max-width: 400px) {
    .membership-selector {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        gap: clamp(3px, 1.2vw, 8px);
        box-sizing: border-box;
    }

    .membership-selector-button {
        flex: 1 1 0;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 9px 3px;
        font-size: clamp(9px, 2.4vw, 11px);
        letter-spacing: 0.12em;
    }
}


/* ==================================================
   FINAL MOTION / LOADER / MOBILE PAGE-LIKE LAYOUT
================================================== */
:root {
    --page-loader-bg: rgba(6, 6, 10, 0.28);
    --page-loader-panel-width: min(220px, 62vw);
    --page-loader-panel-height: 3px;
    --page-loader-panel-bg: rgba(255, 255, 255, 0.1);
    --page-loader-shimmer-color: rgba(250, 249, 254, 0.72);
    --page-loader-z-index: 9999;
    --page-loader-fade-duration: 280ms;
    --page-loader-shimmer-duration: 1.35s;
    --page-enter-duration: 380ms;
    --page-leave-duration: 160ms;
    --page-enter-easing: cubic-bezier(0.22, 1, 0.36, 1);
    --scroll-reveal-distance: 28px;
    --scroll-reveal-duration: 720ms;
    --scroll-reveal-delay-step: 80ms;
    --scroll-reveal-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
    --scroll-top-radius: 999px;
}

.site-page-loader {
    position: fixed;
    inset: 0;
    z-index: var(--page-loader-z-index);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--page-loader-bg);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transition: opacity var(--page-loader-fade-duration) ease, visibility var(--page-loader-fade-duration) ease;
}

.site-page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.site-page-loader-panel {
    position: relative;
    width: var(--page-loader-panel-width);
    height: var(--page-loader-panel-height);
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: var(--page-loader-panel-bg);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.site-page-loader-shimmer {
    position: absolute;
    inset: 0;
    width: 42%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--page-loader-shimmer-color) 48%,
        transparent 100%
    );
    transform: translateX(-120%);
    animation: pageLoaderShimmerSweep var(--page-loader-shimmer-duration) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes pageLoaderShimmerSweep {
    0% {
        transform: translateX(-120%);
        opacity: 0.35;
    }

    45% {
        opacity: 1;
    }

    100% {
        transform: translateX(320%);
        opacity: 0.35;
    }
}

body.is-page-entering .site-header,
body.is-page-entering .site-main,
body.is-page-entering .site-footer {
    opacity: 0;
}

body.is-page-ready .site-header,
body.is-page-ready .site-main,
body.is-page-ready .site-footer {
    opacity: 1;
    transition: opacity var(--page-enter-duration) var(--page-enter-easing);
}

body.is-page-leaving .site-header,
body.is-page-leaving .site-main,
body.is-page-leaving .site-footer {
    opacity: 1;
    transition: none;
}


.scroll-to-top {
    border-radius: 999px;
}

@media (max-width: 760px) {
    .programs-grid,
    .blog-grid {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
        overflow: visible;
        padding-bottom: 0;
        scroll-snap-type: none;
    }

    .programs-grid {
        gap: var(--programs-page-grid-gap);
    }

    .blog-grid {
        gap: var(--blog-grid-gap);
    }

    .program-card,
    .blog-card {
        flex: initial;
        width: 100%;
        max-width: 100%;
        scroll-snap-align: none;
    }

    .program-card {
        min-height: var(--programs-page-card-min-height-mobile);
    }

    .program-card-content {
        min-height: var(--programs-page-card-min-height-mobile);
        padding: var(--programs-page-card-padding);
    }

    .program-card-title {
        font-size: var(--programs-page-card-title-size-mobile);
    }

    .program-card-text {
        font-size: var(--programs-page-card-text-size);
        line-height: var(--programs-page-card-text-line-height);
    }

    .blog-card {
        border-color: var(--blog-page-card-border);
        border-radius: var(--blog-page-card-radius);
    }

    .blog-card-image-wrap,
    .blog-card-image {
        height: var(--blog-image-height-mobile);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-page-loader-shimmer {
        animation: none;
        transform: none;
        opacity: 0.55;
    }

    body.is-page-entering .site-header,
    body.is-page-entering .site-main,
    body.is-page-entering .site-footer,
    body.is-page-ready .site-header,
    body.is-page-ready .site-main,
    body.is-page-ready .site-footer,
    body.is-page-leaving .site-header,
    body.is-page-leaving .site-main,
    body.is-page-leaving .site-footer {
        opacity: 1;
        transition: none;
    }

    .site-page-loader {
        display: none;
    }
}

/* ==================================================
   FINAL TUNE: EQUIPMENT WIDTH, DOT INDICATORS, MEMBERSHIP SELECTOR
================================================== */
:root {
    --equipment-carousel-width: min(1480px, calc(100vw - 96px));
    --equipment-carousel-max-width: calc(100vw - 96px);
    --equipment-carousel-dot-size: 8px;
    --equipment-carousel-dot-active-width: 26px;
    --equipment-carousel-dot-gap: 8px;
    --equipment-carousel-dot-bg: rgba(250, 249, 254, 0.30);
    --equipment-carousel-dot-active-bg: var(--color-red);
    --equipment-carousel-dot-margin-top: 22px;
    --membership-dot-size: 8px;
    --membership-dot-active-width: 28px;
    --membership-dot-gap: 8px;
    --membership-dot-bg: rgba(250, 249, 254, 0.26);
    --membership-dot-active-bg: var(--color-red);
    --membership-dot-margin-top: 24px;
    --membership-selector-width: 100%;
    --membership-selector-button-min-height: 42px;
}

.equipment-carousel {
    width: var(--equipment-carousel-width);
    max-width: var(--equipment-carousel-max-width);
    margin-left: 50%;
    margin-right: 0;
    transform: translateX(-50%);
}

.equipment-carousel-dots,
.membership-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--equipment-carousel-dot-gap);
    width: 100%;
}

.equipment-carousel-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(-1 * var(--equipment-carousel-dot-margin-top) - var(--equipment-carousel-dot-size));
}

.equipment-carousel-dot,
.membership-dot {
    display: block;
    width: var(--equipment-carousel-dot-size);
    height: var(--equipment-carousel-dot-size);
    border-radius: 999px;
    background: var(--equipment-carousel-dot-bg);
    transition: width var(--transition-main), background-color var(--transition-main), opacity var(--transition-main);
    opacity: 0.9;
}

.equipment-carousel-dot.is-active {
    width: var(--equipment-carousel-dot-active-width);
    background: var(--equipment-carousel-dot-active-bg);
    opacity: 1;
}

.membership-dots {
    gap: var(--membership-dot-gap);
    margin-top: var(--membership-dot-margin-top);
}

.membership-dot {
    width: var(--membership-dot-size);
    height: var(--membership-dot-size);
    background: var(--membership-dot-bg);
}

.membership-dot.is-active {
    width: var(--membership-dot-active-width);
    background: var(--membership-dot-active-bg);
}

.membership-selector {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    max-width: var(--membership-selector-width);
    box-sizing: border-box;
    overflow: hidden;
}

.membership-selector-button {
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--membership-selector-button-min-height);
    padding-left: clamp(4px, 1.5vw, 12px);
    padding-right: clamp(4px, 1.5vw, 12px);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1180px) {
    :root {
        --equipment-carousel-width: calc(100vw - 64px);
        --equipment-carousel-max-width: calc(100vw - 64px);
        --equipment-slide-height: 460px;
        --equipment-arrow-offset: -44px;
    }
}

@media (max-width: 760px) {
    :root {
        --equipment-carousel-width: calc(100vw - 8px);
        --equipment-carousel-max-width: calc(100vw - 8px);
        --equipment-slide-height: var(--equipment-slide-height-mobile);
        --equipment-arrow-offset: -2px;
        --equipment-carousel-dot-margin-top: 18px;
        --membership-selector-width: 100%;
        --membership-selector-gap: 6px;
        --membership-selector-padding: 6px;
        --membership-selector-button-min-height: 38px;
    }

    .equipment-carousel {
        padding: 0 18px;
        box-sizing: border-box;
    }

    .membership-selector {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .membership-selector-button {
        flex: 1 1 0;
        min-width: 0;
        font-size: clamp(10px, 2.5vw, 12px);
        letter-spacing: 0.35px;
        padding: 10px 5px;
    }
}

.equipment-carousel {
    margin-bottom: calc(var(--equipment-carousel-dot-margin-top) + var(--equipment-carousel-dot-size) + 8px);
}

.equipment-carousel-dot,
.membership-dot {
    cursor: pointer;
}

/* ==================================================
   FINAL PATCH: SMOOTHER MEMBERSHIP FLOW + STABLE CAROUSEL SWIPE + PHOTO OPACITY
================================================== */
:root {
    --equipment-slide-image-opacity: 0.86;
    --equipment-carousel-swipe-speed: 420ms;
    --membership-mobile-card-width: min(86vw, 370px);
    --membership-mobile-scroll-gap: 16px;
}

.equipment-carousel-viewport {
    touch-action: pan-y;
}

.equipment-carousel-track {
    transition: transform var(--equipment-carousel-swipe-speed) cubic-bezier(0.22, 1, 0.36, 1);
}

.equipment-slide-image {
    opacity: var(--equipment-slide-image-opacity);
    transition: opacity var(--transition-main), transform var(--transition-header);
}

.equipment-carousel-dot,
.membership-dot {
    flex: 0 0 auto;
    will-change: width;
}

@media (max-width: 760px) {
    .membership-grid {
        gap: var(--membership-mobile-scroll-gap);
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scroll-padding-left: calc((100vw - var(--membership-mobile-card-width)) / 2);
        scroll-padding-right: calc((100vw - var(--membership-mobile-card-width)) / 2);
        padding-left: calc((100vw - var(--membership-mobile-card-width)) / 2);
        padding-right: calc((100vw - var(--membership-mobile-card-width)) / 2);
        padding-bottom: 18px;
        scrollbar-width: none;
    }

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

    .membership-card {
        flex: 0 0 var(--membership-mobile-card-width);
        scroll-snap-align: center;
        scroll-snap-stop: always;
        transition: border-color 260ms ease, box-shadow 260ms ease, background-color 260ms ease, opacity 260ms ease;
    }

    .membership-card.is-active {
        transform: none;
    }
}

/* ==================================================
   FINAL PATCH: SMOOTHER MEMBERSHIP GLOW + CLEAN SYNC DOTS
================================================== */
:root {
    --equipment-slide-image-opacity: 0.84;
    --membership-card-glow-speed: 520ms;
    --membership-card-glow-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --membership-card-mobile-inactive-opacity: 0.72;
    --membership-card-mobile-inactive-scale: 0.965;
    --membership-card-mobile-active-scale: 1;
    --membership-card-mobile-active-glow: 0 0 42px rgba(222, 36, 47, 0.38);
}

.equipment-carousel-dot,
.membership-dot {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    border: 0;
    outline: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background-color: var(--equipment-carousel-dot-bg);
    transition: width 220ms ease, opacity 220ms ease, transform 220ms ease;
}

.equipment-carousel-dot.is-active,
.membership-dot.is-active {
    transform: translateZ(0);
}

.equipment-carousel-dot:not(.is-active) {
    width: var(--equipment-carousel-dot-size);
    background-color: var(--equipment-carousel-dot-bg);
}

.equipment-carousel-dot.is-active {
    width: var(--equipment-carousel-dot-active-width);
    background-color: var(--equipment-carousel-dot-active-bg);
}

.membership-dot:not(.is-active) {
    width: var(--membership-dot-size);
    background-color: var(--membership-dot-bg);
}

.membership-dot.is-active {
    width: var(--membership-dot-active-width);
    background-color: var(--membership-dot-active-bg);
}

.membership-card {
    transition:
        transform var(--membership-card-glow-speed) var(--membership-card-glow-ease),
        box-shadow var(--membership-card-glow-speed) var(--membership-card-glow-ease),
        border-color var(--membership-card-glow-speed) var(--membership-card-glow-ease),
        background-color var(--membership-card-glow-speed) var(--membership-card-glow-ease),
        opacity var(--membership-card-glow-speed) var(--membership-card-glow-ease);
}

@media (max-width: 760px) {
    .membership-grid {
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scroll-padding-left: calc((100vw - var(--membership-mobile-card-width)) / 2);
        scroll-padding-right: calc((100vw - var(--membership-mobile-card-width)) / 2);
        padding-left: calc((100vw - var(--membership-mobile-card-width)) / 2);
        padding-right: calc((100vw - var(--membership-mobile-card-width)) / 2);
        gap: var(--membership-mobile-scroll-gap);
    }

    .membership-card {
        flex: 0 0 var(--membership-mobile-card-width);
        scroll-snap-align: center;
        scroll-snap-stop: always;
        opacity: var(--membership-card-mobile-inactive-opacity);
        transform: scale(var(--membership-card-mobile-inactive-scale));
        will-change: transform, opacity, box-shadow;
    }

    .membership-card.is-active {
        opacity: 1;
        transform: scale(var(--membership-card-mobile-active-scale));
        box-shadow: var(--membership-card-mobile-active-glow);
    }

    .equipment-carousel-dot,
    .membership-dot {
        transition: width 200ms ease, opacity 200ms ease, transform 200ms ease;
    }
}


/* ==================================================
   FINAL PATCH: MOBILE MEMBERSHIP CENTER + MAP COMPACT
================================================== */
:root {
    --membership-mobile-card-width-final: min(82vw, 348px);
    --membership-mobile-edge-gutter-final: 40px;
    --membership-mobile-card-gap-final: 18px;
    --membership-mobile-active-glow-final: var(--membership-card-glow-active);
    --membership-mobile-active-transform-final: translateY(-6px) scale(1.015);
    --membership-mobile-inactive-transform-final: scale(0.94);
    --membership-mobile-inactive-opacity-final: 0.58;
    --location-map-height-mobile-compact: clamp(250px, 62vw, 340px);
    --location-map-width-mobile-compact: min(92vw, 420px);
    --contact-location-map-height-mobile-compact: clamp(250px, 62vw, 340px);
    --contact-location-map-width-mobile-compact: min(92vw, 420px);
}

@media (max-width: 760px) {
    .membership-selector {
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
        justify-content: center;
        flex-wrap: nowrap;
        overflow: hidden;
        box-sizing: border-box;
    }

    .membership-selector-button {
        flex: 1 1 0;
        min-width: 0;
        padding-inline: clamp(3px, 1.8vw, 14px);
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .membership-grid {
        display: flex !important;
        grid-template-columns: none !important;
        width: 100vw;
        max-width: 100vw;
        gap: var(--membership-mobile-card-gap-final) !important;
        overflow-x: auto;
        overflow-y: visible;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scroll-padding-left: calc((100vw - var(--membership-mobile-card-width-final)) / 2);
        scroll-padding-right: calc((100vw - var(--membership-mobile-card-width-final)) / 2);
        padding-left: calc((100vw - var(--membership-mobile-card-width-final)) / 2) !important;
        padding-right: calc((100vw - var(--membership-mobile-card-width-final)) / 2) !important;
        padding-top: 18px;
        padding-bottom: 24px;
        margin-left: 50%;
        margin-right: 0;
        transform: translateX(-50%);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

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

    .membership-grid::before,
    .membership-grid::after {
        content: "";
        display: block;
        flex: 0 0 var(--membership-mobile-edge-gutter-final);
        width: var(--membership-mobile-edge-gutter-final);
        height: 1px;
        pointer-events: none;
    }

    .membership-card {
        flex: 0 0 var(--membership-mobile-card-width-final) !important;
        width: var(--membership-mobile-card-width-final) !important;
        max-width: var(--membership-mobile-card-width-final);
        min-width: var(--membership-mobile-card-width-final);
        scroll-snap-align: center;
        scroll-snap-stop: always;
        opacity: var(--membership-mobile-inactive-opacity-final);
        transform: var(--membership-mobile-inactive-transform-final);
        box-shadow: var(--membership-card-glow-soft);
        transition:
            transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 520ms cubic-bezier(0.22, 1, 0.36, 1),
            border-color 520ms cubic-bezier(0.22, 1, 0.36, 1),
            background-color 520ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform, opacity, box-shadow;
    }

    .membership-card.is-active {
        opacity: 1;
        transform: var(--membership-mobile-active-transform-final);
        background: var(--membership-card-bg-active);
        border-color: var(--membership-card-border-active);
        box-shadow: var(--membership-mobile-active-glow-final);
    }

    .membership-card.is-prev,
    .membership-card.is-next {
        transform: scale(0.965);
        opacity: 0.74;
    }

    .membership-dots {
        margin-top: 12px;
    }

    .location-map-container,
    .contact-location-map-container {
        width: var(--location-map-width-mobile-compact) !important;
        max-width: var(--location-map-width-mobile-compact) !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .location-map-wrap {
        height: var(--location-map-height-mobile-compact) !important;
        width: 100%;
    }

    .contact-location-map-container {
        width: var(--contact-location-map-width-mobile-compact) !important;
        max-width: var(--contact-location-map-width-mobile-compact) !important;
    }

    .contact-location-map-wrap {
        height: var(--contact-location-map-height-mobile-compact) !important;
        width: 100%;
    }
}

@media (max-width: 420px) {
    :root {
        --membership-mobile-card-width-final: min(86vw, 340px);
        --location-map-width-mobile-compact: min(90vw, 360px);
        --contact-location-map-width-mobile-compact: min(90vw, 360px);
    }
}

/* ==================================================
   FINAL VISUAL PATCH: SOFT MEMBERSHIP GLOW + TALLER MOBILE MAPS
   Keeps the active card glow behind the card instead of looking like a red background.
================================================== */
:root {
    --membership-card-bg-active-soft-final: rgba(250, 249, 254, 0.068);
    --membership-card-border-active-soft-final: rgba(222, 36, 47, 0.54);
    --membership-card-shadow-active-soft-final: 0 18px 42px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(250, 249, 254, 0.08) inset;
    --membership-card-back-glow-color-final: rgba(222, 36, 47, 0.34);
    --membership-card-back-glow-size-final: 112%;
    --membership-card-back-glow-blur-final: 34px;
    --membership-card-back-glow-opacity-final: 0.85;
    --membership-card-back-glow-transition-final: 620ms;
    --location-map-height-mobile-compact: clamp(300px, 72vw, 390px);
    --contact-location-map-height-mobile-compact: clamp(300px, 72vw, 390px);
}

.membership-card {
    position: relative;
    isolation: isolate;
    overflow: visible;
}

.membership-card::before {
    content: "";
    position: absolute;
    inset: -22px;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(
        circle at 50% 52%,
        var(--membership-card-back-glow-color-final) 0%,
        rgba(222, 36, 47, 0.18) 32%,
        rgba(222, 36, 47, 0.07) 54%,
        rgba(222, 36, 47, 0) 74%
    );
    filter: blur(var(--membership-card-back-glow-blur-final));
    transform: scale(0.88);
    transition:
        opacity var(--membership-card-back-glow-transition-final) cubic-bezier(0.22, 1, 0.36, 1),
        transform var(--membership-card-back-glow-transition-final) cubic-bezier(0.22, 1, 0.36, 1);
}

.membership-card.is-active {
    background: var(--membership-card-bg-active-soft-final);
    border-color: var(--membership-card-border-active-soft-final);
    box-shadow: var(--membership-card-shadow-active-soft-final);
}

.membership-card.membership-card--gold.is-active {
    background: linear-gradient(165deg, rgba(212, 175, 55, 0.22) 0%, rgba(250, 249, 254, 0.09) 45%, rgba(20, 14, 4, 0.45) 100%);
    border-color: rgba(244, 228, 168, 0.85);
    box-shadow:
        0 0 0 1px rgba(255, 236, 179, 0.14) inset,
        0 0 28px rgba(212, 175, 55, 0.2),
        0 0 56px rgba(212, 175, 55, 0.12),
        0 0 100px rgba(0, 0, 0, 0.35);
}

.membership-card.is-active::before {
    opacity: var(--membership-card-back-glow-opacity-final);
    transform: scale(1);
}

.membership-card.membership-card--gold.is-active::before {
    background: radial-gradient(
        circle at 50% 50%,
        rgba(244, 228, 168, 0.28) 0%,
        rgba(212, 175, 55, 0.16) 26%,
        rgba(212, 175, 55, 0.06) 48%,
        rgba(0, 0, 0, 0) 72%
    );
    inset: -32px;
    filter: blur(40px);
    transform: scale(1.06);
}

@media (max-width: 760px) {
    .membership-card.is-active {
        background: var(--membership-card-bg-active-soft-final) !important;
        border-color: var(--membership-card-border-active-soft-final) !important;
        box-shadow: var(--membership-card-shadow-active-soft-final) !important;
    }

    .membership-card.membership-card--gold.is-active {
        background: linear-gradient(165deg, rgba(212, 175, 55, 0.22) 0%, rgba(250, 249, 254, 0.09) 45%, rgba(20, 14, 4, 0.45) 100%) !important;
        border-color: rgba(244, 228, 168, 0.85) !important;
        box-shadow:
            0 0 0 1px rgba(255, 236, 179, 0.14) inset,
            0 0 32px rgba(212, 175, 55, 0.22),
            0 0 64px rgba(212, 175, 55, 0.12),
            0 0 120px rgba(0, 0, 0, 0.38) !important;
    }

    .membership-card.membership-card--gold.is-active::before {
        background: radial-gradient(
            circle at 50% 50%,
            rgba(244, 228, 168, 0.26) 0%,
            rgba(212, 175, 55, 0.14) 30%,
            rgba(212, 175, 55, 0.05) 52%,
            rgba(0, 0, 0, 0) 78%
        ) !important;
        inset: -40px -28px !important;
        filter: blur(52px) !important;
        transform: scale(1.08) !important;
        opacity: 0.92 !important;
    }

    .membership-card::before {
        inset: -18px;
    }

    .location-map-wrap {
        height: var(--location-map-height-mobile-compact) !important;
    }

    .contact-location-map-wrap {
        height: var(--contact-location-map-height-mobile-compact) !important;
    }
}

@media (max-width: 420px) {
    :root {
        --location-map-height-mobile-compact: clamp(285px, 78vw, 360px);
        --contact-location-map-height-mobile-compact: clamp(285px, 78vw, 360px);
    }
}

/* ==================================================
   SOFT READABILITY PATCH FOR RED / BLACK FLOW SECTIONS
   Darkens the gradient background around text areas only, without putting headings/text into boxes.
================================================== */
:root {
    --flow-text-safe-black-strong: rgba(0, 0, 8, 0.56);
    --flow-text-safe-black-mid: rgba(0, 0, 8, 0.32);
    --flow-text-safe-black-soft: rgba(0, 0, 8, 0.18);
    --flow-text-safe-red-soft: rgba(222, 36, 47, 0.055);
    --eyebrow-glow-color: rgba(250, 249, 254, 0.20);
    --eyebrow-red-glow-color: rgba(222, 36, 47, 0.16);
    --eyebrow-glow-shadow: 0 0 5px var(--eyebrow-glow-color), 0 0 12px var(--eyebrow-red-glow-color);
}

.programs-membership-flow::before,
.equipment-flow::before,
.location-faq-flow::before,
.programs-page-flow::before,
.contact-page-flow::before,
.blog-page-flow::before,
.legal-page-flow::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 18%, var(--flow-text-safe-black-strong) 0%, var(--flow-text-safe-black-mid) 27%, transparent 57%),
        radial-gradient(ellipse at 18% 28%, var(--flow-text-safe-black-mid) 0%, var(--flow-text-safe-black-soft) 32%, transparent 62%),
        radial-gradient(ellipse at 82% 30%, var(--flow-text-safe-black-mid) 0%, var(--flow-text-safe-black-soft) 30%, transparent 60%),
        radial-gradient(ellipse at 50% 72%, var(--flow-text-safe-black-soft) 0%, transparent 56%),
        linear-gradient(180deg, rgba(0, 0, 8, 0.22) 0%, transparent 38%, rgba(0, 0, 8, 0.16) 100%);
    mix-blend-mode: normal;
}

.programs-membership-flow::after,
.equipment-flow::after,
.location-faq-flow::after,
.programs-page-flow::after,
.contact-page-flow::after,
.blog-page-flow::after,
.legal-page-flow::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 82% 18%, var(--flow-text-safe-red-soft) 0%, transparent 36%),
        radial-gradient(circle at 16% 86%, rgba(222, 36, 47, 0.04) 0%, transparent 42%);
}

.programs-membership-flow > *,
.equipment-flow > *,
.location-faq-flow > *,
.programs-page-flow > *,
.contact-page-flow > *,
.blog-page-flow > *,
.legal-page-flow > * {
    position: relative;
    z-index: 1;
}

.programs-eyebrow,
.membership-eyebrow,
.booking-section-intro-eyebrow,
.equipment-eyebrow,
.location-eyebrow,
.faq-eyebrow,
.about-eyebrow,
.bmi-eyebrow,
.strength-eyebrow,
.gym-gallery-eyebrow,
.partnerships-eyebrow,
.get-in-touch-eyebrow,
.blog-eyebrow,
.programs-page-eyebrow,
.contact-page-eyebrow,
.contact-location-eyebrow,
.blog-page-eyebrow,
.legal-page-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--global-eyebrow-line-gap);
    max-width: 100%;
    text-shadow: var(--eyebrow-glow-shadow);
}

.programs-eyebrow::before,
.membership-eyebrow::before,
.booking-section-intro-eyebrow::before,
.equipment-eyebrow::before,
.location-eyebrow::before,
.faq-eyebrow::before,
.about-eyebrow::before,
.bmi-eyebrow::before,
.strength-eyebrow::before,
.gym-gallery-eyebrow::before,
.partnerships-eyebrow::before,
.get-in-touch-eyebrow::before,
.blog-eyebrow::before,
.programs-page-eyebrow::before,
.contact-page-eyebrow::before,
.contact-location-eyebrow::before,
.blog-page-eyebrow::before,
.legal-page-eyebrow::before,
.programs-eyebrow::after,
.membership-eyebrow::after,
.booking-section-intro-eyebrow::after,
.equipment-eyebrow::after,
.location-eyebrow::after,
.faq-eyebrow::after,
.about-eyebrow::after,
.bmi-eyebrow::after,
.strength-eyebrow::after,
.gym-gallery-eyebrow::after,
.partnerships-eyebrow::after,
.get-in-touch-eyebrow::after,
.blog-eyebrow::after,
.programs-page-eyebrow::after,
.contact-page-eyebrow::after,
.contact-location-eyebrow::after,
.blog-page-eyebrow::after,
.legal-page-eyebrow::after {
    content: "";
    flex: 0 0 auto;
    width: var(--global-eyebrow-line-width);
    height: var(--global-eyebrow-line-thickness);
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--global-eyebrow-line-color),
        transparent
    );
}

@media (max-width: 760px) {
    :root {
        --flow-text-safe-black-strong: rgba(0, 0, 8, 0.58);
        --flow-text-safe-black-mid: rgba(0, 0, 8, 0.34);
        --flow-text-safe-black-soft: rgba(0, 0, 8, 0.20);
        --hero-aurora-readability-strong: rgba(0, 0, 8, 0.66);
        --hero-aurora-readability-mid: rgba(0, 0, 8, 0.4);
        --hero-aurora-readability-size-x: 100%;
        --hero-aurora-readability-size-y: 78%;
        --hero-aurora-readability-pos-y: 40%;
    }

    .programs-membership-flow::before,
    .equipment-flow::before,
    .location-faq-flow::before,
    .programs-page-flow::before,
    .contact-page-flow::before,
    .blog-page-flow::before,
    .legal-page-flow::before {
        background:
            radial-gradient(ellipse at 50% 14%, var(--flow-text-safe-black-strong) 0%, var(--flow-text-safe-black-mid) 34%, transparent 66%),
            radial-gradient(ellipse at 50% 42%, var(--flow-text-safe-black-mid) 0%, transparent 58%),
            radial-gradient(ellipse at 50% 78%, var(--flow-text-safe-black-soft) 0%, transparent 60%),
            linear-gradient(180deg, rgba(0, 0, 8, 0.24) 0%, transparent 42%, rgba(0, 0, 8, 0.18) 100%);
    }
}


/* ==================================================
   FINAL PATCH: media controls visual polish / glass effects
   - Smaller mobile program cards
   - Clean white FAQ barbell
   - Smooth glass membership selector/cards
   - Black glass BMI table/result
================================================== */
:root {
    --program-card-min-height-mobile: 340px;
    --membership-glass-bg: rgba(255, 255, 255, 0.075);
    --membership-glass-bg-active: rgba(255, 255, 255, 0.105);
    --membership-glass-border: rgba(255, 255, 255, 0.18);
    --membership-glass-border-active: rgba(255, 255, 255, 0.30);
    --membership-glass-blur: 18px;
    --membership-glass-shadow: 0 22px 58px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.06);
    --membership-glass-shadow-active: 0 28px 76px rgba(0, 0, 0, 0.38), 0 0 42px rgba(222, 36, 47, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 -1px 0 rgba(255, 255, 255, 0.08);
    --membership-glass-shine-opacity: 0.38;
    --bmi-black-glass-bg: rgba(0, 0, 8, 0.62);
    --bmi-black-glass-border: rgba(255, 255, 255, 0.14);
    --bmi-black-glass-shadow: 0 24px 70px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --bmi-black-glass-blur: 18px;
    --faq-toggle-size: 38px;
    --faq-toggle-color: #ffffff;
    --faq-toggle-open-color: #ffffff;
    --faq-toggle-outline-color: transparent;
    --faq-toggle-outline-offset: 0px;
    --faq-toggle-inner-offset: 0px;
}

/* Program cards: shorter and smoother on mobile */
@media (max-width: 768px) {
    .program-card { min-height: var(--program-card-min-height-mobile); }
    .program-card-content { min-height: var(--program-card-min-height-mobile); padding: 22px; }
    .program-card-number { margin-bottom: 14px; }
    .program-card-title { margin-bottom: 10px; }
    .program-card-text { margin-bottom: 18px; overflow: visible; display: block; -webkit-line-clamp: unset; -webkit-box-orient: unset; }
}

/* FAQ: clean white barbell only, no black/inner outline */
.faq-toggle::before { display: none !important; }
.faq-toggle::after {
    inset: 0 !important;
    background: #ffffff !important;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.34));
}
.faq-item.is-open .faq-toggle::after { background: #ffffff !important; }

/* Membership selector/buttons: transparent glass blur with smooth shine */
.membership-selector {
    border: 1px solid var(--membership-glass-border) !important;
    background: rgba(255, 255, 255, 0.055) !important;
    box-shadow: var(--membership-glass-shadow);
    backdrop-filter: blur(var(--membership-glass-blur)) saturate(130%);
    -webkit-backdrop-filter: blur(var(--membership-glass-blur)) saturate(130%);
    position: relative;
    overflow: hidden;
}
.membership-selector::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02) 38%, rgba(222,36,47,0.06) 78%, transparent);
    opacity: 0.55;
}
.membership-selector-button {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255,255,255,0.10) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    overflow: hidden;
}
.membership-selector-button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,0.20), transparent 44%, rgba(255,255,255,0.04));
    opacity: 0.42;
}
.membership-selector-button.is-active {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
    color: #fff !important;
    box-shadow: 0 0 26px rgba(222,36,47,0.18), inset 0 1px 0 rgba(255,255,255,0.24) !important;
}

/* Membership cards: smooth transparent glass with soft blended shine */
.membership-card {
    position: relative;
    overflow: hidden;
    background: var(--membership-glass-bg) !important;
    border: 1px solid var(--membership-glass-border) !important;
    box-shadow: var(--membership-glass-shadow) !important;
    backdrop-filter: blur(var(--membership-glass-blur)) saturate(135%);
    -webkit-backdrop-filter: blur(var(--membership-glass-blur)) saturate(135%);
}
.membership-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,0.22), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.16), transparent 42%, rgba(222,36,47,0.055) 100%);
    opacity: var(--membership-glass-shine-opacity);
    transition: opacity var(--membership-card-transition-duration) var(--membership-card-transition-ease);
}
.membership-card::after {
    content: '';
    position: absolute;
    inset: -35%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(222,36,47,0.12), transparent 48%);
    opacity: 0;
    filter: blur(18px);
    transition: opacity var(--membership-card-transition-duration) var(--membership-card-transition-ease);
}
.membership-card > * { position: relative; z-index: 1; }
.membership-card.is-active {
    background: var(--membership-glass-bg-active) !important;
    border-color: var(--membership-glass-border-active) !important;
    box-shadow: var(--membership-glass-shadow-active) !important;
}
.membership-card.is-active::before { opacity: 0.58; }
.membership-card.is-active::after { opacity: 1; }

/* BMI: smoother black glass table/result */
.bmi-result,
.bmi-table-wrap {
    background: var(--bmi-black-glass-bg) !important;
    border: 1px solid var(--bmi-black-glass-border) !important;
    box-shadow: var(--bmi-black-glass-shadow) !important;
    backdrop-filter: blur(var(--bmi-black-glass-blur)) saturate(130%);
    -webkit-backdrop-filter: blur(var(--bmi-black-glass-blur)) saturate(130%);
    position: relative;
    overflow: hidden;
}
.bmi-result::before,
.bmi-table-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,0.10), transparent 42%, rgba(255,255,255,0.025));
}
.bmi-result > *,
.bmi-table-wrap > * { position: relative; z-index: 1; }
.bmi-table th { background: rgba(222, 36, 47, 0.72) !important; }
.bmi-table th,
.bmi-table td { border-bottom-color: rgba(255, 255, 255, 0.12) !important; }

/* ==================================================
   FINAL PATCH: Reference-style dark glassmorphism
   - Membership cards / selector: dark frosted glass with soft white reflections
   - Active plan: smooth highlight, no solid red box
   - BMI: black glass panel/table with subtle 3D depth
================================================== */
:root {
    --reference-glass-radius: 34px;
    --reference-glass-radius-small: 999px;
    --reference-glass-bg: rgba(18, 20, 20, 0.34);
    --reference-glass-bg-active: rgba(28, 30, 30, 0.42);
    --reference-glass-border: rgba(255, 255, 255, 0.20);
    --reference-glass-border-active: rgba(255, 255, 255, 0.34);
    --reference-glass-blur: 26px;
    --reference-glass-shadow: 0 28px 80px rgba(0, 0, 0, 0.34), 0 10px 26px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 -1px 0 rgba(255, 255, 255, 0.08);
    --reference-glass-shadow-active: 0 34px 96px rgba(0, 0, 0, 0.42), 0 0 54px rgba(222, 36, 47, 0.18), 0 0 90px rgba(255, 255, 255, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 rgba(255, 255, 255, 0.10);
    --reference-glass-red-soft: rgba(222, 36, 47, 0.16);
    --reference-glass-white-strong: rgba(255, 255, 255, 0.42);
    --reference-glass-white-soft: rgba(255, 255, 255, 0.10);
    --reference-bmi-glass-bg: rgba(3, 4, 6, 0.58);
    --reference-bmi-glass-bg-soft: rgba(10, 11, 13, 0.48);
}

.membership-selector {
    isolation: isolate;
    border: 1px solid var(--reference-glass-border) !important;
    border-radius: var(--reference-glass-radius-small) !important;
    background: rgba(18, 20, 20, 0.22) !important;
    box-shadow: var(--reference-glass-shadow) !important;
    backdrop-filter: blur(var(--reference-glass-blur)) saturate(145%) brightness(1.08) !important;
    -webkit-backdrop-filter: blur(var(--reference-glass-blur)) saturate(145%) brightness(1.08) !important;
}
.membership-selector::before {
    inset: 0 !important;
    background:
        radial-gradient(ellipse at 24% -34%, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.14) 28%, transparent 60%),
        radial-gradient(ellipse at 82% 126%, rgba(222,36,47,0.11) 0%, transparent 55%),
        linear-gradient(135deg, rgba(255,255,255,0.14) 0%, transparent 36%, rgba(255,255,255,0.045) 100%) !important;
    opacity: 0.72 !important;
    mix-blend-mode: screen;
}
.membership-selector::after {
    content: '';
    position: absolute;
    inset: 1px;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), inset 0 -18px 34px rgba(0,0,0,0.10);
}
.membership-selector-button {
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.14) !important;
    background: rgba(255,255,255,0.035) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.18) !important;
    backdrop-filter: blur(18px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
    transition: background-color 520ms cubic-bezier(0.22, 1, 0.36, 1), border-color 520ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 520ms cubic-bezier(0.22, 1, 0.36, 1), transform 520ms cubic-bezier(0.22, 1, 0.36, 1), color 520ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.membership-selector-button::before {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.10) 32%, transparent 62%),
        linear-gradient(135deg, rgba(255,255,255,0.12), transparent 44%, rgba(255,255,255,0.04)) !important;
    opacity: 0.50 !important;
    mix-blend-mode: screen;
}
.membership-selector-button::after {
    content: '';
    position: absolute;
    inset: -35%;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(222,36,47,0.22), transparent 58%);
    filter: blur(18px);
    opacity: 0;
    transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1), transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.membership-selector-button.is-active {
    background: rgba(255,255,255,0.115) !important;
    border-color: rgba(255,255,255,0.32) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.20), 0 0 34px rgba(222,36,47,0.15), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -1px 0 rgba(255,255,255,0.08) !important;
}
.membership-selector-button.is-active::after { opacity: 1; transform: scale(1.04); }

.membership-card {
    isolation: isolate;
    overflow: hidden !important;
    border-radius: var(--reference-glass-radius) !important;
    border: 1px solid var(--reference-glass-border) !important;
    background: var(--reference-glass-bg) !important;
    box-shadow: var(--reference-glass-shadow) !important;
    backdrop-filter: blur(var(--reference-glass-blur)) saturate(145%) brightness(1.06) !important;
    -webkit-backdrop-filter: blur(var(--reference-glass-blur)) saturate(145%) brightness(1.06) !important;
    transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 620ms cubic-bezier(0.22, 1, 0.36, 1), border-color 620ms cubic-bezier(0.22, 1, 0.36, 1), background-color 620ms cubic-bezier(0.22, 1, 0.36, 1), opacity 620ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.membership-card::before {
    inset: 0 !important;
    z-index: 0 !important;
    background:
        radial-gradient(ellipse at 24% -16%, rgba(255,255,255,0.44) 0%, rgba(255,255,255,0.16) 30%, transparent 62%),
        radial-gradient(ellipse at 94% 110%, rgba(255,255,255,0.16) 0%, transparent 54%),
        linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 38%, rgba(255,255,255,0.045) 100%) !important;
    opacity: 0.58 !important;
    filter: none !important;
    mix-blend-mode: screen;
    transform: none !important;
}
.membership-card::after {
    inset: -42% !important;
    z-index: 0 !important;
    background:
        radial-gradient(ellipse at 50% 68%, rgba(222,36,47,0.18) 0%, rgba(222,36,47,0.10) 22%, transparent 58%),
        radial-gradient(ellipse at 28% 8%, rgba(255,255,255,0.10) 0%, transparent 48%) !important;
    filter: blur(30px) !important;
    opacity: 0 !important;
    transform: scale(0.96) !important;
    transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.membership-card > * { position: relative; z-index: 1; }
.membership-card.is-active {
    background: var(--reference-glass-bg-active) !important;
    border-color: var(--reference-glass-border-active) !important;
    box-shadow: var(--reference-glass-shadow-active) !important;
}
.membership-card.is-active::before { opacity: 0.76 !important; }
.membership-card.is-active::after { opacity: 1 !important; transform: scale(1.04) !important; }
.membership-card.is-prev,
.membership-card.is-next { opacity: 0.82; }

.bmi-result,
.bmi-table-wrap {
    isolation: isolate;
    overflow: hidden !important;
    border-radius: var(--reference-glass-radius) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    background: var(--reference-bmi-glass-bg) !important;
    box-shadow: 0 30px 88px rgba(0,0,0,0.38), 0 10px 30px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(28px) saturate(130%) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(28px) saturate(130%) brightness(1.05) !important;
}
.bmi-result::before,
.bmi-table-wrap::before {
    inset: 0 !important;
    z-index: 0 !important;
    background:
        radial-gradient(ellipse at 24% -18%, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.08) 34%, transparent 64%),
        radial-gradient(ellipse at 90% 110%, rgba(255,255,255,0.10) 0%, transparent 58%),
        linear-gradient(135deg, rgba(255,255,255,0.09) 0%, transparent 42%, rgba(255,255,255,0.025) 100%) !important;
    opacity: 0.82 !important;
    mix-blend-mode: screen;
}
.bmi-result::after,
.bmi-table-wrap::after {
    content: '';
    position: absolute;
    inset: 1px;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.055), inset 0 -34px 70px rgba(0,0,0,0.20);
}
.bmi-result > *,
.bmi-table-wrap > * { position: relative; z-index: 1; }
.bmi-table {
    overflow: hidden;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
.bmi-table th {
    background: rgba(255,255,255,0.09) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(255,255,255,0.05);
}
.bmi-table td {
    background: rgba(255,255,255,0.025) !important;
}
.bmi-table tr:nth-child(even) td {
    background: rgba(255,255,255,0.045) !important;
}
.bmi-table th,
.bmi-table td { border-bottom-color: rgba(255,255,255,0.10) !important; }

@media (max-width: 768px) {
    .membership-card,
    .bmi-result,
    .bmi-table-wrap { border-radius: 26px !important; }
    .membership-selector { border-radius: 999px !important; }
}

/* ==================================================
   FINAL POLISH PATCH: MEMBERSHIP CLIPPING / SEAMS + BMI BACKGROUND GLASS
   Keeps the current glass direction but removes cut borders, hard shadow slips,
   and makes transitions quicker/smoother.
================================================== */
:root {
    --membership-polish-transition: 340ms;
    --membership-polish-ease: cubic-bezier(0.18, 0.9, 0.22, 1);
    --membership-polish-glass-bg: rgba(18, 20, 20, 0.30);
    --membership-polish-glass-bg-active: rgba(26, 28, 28, 0.40);
    --membership-polish-border: rgba(255, 255, 255, 0.22);
    --membership-polish-border-active: rgba(255, 255, 255, 0.36);
    --membership-polish-shadow: 0 22px 58px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255,255,255,0.24), inset 0 -1px 0 rgba(255,255,255,0.06);
    --membership-polish-shadow-active: 0 30px 76px rgba(0, 0, 0, 0.40), 0 0 34px rgba(222, 36, 47, 0.13), inset 0 1px 0 rgba(255,255,255,0.34), inset 0 -1px 0 rgba(255,255,255,0.08);
    --membership-polish-blur: 24px;
    --membership-polish-mobile-card-width: min(86vw, 350px);
    --membership-polish-mobile-gap: 16px;
    --bmi-polish-glass-bg: rgba(5, 6, 8, 0.42);
    --bmi-polish-glass-border: rgba(255, 255, 255, 0.15);
    --bmi-polish-glass-shadow: 0 24px 70px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(255,255,255,0.05);
    --bmi-polish-glass-blur: 24px;
}

.membership-section,
.membership-container {
    overflow: visible !important;
}

.membership-selector,
.membership-selector-button,
.membership-grid,
.membership-card {
    box-sizing: border-box;
}

.membership-selector {
    overflow: visible !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    gap: 10px !important;
}

.membership-selector::before,
.membership-selector::after {
    display: none !important;
}

.membership-selector-button {
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.075) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    transition: transform var(--membership-polish-transition) var(--membership-polish-ease), background-color var(--membership-polish-transition) var(--membership-polish-ease), border-color var(--membership-polish-transition) var(--membership-polish-ease), box-shadow var(--membership-polish-transition) var(--membership-polish-ease), color var(--membership-polish-transition) var(--membership-polish-ease) !important;
}

.membership-selector-button::before {
    opacity: 0.36 !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.07) 34%, transparent 68%) !important;
}

.membership-selector-button::after {
    display: none !important;
}

.membership-selector-button.is-active {
    background: rgba(255, 255, 255, 0.13) !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.24), 0 0 28px rgba(222,36,47,0.14), inset 0 1px 0 rgba(255,255,255,0.34), inset 0 -1px 0 rgba(255,255,255,0.08) !important;
}

.membership-grid {
    overflow: visible !important;
    padding-block: 26px 28px !important;
    perspective: 1200px;
}

.membership-card {
    overflow: hidden !important;
    background: var(--membership-polish-glass-bg) !important;
    border: 1px solid var(--membership-polish-border) !important;
    box-shadow: var(--membership-polish-shadow) !important;
    backdrop-filter: blur(var(--membership-polish-blur)) saturate(140%) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(var(--membership-polish-blur)) saturate(140%) brightness(1.05) !important;
    transform: translateY(8px) scale(0.965) !important;
    opacity: 0.78 !important;
    transition: transform var(--membership-polish-transition) var(--membership-polish-ease), opacity var(--membership-polish-transition) var(--membership-polish-ease), box-shadow var(--membership-polish-transition) var(--membership-polish-ease), border-color var(--membership-polish-transition) var(--membership-polish-ease), background-color var(--membership-polish-transition) var(--membership-polish-ease) !important;
    will-change: transform, opacity;
}

/* Remove the external red/light pseudo-glow that caused clipped shadow lines/slips. */
.membership-card::after {
    display: none !important;
}

.membership-card::before {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background:
        radial-gradient(ellipse at 24% -18%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.10) 30%, transparent 62%),
        radial-gradient(ellipse at 92% 112%, rgba(255,255,255,0.10) 0%, transparent 54%),
        linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 40%, rgba(222,36,47,0.035) 100%) !important;
    opacity: 0.56 !important;
    filter: none !important;
    mix-blend-mode: screen;
    transform: none !important;
    transition: opacity var(--membership-polish-transition) var(--membership-polish-ease) !important;
}

.membership-card > * {
    position: relative;
    z-index: 1;
}

.membership-card.is-active {
    background: var(--membership-polish-glass-bg-active) !important;
    border-color: var(--membership-polish-border-active) !important;
    box-shadow: var(--membership-polish-shadow-active) !important;
    opacity: 1 !important;
    transform: translateY(-8px) scale(1.025) !important;
}

.membership-card.is-active::before {
    opacity: 0.72 !important;
}

.membership-card.is-prev,
.membership-card.is-next {
    transform: translateY(14px) scale(0.94) !important;
    opacity: 0.68 !important;
}

.membership-dots {
    margin-top: 8px !important;
}

/* BMI: transparent glass that keeps the actual background visible instead of becoming grey. */
.bmi-result,
.bmi-table-wrap {
    background: var(--bmi-polish-glass-bg) !important;
    border: 1px solid var(--bmi-polish-glass-border) !important;
    box-shadow: var(--bmi-polish-glass-shadow) !important;
    backdrop-filter: blur(var(--bmi-polish-glass-blur)) saturate(135%) brightness(1.04) !important;
    -webkit-backdrop-filter: blur(var(--bmi-polish-glass-blur)) saturate(135%) brightness(1.04) !important;
    border-radius: 30px !important;
    overflow: hidden !important;
}

.bmi-result::before,
.bmi-table-wrap::before {
    background:
        radial-gradient(ellipse at 20% -16%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 30%, transparent 62%),
        linear-gradient(135deg, rgba(255,255,255,0.07) 0%, transparent 44%, rgba(255,255,255,0.018) 100%) !important;
    opacity: 0.72 !important;
}

.bmi-result::after,
.bmi-table-wrap::after {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), inset 0 -28px 56px rgba(0,0,0,0.16) !important;
}

.bmi-table th {
    background: rgba(255,255,255,0.075) !important;
}

.bmi-table td {
    background: rgba(255,255,255,0.018) !important;
}

.bmi-table tr:nth-child(even) td {
    background: rgba(255,255,255,0.035) !important;
}

@media (max-width: 760px) {
    .membership-section {
        overflow: visible !important;
    }

    .membership-selector {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: clamp(4px, 1.5vw, 8px) !important;
        margin-bottom: 18px !important;
        box-sizing: border-box !important;
    }

    .membership-selector-button {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        min-height: 42px !important;
        padding-inline: clamp(3px, 1.2vw, 8px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .membership-grid {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        gap: var(--membership-polish-mobile-gap) !important;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scroll-padding-left: calc((100vw - var(--membership-polish-mobile-card-width)) / 2) !important;
        scroll-padding-right: calc((100vw - var(--membership-polish-mobile-card-width)) / 2) !important;
        padding-left: calc((100vw - var(--membership-polish-mobile-card-width)) / 2) !important;
        padding-right: calc((100vw - var(--membership-polish-mobile-card-width)) / 2) !important;
        padding-top: clamp(28px, 10vw, 56px) !important;
        padding-bottom: clamp(32px, 11vw, 64px) !important;
        margin-left: 50% !important;
        margin-right: 0 !important;
        transform: translateX(-50%) !important;
        scrollbar-width: none;
        background: transparent !important;
        box-shadow: none !important;
    }

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

    .membership-card {
        flex: 0 0 var(--membership-polish-mobile-card-width) !important;
        width: var(--membership-polish-mobile-card-width) !important;
        min-width: var(--membership-polish-mobile-card-width) !important;
        max-width: var(--membership-polish-mobile-card-width) !important;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        transform: scale(0.955) !important;
        opacity: 0.66 !important;
        box-shadow: var(--membership-polish-shadow) !important;
        transition-duration: 300ms !important;
        -webkit-transform: translateZ(0) scale(0.955) !important;
        backface-visibility: hidden;
    }

    .membership-card.is-active {
        transform: translateY(-4px) scale(1) !important;
        -webkit-transform: translateZ(0) translateY(-4px) scale(1) !important;
        opacity: 1 !important;
        box-shadow: var(--membership-polish-shadow-active) !important;
    }

    .membership-card.is-prev,
    .membership-card.is-next {
        transform: scale(0.955) !important;
        -webkit-transform: translateZ(0) scale(0.955) !important;
        opacity: 0.70 !important;
    }

    .membership-card::before {
        opacity: 0.50 !important;
    }

    .membership-card.is-active::before {
        opacity: 0.66 !important;
    }

    .membership-dots {
        margin-top: 6px !important;
    }

    .bmi-result,
    .bmi-table-wrap {
        border-radius: 24px !important;
    }
}


/* ==================================================
   FINAL CLEANUP: Mobile membership seam/shadow fix + black BMI glass
   - Removes leftover card shadow slips on mobile
   - Makes membership card glow internal/blended, not a separate background layer
   - Makes mobile transitions faster/smoother
   - Darkens BMI glass and highlights BMI/status text in red
================================================== */
:root {
    --pr1-final-transition-fast: 220ms;
    --pr1-final-transition-mid: 280ms;
    --pr1-final-ease: cubic-bezier(0.2, 0.8, 0.22, 1);
    --pr1-final-glass-border: rgba(255, 255, 255, 0.14);
    --pr1-final-glass-border-active: rgba(222, 36, 47, 0.52);
    --pr1-final-membership-bg: rgba(14, 8, 10, 0.44);
    --pr1-final-membership-bg-active: rgba(22, 10, 12, 0.48);
    --pr1-final-bmi-bg: rgba(14, 8, 10, 0.44);
    --pr1-final-bmi-bg-soft: rgba(14, 8, 10, 0.34);
    --pr1-final-red: var(--color-red, #de242f);
}

.membership-section,
.membership-container,
.membership-grid {
    background: transparent !important;
}

.membership-container {
    isolation: isolate;
}

.membership-selector-button,
.membership-card {
    transition-duration: var(--pr1-final-transition-mid) !important;
    transition-timing-function: var(--pr1-final-ease) !important;
}

.membership-card {
    background: var(--pr1-final-membership-bg) !important;
    border-color: var(--pr1-final-glass-border) !important;
    border-radius: var(--site-glass-radius, 28px) !important;
    box-shadow: var(--site-glass-shadow, 0 24px 68px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.2)) !important;
    backdrop-filter: blur(var(--site-glass-blur, 22px)) saturate(var(--site-glass-saturate, 145%)) !important;
    -webkit-backdrop-filter: blur(var(--site-glass-blur, 22px)) saturate(var(--site-glass-saturate, 145%)) !important;
}

.membership-card::after {
    display: block !important;
    content: "" !important;
}

.membership-card::before {
    display: none !important;
    content: none !important;
}

.membership-card.is-active {
    background: var(--pr1-final-membership-bg-active) !important;
    border-color: var(--pr1-final-glass-border-active) !important;
    box-shadow: var(--site-glass-shadow-featured, 0 0 0 1px rgba(222, 36, 47, 0.52), 0 0 52px rgba(222, 36, 47, 0.32)) !important;
}

.membership-card.membership-card--gold.is-active {
    overflow: visible !important;
    background: linear-gradient(
        165deg,
        rgba(212, 175, 55, 0.12) 0%,
        rgba(28, 26, 22, 0.5) 40%,
        rgba(12, 10, 6, 0.7) 100%
    ) !important;
    border-color: rgba(244, 228, 168, 0.5) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 248, 220, 0.26),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 0 32px rgba(212, 175, 55, 0.12),
        0 0 80px rgba(212, 175, 55, 0.08),
        0 0 130px rgba(0, 0, 0, 0.34),
        0 22px 52px rgba(0, 0, 0, 0.28) !important;
}

.membership-card.is-active::before {
    opacity: 0.62 !important;
}

.membership-selector-button {
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(255, 255, 255, 0.055) !important;
}

.membership-selector-button.is-active {
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.24),
        0 0 24px rgba(222, 36, 47, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        inset 0 -1px 0 rgba(255, 255, 255, 0.07) !important;
}

/* BMI: darker black glass, better contrast, red BMI/status values */
.bmi-result,
.bmi-table-wrap {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.06), transparent 34%),
        var(--pr1-final-bmi-bg) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255,255,255,0.14),
        inset 0 -1px 0 rgba(255,255,255,0.045) !important;
    backdrop-filter: blur(22px) saturate(125%) brightness(0.92) !important;
    -webkit-backdrop-filter: blur(22px) saturate(125%) brightness(0.92) !important;
}

.bmi-result::before,
.bmi-table-wrap::before {
    background:
        radial-gradient(ellipse at 20% -20%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.035) 34%, transparent 64%),
        linear-gradient(135deg, rgba(255,255,255,0.04), transparent 46%) !important;
    opacity: 0.7 !important;
}

.bmi-table th {
    background: rgba(0, 0, 0, 0.36) !important;
    color: rgba(255,255,255,0.88) !important;
}

.bmi-table td {
    background: rgba(0, 0, 0, 0.22) !important;
    color: rgba(255,255,255,0.78) !important;
}

.bmi-table tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.035) !important;
}

.bmi-result-value,
.bmi-result-status,
.bmi-table tbody td:first-child,
.bmi-table tbody td:nth-child(2) {
    color: var(--pr1-final-red) !important;
}

.bmi-result-status {
    font-weight: 800 !important;
    text-shadow: 0 0 18px rgba(222, 36, 47, 0.16);
}

@media (max-width: 760px) {
    .membership-section {
        overflow: visible !important;
    }

    .membership-container {
        overflow: visible !important;
    }

    .membership-grid {
        background: transparent !important;
        box-shadow: none !important;
        filter: none !important;
        padding-top: 16px !important;
        padding-bottom: 24px !important;
        mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
        scroll-behavior: smooth;
    }

    .membership-card {
        background: rgba(18, 18, 20, 0.34) !important;
        border-color: rgba(255, 255, 255, 0.18) !important;
        box-shadow:
            0 12px 26px rgba(0, 0, 0, 0.20),
            inset 0 1px 0 rgba(255, 255, 255, 0.20),
            inset 0 -1px 0 rgba(255, 255, 255, 0.05) !important;
        transform: translate3d(0, 0, 0) scale(0.965) !important;
        opacity: 0.72 !important;
        transition:
            transform 240ms var(--pr1-final-ease),
            opacity 240ms var(--pr1-final-ease),
            box-shadow 240ms var(--pr1-final-ease),
            border-color 240ms var(--pr1-final-ease),
            background-color 240ms var(--pr1-final-ease) !important;
        will-change: transform, opacity;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
    }

    .membership-card::before {
        background:
            linear-gradient(135deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.06) 26%, transparent 58%),
            linear-gradient(315deg, rgba(255,255,255,0.045) 0%, transparent 42%) !important;
        opacity: 0.42 !important;
    }

    .membership-card.is-active {
        background: rgba(24, 24, 27, 0.42) !important;
        border-color: rgba(255, 255, 255, 0.30) !important;
        transform: translate3d(0, -3px, 0) scale(1) !important;
        opacity: 1 !important;
        box-shadow:
            0 16px 34px rgba(0, 0, 0, 0.26),
            0 0 24px rgba(222, 36, 47, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.28),
            inset 0 -1px 0 rgba(255, 255, 255, 0.07) !important;
    }

    .membership-card.is-active::before {
        opacity: 0.55 !important;
    }

    .membership-card.is-prev,
    .membership-card.is-next {
        transform: translate3d(0, 0, 0) scale(0.955) !important;
        opacity: 0.66 !important;
        box-shadow:
            0 10px 22px rgba(0, 0, 0, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.16),
            inset 0 -1px 0 rgba(255, 255, 255, 0.04) !important;
    }

    .bmi-result,
    .bmi-table-wrap {
        background:
            linear-gradient(135deg, rgba(255,255,255,0.055), transparent 36%),
            rgba(0, 0, 0, 0.72) !important;
        border-radius: 24px !important;
    }
}

/* ==================================================
   FINAL PATCH: Mobile Membership clean glass + BMI black table
   - Removes mobile shadow leftovers/seams during card changes
   - Keeps buttons/cards fully visible
   - Makes BMI table one clean black glossy glass panel
================================================== */
:root {
    --pr1-bmi-glass-black: rgba(2, 2, 4, 0.78);
    --pr1-bmi-glass-black-soft: rgba(10, 10, 12, 0.64);
    --pr1-bmi-glass-border: rgba(255, 255, 255, 0.15);
    --pr1-bmi-glass-highlight: rgba(255, 255, 255, 0.13);
    --pr1-bmi-red: var(--color-red, #de242f);
}

/* BMI: one premium black glass table/panel, no internal line noise */
.bmi-result,
.bmi-table-wrap {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,0.105), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,0.055), transparent 38%),
        linear-gradient(180deg, var(--pr1-bmi-glass-black) 0%, var(--pr1-bmi-glass-black-soft) 100%) !important;
    border: 1px solid var(--pr1-bmi-glass-border) !important;
    border-radius: 26px !important;
    box-shadow:
        0 22px 58px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 var(--pr1-bmi-glass-highlight),
        inset 0 -1px 0 rgba(255,255,255,0.04) !important;
    backdrop-filter: blur(20px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(125%) !important;
}

.bmi-result::before,
.bmi-table-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.105) 0%, rgba(255,255,255,0.035) 28%, transparent 62%);
    opacity: 0.72;
}

.bmi-result > *,
.bmi-table-wrap > * {
    position: relative;
    z-index: 1;
}

.bmi-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
}

.bmi-table th,
.bmi-table td {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.bmi-table th {
    color: var(--pr1-bmi-red) !important;
    font-weight: 800 !important;
    text-shadow: 0 0 18px rgba(222, 36, 47, 0.16);
}

.bmi-table td,
.bmi-table td:last-child,
.bmi-result-value,
.bmi-result-status {
    color: rgba(255,255,255,0.92) !important;
    text-shadow: none !important;
}

.bmi-result-label {
    color: var(--pr1-bmi-red) !important;
    font-weight: 800 !important;
}

.bmi-result-error {
    color: var(--pr1-bmi-red) !important;
}

.bmi-table tbody tr {
    background: transparent !important;
}

.bmi-table tbody tr + tr td {
    padding-top: calc(var(--bmi-table-cell-padding) * 0.78) !important;
}

@media (max-width: 760px) {
    .membership-section,
    .membership-container,
    .membership-grid {
        background: transparent !important;
        box-shadow: none !important;
        filter: none !important;
    }

    .membership-section {
        overflow: visible !important;
    }

    .membership-container {
        overflow: visible !important;
    }

    .membership-selector {
        overflow: visible !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        margin-bottom: 24px !important;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    .membership-selector-button {
        overflow: hidden !important;
        transition:
            background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
            color 180ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1),
            transform 180ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    .membership-selector-button.is-active {
        transform: translateY(-1px) !important;
    }

    .membership-grid {
        overflow-x: auto !important;
        overflow-y: visible !important;
        padding-top: clamp(28px, 9vw, 52px) !important;
        padding-bottom: clamp(32px, 10vw, 58px) !important;
        scroll-behavior: smooth !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
        contain: none !important;
    }

    .membership-card {
        overflow: hidden !important;
        isolation: isolate;
        background:
            linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.035) 38%, rgba(255,255,255,0.02)),
            rgba(18, 18, 20, 0.34) !important;
        border-color: rgba(255, 255, 255, 0.18) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.22),
            inset 0 -1px 0 rgba(255, 255, 255, 0.05) !important;
        filter: none !important;
        transform: translate3d(0, 0, 0) scale(0.965) !important;
        opacity: 0.74 !important;
        transition:
            transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
            border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
            background-color 180ms cubic-bezier(0.22, 1, 0.36, 1) !important;
        will-change: transform, opacity;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        perspective: 1000px;
    }

    .membership-card::before,
    .membership-card::after {
        display: none !important;
        content: none !important;
        opacity: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        filter: none !important;
    }

    .membership-card.is-active {
        background:
            linear-gradient(145deg, rgba(255,255,255,0.125), rgba(255,255,255,0.045) 40%, rgba(255,255,255,0.018)),
            rgba(20, 20, 23, 0.40) !important;
        border-color: rgba(255, 255, 255, 0.30) !important;
        transform: translate3d(0, -2px, 0) scale(1) !important;
        opacity: 1 !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.30),
            inset 0 -1px 0 rgba(255, 255, 255, 0.07) !important;
    }

    .membership-card.membership-card--gold.is-active {
        overflow: visible !important;
        background: linear-gradient(
            165deg,
            rgba(212, 175, 55, 0.14) 0%,
            rgba(32, 28, 20, 0.52) 42%,
            rgba(10, 8, 5, 0.68) 100%
        ) !important;
        border-color: rgba(244, 228, 168, 0.48) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 248, 220, 0.28),
            inset 0 -1px 0 rgba(0, 0, 0, 0.28),
            0 0 28px rgba(212, 175, 55, 0.16),
            0 0 72px rgba(212, 175, 55, 0.1),
            0 0 120px rgba(0, 0, 0, 0.4) !important;
    }

    .membership-card.is-prev,
    .membership-card.is-next {
        transform: translate3d(0, 0, 0) scale(0.955) !important;
        opacity: 0.66 !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.16),
            inset 0 -1px 0 rgba(255, 255, 255, 0.04) !important;
    }

    .membership-dots {
        margin-top: 4px !important;
    }

    .bmi-result,
    .bmi-table-wrap {
        border-radius: 22px !important;
        background:
            radial-gradient(circle at 18% 0%, rgba(255,255,255,0.09), transparent 34%),
            linear-gradient(145deg, rgba(255,255,255,0.045), transparent 38%),
            rgba(0, 0, 0, 0.80) !important;
    }

    .bmi-table th,
    .bmi-table td {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }
}

/* ==================================================
   FINAL REQUEST PATCH: BMI simple black panel + exact colors
   - BMI / Weight Status table headers: red + bold
   - Table body values/status text: white
   - BMI result/default/result text: white
================================================== */
.bmi-result,
.bmi-table-wrap {
    background: #050505 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.42) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.bmi-result::before,
.bmi-result::after,
.bmi-table-wrap::before,
.bmi-table-wrap::after {
    display: none !important;
    content: none !important;
}

.bmi-table,
.bmi-table thead,
.bmi-table tbody,
.bmi-table tr,
.bmi-table th,
.bmi-table td {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.bmi-table th {
    color: #ffffff !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

.bmi-table td,
.bmi-table td:last-child {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}

.bmi-result-label,
.bmi-result-value,
.bmi-result-status,
.bmi-result p,
#bmiResult {
    color: #ffffff !important;
    text-shadow: none !important;
}

.bmi-result-value,
.bmi-result-status {
    font-weight: 800 !important;
}

.bmi-result-error {
    color: var(--color-red, #de242f) !important;
    font-weight: 800 !important;
}

@media (max-width: 760px) {
    .bmi-result,
    .bmi-table-wrap {
        background: #050505 !important;
        border-radius: 22px !important;
    }
}

/* ==================================================
   FINAL PATCH: BMI category header boxes + red values
   - Header cells become white category pills
   - Values below BMI / Weight Status are red
   - Removes grey row backgrounds completely
================================================== */
.bmi-table-wrap {
    background: #050505 !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 20px 54px rgba(0,0,0,0.42) !important;
}

.bmi-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 10px 12px !important;
    background: transparent !important;
}

.bmi-table thead,
.bmi-table tbody,
.bmi-table tr,
.bmi-table th,
.bmi-table td {
    border: 0 !important;
    box-shadow: none !important;
}

.bmi-table tr,
.bmi-table tbody tr,
.bmi-table tbody tr:nth-child(odd),
.bmi-table tbody tr:nth-child(even),
.bmi-table tbody tr:nth-child(odd) td,
.bmi-table tbody tr:nth-child(even) td,
.bmi-table td {
    background: transparent !important;
}

.bmi-table th {
    background: rgba(255,255,255,0.96) !important;
    color: var(--color-red, #de242f) !important;
    font-weight: 950 !important;
    border-radius: 999px !important;
    padding: 11px 18px !important;
    text-align: center !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
}

.bmi-table td,
.bmi-table td:first-child,
.bmi-table td:last-child {
    color: var(--color-red, #de242f) !important;
    font-weight: 800 !important;
    padding: 9px 18px !important;
    text-align: center !important;
    text-shadow: none !important;
}

.bmi-result,
#bmiResult {
    background: #050505 !important;
}

.bmi-result-label,
.bmi-result p,
#bmiResult,
.bmi-result-value,
.bmi-result-status {
    color: #ffffff !important;
}

@media (max-width: 760px) {
    .bmi-table {
        border-spacing: 8px 10px !important;
    }

    .bmi-table th {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }

    .bmi-table td,
    .bmi-table td:first-child,
    .bmi-table td:last-child {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }
}

/* =========================================================
   FINAL PATCH: remove equipment section spacing leftovers,
   programs page cards match home cards, mobile spacing polish
========================================================= */

/* Gym Equipment is removed from front-page.php. Keep old CSS harmless. */

/* About section: a bit shorter, especially on mobile, for smoother scrolling. */
:root {
    --about-section-min-height: 640px;
    --about-section-min-height-mobile: 440px;
    --about-section-padding-desktop: 96px;
    --about-section-padding-mobile: 52px;
    --program-card-min-height-mobile: 320px;
    --programs-page-card-min-height-mobile: 320px;
}

/* Programs page: make cards visually follow the homepage program cards. */
.programs-page-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--programs-grid-gap, 26px);
}

.programs-page-card {
    min-height: var(--program-card-min-height);
    border: 1px solid var(--program-card-border);
    border-radius: var(--program-card-radius);
    background: var(--program-card-bg);
}

.programs-page-card-content {
    justify-content: flex-end;
    max-width: none;
    min-height: var(--program-card-min-height);
    padding: var(--program-card-padding);
}

.programs-page-card-overlay {
    background: var(--program-card-overlay-color);
    opacity: var(--program-card-overlay-opacity);
}

.programs-page-card-image {
    object-position: var(--program-card-image-position);
    opacity: var(--program-card-image-opacity);
}

.programs-page-card-number {
    margin-bottom: var(--program-card-number-margin-bottom);
    color: var(--program-card-number-color);
    font-size: var(--program-card-number-size);
    font-weight: var(--program-card-number-weight);
    letter-spacing: var(--program-card-number-letter-spacing);
}

.programs-page-card-number::after {
    width: var(--program-card-number-underline-width);
    height: var(--program-card-number-underline-height);
    background: var(--program-card-number-underline-color);
}

.programs-page-card-title {
    margin-bottom: var(--program-card-title-margin-bottom);
    color: var(--program-card-title-color);
    font-size: var(--program-card-title-size);
    font-weight: var(--program-card-title-weight);
    line-height: var(--program-card-title-line-height);
    text-transform: var(--program-card-title-transform);
}

.programs-page-card-text {
    margin-bottom: var(--program-card-text-margin-bottom);
    color: var(--program-card-text-color);
    font-size: var(--program-card-text-size);
    line-height: var(--program-card-text-line-height);
}

.programs-page-grid .programs-page-card-list {
    display: none;
}

.program-detail-page .programs-page-card-list {
    display: grid;
}

.programs-page-card-link {
    gap: var(--program-card-link-gap);
    color: var(--program-card-link-color);
    font-size: var(--program-card-link-size);
    font-weight: var(--program-card-link-weight);
    letter-spacing: var(--program-card-link-letter-spacing);
}

.programs-page-card:hover .programs-page-card-image {
    transform: scale(var(--program-card-image-scale-hover));
}

.programs-page-card:hover .programs-page-card-overlay {
    opacity: var(--program-card-overlay-opacity-hover);
}

.programs-page-card:hover .programs-page-card-link {
    color: var(--program-card-link-hover-color);
}

@media (max-width: 1024px) {
    .programs-page-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .about-section {
        min-height: var(--about-section-min-height-mobile);
        padding: var(--about-section-padding-mobile) 0;
        align-items: center;
    }

    .about-content {
        padding-top: 0;
        padding-bottom: 0;
    }

    .program-card,
    .programs-page-card {
        min-height: var(--program-card-min-height-mobile);
    }

    .program-card-content,
    .programs-page-card-content {
        min-height: var(--program-card-min-height-mobile);
        padding: 20px;
    }

    .program-card-number,
    .programs-page-card-number {
        margin-bottom: 12px;
        padding-bottom: 8px;
    }

    .program-card-title,
    .programs-page-card-title {
        margin-bottom: 8px;
        font-size: var(--program-card-title-size-mobile);
    }

    .program-card-text,
    .programs-page-card-text {
        margin-bottom: 14px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .programs-page-card-list {
        display: none !important;
    }
}



/* =========================================================
   FINAL PATCH: responsive images + BMI colors + map/FAQ gap
   Request:
   - all photos responsive without stretching
   - BMI / Weight Status headers red bold, no border/box
   - BMI values/status rows white, normal weight
   - Your BMI result text white
   - reduce gap between map and FAQ
========================================================= */

/* 1) Universal responsive media safety */
img,
picture,
video {
    max-width: 100%;
}

img {
    height: auto;
}

/* Any image used as a visual/background card should crop naturally, never stretch */
.hero-image,
.program-card-image,
.programs-page-card-image,
.about-bg-image,
.blog-card-image,
.single-post-image,
.equipment-slide-image,
.post-thumbnail img,
.wp-post-image,
.blog-card-image-wrap img,
.program-card-media img,
.programs-page-card-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-repeat: no-repeat !important;
}

/* Keep natural content images unstretched inside posts/pages */
.entry-content img,
.single-post-content img,
.page-content img {
    width: auto;
    max-width: 100%;
    height: auto !important;
    object-fit: contain !important;
}

/* Prevent image containers from creating distorted ratios */
.hero-media,
.program-card-media,
.programs-page-card-media,
.blog-card-image-wrap,
.single-post-media {
    overflow: hidden;
}

.hero-image {
    object-position: var(--hero-image-position-desktop, center center) !important;
}

.program-card-image {
    object-position: var(--program-card-image-position, center center) !important;
}

.blog-card-image {
    object-position: var(--blog-image-position, center center) !important;
}

.about-bg-image {
    object-position: var(--about-bg-position-desktop, center center) !important;
}

@media (max-width: 760px) {
    .hero-image {
        object-position: var(--hero-image-position-mobile, center center) !important;
    }

    .about-bg-image {
        object-position: var(--about-bg-position-mobile, center center) !important;
    }

    .blog-card-image-wrap {
        min-height: 220px;
    }

    .program-card,
    .program-card-content {
        min-height: var(--program-card-min-height-mobile, 320px) !important;
    }
}

/* 2) BMI table: clean black table, no category boxes, no row backgrounds */
.bmi-table-wrap {
    background: rgba(8, 8, 12, 0.32) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 46px rgba(0,0,0,0.28) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}

.bmi-table-wrap::before,
.bmi-table-wrap::after {
    display: none !important;
    content: none !important;
}

.bmi-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background: transparent !important;
}

.bmi-table thead,
.bmi-table tbody,
.bmi-table tr,
.bmi-table th,
.bmi-table td,
.bmi-table tbody tr:nth-child(odd),
.bmi-table tbody tr:nth-child(even),
.bmi-table tbody tr:nth-child(odd) td,
.bmi-table tbody tr:nth-child(even) td {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.bmi-table th {
    color: #ffffff !important;
    font-weight: 900 !important;
    text-align: left !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 0 18px 18px !important;
    border-radius: 0 !important;
    text-shadow: none !important;
}

.bmi-table td,
.bmi-table td:first-child,
.bmi-table td:last-child {
    color: #ffffff !important;
    font-weight: 400 !important;
    text-align: left !important;
    padding: 10px 18px !important;
    border-radius: 0 !important;
    text-shadow: none !important;
}

.bmi-result,
#bmiResult {
    background: #050505 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 16px 42px rgba(0,0,0,0.34) !important;
}

.bmi-result::before,
.bmi-result::after {
    display: none !important;
    content: none !important;
}

.bmi-result-label,
.bmi-result p,
#bmiResult,
.bmi-result-value,
.bmi-result-status {
    color: #ffffff !important;
    font-weight: 400 !important;
    text-shadow: none !important;
}

.bmi-result-value,
.bmi-result-status {
    font-weight: 700 !important;
}

/* Keep BMI error red */
.bmi-result-error {
    color: var(--color-red, #de242f) !important;
    font-weight: 800 !important;
}

/* 3) Reduce visual gap between Location map and FAQ */
.location-section {
    padding-bottom: 38px !important;
}

.faq-section {
    padding-top: 38px !important;
}

.location-map-container,
.location-map-wrap,
.lazy-map-wrap {
    margin-bottom: 0 !important;
}

@media (max-width: 760px) {
    .bmi-table-wrap {
        border-radius: 20px !important;
    }

    .bmi-table th {
        padding: 0 10px 14px !important;
        font-size: 12px !important;
    }

    .bmi-table td,
    .bmi-table td:first-child,
    .bmi-table td:last-child {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }

    .location-section {
        padding-bottom: 24px !important;
    }

    .faq-section {
        padding-top: 28px !important;
    }
}


/* =========================================================
   FINAL BMI TABLE REBUILD + PROGRAM PAGE GAP + BLOG IMAGE OPACITY
   - BMI table rebuilt with isolated selectors
   - Only table headings BMI / Weight Status are red + bold
   - Only table body content is white + normal
   - No color override for the rest of BMI section
========================================================= */

/* Keep global logo responsive safety */
.site-logo img,
.custom-logo,
.custom-logo-link img,
.header-logo img,
.mobile-logo img,
.site-branding img,
img.site-logo,
img.custom-logo {
    display: block !important;
    width: auto !important;
    max-width: var(--header-logo-width-desktop, 180px) !important;
    height: auto !important;
    max-height: var(--header-logo-height-desktop, 72px) !important;
    object-fit: contain !important;
    object-position: center !important;
}

@media (max-width: 760px) {
    .site-logo img,
    .custom-logo,
    .custom-logo-link img,
    .header-logo img,
    .mobile-logo img,
    .site-branding img,
    img.site-logo,
    img.custom-logo {
        max-width: var(--header-logo-width-mobile, 132px) !important;
        max-height: var(--header-logo-height-mobile, 54px) !important;
    }
}

/* -------- BMI TABLE FROM SCRATCH -------- */

/* Panel only */
.bmi-section .bmi-table-wrap,
.bmi-section .bmi-ranges,
.bmi-section .bmi-table-container {
    background: #050505 !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 46px rgba(0,0,0,0.42) !important;
    overflow: hidden !important;
}

/* Remove pseudo shine/old overlays from BMI panel only */
.bmi-section .bmi-table-wrap::before,
.bmi-section .bmi-table-wrap::after,
.bmi-section .bmi-ranges::before,
.bmi-section .bmi-ranges::after,
.bmi-section .bmi-table-container::before,
.bmi-section .bmi-table-container::after {
    display: none !important;
    content: none !important;
}

/* Table base */
.bmi-section table.bmi-table,
.bmi-section .bmi-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
}

/* Remove ALL old row/cell backgrounds/lines */
.bmi-section .bmi-table thead,
.bmi-section .bmi-table tbody,
.bmi-section .bmi-table tr,
.bmi-section .bmi-table th,
.bmi-section .bmi-table td,
.bmi-section .bmi-table tbody tr:nth-child(odd),
.bmi-section .bmi-table tbody tr:nth-child(even),
.bmi-section .bmi-table tbody tr:nth-child(odd) td,
.bmi-section .bmi-table tbody tr:nth-child(even) td {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* ONLY headers: BMI / Weight Status */
.bmi-section .bmi-table > thead > tr > th,
.bmi-section .bmi-table thead th {
    color: #ffffff !important;
    font-weight: 900 !important;
    font-style: normal !important;
    text-transform: uppercase !important;
    letter-spacing: 0.055em !important;
    padding: 18px 18px 12px !important;
    line-height: 1.15 !important;
}

/* ONLY body content: below 18.5 / underweight etc */
.bmi-section .bmi-table > tbody > tr > td,
.bmi-section .bmi-table tbody td {
    color: #ffffff !important;
    font-weight: 400 !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding: 9px 18px !important;
    line-height: 1.45 !important;
}

/* Do NOT force the section intro/header colors */
.bmi-section .section-eyebrow,
.bmi-section .section-title,
.bmi-section .section-heading,
.bmi-section .section-text,
.bmi-section .section-description,
.bmi-section .bmi-title,
.bmi-section .bmi-heading,
.bmi-section .bmi-text,
.bmi-section .bmi-description {
    color: revert-layer !important;
}

/* Result box stays clean; text white only inside result */
.bmi-section .bmi-result,
.bmi-section #bmiResult {
    background: #050505 !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 38px rgba(0,0,0,0.36) !important;
    color: #ffffff !important;
}

.bmi-section .bmi-result *,
.bmi-section #bmiResult * {
    color: #ffffff !important;
}

.bmi-section .bmi-result-error,
.bmi-section .bmi-error {
    color: #de242f !important;
    font-weight: 800 !important;
}

/* -------- PROGRAMS PAGE GAP REDUCTION -------- */

/* Reduce gap between intro text "Programs built..." and cards */
.programs-page .section-header,
.programs-page .programs-page-header,
.programs-page .programs-header,
.page-template-page-programs .section-header,
.page-template-page-programs .programs-page-header,
.page-template-page-programs .programs-header,
body[class*="program"] .programs-page-header {
    margin-bottom: 28px !important;
}

.programs-page .section-text,
.programs-page .section-description,
.programs-page .programs-page-intro,
.page-template-page-programs .section-text,
.page-template-page-programs .section-description,
.page-template-page-programs .programs-page-intro {
    margin-bottom: 18px !important;
}

.programs-page .programs-grid,
.programs-page .programs-page-grid,
.page-template-page-programs .programs-grid,
.page-template-page-programs .programs-page-grid {
    margin-top: 0 !important;
}

@media (max-width: 760px) {
    .programs-page .section-header,
    .programs-page .programs-page-header,
    .programs-page .programs-header,
    .page-template-page-programs .section-header,
    .page-template-page-programs .programs-page-header,
    .page-template-page-programs .programs-header,
    body[class*="program"] .programs-page-header {
        margin-bottom: 20px !important;
    }
}

/* -------- BLOG CARD PHOTO OPACITY -------- */

.blog-card-image,
.blog-card-image-wrap img,
.blog-card img,
.blog-list-card img,
.home-blog-card img,
.post-card img {
    opacity: var(--blog-card-image-opacity, 0.84) !important;
    transition: opacity 220ms ease, transform 260ms ease !important;
}

.blog-card:hover .blog-card-image,
.blog-card:hover .blog-card-image-wrap img,
.blog-card:hover img,
.blog-list-card:hover img,
.home-blog-card:hover img,
.post-card:hover img {
    opacity: var(--blog-card-image-opacity-hover, 0.96) !important;
}



/* =========================================================
   FINAL POLISH: smaller responsive logo + vertical spacing
   - Logo smaller and aligned inside header desktop/mobile
   - Programs page cards start a bit higher
   - Membership content/cards sit a bit higher
========================================================= */

/* Header logo sizing/alignment */
.site-logo img,
.custom-logo,
.custom-logo-link img,
.header-logo img,
.mobile-logo img,
.site-branding img,
img.site-logo,
img.custom-logo {
    width: auto !important;
    max-width: var(--header-logo-width-desktop-polished, 142px) !important;
    max-height: var(--header-logo-height-desktop-polished, 48px) !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
}

.site-logo,
.custom-logo-link,
.header-logo,
.mobile-logo,
.site-branding {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
    min-height: 0 !important;
}

/* Keep header items vertically symmetrical */
.site-header .header-inner,
.site-header .header-container,
.main-header .header-inner,
.header-wrapper,
.header-row {
    align-items: center !important;
}

/* Slightly reduce header visual height if logo was forcing it */
.site-header,
.main-header {
    --header-logo-width-desktop: 142px;
    --header-logo-height-desktop: 48px;
}

/* Mobile logo smaller and centered with hamburger/socials */
@media (max-width: 760px) {
    .site-logo img,
    .custom-logo,
    .custom-logo-link img,
    .header-logo img,
    .mobile-logo img,
    .site-branding img,
    img.site-logo,
    img.custom-logo {
        max-width: var(--header-logo-width-mobile-polished, 104px) !important;
        max-height: var(--header-logo-height-mobile-polished, 40px) !important;
    }

    .site-header,
    .main-header {
        --header-logo-width-mobile: 104px;
        --header-logo-height-mobile: 40px;
    }

    .site-header .header-inner,
    .site-header .header-container,
    .main-header .header-inner,
    .header-wrapper,
    .header-row {
        align-items: center !important;
    }
}

/* Programs page: bring cards a bit closer to intro */
.programs-page .section-header,
.programs-page .programs-page-header,
.programs-page .programs-header,
.page-template-page-programs .section-header,
.page-template-page-programs .programs-page-header,
.page-template-page-programs .programs-header,
body[class*="program"] .programs-page-header {
    margin-bottom: 18px !important;
}

.programs-page .programs-grid,
.programs-page .programs-page-grid,
.page-template-page-programs .programs-grid,
.page-template-page-programs .programs-page-grid,
body[class*="program"] .programs-grid,
body[class*="program"] .programs-page-grid {
    margin-top: -8px !important;
}

@media (max-width: 760px) {
    .programs-page .section-header,
    .programs-page .programs-page-header,
    .programs-page .programs-header,
    .page-template-page-programs .section-header,
    .page-template-page-programs .programs-page-header,
    .page-template-page-programs .programs-header,
    body[class*="program"] .programs-page-header {
        margin-bottom: 14px !important;
    }

    .programs-page .programs-grid,
    .programs-page .programs-page-grid,
    .page-template-page-programs .programs-grid,
    .page-template-page-programs .programs-page-grid,
    body[class*="program"] .programs-grid,
    body[class*="program"] .programs-page-grid {
        margin-top: -10px !important;
    }
}

/* Membership section: move full content block slightly upward */
.membership-section {
    padding-top: calc(var(--membership-section-padding-top, 92px) - 18px) !important;
}

.membership-section .section-header,
.membership-section .membership-header,
.membership-section .membership-intro {
    margin-bottom: 24px !important;
}

.membership-section .membership-selector,
.membership-section .membership-toggle,
.membership-section .membership-tabs {
    margin-top: -4px !important;
    margin-bottom: 22px !important;
}

.membership-section .membership-cards,
.membership-section .membership-grid,
.membership-section .plans-grid {
    margin-top: -6px !important;
}

@media (max-width: 760px) {
    .membership-section {
        padding-top: calc(var(--membership-section-padding-top-mobile, 68px) - 14px) !important;
    }

    .membership-section .section-header,
    .membership-section .membership-header,
    .membership-section .membership-intro {
        margin-bottom: 18px !important;
    }

    .membership-section .membership-selector,
    .membership-section .membership-toggle,
    .membership-section .membership-tabs {
        margin-top: -2px !important;
        margin-bottom: 16px !important;
    }

    .membership-section .membership-cards,
    .membership-section .membership-grid,
    .membership-section .plans-grid {
        margin-top: -4px !important;
    }
}



/* =========================================================
   Booking Section
========================================================= */

.booking-section {
    position: relative;
    padding: var(--booking-section-padding, 96px 0 104px);
    overflow: hidden;
}

.booking-section::before {
    content: "";
    position: absolute;
    inset: -20% 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 16% 18%, rgba(222, 36, 47, 0.20), transparent 34%),
        radial-gradient(circle at 84% 72%, rgba(222, 36, 47, 0.12), transparent 38%),
        linear-gradient(180deg, rgba(0,0,8,0.18), rgba(0,0,8,0.62));
}

.booking-container {
    position: relative;
    z-index: 1;
}

.booking-section-intro {
    position: relative;
    z-index: 1;
    max-width: var(--site-section-header-max-width, var(--section-heading-width, 720px));
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

.booking-section-intro-eyebrow {
    margin-bottom: var(--section-eyebrow-heading-gap-desktop);
    color: var(--membership-eyebrow-color);
    font-size: var(--membership-eyebrow-size);
    font-weight: var(--membership-eyebrow-weight);
    letter-spacing: var(--membership-eyebrow-letter-spacing);
    line-height: 1;
    text-transform: var(--membership-eyebrow-transform);
}

.booking-section-intro-title {
    font-family: var(--programs-title-font-family);
    margin: 0 0 var(--section-heading-text-gap-desktop);
    color: var(--membership-title-color);
    font-size: var(--booking-section-intro-title-size-desktop, var(--membership-title-size-desktop));
    font-weight: var(--membership-title-weight);
    line-height: var(--membership-title-line-height);
    letter-spacing: var(--membership-title-letter-spacing);
}

.booking-date-field {
    position: relative;
    margin: 0 0 14px;
    text-align: center;
}

.booking-date-display {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    font-family: inherit;
}

.booking-date-display:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.09);
}

.booking-heading {
    max-width: 760px;
    margin: 0 auto 36px;
}

.booking-eyebrow {
    color: var(--color-red, #de242f);
    font-family: var(--font-heading, "Bebas Neue", sans-serif);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 18px;
    margin: 0 0 10px;
    text-shadow: 0 0 18px rgba(255,255,255,0.14);
}

.booking-title {
    color: var(--color-light, #faf9fe);
    font-size: var(--booking-title-size-desktop, clamp(42px, 5vw, 76px));
    line-height: 0.95;
    margin: 0;
}

.booking-text {
    color: rgba(250,249,254,0.76);
    max-width: 620px;
    margin: 16px auto 0;
}

.booking-app {
    width: min(100%, 980px);
    margin: 0 auto;
    border-radius: 34px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.11), rgba(255,255,255,0.035)),
        rgba(8, 8, 14, 0.70);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow:
        0 28px 80px rgba(0,0,0,0.44),
        inset 0 1px 0 rgba(255,255,255,0.15);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
}

.booking-form {
    padding: clamp(18px, 3vw, 34px);
}

.booking-step {
    padding: 22px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.booking-step:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.booking-step-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.booking-step-number {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    font-weight: 900;
    background: linear-gradient(135deg, rgba(222,36,47,0.96), rgba(222,36,47,0.44));
    box-shadow: 0 12px 28px rgba(222,36,47,0.20);
}

.booking-step-head h3 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    letter-spacing: 0.02em;
}

.booking-step-head p {
    margin: 3px 0 0;
    color: rgba(255,255,255,0.58);
    font-size: 13px;
}

.booking-options,
.booking-times {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.booking-option,
.booking-time {
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    padding: 14px 15px;
    color: #fff;
    cursor: pointer;
    text-align: left;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03)),
        rgba(255,255,255,0.035);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.booking-option:hover,
.booking-time:hover,
.booking-option.is-active,
.booking-time.is-active {
    transform: translateY(-2px);
    border-color: rgba(222,36,47,0.58);
    background:
        radial-gradient(circle at 25% 0%, rgba(255,255,255,0.16), transparent 35%),
        linear-gradient(135deg, rgba(222,36,47,0.24), rgba(255,255,255,0.045));
    box-shadow:
        0 16px 34px rgba(222,36,47,0.14),
        inset 0 1px 0 rgba(255,255,255,0.16);
}

.booking-option strong {
    display: block;
    font-size: 14px;
}

.booking-option span,
.booking-option em {
    display: inline-block;
    color: rgba(255,255,255,0.62);
    font-style: normal;
    font-size: 12px;
    margin-top: 5px;
    margin-right: 8px;
}

.booking-option em {
    color: var(--color-red, #de242f);
    font-weight: 900;
}

.booking-person {
    display: flex;
    align-items: center;
    gap: 12px;
}

.booking-person-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-grid !important;
    place-items: center;
    margin: 0 !important;
    color: #fff !important;
    background: rgba(222,36,47,0.85);
}

.booking-date,
.booking-fields input {
    width: 100%;
    min-height: 52px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.065);
    color: #fff;
    padding: 0 16px;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}

.booking-date:focus,
.booking-fields input:focus {
    border-color: rgba(222,36,47,0.55);
    box-shadow: 0 0 0 4px rgba(222,36,47,0.12);
}

.booking-time-status {
    color: rgba(255,255,255,0.66);
    margin-bottom: 12px;
    font-size: 14px;
}

.booking-time {
    text-align: center;
    font-weight: 800;
}

.booking-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.booking-fields label span {
    display: block;
    color: rgba(255,255,255,0.70);
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 6px;
}

.booking-summary {
    margin: 18px 0;
    padding: 14px 16px;
    border-radius: 18px;
    color: rgba(255,255,255,0.78);
    background: rgba(0,0,8,0.34);
    border: 1px solid rgba(255,255,255,0.08);
}

.booking-summary strong {
    color: #fff;
}

.booking-submit {
    width: 100%;
}

.booking-message {
    min-height: 24px;
    margin-top: 12px;
    color: rgba(255,255,255,0.78);
    text-align: center;
    font-weight: 700;
}

.booking-message.is-success {
    color: #ffffff;
}

.booking-message.is-error {
    color: var(--color-red, #de242f);
}

@media (max-width: 760px) {
    .booking-section {
        padding: 68px 0 76px;
    }

    .booking-app {
        width: min(100%, 390px);
        border-radius: 28px;
    }

    .booking-form {
        padding: 18px;
    }

    .booking-options,
    .booking-times {
        grid-template-columns: 1fr;
    }

    .booking-services {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .booking-service:not(.booking-service-card) {
        padding: 11px 8px;
        text-align: center;
        border-radius: 15px;
    }

    .booking-service strong {
        font-size: 11px;
        line-height: 1.15;
    }

    .booking-service span,
    .booking-service em {
        font-size: 10px;
        margin-right: 0;
    }

    .booking-staff {
        grid-template-columns: 1fr 1fr;
    }

    .booking-times {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .booking-time {
        padding: 12px 8px;
        border-radius: 14px;
        font-size: 13px;
    }

    .booking-fields {
        grid-template-columns: 1fr;
    }

    .booking-step {
        padding: 18px 0;
    }

    .booking-step-head {
        gap: 11px;
    }

    .booking-step-number {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        font-size: 13px;
    }
}



/* =========================================================
   Booking Step-by-Step Panel UI
========================================================= */

.booking-step-panel {
    width: min(100%, 720px);
    max-width: min(100%, 720px);
    margin-inline: auto;
    border-radius: 34px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035)),
        rgba(8, 8, 13, 0.88);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow:
        0 30px 90px rgba(0,0,0,0.54),
        inset 0 1px 0 rgba(255,255,255,0.10);
    overflow: hidden;
}

.booking-panel-form {
    padding: 0;
}

.booking-panel-topbar {
    display: flex;
    gap: 10px;
    padding: 18px 18px 14px;
    background: rgba(0,0,0,0.24);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.booking-panel-topbar span {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: block;
}

.booking-panel-topbar span:nth-child(1) { background: #8b3cff; }
.booking-panel-topbar span:nth-child(2) { background: #3d8bff; }
.booking-panel-topbar span:nth-child(3) { background: #27c4b1; }
.booking-panel-topbar span:nth-child(4) { background: #f06423; }
.booking-panel-topbar span:nth-child(5) { background: #de242f; }

.booking-panel-view {
    display: none;
    padding: 22px 18px 22px;
    animation: bookingPanelIn 180ms ease both;
}

.booking-panel-view.is-active {
    display: block;
}

@keyframes bookingPanelIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.booking-brand {
    text-align: center;
    padding: 2px 0 18px;
}

.booking-brand-icon {
    width: 48px;
    height: 48px;
    display: inline-grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, #de242f, rgba(222,36,47,0.55));
    color: #fff;
    font-weight: 900;
    margin-bottom: 11px;
    box-shadow: 0 18px 40px rgba(222,36,47,0.20);
}

.booking-brand h2 {
    margin: 0;
    color: #fff;
    font-size: 25px;
    line-height: 1;
    letter-spacing: 0.02em;
}

.booking-main-button {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, #de242f, #b71420);
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: none;
    transition: transform 160ms ease, opacity 160ms ease;
}

.booking-main-button:hover {
    transform: none;
    box-shadow: none;
}

.booking-main-button:disabled {
    cursor: not-allowed;
    opacity: 0.44;
    transform: none;
}

.booking-home-block {
    margin-top: 22px;
}

.booking-home-block h3 {
    margin: 0 0 10px;
    color: rgba(255,255,255,0.50);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.09em;
}

.booking-home-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.booking-home-service {
    min-height: 70px;
    border-radius: 12px;
    padding: 10px 8px;
    border: 1px solid rgba(255,255,255,0.09);
    background: rgba(255,255,255,0.035);
    text-align: center;
}

.booking-home-service strong {
    display: block;
    color: #fff;
    font-size: 11px;
    line-height: 1.15;
}

.booking-home-service span {
    display: block;
    color: rgba(255,255,255,0.50);
    font-size: 10px;
    margin-top: 4px;
}

.booking-home-service em {
    display: block;
    color: #de242f;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    margin-top: 3px;
}

.booking-hours-list {
    border-radius: 14px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.065);
    padding: 9px 11px;
}

.booking-hour-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    color: rgba(255,255,255,0.58);
    font-size: 12px;
}

.booking-hour-row strong {
    color: #fff;
    font-size: 12px;
}

.booking-contact-strip {
    margin-top: 14px;
    display: grid;
    gap: 8px;
    border-radius: 16px;
    background: rgba(0,0,0,0.20);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 11px;
}

.booking-contact-strip span {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: rgba(255,255,255,0.58);
    font-size: 12px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.booking-contact-strip svg {
    width: 18px;
    height: 18px;
    fill: rgba(255,255,255,0.66);
    flex: 0 0 auto;
    flex-shrink: 0;
    margin-top: 0;
}

.booking-panel-header {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}

.booking-back {
    width: var(--booking-back-size-desktop, 36px);
    height: var(--booking-back-size-desktop, 36px);
    border-radius: var(--booking-back-radius, 12px);
    border: 1px solid rgba(255,255,255,0.10);
    background: var(--booking-back-bg, rgba(255, 255, 255, 0.055));
    color: var(--booking-back-color, #ffffff);
    font-size: var(--booking-back-icon-size, 22px);
    line-height: 1;
    cursor: pointer;
}

.booking-panel-header span {
    color: rgba(255,255,255,0.48);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.booking-panel-header h3 {
    margin: 2px 0 0;
    color: #fff;
    font-size: 22px;
    line-height: 1.1;
}

.booking-step-panel .booking-options,
.booking-step-panel .booking-times {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.booking-step-panel .booking-services {
    grid-template-columns: 1fr;
}

.booking-step-panel .booking-staff {
    grid-template-columns: 1fr;
}

.booking-step-panel .booking-times {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 12px;
}

.booking-step-panel .booking-option,
.booking-step-panel .booking-time {
    border-radius: 16px;
    padding: 14px 14px;
}

.booking-step-panel .booking-service:not(.booking-service-card) {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
}

.booking-step-panel .booking-service strong {
    font-size: 14px;
}

.booking-step-panel .booking-date {
    margin-bottom: 14px;
}

.booking-next-confirm {
    margin-top: 16px;
}

.booking-step-panel .booking-summary {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.booking-step-panel .booking-summary span {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.35em;
    padding: 9px 11px;
    border-radius: 12px;
    background: rgba(255,255,255,0.035);
    color: #fff;
    font-size: 13px;
}

.booking-step-panel .booking-summary strong {
    color: rgba(255,255,255,0.54);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.booking-step-panel .booking-fields {
    grid-template-columns: 1fr;
    gap: 11px;
}

@media (max-width: 760px) {
    .booking-step-panel {
        width: min(100%, 390px);
        border-radius: 30px;
    }

    .booking-panel-view {
        padding: 20px 16px 21px;
    }

    .booking-home-services {
        gap: 7px;
    }

    .booking-home-service {
        padding: 9px 6px;
    }

    .booking-home-service strong {
        font-size: 10px;
    }

    .booking-step-panel .booking-times {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
}



/* =========================================================
   Booking mobile-first responsive progress layout
   - no colored dot header
   - content fits inside the panel
   - progress tabs like Service / Staff / Date / Confirm
   - smooth step animation
========================================================= */

.booking-step-panel {
    width: min(100%, 760px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-inline: auto !important;
    border-radius: 34px !important;
    overflow: hidden !important;
}

.booking-panel-topbar {
    display: none !important;
}

.booking-panel-form {
    padding: 0 !important;
    overflow: hidden !important;
}

.booking-panel-app-head {
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    gap: 10px;
    min-height: 72px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: rgba(0,0,0,0.22);
}

.booking-app-back {
    width: var(--booking-back-size-desktop, 36px);
    height: var(--booking-back-size-desktop, 36px);
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: var(--booking-back-radius, 12px);
    color: var(--booking-back-color, #ffffff);
    background: var(--booking-back-bg, rgba(255, 255, 255, 0.055));
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateX(8px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.booking-app-back.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.booking-app-back span {
    font-size: var(--booking-back-icon-size, 22px);
    line-height: 1;
    transform: translateY(-1px);
}

@media (max-width: 760px) {
    .booking-app-back span {
        font-size: var(--booking-back-icon-size-mobile, 24px);
    }
}

.booking-app-title {
    text-align: center;
    min-width: 0;
}

.booking-app-title strong {
    display: block;
    color: #fff;
    font-size: var(--booking-app-title-strong-size, 17px);
    line-height: 1.15;
    letter-spacing: 0.02em;
}

.booking-app-title span {
    display: block;
    color: rgba(255,255,255,0.54);
    font-size: var(--booking-app-title-sub-size, 12px);
    margin-top: 3px;
}

.booking-progress {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.065);
    background: rgba(0,0,0,0.14);
}

.booking-progress-item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 42px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border: 0;
    border-radius: 999px;
    color: rgba(255,255,255,0.42);
    background: transparent;
    font-weight: 900;
    font-size: 13px;
    cursor: pointer;
    transition: color 180ms ease, background 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.booking-progress-item:disabled {
    cursor: default;
    opacity: 0.52;
}

.booking-progress-item.is-active,
.booking-progress-item.is-done {
    color: #fff;
    background: rgba(222,36,47,0.18);
}

.booking-progress-item.is-active {
    background: linear-gradient(135deg, #de242f, rgba(222,36,47,0.62));
    box-shadow: 0 16px 32px rgba(222,36,47,0.18);
}

.booking-progress-check {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 12px;
    color: currentColor;
    background: rgba(255,255,255,0.055);
}

.booking-panel-viewport {
    position: relative;
    overflow: visible;
}

.booking-panel-view {
    display: none !important;
    padding: 22px 20px 24px !important;
    min-height: auto !important;
}

.booking-panel-view.is-active {
    display: flex !important;
    flex-direction: column !important;
    animation: bookingSlideForward 260ms cubic-bezier(.2,.75,.24,1) both !important;
}

.booking-step-panel[data-direction="back"] .booking-panel-view.is-active {
    animation-name: bookingSlideBack !important;
}

@keyframes bookingSlideForward {
    from {
        opacity: 0;
        transform: translateX(22px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bookingSlideBack {
    from {
        opacity: 0;
        transform: translateX(-22px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.booking-step-title {
    margin-bottom: 18px;
}

.booking-step-title h3 {
    margin: 0;
    color: #fff;
    font-size: var(--booking-step-title-size, clamp(22px, 4vw, 30px));
    line-height: 1.05;
}

.booking-step-title p {
    margin: 8px 0 0;
    color: rgba(255,255,255,0.56);
    font-size: var(--booking-step-subtitle-size, 14px);
}

.booking-panel-header {
    display: none !important;
}

.booking-step-panel .booking-options,
.booking-step-panel .booking-times {
    display: grid !important;
    gap: 10px !important;
}

.booking-step-panel .booking-services,
.booking-step-panel .booking-staff {
    grid-template-columns: 1fr !important;
}

.booking-step-panel .booking-times {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.booking-step-panel .booking-option,
.booking-step-panel .booking-time {
    min-width: 0 !important;
    border-radius: 16px !important;
    padding: 14px 14px !important;
}

.booking-step-panel .booking-service:not(.booking-service-card) {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    align-items: center !important;
    gap: 10px !important;
}

.booking-step-panel .booking-date {
    width: 100% !important;
    margin-bottom: 14px !important;
}

.booking-time-status {
    margin: 4px 0 10px !important;
}

.booking-next-confirm {
    margin-top: 16px !important;
}

.booking-step-panel .booking-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.booking-step-panel .booking-summary {
    margin: 0 0 16px !important;
}

.booking-step-panel .booking-summary strong {
    color: rgba(255,255,255,0.52) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

@media (max-width: 760px) {
    .booking-section {
        padding: 58px 0 66px !important;
    }

    .booking-step-panel {
        width: min(100%, 390px) !important;
        max-width: calc(100vw - 28px) !important;
        border-radius: 30px !important;
    }

    .booking-panel-app-head {
        min-height: 64px !important;
        padding: 12px 14px !important;
        grid-template-columns: 38px 1fr 38px !important;
    }

    .booking-app-back {
        width: 34px !important;
        height: 34px !important;
        border-radius: 12px !important;
    }

    .booking-step-panel .booking-progress {
        gap: 6px !important;
        padding: 10px 8px !important;
        overflow: visible !important;
    }

    .booking-step-panel .booking-progress-item {
        min-height: 36px !important;
        gap: 4px !important;
        padding: 5px 6px !important;
        font-size: 10px !important;
    }

    .booking-step-panel .booking-progress-item > span:last-child {
        white-space: normal !important;
        line-height: 1.15 !important;
    }

    .booking-progress-check {
        width: 16px !important;
        height: 16px !important;
        font-size: 10px !important;
    }

    .booking-panel-view {
        padding: 18px 14px 20px !important;
    }

    .booking-brand {
        padding-top: 0 !important;
        padding-bottom: 15px !important;
    }

    .booking-brand-icon {
        width: 44px !important;
        height: 44px !important;
        border-radius: 14px !important;
    }

    .booking-brand h2 {
        font-size: 24px !important;
    }

    .booking-home-block {
        margin-top: 18px !important;
    }

    .booking-home-services {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .booking-home-service {
        min-height: 68px !important;
        padding: 8px 5px !important;
        border-radius: 12px !important;
    }

    .booking-home-service strong {
        font-size: 10px !important;
        line-height: 1.15 !important;
    }

    .booking-home-service span,
    .booking-home-service em {
        font-size: 10px !important;
    }

    .booking-hours-list {
        max-height: 138px !important;
        overflow: auto !important;
        padding: 8px 10px !important;
    }

    .booking-hour-row {
        font-size: 11px !important;
    }

    .booking-hour-row strong {
        font-size: 11px !important;
    }

    .booking-contact-strip {
        padding: 10px !important;
        gap: 7px !important;
    }

    .booking-contact-strip span {
        font-size: 11px !important;
    }

    .booking-step-title {
        margin-bottom: 14px !important;
    }

    .booking-step-title h3 {
        font-size: 24px !important;
    }

    .booking-step-title p {
        font-size: 13px !important;
    }

    .booking-step-panel .booking-service {
        padding: 13px 12px !important;
    }

    .booking-step-panel .booking-service strong {
        font-size: 13px !important;
    }

    .booking-step-panel .booking-times {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .booking-step-panel .booking-time {
        min-height: 46px !important;
        padding: 10px 8px !important;
        font-size: 15px !important;
    }

    .booking-step-panel .booking-fields {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .booking-fields input,
    .booking-date {
        min-height: 48px !important;
    }

    .booking-main-button {
        min-height: 48px !important;
    }
}

@media (max-width: 380px) {
    .booking-step-panel {
        max-width: calc(100vw - 20px) !important;
        border-radius: 26px !important;
    }

    .booking-step-panel .booking-progress {
        display: flex !important;
    }

    .booking-step-panel .booking-progress-item {
        font-size: 9px !important;
        padding: 4px 5px !important;
    }

    .booking-home-services {
        grid-template-columns: 1fr !important;
    }

    .booking-home-service {
        min-height: auto !important;
        display: grid !important;
        grid-template-columns: 1fr auto auto !important;
        align-items: center !important;
        gap: 8px !important;
        text-align: left !important;
    }
}



/* =========================================================
   Booking Compact Mobile Full-View Polish
   - main panel fits mobile better
   - no progress/title on home
   - progress appears after Book Now
   - icons become ticks after completed step
   - visible calendar month + hours after date pick
========================================================= */

.booking-step-panel {
    width: min(100%, 720px) !important;
    max-width: min(calc(100vw - 22px), 720px) !important;
    border-radius: 30px !important;
}

.booking-panel-app-head {
    display: grid !important;
    grid-template-columns: 40px 1fr 40px !important;
    align-items: center !important;
    min-height: 56px !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,0.055) !important;
}

.booking-app-title strong,
.booking-app-title span {
    display: none !important;
}

.booking-step-panel[data-current-view="home"] .booking-panel-app-head,
.booking-step-panel[data-current-view="success"] .booking-panel-app-head {
    display: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.booking-step-panel[data-current-view="home"] .booking-progress,
.booking-step-panel[data-current-view="success"] .booking-progress {
    display: none !important;
}

.booking-progress[hidden] {
    display: none !important;
}

.booking-step-panel .booking-progress {
    display: flex !important;
    align-items: stretch !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    padding: 11px 10px !important;
    position: relative !important;
    background: rgba(0, 0, 0, 0.10) !important;
    overflow: visible !important;
    flex-shrink: 0;
    z-index: 2;
}

.booking-step-panel .booking-progress-item {
    position: relative !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 7px 6px !important;
    border-radius: 999px !important;
    gap: 5px !important;
    font-size: 11px !important;
    z-index: 1 !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    line-height: 1.2 !important;
    overflow: visible !important;
}

.booking-step-panel[data-booking-lang="el"] .booking-progress-item {
    font-size: 10px !important;
    padding: 7px 5px !important;
    letter-spacing: -0.01em;
}

.booking-step-panel .booking-progress-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

.booking-step-panel .booking-progress-label,
.booking-step-panel .booking-progress-item > span:last-child {
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    max-width: 100%;
    line-height: 1.15;
    word-break: break-word;
    hyphens: auto;
}

.booking-step-panel .booking-progress-item:not(:last-child) {
    margin-right: 0 !important;
    border-right: none !important;
}

.booking-step-panel .booking-progress-item:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    width: 1px !important;
    height: 58% !important;
    transform: translateY(-50%) !important;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.03),
        rgba(255, 255, 255, 0.22),
        rgba(255, 255, 255, 0.03)
    ) !important;
    pointer-events: none !important;
    z-index: 4 !important;
}

.booking-step-panel .booking-progress-icon {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    color: currentColor !important;
    background: rgba(255,255,255,0.055) !important;
}

.booking-step-panel .booking-progress-icon svg {
    width: 13px !important;
    height: 13px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.booking-step-panel .booking-progress-icon .booking-progress-svg,
.booking-step-panel .booking-progress-icon .booking-progress-tick {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.booking-step-panel .booking-progress-icon .booking-progress-tick {
    display: none !important;
    fill: currentColor !important;
    stroke: none !important;
}

.booking-progress-item.is-done .booking-progress-svg {
    display: none !important;
}

.booking-progress-item.is-done .booking-progress-tick {
    display: block !important;
}

.booking-progress-item:not(.is-done) .booking-progress-tick {
    display: none !important;
}

.booking-panel-view {
    padding: 16px 16px 17px !important;
}

.booking-brand {
    padding: 4px 0 12px !important;
}

.booking-brand-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 13px !important;
    margin-bottom: 8px !important;
}

.booking-brand h2 {
    font-size: 22px !important;
}

.booking-main-button {
    min-height: 42px !important;
    border-radius: 10px !important;
}

.booking-home-block {
    margin-top: 14px !important;
}

.booking-home-block h3 {
    margin-bottom: 7px !important;
    font-size: 10px !important;
}

.booking-section-intro {
    padding-inline: 4px !important;
}

.booking-home-services {
    gap: 6px !important;
}

.booking-home-service {
    min-height: 54px !important;
    padding: 7px 5px !important;
    border-radius: 11px !important;
}

.booking-home-service strong {
    font-size: 9px !important;
    line-height: 1.1 !important;
}

.booking-home-service span,
.booking-home-service em {
    font-size: 9px !important;
    margin-top: 2px !important;
}

.booking-hours-list {
    max-height: 95px !important;
    overflow: auto !important;
    padding: 7px 9px !important;
    border-radius: 12px !important;
}

.booking-hour-row {
    padding: 2px 0 !important;
    font-size: 10px !important;
}

.booking-hour-row strong {
    font-size: 10px !important;
}

.booking-contact-strip {
    margin-top: 9px !important;
    padding: 8px 9px !important;
    border-radius: 13px !important;
    gap: 5px !important;
}

.booking-contact-strip span {
    font-size: 10px !important;
}

.booking-contact-strip svg {
    width: 13px !important;
    height: 13px !important;
}

.booking-step-title {
    margin-bottom: 12px !important;
}

.booking-step-title h3 {
    font-size: 21px !important;
}

.booking-step-title p {
    font-size: 12px !important;
    margin-top: 5px !important;
}

.booking-step-panel .booking-option,
.booking-step-panel .booking-time {
    padding: 11px 12px !important;
    border-radius: 14px !important;
}

.booking-step-panel .booking-service strong {
    font-size: 13px !important;
}

.booking-step-panel .booking-service span,
.booking-step-panel .booking-service em {
    font-size: 11px !important;
}

.booking-date-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.booking-calendar {
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    background: rgba(0,0,0,0.18) !important;
    padding: 10px !important;
    margin-bottom: 10px !important;
}

.booking-calendar-head {
    display: grid !important;
    grid-template-columns: 34px 1fr 34px !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

.booking-calendar-head strong {
    color: rgba(255,255,255,0.70) !important;
    text-align: center !important;
    font-size: 14px !important;
}

.booking-calendar-head button {
    width: 32px !important;
    height: 32px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,0.055) !important;
    color: #fff !important;
    font-size: 24px !important;
    cursor: pointer !important;
}

.booking-calendar-weekdays,
.booking-calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 4px !important;
}

.booking-calendar-weekdays {
    margin-bottom: 5px !important;
}

.booking-calendar-weekdays span {
    color: rgba(255,255,255,0.36) !important;
    text-align: center !important;
    font-size: 10px !important;
    font-weight: 800 !important;
}

.booking-calendar-empty,
.booking-calendar-day {
    min-height: 30px !important;
}

.booking-calendar-day {
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: rgba(255,255,255,0.82) !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease !important;
}

.booking-calendar-day:hover,
.booking-calendar-day.is-selected {
    background: linear-gradient(135deg, #de242f, rgba(222,36,47,0.65)) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

.booking-calendar-day.is-disabled,
.booking-calendar-day:disabled {
    color: rgba(255,255,255,0.16) !important;
    cursor: not-allowed !important;
    transform: none !important;
    background: transparent !important;
}

.booking-time-status {
    margin: 7px 0 8px !important;
    font-size: 12px !important;
}

.booking-step-panel .booking-times {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

.booking-step-panel .booking-time {
    min-height: 38px !important;
    padding: 8px 6px !important;
    font-size: 13px !important;
}

.booking-next-confirm {
    margin-top: 10px !important;
}

.booking-fields input,
.booking-date {
    min-height: 42px !important;
    border-radius: 13px !important;
}

.booking-step-panel .booking-phone-code-toggle,
.booking-step-panel .booking-field-input--phone {
    min-height: 42px !important;
    border-radius: 13px !important;
}

.booking-fields label span {
    font-size: 11px !important;
    margin-bottom: 4px !important;
}

.booking-step-panel .booking-fields {
    gap: 8px !important;
}

.booking-step-panel .booking-summary span {
    padding: 8px 10px !important;
    font-size: 12px !important;
}

.booking-step-panel .booking-summary strong {
    font-size: 10px !important;
}

@media (max-width: 760px) {
    .booking-section {
        padding: 42px 0 48px !important;
    }

    .booking-step-panel {
        width: min(100%, calc(100vw - 18px)) !important;
        max-width: calc(100vw - 18px) !important;
        border-radius: 26px !important;
    }

    .booking-panel-view {
        padding: 14px 12px 15px !important;
    }

    .booking-step-panel .booking-staff {
        grid-template-columns: 1fr 1fr !important;
    }

    .booking-step-panel .booking-person {
        padding: 10px 8px !important;
        gap: 8px !important;
    }

    .booking-person-avatar {
        width: 30px !important;
        height: 30px !important;
    }

    .booking-step-panel .booking-person strong {
        font-size: 12px !important;
    }
}

@media (max-width: 390px) {
    .booking-step-panel {
        max-width: calc(100vw - 14px) !important;
        border-radius: 24px !important;
    }

    .booking-panel-app-head {
        min-height: 50px !important;
        padding: 8px 11px !important;
    }

    .booking-step-panel .booking-progress {
        padding: 8px 6px !important;
        gap: 4px !important;
        overflow: visible !important;
    }

    .booking-step-panel .booking-progress-item {
        min-width: 0 !important;
        min-height: 38px !important;
        font-size: 9px !important;
        padding: 5px 4px !important;
    }

    .booking-step-panel[data-booking-lang="el"] .booking-progress-item {
        font-size: 8.5px !important;
        padding: 5px 3px !important;
    }

    .booking-step-panel .booking-progress-icon {
        width: 16px !important;
        height: 16px !important;
    }

    .booking-step-panel .booking-progress-item > span:last-child {
        line-height: 1.1 !important;
    }

    .booking-home-services {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .booking-hours-list {
        max-height: 82px !important;
    }

    .booking-calendar {
        padding: 8px !important;
    }

    .booking-calendar-day,
    .booking-calendar-empty {
        min-height: 27px !important;
        font-size: 12px !important;
    }

    .booking-step-panel .booking-times {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}



/* =========================================================
   Booking Success Confirmation
========================================================= */

.booking-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
}

.booking-submit-icon {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
    flex: 0 0 auto !important;
}

.booking-success-view {
    padding: 22px 18px 24px !important;
}

.booking-success-card {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
}

.booking-success-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.booking-success-heading h3 {
    margin: 0;
    color: #ffffff;
    font-family: var(--font-heading, "Oswald", Arial, sans-serif);
    font-size: clamp(24px, 4.5vw, 34px);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.05;
    text-transform: uppercase;
    text-align: center;
}

.booking-success-icon {
    width: 56px;
    height: 56px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    margin: 0;
    border-radius: 50%;
    color: #ffffff;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.22), transparent 38%),
        linear-gradient(135deg, rgba(222, 36, 47, 0.95), rgba(222, 36, 47, 0.55));
    border: 0;
    box-shadow:
        0 0 0 1px rgba(222, 36, 47, 0.35),
        0 12px 28px rgba(222, 36, 47, 0.22);
    animation: booking-success-icon-shell-in 680ms cubic-bezier(0.2, 0.75, 0.24, 1) both,
        booking-success-icon-shell-glow 2.6s ease-in-out 680ms infinite;
}

.booking-success-icon svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
    display: block;
    margin: 0;
}

@keyframes booking-success-icon-shell-in {
    0% {
        opacity: 0;
        transform: scale(0.72);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes booking-success-icon-shell-glow {
    0%,
    100% {
        box-shadow:
            0 0 0 1px rgba(222, 36, 47, 0.35),
            0 10px 24px rgba(222, 36, 47, 0.18);
    }

    50% {
        box-shadow:
            0 0 0 1px rgba(222, 36, 47, 0.5),
            0 14px 34px rgba(222, 36, 47, 0.34);
    }
}

.booking-success-card p {
    margin: 0;
    color: rgba(255,255,255,0.62);
    font-size: 14px;
}

.booking-success-confirmation {
    width: 100%;
    margin-top: 6px;
    padding: 16px 15px;
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025)),
        rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.09);
}

.booking-success-confirmation span {
    display: block;
    color: var(--color-red, #de242f);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    margin-bottom: 9px;
}

.booking-success-confirmation strong {
    display: block;
    color: #ffffff;
    font-size: 17px;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 800;
}

.booking-success-new {
    margin-top: 8px;
}

@media (max-width: 760px) {
    .booking-success-card {
        min-height: 330px;
        gap: 12px;
    }

    .booking-success-icon svg {
        width: 36px;
        height: 36px;
    }

    .booking-success-card h3 {
        font-size: 29px;
    }

    .booking-success-confirmation {
        padding: 14px 12px;
        border-radius: 18px;
    }
}



/* =========================================================
   Booking Minimal UI + Admin Dashboard Timeline
========================================================= */

/* Frontend minimal booking polish */
.booking-step-panel {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
        rgba(6, 6, 9, 0.90) !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow:
        0 24px 70px rgba(0,0,0,0.46),
        inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

.booking-progress-item.is-active {
    background: rgba(222,36,47,0.15) !important;
    box-shadow: none !important;
    color: #ffffff !important;
    border: 1px solid rgba(222,36,47,0.28) !important;
}

.booking-progress-item.is-done {
    background: rgba(255,255,255,0.045) !important;
    color: rgba(255,255,255,0.78) !important;
}

.booking-progress-icon {
    background: rgba(255,255,255,0.045) !important;
}

.booking-main-button {
    background: #de242f !important;
    box-shadow: none !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

.booking-main-button:hover {
    box-shadow: none !important;
}

.booking-home-service,
.booking-step-panel .booking-option,
.booking-step-panel .booking-time,
.booking-step-panel .booking-date-time-panel .booking-calendar,
.booking-hours-list,
.booking-contact-strip,
.booking-success-confirmation {
    background: rgba(255,255,255,0.026) !important;
    border-color: rgba(255,255,255,0.075) !important;
    box-shadow: none !important;
}

.booking-step-panel .booking-date-time-panel .booking-calendar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.booking-step-panel .booking-option:hover,
.booking-step-panel .booking-option.is-active,
.booking-step-panel .booking-time:hover,
.booking-step-panel .booking-time.is-active,
.booking-calendar-day:hover,
.booking-calendar-day.is-selected {
    background: rgba(222,36,47,0.16) !important;
    border-color: rgba(222,36,47,0.38) !important;
    box-shadow: none !important;
}

.booking-step-panel .booking-service {
    min-height: 66px !important;
}

.booking-step-panel .booking-option strong {
    letter-spacing: 0.01em !important;
}

.booking-calendar-day.is-selected {
    color: #ffffff !important;
}

/* Admin dashboard styles */
.pr1-booking-dashboard-card {
    overflow: hidden;
}

.pr1-dashboard-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid #ececec;
}

.pr1-dashboard-head h2 {
    margin: 0;
    font-size: 24px;
}

.pr1-dashboard-head p {
    margin: 6px 0 0;
    color: #646970;
    font-size: 14px;
}

.pr1-dashboard-date-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pr1-dashboard-date-form input[type="date"] {
    min-height: 32px;
}

.pr1-dashboard-trainers {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0;
}

.pr1-dashboard-trainers span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--trainer-color) 12%, white);
    color: var(--trainer-color);
    border: 1px solid color-mix(in srgb, var(--trainer-color) 32%, white);
    font-weight: 700;
}

.pr1-dashboard-trainers i {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--trainer-color);
    color: #fff;
    font-style: normal;
    font-size: 12px;
}

.pr1-timeline {
    width: 100%;
    min-width: 860px;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
}

.pr1-booking-dashboard-card {
    overflow-x: auto;
}

.pr1-timeline-row {
    display: grid;
    grid-template-columns: 72px repeat(var(--staff-count), minmax(210px, 1fr));
    min-height: 74px;
    border-bottom: 1px solid #f0f0f1;
}

.pr1-timeline-row:last-child {
    border-bottom: 0;
}

.pr1-timeline-header-row {
    min-height: 48px;
    background: #fafafa;
    position: sticky;
    top: 32px;
    z-index: 2;
}

.pr1-time-col {
    padding: 14px 12px;
    color: #6b7280;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 700;
    border-right: 1px solid #f0f0f1;
    background: #fbfbfb;
}

.pr1-staff-col-head {
    padding: 14px 14px;
    color: var(--trainer-color);
    font-weight: 900;
    text-align: center;
    border-right: 1px solid #f0f0f1;
}

.pr1-staff-col-head:last-child,
.pr1-staff-col:last-child {
    border-right: 0;
}

.pr1-staff-col {
    position: relative;
    padding: 9px 10px;
    border-right: 1px solid #f0f0f1;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.012), rgba(0,0,0,0));
}

.pr1-booking-block {
    display: block;
    min-height: 52px;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 7px;
    background: color-mix(in srgb, var(--trainer-color) 14%, white);
    border: 1px solid color-mix(in srgb, var(--trainer-color) 45%, white);
    color: #1d2327;
    box-shadow: 0 6px 16px rgba(0,0,0,0.05);
}

.pr1-booking-block strong {
    display: block;
    color: var(--trainer-color);
    font-size: 13px;
    line-height: 1.1;
}

.pr1-booking-block span {
    display: block;
    color: #50575e;
    margin-top: 5px;
    font-size: 12px;
}

.pr1-booking-block em {
    display: inline-flex;
    margin-top: 7px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.55);
    color: var(--trainer-color);
    font-style: normal;
    font-weight: 800;
    font-size: 10px;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .pr1-dashboard-head {
        flex-direction: column;
    }

    .pr1-dashboard-date-form {
        width: 100%;
        flex-wrap: wrap;
    }

    .pr1-dashboard-date-form input[type="date"] {
        flex: 1;
        min-width: 160px;
    }
}



/* =========================================================
   Booking icons + continue flow + smooth glow
   - Steps are visual only; back arrow controls going back
   - Service/Staff use Continue buttons
   - Completed step icon becomes tick
========================================================= */

/* Progress is visual only */
.booking-progress-item,
.booking-progress-item:disabled {
    pointer-events: none !important;
    cursor: default !important;
    opacity: 1 !important;
}

/* Better individual step icons */
.booking-progress-icon {
    width: 20px !important;
    height: 20px !important;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 35%),
        rgba(255,255,255,0.055) !important;
    border: 1px solid rgba(255,255,255,0.075) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

.booking-progress-icon svg {
    width: 13px !important;
    height: 13px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.booking-progress-tick {
    display: none !important;
    fill: #ffffff !important;
    stroke: none !important;
}

.booking-progress-item.is-done .booking-progress-svg {
    display: none !important;
}

.booking-progress-item.is-done .booking-progress-tick {
    display: block !important;
}

.booking-progress-item.is-done .booking-progress-icon {
    color: #ffffff !important;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.24), transparent 36%),
        linear-gradient(135deg, rgba(222,36,47,0.95), rgba(222,36,47,0.48)) !important;
    border-color: rgba(222,36,47,0.35) !important;
}

.booking-progress-item.is-active .booking-progress-icon {
    color: #ffffff !important;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.20), transparent 35%),
        rgba(222,36,47,0.34) !important;
    border-color: rgba(222,36,47,0.40) !important;
}

/* Continue buttons in service/staff */
.booking-service-continue,
.booking-staff-continue {
    margin-top: 14px !important;
}

/* Smooth PR1MELAB glow, not too heavy */
.booking-step-panel {
    background:
        radial-gradient(circle at 18% 4%, rgba(222,36,47,0.16), transparent 34%),
        radial-gradient(circle at 86% 82%, rgba(222,36,47,0.10), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.018)),
        rgba(6, 6, 9, 0.91) !important;
    box-shadow:
        0 28px 84px rgba(0,0,0,0.52),
        0 0 70px rgba(222,36,47,0.075),
        inset 0 1px 0 rgba(255,255,255,0.09) !important;
}

.booking-main-button {
    background:
        radial-gradient(circle at 20% 0%, rgba(255,255,255,0.18), transparent 35%),
        linear-gradient(135deg, #de242f, #b91622) !important;
    box-shadow: none !important;
}

.booking-main-button:hover {
    box-shadow: none !important;
}

.booking-step-panel .booking-option:hover,
.booking-step-panel .booking-option.is-active,
.booking-step-panel .booking-time:hover,
.booking-step-panel .booking-time.is-active,
.booking-calendar-day:hover,
.booking-calendar-day.is-selected {
    background:
        radial-gradient(circle at 26% 0%, rgba(255,255,255,0.12), transparent 34%),
        rgba(222,36,47,0.16) !important;
    border-color: rgba(222,36,47,0.42) !important;
    box-shadow:
        0 12px 28px rgba(222,36,47,0.12),
        inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

/* Flow divider between progress steps */
.booking-progress-item:not(:last-child)::after {
    width: 1px !important;
    height: 58% !important;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.03),
        rgba(255, 255, 255, 0.22),
        rgba(255, 255, 255, 0.03)
    ) !important;
}

/* Back arrow glow subtle */
.booking-app-back.is-visible {
    box-shadow:
        0 8px 22px rgba(0,0,0,0.24),
        inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

@media (max-width: 390px) {
    .booking-progress-icon {
        width: 18px !important;
        height: 18px !important;
    }

    .booking-progress-icon svg {
        width: 12px !important;
        height: 12px !important;
    }

    .booking-service-continue,
    .booking-staff-continue {
        margin-top: 11px !important;
    }
}



/* =========================================================
   Private Frontend Booking Dashboard
========================================================= */

.booking-dashboard-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 14% 0%, rgba(139, 60, 255, 0.24), transparent 34%),
        radial-gradient(circle at 86% 35%, rgba(47, 128, 237, 0.16), transparent 32%),
        radial-gradient(circle at 70% 100%, rgba(222, 36, 47, 0.14), transparent 40%),
        #08090c;
    color: #fff;
}

.dashboard-app-shell {
    width: min(100% - 28px, 1240px);
    margin-inline: auto;
    padding: 110px 0 70px;
}

.dashboard-top-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 640px;
    margin: 0 auto 22px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,0.025);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.dashboard-top-tabs span {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: rgba(255,255,255,0.48);
    font-weight: 900;
}

.dashboard-top-tabs .is-active {
    color: #b98cff;
    background: rgba(139,60,255,0.15);
    box-shadow: inset 0 0 0 1px rgba(139,60,255,0.20);
}

.dashboard-top-tabs svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.dashboard-panel {
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(7, 8, 11, 0.76);
    box-shadow:
        0 30px 90px rgba(0,0,0,0.34),
        inset 0 1px 0 rgba(255,255,255,0.06);
    overflow: hidden;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.dashboard-handle {
    width: 92px;
    height: 10px;
    border-radius: 999px;
    margin: 20px auto 0;
    background: rgba(255,255,255,0.08);
}

.dashboard-head,
.dashboard-datebar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding: 28px 30px 22px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.dashboard-kicker {
    margin: 0 0 8px;
    color: rgba(255,255,255,0.46);
    font-weight: 800;
}

.dashboard-head h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 0.95;
}

.dashboard-head span,
.dashboard-datebar span {
    display: block;
    margin-top: 8px;
    color: rgba(255,255,255,0.50);
}

.dashboard-settings {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.74);
    border: 1px solid rgba(255,255,255,0.08);
}

.dashboard-settings svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.dashboard-datebar {
    align-items: center;
    padding-top: 18px;
    padding-bottom: 18px;
}

.dashboard-datebar strong {
    color: #fff;
    font-size: 22px;
}

.dashboard-date-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dashboard-date-form a,
.dashboard-date-form button,
.dashboard-actions a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.09);
    background: rgba(255,255,255,0.045);
    color: #fff;
    padding: 0 14px;
    text-decoration: none;
    cursor: pointer;
    font-weight: 900;
}

.dashboard-date-form button {
    background: #8b3cff;
    border-color: rgba(255,255,255,0.10);
}

.dashboard-date-form input {
    min-height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.09);
    background: rgba(255,255,255,0.045);
    color: #fff;
    padding: 0 12px;
}

.dashboard-trainers {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px 30px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.dashboard-trainer-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--trainer-color) 42%, transparent);
    background: color-mix(in srgb, var(--trainer-color) 15%, transparent);
    color: var(--trainer-color);
    padding: 8px 17px 8px 10px;
    font-weight: 900;
}

.dashboard-trainer-pill i {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--trainer-color);
    color: #fff;
    font-style: normal;
}

.dashboard-timeline-wrap {
    overflow: auto;
    max-height: 720px;
}

.dashboard-timeline {
    min-width: 920px;
    position: relative;
    background: #090a0c;
}

.dashboard-row {
    display: grid;
    grid-template-columns: 78px repeat(var(--staff-count), minmax(260px, 1fr));
    min-height: 92px;
    border-bottom: 1px solid rgba(255,255,255,0.035);
}

.dashboard-row-head {
    min-height: 58px;
    position: sticky;
    top: 0;
    z-index: 3;
    background: #0d0e10;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.dashboard-time-col {
    padding: 18px 16px;
    color: rgba(255,255,255,0.32);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 900;
    border-right: 1px solid rgba(255,255,255,0.04);
    background: rgba(255,255,255,0.01);
}

.dashboard-staff-head {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    color: var(--trainer-color);
    font-weight: 900;
    border-right: 1px solid rgba(255,255,255,0.04);
}

.dashboard-staff-col {
    position: relative;
    padding: 10px 12px;
    border-right: 1px solid rgba(255,255,255,0.04);
    background: linear-gradient(180deg,rgba(255,255,255,.008),rgba(255,255,255,0));
}

.dashboard-booking-block {
    display: block;
    border-radius: 16px;
    padding: 13px 15px;
    margin-bottom: 8px;
    background: color-mix(in srgb, var(--trainer-color) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--trainer-color) 58%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--trainer-color) 12%, transparent);
}

.dashboard-booking-block strong {
    display: block;
    color: var(--trainer-color);
    font-size: 15px;
    line-height: 1.05;
}

.dashboard-booking-block span,
.dashboard-booking-block small {
    display: block;
    color: rgba(255,255,255,0.58);
    margin-top: 6px;
}

.dashboard-booking-block em {
    display: inline-flex;
    margin-top: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.72);
    font-style: normal;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.dashboard-now-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #de242f;
    z-index: 4;
    box-shadow: 0 0 18px rgba(222,36,47,.35);
}

.dashboard-now-line::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #de242f;
    transform: translateY(-50%);
}

.dashboard-mobile-cards {
    display: none;
}

.dashboard-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 30px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.dashboard-actions a:first-child {
    background: #8b3cff;
}

.dashboard-empty {
    padding: 22px;
    color: rgba(255,255,255,0.58);
    text-align: center;
}

.dashboard-login-card {
    width: min(100%, 560px);
    margin: 140px auto;
    padding: 32px;
    border-radius: 28px;
    background: rgba(7,8,11,0.82);
    color: #fff;
    text-align: center;
}

@media (max-width: 900px) {
    .dashboard-app-shell {
        width: min(100% - 18px, 560px);
        padding-top: 92px;
    }

    .dashboard-top-tabs {
        margin-bottom: 14px;
    }

    .dashboard-top-tabs span {
        min-height: 46px;
        font-size: 13px;
    }

    .dashboard-head,
    .dashboard-datebar {
        padding: 20px 18px;
    }

    .dashboard-head h1 {
        font-size: 36px;
    }

    .dashboard-datebar {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-date-form {
        width: 100%;
        flex-wrap: wrap;
    }

    .dashboard-date-form input {
        flex: 1;
        min-width: 150px;
    }

    .dashboard-trainers {
        padding: 14px 18px;
    }

    .dashboard-timeline-wrap {
        display: none;
    }

    .dashboard-mobile-cards {
        display: grid;
        gap: 12px;
        padding: 16px 18px;
    }

    .dashboard-mobile-card {
        border-radius: 18px;
        padding: 15px;
        background: color-mix(in srgb, var(--trainer-color) 16%, transparent);
        border: 1px solid color-mix(in srgb, var(--trainer-color) 46%, transparent);
    }

    .dashboard-mobile-card strong {
        display: block;
        color: var(--trainer-color);
        font-size: 16px;
    }

    .dashboard-mobile-card span,
    .dashboard-mobile-card small {
        display: block;
        color: rgba(255,255,255,0.58);
        margin-top: 5px;
    }

    .dashboard-mobile-card p {
        margin: 10px 0 0;
        color: #fff;
        font-weight: 900;
    }

    .dashboard-actions {
        padding: 14px 18px;
        flex-direction: column;
    }
}





/* =========================================================
   PR1MELAB App-Style Private Booking Dashboard
========================================================= */

body.dashboard-app-body {
    margin: 0 !important;
    background: var(--dashboard-app-bg, #050507) !important;
    overflow-x: hidden !important;
}

body.dashboard-app-body .site-header,
body.dashboard-app-body .main-header,
body.dashboard-app-body .site-footer,
body.dashboard-app-body .main-footer,
body.dashboard-app-body header:not(.dashboard-app-header):not(.dashboard-top-bar),
body.dashboard-app-body footer:not(.dashboard-app-footer) {
    display: none !important;
}

.dashboard-app-page {
    min-height: 100vh;
    padding: var(--dashboard-app-padding, 10px);
    background:
        radial-gradient(circle at 12% 0%, var(--dashboard-app-accent-soft, rgba(222,36,47,0.22)), transparent 34%),
        radial-gradient(circle at 88% 28%, rgba(47,128,237,0.10), transparent 32%),
        linear-gradient(180deg, var(--dashboard-app-bg, #09090c) 0%, #030305 100%);
    color: var(--dashboard-app-text, #faf9fe);
    font-family: var(--font-body, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.dashboard-app-card {
    width: min(100%, 1120px);
    min-height: calc(100vh - 20px);
    margin: 0 auto;
    border-radius: var(--dashboard-app-radius, 24px);
    border: 1px solid var(--dashboard-app-border, rgba(255,255,255,0.08));
    background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)), var(--dashboard-app-card-bg, rgba(7,7,11,0.90));
    box-shadow: 0 26px 70px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.07);
    overflow: hidden;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.dashboard-app-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 16px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    text-align: center;
}

.dashboard-app-header p {
    margin: 0;
    color: var(--dashboard-app-accent, var(--color-red, #de242f));
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 11px;
}

.dashboard-app-header h1 {
    margin: 0;
    color: var(--dashboard-app-text, #fff);
    font-size: clamp(var(--dashboard-app-header-size, 24px), 4vw, 40px);
    line-height: 1;
}

.dashboard-app-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 120px;
    min-width: 72px;
    min-height: 42px;
    text-decoration: none;
}

.dashboard-app-logo-img {
    display: block;
    width: auto;
    max-width: 120px;
    max-height: 44px;
    object-fit: contain;
}

.dashboard-app-logo-text {
    color: #fff;
    font-weight: 1000;
    font-size: 18px;
    letter-spacing: 0.03em;
}

.dashboard-app-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.dashboard-app-date strong {
    display: block;
    color: #fff;
    font-size: clamp(16px, 2.4vw, 22px);
    margin: 0;
}

.dashboard-app-date small {
    display: block;
    color: rgba(250,249,254,0.58);
    margin-top: 4px;
    font-size: 12px;
}

.dashboard-app-date-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.dashboard-app-date-controls a,
.dashboard-app-calendar-trigger {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 12px;
    background: rgba(255,255,255,0.045);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
    padding: 0;
    line-height: 0;
}

.dashboard-app-calendar-trigger svg {
    width: 18px;
    height: 18px;
    color: #fff;
    display: block;
    margin: 0;
    flex-shrink: 0;
}

.dashboard-app-calendar-trigger input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.dashboard-app-trainers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.dashboard-app-trainers span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px 7px 8px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--trainer-color) 28%, transparent), rgba(255,255,255,0.02));
    border: 1px solid color-mix(in srgb, var(--trainer-color) 48%, rgba(255,255,255,0.08));
    font-weight: 800;
    font-size: 12px;
}

.dashboard-app-trainers i {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--trainer-color);
    color: #fff;
    font-style: normal;
    font-size: 11px;
}

.dashboard-app-timeline-wrap {
    overflow: auto;
    max-height: min(70vh, 700px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.dashboard-app-timeline {
    position: relative;
    min-width: 720px;
    background: rgba(0,0,0,0.18);
}

.dashboard-app-row {
    display: grid;
    grid-template-columns: 58px repeat(var(--staff-count), minmax(180px, 1fr));
    min-height: 82px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.dashboard-app-head-row {
    min-height: 48px;
    position: sticky;
    top: 0;
    z-index: 4;
    background: #0b0b0e;
    border-bottom: 1px solid rgba(255,255,255,0.075);
}

.dashboard-app-time {
    padding: 14px 8px;
    color: rgba(255,255,255,0.36);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 900;
    border-right: 1px solid rgba(255,255,255,0.045);
    font-size: 11px;
}

.dashboard-app-staff-head {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    color: var(--trainer-color);
    font-weight: 900;
    font-size: 12px;
    border-right: 1px solid rgba(255,255,255,0.045);
    text-align: center;
}

.dashboard-app-staff-col {
    padding: 8px;
    border-right: 1px solid rgba(255,255,255,0.045);
    background: linear-gradient(180deg, rgba(255,255,255,0.008), transparent);
}

.dashboard-app-booking {
    display: block;
    border-radius: 14px;
    padding: 10px;
    margin-bottom: 6px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--trainer-color) 24%, transparent), rgba(255,255,255,0.03));
    border: 1px solid color-mix(in srgb, var(--trainer-color) 60%, rgba(255,255,255,0.10));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--trainer-color) 13%, transparent);
}

.dashboard-app-booking strong {
    display: block;
    color: #fff;
    font-size: 12px;
    line-height: 1.15;
}

.dashboard-app-booking span {
    display: block;
    color: rgba(255,255,255,0.82);
    margin-top: 4px;
    font-weight: 700;
    font-size: 11px;
}

.dashboard-app-booking small {
    display: block;
    color: rgba(255,255,255,0.58);
    margin-top: 4px;
    font-size: 10px;
}

.dashboard-app-now-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-red, #de242f);
    z-index: 6;
    box-shadow: 0 0 18px rgba(222,36,47,0.40);
    pointer-events: none;
}

.dashboard-app-now-line::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    width: 11px;
    height: 11px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--color-red, #de242f);
}

.dashboard-app-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px 16px;
}

.dashboard-app-footer a {
    min-height: 36px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.09);
    background: rgba(255,255,255,0.045);
    color: #fff;
    text-decoration: none;
    font-weight: 900;
    padding: 0 14px;
    font-size: 12px;
}

.dashboard-app-footer a:first-child {
    background: var(--color-red, #de242f);
}

@media (max-width: 760px) {
    .dashboard-app-page { padding: 8px; }
    .dashboard-app-card { min-height: calc(100vh - 16px); border-radius: 22px; }
    .dashboard-app-date { gap: 10px; }
    .dashboard-app-timeline { min-width: 640px; }
    .dashboard-app-row { grid-template-columns: 54px repeat(var(--staff-count), minmax(160px, 1fr)); min-height: 78px; }
}



/* =========================================================
   Dashboard Fit View Mode
   Makes the private dashboard fit inside one mobile viewport.
========================================================= */

.dashboard-app-body,
.dashboard-app-body html {
    height: 100%;
}

body.dashboard-app-body {
    overflow: hidden !important;
}

.dashboard-app-page {
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 10px !important;
    overflow: hidden !important;
}

.dashboard-app-card {
    height: calc(100dvh - 20px) !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.dashboard-app-header,
.dashboard-top-bar,
.dashboard-calendar-panel,
.dashboard-service-legend,
.dashboard-app-date,
.dashboard-app-trainers,
.dashboard-app-footer {
    flex: 0 0 auto !important;
}

.dashboard-app-header {
    padding: 14px 16px 10px !important;
    gap: 5px !important;
}

.dashboard-app-logo {
    min-height: 34px !important;
    max-width: 108px !important;
}

.dashboard-app-logo-img {
    max-width: 108px !important;
    max-height: 34px !important;
}

.dashboard-app-header p {
    font-size: 10px !important;
    line-height: 1 !important;
}

.dashboard-app-header h1 {
    font-size: 26px !important;
    line-height: 1 !important;
}

.dashboard-app-date {
    padding: 10px 16px !important;
}

.dashboard-app-date strong {
    font-size: 17px !important;
    line-height: 1.1 !important;
}

.dashboard-app-date small {
    margin-top: 2px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

.dashboard-app-date-controls a,
.dashboard-app-calendar-trigger {
    width: 34px !important;
    height: 34px !important;
    border-radius: 11px !important;
}

.dashboard-app-calendar-trigger svg {
    width: 16px !important;
    height: 16px !important;
}

.dashboard-app-trainers {
    padding: 9px 16px !important;
    gap: 7px !important;
    max-height: 48px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
}

.dashboard-app-trainers::-webkit-scrollbar {
    display: none !important;
}

.dashboard-app-trainers span {
    flex: 0 0 auto !important;
    padding: 6px 11px 6px 7px !important;
    font-size: 11px !important;
}

.dashboard-app-trainers i {
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
}

.dashboard-app-timeline-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
}

.dashboard-app-timeline {
    min-width: 680px !important;
}

.dashboard-app-row {
    min-height: 48px !important;
    grid-template-columns: 54px repeat(var(--staff-count), minmax(155px, 1fr)) !important;
}

.dashboard-app-head-row {
    min-height: 38px !important;
}

.dashboard-app-time {
    padding: 10px 8px !important;
    font-size: 10px !important;
    line-height: 1 !important;
}

.dashboard-app-staff-head {
    padding: 8px 7px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
}

.dashboard-app-staff-col {
    padding: 5px !important;
}

.dashboard-app-booking {
    border-radius: 11px !important;
    padding: 6px 7px !important;
    margin-bottom: 4px !important;
}

.dashboard-app-booking strong {
    font-size: 10.5px !important;
    line-height: 1.05 !important;
}

.dashboard-app-booking span {
    margin-top: 2px !important;
    font-size: 9.5px !important;
    line-height: 1.1 !important;
}

.dashboard-app-booking small {
    margin-top: 2px !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
}

.dashboard-app-now-line {
    height: 2px !important;
}

.dashboard-app-now-line::before {
    width: 10px !important;
    height: 10px !important;
}

.dashboard-app-footer {
    padding: 8px 16px 10px !important;
}

.dashboard-app-footer a {
    min-height: 31px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    padding: 0 10px !important;
}

@media (max-width: 760px) {
    .dashboard-app-page {
        padding: 6px !important;
    }

    .dashboard-app-card {
        height: calc(100dvh - 12px) !important;
        border-radius: 20px !important;
    }

    .dashboard-app-header {
        padding: 10px 12px 8px !important;
    }

    .dashboard-app-logo {
        min-height: 30px !important;
        max-width: 96px !important;
    }

    .dashboard-app-logo-img {
        max-width: 96px !important;
        max-height: 30px !important;
    }

    .dashboard-app-header h1 {
        font-size: 22px !important;
    }

    .dashboard-app-date {
        padding: 8px 12px !important;
        gap: 8px !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    .dashboard-app-date strong {
        font-size: 14px !important;
    }

    .dashboard-app-date small {
        font-size: 10px !important;
    }

    .dashboard-app-date-controls a,
    .dashboard-app-calendar-trigger {
        width: 30px !important;
        height: 30px !important;
    }

    .dashboard-app-trainers {
        padding: 7px 12px !important;
        max-height: 40px !important;
    }

    .dashboard-app-trainers span {
        padding: 5px 9px 5px 6px !important;
        font-size: 10px !important;
    }

    .dashboard-app-trainers i {
        width: 20px !important;
        height: 20px !important;
        font-size: 9px !important;
    }

    .dashboard-app-timeline {
        min-width: 610px !important;
    }

    .dashboard-app-row {
        grid-template-columns: 48px repeat(var(--staff-count), minmax(135px, 1fr)) !important;
        min-height: 44px !important;
    }

    .dashboard-app-head-row {
        min-height: 34px !important;
    }

    .dashboard-app-time {
        padding: 8px 6px !important;
        font-size: 9px !important;
    }

    .dashboard-app-staff-head {
        padding: 7px 6px !important;
        font-size: 10px !important;
    }

    .dashboard-app-staff-col {
        padding: 4px !important;
    }

    .dashboard-app-booking {
        padding: 5px 6px !important;
        border-radius: 10px !important;
    }

    .dashboard-app-booking strong {
        font-size: 9.5px !important;
    }

    .dashboard-app-booking span,
    .dashboard-app-booking small {
        font-size: 8.5px !important;
    }

    .dashboard-app-footer {
        padding: 6px 12px 8px !important;
        gap: 7px !important;
    }

    .dashboard-app-footer a {
        min-height: 29px !important;
        font-size: 10px !important;
    }
}

@media (max-width: 390px) {
    .dashboard-app-header {
        padding: 8px 10px 6px !important;
    }

    .dashboard-app-logo,
    .dashboard-app-logo-img {
        max-width: 86px !important;
        max-height: 26px !important;
    }

    .dashboard-app-header p {
        font-size: 9px !important;
    }

    .dashboard-app-header h1 {
        font-size: 20px !important;
    }

    .dashboard-app-date {
        padding: 7px 10px !important;
    }

    .dashboard-app-date strong {
        font-size: 13px !important;
    }

    .dashboard-app-date small {
        font-size: 9px !important;
    }

    .dashboard-app-date-controls {
        gap: 5px !important;
    }

    .dashboard-app-date-controls a,
    .dashboard-app-calendar-trigger {
        width: 28px !important;
        height: 28px !important;
    }

    .dashboard-app-trainers {
        padding: 6px 10px !important;
        max-height: 36px !important;
    }

    .dashboard-app-timeline {
        min-width: 560px !important;
    }

    .dashboard-app-row {
        min-height: 39px !important;
        grid-template-columns: 44px repeat(var(--staff-count), minmax(124px, 1fr)) !important;
    }

    .dashboard-app-head-row {
        min-height: 31px !important;
    }

    .dashboard-app-footer {
        padding: 5px 10px 6px !important;
    }
}



/* =========================================================
   Dashboard single-trainer view + full fit with footer buttons
========================================================= */

.dashboard-app-card {
    height: calc(100dvh - 12px) !important;
}

.dashboard-app-timeline-wrap {
    flex: 1 1 0 !important;
    min-height: 0 !important;
}

.dashboard-app-footer {
    display: flex !important;
    flex: 0 0 auto !important;
    padding: 5px 10px 6px !important;
}

.dashboard-app-footer a {
    min-height: 28px !important;
    font-size: 10px !important;
    padding: 0 9px !important;
}

.dashboard-service-filters-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    position: relative;
    z-index: 2;
}

.dashboard-service-dots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--dashboard-service-dot-gap, clamp(14px, 4vw, 22px));
    width: 100%;
    padding: 0;
}

.dashboard-app-trainers .dashboard-service-filter,
.dashboard-app-trainers button.dashboard-service-filter {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 4px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    transition: transform 120ms ease, opacity 120ms ease !important;
}

.dashboard-service-dot {
    display: block;
    width: var(--dashboard-service-dot-size, 16px);
    height: var(--dashboard-service-dot-size, 16px);
    border-radius: 50%;
    background-color: var(--dashboard-service-dot-color-all, #ffffff);
    box-shadow: 0 0 0 2px var(--dashboard-service-dot-ring, rgba(8, 8, 12, 0.55));
}

.dashboard-service-dot--all,
.dashboard-service-filter[data-dashboard-service="all"] .dashboard-service-dot {
    background-color: var(--dashboard-service-dot-color-all, #ffffff);
}

.dashboard-service-dot--personal_training,
.dashboard-service-filter[data-dashboard-service="personal_training"] .dashboard-service-dot {
    background-color: var(--dashboard-service-dot-color-personal-training, #de242f);
}

.dashboard-service-dot--group_training_men,
.dashboard-service-filter[data-dashboard-service="group_training_men"] .dashboard-service-dot {
    background-color: var(--dashboard-service-dot-color-group-training-men, #2f80ed);
}

.dashboard-service-dot--group_training_women,
.dashboard-service-filter[data-dashboard-service="group_training_women"] .dashboard-service-dot {
    background-color: var(--dashboard-service-dot-color-group-training-women, #ec4899);
}

.dashboard-app-trainers .dashboard-service-filter.is-active {
    transform: scale(1.12);
}

.dashboard-app-trainers .dashboard-service-filter.is-active .dashboard-service-dot {
    box-shadow: 0 0 0 2px var(--dashboard-service-dot-active-glow, rgba(255, 255, 255, 0.4)), 0 0 14px currentColor;
}

@media (max-width: 767px) {
    .dashboard-service-dot {
        width: var(--dashboard-service-dot-size-mobile, var(--dashboard-service-dot-size, 14px));
        height: var(--dashboard-service-dot-size-mobile, var(--dashboard-service-dot-size, 14px));
    }
}

.dashboard-selected-trainer-head {
    color: #ffffff !important;
    text-align: center;
}

.dashboard-app-booking {
    background: linear-gradient(135deg, color-mix(in srgb, var(--service-color, var(--trainer-color, #de242f)) 24%, transparent), rgba(255, 255, 255, 0.03)) !important;
    border: 1px solid color-mix(in srgb, var(--service-color, var(--trainer-color, #de242f)) 60%, rgba(255, 255, 255, 0.1)) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--service-color, var(--trainer-color, #de242f)) 13%, transparent) !important;
    border-radius: 10px !important;
}

.dashboard-app-single-timeline,
.dashboard-app-timeline {
    min-width: 100% !important;
}

.dashboard-app-single-timeline .dashboard-app-row,
.dashboard-app-timeline .dashboard-app-row {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    min-height: 44px !important;
}

.dashboard-app-single-timeline .dashboard-app-head-row,
.dashboard-app-timeline .dashboard-app-head-row {
    min-height: 34px !important;
}

.dashboard-selected-trainer-head {
    font-size: 11px !important;
}

.dashboard-single-bookings-col {
    min-width: 0 !important;
}

.dashboard-app-booking {
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 760px) {
    .dashboard-app-page {
        padding: 5px !important;
    }

    .dashboard-app-card {
        height: calc(100dvh - 10px) !important;
        border-radius: 18px !important;
    }

    .dashboard-app-header {
        padding: 7px 10px 5px !important;
    }

    .dashboard-app-logo,
    .dashboard-app-logo-img {
        max-width: 82px !important;
        max-height: 24px !important;
        min-height: 24px !important;
    }

    .dashboard-app-header p {
        font-size: 8px !important;
    }

    .dashboard-app-header h1 {
        font-size: 18px !important;
    }

    .dashboard-app-date {
        padding: 6px 10px !important;
    }

    .dashboard-app-date strong {
        font-size: 12px !important;
    }

    .dashboard-app-date small {
        font-size: 8.5px !important;
    }

    .dashboard-app-date-controls a,
    .dashboard-app-calendar-trigger {
        width: 26px !important;
        height: 26px !important;
    }

    .dashboard-app-calendar-trigger svg {
        width: 14px !important;
        height: 14px !important;
    }

    .dashboard-app-trainers {
        padding: 5px 10px !important;
        max-height: 34px !important;
    }

    .dashboard-app-trainers button.dashboard-trainer-filter {
        padding: 4px 8px 4px 5px !important;
        font-size: 9px !important;
    }

    .dashboard-app-trainers .dashboard-trainer-filter i {
        width: 18px !important;
        height: 18px !important;
        font-size: 8px !important;
    }

    .dashboard-app-row {
        grid-template-columns: 40px minmax(0, 1fr) !important;
        min-height: 39px !important;
    }

    .dashboard-app-head-row {
        min-height: 30px !important;
    }

    .dashboard-app-time {
        padding: 7px 5px !important;
        font-size: 8px !important;
    }

    .dashboard-app-staff-head {
        padding: 6px 5px !important;
        font-size: 9px !important;
    }

    .dashboard-app-staff-col {
        padding: 4px !important;
    }

    .dashboard-app-booking {
        padding: 5px 6px !important;
        border-radius: 9px !important;
    }

    .dashboard-app-booking strong {
        font-size: 9px !important;
    }

    .dashboard-app-booking span,
    .dashboard-app-booking small {
        font-size: 8px !important;
    }
}

/* =========================================================
   Booking frontend fit-to-view flow
========================================================= */

.booking-section {
    min-height: 100dvh !important;
    display: grid !important;
    align-items: center !important;
    padding: 24px 0 !important;
}

.booking-section .booking-container {
    width: min(100%, 1040px) !important;
}

.booking-step-panel {
    max-height: calc(100dvh - 48px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.booking-panel-form {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.booking-panel-app-head,
.booking-progress {
    flex: 0 0 auto !important;
}

.booking-panel-viewport {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.booking-panel-view {
    max-height: 100% !important;
    overflow: hidden !important;
    scrollbar-width: thin !important;
}

.booking-progress-check,
.booking-progress-icon {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.booking-progress-item span:not(.booking-progress-icon) {
    display: inline-flex !important;
}

.booking-progress-item {
    gap: 4px !important;
}

.booking-progress-icon {
    width: 18px !important;
    height: 18px !important;
}

.booking-progress-icon svg {
    width: 15px !important;
    height: 15px !important;
}

@media (min-width: 761px) {
    .booking-step-panel {
        width: min(100%, 720px) !important;
        max-width: min(100%, 720px) !important;
    }

    .booking-panel-view {
        padding: 18px 14px !important;
    }

    .booking-calendar {
        padding: 12px !important;
    }

    .booking-calendar-day,
    .booking-calendar-empty {
        min-height: 32px !important;
        font-size: 13px !important;
    }

    .booking-step-panel .booking-times {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .booking-step-panel .booking-time {
        min-height: 40px !important;
        padding: 8px 10px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 760px) {
    .booking-section {
        min-height: 0 !important;
        display: block !important;
        padding: 8px 0 !important;
    }

    .booking-step-panel {
        max-height: none !important;
        width: min(100%, 370px) !important;
        overflow-anchor: none;
    }

    .booking-panel-view {
        padding: 12px 10px !important;
    }

    .booking-date-display {
        min-height: 40px !important;
        padding: 0 14px !important;
        font-size: 14px !important;
    }

    .booking-brand {
        padding-bottom: 8px !important;
    }

    .booking-home-block {
        margin-top: 10px !important;
    }

    .booking-hours-list {
        max-height: 74px !important;
    }

    .booking-calendar {
        padding: 7px !important;
        margin-bottom: 7px !important;
    }

    .booking-calendar-head {
        margin-bottom: 5px !important;
    }

    .booking-calendar-day,
    .booking-calendar-empty {
        min-height: 23px !important;
        font-size: 11px !important;
    }

    .booking-time-status {
        margin: 5px 0 !important;
    }

    .booking-step-panel .booking-times {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    .booking-step-panel .booking-time {
        min-height: 32px !important;
        padding: 6px 5px !important;
        font-size: 11px !important;
    }

    .booking-fields input,
    .booking-date {
        min-height: 38px !important;
    }

    .booking-step-title h3 {
        font-size: 20px !important;
    }

    .booking-step-title p {
        font-size: 11px !important;
    }
}


/* Home (programs + membership + booking): one continuous flow background + vertical rhythm */
.programs-membership-flow .booking-section {
    background: transparent !important;
    overflow: visible !important;
    min-height: 0 !important;
    display: block !important;
    align-items: unset !important;
    padding: clamp(72px, 7.5vw, 120px) 0 clamp(80px, 8vw, 128px) !important;
}

.programs-membership-flow .booking-section::before {
    display: none !important;
}

@media (min-width: 761px) {
    .programs-membership-flow .booking-section-intro {
        margin-bottom: clamp(10px, 1.3vw, 18px) !important;
    }
}

@media (max-width: 760px) {
    .programs-membership-flow .booking-section {
        padding: clamp(40px, 10vw, 64px) 0 clamp(44px, 10vw, 72px) !important;
    }

    .programs-membership-flow .booking-section-intro {
        margin-bottom: clamp(24px, 6vw, 44px) !important;
    }
}



/* =========================================================
   Final dashboard + booking polish
   - no red circle behind booking step icons
   - all/trainer filters work visually
   - footer buttons always visible in mobile dashboard
   - larger responsive dashboard table on desktop
========================================================= */

/* Booking progress: icons only, no circle/background even when completed */
.booking-progress-icon,
.booking-progress-item.is-active .booking-progress-icon,
.booking-progress-item.is-done .booking-progress-icon,
.booking-progress-check {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 20px !important;
    height: 20px !important;
    color: currentColor !important;
}

.booking-progress-item.is-done .booking-progress-icon {
    color: #ffffff !important;
}

.booking-progress-icon svg,
.booking-progress-item.is-active .booking-progress-icon svg,
.booking-progress-item.is-done .booking-progress-icon svg {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.booking-progress-tick {
    fill: currentColor !important;
    stroke: none !important;
}

/* Dashboard trainer filters */
.dashboard-app-trainers {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
}

.dashboard-app-trainers::-webkit-scrollbar {
    display: none !important;
}

.dashboard-app-trainers .dashboard-trainer-filter {
    flex: 0 0 auto !important;
}

.dashboard-app-trainers .dashboard-trainer-filter.is-active {
    border-color: color-mix(in srgb, var(--trainer-color, #de242f) 72%, rgba(255,255,255,0.16)) !important;
    background:
        radial-gradient(circle at 24% 0%, rgba(255,255,255,0.16), transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--trainer-color, #de242f) 38%, transparent), rgba(255,255,255,0.035)) !important;
}

/* Dashboard: keep footer inside view and table takes remaining space */
.dashboard-app-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.dashboard-app-header,
.dashboard-top-bar,
.dashboard-calendar-panel,
.dashboard-service-legend,
.dashboard-app-date,
.dashboard-app-trainers,
.dashboard-app-footer {
    flex: 0 0 auto !important;
}

.dashboard-app-timeline-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.dashboard-app-footer {
    display: flex !important;
    justify-content: flex-end !important;
    padding: 8px 16px 10px !important;
}

/* Desktop: make dashboard/table bigger and more useful */
@media (min-width: 1024px) {
    .dashboard-app-page {
        padding: 16px !important;
    }

    .dashboard-app-card {
        width: min(100%, 1440px) !important;
        height: calc(100dvh - 32px) !important;
        border-radius: 30px !important;
    }

    .dashboard-app-header {
        padding: 18px 28px 14px !important;
    }

    .dashboard-app-logo,
    .dashboard-app-logo-img {
        max-width: 132px !important;
        max-height: 42px !important;
    }

    .dashboard-app-header h1 {
        font-size: 36px !important;
    }

    .dashboard-app-date {
        padding: 14px 28px !important;
    }

    .dashboard-app-date strong {
        font-size: 22px !important;
    }

    .dashboard-app-date small {
        font-size: 13px !important;
    }

    .dashboard-app-trainers {
        padding: 14px 28px !important;
        max-height: 58px !important;
    }

    .dashboard-app-trainers .dashboard-trainer-filter {
        padding: 8px 16px 8px 9px !important;
        font-size: 13px !important;
    }

    .dashboard-app-trainers .dashboard-trainer-filter i {
        width: 26px !important;
        height: 26px !important;
        font-size: 11px !important;
    }

    .dashboard-app-single-timeline,
    .dashboard-app-timeline {
        min-width: 100% !important;
    }

    .dashboard-app-single-timeline .dashboard-app-row,
    .dashboard-app-timeline .dashboard-app-row {
        grid-template-columns: 70px minmax(0, 1fr) !important;
        min-height: 68px !important;
    }

    .dashboard-app-single-timeline .dashboard-app-head-row,
    .dashboard-app-timeline .dashboard-app-head-row {
        min-height: 44px !important;
    }

    .dashboard-app-time {
        padding: 14px 14px !important;
        font-size: 12px !important;
    }

    .dashboard-app-staff-head {
        padding: 12px 14px !important;
        font-size: 14px !important;
    }

    .dashboard-app-staff-col {
        padding: 8px 10px !important;
    }

    .dashboard-app-booking {
        padding: 10px 12px !important;
        border-radius: 14px !important;
    }

    .dashboard-app-booking strong {
        font-size: 13px !important;
    }

    .dashboard-app-booking span,
    .dashboard-app-booking small {
        font-size: 12px !important;
    }

    .dashboard-app-footer {
        padding: 10px 28px 14px !important;
    }

    .dashboard-app-footer a {
        min-height: 36px !important;
        font-size: 12px !important;
        padding: 0 14px !important;
    }
}

/* Mobile: compact but footer buttons remain visible */
@media (max-width: 760px) {
    .dashboard-app-card {
        height: calc(100dvh - 10px) !important;
    }

    .dashboard-app-footer {
        padding: 5px 10px 6px !important;
        gap: 6px !important;
    }

    .dashboard-app-footer a {
        min-height: 27px !important;
        font-size: 9.5px !important;
        padding: 0 8px !important;
    }

    .dashboard-app-timeline-wrap {
        overflow: auto !important;
    }

    .booking-progress-icon,
    .booking-progress-item.is-active .booking-progress-icon,
    .booking-progress-item.is-done .booking-progress-icon {
        width: 18px !important;
        height: 18px !important;
    }
}



/* =========================================================
   Final spacing + dashboard fit/width fix
   - Confirm form spacing
   - Mobile dashboard footer visible
   - Dashboard title left / logo right
   - Bigger desktop dashboard + booking table
========================================================= */

/* Confirm panel: space between fields and Confirm Booking button */
.booking-panel-view[data-booking-view="confirm"] .booking-fields {
    margin-bottom: 18px !important;
}

.booking-panel-view[data-booking-view="confirm"] .booking-submit {
    margin-top: 6px !important;
}

.booking-panel-view[data-booking-view="confirm"] .booking-message {
    margin-top: 12px !important;
}

/* Dashboard header: eyebrow + title left | logo center | alerts icon right */
.dashboard-app-header {
    position: relative !important;
    text-align: left !important;
    overflow: visible !important;
}

.dashboard-app-header-inner {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    grid-template-areas: "dashlead dashlogo dashalerts" !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.dashboard-app-header-lead {
    grid-area: dashlead !important;
    justify-self: start !important;
    align-self: center !important;
    min-width: 0 !important;
    text-align: left !important;
}

.dashboard-app-header-lead p {
    margin: 0 0 2px !important;
}

.dashboard-app-header-lead h1,
.dashboard-app-header h1 {
    margin: 0 !important;
}

.dashboard-app-header .dashboard-app-logo {
    grid-area: dashlogo !important;
    justify-self: center !important;
    align-self: center !important;
}

/* Alerts: icon only */
.dashboard-app-header .dashboard-inbox-btn {
    grid-area: dashalerts !important;
    justify-self: end !important;
    align-self: center !important;
    position: relative !important;
    overflow: visible !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: clamp(44px, 11vw, 52px) !important;
    height: clamp(44px, 11vw, 52px) !important;
    min-width: clamp(44px, 11vw, 52px) !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    cursor: pointer !important;
    font-size: 0 !important;
    line-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: transform 0.15s ease, opacity 0.15s ease !important;
}

.dashboard-app-header .dashboard-inbox-btn:hover {
    transform: translateY(-1px) !important;
    opacity: 0.92 !important;
    box-shadow: none !important;
}

.dashboard-app-header .dashboard-inbox-icon {
    flex-shrink: 0 !important;
    width: clamp(22px, 6vw, 26px) !important;
    height: clamp(22px, 6vw, 26px) !important;
    opacity: 1 !important;
}

.dashboard-app-header .dashboard-inbox-badge {
    position: absolute !important;
    top: -5px !important;
    right: -4px !important;
    min-width: 19px !important;
    height: 19px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    background: #de242f !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 19px !important;
    text-align: center !important;
    box-shadow: 0 0 0 2px #08080c !important;
}

.dashboard-app-header .dashboard-inbox-badge[hidden] {
    display: none !important;
}

.dashboard-app-header .dashboard-inbox-badge.is-visible {
    display: inline-block !important;
}

.dashboard-app-header .dashboard-inbox-dropdown {
    position: absolute !important;
    z-index: 100 !important;
    right: 0 !important;
    top: calc(100% + 6px) !important;
    left: auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(400px, calc(100vw - 32px)) !important;
    max-height: min(72vh, 480px) !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-radius: 16px !important;
    background: rgba(17, 24, 39, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f3f4f6 !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.dashboard-app-header .dashboard-inbox-dropdown-head {
    padding: 10px 10px 10px 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex-shrink: 0 !important;
}

.dashboard-app-header .dashboard-inbox-dropdown-head-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-width: 0 !important;
}

.dashboard-app-header .dashboard-inbox-dropdown-title {
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: rgba(243, 244, 246, 0.65) !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.dashboard-app-header .dashboard-inbox-close {
    flex-shrink: 0 !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: inline-grid !important;
    place-items: center !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.dashboard-app-header .dashboard-inbox-close:hover {
    background: rgba(222, 36, 47, 0.28) !important;
    color: #fff !important;
}

.dashboard-app-header .dashboard-inbox-list {
    flex: 1 !important;
    min-height: 0 !important;
    max-height: min(52vh, 320px) !important;
    overflow-y: auto !important;
    padding: 8px 14px 12px !important;
}

.dashboard-app-header .dashboard-inbox-item {
    padding: 12px 2px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.dashboard-app-header .dashboard-inbox-item:last-child {
    border-bottom: none !important;
}

/* Unread: light tint; cleared when row gets .is-read (after tap) */
.dashboard-app-header .dashboard-inbox-item:not(.is-read):not(.dashboard-inbox-item-loading) {
    background: color-mix(in srgb, var(--service-color, #de242f) 12%, transparent) !important;
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--service-color, #de242f) 85%, transparent) !important;
    border-radius: 8px !important;
}

.dashboard-app-header .dashboard-inbox-item.is-read {
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

.dashboard-app-header .dashboard-inbox-item-clickable {
    cursor: pointer !important;
    border-radius: 12px !important;
    margin-left: -6px !important;
    margin-right: -6px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    transition: background 0.12s ease !important;
}

.dashboard-app-header .dashboard-inbox-item-clickable:not(.is-read):hover {
    background: color-mix(in srgb, var(--service-color, #de242f) 18%, transparent) !important;
}

.dashboard-app-header .dashboard-inbox-item-clickable.is-read:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

.dashboard-app-header .dashboard-inbox-item-clickable:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--service-color, #de242f) 70%, transparent) !important;
    outline-offset: 2px !important;
}

.dashboard-app-header .dashboard-inbox-item-meta {
    font-size: 12px !important;
    color: rgba(243, 244, 246, 0.55) !important;
    margin-bottom: 6px !important;
}

.dashboard-app-header .dashboard-inbox-item-msg {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #f9fafb !important;
    line-height: 1.4 !important;
}

.dashboard-app-header .dashboard-inbox-empty {
    margin: 16px 0 !important;
    font-size: 15px !important;
    color: rgba(243, 244, 246, 0.55) !important;
    text-align: center !important;
}

.dashboard-app-header .dashboard-inbox-footer {
    flex-shrink: 0 !important;
    padding: 10px 14px 14px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(0, 0, 0, 0.2) !important;
}

.dashboard-app-header .dashboard-inbox-clear {
    width: 100% !important;
    margin: 0 !important;
    padding: 11px 14px !important;
    border-radius: 11px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
}

.dashboard-app-header .dashboard-inbox-clear:hover {
    background: rgba(222, 36, 47, 0.2) !important;
    border-color: rgba(222, 36, 47, 0.45) !important;
}

.dashboard-app-header .dashboard-inbox-dropdown[hidden],
.dashboard-top-bar .dashboard-inbox-dropdown[hidden] {
    display: none !important;
}

.dashboard-app-header .dashboard-inbox-dropdown.is-open,
.dashboard-top-bar .dashboard-inbox-dropdown.is-open {
    display: flex !important;
}

/* Alerts open: header + dropdown above date row (calendar trigger uses z-index ~100002) */
body.dashboard-notify-open .dashboard-app-header,
body.dashboard-notify-open .dashboard-top-bar {
    z-index: 200000 !important;
}

body.dashboard-notify-open .dashboard-app-header .dashboard-inbox-dropdown,
body.dashboard-notify-open .dashboard-top-bar .dashboard-inbox-dropdown {
    z-index: 200001 !important;
}

.dashboard-app-header .dashboard-inbox-item-sub {
    margin: 4px 0 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: rgba(243, 244, 246, 0.82) !important;
    line-height: 1.35 !important;
}

.dashboard-app-date-controls a[data-dashboard-day-nav] {
    -webkit-tap-highlight-color: transparent !important;
}

.dashboard-app-date-controls a[data-dashboard-day-nav],
.dashboard-app-date-controls a[data-dashboard-day-nav]:hover,
.dashboard-app-date-controls a[data-dashboard-day-nav]:focus,
.dashboard-app-date-controls a[data-dashboard-day-nav]:focus-visible {
    transform: none !important;
    background: rgba(255, 255, 255, 0.045) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    box-shadow: none !important;
    color: #fff !important;
    outline: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .dashboard-app-date-controls a[data-dashboard-day-nav]:hover {
        background: rgba(222, 36, 47, 0.24) !important;
        border-color: rgba(222, 36, 47, 0.44) !important;
    }
}

.dashboard-app-date-controls a[data-dashboard-day-nav]:active {
    background: rgba(222, 36, 47, 0.34) !important;
    border-color: rgba(222, 36, 47, 0.62) !important;
    box-shadow: 0 0 0 2px rgba(222, 36, 47, 0.2) !important;
    color: #fff !important;
}

/* Make dashboard logo a bit bigger */
.dashboard-app-logo {
    max-width: 145px !important;
    min-width: 92px !important;
    min-height: 46px !important;
}

.dashboard-app-logo-img {
    max-width: 145px !important;
    max-height: 52px !important;
}

/* Ensure the whole mobile app fits including footer buttons */
body.dashboard-app-body {
    overflow: hidden !important;
}

.dashboard-app-page {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
}

.dashboard-app-card {
    height: calc(100dvh - 10px) !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.dashboard-app-header,
.dashboard-top-bar,
.dashboard-calendar-panel,
.dashboard-service-legend,
.dashboard-app-date,
.dashboard-app-trainers,
.dashboard-app-footer {
    flex: 0 0 auto !important;
}

.dashboard-app-timeline-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
}

/* Keep footer visible */
.dashboard-app-footer {
    display: flex !important;
    flex: 0 0 auto !important;
    padding: 6px 12px 7px !important;
    gap: 8px !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}

.dashboard-app-footer a {
    min-height: 30px !important;
    font-size: 10.5px !important;
    padding: 0 10px !important;
}

/* More desktop width for dashboard app */
@media (min-width: 1024px) {
    .dashboard-app-page {
        padding: 18px !important;
    }

    .dashboard-app-card {
        width: min(100%, 1600px) !important;
        max-width: 1600px !important;
        height: calc(100dvh - 36px) !important;
    }

    .dashboard-app-header {
        padding: 22px 36px 16px !important;
    }

    .dashboard-app-logo {
        max-width: 170px !important;
        min-width: 130px !important;
    }

    .dashboard-app-logo-img {
        max-width: 170px !important;
        max-height: 60px !important;
    }

    .dashboard-app-date,
    .dashboard-app-trainers {
        padding-left: 36px !important;
        padding-right: 36px !important;
    }

    .dashboard-app-single-timeline .dashboard-app-row,
    .dashboard-app-timeline .dashboard-app-row {
        grid-template-columns: 78px minmax(0, 1fr) !important;
        min-height: 76px !important;
    }

    .dashboard-app-single-timeline .dashboard-app-head-row,
    .dashboard-app-timeline .dashboard-app-head-row {
        min-height: 48px !important;
    }

    .dashboard-app-booking {
        max-width: 760px !important;
    }
}

/* Desktop WP admin booking page/table wider and cleaner */
@media (min-width: 1200px) {
    .pr1-booking-wrap {
        max-width: 1600px !important;
    }

    .pr1-booking-table-wrap table {
        min-width: 1280px !important;
    }

    .pr1-booking-grid {
        grid-template-columns: repeat(4, minmax(180px, 1fr)) !important;
    }
}

/* Mobile compact dashboard: keep buttons visible */
@media (max-width: 760px) {
    .dashboard-app-page {
        padding: 4px !important;
    }

    .dashboard-app-card {
        height: calc(100dvh - 8px) !important;
        border-radius: 18px !important;
    }

    .dashboard-app-header {
        padding: 8px 10px 6px !important;
        column-gap: 10px !important;
    }

    .dashboard-app-logo {
        max-width: 105px !important;
        min-width: 82px !important;
        min-height: 32px !important;
    }

    .dashboard-app-logo-img {
        max-width: 105px !important;
        max-height: 36px !important;
    }

    .dashboard-app-header p {
        font-size: 8.5px !important;
        line-height: 1 !important;
    }

    .dashboard-app-header h1 {
        font-size: 19px !important;
        line-height: 1 !important;
    }

    .dashboard-app-header .dashboard-inbox-dropdown.is-open {
        right: 0 !important;
        left: auto !important;
        transform: none !important;
        width: min(380px, calc(100vw - 20px)) !important;
    }

    /* Keep badge inside button bounds — avoids clipping under overflow:hidden card chrome */
    .dashboard-app-header .dashboard-inbox-badge {
        top: 2px !important;
        right: 2px !important;
    }

    .dashboard-app-date {
        padding: 6px 10px !important;
    }

    .dashboard-app-date strong {
        font-size: 12.5px !important;
    }

    .dashboard-app-date small {
        font-size: 8.5px !important;
    }

    .dashboard-app-trainers {
        padding: 5px 10px !important;
        max-height: 34px !important;
    }

    .dashboard-app-row {
        min-height: 36px !important;
        grid-template-columns: 40px minmax(0, 1fr) !important;
    }

    .dashboard-app-head-row {
        min-height: 28px !important;
    }

    .dashboard-app-time {
        padding: 6px 5px !important;
        font-size: 8px !important;
    }

    .dashboard-app-staff-head {
        padding: 5px !important;
        font-size: 9px !important;
    }

    .dashboard-app-staff-col {
        padding: 3px !important;
    }

    .dashboard-app-booking {
        padding: 4px 5px !important;
        border-radius: 8px !important;
        margin-bottom: 3px !important;
    }

    .dashboard-app-booking strong {
        font-size: 8.5px !important;
    }

    .dashboard-app-booking span,
    .dashboard-app-booking small {
        font-size: 7.5px !important;
        margin-top: 1px !important;
    }

    .dashboard-app-footer {
        padding: 4px 10px 5px !important;
        gap: 6px !important;
    }

    .dashboard-app-footer a {
        min-height: 25px !important;
        font-size: 9px !important;
        padding: 0 8px !important;
    }
}

@media (max-width: 390px) {
    .dashboard-app-header h1 {
        font-size: 17px !important;
    }

    .dashboard-app-logo,
    .dashboard-app-logo-img {
        max-width: 92px !important;
        max-height: 30px !important;
    }

    .dashboard-app-date-controls a,
    .dashboard-app-calendar-trigger {
        width: 24px !important;
        height: 24px !important;
    }

    .dashboard-app-trainers {
        max-height: 31px !important;
    }

    .dashboard-app-trainers .dashboard-trainer-filter {
        padding: 3px 7px 3px 5px !important;
        font-size: 8px !important;
    }

    .dashboard-app-trainers .dashboard-trainer-filter i {
        width: 16px !important;
        height: 16px !important;
        font-size: 7px !important;
    }

    .dashboard-app-row {
        min-height: 32px !important;
    }

    .dashboard-app-head-row {
        min-height: 25px !important;
    }
}



/* =========================================================
   Dashboard date/filter/footer fix + booking contact/services fix
========================================================= */

/* Dashboard app should never hide footer buttons on mobile */
body.dashboard-app-body {
    overflow: hidden !important;
}

.admin-bar .dashboard-app-page {
    height: calc(100dvh - 46px) !important;
    min-height: calc(100dvh - 46px) !important;
}

@media (min-width: 783px) {
    .admin-bar .dashboard-app-page {
        height: calc(100dvh - 32px) !important;
        min-height: calc(100dvh - 32px) !important;
    }
}

.dashboard-app-page {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    padding: 4px !important;
}

.dashboard-app-card {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto 1fr auto !important;
    overflow: hidden !important;
}

.dashboard-app-header,
.dashboard-app-date,
.dashboard-app-footer {
    min-height: 0 !important;
}

/* Header compact enough so footer is visible */
.dashboard-app-header {
    padding: 7px 10px 5px !important;
}

.dashboard-app-logo,
.dashboard-app-logo-img {
    max-width: 104px !important;
    max-height: 34px !important;
}

.dashboard-app-header h1 {
    font-size: 18px !important;
}

.dashboard-app-header p {
    font-size: 8.5px !important;
}

/* Date row: one row = date | trainers | calendar; desktop @media (min-width: 761px); mobile @media max-width 760 */
.dashboard-app-date {
    display: grid !important;
    position: relative !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 10px !important;
}

.dashboard-app-date strong {
    font-size: 13px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
}

.dashboard-app-date small {
    font-size: 8.5px !important;
    line-height: 1.1 !important;
}

.dashboard-app-date-controls {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    position: relative !important;
    min-width: 0 !important;
}

.dashboard-app-date-controls a,
.dashboard-app-calendar-trigger {
    width: 26px !important;
    height: 26px !important;
}

/* Trainer pills (both rows): horizontal strip */
.dashboard-app-date-trainers {
    padding: 0 !important;
    border: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    scrollbar-width: none !important;
}

.dashboard-app-date-trainers::-webkit-scrollbar {
    display: none !important;
}

/* Desktop / tablet: date left | trainers center | calendar right */
@media (min-width: 761px) {
    .dashboard-app-date {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
        grid-template-areas: "dashdate dashtrainers dashcontrols" !important;
    }

    .dashboard-date-center,
    .dashboard-date-fixed {
        grid-area: dashdate !important;
        justify-self: start !important;
        text-align: left !important;
        min-width: 0 !important;
    }

    .dashboard-app-date-trainers,
    .dashboard-service-filters-wrap {
        grid-area: dashtrainers !important;
        justify-self: center !important;
        justify-content: center !important;
        width: auto !important;
        max-width: 100% !important;
    }

    .dashboard-app-date-controls {
        grid-area: dashcontrols !important;
        justify-self: end !important;
    }
}

/* Timeline: footer included in view */
.dashboard-app-timeline-wrap {
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    overflow: auto !important;
}

.dashboard-app-timeline {
    --dash-row-h: 34px;
    --dash-head-h: 27px;
    min-width: 100% !important;
}

.dashboard-app-row {
    min-height: var(--dash-row-h) !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
}

.dashboard-app-head-row {
    min-height: var(--dash-head-h) !important;
}

.dashboard-app-time {
    padding: 6px 5px !important;
    font-size: 8px !important;
}

.dashboard-app-staff-head {
    padding: 5px !important;
    font-size: 9px !important;
}

.dashboard-app-staff-col {
    padding: 3px !important;
}

.dashboard-app-booking {
    padding: 4px 5px !important;
    border-radius: 8px !important;
    margin-bottom: 3px !important;
}

.dashboard-app-booking strong {
    font-size: 8.5px !important;
    line-height: 1.05 !important;
}

.dashboard-app-booking span,
.dashboard-app-booking small {
    font-size: 7.5px !important;
    line-height: 1.05 !important;
    margin-top: 1px !important;
}

/* Correct current-time line for each responsive row height */
.dashboard-app-now-line {
    top: calc(var(--dash-head-h) + (var(--elapsed-hours) * var(--dash-row-h))) !important;
}

/* Footer always visible */
.dashboard-app-footer {
    display: flex !important;
    flex: 0 0 auto !important;
    padding: 4px 10px 5px !important;
    gap: 6px !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    min-height: 34px !important;
}

.dashboard-app-footer a {
    min-height: 24px !important;
    font-size: 9px !important;
    padding: 0 8px !important;
    border-radius: 9px !important;
}

/* Desktop: same row, bigger table, filters left/date center/calendar right */
@media (min-width: 1024px) {
    .dashboard-app-page {
        padding: 14px !important;
    }

    .dashboard-app-card {
        width: min(100%, 1680px) !important;
        max-width: 1680px !important;
        margin-inline: auto !important;
        border-radius: 30px !important;
    }

    .dashboard-app-header {
        padding: 18px 34px 14px !important;
    }

    .dashboard-app-logo,
    .dashboard-app-logo-img {
        max-width: 176px !important;
        max-height: 62px !important;
    }

    .dashboard-app-header h1 {
        font-size: 38px !important;
    }

    .dashboard-app-date {
        padding: 12px 34px !important;
        grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr) !important;
        grid-template-areas: "dashdate dashtrainers dashcontrols" !important;
    }

    .dashboard-app-date strong {
        font-size: 22px !important;
    }

    .dashboard-app-date small {
        font-size: 13px !important;
    }

    .dashboard-app-date-controls a,
    .dashboard-app-calendar-trigger {
        width: 38px !important;
        height: 38px !important;
    }

    .dashboard-app-date-trainers {
        max-height: 42px !important;
        gap: 8px !important;
    }

    .dashboard-app-date-trainers .dashboard-trainer-filter {
        padding: 12px 26px !important;
        font-size: 17px !important;
    }

    .dashboard-app-timeline {
        --dash-row-h: 70px;
        --dash-head-h: 48px;
        min-width: 100% !important;
    }

    .dashboard-app-row {
        grid-template-columns: 78px minmax(0, 1fr) !important;
    }

    .dashboard-app-time {
        padding: 14px !important;
        font-size: 12px !important;
    }

    .dashboard-app-staff-head {
        padding: 14px !important;
        font-size: 14px !important;
    }

    .dashboard-app-staff-col {
        padding: 8px 10px !important;
    }

    .dashboard-app-booking {
        max-width: 880px !important;
        padding: 11px 13px !important;
        border-radius: 14px !important;
    }

    .dashboard-app-booking strong {
        font-size: 13px !important;
    }

    .dashboard-app-booking span,
    .dashboard-app-booking small {
        font-size: 12px !important;
        margin-top: 4px !important;
    }

    .dashboard-app-footer {
        padding: 10px 34px 14px !important;
        min-height: 50px !important;
    }

    .dashboard-app-footer a {
        min-height: 36px !important;
        font-size: 12px !important;
        padding: 0 14px !important;
    }
}

/* Booking section contact strip: location + phone horizontal */
.booking-contact-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
    overflow: visible !important;
}

.booking-contact-strip span {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    overflow-wrap: anywhere !important;
}

.booking-contact-strip svg {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
}

/* Booking services preview: stacked horizontal rows on home panel */
.booking-home-services {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
}

@media (max-width: 390px) {
    .booking-home-intro .booking-home-service-sep {
        margin: 0 8px;
    }

    .booking-contact-strip {
        grid-template-columns: 1fr !important;
    }

    .booking-contact-strip span {
        font-size: 9px !important;
    }
}



/* =========================================================
   Contact strip + dashboard live time + typography polish
========================================================= */

/* Front booking contact: full address + icons (no single-line clipping) */
.booking-contact-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    overflow: visible !important;
}

.booking-contact-strip span {
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 2px !important;
    overflow-wrap: anywhere !important;
}

.booking-contact-strip svg {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
}

@media (max-width: 420px) {
    .booking-contact-strip {
        grid-template-columns: 1fr !important;
    }
}

/* Dashboard current-time line is controlled by device-time JS */
.dashboard-app-now-line {
    top: 0;
    display: none;
}

/* Make All / Trainer filters a bit bigger and prevent selected border clipping */
.dashboard-app-date,
.dashboard-app-trainers,
.dashboard-app-date-trainers {
    overflow: visible !important;
}

.dashboard-app-date-trainers {
    padding-block: 3px !important;
    max-height: none !important;
}

.dashboard-app-date-trainers .dashboard-trainer-filter,
.dashboard-app-trainers .dashboard-trainer-filter {
    padding: 9px 18px !important;
    font-size: 13.5px !important;
    border-width: 1px !important;
    transform: none !important;
}

.dashboard-app-trainers .dashboard-trainer-filter.is-active {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--trainer-color, #de242f) 48%, transparent),
        0 8px 18px color-mix(in srgb, var(--trainer-color, #de242f) 12%, transparent) !important;
    transform: none !important;
}

/* Slightly larger text inside dashboard table, without breaking fit */
.dashboard-app-time {
    font-size: 9px !important;
}

.dashboard-app-staff-head {
    font-size: 10px !important;
}

.dashboard-app-booking strong {
    font-size: 9.5px !important;
}

.dashboard-app-booking span,
.dashboard-app-booking small {
    font-size: 8.5px !important;
}

/* Desktop: larger filters and table typography */
@media (min-width: 1024px) {
    .dashboard-app-date-trainers .dashboard-trainer-filter,
    .dashboard-app-trainers .dashboard-trainer-filter {
        padding: 12px 26px !important;
        font-size: 17px !important;
    }

    .dashboard-app-time {
        font-size: 13px !important;
    }

    .dashboard-app-staff-head {
        font-size: 15px !important;
    }

    .dashboard-app-booking strong {
        font-size: 14px !important;
    }

    .dashboard-app-booking span,
    .dashboard-app-booking small {
        font-size: 12.5px !important;
    }
}

/* Mobile: keep filters centered and not clipped */
@media (max-width: 760px) {
    .dashboard-app-date {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }

    .dashboard-app-date-trainers {
        margin-top: 0 !important;
        padding: 2px 3px !important;
    }

    .dashboard-app-date-trainers .dashboard-trainer-filter,
    .dashboard-app-trainers .dashboard-trainer-filter {
        padding: 8px 16px !important;
        font-size: 12px !important;
    }

    .dashboard-app-time {
        font-size: 8.5px !important;
    }

    .dashboard-app-staff-head {
        font-size: 9.5px !important;
    }

    .dashboard-app-booking strong {
        font-size: 9px !important;
    }

    .dashboard-app-booking span,
    .dashboard-app-booking small {
        font-size: 8px !important;
    }

    .booking-contact-strip {
        gap: 6px !important;
    }

    .booking-contact-strip span {
        font-size: 9px !important;
    }
}



/* =========================================================
   Dashboard AJAX calendar + exact current-time line
========================================================= */

.dashboard-app-date-controls {
    position: relative !important;
}

.dashboard-app-date-controls form,
.dashboard-app-date-controls input[type="hidden"] {
    display: none !important;
}

.dashboard-app-calendar-trigger {
    cursor: pointer !important;
}

.dashboard-calendar-popover {
    position: absolute;
    top: 132px;
    right: 18px;
    z-index: 80;
    width: min(310px, calc(100vw - 26px));
    padding: 13px;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025)),
        #08080c;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 24px 80px rgba(0,0,0,0.48);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
}

.dashboard-calendar-popover.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.dashboard-calendar-head {
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.dashboard-calendar-head button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 11px;
    background: rgba(255,255,255,0.055);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
}

.dashboard-calendar-head strong {
    color: #fff;
    text-align: center;
    font-size: 14px;
}

.dashboard-calendar-weekdays,
.dashboard-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
}

.dashboard-calendar-weekdays {
    margin-bottom: 6px;
}

.dashboard-calendar-weekdays span {
    color: rgba(255,255,255,0.42);
    font-size: 10px;
    font-weight: 900;
    text-align: center;
}

.dashboard-calendar-empty,
.dashboard-calendar-day {
    min-height: 32px;
}

.dashboard-calendar-day {
    position: relative;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: rgba(255,255,255,0.78);
    font-weight: 900;
    cursor: pointer;
}

.dashboard-calendar-day:hover,
.dashboard-calendar-day.is-selected {
    background: rgba(222,36,47,0.22);
    color: #fff;
}

/* Days with bookings: subtle dot (no "!" badge) */
.dashboard-calendar-day.has-booking::after {
    content: "" !important;
    position: absolute !important;
    bottom: 4px !important;
    right: 4px !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #de242f !important;
    box-shadow: 0 0 0 1px rgba(8, 8, 12, 0.9) !important;
}

.dashboard-app-now-line {
    top: 0;
    display: none;
}

@media (min-width: 1024px) {
    .dashboard-calendar-popover {
        top: 150px;
        right: 34px;
    }
}

@media (max-width: 760px) {
    .dashboard-calendar-popover {
        top: 108px;
        left: 50%;
        right: auto;
        transform: translate(-50%, -8px) scale(0.98);
        width: min(286px, calc(100vw - 18px));
        padding: 10px;
        border-radius: 17px;
    }

    .dashboard-calendar-popover.is-open {
        transform: translate(-50%, 0) scale(1);
    }

    .dashboard-calendar-empty,
    .dashboard-calendar-day {
        min-height: 28px;
        font-size: 12px;
    }
}



/* =========================================================
   Dashboard v2 AJAX / calendar / cancel / manual booking
========================================================= */

.dashboard-app-date-controls {
    position: relative !important;
}

.dashboard-app-calendar-trigger {
    border: 1px solid rgba(255,255,255,0.09) !important;
    background: rgba(255,255,255,0.045) !important;
    color: #fff !important;
    cursor: pointer !important;
}

.dashboard-calendar-popover {
    position: absolute;
    top: 128px;
    right: 18px;
    z-index: 200;
    width: min(310px, calc(100vw - 24px));
    padding: 12px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025)),
        #08080c;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 24px 80px rgba(0,0,0,0.52);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.98);
    transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
}

.dashboard-calendar-popover.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.dashboard-calendar-head {
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.dashboard-calendar-head button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 11px;
    background: rgba(255,255,255,0.055);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}

.dashboard-calendar-head strong {
    text-align: center;
    color: #fff;
    font-size: 14px;
}

.dashboard-calendar-weekdays,
.dashboard-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
}

.dashboard-calendar-weekdays {
    margin-bottom: 6px;
}

.dashboard-calendar-weekdays span {
    color: rgba(255,255,255,0.42);
    font-size: 10px;
    font-weight: 900;
    text-align: center;
}

.dashboard-calendar-empty,
.dashboard-calendar-day {
    min-height: 31px;
}

.dashboard-calendar-day {
    position: relative;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: rgba(255,255,255,0.78);
    font-weight: 900;
    cursor: pointer;
}

.dashboard-calendar-day:hover,
.dashboard-calendar-day.is-selected {
    background: rgba(222,36,47,0.22);
    color: #fff;
}

.dashboard-app-now-line {
    --dash-row-h: 34px;
    --dash-head-h: 27px;
}

.dashboard-app-now-line {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: #de242f !important;
    z-index: 999 !important;
    box-shadow: 0 0 18px rgba(222,36,47,.48) !important;
    pointer-events: none !important;
    display: none;
}

.dashboard-app-now-line::before {
    content: "" !important;
    position: absolute !important;
    left: 6px !important;
    top: 50% !important;
    width: 10px !important;
    height: 10px !important;
    transform: translateY(-50%) !important;
    border-radius: 50% !important;
    background: #de242f !important;
}

.dashboard-app-booking {
    position: relative !important;
    padding-right: 26px !important;
}

.dashboard-booking-cancel {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    width: 18px !important;
    height: 18px !important;
    border: 0 !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(0,0,0,0.28) !important;
    color: #fff !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

.dashboard-manual-panel {
    position: absolute;
    inset: 10px;
    z-index: 180;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.42);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.dashboard-manual-panel.is-open {
    display: flex;
}

.dashboard-manual-form {
    width: min(100%, 420px);
    max-height: calc(100dvh - 60px);
    overflow: auto;
    display: grid;
    gap: 9px;
    padding: 18px;
    border-radius: 22px;
    background: #09090d;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 24px 80px rgba(0,0,0,0.50);
}

.dashboard-manual-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-manual-head strong {
    color: #fff;
    font-size: 20px;
}

.dashboard-manual-head button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: #fff;
    cursor: pointer;
}

.dashboard-manual-form label {
    color: rgba(255,255,255,0.70);
    font-size: 12px;
    font-weight: 800;
}

.dashboard-manual-form input,
.dashboard-manual-form select {
    width: 100%;
    min-height: 38px;
    margin-top: 4px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.055);
    color: #fff;
    padding: 0 10px;
}

.dashboard-manual-form button[type="submit"] {
    min-height: 40px;
    border: 0;
    border-radius: 12px;
    background: #de242f;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

.dashboard-manual-form p {
    min-height: 18px;
    margin: 0;
    color: #de242f;
    font-size: 12px;
}

.dashboard-app-footer button {
    min-height: 24px;
    display: inline-grid;
    place-items: center;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.09);
    background: #de242f;
    color: #fff;
    font-weight: 900;
    padding: 0 8px;
    font-size: 9px;
    cursor: pointer;
}

@media (min-width: 1024px) {
    .dashboard-app-timeline {
        --dash-row-h: 70px;
        --dash-head-h: 48px;
    }

    .dashboard-calendar-popover {
        top: 150px;
        right: 34px;
    }

    .dashboard-app-footer button {
        min-height: 36px;
        font-size: 12px;
        padding: 0 14px;
    }
}

@media (max-width: 760px) {
    .dashboard-calendar-popover {
        top: 106px;
        left: 50%;
        right: auto;
        width: min(286px, calc(100vw - 18px));
        padding: 10px;
        border-radius: 17px;
        transform: translate(-50%, -8px) scale(.98);
    }

    .dashboard-calendar-popover.is-open {
        transform: translate(-50%, 0) scale(1);
    }

    .dashboard-calendar-empty,
    .dashboard-calendar-day {
        min-height: 27px;
        font-size: 12px;
    }

    .dashboard-app-footer {
        gap: 5px !important;
    }

    .dashboard-app-footer button,
    .dashboard-app-footer a {
        font-size: 8.5px !important;
        padding: 0 6px !important;
    }
}



/* =========================================================
   Dashboard working JS layout fix
========================================================= */

.dashboard-app-date {
    position: relative !important;
}

.dashboard-app-date-controls {
    position: relative !important;
    z-index: 12 !important;
}

.dashboard-calendar-popover {
    z-index: 9999 !important;
}

.dashboard-app-now-line {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: #de242f !important;
    z-index: 999 !important;
    display: none;
    box-shadow: 0 0 18px rgba(222,36,47,0.55) !important;
}

.dashboard-app-now-line::before {
    content: "" !important;
    position: absolute !important;
    left: 6px !important;
    top: 50% !important;
    width: 10px !important;
    height: 10px !important;
    transform: translateY(-50%) !important;
    border-radius: 50% !important;
    background: #de242f !important;
}

@media (max-width: 760px) {
    .dashboard-app-date {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-areas: "dashdate dashtrainers dashcontrols" !important;
        align-items: center !important;
        column-gap: 6px !important;
        row-gap: 0 !important;
    }

    .dashboard-date-center,
    .dashboard-date-fixed {
        grid-area: dashdate !important;
        justify-self: start !important;
        text-align: left !important;
        min-width: 0 !important;
    }

    .dashboard-app-date-trainers,
    .dashboard-service-filters-wrap {
        grid-area: dashtrainers !important;
        justify-self: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        max-width: min(100%, 46vw) !important;
        margin-top: 0 !important;
        transform: none !important;
        left: auto !important;
    }

    .dashboard-app-date-controls {
        grid-area: dashcontrols !important;
        justify-self: end !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-shrink: 0 !important;
        gap: 4px !important;
        z-index: 20 !important;
    }

    .dashboard-calendar-popover {
        top: 112px !important;
        right: 8px !important;
        left: auto !important;
        transform: translateY(-8px) scale(.98) !important;
    }

    .dashboard-calendar-popover.is-open {
        transform: translateY(0) scale(1) !important;
    }

    .dashboard-app-date-controls .dashboard-calendar-popover {
        top: calc(100% + 10px) !important;
        right: 0 !important;
        left: auto !important;
        width: min(286px, calc(100vw - 18px)) !important;
    }
}


/* =========================================================
   No-dependency dashboard JS final layout
========================================================= */

.dashboard-app-now-line {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: #de242f !important;
    z-index: 9999 !important;
    display: none;
    box-shadow: 0 0 18px rgba(222,36,47,0.55) !important;
}

.dashboard-app-now-line::before {
    content: "" !important;
    position: absolute !important;
    left: 6px !important;
    top: 50% !important;
    width: 10px !important;
    height: 10px !important;
    transform: translateY(-50%) !important;
    border-radius: 50% !important;
    background: #de242f !important;
}

.dashboard-calendar-popover {
    z-index: 99999 !important;
}


/* =========================================================
   Dashboard calendar click/open fix
========================================================= */

.dashboard-app-card {
    position: relative !important;
}

.dashboard-app-calendar-trigger {
    position: relative !important;
    z-index: 100002 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.dashboard-app-date-controls {
    position: relative !important;
    z-index: 100001 !important;
    pointer-events: auto !important;
}

.dashboard-calendar-popover {
    pointer-events: auto !important;
    z-index: 100000 !important;
}

.dashboard-calendar-popover.is-open {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.dashboard-calendar-head button,
.dashboard-calendar-day {
    pointer-events: auto !important;
}



/* =========================================================
   PHP calendar toggle + dashboard hover/icon polish
========================================================= */

.dashboard-calendar-toggle-state {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
}

.dashboard-calendar-popover-static {
    display: none !important;
}

.dashboard-calendar-toggle-state:checked ~ .dashboard-calendar-popover-inside-controls.is-open {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

@media (max-width: 760px) {
    .dashboard-calendar-toggle-state:checked ~ .dashboard-calendar-popover-inside-controls.is-open {
        transform: translateY(0) scale(1) !important;
    }
}

/* Calendar days now can be links too */
.dashboard-calendar-head a,
.dashboard-calendar-day {
    text-decoration: none !important;
}

.dashboard-calendar-head a {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 11px;
    background: rgba(255,255,255,0.055);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.dashboard-calendar-head a:hover,
.dashboard-app-date-controls a:not([data-dashboard-day-nav]):hover,
.dashboard-app-calendar-trigger:hover,
.dashboard-calendar-day:hover {
    background: rgba(222,36,47,0.24) !important;
    color: #fff !important;
    border-color: rgba(222,36,47,0.44) !important;
}

/* Make add booking form browser icons white */
.dashboard-manual-form input,
.dashboard-manual-form select {
    color-scheme: dark !important;
}

.dashboard-manual-form input[type="date"]::-webkit-calendar-picker-indicator,
.dashboard-manual-form input[type="time"]::-webkit-calendar-picker-indicator,
.dashboard-manual-form select::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(2) !important;
    opacity: 1 !important;
}

.dashboard-manual-form select {
    appearance: auto !important;
    -webkit-appearance: menulist !important;
}

/* Hover feedback for manual/add/cancel/buttons */
.dashboard-app-footer button:hover,
.dashboard-app-footer a:hover,
.dashboard-manual-form button[type="submit"]:hover,
.dashboard-manual-head button:hover,
.dashboard-booking-cancel:hover {
    background: rgba(222,36,47,0.78) !important;
    color: #fff !important;
    border-color: rgba(222,36,47,0.55) !important;
}



/* =========================================================
   Dashboard final calendar/position/time visual fixes
========================================================= */

/* Date row placement: see @media (min-width: 761px) and mobile max-width rules */

/* Calendar opens without JS: checkbox is now sibling inside controls */
.dashboard-calendar-toggle-state {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.dashboard-app-date-controls .dashboard-calendar-popover {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;
    z-index: 999999 !important;
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-6px) scale(.98) !important;
}

.dashboard-app-date-controls .dashboard-calendar-toggle-state:checked ~ .dashboard-calendar-popover-inside-controls.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

.dashboard-app-calendar-trigger {
    user-select: none !important;
}

/* Button press feedback — skip day arrows so focus/touch does not stick red */
.dashboard-app-date-controls a:not([data-dashboard-day-nav]):hover,
.dashboard-app-date-controls a:not([data-dashboard-day-nav]):active,
.dashboard-app-date-controls a:not([data-dashboard-day-nav]):focus,
.dashboard-app-calendar-trigger:hover,
.dashboard-app-calendar-trigger:active,
.dashboard-app-calendar-trigger:focus,
.dashboard-calendar-head a:hover,
.dashboard-calendar-head a:active,
.dashboard-calendar-head a:focus {
    background: rgba(222,36,47,.28) !important;
    border-color: rgba(222,36,47,.55) !important;
    color: #fff !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(222,36,47,.18) !important;
}

/* Red current time line above content */
.dashboard-app-now-line {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: #de242f !important;
    z-index: 99999 !important;
    box-shadow: 0 0 18px rgba(222,36,47,.55) !important;
}

/* White browser icons in Add Booking */
.dashboard-manual-form input,
.dashboard-manual-form select {
    color-scheme: dark !important;
}

.dashboard-manual-form input[type="date"],
.dashboard-manual-form input[type="time"],
.dashboard-manual-form select {
    background-color: rgba(255,255,255,0.055) !important;
    color: #fff !important;
}

.dashboard-manual-form input[type="date"]::-webkit-calendar-picker-indicator,
.dashboard-manual-form input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(2.8) contrast(1.2) !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

/* Custom white chevron for select */
.dashboard-manual-form select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image:
        linear-gradient(45deg, transparent 50%, #fff 50%),
        linear-gradient(135deg, #fff 50%, transparent 50%) !important;
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 12px) 50% !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat !important;
    padding-right: 34px !important;
}

/* =========================================================
   Final dashboard calendar / fixed positions / white controls
========================================================= */

/* Bigger calendar */
.dashboard-calendar-popover {
    width: min(390px, calc(100vw - 20px)) !important;
    padding: 18px !important;
    border-radius: 24px !important;
}

.dashboard-calendar-head {
    grid-template-columns: 44px 1fr 44px !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
}

.dashboard-calendar-head a,
.dashboard-calendar-head button {
    width: 44px !important;
    height: 44px !important;
    font-size: 28px !important;
}

.dashboard-calendar-head strong {
    font-size: 18px !important;
}

.dashboard-calendar-weekdays,
.dashboard-calendar-grid {
    gap: 8px !important;
}

.dashboard-calendar-empty,
.dashboard-calendar-day {
    min-height: 42px !important;
}

.dashboard-calendar-day {
    display: grid !important;
    place-items: center !important;
    font-size: 15px !important;
}

/* (Desktop date row grid: see @media (min-width: 761px) near .dashboard-app-date-trainers) */

/* Click/press color for arrows/calendar */
.dashboard-app-date-controls a,
.dashboard-app-calendar-trigger,
.dashboard-calendar-head a {
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease !important;
}

/* Click/press color — exclude prev/next day links */
.dashboard-app-date-controls a:not([data-dashboard-day-nav]):hover,
.dashboard-app-date-controls a:not([data-dashboard-day-nav]):active,
.dashboard-app-date-controls a:not([data-dashboard-day-nav]):focus,
.dashboard-app-calendar-trigger:hover,
.dashboard-app-calendar-trigger:active,
.dashboard-app-calendar-trigger:focus,
.dashboard-calendar-head a:hover,
.dashboard-calendar-head a:active,
.dashboard-calendar-head a:focus {
    background: rgba(222,36,47,.34) !important;
    border-color: rgba(222,36,47,.62) !important;
    color: #fff !important;
    box-shadow: 0 0 0 2px rgba(222,36,47,.20) !important;
    transform: translateY(-1px) !important;
}

/* Keep modal panel above arrows/calendar */
.dashboard-manual-panel {
    z-index: 9999999 !important;
}

.dashboard-manual-panel.is-open {
    display: flex !important;
}

.dashboard-manual-form {
    z-index: 10000000 !important;
}

/* More aggressive white icons inside Add Booking */
.dashboard-manual-form input[type="date"],
.dashboard-manual-form input[type="time"] {
    color-scheme: dark !important;
    background-color: #18181d !important;
    color: #fff !important;
}

.dashboard-manual-form input[type="date"]::-webkit-calendar-picker-indicator,
.dashboard-manual-form input[type="time"]::-webkit-calendar-picker-indicator {
    background-color: transparent !important;
    color: #fff !important;
    filter: invert(1) brightness(4) contrast(2) !important;
    opacity: 1 !important;
}

.dashboard-manual-form select {
    color-scheme: dark !important;
    background-color: #18181d !important;
    color: #fff !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image:
        linear-gradient(45deg, transparent 50%, #fff 50%),
        linear-gradient(135deg, #fff 50%, transparent 50%) !important;
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 12px) 50% !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat !important;
}

/* DOM-based line always above rows */
.dashboard-app-now-line {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: #de242f !important;
    z-index: 999999 !important;
    box-shadow: 0 0 18px rgba(222,36,47,.60) !important;
}


/* =========================================================
   Final fixes: AJAX calendar click, live line, responsive add booking
========================================================= */

.dashboard-app-now-line {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: #de242f !important;
    z-index: 99999999 !important;
    box-shadow: 0 0 18px rgba(222,36,47,.70) !important;
    pointer-events: none !important;
}

.dashboard-app-now-line::before {
    content: "" !important;
    position: absolute !important;
    left: 6px !important;
    top: 50% !important;
    width: 10px !important;
    height: 10px !important;
    transform: translateY(-50%) !important;
    border-radius: 50% !important;
    background: #de242f !important;
}

/* Add Booking responsive panel */
.dashboard-manual-panel {
    padding: 12px !important;
    overflow: hidden !important;
}

.dashboard-manual-form {
    width: min(100%, 460px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 40px) !important;
    overflow: auto !important;
    box-sizing: border-box !important;
}

.dashboard-manual-form label {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.dashboard-manual-form input,
.dashboard-manual-form select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* White date/time icons: invert native controls where browser allows */
.dashboard-manual-form input[type="date"],
.dashboard-manual-form input[type="time"] {
    color-scheme: dark !important;
    background: #15151a !important;
    color: #fff !important;
    padding-right: 12px !important;
}

.dashboard-manual-form input[type="date"]::-webkit-calendar-picker-indicator,
.dashboard-manual-form input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(5) contrast(2) !important;
    -webkit-filter: invert(1) brightness(5) contrast(2) !important;
    opacity: 1 !important;
}

/* If native icon stays black in some browsers, this keeps field dark and readable */
.dashboard-manual-form input[type="date"]::-webkit-inner-spin-button,
.dashboard-manual-form input[type="time"]::-webkit-inner-spin-button {
    filter: invert(1) !important;
}

@media (max-width: 760px) {
    .dashboard-manual-panel {
        padding: 8px !important;
        align-items: center !important;
    }

    .dashboard-manual-form {
        width: min(100%, 360px) !important;
        max-height: calc(100dvh - 28px) !important;
        padding: 14px !important;
        gap: 7px !important;
    }

    .dashboard-manual-head strong {
        font-size: 17px !important;
    }

    .dashboard-manual-form label {
        font-size: 11px !important;
    }

    .dashboard-manual-form input,
    .dashboard-manual-form select {
        min-height: 34px !important;
        font-size: 13px !important;
    }
}



/* =========================================================
   Dashboard notifications + centered controls + Add Booking responsive fields
========================================================= */

/* (min-width: 1024px) date row: same single row as 761px — set in earlier @media (min-width: 1024px) + (min-width: 761px) blocks */

/* Add booking: icons are custom white SVG overlays */
.dashboard-field-with-icon {
    display: block !important;
}

.dashboard-input-icon-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

.dashboard-input-icon-wrap input {
    padding-right: 40px !important;
}

.dashboard-input-icon-wrap svg {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    width: 18px !important;
    height: 18px !important;
    transform: translateY(-50%) !important;
    fill: #fff !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* Hide native date/time picker icon when possible so custom white icon is visible */
.dashboard-input-icon-wrap input[type="date"]::-webkit-calendar-picker-indicator,
.dashboard-input-icon-wrap input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 0 !important;
    position: absolute !important;
    right: 0 !important;
    width: 40px !important;
    height: 100% !important;
    cursor: pointer !important;
}

/* Make manual panel more table-like and fit both desktop/mobile */
.dashboard-manual-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: min(100%, 620px) !important;
    max-width: calc(100vw - 24px) !important;
}

.dashboard-manual-head,
.dashboard-manual-form button[type="submit"],
.dashboard-manual-form p {
    grid-column: 1 / -1 !important;
}

.dashboard-manual-form label {
    min-width: 0 !important;
    width: 100% !important;
}

.dashboard-manual-form input,
.dashboard-manual-form select {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Mobile: single column and fully inside screen */
@media (max-width: 760px) {
    .dashboard-manual-form {
        grid-template-columns: 1fr !important;
        width: min(100%, 340px) !important;
        max-height: calc(100dvh - 26px) !important;
        padding: 13px !important;
        gap: 7px !important;
    }

    .dashboard-manual-form input,
    .dashboard-manual-form select {
        min-height: 33px !important;
        font-size: 12px !important;
    }

    .dashboard-input-icon-wrap svg {
        width: 16px !important;
        height: 16px !important;
        right: 10px !important;
    }

    .dashboard-input-icon-wrap input {
        padding-right: 36px !important;
    }
}



/* Manual booking panel: make all fields, especially date/time, fit like the others */
.dashboard-manual-form {
    box-sizing: border-box !important;
}

.dashboard-manual-form input,
.dashboard-manual-form select,
.dashboard-input-icon-wrap {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Mobile: date/time bars same visual size as other inputs */
@media (max-width: 760px) {
    .dashboard-manual-panel {
        padding: 6px !important;
        align-items: center !important;
    }

    .dashboard-manual-form {
        width: min(100%, 330px) !important;
        max-width: calc(100vw - 14px) !important;
        max-height: calc(100dvh - 18px) !important;
        padding: 11px !important;
        gap: 6px !important;
        border-radius: 18px !important;
    }

    .dashboard-manual-head strong {
        font-size: 16px !important;
    }

    .dashboard-manual-head button {
        width: 26px !important;
        height: 26px !important;
    }

    .dashboard-manual-form label {
        font-size: 10.5px !important;
        line-height: 1.1 !important;
    }

    .dashboard-manual-form input,
    .dashboard-manual-form select {
        min-height: 30px !important;
        height: 30px !important;
        font-size: 11.5px !important;
        border-radius: 10px !important;
        padding-left: 9px !important;
        padding-right: 34px !important;
        margin-top: 3px !important;
    }

    .dashboard-input-icon-wrap svg {
        width: 14px !important;
        height: 14px !important;
        right: 9px !important;
    }

    .dashboard-manual-form button[type="submit"] {
        min-height: 32px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
    }

    .dashboard-manual-form p {
        min-height: 14px !important;
        font-size: 10.5px !important;
    }
}

@media (max-width: 390px) {
    .dashboard-manual-form {
        width: min(100%, 312px) !important;
        padding: 10px !important;
        gap: 5px !important;
    }

    .dashboard-manual-form input,
    .dashboard-manual-form select {
        min-height: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
    }

    .dashboard-input-icon-wrap svg {
        width: 13px !important;
        height: 13px !important;
    }
}



/* =========================================================
   Mobile Add Booking date/time sizing
========================================================= */

/* Mobile Add Booking: make date/time fields exactly same size as other fields */
@media (max-width: 760px) {
    .dashboard-manual-form label,
    .dashboard-field-with-icon {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .dashboard-input-icon-wrap {
        display: block !important;
        width: 100% !important;
        height: 30px !important;
        max-height: 30px !important;
        margin-top: 3px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .dashboard-input-icon-wrap input[type="date"],
    .dashboard-input-icon-wrap input[type="time"],
    .dashboard-manual-form input,
    .dashboard-manual-form select {
        width: 100% !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 30px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
        font-size: 11.5px !important;
        box-sizing: border-box !important;
        border-radius: 10px !important;
    }

    .dashboard-input-icon-wrap svg {
        width: 14px !important;
        height: 14px !important;
        right: 9px !important;
    }
}

@media (max-width: 390px) {
    .dashboard-input-icon-wrap {
        height: 28px !important;
        max-height: 28px !important;
    }

    .dashboard-input-icon-wrap input[type="date"],
    .dashboard-input-icon-wrap input[type="time"],
    .dashboard-manual-form input,
    .dashboard-manual-form select {
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        line-height: 28px !important;
        font-size: 11px !important;
    }
}

/* Booking front panel — home intro + service cards */
.booking-panel-app-head {
    min-height: 0;
    margin-bottom: 4px;
}

.booking-app[data-current-view="home"] .booking-progress {
    opacity: 0.35;
    pointer-events: none;
}

.booking-home-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    width: 100%;
}

.booking-home-preview,
.booking-home-card {
    width: 100%;
}

.booking-home-card {
    padding: 14px 14px 12px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(222, 36, 47, 0.14), transparent 55%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.booking-home-card-head {
    margin-bottom: 12px;
    text-align: center;
}

.booking-home-preview-label {
    margin: 0 0 6px;
    color: var(--membership-eyebrow-color, #de242f);
    font-family: var(--font-heading, "Oswald", Arial, sans-serif);
    font-size: clamp(11px, 2.4vw, 13px);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
}

.booking-home-tagline {
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 500;
}

.booking-home-intro .booking-home-services {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin: 0;
}

.booking-home-intro .booking-home-service {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 0;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.18);
    min-width: 0;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.booking-home-intro .booking-home-service-name-group {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    min-width: 0;
    width: auto;
    flex: 0 1 auto;
    max-width: none;
}

.booking-home-intro .booking-home-service:hover {
    border-color: rgba(222, 36, 47, 0.35);
    background: rgba(222, 36, 47, 0.08);
    transform: translateY(-1px);
}

.booking-home-intro .booking-home-service-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(222, 36, 47, 0.16);
    border: 1px solid rgba(222, 36, 47, 0.28);
}

.booking-home-intro .booking-home-service-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
}

.booking-home-intro .booking-home-service[data-program-key="group_training_men"] .booking-home-service-icon {
    background: rgba(47, 128, 237, 0.16);
    border-color: rgba(47, 128, 237, 0.35);
}

.booking-home-intro .booking-home-service[data-program-key="group_training_women"] .booking-home-service-icon {
    background: rgba(236, 72, 153, 0.16);
    border-color: rgba(236, 72, 153, 0.35);
}

.booking-home-intro .booking-home-service-line {
    display: flex !important;
    flex: 1 1 0%;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(8px, 1.2vw, 14px);
    width: 100%;
    min-width: 0;
    text-align: left;
}

.booking-home-intro .booking-home-service-name-group,
.booking-home-intro .booking-home-service-meta {
    display: contents;
}

.booking-home-intro .booking-home-service-icon {
    justify-self: start;
}

.booking-home-intro .booking-home-service-name {
    flex: 1 1 auto;
    min-width: 0;
    justify-self: unset;
    text-align: left;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: break-word;
}

.booking-home-intro .booking-home-service-duration,
.booking-home-intro .booking-home-service-price {
    justify-self: center;
    text-align: center;
    width: 100%;
    white-space: nowrap;
}

.booking-home-intro .booking-home-service-sep {
    display: block;
    width: 1px;
    height: 14px;
    margin: 0;
    background: rgba(255, 255, 255, 0.18);
}

.booking-home-intro .booking-home-service-hr {
    display: block !important;
    flex: 0 0 auto;
    width: 1px;
    height: 14px;
    margin: 0;
    border: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.18);
}

.booking-home-intro .booking-home-service-meta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: auto;
    min-width: 0;
    margin-top: 0 !important;
}

.booking-home-intro .booking-home-service-sep,
.booking-home-intro .booking-home-service-duration {
    display: inline-block !important;
    margin-top: 0 !important;
}

.booking-home-intro .booking-home-service-name {
    color: #fff;
    font-family: var(--font-heading, "Oswald", Arial, sans-serif);
    font-size: clamp(10px, 2.3vw, 12px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    max-width: none;
}

.booking-home-intro .booking-home-service-duration {
    color: rgba(255, 255, 255, 0.58);
    font-family: var(--font-heading, "Oswald", Arial, sans-serif);
    font-size: clamp(11px, 2.8vw, 13px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.booking-home-intro .booking-home-service-price {
    color: #de242f;
    font-family: var(--font-heading, "Oswald", Arial, sans-serif);
    font-size: clamp(11px, 2.8vw, 13px);
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.booking-home-intro .booking-home-service-sep {
    flex: 0 0 auto;
    width: 1px;
    height: 14px;
    margin: 0 10px;
    background: rgba(255, 255, 255, 0.18);
}

.booking-home-intro .booking-home-gallery {
    display: none !important;
}

.booking-home-cta {
    width: 100%;
    margin-top: 4px;
    position: relative;
    z-index: 2;
    pointer-events: auto;
    box-shadow: 0 10px 26px rgba(222, 36, 47, 0.32);
}

.booking-contact-strip--card {
    margin-top: 2px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

.booking-home-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--booking-panel-gallery-gap);
    width: 100%;
    max-width: 100%;
    margin-top: 8px;
    min-width: 0;
}

.booking-home-gallery-item {
    position: relative;
    margin: 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: var(--booking-panel-gallery-aspect-ratio);
    overflow: hidden;
    border-radius: var(--booking-panel-gallery-radius);
    border: 1px solid var(--booking-panel-gallery-border);
    background: rgba(0, 0, 0, 0.28);
    isolation: isolate;
}

.booking-home-gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: var(--booking-panel-gallery-overlay-bg);
    opacity: var(--booking-panel-gallery-overlay-opacity);
}

.booking-home-gallery-item img {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--booking-panel-gallery-image-position);
    opacity: var(--booking-panel-gallery-image-opacity);
}

.booking-home-gallery-placeholder {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    opacity: var(--booking-panel-gallery-image-opacity);
}

.booking-contact-strip--home {
    width: 100%;
    margin-top: 6px;
    text-align: center;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 18px !important;
    overflow: visible !important;
}

.booking-contact-strip--home span {
    flex: 1 1 220px;
    max-width: calc(50% - 9px);
    min-width: min(100%, 200px);
    justify-content: center !important;
    text-align: center !important;
    font-size: var(--booking-contact-strip-font-size, clamp(12px, 1.5vw, 14px));
}

.booking-service-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.booking-step-panel .booking-service-card.booking-service {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100%;
    min-height: 0;
    grid-template-columns: none !important;
    gap: 0 !important;
}

.booking-service-card {
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.22);
    color: inherit;
    text-align: left !important;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

.booking-service-card:hover {
    border-color: rgba(222, 36, 47, 0.45);
}

.booking-service-card.is-active {
    border-color: rgba(222, 36, 47, 0.85);
    background: rgba(222, 36, 47, 0.12);
}

.booking-service-card .booking-program-title {
    display: block;
    width: 100%;
    margin: 0;
    font-size: clamp(15px, 4.2vw, 17px);
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.02em;
    line-height: 1.25;
    word-break: break-word;
    text-align: left !important;
}

.booking-service-card .booking-program-details {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px;
    width: 100%;
}

.booking-service-card .booking-program-row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35em;
    width: 100%;
    font-size: clamp(12px, 3.5vw, 13px);
    line-height: 1.45;
    text-align: left !important;
}

.booking-service-card .booking-program-label {
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    font-weight: 600;
    white-space: nowrap;
}

.booking-service-card .booking-program-label::after {
    content: ":";
}

.booking-service-card .booking-program-value {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 700;
    text-align: left !important;
    word-break: break-word;
}

.booking-step-panel .booking-calendar-head strong[data-booking-calendar-label] {
    font-size: clamp(16px, 4vw, 18px);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
    text-transform: none;
}

.booking-step-panel .booking-date-field,
.booking-step-panel .booking-date-display {
    display: none !important;
}

.booking-step-panel .booking-calendar-day:hover:not(.is-selected):not(:disabled) {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
    transform: none !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

.booking-step-panel .booking-calendar-day.is-selected {
    background: linear-gradient(135deg, #de242f, rgba(222, 36, 47, 0.65)) !important;
    color: #fff !important;
}

.booking-service-continue {
    width: 100%;
    margin-top: 12px;
}

.booking-step-title--time {
    margin-top: 18px;
    margin-bottom: 0;
}

.booking-step-title--time h3 {
    margin-bottom: 4px;
}

.booking-step-title--time p {
    margin-bottom: 8px;
}

@media (max-width: 767px) {
    .booking-home-intro {
        width: 100%;
        min-width: 0;
    }

    .booking-home-intro .booking-home-services {
        gap: 6px !important;
    }

    .booking-home-intro .booking-home-service {
        padding: 11px 12px;
        gap: 9px;
    }

    .booking-home-intro .booking-home-service-icon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
    }

    .booking-home-intro .booking-home-service-name {
        font-size: 13px;
    }

    .booking-home-tagline {
        font-size: 11px;
    }

    .booking-home-intro .booking-home-service-duration {
        font-size: 12px;
    }

    .booking-home-intro .booking-home-service-price {
        font-size: 12px;
    }
}

@media (max-width: 560px) {
    .booking-service-card {
        padding: 12px 14px;
    }

    .booking-service-card .booking-program-row {
        gap: 0.3em;
    }
}

@media (max-width: 380px) {
    .booking-home-gallery-item {
        border-radius: max(8px, var(--booking-panel-gallery-radius));
    }
}

/* Dashboard: calendar notification dot + smoother popover */
.dashboard-calendar-day.has-notify::before {
    content: "" !important;
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 1px rgba(8, 8, 12, 0.85) !important;
}

.dashboard-app-date-controls .dashboard-calendar-popover {
    transition: opacity 140ms ease, visibility 140ms ease, transform 140ms ease !important;
    will-change: opacity, transform !important;
}

.dashboard-calendar-day {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

.dashboard-app-calendar-trigger {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

.dashboard-app-date-controls .dashboard-calendar-toggle-state:checked ~ .dashboard-calendar-popover-inside-controls.is-open,
.dashboard-app-date-controls .dashboard-calendar-popover-inside-controls.is-open {
    pointer-events: auto !important;
}

/* Booking panel: form field icons + input polish */
.booking-step-panel .booking-fields {
    display: grid;
    gap: 11px;
}

.booking-step-panel .booking-field {
    display: grid;
    gap: 6px;
}

.booking-step-panel .booking-field-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: capitalize;
}

.booking-step-panel .booking-field-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    fill: rgba(255, 255, 255, 0.55);
}

.booking-step-panel .booking-field-input {
    width: 100%;
    box-sizing: border-box;
}

.booking-step-panel .booking-field-input--name {
    text-transform: none;
}

.booking-step-panel .booking-field.is-invalid .booking-field-input,
.booking-step-panel .booking-field.is-invalid .booking-phone-code-toggle {
    border-color: #de242f !important;
    box-shadow: 0 0 0 1px rgba(222, 36, 47, 0.35);
}

.booking-step-panel .booking-field-error {
    color: #ff6b74;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.booking-step-panel .booking-phone-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: stretch;
}

.booking-step-panel .booking-phone-code {
    position: relative;
    display: flex;
    align-self: stretch;
}

.booking-step-panel .booking-phone-code-toggle,
.booking-step-panel .booking-field-input--phone {
    min-height: 52px;
    height: 100%;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.065);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
}

.booking-step-panel .booking-phone-code-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 78px;
    padding: 0 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.booking-step-panel .booking-phone-code-toggle:focus,
.booking-step-panel .booking-phone-code-toggle:focus-visible,
.booking-step-panel .booking-field-input--phone:focus {
    border-color: rgba(222, 36, 47, 0.55);
    box-shadow: 0 0 0 4px rgba(222, 36, 47, 0.12);
}

.booking-step-panel .booking-field-input--phone {
    padding: 0 16px;
}

.booking-step-panel .booking-phone-code-chevron {
    width: 16px;
    height: 16px;
    fill: rgba(255, 255, 255, 0.7);
}

.booking-step-panel .booking-phone-code-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    max-height: 220px;
    margin: 0;
    padding: 6px;
    list-style: none;
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    background: rgba(18, 18, 18, 0.98);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.booking-step-panel .booking-phone-code-menu button {
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.booking-step-panel .booking-phone-code-menu button:hover,
.booking-step-panel .booking-phone-code-menu button.is-selected {
    background: rgba(222, 36, 47, 0.22);
}

.booking-step-panel .booking-field-input--comments {
    min-height: 84px;
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.065);
    color: #fff;
    resize: vertical;
}

.booking-contact-strip--home span {
    color: rgba(255, 255, 255, 0.58);
    font-size: var(--booking-contact-strip-font-size, clamp(13px, 1.6vw, 15px));
    line-height: 1.45;
}

/* Prevent iOS Safari auto-zoom when focusing booking form fields */
.booking-step-panel input.booking-field-input,
.booking-step-panel textarea.booking-field-input,
.booking-step-panel .booking-phone-code-toggle {
    font-size: 16px !important;
}

.dashboard-booking-comment {
    display: block !important;
    margin-top: 4px !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    background: rgba(0, 0, 0, 0.22) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    word-break: break-word;
}

.dashboard-booking-comment-label {
    display: block !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
}

/* Booking steps: service, date, confirm — match home panel polish */
.booking-step-panel .booking-step-title {
    margin-bottom: 14px;
}

.booking-step-panel .booking-step-title h3 {
    position: relative;
    padding-bottom: 10px;
}

.booking-step-panel .booking-step-title h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #de242f, rgba(222, 36, 47, 0));
}

.booking-step-panel .booking-step-title p {
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.45;
}

.booking-step-card {
    margin-bottom: 12px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(222, 36, 47, 0.1), transparent 55%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.booking-step-card--calendar .booking-calendar {
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.booking-step-card--times .booking-time-status {
    margin: 0 0 10px !important;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.68);
    text-align: center;
    font-weight: 600;
}

.booking-step-card--times .booking-times {
    margin: 0;
}

.booking-summary-label {
    margin: 0 0 10px;
    color: var(--membership-eyebrow-color, #de242f);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.booking-step-card--summary {
    margin-bottom: 10px;
}

.booking-step-card--summary .booking-summary {
    margin: 0 !important;
}

.booking-step-card--summary .booking-summary-line {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.booking-step-card--summary .booking-summary-item {
    display: flex;
    align-items: baseline;
    gap: 0.35em;
    width: 100%;
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.booking-step-card--summary .booking-summary-item strong {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.booking-step-card--summary .booking-summary-value {
    color: #fff;
    font-weight: 700;
}

.booking-step-card--summary .booking-summary-sep {
    color: rgba(255, 255, 255, 0.35);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.booking-step-card--summary .booking-summary-placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

.booking-step-panel .booking-step-card--summary .booking-summary span {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: baseline !important;
    gap: 0.35em !important;
    width: 100% !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    background: transparent !important;
}

.booking-step-panel .booking-step-card--summary .booking-summary strong {
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

@media (min-width: 761px) {
    .booking-step-panel .booking-field--comments {
        grid-column: 1 / -1;
    }
}

.booking-step-card--details {
    margin-bottom: 10px;
}

.booking-step-card--details .booking-fields {
    margin: 0;
}

.booking-service-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(90% 80% at 0% 0%, rgba(222, 36, 47, 0.08), transparent 50%),
        rgba(0, 0, 0, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.booking-service-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    transition: background 0.2s ease;
}

.booking-service-card:hover {
    transform: translateY(-1px);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.booking-service-card.is-active {
    border-color: rgba(222, 36, 47, 0.75);
    background:
        radial-gradient(90% 80% at 0% 0%, rgba(222, 36, 47, 0.2), transparent 55%),
        rgba(222, 36, 47, 0.1);
    box-shadow:
        0 12px 28px rgba(222, 36, 47, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.booking-service-card.is-active::before {
    background: #de242f;
}

.booking-service-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 12px;
}

.booking-service-card-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(222, 36, 47, 0.16);
    border: 1px solid rgba(222, 36, 47, 0.28);
}

.booking-service-card-icon svg {
    width: 18px;
    height: 18px;
    fill: #fff;
}

.booking-service-card[data-program-key="group_training_men"] .booking-service-card-icon {
    background: rgba(47, 128, 237, 0.16);
    border-color: rgba(47, 128, 237, 0.35);
}

.booking-service-card[data-program-key="group_training_women"] .booking-service-card-icon {
    background: rgba(236, 72, 153, 0.16);
    border-color: rgba(236, 72, 153, 0.35);
}

.booking-service-card .booking-program-title {
    margin: 0;
    flex: 1;
    min-width: 0;
}

.booking-service-card .booking-program-row {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.booking-service-card .booking-program-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.booking-service-card .booking-program-value {
    color: #fff;
}

.booking-step-panel .booking-calendar-head button {
    transition: background 0.2s ease, transform 0.2s ease;
}

.booking-step-panel .booking-calendar-head button:hover {
    background: rgba(222, 36, 47, 0.22) !important;
    transform: translateY(-1px);
}

.booking-step-panel .booking-time.is-active {
    border-color: rgba(222, 36, 47, 0.85) !important;
    background:
        radial-gradient(circle at 25% 0%, rgba(255, 255, 255, 0.14), transparent 40%),
        linear-gradient(135deg, rgba(222, 36, 47, 0.35), rgba(222, 36, 47, 0.12)) !important;
}

.booking-step-panel .booking-main-button:not(:disabled) {
    box-shadow: none !important;
}

.booking-step-panel .booking-success-card {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(222, 36, 47, 0.18), transparent 55%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Dashboard + notifications: program icons */
.dashboard-booking-layout,
.dashboard-inbox-item-layout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.dashboard-booking-icon,
.dashboard-inbox-item-icon {
    --dash-icon-size: clamp(22px, 5.2vw, 28px);
    --dash-icon-glyph-size: clamp(12px, 2.8vw, 15px);
    flex: 0 0 var(--dash-icon-size);
    width: var(--dash-icon-size);
    height: var(--dash-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    border-radius: 8px;
    background: rgba(222, 36, 47, 0.16);
    border: 1px solid rgba(222, 36, 47, 0.28);
    line-height: 0;
    overflow: hidden;
}

.dashboard-booking-icon svg,
.dashboard-inbox-item-icon svg {
    width: var(--dash-icon-glyph-size);
    height: var(--dash-icon-glyph-size);
    display: block;
    margin: 0;
    flex-shrink: 0;
    fill: #fff;
}

.dashboard-booking-icon[data-program-key="group_training_men"],
.dashboard-inbox-item-icon[data-program-key="group_training_men"] {
    background: rgba(47, 128, 237, 0.16);
    border-color: rgba(47, 128, 237, 0.35);
}

.dashboard-booking-icon[data-program-key="group_training_women"],
.dashboard-inbox-item-icon[data-program-key="group_training_women"] {
    background: rgba(236, 72, 153, 0.16);
    border-color: rgba(236, 72, 153, 0.35);
}

.dashboard-booking-body,
.dashboard-inbox-item-content {
    flex: 1;
    min-width: 0;
}

.dashboard-inbox-item-layout {
    width: 100%;
}

.dashboard-app-booking .dashboard-booking-layout {
    padding-right: 4px;
}

/* Timeline booking cards: icon centered in head block */
body.dashboard-app-body .dashboard-app-booking .dashboard-booking-icon {
    --dash-icon-size: clamp(20px, 4.8vw, 26px);
    border-radius: 6px;
    align-self: center;
}

body.dashboard-app-body .dashboard-inbox-item-icon {
    --dash-icon-size: clamp(20px, 4.8vw, 26px);
}

/* Booking panel: scroll content, sticky continue/submit */
.booking-panel-viewport {
    display: flex !important;
    flex-direction: column !important;
}

.booking-panel-viewport > .booking-panel-view {
    display: none !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    height: 100% !important;
    padding-bottom: 0 !important;
}

.booking-panel-viewport > .booking-panel-view.is-active {
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
}

.booking-panel-viewport > .booking-panel-view.is-active:not(.booking-panel-view--with-footer) {
    overflow-y: visible !important;
}

.booking-panel-view-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.booking-panel-view-actions {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding: 14px 0 calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: none !important;
    background: transparent !important;
    box-shadow: none !important;
    position: relative;
    z-index: 2;
}

.booking-panel-view-actions .booking-main-button {
    width: 100%;
}

.booking-panel-view-actions .booking-message {
    margin-top: 10px !important;
}

.booking-panel-view[data-booking-view="confirm"] .booking-panel-view-actions .booking-submit {
    margin-top: 0 !important;
}

/* Confirm: your booking card (matches service picker) */
.booking-confirm-summary {
    margin-bottom: 14px;
}

.booking-confirm-summary .booking-summary-label {
    margin: 0 0 10px;
    color: #fff;
}

.booking-summary-card {
    width: 100%;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.22);
    box-sizing: border-box;
}

.booking-summary-card .booking-service-card-head {
    margin-bottom: 12px;
}

.booking-summary-card .booking-program-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.booking-summary-card .booking-summary-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: 6px;
    row-gap: 2px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12px;
    line-height: 1.4;
}

.booking-summary-card .booking-summary-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.booking-summary-card .booking-summary-field-label {
    color: rgba(255, 255, 255, 0.62);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.booking-summary-card .booking-summary-field-sep {
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    font-weight: 600;
    padding-right: 2px;
}

.booking-summary-card .booking-summary-field-value {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    word-break: break-word;
}

.booking-summary-card .booking-program-title {
    font-size: clamp(13px, 3.6vw, 15px) !important;
    font-weight: 800 !important;
}

.booking-summary-card .booking-service-card-head {
    margin-bottom: 10px;
}

.booking-summary-card .booking-service-card-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
}

.booking-summary-card .booking-service-card-icon svg {
    width: 16px;
    height: 16px;
}

.booking-summary-card .booking-summary-placeholder {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

.booking-summary-card[data-program-key="group_training_men"] .booking-service-card-icon {
    background: rgba(47, 128, 237, 0.16);
    border-color: rgba(47, 128, 237, 0.35);
}

.booking-summary-card[data-program-key="group_training_women"] .booking-service-card-icon {
    background: rgba(236, 72, 153, 0.16);
    border-color: rgba(236, 72, 153, 0.35);
}

@media (min-width: 761px) {
    .booking-panel-viewport > .booking-panel-view--with-footer.is-active {
        min-height: 0 !important;
        max-height: 100% !important;
    }

    .booking-panel-view-actions {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* =========================================================
   Booking panel — unified service surfaces + home borders
========================================================= */

.booking-step-panel.booking-app {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.booking-home-card {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.booking-home-intro .booking-home-cta,
.booking-home-intro .booking-main-button.booking-home-cta {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    border: none !important;
    box-shadow: 0 10px 26px rgba(222, 36, 47, 0.32) !important;
}

.booking-home-intro {
    padding-bottom: 6px;
}

.booking-home-intro .booking-contact-strip--card {
    margin-top: 14px !important;
    margin-bottom: 10px !important;
    padding: 12px 14px !important;
    box-sizing: border-box;
}

.booking-panel-view[data-booking-view="home"] .booking-panel-view-scroll,
.booking-panel-view[data-booking-view="home"] {
    padding-bottom: 12px !important;
    overflow: visible !important;
}

.booking-panel-viewport > .booking-panel-view.is-active[data-booking-view="home"] {
    overflow: visible !important;
    overflow-y: visible !important;
}

.booking-home-intro {
    position: relative;
    z-index: 2;
}

.booking-step-card,
.booking-step-card--calendar,
.booking-step-card--times,
.booking-step-card--details {
    padding: 14px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    background: rgba(0, 0, 0, 0.22) !important;
    box-shadow: none !important;
}

.booking-step-card--calendar .booking-calendar {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.booking-step-card--times .booking-time-status {
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    background: rgba(0, 0, 0, 0.22) !important;
    color: #fff !important;
}

/* Form fields — match service card */
.booking-step-panel .booking-field-label,
.booking-step-panel .booking-field-label .booking-field-icon {
    color: #fff !important;
    fill: rgba(255, 255, 255, 0.85) !important;
}

.booking-step-panel .booking-field-input,
.booking-step-panel .booking-field-input--comments,
.booking-step-panel .booking-phone-code-toggle,
.booking-step-panel .booking-field-input--phone {
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    background: rgba(0, 0, 0, 0.22) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.booking-step-panel .booking-field-input::placeholder,
.booking-step-panel .booking-field-input--comments::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* Confirm summary — all white */
.booking-summary-card,
.booking-summary-card .booking-program-title,
.booking-summary-card .booking-summary-field-label,
.booking-summary-card .booking-summary-field-value,
.booking-summary-card .booking-summary-placeholder {
    color: #fff !important;
}

.booking-summary-card .booking-summary-field-label {
    color: rgba(255, 255, 255, 0.62) !important;
}

/* Calendar days — service-style cells + status icons */
.booking-step-panel .booking-calendar-day {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    min-height: 44px !important;
    padding: 4px 2px !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 12px !important;
    background: rgba(0, 0, 0, 0.22) !important;
    color: #fff !important;
    transform: none !important;
}

.booking-step-panel .booking-calendar-day-num {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.1;
}

.booking-step-panel .booking-calendar-day-status {
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
}

.booking-step-panel .booking-calendar-day-status svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.booking-step-panel .booking-calendar-day.is-available {
    color: #fff !important;
}

.booking-step-panel .booking-calendar-day.is-available .booking-calendar-day-status {
    color: #5ee89a;
}

.booking-step-panel .booking-calendar-day.is-limited .booking-calendar-day-status {
    color: #ffb347;
}

.booking-step-panel .booking-calendar-day.is-unavailable .booking-calendar-day-status,
.booking-step-panel .booking-calendar-day.is-disabled.is-unavailable .booking-calendar-day-status {
    color: #ff4d4d;
}

.booking-step-panel .booking-calendar-day.is-available .booking-calendar-day-status svg {
    width: 8px;
    height: 8px;
}

.booking-step-panel .booking-calendar-day.is-unavailable,
.booking-step-panel .booking-calendar-day.is-disabled {
    color: rgba(255, 255, 255, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    background: rgba(0, 0, 0, 0.14) !important;
    cursor: not-allowed !important;
}

.booking-step-panel .booking-calendar-day.is-unavailable .booking-calendar-day-status,
.booking-step-panel .booking-calendar-day.is-disabled .booking-calendar-day-status {
    color: rgba(255, 255, 255, 0.35);
}

.booking-step-panel .booking-calendar-day.is-available:hover:not(:disabled),
.booking-step-panel .booking-calendar-day.is-selected {
    border-color: rgba(222, 36, 47, 0.75) !important;
    background: rgba(222, 36, 47, 0.14) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

.booking-step-panel .booking-calendar-day.is-selected .booking-calendar-day-status {
    color: #fff;
}

.booking-calendar-grid.is-loading {
    opacity: 0.55;
    pointer-events: none;
}

/* Time slots — service-style */
.booking-step-panel .booking-time {
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 12px !important;
    background: rgba(0, 0, 0, 0.22) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.booking-step-panel .booking-time:hover,
.booking-step-panel .booking-time.is-active {
    border-color: rgba(222, 36, 47, 0.75) !important;
    background: rgba(222, 36, 47, 0.14) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

/* Legal pages — centered copy on all breakpoints */
.legal-page-hero .narrow-container,
.legal-page-container.narrow-container {
    text-align: center;
}

.legal-content-card,
.legal-content-body {
    text-align: center;
}

.legal-page-flow--content-only .legal-page-section {
    padding-top: var(--page-inner-padding-top-desktop, 260px);
    padding-bottom: var(--page-inner-padding-bottom-desktop, 130px);
}

@media (max-width: 760px) {
    .legal-page-flow--content-only .legal-page-section {
        padding-top: var(--page-inner-padding-top-mobile, 180px);
        padding-bottom: var(--page-inner-padding-bottom-mobile, 90px);
    }
}

.legal-content-card h2 {
    text-align: var(--legal-content-h-align, left);
}

.legal-content-card ul,
.legal-content-card ol,
.legal-content-body ul,
.legal-content-body ol {
    display: block;
    margin-right: 0;
    margin-left: 0;
    padding-left: 22px;
    list-style-position: outside;
    text-align: var(--legal-content-text-align, left);
    max-width: 100%;
}

.legal-content-card p,
.legal-content-body p {
    margin-right: 0;
    margin-left: 0;
    max-width: 100%;
    text-align: var(--legal-content-text-align, left);
}

/* =========================================================
   LEGAL HEADING ROW (left-aligned heading + icon)
========================================================= */

.legal-page-heading-row {
    display: flex;
    align-items: center;
    gap: var(--legal-heading-row-gap, 14px);
    margin: 0 0 var(--legal-heading-row-margin-bottom, 28px);
    text-align: left;
    justify-content: flex-start;
}

.legal-page-heading-row--outside {
    padding: 0 4px;
}

.legal-page-heading-row .legal-page-heading-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--legal-heading-icon-color, var(--color-red));
}

.legal-page-heading-row .legal-page-heading-icon svg {
    width: 22px;
    height: 22px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.legal-page-heading-row .legal-page-heading-title {
    margin: 0;
    color: var(--legal-heading-title-color, var(--color-light));
    font-family: var(--global-heading-font-family);
    font-weight: var(--global-heading-font-weight);
    font-size: var(--legal-heading-title-size-desktop, var(--global-h2-size-desktop));
    line-height: 1.05;
    letter-spacing: var(--global-heading-letter-spacing);
    text-transform: var(--global-heading-text-transform);
    text-align: left;
}

@media (max-width: 760px) {
    .legal-page-heading-row {
        gap: var(--legal-heading-row-gap-mobile, 10px);
        margin: 0 0 var(--legal-heading-row-margin-bottom-mobile, 20px);
    }

    .legal-page-heading-row .legal-page-heading-icon svg {
        width: 20px;
        height: 20px;
    }

    .legal-page-heading-row .legal-page-heading-title {
        font-size: var(--legal-heading-title-size-mobile, 32px);
    }
}

/* =========================================================
   ABOUT US PAGE (standalone /about-us/)
========================================================= */

.about-page-flow {
    position: relative;
    background: transparent;
}

.about-page-hero {
    position: relative;
    padding: var(--about-page-hero-padding-desktop);
    color: var(--color-light);
    isolation: isolate;
    overflow: hidden;
}

.about-page-hero--premium {
    min-height: var(--about-page-hero-min-height-desktop, 560px);
    display: flex;
    align-items: center;
}

.about-page-hero-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.about-page-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-page-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 6, calc(var(--global-image-overlay-opacity, 0.46) * 1.05)) 0%, rgba(0, 0, 6, calc(var(--global-image-overlay-opacity, 0.46) * 1.45)) 100%);
}

.about-page-hero-inner {
    position: relative;
    z-index: 1;
}

.about-page-hero-actions {
    margin-top: var(--about-page-hero-actions-gap, 28px);
    display: flex;
    justify-content: center;
}

.about-page-lead {
    max-width: var(--about-page-lead-max-width, 760px);
    margin: 0 auto var(--about-page-lead-margin-bottom, 56px);
    color: var(--about-page-lead-color, rgba(250, 249, 254, 0.82));
    font-size: var(--about-page-lead-size, 19px);
    line-height: var(--about-page-lead-line-height, 1.65);
    text-align: center;
}

.about-page-grid--multi {
    grid-template-columns: repeat(2, 1fr);
}

.about-page-grid--four {
    grid-template-columns: repeat(2, 1fr);
}

.about-page-section {
    position: relative;
    padding: var(--about-page-section-padding-desktop) 0;
}

/* About Us — text-only variant: transparent, uses the site continuous background.
   Inherits top spacing from .contact-page-flow--no-hero .contact-page-section--top. */
.about-page-flow--text-only,
.about-page-flow--text-only .about-page-section--text-only {
    background: transparent;
}

.about-page-flow--text-only .about-page-section--text-only {
    position: relative;
    padding-bottom: var(--page-inner-padding-bottom-desktop, 130px);
}

.about-page-flow--text-only .about-page-heading {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.about-page-flow--text-only .about-page-lead--text-only {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    color: var(--about-page-lead-color, var(--color-light-soft, rgba(250, 249, 254, 0.84)));
    font-size: var(--about-page-lead-font-size, 1.05rem);
    line-height: var(--about-page-lead-line-height, 1.78);
    text-align: center;
}

.about-page-flow--text-only .about-page-grid--text-only {
    margin-top: var(--section-text-content-gap-desktop, 48px);
}

@media (max-width: 760px) {
    .about-page-flow--text-only .about-page-section--text-only {
        padding-bottom: var(--page-inner-padding-bottom-mobile, 90px);
    }

    .about-page-flow--text-only .about-page-grid--text-only {
        margin-top: var(--section-text-content-gap-mobile, 32px);
    }
}

@media (max-width: 760px) {
    .about-page-hero--premium {
        min-height: var(--about-page-hero-min-height-mobile, 440px);
    }

    .about-page-grid--multi,
    .about-page-grid--four {
        grid-template-columns: 1fr;
    }

    .about-page-lead {
        margin-bottom: var(--about-page-lead-margin-bottom-mobile, 36px);
        font-size: var(--about-page-lead-size-mobile, 16px);
    }

    .about-page-hero-actions {
        margin-top: var(--about-page-hero-actions-gap-mobile, 22px);
    }
}

.about-page-eyebrow {
    margin: 0 0 var(--about-page-eyebrow-margin-bottom);
    color: var(--about-page-eyebrow-color);
    font-size: var(--about-page-eyebrow-size);
    font-weight: var(--about-page-eyebrow-weight);
    letter-spacing: var(--about-page-eyebrow-letter-spacing);
    line-height: var(--about-page-eyebrow-line-height);
    text-transform: var(--about-page-eyebrow-transform);
}

.about-page-title {
    margin: 0 0 var(--about-page-title-margin-bottom);
    color: var(--about-page-title-color);
    font-family: var(--global-heading-font-family);
    font-weight: var(--global-heading-font-weight);
    font-size: var(--about-page-title-size-desktop);
    line-height: var(--about-page-title-line-height);
    letter-spacing: var(--about-page-title-letter-spacing);
    text-transform: var(--global-heading-text-transform);
}

.about-page-subtitle {
    margin: 0 auto;
    max-width: var(--about-page-subtitle-width);
    color: var(--about-page-subtitle-color);
    font-size: var(--about-page-subtitle-size);
    line-height: var(--about-page-subtitle-line-height);
}

.about-page-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--about-page-content-gap);
    max-width: 920px;
    margin: 0 auto;
}

.about-page-block {
    padding: var(--about-page-block-padding);
    border: 1px solid var(--about-page-block-border);
    border-radius: var(--about-page-block-radius);
    background: var(--about-page-block-bg);
    text-align: var(--about-page-section-text-align, center);
}

.about-page-block-title {
    margin: 0 0 12px;
    color: var(--color-light);
    font-family: var(--global-heading-font-family);
    font-weight: var(--global-heading-font-weight);
    font-size: var(--about-page-block-title-size);
    line-height: 1.15;
    letter-spacing: var(--global-heading-letter-spacing);
    text-transform: var(--global-heading-text-transform);
}

.about-page-block-text {
    margin: 0;
    color: var(--about-page-block-text-color);
    font-size: var(--about-page-block-text-size);
    line-height: var(--about-page-block-text-line-height);
}

@media (max-width: 1024px) {
    .about-page-title {
        font-size: var(--about-page-title-size-tablet);
    }
}

@media (max-width: 760px) {
    .about-page-hero {
        padding: var(--about-page-hero-padding-mobile);
    }

    .about-page-section {
        padding: var(--about-page-section-padding-mobile) 0;
    }

    .about-page-title {
        font-size: var(--about-page-title-size-mobile);
    }

    .about-page-subtitle {
        font-size: var(--about-page-subtitle-size-mobile);
    }

    .about-page-grid {
        gap: var(--about-page-content-gap-mobile);
    }

    .about-page-block {
        padding: var(--about-page-block-padding-mobile);
    }

    .about-page-block-title {
        font-size: var(--about-page-block-title-size-mobile);
    }

    .about-page-block-text {
        font-size: var(--about-page-block-text-size-mobile);
    }
}

/* =========================================================
   PARTNERSHIPS PAGE (standalone /partnerships/)
========================================================= */

.partnerships-page-flow {
    position: relative;
    background: transparent;
}

.partnerships-page-hero {
    position: relative;
    padding: var(--partnerships-page-hero-padding-desktop);
    padding-bottom: var(--partnerships-page-hero-padding-bottom-desktop, clamp(24px, 4vw, 40px));
    color: var(--color-light);
}

.partnerships-page-section--grid {
    padding-top: var(--partnerships-page-grid-padding-top-desktop, clamp(20px, 3vw, 36px));
}

.partnerships-page-intro {
    position: relative;
    padding: var(--partnerships-page-intro-padding-top-desktop, clamp(32px, 5vw, 48px)) 0 var(--partnerships-page-intro-padding-bottom-desktop, 56px);
}

.partnerships-page-section {
    position: relative;
    padding: var(--partnerships-page-section-padding-desktop) 0;
}

.partnerships-page-eyebrow {
    margin: 0 0 var(--programs-page-eyebrow-margin-bottom);
    color: var(--partnerships-page-eyebrow-color);
    font-size: var(--partnerships-page-eyebrow-size);
    font-weight: var(--programs-page-eyebrow-weight);
    letter-spacing: var(--programs-page-eyebrow-letter-spacing);
    text-transform: var(--programs-page-eyebrow-transform);
}

.partnerships-page-title {
    margin: 0 0 var(--programs-page-title-margin-bottom);
    color: var(--partnerships-page-title-color);
    font-family: var(--global-heading-font-family);
    font-weight: var(--global-heading-font-weight);
    font-size: var(--partnerships-page-title-size-desktop);
    line-height: var(--programs-page-title-line-height);
    letter-spacing: var(--programs-page-title-letter-spacing);
    text-transform: var(--global-heading-text-transform);
}

.partnerships-page-subtitle {
    margin: 0 auto;
    max-width: var(--programs-page-subtitle-width);
    color: var(--partnerships-page-subtitle-color);
    font-size: var(--partnerships-page-subtitle-size);
    line-height: var(--programs-page-subtitle-line-height);
}

.partnerships-page-lead {
    max-width: var(--partnerships-page-lead-max-width, 760px);
    margin: 0 auto var(--partnerships-page-lead-margin-bottom, clamp(24px, 4vw, 32px));
    color: var(--partnerships-page-lead-color, rgba(250, 249, 254, 0.82));
    font-size: var(--partnerships-page-lead-size, 19px);
    line-height: var(--partnerships-page-lead-line-height, 1.65);
    text-align: center;
}

.partnerships-page-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--partnerships-page-benefits-gap, 22px);
    max-width: 1100px;
    margin: 0 auto;
}

.partnerships-page-benefit {
    padding: var(--partnerships-page-benefit-padding, 26px);
    background: var(--partnerships-page-benefit-bg, rgba(250, 249, 254, 0.04));
    border: 1px solid var(--partnerships-page-benefit-border, rgba(250, 249, 254, 0.10));
    border-radius: var(--partnerships-page-benefit-radius, 18px);
    text-align: left;
}

.partnerships-page-benefit-title {
    margin: 0 0 12px;
    color: var(--color-light);
    font-family: var(--global-heading-font-family);
    font-weight: var(--global-heading-font-weight);
    font-size: var(--partnerships-page-benefit-title-size, 18px);
    line-height: 1.15;
    letter-spacing: var(--global-heading-letter-spacing);
    text-transform: var(--global-heading-text-transform);
}

.partnerships-page-benefit-text {
    margin: 0;
    color: rgba(250, 249, 254, 0.74);
    font-size: var(--partnerships-page-benefit-text-size, 15px);
    line-height: 1.6;
}

.partnerships-page-grid-title {
    margin: 0 0 var(--partnerships-page-grid-title-gap, 28px);
    text-align: center;
    color: var(--color-light);
    font-family: var(--global-heading-font-family);
    font-weight: var(--global-heading-font-weight);
    font-size: var(--partnerships-page-grid-title-size, 28px);
    letter-spacing: var(--global-heading-letter-spacing);
    text-transform: var(--global-heading-text-transform);
}

.partnerships-page-outro {
    margin-top: var(--partnerships-page-outro-gap, 48px);
    text-align: center;
}

.partnerships-page-footnote {
    margin: 0 auto var(--partnerships-page-footnote-margin-bottom, 24px);
    max-width: 720px;
    color: rgba(250, 249, 254, 0.62);
    font-size: 14px;
    line-height: 1.6;
}

.partnerships-page-outro-actions {
    display: flex;
    justify-content: center;
}

.partnerships-page-grid {
    display: grid;
    grid-template-columns: repeat(var(--partnerships-page-grid-columns-desktop), 1fr);
    gap: var(--partnerships-page-grid-gap);
}

.partnerships-page-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: var(--partnerships-page-card-padding);
    background: var(--partnerships-page-card-bg);
    border: 1px solid var(--partnerships-page-card-border);
    border-radius: var(--partnerships-page-card-radius);
    box-shadow: var(--partnerships-page-card-shadow);
    text-align: var(--partnerships-page-section-text-align, center);
    transition: transform var(--transition-main), border-color var(--transition-main);
}

.partnerships-page-card:hover {
    transform: translateY(-3px);
    border-color: rgba(222, 36, 47, 0.36);
}

.partnerships-page-card-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--partnerships-page-card-logo-height);
}

.partnerships-page-card-logo img {
    max-height: 100%;
    max-width: 80%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.partnerships-page-card-name {
    margin: 0;
    color: var(--color-light);
    font-family: var(--global-heading-font-family);
    font-weight: var(--global-heading-font-weight);
    font-size: var(--partnerships-page-card-name-size);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.partnerships-page-card-discount {
    margin: 0;
    color: var(--partnerships-page-card-discount-color);
    font-size: var(--partnerships-page-card-discount-size);
    font-weight: 700;
}

.partnerships-page-card-description {
    margin: 0;
    color: var(--partnerships-page-card-description-color);
    font-size: var(--partnerships-page-card-description-size);
    line-height: 1.5;
}

@media (max-width: 1024px) {
    .partnerships-page-grid {
        grid-template-columns: repeat(var(--partnerships-page-grid-columns-tablet), 1fr);
    }

    .partnerships-page-benefits {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .partnerships-page-hero {
        padding: var(--partnerships-page-hero-padding-mobile);
    }

    .partnerships-page-section {
        padding: var(--partnerships-page-section-padding-mobile) 0;
    }

    .partnerships-page-title {
        font-size: var(--partnerships-page-title-size-mobile);
    }

    .partnerships-page-subtitle {
        font-size: var(--partnerships-page-subtitle-size-mobile);
    }

    .partnerships-page-grid {
        grid-template-columns: repeat(var(--partnerships-page-grid-columns-mobile), 1fr);
        gap: var(--partnerships-page-grid-gap-mobile);
    }

    .partnerships-page-card {
        padding: var(--partnerships-page-card-padding-mobile);
    }

    .partnerships-page-card-logo {
        height: var(--partnerships-page-card-logo-height-mobile);
    }

    .partnerships-page-intro {
        padding: var(--partnerships-page-intro-padding-mobile, 56px) 0 var(--partnerships-page-intro-padding-bottom-mobile, 36px);
    }

    .partnerships-page-lead {
        margin-bottom: var(--partnerships-page-lead-margin-bottom-mobile, 32px);
        font-size: var(--partnerships-page-lead-size-mobile, 16px);
    }

    .partnerships-page-benefits {
        grid-template-columns: 1fr;
        gap: var(--partnerships-page-benefits-gap-mobile, 14px);
    }

    .partnerships-page-grid-title {
        font-size: var(--partnerships-page-grid-title-size-mobile, 24px);
    }
}

/* =========================================================
   PROGRAM DETAIL — editorial block (What it is / What you get)
========================================================= */

.program-detail-intro {
    display: grid;
    gap: var(--program-detail-intro-gap);
    margin: 0 auto var(--site-section-header-content-gap, 48px);
    max-width: 880px;
}

.program-detail-intro-block {
    text-align: left;
}

.program-detail-intro-title {
    margin: 0 0 14px;
    color: var(--color-light);
    font-family: var(--global-heading-font-family);
    font-weight: var(--global-heading-font-weight);
    font-size: var(--program-detail-block-title-size);
    line-height: 1.15;
    letter-spacing: var(--global-heading-letter-spacing);
    text-transform: var(--global-heading-text-transform);
}

.program-detail-intro-body {
    margin: 0;
    color: rgba(250, 249, 254, 0.82);
    font-size: var(--program-detail-block-body-size);
    line-height: var(--program-detail-block-body-line-height);
}

.program-detail-benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--program-detail-benefits-gap);
}

.program-detail-benefits li {
    position: relative;
    padding-left: 26px;
    color: rgba(250, 249, 254, 0.82);
    font-size: var(--program-detail-block-body-size);
    line-height: 1.55;
}

.program-detail-benefits li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0.55em;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--program-detail-benefits-icon-color);
    box-shadow: 0 0 14px rgba(222, 36, 47, 0.32);
}

@media (max-width: 760px) {
    .program-detail-intro {
        gap: var(--program-detail-intro-gap-mobile);
    }

    .program-detail-intro-title {
        font-size: var(--program-detail-block-title-size-mobile);
    }

    .program-detail-intro-body,
    .program-detail-benefits li {
        font-size: var(--program-detail-block-body-size-mobile);
    }
}

/* Program detail — photo gallery (replaces hero card) */
.program-detail-gallery {
    margin: 0 auto;
    max-width: var(--programs-page-container-width, 1200px);
}

.program-detail-gallery-grid {
    display: grid;
    grid-template-columns: repeat(var(--program-detail-gallery-columns-desktop), minmax(0, 1fr));
    gap: var(--program-detail-gallery-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

.program-detail-gallery-item {
    margin: 0;
    border-radius: var(--program-detail-gallery-tile-radius);
    overflow: hidden;
}

.program-detail-gallery-trigger {
    display: block;
    width: 100%;
    min-height: var(--program-detail-gallery-tile-min-height);
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: zoom-in;
    overflow: hidden;
}

.program-detail-gallery-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: var(--program-detail-gallery-tile-min-height);
    object-fit: cover;
    object-position: center center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.program-detail-gallery-trigger:hover .program-detail-gallery-image,
.program-detail-gallery-trigger:focus-visible .program-detail-gallery-image {
    transform: scale(1.04);
}

.program-detail-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--program-detail-actions-gap);
    margin-top: var(--program-detail-actions-margin-top);
}

@media (max-width: 1024px) {
    .program-detail-gallery-grid {
        grid-template-columns: repeat(var(--program-detail-gallery-columns-tablet), minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .program-detail-gallery-grid {
        grid-template-columns: repeat(var(--program-detail-gallery-columns-mobile), minmax(0, 1fr));
        gap: var(--program-detail-gallery-gap-mobile);
    }

    .program-detail-gallery-trigger,
    .program-detail-gallery-image {
        min-height: var(--program-detail-gallery-tile-min-height-mobile);
    }
}

/* =========================================================
   CONTACT PAGE — reorder + responsive map
========================================================= */

.contact-page-flow--no-hero .contact-page-section--top {
    padding-top: var(--contact-page-no-hero-top-padding-desktop, 260px);
}

@media (max-width: 760px) {
    .contact-page-flow--no-hero .contact-page-section--top {
        padding-top: var(--contact-page-no-hero-top-padding-mobile, 180px);
    }
}

.contact-page-blocks {
    display: grid;
    gap: var(--contact-page-block-gap-desktop);
}

.contact-page-block-location,
.contact-page-block-info {
    display: block;
}

.contact-location-map-container .contact-location-map-wrap {
    height: var(--contact-page-map-height-desktop);
}

.contact-location-map-container .contact-location-map {
    width: 100%;
    height: 100%;
}

@media (max-width: 1024px) {
    .contact-location-map-container .contact-location-map-wrap {
        height: var(--contact-page-map-height-tablet);
    }
}

@media (max-width: 760px) {
    .contact-page-blocks {
        gap: var(--contact-page-block-gap-mobile);
    }

    .contact-location-map-container .contact-location-map-wrap {
        height: var(--contact-page-map-height-mobile);
    }
}

/* =========================================================
   SHARED EYEBROW → HEADING → TEXT → CONTENT RHYTHM
   Driven by --section-*-gap-* tokens so admin changes apply
   on every inner page AND on the front page in lockstep.
========================================================= */

/* Reset legacy fixed margins where they would fight the shared rhythm. */
.contact-location-eyebrow,
.partnerships-page-eyebrow,
.about-page-eyebrow,
.programs-page-eyebrow,
.gym-gallery-eyebrow,
.membership-eyebrow,
.partnerships-eyebrow,
.about-eyebrow,
.bmi-eyebrow,
.programs-intro-eyebrow,
.legal-page-heading-row .legal-page-heading-title {
    margin-bottom: 0;
}

/* Eyebrow → Heading */
.contact-location-eyebrow + .contact-location-title,
.partnerships-page-eyebrow + .partnerships-page-title,
.about-page-eyebrow + .about-page-title,
.programs-page-eyebrow + .programs-page-title,
.section-eyebrow + .section-title,
.gym-gallery-eyebrow + .gym-gallery-title,
.membership-eyebrow + .membership-title,
.partnerships-eyebrow + .partnerships-title,
.about-eyebrow + .about-title,
.bmi-eyebrow + .bmi-title,
.programs-intro-eyebrow + .programs-intro-title {
    margin-top: var(--section-eyebrow-heading-gap-desktop, 18px);
}

/* Heading → Text */
.contact-location-title + .contact-location-text,
.partnerships-page-title + .partnerships-page-subtitle,
.about-page-title + .about-page-subtitle,
.programs-page-title + .programs-page-subtitle,
.section-title + .section-text,
.gym-gallery-title + .gym-gallery-text,
.membership-title + .membership-text,
.partnerships-title + .partnerships-text,
.about-title + .about-text,
.bmi-title + .bmi-text,
.programs-intro-title + .programs-intro-text,
.legal-page-heading-title + .legal-page-heading-subtitle {
    margin-top: var(--section-heading-text-gap-desktop, 22px);
}

/* Heading block → first Content block (cards / grid / map / form / image / list) */
.contact-location-heading + .contact-location-map-container,
.contact-location-heading + .contact-info-grid,
.about-page-heading + .about-page-lead,
.about-page-heading + .about-page-grid,
.about-page-lead + .about-page-grid,
.partnerships-page-lead + .partnerships-page-benefits,
.partnerships-page-lead + .partnerships-page-grid,
.partnerships-page-grid-title + .partnerships-page-grid,
.partnerships-page-benefits + .partnerships-page-outro,
.legal-page-heading-row + .legal-content-card,
.gym-gallery-heading + .gym-gallery-grid,
.membership-heading + .membership-selector,
.membership-heading + .membership-cards,
.partnerships-heading + .partnerships-marquee,
.partnerships-heading + .partnerships-grid,
.about-content + .about-actions,
.bmi-heading + .bmi-container,
.programs-intro + .programs-grid {
    margin-top: var(--section-text-content-gap-desktop, 48px);
}

@media (max-width: 760px) {
    .contact-location-eyebrow + .contact-location-title,
    .partnerships-page-eyebrow + .partnerships-page-title,
    .about-page-eyebrow + .about-page-title,
    .programs-page-eyebrow + .programs-page-title,
    .section-eyebrow + .section-title,
    .gym-gallery-eyebrow + .gym-gallery-title,
    .membership-eyebrow + .membership-title,
    .partnerships-eyebrow + .partnerships-title,
    .about-eyebrow + .about-title,
    .bmi-eyebrow + .bmi-title,
    .programs-intro-eyebrow + .programs-intro-title {
        margin-top: var(--section-eyebrow-heading-gap-mobile, 14px);
    }

    .contact-location-title + .contact-location-text,
    .partnerships-page-title + .partnerships-page-subtitle,
    .about-page-title + .about-page-subtitle,
    .programs-page-title + .programs-page-subtitle,
    .section-title + .section-text,
    .gym-gallery-title + .gym-gallery-text,
    .membership-title + .membership-text,
    .partnerships-title + .partnerships-text,
    .about-title + .about-text,
    .bmi-title + .bmi-text,
    .programs-intro-title + .programs-intro-text,
    .legal-page-heading-title + .legal-page-heading-subtitle {
        margin-top: var(--section-heading-text-gap-mobile, 16px);
    }

    .contact-location-heading + .contact-location-map-container,
    .contact-location-heading + .contact-info-grid,
    .about-page-heading + .about-page-lead,
    .about-page-heading + .about-page-grid,
    .about-page-lead + .about-page-grid,
    .partnerships-page-lead + .partnerships-page-benefits,
    .partnerships-page-lead + .partnerships-page-grid,
    .partnerships-page-grid-title + .partnerships-page-grid,
    .partnerships-page-benefits + .partnerships-page-outro,
    .legal-page-heading-row + .legal-content-card,
    .gym-gallery-heading + .gym-gallery-grid,
    .membership-heading + .membership-selector,
    .membership-heading + .membership-cards,
    .partnerships-heading + .partnerships-marquee,
    .partnerships-heading + .partnerships-grid,
    .about-content + .about-actions,
    .bmi-heading + .bmi-container,
    .programs-intro + .programs-grid {
        margin-top: var(--section-text-content-gap-mobile, 32px);
    }

    .section-eyebrow, .hero-eyebrow {
        margin-bottom: var(--section-eyebrow-heading-gap-mobile, 14px);
    }

    .section-title, .page-title {
        margin-bottom: var(--section-heading-text-gap-mobile, 16px);
    }
}

/* =========================================================
   BOOKING — back-arrow button fit the chevron
========================================================= */

.booking-app-back,
.booking-back {
    width: var(--booking-back-size-desktop, 36px);
    height: var(--booking-back-size-desktop, 36px);
    min-width: var(--booking-back-size-desktop, 36px);
    border-radius: var(--booking-back-radius, 12px);
    background: var(--booking-back-bg, rgba(255, 255, 255, 0.055));
    color: var(--booking-back-color, #ffffff);
    border: 1px solid rgba(255, 255, 255, 0.10);
    padding: 0;
    display: inline-grid;
    place-items: center;
    line-height: 1;
    transition: background-color var(--transition-main), border-color var(--transition-main), transform var(--transition-main);
}

.booking-app-back:hover,
.booking-back:hover {
    background: var(--booking-back-bg-hover, rgba(255, 255, 255, 0.10));
}

.booking-app-back > span,
.booking-back > span {
    font-size: var(--booking-back-icon-size, 22px);
    line-height: 1;
    transform: translateY(-1px);
}

@media (max-width: 760px) {
    .booking-app-back,
    .booking-back {
        width: var(--booking-back-size-mobile, 40px);
        height: var(--booking-back-size-mobile, 40px);
        min-width: var(--booking-back-size-mobile, 40px);
    }

    .booking-app-back > span,
    .booking-back > span {
        font-size: var(--booking-back-icon-size-mobile, 24px);
    }
}

/* =========================================================
   FRONT PAGE — Partnerships CTA + About CTA
========================================================= */

.partnerships-cta-wrap {
    margin: var(--partnerships-cta-margin-top, 36px) auto 0;
    padding: 0 16px;
    display: flex;
    justify-content: center;
}

.partnerships-cta {
    min-width: var(--partnerships-cta-min-width, 220px);
}

.about-actions {
    margin: var(--about-cta-margin-top, 28px) auto 0;
    display: flex;
    justify-content: center;
}

.about-cta {
    min-width: var(--about-cta-min-width, 220px);
}

@media (max-width: 760px) {
    .partnerships-cta-wrap {
        margin-top: var(--partnerships-cta-margin-top-mobile, 28px);
    }

    .partnerships-cta,
    .about-cta {
        min-width: var(--front-cta-min-width-mobile, 180px);
    }

    .about-actions {
        margin-top: var(--about-cta-margin-top-mobile, 22px);
    }
}

/* =========================================================
   PARALLAX / SCROLL — lightweight, reduced-motion aware
========================================================= */

[data-parallax-target] {
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, var(--parallax-offset, 0), 0);
    transition: transform 50ms linear;
}

/* =========================================================
   REVEAL + INTERACTIVE ANIMATIONS
   Lightweight, GPU-friendly, prefers-reduced-motion safe.
========================================================= */

:root {
    --reveal-distance: var(--section-reveal-distance-desktop, 22px);
    --reveal-duration: var(--section-reveal-duration-desktop, 0.9s);
    --reveal-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 760px) {
    :root {
        --reveal-distance: var(--section-reveal-distance-mobile, 8px);
        --reveal-duration: var(--section-reveal-duration-mobile, 0.32s);
        --site-reveal-distance: var(--section-reveal-distance-mobile, 8px);
        --site-reveal-duration: var(--section-reveal-duration-mobile, 0.32s);
    }
}

[data-reveal] {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance, 24px), 0);
    transition:
        opacity var(--reveal-duration, 720ms) var(--reveal-easing) var(--reveal-delay, 0ms),
        transform var(--reveal-duration, 720ms) var(--reveal-easing) var(--reveal-delay, 0ms);
}

[data-reveal].is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

[data-reveal="fade"] {
    transform: none;
}

[data-reveal="scale"] {
    transform: scale(0.96);
}
[data-reveal="scale"].is-revealed {
    transform: scale(1);
}

[data-reveal="left"] {
    transform: translate3d(calc(-1 * var(--reveal-distance, 24px)), 0, 0);
}
[data-reveal="right"] {
    transform: translate3d(var(--reveal-distance, 24px), 0, 0);
}

/* When reveal JS is unavailable or the user prefers reduced motion,
   show everything immediately — never trap content invisible. */
.no-js [data-reveal],
html.no-reveal [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-reveal].is-revealed {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Micro-interaction polish on cards / partner logos / info cards.
   Honors prefers-reduced-motion. */
.program-card,
.partnerships-page-card,
.about-page-block,
.partnerships-page-benefit,
.contact-info-card,
.gym-gallery-item,
.legal-content-card {
    transition:
        transform 380ms var(--reveal-easing, cubic-bezier(0.22, 1, 0.36, 1)),
        box-shadow 380ms var(--reveal-easing, cubic-bezier(0.22, 1, 0.36, 1)),
        border-color 380ms var(--reveal-easing, cubic-bezier(0.22, 1, 0.36, 1));
}

.partnerships-page-card:hover,
.about-page-block:hover,
.partnerships-page-benefit:hover {
    transform: translate3d(0, -4px, 0);
}

@media (prefers-reduced-motion: reduce) {
    .program-card,
    .partnerships-page-card,
    .about-page-block,
    .partnerships-page-benefit,
    .contact-info-card,
    .gym-gallery-item {
        transition: none !important;
        transform: none !important;
    }
}

body.site-parallax-disabled [data-parallax-target] {
    transform: none !important;
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    [data-parallax-target] {
        transform: none !important;
        transition: none !important;
    }
}