/* ==============================================
   RESPONSIVE UTILITIES
   ============================================== */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 640px) {
    .cta-container {
        padding: 64px 24px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .md\:hidden {
        display: none;
    }

    .md\:block {
        display: block;
    }

    .md\:flex {
        display: flex;
    }

    .md\:flex-row {
        flex-direction: row;
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:gap-12 {
        gap: 3rem;
    }

    .md\:text-5xl {
        font-size: var(--journey-h2-section);
        line-height: 1;
    }

    .md\:text-6xl {
        font-size: var(--journey-h2-section);
        line-height: 1;
    }

    .md\:text-7xl {
        font-size: var(--journey-h1-hero);
        line-height: 1;
    }

    .md\:text-9xl {
        font-size: var(--journey-h1-hero-lg);
        line-height: 1;
    }

    .md\:p-12 {
        padding: 3rem;
    }

    .md\:p-16 {
        padding: 4rem;
    }

    .md\:py-20 {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .md\:mb-16 {
        margin-bottom: 4rem;
    }

    .md\:mb-12 {
        margin-bottom: 3rem;
    }

    .md\:space-y-0 > * + * {
        margin-top: 0;
    }

    .md\:text-right {
        text-align: right;
    }

    .md\:pr-16 {
        padding-right: 4rem;
    }

    .md\:pl-16 {
        padding-left: 4rem;
    }

    .md\:justify-start {
        justify-content: flex-start;
    }

    .md\:justify-end {
        justify-content: flex-end;
    }

    .md\:space-y-16 > * + * {
        margin-top: 4rem;
    }

    .md\:w-5\/12 {
        width: 41.666667%;
    }

    .md\:left-1\/2 {
        left: 50%;
    }

    .md\:ml-0 {
        margin-left: 0;
    }

    .main-heading {
        font-size: var(--journey-h1-hero);
    }

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

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lg\:gap-8 {
        gap: 2rem;
    }

    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .lg\:col-span-1 {
        grid-column: span 1 / span 1;
    }

    .lg\:col-span-4 {
        grid-column: span 4 / span 4;
    }

    .lg\:col-span-5 {
        grid-column: span 5 / span 5;
    }

    .lg\:col-span-7 {
        grid-column: span 7 / span 7;
    }

    .lg\:col-span-8 {
        grid-column: span 8 / span 8;
    }

    .lg\:order-1 {
        order: 1;
    }

    .lg\:order-2 {
        order: 2;
    }
}

@media (min-width: 1024px) {
    .cta-container {
        padding: 64px 32px;
    }
}

/* Navbar responsive */
@media (max-width: 1024px) {
    .nav-links,
    .nav-container > .cta-button {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
    }

    .nav-container {
        padding: 0 24px;
    }
}

/* Additional order utilities for responsiveness */
.order-1 { order: 1; }
.order-2 { order: 2; }

/* ==============================================
   THE JOURNEY PAGE - SECTION-SPECIFIC STYLES
   ============================================== */

/* ==============================================
   JOURNEY TYPOGRAPHY - UNIFIED STYLES
   ============================================== */

/* Global Z-Index Fix for All Journey Section Overlays */
/* Ensures gradient overlays (::before) stay behind content */
.hero-box::before,
.akzeptanz-box::before,
.entwicklung-box::before,
.feature-card::before,
.meistern-box::before,
.lbc-box::before,
.apple-corners::before,
[class*="-box"]::before {
    z-index: 0 !important;
}

/* Ensure all direct children of glass boxes are above overlays */
.hero-box > *,
.akzeptanz-box > *,
.entwicklung-box > *,
.feature-card > *,
.meistern-box > *,
.lbc-box > *,
.apple-corners > * {
    position: relative;
    z-index: 1;
}

/* Hero Title - Used in all section hero areas */
.journey-hero-title {
    font-family: var(--font-family-heading);
    font-size: var(--journey-h1-hero);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}

@media (min-width: 768px) {
    .journey-hero-title {
        font-size: var(--journey-h1-hero-lg);
    }
}

/* Section Title - Used for main content section headings */
.journey-section-title {
    font-family: var(--font-family-heading);
    font-size: var(--journey-h2-section);
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}

@media (min-width: 768px) {
    .journey-section-title {
        font-size: var(--journey-h2-section-lg);
    }
}

/* Card Title - Used for box/card headings (h3) */
.journey-card-title {
    font-family: var(--font-family-heading);
    font-size: var(--journey-h3-card);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

/* Large Card Title - Used for prominent card headings */
.journey-card-title-lg {
    font-family: var(--font-family-heading);
    font-size: var(--journey-h3-card-lg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

/* Feature Title - Used for small feature/benefit headings (h4) */
.journey-feature-title {
    font-family: var(--font-family-primary);
    font-size: var(--journey-text-description); /* 16px */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}

/* Hero Description - Used in hero sections */
.journey-hero-description {
    font-family: var(--font-family-primary);
    font-size: var(--journey-text-description);
    line-height: 1.625;
    color: #ffffff !important;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.3), 0 4px 12px rgba(0, 0, 0, 0.8);
}

/* Body Text - Used for main paragraph content */
.journey-body-text {
    font-family: var(--font-family-primary);
    font-size: var(--journey-text-body);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
}

/* ==============================================
   STANDARDIZED HEADING DIVIDERS
   Automatic color-matched dividers for all sections
   ============================================== */

/* H1/H2 Dividers - Luxury style with gradient fade */
.journey-hero-title::after,
.journey-section-title::after {
    content: '';
    display: block;
    height: 1px;
    width: 5rem;
    background: linear-gradient(to right, transparent, white, transparent);
    margin: 2rem auto;
}

/* H3 Large Dividers - Medium, centered with gradient */
.journey-card-title-lg::after {
    content: '';
    display: block;
    height: var(--divider-h3plus-height);
    width: var(--divider-h3plus-width);
    margin: var(--divider-to-heading-gap) auto var(--divider-to-content-gap) auto;
}

/* H3+ Dividers - Small, left-aligned with gradient */
.journey-card-title::after,
.journey-feature-title::after {
    content: '';
    display: block;
    height: var(--divider-h3plus-height);
    width: var(--divider-h3plus-width);
    margin: var(--divider-to-heading-gap) 0 var(--divider-to-content-gap) 0;
}

/* Red Section Divider Colors */
.red-section .journey-hero-title::after,
.red-section .journey-section-title::after {
    background: linear-gradient(to right, transparent, var(--red-main), transparent);
}

.red-section .journey-card-title-lg::after {
    background: linear-gradient(to right, var(--red-secondary), transparent);
}

.red-section .journey-card-title::after,
.red-section .journey-feature-title::after {
    background: linear-gradient(to right, var(--red-secondary), transparent);
}

/* Orange Section Divider Colors */
.orange-section .journey-hero-title::after,
.orange-section .journey-section-title::after {
    background: linear-gradient(to right, transparent, var(--orange-main), transparent);
}

.orange-section .journey-card-title-lg::after {
    background: linear-gradient(to right, var(--orange-secondary), transparent);
}

.orange-section .journey-card-title::after,
.orange-section .journey-feature-title::after {
    background: linear-gradient(to right, var(--orange-secondary), transparent);
}

/* Green Section Divider Colors */
.green-section-journey .journey-hero-title::after,
.green-section-journey .journey-section-title::after {
    background: linear-gradient(to right, transparent, var(--green-main), transparent);
}

.green-section-journey .journey-card-title-lg::after {
    background: linear-gradient(to right, var(--green-secondary), transparent);
}

.green-section-journey .journey-card-title::after,
.green-section-journey .journey-feature-title::after {
    background: linear-gradient(to right, var(--green-secondary), transparent);
}

/* Cyan Section Divider Colors */
.cyan-section-wrapper .journey-hero-title::after,
.cyan-section-wrapper .journey-section-title::after {
    background: linear-gradient(to right, transparent, var(--cyan-main), transparent);
}

.cyan-section-wrapper .journey-card-title-lg::after {
    background: linear-gradient(to right, var(--cyan-secondary), transparent);
}

.cyan-section-wrapper .journey-card-title::after,
.cyan-section-wrapper .journey-feature-title::after {
    background: linear-gradient(to right, var(--cyan-secondary), transparent);
}

/* Purple Section Divider Colors */
.purple-section .journey-hero-title::after,
.purple-section .journey-section-title::after {
    background: linear-gradient(to right, transparent, var(--purple-main), transparent);
}

.purple-section .journey-card-title-lg::after {
    background: linear-gradient(to right, var(--purple-secondary), transparent);
}

.purple-section .journey-card-title::after,
.purple-section .journey-feature-title::after {
    background: linear-gradient(to right, var(--purple-secondary), transparent);
}

/* ============================================
   UNIVERSAL H1 DIVIDER - DISABLED
   Removed to clean up About Us page and other sections
   Use luxury-divider component instead for decorative dividers
   ============================================ */
/* h1::after {
    content: '';
    display: block;
    width: 5rem;
    height: 1px;
    background: linear-gradient(to right, transparent, white, transparent);
    margin: 2rem auto;
} */

/* Service Page - Remove H1 divider, add to tagline instead */
[data-page="core"] .service-hero-title::after,
[data-page="gun"] .service-hero-title::after,
[data-page="shield"] .service-hero-title::after {
    display: none;
}

/* Service Page Tagline Dividers - Divider appears AFTER tagline */
[data-page="core"] .service-hero-tagline::after {
    content: '';
    display: block;
    width: 12rem;
    height: 0.25rem;
    background: linear-gradient(to right, transparent, var(--service-core-main), transparent);
    margin: 2rem auto 2rem auto;
}

[data-page="gun"] .service-hero-tagline::after {
    content: '';
    display: block;
    width: 12rem;
    height: 0.25rem;
    background: linear-gradient(to right, transparent, var(--service-gun-main), transparent);
    margin: 2rem auto 2rem auto;
}

[data-page="shield"] .service-hero-tagline::after {
    content: '';
    display: block;
    width: 12rem;
    height: 0.25rem;
    background: linear-gradient(to right, transparent, var(--service-shield-main), transparent);
    margin: 2rem auto 2rem auto;
}

/* Journey Section Accent Colors for H1 Dividers */
.red-section h1::after {
    background: linear-gradient(to right, transparent, var(--red-main), transparent);
}

.orange-section h1::after {
    background: linear-gradient(to right, transparent, var(--orange-main), transparent);
}

.green-section-journey h1::after {
    background: linear-gradient(to right, transparent, var(--green-main), transparent);
}

.cyan-section-wrapper h1::after {
    background: linear-gradient(to right, transparent, var(--cyan-main), transparent);
}

.purple-section h1::after {
    background: linear-gradient(to right, transparent, var(--purple-main), transparent);
}

/* Body Text Large - Used for emphasized paragraph content */
.journey-body-text-lg {
    font-family: var(--font-family-primary);
    font-size: var(--journey-text-body);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
}

/* Feature Text - Used for feature/benefit descriptions */
.journey-feature-text {
    font-family: var(--font-family-primary);
    font-size: var(--journey-text-body);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
}

/* Accent Color Classes - For section-specific MAIN colors (H1, H2, Icons) */
.red-accent-color {
    color: var(--red-accent);
    text-shadow: var(--red-glow);
}

.orange-accent-color {
    color: var(--orange-accent);
    text-shadow: var(--orange-glow);
}

.green-accent-color {
    color: var(--green-accent);
    text-shadow: var(--green-glow);
}

.cyan-accent-color {
    color: var(--cyan-accent);
    text-shadow: var(--cyan-glow);
}

.purple-accent-color {
    color: var(--purple-accent);
    text-shadow: var(--purple-glow);
}

/* Secondary Color Classes - For section-specific SECONDARY colors (H3, H4, smaller headings) */
.red-secondary-color {
    color: var(--red-secondary);
    text-shadow: var(--red-secondary-glow);
}

.orange-secondary-color {
    color: var(--orange-secondary);
    text-shadow: var(--orange-secondary-glow);
}

.green-secondary-color {
    color: var(--green-secondary);
    text-shadow: var(--green-secondary-glow);
}

.cyan-secondary-color {
    color: var(--cyan-secondary);
    text-shadow: var(--cyan-secondary-glow);
}

.purple-secondary-color {
    color: var(--purple-secondary);
    text-shadow: var(--purple-secondary-glow);
}

/* Icon Color Classes - For SVG and icon elements */
.red-icon-color {
    color: var(--red-accent);
}

.orange-icon-color {
    color: var(--orange-accent);
}

.orange-icon-fill {
    fill: var(--orange-accent);
}

.green-icon-color {
    color: var(--green-accent);
}

.purple-icon-color {
    color: var(--purple-accent);
}

/* Base Text - Used for smaller content */
.journey-base-text {
    font-family: var(--font-family-primary);
    font-size: var(--journey-text-body);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
}

/* Red Section - Pain/Transformation Theme */
.red-section {
    position: relative;
    background-image: url('https://development.daily-marketing.de/wp-content/uploads/2025/10/red-1-1-scaled-1.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

.red-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 700px;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.95) 80%, rgba(0,0,0,1) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Section-specific CTA buttons all extend the unified journey button */
.red-cta-button,
.orange-cta-button,
.green-cta-button,
.cyan-cta-button,
.purple-cta-button {
    font-family: var(--font-family-primary);
    background: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    position: relative;
    overflow: hidden;
    z-index: 100 !important;
    isolation: isolate;
}

.red-cta-button::before,
.orange-cta-button::before,
.green-cta-button::before,
.cyan-cta-button::before,
.purple-cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

.red-cta-button > *,
.orange-cta-button > *,
.green-cta-button > *,
.cyan-cta-button > *,
.purple-cta-button > * {
    position: relative;
    z-index: 2;
}

.red-cta-button:hover::before,
.orange-cta-button:hover::before,
.green-cta-button:hover::before,
.cyan-cta-button:hover::before,
.purple-cta-button:hover::before {
    left: 100%;
}

.red-cta-button:hover,
.orange-cta-button:hover,
.green-cta-button:hover,
.cyan-cta-button:hover,
.purple-cta-button:hover {
    transform: translateY(-2px) !important;
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

.red-box-hover {
    transition: all 0.3s ease-in-out;
}

.red-box-hover:hover {
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.5), 0 0 60px rgba(239, 68, 68, 0.3), inset 0 0 20px rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.6) !important;
}

/* Orange Section - Leadership/Guidance Theme */
.orange-section {
    position: relative;
    background-image: url('https://development.daily-marketing.de/wp-content/uploads/2025/10/orange-1-1-scaled-1.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

.orange-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 700px;
    background: linear-gradient(to top, transparent 0%, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.95) 80%, rgba(0,0,0,1) 100%);
    pointer-events: none;
    z-index: 0;
}

.orange-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 500px;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.9) 100%);
    pointer-events: none;
    z-index: 0;
}

@keyframes luxury-pulse-orange {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 140, 66, 0.6),
                    0 0 40px rgba(255, 140, 66, 0.4),
                    0 0 60px rgba(255, 140, 66, 0.2);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 140, 66, 0.8),
                    0 0 60px rgba(255, 140, 66, 0.6),
                    0 0 90px rgba(255, 140, 66, 0.4);
    }
}

.orange-box-glow {
    transition: all 0.3s ease-in-out;
}

.orange-box-glow:hover {
    box-shadow: 0 0 30px rgba(255, 140, 66, 0.5), 0 0 60px rgba(255, 140, 66, 0.3), inset 0 0 20px rgba(255, 140, 66, 0.2);
    border-color: rgba(255, 140, 66, 0.6);
}

/* Journey Sections - Unified Spacing Component */
.journey-section-spacing {
    padding: var(--journey-section-padding);
    position: relative;
    z-index: 10;
}

.journey-section-container {
    max-width: var(--journey-container-max-width);
    margin: 0 auto;
    padding: var(--journey-container-padding);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .journey-section-spacing {
        padding: var(--journey-section-padding-mobile);
    }

    .journey-section-container {
        padding: var(--journey-container-padding-mobile);
    }
}

/* Orange Karriere Section */
.orange-karriere-section {
    padding: 80px 0 20rem;
    position: relative;
    z-index: 20;
}

.orange-karriere-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.orange-karriere-title {
    font-family: var(--font-family-heading);
    font-size: var(--journey-h2-section);
    text-align: center;
    margin-bottom: 20px;
    text-shadow: var(--orange-glow);
    line-height: 1.2;
}

.orange-karriere-title-white {
    color: #ffffff;
}

.orange-karriere-title-orange {
    color: var(--orange-accent);
}

.orange-karriere-underline {
    height: 4px;
    width: 120px;
    background: linear-gradient(to right, transparent, var(--orange-accent), transparent);
    margin: 0 auto 40px auto;
}

.orange-karriere-outer-box {
    backdrop-filter: var(--journey-glass-blur);
    -webkit-backdrop-filter: var(--journey-glass-blur);
    background: var(--journey-glass-base);
    border: var(--journey-glass-border);
    border-radius: var(--journey-glass-radius);
    padding: 60px 48px;
    position: relative;
    overflow: hidden;
}

.orange-karriere-outer-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(139, 69, 19, 0.6) 0%, rgba(88, 44, 13, 0.4) 30%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

.orange-karriere-outer-box > * {
    position: relative;
    z-index: 2;
}

.orange-karriere-outer-box {
    transition: all 0.3s ease;
}

.orange-karriere-outer-box:hover {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 140, 66, 0.5), 0 0 60px rgba(255, 140, 66, 0.3);
    border-color: rgba(255, 140, 66, 0.6);
}

.orange-karriere-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 60px;
    align-items: stretch;
}

.orange-karriere-grid > * {
    height: 100%;
}

.orange-karriere-left-box {
    backdrop-filter: var(--journey-glass-blur);
    -webkit-backdrop-filter: var(--journey-glass-blur);
    background: var(--journey-glass-base);
    border: var(--journey-glass-border);
    border-radius: var(--journey-glass-radius);
    padding: var(--journey-glass-padding);
    position: relative;
    overflow: hidden;
}

.orange-karriere-left-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(139, 69, 19, 0.6) 0%, rgba(88, 44, 13, 0.4) 30%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

.orange-karriere-left-box > * {
    position: relative;
    z-index: 2;
}

.orange-karriere-left-box {
    transition: all 0.3s ease;
}

.orange-karriere-left-box:hover {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 140, 66, 0.5), 0 0 60px rgba(255, 140, 66, 0.3);
    border-color: rgba(255, 140, 66, 0.6);
}

.orange-karriere-subtitle {
    font-family: var(--font-family-primary);
    font-size: var(--journey-text-description);
    color: var(--orange-accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.orange-karriere-subtitle-line {
    height: 2px;
    width: 60px;
    background: linear-gradient(to right, var(--orange-accent), transparent);
    margin-bottom: 24px;
}

.orange-karriere-text {
    font-family: var(--font-family-primary);
    font-size: var(--journey-text-body);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 24px;
}

.orange-karriere-right-box {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
}

.orange-karriere-feature {
    flex: 1;
    backdrop-filter: var(--journey-glass-blur);
    -webkit-backdrop-filter: var(--journey-glass-blur);
    background: var(--journey-glass-base);
    border: var(--journey-glass-border);
    border-radius: var(--journey-glass-radius);
    padding: 32px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

.orange-karriere-feature::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(139, 69, 19, 0.4) 0%, rgba(88, 44, 13, 0.2) 30%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

.orange-karriere-feature:hover {
    border-color: rgba(255, 140, 66, 0.6);
    box-shadow: 0 8px 24px rgba(255, 140, 66, 0.2), 0 0 30px rgba(255, 140, 66, 0.5), 0 0 60px rgba(255, 140, 66, 0.3);
}

.orange-karriere-feature > * {
    position: relative;
    z-index: 2;
}

.orange-karriere-feature-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}

.orange-karriere-feature-content {
    flex: 1;
}

.orange-karriere-feature-title {
    font-family: var(--font-family-heading);
    font-size: var(--journey-h3-card);
    color: var(--orange-accent);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.orange-karriere-feature-line {
    height: 2px;
    width: 40px;
    background: linear-gradient(to right, var(--orange-accent), transparent);
    margin-bottom: 12px;
}

.orange-karriere-feature-text {
    font-family: var(--font-family-primary);
    font-size: var(--journey-text-body);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
}

/* Responsive Design */
@media (max-width: 768px) {
    .orange-karriere-outer-box {
        padding: 32px 24px;
    }

    .orange-karriere-title {
        font-size: var(--journey-h2-section);
    }

    .orange-karriere-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .orange-karriere-left-box {
        padding: 32px;
    }

    .orange-karriere-feature {
        padding: 24px;
        flex-direction: column;
        gap: 16px;
    }

    .orange-karriere-feature-icon {
        width: 40px;
        height: 40px;
    }
}

/* Green Section Journey - Discovery Theme */
.green-section-journey {
    position: relative;
    background-image: url('https://development.daily-marketing.de/wp-content/uploads/2025/10/green-1-1-scaled-1.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

.green-section-journey::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 500px;
    background: linear-gradient(to top, transparent 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.9) 100%);
    pointer-events: none;
    z-index: 0;
}

.green-section-journey::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 700px;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.95) 80%, rgba(0,0,0,1) 100%);
    pointer-events: none;
    z-index: 0;
}

.green-box-hover {
    transition: all 0.3s ease-in-out;
}

.green-box-hover:hover {
    box-shadow: 0 0 30px rgba(110, 231, 183, 0.5), 0 0 60px rgba(110, 231, 183, 0.3), inset 0 0 20px rgba(110, 231, 183, 0.2) !important;
    border-color: rgba(110, 231, 183, 0.6) !important;
}

/* ================================================
   CYAN SECTION - ACCEPTANCE THEME (COMPLETE)
   ================================================ */

/* Cyan Section Wrapper with Background Image and Parallax */
.cyan-section-wrapper {
    background: url('https://development.daily-marketing.de/wp-content/uploads/2025/10/blue-1-1-scaled-1.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
    position: relative;
}

/* Cyan Section - Top fade from green section */
.cyan-section-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 500px;
    background: linear-gradient(to top, transparent 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.9) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Cyan Section - Bottom fade like orange section top */
.cyan-section-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 700px;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.95) 80%, rgba(0,0,0,1) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Cyan Section Container */
.cyan-section {
    min-height: 100vh;
    position: relative;
    padding: 4rem 2rem;
}

/* Hero Section */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16rem 1rem 2rem;
    position: relative;
    z-index: 10;
}

.hero-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

.hero-box {
    background: var(--journey-glass-base);
    backdrop-filter: var(--journey-glass-blur);
    -webkit-backdrop-filter: var(--journey-glass-blur);
    border: var(--journey-glass-border);
    border-radius: var(--journey-glass-radius);
    padding: 4rem 3rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.hero-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--journey-gradient-cyan);
    pointer-events: none;
}

.hero-box {
    transition: all 0.3s ease;
}

.hero-box:hover {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(103, 232, 249, 0.5), 0 0 60px rgba(103, 232, 249, 0.3);
    border-color: rgba(103, 232, 249, 0.6);
}

.hero-title {
    font-family: var(--font-family-heading);
    font-size: clamp(3rem, 6vw, 5rem);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}

.hero-description {
    font-family: var(--font-family-primary);
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: #67e8f9;
    max-width: 900px;
    margin: 0 auto 2rem;
    line-height: 1.8;
    position: relative;
    z-index: 1;
}

.hero-divider {
    height: 4px;
    width: 8rem;
    background: linear-gradient(to right, transparent, var(--color-cyan), transparent);
    margin-top: var(--divider-to-heading-gap); /* 1rem - space after heading */
    margin-bottom: var(--divider-to-content-gap); /* 1rem - space before content */
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.hero-button-container {
    padding-top: 1.5rem;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.content-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

/* Top Section: DIE KRAFT DER AKZEPTANZ with Image */
.akzeptanz-section {
    margin-bottom: 2rem;
}

.akzeptanz-box {
    background: var(--journey-glass-base);
    backdrop-filter: var(--journey-glass-blur);
    -webkit-backdrop-filter: var(--journey-glass-blur);
    border: var(--journey-glass-border);
    border-radius: var(--journey-glass-radius);
    padding: var(--journey-glass-padding);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.akzeptanz-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--journey-gradient-cyan);
    pointer-events: none;
}

.akzeptanz-box {
    transition: all 0.3s ease;
}

.akzeptanz-box:hover {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(103, 232, 249, 0.5), 0 0 60px rgba(103, 232, 249, 0.3);
    border-color: rgba(103, 232, 249, 0.6);
}

.akzeptanz-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

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

.akzeptanz-title {
    font-family: var(--font-family-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.3;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}

.akzeptanz-text .divider {
    height: 1px;
    width: 5rem;
    background: linear-gradient(to right, transparent, white, transparent);
    margin: 2rem auto;
}

.akzeptanz-description {
    font-size: var(--journey-text-description); /* 20px */
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.8;
}

.akzeptanz-image {
    display: flex;
    justify-content: center;
}

.akzeptanz-image img {
    width: 100%;
    max-width: 550px;
    height: auto;
    border-radius: var(--journey-glass-radius);
    border: var(--journey-glass-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    object-fit: cover;
}

/* Bottom Section: IHRE ENTWICKLUNG + 3 Features */
.bottom-section {
    position: relative;
    z-index: 10;
}

.bottom-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

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

/* Left Box: IHRE ENTWICKLUNG */
.entwicklung-box {
    background: var(--journey-glass-base);
    backdrop-filter: var(--journey-glass-blur);
    -webkit-backdrop-filter: var(--journey-glass-blur);
    border: var(--journey-glass-border);
    border-radius: var(--journey-glass-radius);
    padding: var(--journey-glass-padding);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
    height: 100%;
}

.entwicklung-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--journey-gradient-cyan);
    pointer-events: none;
}

.entwicklung-box {
    transition: all 0.3s ease;
}

.entwicklung-box:hover {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(103, 232, 249, 0.5), 0 0 60px rgba(103, 232, 249, 0.3);
    border-color: rgba(103, 232, 249, 0.6);
}

.entwicklung-title {
    font-family: var(--font-family-heading);
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    line-height: 1.2;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
    position: relative;
    z-index: 1;
    text-align: center;
}

.entwicklung-box .divider {
    height: 1px;
    width: 5rem;
    background: linear-gradient(to right, transparent, white, transparent);
    margin: 2rem auto;
}

.entwicklung-description {
    font-size: var(--journey-text-description); /* 20px */
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.8;
    position: relative;
    z-index: 1;
    text-align: center;
}

/* Right Column: 3 Features Stacked Vertically */
.features-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.feature-card {
    background: var(--journey-glass-base);
    backdrop-filter: var(--journey-glass-blur);
    -webkit-backdrop-filter: var(--journey-glass-blur);
    border: var(--journey-glass-border);
    border-radius: var(--journey-glass-radius);
    padding: var(--journey-glass-padding);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--journey-gradient-cyan);
    pointer-events: none;
}

.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(103, 232, 249, 0.5), 0 0 60px rgba(103, 232, 249, 0.3);
    border-color: rgba(103, 232, 249, 0.6);
}

.feature-icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    color: var(--color-cyan);
    position: relative;
    z-index: 1;
}

.feature-icon svg {
    width: 100%;
    height: 100%;
}

.feature-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.feature-title {
    font-family: var(--font-family-heading);
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    color: var(--color-cyan);
    margin-bottom: 0.75rem;
    letter-spacing: 0.05em;
}

.feature-content .divider {
    height: 1px;
    width: 5rem;
    background: linear-gradient(to right, transparent, white, transparent);
    margin: 2rem auto;
}

.feature-description {
    font-size: var(--journey-text-description); /* 20px */
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.8;
}

/* Meistern Sie Section */
.meistern-section {
    padding: 4rem 2rem;
    position: relative;
    z-index: 10;
}

.meistern-box {
    background: var(--journey-glass-base);
    backdrop-filter: var(--journey-glass-blur);
    -webkit-backdrop-filter: var(--journey-glass-blur);
    border: var(--journey-glass-border);
    border-radius: var(--journey-glass-radius);
    padding: var(--journey-glass-padding);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.meistern-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--journey-gradient-cyan);
    pointer-events: none;
}

.meistern-box {
    transition: all 0.3s ease;
}

.meistern-box:hover {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(103, 232, 249, 0.5), 0 0 60px rgba(103, 232, 249, 0.3);
    border-color: rgba(103, 232, 249, 0.6);
}

.meistern-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    position: relative;
    z-index: 1;
}

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

.meistern-main-title {
    font-family: var(--font-family-heading);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    line-height: 1.2;
    margin-bottom: 1rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.meistern-divider {
    height: 1px;
    width: 5rem;
    background: linear-gradient(to right, transparent, white, transparent);
    margin: 2rem auto;
}

.meistern-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

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

.meistern-card {
    backdrop-filter: var(--journey-glass-blur);
    -webkit-backdrop-filter: var(--journey-glass-blur);
    border: var(--journey-glass-border);
    border-radius: var(--journey-glass-radius);
    padding: 2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.meistern-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 30px rgba(103, 232, 249, 0.5), 0 0 60px rgba(103, 232, 249, 0.3);
    border-color: rgba(103, 232, 249, 0.6);
}

.meistern-card-icon {
    width: 3rem;
    height: 3rem;
    color: var(--color-cyan);
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.meistern-card-icon svg {
    width: 100%;
    height: 100%;
}

.meistern-card-content {
    position: relative;
    z-index: 1;
}

.meistern-card-title {
    font-family: var(--font-family-heading);
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    color: var(--color-cyan);
    margin-bottom: 0.75rem;
    letter-spacing: 0.05em;
}

.meistern-card-divider {
    height: 2px;
    width: 3rem;
    background: linear-gradient(to right, var(--color-cyan), transparent);
    margin-top: var(--divider-to-heading-gap); /* 1rem - space after heading */
    margin-bottom: var(--divider-to-content-gap); /* 1rem - space before content */
}

.meistern-card-description {
    font-family: var(--font-family-primary);
    font-size: var(--journey-text-description); /* 20px */
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.8;
}

/* LBC Card */
.lbc-card {
    backdrop-filter: var(--journey-glass-blur);
    -webkit-backdrop-filter: var(--journey-glass-blur);
    border: var(--journey-glass-border);
    border-radius: var(--journey-glass-radius);
    padding: var(--journey-glass-padding);
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.lbc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(103, 232, 249, 0.5), 0 0 60px rgba(103, 232, 249, 0.3);
    border-color: rgba(103, 232, 249, 0.6);
}

.lbc-icon {
    width: 4rem;
    height: 4rem;
    color: var(--color-cyan);
    margin: 0 auto 1.5rem;
    position: relative;
    z-index: 1;
}

.lbc-icon svg {
    width: 100%;
    height: 100%;
}

.lbc-title {
    font-family: var(--font-family-heading);
    font-size: clamp(2rem, 3vw, 2.5rem);
    color: var(--color-cyan);
    margin-bottom: 1.5rem;
    letter-spacing: 0.1em;
    text-align: center;
    position: relative;
    z-index: 1;
}

.lbc-divider {
    height: 2px;
    width: 4rem;
    background: linear-gradient(to right, var(--color-cyan), transparent);
    margin-top: var(--divider-to-heading-gap); /* 1rem - space after heading */
    margin-bottom: 1.5rem; /* Increased spacing before content */
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.lbc-description {
    font-family: var(--font-family-primary);
    font-size: var(--journey-text-description); /* 20px */
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.8;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

/* Final Spacer */
.final-spacer {
    padding: 4rem 1rem 16rem;
    position: relative;
    z-index: 10;
}

/* Legacy Cyan Section Utilities */
@keyframes lightning-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.cyan-box-glow {
    transition: all 0.3s ease-in-out;
}

.cyan-box-glow:hover {
    box-shadow: 0 0 30px rgba(103, 232, 249, 0.5), 0 0 60px rgba(103, 232, 249, 0.3), inset 0 0 20px rgba(103, 232, 249, 0.2);
    border-color: rgba(103, 232, 249, 0.6);
}

/* Responsive Adjustments for Cyan Section */
@media (max-width: 1024px) {
    .cyan-section {
        padding: 3rem 1.5rem;
    }

    .akzeptanz-box {
        padding: 2.5rem 2rem;
    }

    .akzeptanz-grid {
        gap: 2rem;
    }

    .bottom-grid {
        grid-template-columns: 1fr;
    }

    .entwicklung-box {
        padding: 2rem;
    }

    .feature-card {
        padding: 1.75rem 2rem;
    }
}

@media (max-width: 768px) {
    .cyan-section {
        padding: 2rem 1rem;
    }

    .hero-section {
        padding: 4rem 1rem 2rem;
    }

    .hero-box {
        padding: 2.5rem 1.5rem;
    }

    .akzeptanz-box {
        padding: 2rem 1.5rem;
    }

    .feature-card {
        flex-direction: column;
        padding: 1.5rem;
        gap: 1rem;
    }

    .feature-icon {
        width: 2.5rem;
        height: 2.5rem;
    }

    .meistern-section {
        padding: 2rem 1rem;
    }

    .meistern-box {
        padding: 2rem 1.5rem;
    }
}

/* Purple Section - Achievement/Levitation Theme */
.purple-section {
    position: relative;
    background-image: url('https://development.daily-marketing.de/wp-content/uploads/2025/10/purple-1-2-scaled-1.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

.purple-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 700px;
    background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.95) 10%, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0.5) 60%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.purple-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 700px;
    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.95) 10%, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0.5) 60%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.purple-box-hover {
    transition: all 0.3s ease-in-out;
}

.purple-box-hover:hover {
    box-shadow: 0 0 30px rgba(233, 213, 255, 0.5), 0 0 60px rgba(233, 213, 255, 0.3), inset 0 0 20px rgba(233, 213, 255, 0.2) !important;
    border-color: rgba(233, 213, 255, 0.6) !important;
}

/* ==============================================
   UNIFIED BOX GRADIENTS FOR ALL JOURNEY SECTIONS
   Using ::before pseudo-elements (cyan-section method)
   IMPORTANT: Excludes buttons from gradient overlay
   ============================================== */

/* Red Section - Apple Corners Box Gradients (excluding buttons) */
.red-section .apple-corners:not(button):not(.red-cta-button):not(.orange-cta-button):not(.green-cta-button):not(.cyan-cta-button):not(.purple-cta-button)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--journey-gradient-red);
    pointer-events: none;
    z-index: 0;
}

/* Orange Section - Apple Corners Box Gradients (excluding buttons) */
.orange-section .apple-corners:not(button):not(.red-cta-button):not(.orange-cta-button):not(.green-cta-button):not(.cyan-cta-button):not(.purple-cta-button)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--journey-gradient-orange);
    pointer-events: none;
    z-index: 0;
}

/* Green Section - Apple Corners Box Gradients (excluding buttons) */
.green-section-journey .apple-corners:not(button):not(.red-cta-button):not(.orange-cta-button):not(.green-cta-button):not(.cyan-cta-button):not(.purple-cta-button)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--journey-gradient-green);
    pointer-events: none;
    z-index: 0;
}

/* Cyan Section - Apple Corners Box Gradients (already handled by specific box classes) */
/* Note: Cyan section uses .hero-box, .akzeptanz-box, etc. with their own ::before elements */
/* Exclude buttons from getting gradients */
.cyan-section-wrapper .apple-corners:not(button):not(.red-cta-button):not(.orange-cta-button):not(.green-cta-button):not(.cyan-cta-button):not(.purple-cta-button)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--journey-gradient-cyan);
    pointer-events: none;
    z-index: 0;
}

/* Purple Section - Apple Corners Box Gradients (excluding buttons) */
.purple-section .apple-corners:not(button):not(.red-cta-button):not(.orange-cta-button):not(.green-cta-button):not(.cyan-cta-button):not(.purple-cta-button)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--journey-gradient-purple);
    pointer-events: none;
    z-index: 0;
}

/* Purple Section - Apple Corners Box Hover Effects */
.purple-section .apple-corners:not(button):not(.red-cta-button):not(.orange-cta-button):not(.green-cta-button):not(.cyan-cta-button):not(.purple-cta-button) {
    transition: all 0.3s ease-in-out;
}

.purple-section .apple-corners:not(button):not(.red-cta-button):not(.orange-cta-button):not(.green-cta-button):not(.cyan-cta-button):not(.purple-cta-button):hover {
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.5), 0 0 60px rgba(168, 85, 247, 0.3), inset 0 0 20px rgba(168, 85, 247, 0.2) !important;
    border-color: rgba(168, 85, 247, 0.6) !important;
}

/* Purple Form Input Styles */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea,
input[type="radio"],
.form-label,
.form-input {
    font-family: var(--font-family-primary);
    color: #ffffff !important;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder {
    color: #9ca3af !important;
}

input[type="radio"] {
    accent-color: var(--purple-accent);
}

/* Newsletter Section Styles */
.newsletter-container {
    width: 100%;
    background-color: #000000;
    padding: 64px 16px;
    font-family: var(--font-family-primary);
}

@media (min-width: 640px) {
    .newsletter-container {
        padding: 64px 24px;
    }
}

@media (min-width: 1024px) {
    .newsletter-container {
        padding: 64px 32px;
    }
}

.newsletter-wrapper {
    max-width: 1280px;
    margin: 0 auto;
}

.newsletter-header {
    text-align: center;
    margin-bottom: 32px;
}

.email-input {
    flex: 1;
    padding: 18px 28px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 24px;
    color: #ffffff;
    font-size: var(--journey-text-body);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-family-primary);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    width: 100%;
    max-width: 500px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

@media (min-width: 640px) {
    .email-input {
        max-width: none;
        padding: 20px 32px;
        font-size: var(--journey-text-description);
    }
}

@media (min-width: 1024px) {
    .email-input {
        padding: 22px 36px;
        font-size: var(--journey-text-body);
    }
}

.email-input::placeholder {
    color: rgba(255, 255, 255, 0.55);
    transition: opacity 0.3s ease;
}

.email-input:hover {
    border-color: rgba(255, 255, 255, 0.4);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.email-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.6);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.email-input:focus::placeholder {
    opacity: 0.7;
}

@keyframes luxury-pulse-white {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.6),
                    0 0 40px rgba(255, 255, 255, 0.4),
                    0 0 60px rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.8),
                    0 0 60px rgba(255, 255, 255, 0.6),
                    0 0 90px rgba(255, 255, 255, 0.4);
    }
}

.submit-button {
    padding: 20px 48px;
    background-color: #ffffff;
    color: #000000;
    font-size: var(--journey-text-body);
    border: none;
    border-radius: 11px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-family: var(--font-family-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.6),
                0 0 60px rgba(255, 255, 255, 0.3);
    animation: luxury-pulse-white 3s infinite ease-in-out;
}

.submit-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.submit-button:hover::before {
    left: 100%;
}

.submit-button:hover {
    background-color: #d1d5db;
    transform: translateY(-2px);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.8),
                0 0 80px rgba(255, 255, 255, 0.5),
                0 0 120px rgba(255, 255, 255, 0.3);
}

.pulse-dot {
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border-radius: 50%;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.1);
    }
}

.success-card {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 20px 32px;
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.4), transparent);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 11px;
    backdrop-filter: blur(12px);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}

.success-text {
    color: #ffffff;
    font-size: var(--journey-text-body);
    font-family: var(--font-family-primary);
}

/* Consultation Section Styles */
.consultation-container {
    width: 100%;
    background-color: #000000;
    padding: 96px 24px;
    font-family: var(--font-family-primary);
}

@media (min-width: 640px) {
    .consultation-container {
        padding: 96px 24px;
    }
}

@media (min-width: 1024px) {
    .consultation-container {
        padding: 96px 32px;
    }
}

.consultation-wrapper {
    max-width: 1400px;
    margin: 0 auto;
}

.split-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 64px;
    align-items: center;
}

@media (min-width: 1024px) {
    .split-container {
        grid-template-columns: 45% 55%;
        gap: 80px;
    }

    .image-section {
        order: 1;
    }

    .content-section {
        order: 2;
    }
}

.image-section {
    position: relative;
}

.coach-image-wrapper {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    aspect-ratio: 3/4;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.3),
                0 0 80px rgba(255, 255, 255, 0.15);
    background-color: #18181b;
}

.coach-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
}

.image-badge {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 16px 32px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.badge-name {
    font-size: var(--journey-text-description);
    color: #ffffff;
    font-family: var(--font-family-heading);
    margin-bottom: 4px;
}

.badge-title {
    font-size: var(--journey-text-label);
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-family-primary);
}

.content-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-label {
    display: inline-block;
    padding: 8px 16px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    color: #ffffff;
    font-size: var(--journey-text-label);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 24px;
    font-family: var(--font-family-primary);
}

.benefits-list {
    list-style: none;
    margin-bottom: 40px;
    padding-top: 16px;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding: 4px 0;
    color: #ffffff;
    font-family: var(--font-family-primary);
    font-size: var(--journey-text-body);
}

.check-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Product Selection Journey CTA */
.cta-journey-container {
    width: 100%;
    background-color: #000000;
    padding: 96px 24px;
    font-family: var(--font-family-primary);
}

.cta-journey-wrapper {
    max-width: 1400px;
    margin: 0 auto;
}

.product-card-journey {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 32px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.product-card-journey::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 30%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

.product-card-journey:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.3), 0 0 60px rgba(255, 255, 255, 0.15);
}

.product-image-wrapper-journey {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 11px;
}

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

.product-title-journey {
    font-size: var(--journey-h3-card);
    color: #ffffff;
    margin-bottom: 8px;
    font-family: var(--font-family-heading);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.product-divider-journey {
    height: 2px;
    width: 64px;
    background: linear-gradient(to right, #ffffff, transparent);
    margin-bottom: 16px;
}

.core-divider-journey {
    background: linear-gradient(to right, #10b981, transparent);
}

.gun-divider-journey {
    background: linear-gradient(to right, var(--red-accent), transparent);
}

.shield-divider-journey {
    background: linear-gradient(to right, var(--purple-accent), transparent);
}

.product-description-journey {
    color: #ffffff;
    font-size: var(--journey-text-description);
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
    font-family: var(--font-family-primary);
}

.product-button-journey {
    width: 100%;
    padding: 14px 24px;
    font-size: var(--journey-text-description);
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 52px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    font-family: var(--font-family-primary);
    border-radius: 12px;
}

.product-button-journey:hover {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Removed unused color utilities - project uses CSS custom properties instead */

/* Purple Form & Progress Bar Styles */
.progress-bar-container {
    width: 100%;
    margin-bottom: 48px;
}

.progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    overflow: hidden;
    margin-bottom: 24px;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--purple-accent), #c084fc);
    border-radius: 9999px;
    transition: width 0.5s ease;
    width: 0%;
}

.progress-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.progress-step.active {
    opacity: 1;
}

.progress-step-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--journey-text-description);
    color: #ffffff;
    font-family: var(--font-family-primary);
    transition: all 0.3s ease;
}

.progress-step.active .progress-step-circle {
    border-color: var(--purple-accent);
    background: rgba(var(--purple-accent-rgb), 0.2);
    box-shadow: 0 0 20px rgba(var(--purple-accent-rgb), 0.5);
}

.progress-step-label {
    font-size: var(--journey-text-label);
    color: #ffffff;
    font-family: var(--font-family-primary);
    text-align: center;
}

.form-steps {
    width: 100%;
}

.form-step {
    display: none;
}

.form-step.active {
    display: block;
}

.form-label {
    display: block;
    color: #ffffff;
    font-size: var(--journey-text-description);
    margin-bottom: 8px;
    font-family: var(--font-family-primary);
}

.form-input {
    width: 100%;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 11px;
    color: #ffffff;
    font-size: var(--journey-text-description);
    transition: all 0.3s ease;
    font-family: var(--font-family-primary);
    backdrop-filter: blur(10px);
}

.form-input:focus {
    outline: none;
    border-color: var(--purple-accent);
    box-shadow: 0 0 20px rgba(var(--purple-accent-rgb), 0.4);
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.purple-cta-button-secondary {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    position: relative;
    overflow: hidden;
    z-index: 100 !important;
    isolation: isolate;
}

.purple-cta-button-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

.purple-cta-button-secondary > * {
    position: relative;
    z-index: 2;
}

.purple-cta-button-secondary:hover::before {
    left: 100%;
}

.purple-cta-button-secondary:hover {
    background: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* Consultation Section Styles */
.consultation-section {
    position: relative;
    background: #000000;
    min-height: 100vh;
}

.consultation-cta-button {
    background: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #000000 !important;
    position: relative;
    overflow: hidden;
}

.consultation-cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
    transition: left 0.6s ease;
}

.consultation-cta-button:hover::before {
    left: 100%;
}

.consultation-cta-button:hover {
    transform: translateY(-2px) !important;
    background: #d1d5db !important;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.6),
                0 0 60px rgba(255, 255, 255, 0.3) !important;
}

.split-left {
    position: relative;
}

.split-right {
    position: relative;
}

/* Product Selection Journey Styles */
.product-selection-journey {
    position: relative;
    background: #000000;
    min-height: 100vh;
}

.product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

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

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

.product-card {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.3), transparent);
    backdrop-filter: blur(20px);
    padding: 40px 32px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.product-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

.product-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.3), 0 0 80px rgba(255, 255, 255, 0.15);
}

.product-card-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-badge {
    display: inline-block;
    padding: 8px 20px;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #000000;
    font-size: var(--journey-text-label);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 6px;
    margin-bottom: 24px;
    align-self: flex-start;
    font-family: var(--font-family-primary);
}

.product-badge-featured {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.product-card-featured {
    border: 2px solid rgba(245, 158, 11, 0.5);
    box-shadow: 0 0 40px rgba(245, 158, 11, 0.3);
}

.product-card-featured:hover {
    border-color: rgba(245, 158, 11, 0.8);
    box-shadow: 0 0 60px rgba(245, 158, 11, 0.5), 0 0 120px rgba(245, 158, 11, 0.3);
}

.product-popular-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #f59e0b;
    color: #000000;
    padding: 6px 12px;
    font-size: var(--journey-text-caption);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 6px;
    z-index: 3;
    font-family: var(--font-family-primary);
}

.product-price {
    display: flex;
    align-items: baseline;
    margin-bottom: 32px;
}

.product-features {
    list-style: none;
    padding: 0;
    margin-bottom: 32px;
    flex-grow: 1;
}

.product-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.product-cta-button {
    background: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    position: relative;
    overflow: hidden;
}

.product-cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.product-cta-button:hover::before {
    left: 100%;
}

.product-cta-button:hover {
    transform: translateY(-2px) !important;
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

.product-cta-featured {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    border: none !important;
    color: #000000 !important;
}

.product-cta-featured:hover {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.6),
                0 0 60px rgba(245, 158, 11, 0.3) !important;
}

.grayscale-image {
    filter: grayscale(100%);
}

/* ==============================================
   SERVICE PAGES - COMPONENT STYLES
   ============================================== */

/* Service Page Container */
.service-page-container {
    position: relative;
    z-index: 2;
}

.service-content-wrapper {
    position: relative;
    z-index: 2;
    max-width: var(--max-width-7xl) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
}

/* ==============================================
   UNIVERSAL GLASS BOX BASE STYLES
   All boxes use these base properties
   Page-specific colors/gradients applied separately
   ============================================== */

.service-glass-box {
    backdrop-filter: blur(var(--service-box-backdrop-blur));
    padding: var(--journey-glass-padding);
    border: var(--service-box-border-width) solid var(--service-box-border-color);
    border-radius: var(--service-box-border-radius);
    position: relative;
    overflow: hidden;
}

.service-glass-box-large {
    padding: var(--journey-glass-padding-lg);
}

/* Service Section Container - Global component spacing */
.service-section {
    padding: var(--service-component-gap) 0;
    position: relative;
}

.service-section-large {
    padding: calc(var(--service-component-gap) * 1.25) 0; /* 25% larger than standard */
}

@media (max-width: 768px) {
    .service-section {
        padding: var(--service-component-gap-mobile) 0;
    }

    .service-section-large {
        padding: calc(var(--service-component-gap-mobile) * 1.25) 0;
    }
}

.service-container {
    max-width: var(--max-width-7xl) !important;
    margin: 0 auto !important;
    padding: var(--journey-container-padding) !important;
    width: 100% !important;
}

.service-container-narrow {
    max-width: var(--max-width-7xl) !important;
    margin: 0 auto !important;
    padding: var(--journey-container-padding) !important;
    width: 100% !important;
}

/* Service Page Typography Classes */
.service-hero-title {
    font-family: var(--font-family-heading);
    font-size: var(--service-h1-hero);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.1;
    margin-top: 0;
    margin-bottom: 1rem;
}

.service-hero-subtitle {
    font-family: var(--font-family-primary);
    font-size: var(--service-hero-subtitle-size);
    color: white;
    margin-bottom: 2rem;
}

.service-hero-tagline {
    font-family: var(--font-family-primary);
    font-size: var(--service-hero-tagline-size);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-top: 1rem;
}

.service-hero-description {
    font-family: var(--font-family-primary);
    font-size: var(--service-hero-description-size);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    max-width: 56rem;
    margin: 0 auto;
}

.service-section-title {
    font-family: var(--font-family-heading);
    font-size: var(--service-h2-section) !important;
    margin-bottom: 1.25rem;
}

.service-section-title-large {
    font-family: var(--font-family-heading);
    font-size: var(--service-h2-section-lg) !important;
    line-height: 1.1;
}

/* Universal H2 styling for all service pages with glow effect */
[data-page="core"] h2,
[data-page="gun"] h2,
[data-page="shield"] h2 {
    font-family: var(--font-family-heading);
    /* font-size removed - let classes .service-section-title and .service-section-title-large control size */
    line-height: 1.1;
}

/* Page-specific H2 glow effects */
[data-page="core"] h2 {
    text-shadow: 0 0 40px rgb(from var(--service-core-main) r g b / 0.8),
                 0 0 80px rgb(from var(--service-core-main) r g b / 0.4),
                 0 10px 30px rgba(0, 0, 0, 0.8);
}

[data-page="gun"] h2 {
    text-shadow: 0 0 40px rgb(from var(--service-gun-main) r g b / 0.8),
                 0 0 80px rgb(from var(--service-gun-main) r g b / 0.4),
                 0 10px 30px rgba(0, 0, 0, 0.8);
}

[data-page="shield"] h2 {
    text-shadow: 0 0 40px rgb(from var(--service-shield-main) r g b / 0.8),
                 0 0 80px rgb(from var(--service-shield-main) r g b / 0.4),
                 0 10px 30px rgba(0, 0, 0, 0.8);
}

.service-card-title {
    font-family: var(--font-family-heading);
    font-size: var(--service-h3-size);
    color: white;
    margin-bottom: 1.25rem;
    text-align: center;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.service-card-subtitle {
    font-family: var(--font-family-heading);
    font-size: var(--service-h4-size);
    margin-bottom: 0.625rem;
    color: #ffffff !important;
}

.service-body-text {
    font-family: var(--font-family-primary);
    font-size: var(--service-body-text-size);
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
}

.service-body-text-large {
    font-size: var(--service-body-text-large-size);
}

.service-body-text-xl {
    font-size: var(--service-body-text-xl-size);
}

.service-stat-number {
    font-family: var(--font-family-primary);
    font-size: var(--service-stat-number-size);
    margin-bottom: 0.625rem;
}

.service-stat-label {
    font-family: var(--font-family-primary);
    font-size: var(--service-stat-label-size);
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.service-icon {
    font-size: var(--service-icon-size);
}

/* Service Video Placeholder */
.service-video-container {
    max-width: 50rem;
    margin: 0 auto 3rem auto;
}

.service-video-placeholder {
    position: relative;
    padding-bottom: 56.25%;
    border-radius: var(--service-box-border-radius);
    overflow: hidden;
    backdrop-filter: blur(var(--service-box-backdrop-blur));
}

.service-video-placeholder-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: var(--journey-h3-card);
    text-align: center;
}

/* Service Grid Layouts */
.service-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
}

.service-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 3.75rem;
    align-items: center;
}

.service-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
}

/* Service Decorative Dividers */
.service-divider {
    height: 2px;
    width: 6.25rem;
    margin-top: var(--divider-to-heading-gap); /* 1rem - space after heading */
    margin-bottom: var(--divider-to-content-gap); /* 1rem - space before content */
    margin-left: auto;
    margin-right: auto;
}

.service-divider-small {
    height: 2px;
    width: 4rem;
    margin-top: var(--divider-to-heading-gap);
    margin-bottom: var(--divider-to-content-gap);
    margin-left: auto;
    margin-right: auto;
}

/* Decorative Three-Part Divider */
.service-decorative-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-top: var(--divider-to-heading-gap); /* 1rem - space after heading */
    margin-bottom: var(--divider-to-content-gap); /* 1rem - space before content */
}

.service-decorative-divider-side {
    height: 1px;
    width: 8rem;
}

.service-decorative-divider-center {
    height: 4px;
    width: 6rem;
}

/* Service Icon Containers */
.service-icon-box {
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.5rem auto;
    border: 2px solid;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-number-circle {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.875rem auto;
    font-size: var(--journey-h2-section);
    font-family: var(--font-family-heading);
    transition: all 0.3s ease;
}

/* Service Center Alignment Utilities */
.service-text-center {
    text-align: center;
}

/* Fix for hero section - allow full 1200px width */
.hero-section .service-text-center {
    max-width: var(--luxury-homepage-max-width);
    margin: 0 auto;
    width: 100%;
}

.service-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-flex-column {
    display: flex;
    flex-direction: column;
}

/* ==============================================
   SERVICE PAGES - STANDARDIZED SPACING UTILITIES
   Uses Journey section spacing tokens
   ============================================== */

/* Section Header Spacing */
.service-section-header {
    margin-bottom: 0; /* No extra margin - dividers handle their own spacing */
}

.service-section-header-sm {
    margin-bottom: 0; /* No extra margin - dividers handle their own spacing */
}

/* Content Block Spacing */
.service-content-gap-lg {
    gap: var(--spacing-10); /* 2.5rem / 40px */
}

.service-content-gap {
    gap: var(--spacing-6); /* 1.5rem / 24px */
}

.service-content-gap-sm {
    gap: var(--spacing-5); /* 1.25rem / 20px */
}

/* Margin Bottom Utilities */
.service-mb-xl {
    margin-bottom: var(--spacing-16); /* 4rem / 64px */
}

.service-mb-lg {
    margin-bottom: var(--spacing-12); /* 3rem / 48px */
}

.service-mb-md {
    margin-bottom: var(--spacing-8); /* 2rem / 32px */
}

.service-mb-sm {
    margin-bottom: var(--spacing-5); /* 1.25rem / 20px */
}

.service-mb-xs {
    margin-bottom: var(--spacing-3); /* 0.75rem / 12px */
}

/* Margin Top Utilities */
.service-mt-lg {
    margin-top: var(--spacing-12); /* 3rem / 48px */
}

.service-mt-md {
    margin-top: var(--spacing-8); /* 2rem / 32px */
}

.service-mt-sm {
    padding-top: var(--spacing-2); /* 0.5rem / 8px */
    padding-bottom: var(--spacing-2); /* 0.5rem / 8px */
}

/* Divider Spacing Utilities - Use these for consistent heading/divider/content gaps */
.service-heading-to-divider {
    margin-bottom: var(--divider-to-heading-gap); /* 1rem gap after heading before divider */
}

.service-divider-to-content {
    margin-top: var(--divider-to-content-gap); /* 1rem gap after divider before content */
}

/* Color Utilities */
.service-text-white {
    color: white;
}

.service-text-muted {
    color: rgba(255, 255, 255, 0.7);
}

.service-text-bright {
    color: rgba(255, 255, 255, 0.9);
}

/* Layout Utilities */
.service-hero-section {
    min-height: 100vh;
    position: relative;
    padding-top: 80px;
}

.service-video-wrapper {
    max-width: 24rem;
    margin: 0 auto 3rem auto;
}

.service-video-box {
    width: 100%;
    aspect-ratio: 9/16;
    border-radius: var(--service-box-border-radius);
    overflow: hidden;
    box-shadow: var(--service-box-shadow);
}

.service-timeline-container {
    position: relative;
    padding-left: 40px;
}

.service-timeline-line {
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
}

.service-timeline-item {
    position: relative;
}

.service-timeline-dot {
    position: absolute;
    left: -33px;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid #1a1a2e;
}

.service-list-unstyled {
    list-style: none;
    padding: 0;
}

.service-list-item {
    padding-left: 30px;
    position: relative;
}

.service-list-icon {
    position: absolute;
    left: 0;
}

.service-grid-1col {
    display: grid;
    grid-template-columns: 1fr;
}

.service-max-w-lg {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.service-max-w-xl {
    max-width: 900px;
    margin: 0 auto;
}

.service-line-height-tight {
    line-height: 1.2;
}

/* Title Typography Utilities */
.service-title-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.service-title-spaced {
    letter-spacing: 0.05em;
}

/* ==============================================
   THE CORE - SERVICE PAGE SPECIFIC STYLES
   ============================================== */

.core-service-hero-title {
    color: var(--service-core-main);
    text-shadow: 0 0 40px rgb(from var(--service-core-main) r g b / 0.8), 0 0 80px rgb(from var(--service-core-main) r g b / 0.4), 0 10px 30px rgba(0, 0, 0, 0.8);
}

.core-service-hero-tagline {
    color: rgb(from var(--service-core-main) r g b / 0.7);
}

/* Consolidated glass box backgrounds - uses page-specific gradient variables */
.core-service-glass-box,
.gun-service-glass-box,
.shield-service-glass-box,
.service-glass-box-large,
.core-service-glass-box-large,
.gun-service-glass-box-large,
.shield-service-glass-box-large,
div.core-service-glass-box,
div.gun-service-glass-box,
div.shield-service-glass-box,
div.service-glass-box-large,
#main-content.core-service-glass-box,
#main-content.gun-service-glass-box,
#main-content.shield-service-glass-box {
    background: var(--service-page-gradient), linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
    max-width: var(--luxury-homepage-max-width) !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

/* Page-specific gradient assignments */
[data-page="core"] {
    --service-page-gradient: var(--service-core-page-gradient);
}

[data-page="gun"] {
    --service-page-gradient: var(--service-gun-page-gradient);
}

[data-page="shield"] {
    --service-page-gradient: var(--service-shield-page-gradient);
}

/* Removed black overlay - cleaner look */

.core-service-stat-number {
    color: var(--service-core-main);
}

.core-service-divider {
    background: linear-gradient(to right, transparent, var(--service-core-main), transparent);
}

.core-service-decorative-divider-left {
    background: linear-gradient(to right, transparent, var(--service-core-main));
}

.core-service-decorative-divider-center {
    background: var(--service-core-main);
    margin: 0 auto;
}

.core-service-decorative-divider-right {
    background: linear-gradient(to left, transparent, var(--service-core-main));
}

.core-service-icon-box {
    border-color: var(--service-core-border);
}

.core-service-number-circle {
    background: rgb(from var(--service-core-main) r g b / 0.2);
    color: var(--service-core-main);
}

.core-service-card {
    background: rgb(from var(--service-core-main) r g b / 0.05);
    border: var(--service-box-border-width) solid var(--service-core-border);
    border-radius: var(--service-box-border-radius);
    backdrop-filter: blur(var(--service-box-backdrop-blur));
    padding: var(--service-box-padding);
    transition: all 0.3s ease;
    margin-bottom: 2rem;
}

.core-service-card h3,
.core-service-card .service-card-subtitle {
    color: #ffffff !important;
}

.core-service-card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgb(from var(--service-core-main) r g b / 0.6), 0 0 50px rgb(from var(--service-core-main) r g b / 0.3);
    border-color: rgb(from var(--service-core-main) r g b / 0.6);
}

/* Core Service Card Grid Spacing */
.core-service-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

/* Core Service Icon Sizing */
.core-service-card svg,
.core-service-card .icon {
    width: 3rem;
    height: 3rem;
    color: var(--service-core-main);
    margin-bottom: 1rem;
}

.core-service-video-placeholder {
    background: linear-gradient(to bottom right, rgb(34 197 94 / 0.4), rgb(34 197 94 / 0.2));
    border: 2px solid var(--service-core-border);
}

.core-service-timeline-line {
    background: linear-gradient(to bottom, var(--service-core-main), transparent);
}

.core-service-timeline-dot {
    background: var(--service-core-main);
}

.core-service-timeline-dot-active {
    background: var(--service-core-main);
    box-shadow: 0 0 20px var(--service-core-main);
}

.core-service-timeline-card-active {
    background: rgb(from var(--service-core-main) r g b / 0.1);
    border: 2px solid var(--service-core-main);
}

.core-service-comparison-box-negative {
    background: rgba(239, 68, 68, 0.05);
    padding: var(--service-box-padding);
    border-radius: var(--service-box-border-radius);
    border: var(--service-box-border-width) solid rgba(239, 68, 68, 0.3);
    backdrop-filter: blur(var(--service-box-backdrop-blur));
}

.core-service-comparison-box-positive {
    background: rgba(34, 197, 94, 0.05);
    padding: var(--service-box-padding);
    border-radius: var(--service-box-border-radius);
    border: var(--service-box-border-width) solid rgba(34, 197, 94, 0.3);
    backdrop-filter: blur(var(--service-box-backdrop-blur));
}

.core-service-comparison-title-negative {
    color: #ef4444;
    font-family: var(--font-family-heading);
}

.core-service-comparison-icon-negative {
    color: #ef4444;
}

.core-service-comparison-icon-positive {
    color: var(--service-core-main);
}

/* ==============================================
   THE GUN - SERVICE PAGE SPECIFIC STYLES
   ============================================== */

.gun-service-hero-title {
    color: var(--service-gun-main);
    text-shadow: 0 0 40px rgb(from var(--service-gun-main) r g b / 0.8), 0 0 80px rgb(from var(--service-gun-main) r g b / 0.4), 0 10px 30px rgba(0, 0, 0, 0.8);
}

.gun-service-hero-tagline {
    color: rgb(from var(--service-gun-main) r g b / 0.7);
}

.gun-service-decorative-divider-left {
    background: linear-gradient(to right, transparent, var(--service-gun-main));
}

.gun-service-decorative-divider-center {
    background: var(--service-gun-main);
    margin: 0 auto;
}

.gun-service-decorative-divider-right {
    background: linear-gradient(to left, transparent, var(--service-gun-main));
}

/* gun-service-glass-box removed - consolidated above at line 5619 */

.gun-service-stat-number {
    background: linear-gradient(135deg, var(--service-gun-main) 0%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gun-service-divider {
    background: linear-gradient(to right, transparent, var(--service-gun-main), transparent);
}

.gun-service-icon-box {
    border-color: var(--service-gun-border);
}

.gun-service-card {
    background: var(--service-gun-gradient), linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
    border: var(--service-box-border-width) solid var(--service-box-border-color);
    border-radius: var(--service-box-border-radius);
    backdrop-filter: blur(var(--service-box-backdrop-blur));
    padding: var(--service-box-padding);
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
}

.gun-service-card h3,
.gun-service-card .service-card-subtitle {
    color: #ffffff !important;
}

/* Removed dark overlay - cleaner look */

.gun-service-card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgb(from var(--service-gun-main) r g b / 0.5), 0 0 60px rgb(from var(--service-gun-main) r g b / 0.3);
}

.gun-service-video-placeholder {
    background: linear-gradient(to bottom right, rgb(127 29 29 / 0.4), rgb(127 29 29 / 0.2));
    border: 2px solid var(--service-gun-border);
}

/* ==============================================
   THE SHIELD - SERVICE PAGE SPECIFIC STYLES
   ============================================== */

.shield-service-hero-title {
    color: var(--service-shield-main);
    text-shadow: 0 0 40px rgb(from var(--service-shield-main) r g b / 0.8), 0 0 80px rgb(from var(--service-shield-main) r g b / 0.4), 0 10px 30px rgba(0, 0, 0, 0.8);
}

.shield-service-hero-tagline {
    color: rgb(from var(--service-shield-main) r g b / 0.7);
}

.shield-service-decorative-divider-left {
    background: linear-gradient(to right, transparent, var(--service-shield-main));
}

.shield-service-decorative-divider-center {
    background: var(--service-shield-main);
    margin: 0 auto;
}

.shield-service-decorative-divider-right {
    background: linear-gradient(to left, transparent, var(--service-shield-main));
}

/* shield-service-glass-box removed - consolidated above at line 5619 */

.shield-service-stat-number {
    color: var(--service-shield-main);
}

.shield-service-divider {
    background: linear-gradient(to right, transparent, var(--service-shield-main), transparent);
}

.shield-service-icon-box {
    border-color: var(--service-shield-border);
}

.shield-service-number-circle {
    background: rgb(from var(--service-shield-main) r g b / 0.2);
    color: var(--service-shield-main);
}

.shield-service-card {
    background: rgb(from var(--service-shield-main) r g b / 0.05);
    border: var(--service-box-border-width) solid var(--service-shield-border);
    border-radius: var(--service-box-border-radius);
    backdrop-filter: blur(var(--service-box-backdrop-blur));
    padding: var(--service-box-padding);
    transition: all 0.3s ease;
}

.shield-service-card h3,
.shield-service-card .service-card-subtitle {
    color: #ffffff !important;
}

.shield-service-card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgb(from var(--service-shield-main) r g b / 0.6), 0 0 50px rgb(from var(--service-shield-main) r g b / 0.3);
    border-color: rgb(from var(--service-shield-main) r g b / 0.6);
}

.shield-service-video-placeholder {
    background: rgb(from var(--service-shield-main) r g b / 0.1);
}

/* Shield Mastery Component */
.shield-mastery-banner {
    background: linear-gradient(135deg, rgb(from var(--service-shield-main) r g b / 0.15) 0%, rgb(from var(--service-shield-main) r g b / 0.05) 100%);
    border: var(--service-box-border-width) solid var(--service-shield-border);
    border-radius: var(--service-box-border-radius);
    backdrop-filter: blur(var(--service-box-backdrop-blur));
    padding: 4rem 2rem;
    margin-bottom: 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.shield-mastery-banner-icon {
    width: 6rem;
    height: 6rem;
    margin: 0 auto 1.5rem;
    color: var(--service-shield-main);
    opacity: 0.7;
}

.shield-mastery-banner-icon svg {
    width: 100%;
    height: 100%;
}

.shield-mastery-banner-title {
    font-family: var(--font-family-heading);
    font-size: var(--service-h2-section);
    color: var(--service-shield-main);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}

.shield-mastery-banner-text {
    font-family: var(--font-family-primary);
    font-size: var(--service-body-text-size);
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.shield-mastery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.shield-mastery-card {
    background: linear-gradient(135deg, rgb(from var(--service-shield-main) r g b / 0.1) 0%, rgb(from var(--service-shield-main) r g b / 0.03) 100%);
    border: var(--service-box-border-width) solid var(--service-shield-border);
    border-radius: var(--service-box-border-radius);
    backdrop-filter: blur(var(--service-box-backdrop-blur));
    padding: 2.5rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.shield-mastery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 30px rgb(from var(--service-shield-main) r g b / 0.4), 0 0 50px rgb(from var(--service-shield-main) r g b / 0.2);
    border-color: rgb(from var(--service-shield-main) r g b / 0.6);
}

.shield-mastery-card-title {
    font-family: var(--font-family-heading);
    font-size: var(--service-h4-size);
    color: var(--service-shield-main);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.shield-mastery-card-text {
    font-family: var(--font-family-primary);
    font-size: var(--service-body-text-size);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0;
}

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

@media (max-width: 640px) {
    .shield-mastery-grid {
        grid-template-columns: 1fr;
    }

    .shield-mastery-banner {
        padding: 3rem 1.5rem;
    }
}

/* ==============================================
   FINAL CTA COMPONENT - ALL SERVICE PAGES
   ============================================== */

.service-final-cta-box {
    border: var(--service-box-border-width) solid var(--service-box-border-color);
    border-radius: var(--service-box-border-radius);
    backdrop-filter: blur(var(--service-box-backdrop-blur));
    padding: 5rem 4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.service-final-cta-title {
    font-family: var(--font-family-primary);
    font-size: var(--service-h1-hero);
    line-height: 1.2;
    margin-bottom: 0;
}

.service-final-cta-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 3rem 0;
    max-width: 60rem;
    margin-left: auto;
    margin-right: auto;
}

.service-final-cta-stat {
    border: var(--service-box-border-width) solid;
    border-radius: var(--service-box-border-radius);
    backdrop-filter: blur(var(--service-box-backdrop-blur));
    padding: 2.5rem 2rem;
    transition: all 0.3s ease;
}

.service-final-cta-stat:hover {
    transform: translateY(-5px);
}

.service-final-cta-stat-number {
    font-family: var(--font-family-primary);
    font-size: var(--service-stat-number-size);
    margin-bottom: 0.75rem;
}

.service-final-cta-stat-label {
    font-family: var(--font-family-primary);
    font-size: var(--service-body-text-size);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: white;
}

.service-final-cta-tagline {
    font-family: var(--font-family-primary);
    font-size: var(--service-body-text-xl-size);
    color: rgba(255, 255, 255, 0.9);
    max-width: 50rem;
    margin: 0 auto 3rem;
    line-height: 1.6;
}

.service-final-cta-button {
    padding: 1.5rem 4rem;
    font-size: var(--service-button-text-large-size);
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: var(--service-box-border-radius);
    margin: 0 auto;
}

/* Page-Specific Final CTA Styles */
.core-service-final-cta-box {
    background: linear-gradient(135deg, rgb(from var(--service-core-main) r g b / 0.15) 0%, rgb(from var(--service-core-main) r g b / 0.05) 50%, transparent 100%);
}

.core-service-final-cta-stat {
    background: linear-gradient(135deg, rgb(from var(--service-core-main) r g b / 0.12) 0%, rgb(from var(--service-core-main) r g b / 0.04) 100%);
    border-color: var(--service-core-border);
}

.core-service-final-cta-stat:hover {
    box-shadow: 0 0 25px rgb(from var(--service-core-main) r g b / 0.4), 0 0 50px rgb(from var(--service-core-main) r g b / 0.2);
    border-color: rgb(from var(--service-core-main) r g b / 0.5);
}

.gun-service-final-cta-box {
    background: linear-gradient(135deg, rgb(from var(--service-gun-main) r g b / 0.15) 0%, rgb(from var(--service-gun-main) r g b / 0.05) 50%, transparent 100%);
}

.gun-service-final-cta-stat {
    background: linear-gradient(135deg, rgb(from var(--service-gun-main) r g b / 0.12) 0%, rgb(from var(--service-gun-main) r g b / 0.04) 100%);
    border-color: var(--service-gun-border);
}

.gun-service-final-cta-stat:hover {
    box-shadow: 0 0 25px rgb(from var(--service-gun-main) r g b / 0.4), 0 0 50px rgb(from var(--service-gun-main) r g b / 0.2);
    border-color: rgb(from var(--service-gun-main) r g b / 0.6);
}

.shield-service-final-cta-box {
    background: linear-gradient(135deg, rgb(from var(--service-shield-main) r g b / 0.15) 0%, rgb(from var(--service-shield-main) r g b / 0.05) 50%, transparent 100%);
}

.shield-service-final-cta-stat {
    background: linear-gradient(135deg, rgb(from var(--service-shield-main) r g b / 0.12) 0%, rgb(from var(--service-shield-main) r g b / 0.04) 100%);
    border-color: var(--service-shield-border);
}

.shield-service-final-cta-stat:hover {
    box-shadow: 0 0 25px rgb(from var(--service-shield-main) r g b / 0.4), 0 0 50px rgb(from var(--service-shield-main) r g b / 0.2);
    border-color: rgb(from var(--service-shield-main) r g b / 0.6);
}

@media (max-width: 768px) {
    .service-final-cta-stats {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .service-final-cta-box {
        padding: 3rem 2rem;
    }

    .service-final-cta-title {
        font-size: var(--service-h2-section);
    }
}

/* ============================================
   CROSS-SELL COMPONENT - ALL SERVICE PAGES
   ============================================ */

/* Cross-Sell Header */
.cross-sell-header {
    text-align: center;
    margin-bottom: 4rem;
}

.cross-sell-title {
    font-family: var(--font-family-heading);
    font-size: var(--service-h2-section);
    letter-spacing: 0.05em;
    color: white;
    margin-bottom: 0;
}

.cross-sell-subtitle {
    font-size: var(--service-body-text-large-size);
    color: rgba(156, 163, 175, 1);
    max-width: 48rem;
    margin: 0 auto;
    line-height: 1.6;
}

/* Cross-Sell Grid */
.cross-sell-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 80rem;
    margin: 0 auto;
}

/* Cross-Sell Card Base */
.cross-sell-card {
    background: #000000;
    border: var(--service-box-border-width) solid var(--service-box-border-color);
    border-radius: var(--service-box-border-radius);
    backdrop-filter: blur(var(--service-box-backdrop-blur));
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.cross-sell-card:hover {
    transform: translateY(-8px);
}

/* Image Placeholder */
.cross-sell-image-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    position: relative;
}

.cross-sell-image-icon {
    width: 5rem;
    height: 5rem;
    margin-bottom: 1rem;
}

.cross-sell-image-icon svg {
    width: 100%;
    height: 100%;
}

.cross-sell-image-label {
    font-size: var(--service-body-text-size);
    letter-spacing: 0.05em;
    opacity: 0.6;
}

/* Card Content */
.cross-sell-card-content {
    padding: 2.5rem 2rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.cross-sell-card-title {
    font-family: var(--font-family-heading);
    font-size: var(--service-h3-size);
    letter-spacing: 0.05em;
    margin-bottom: 0;
}

.cross-sell-card-title::after {
    content: '';
    display: block;
    width: 4rem;
    height: 2px;
    margin: 1rem 0 1.5rem 0;
}

.cross-sell-card-description {
    font-size: var(--service-body-text-size);
    line-height: 1.7;
    color: rgba(156, 163, 175, 1);
    margin-bottom: 2rem;
    flex-grow: 1;
}

.cross-sell-cta-button {
    padding: 1rem 2.5rem;
    cursor: pointer;
    border: none;
    border-radius: 50px;
    font-size: var(--service-button-text-size);
    transition: all 0.3s ease;
    letter-spacing: 0.05em;
    align-self: flex-start;
}

.cross-sell-cta-button:hover {
    transform: translateY(-2px);
}

/* ============================================
   CROSS-SELL VARIANTS - CONSOLIDATED WITH CSS VARIABLES
   ============================================ */

/* Consolidated cross-sell card styles using --cross-sell-color variable */
.core-cross-sell-card,
.gun-cross-sell-card,
.shield-cross-sell-card {
    background: linear-gradient(135deg, rgb(from var(--cross-sell-color) r g b / 0.12) 0%, rgb(from var(--cross-sell-color) r g b / 0.04) 100%);
    border-color: var(--cross-sell-border);
}

.core-cross-sell-card:hover,
.gun-cross-sell-card:hover,
.shield-cross-sell-card:hover {
    box-shadow: 0 0 30px rgb(from var(--cross-sell-color) r g b / 0.4), 0 0 60px rgb(from var(--cross-sell-color) r g b / 0.2);
    border-color: rgb(from var(--cross-sell-color) r g b / 0.5);
}

.core-cross-sell-card .cross-sell-image-placeholder,
.gun-cross-sell-card .cross-sell-image-placeholder,
.shield-cross-sell-card .cross-sell-image-placeholder {
    background: linear-gradient(135deg, rgb(from var(--cross-sell-color) r g b / 0.15) 0%, rgb(from var(--cross-sell-color) r g b / 0.08) 100%);
}

.core-cross-sell-card .cross-sell-image-icon,
.gun-cross-sell-card .cross-sell-image-icon,
.shield-cross-sell-card .cross-sell-image-icon,
.core-cross-sell-card .cross-sell-image-label,
.gun-cross-sell-card .cross-sell-image-label,
.shield-cross-sell-card .cross-sell-image-label {
    color: var(--cross-sell-color);
}

.core-cross-sell-card .cross-sell-card-title::after,
.gun-cross-sell-card .cross-sell-card-title::after,
.shield-cross-sell-card .cross-sell-card-title::after {
    background: linear-gradient(to right, transparent, var(--cross-sell-color), transparent);
}

/* Page-specific color assignments */
.core-cross-sell-card {
    --cross-sell-color: var(--service-core-main);
    --cross-sell-border: var(--service-core-border);
}

.gun-cross-sell-card {
    --cross-sell-color: var(--service-gun-main);
    --cross-sell-border: var(--service-gun-border);
}

.shield-cross-sell-card {
    --cross-sell-color: var(--service-shield-main);
    --cross-sell-border: var(--service-shield-border);
}

/* ============================================
   CROSS-SELL RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    .cross-sell-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .cross-sell-header {
        margin-bottom: 2.5rem;
    }

    .cross-sell-title {
        font-size: var(--service-h2-section);
    }

    .cross-sell-subtitle {
        font-size: var(--service-body-text-size);
    }

    .cross-sell-card-content {
        padding: 2rem 1.5rem 1.5rem 1.5rem;
    }

    .cross-sell-card-title {
        font-size: var(--service-h3-size);
    }

    .cross-sell-image-placeholder {
        padding: 2rem;
    }

    .cross-sell-image-icon {
        width: 4rem;
        height: 4rem;
    }

    .cross-sell-cta-button {
        width: 100%;
        align-self: stretch;
    }

    /* Der Unterschied Section - Mobile */
    .service-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Service Page Container - Mobile */
    .service-page-container {
        padding-top: 3rem !important;
        padding-bottom: 1.5rem !important;
    }

    .service-content-wrapper {
        padding: 0 !important;
    }

    /* Hero Title - Mobile */
    [data-page="core"] h1,
    [data-page="gun"] h1,
    [data-page="shield"] h1 {
        font-size: var(--journey-h2-section) !important;
    }

    /* H2 Mobile - Removed override to let h2 stay large on mobile */
    /* [data-page="core"] h2,
    [data-page="gun"] h2,
    [data-page="shield"] h2 {
        font-size: var(--service-h2-mobile-size) !important;
    } */

    /* Service Glass Box - Mobile */
    .service-glass-box {
        padding: 2rem 1.5rem !important;
    }

    .service-glass-box-large {
        padding: 2.5rem 1.5rem !important;
    }

    /* Service Grids - Mobile */
    .service-grid-3 {
        grid-template-columns: 1fr !important;
    }

    /* Timeline - Mobile */
    [style*="padding-left: 40px"] {
        padding-left: 30px !important;
    }

    /* CTA Buttons - Mobile */
    .core-cta-button,
    .gun-cta-button,
    .shield-cta-button {
        padding: 1rem 2rem !important;
        font-size: var(--journey-text-description) !important;
        width: 100%;
        justify-content: center;
    }

    /* Der Unterschied Bottom CTA - Mobile */
    [style*="margin-top: 4rem"] h3 {
        font-size: var(--journey-h3-card) !important;
    }

    [style*="margin-top: 4rem"] p {
        font-size: var(--journey-h3-card) !important;
    }

    /* Badge positioning - Mobile */
    [style*="position: absolute"][style*="top: 1rem"] {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        margin-bottom: 1rem !important;
        display: inline-block !important;
    }

    /* Service Container Narrow - Mobile */
    .service-container-narrow {
        padding: 0 1rem !important;
    }

    /* Final CTA Stats - Mobile */
    .service-final-cta-stats {
        flex-direction: column !important;
        gap: 2rem !important;
    }

    .service-final-cta-stat {
        min-width: auto !important;
    }

    /* Real Talk Timeline Section - Mobile */
    .real-talk-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Hide middle column (bullet points) on mobile */
    .real-talk-grid > div:nth-child(2) {
        display: none !important;
    }

    /* Stack timeline items and result boxes vertically */
    .timeline-item,
    .result-box {
        margin-bottom: 1.5rem !important;
    }

    /* Adjust padding for mobile */
    .timeline-item .core-service-card,
    .result-box {
        padding: 1.5rem !important;
    }

    /* Show order: timeline item 1, result 1, timeline item 2, result 2, etc */
    .real-talk-grid > div:first-child {
        display: flex;
        flex-direction: column;
    }

    .real-talk-grid > div:last-child {
        display: flex;
        flex-direction: column;
    }
}

/* ============================================
   SERVICE PAGES - UTILITY CLASSES
   Replaces common inline styles across service pages
   ============================================ */

/* Section Padding Utilities */
.service-section-padding {
    padding: 4rem 0;
}

.service-section-padding-large {
    padding: 6rem 0;
}

.service-section-padding-small {
    padding: 3rem 0;
}

/* Hero Section */
.service-hero-section {
    min-height: 100vh;
    position: relative;
    padding-top: 5rem;
    padding-bottom: 4rem;
}

/* Comparison Grid (Vorher/Nachher) */
.service-comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 450px), 1fr));
    gap: 2rem;
    align-items: start;
}

/* Badge Styles (Vorher/Nachher badges) */
.service-badge {
    position: absolute;
    top: clamp(0.5rem, 2vw, 1rem);
    right: clamp(0.5rem, 2vw, 1rem);
    padding: clamp(0.35rem, 1vw, 0.5rem) clamp(0.75rem, 2vw, 1.5rem);
    border-radius: 50px;
    font-size: clamp(0.7rem, 1.5vw, 0.875rem);
    letter-spacing: 0.05em;
}

.service-badge-danger {
    background: rgba(239, 68, 68, 0.9);
    color: white;
}

.service-badge-success {
    background: var(--service-core-main);
    color: #000;
}

.service-badge-warning {
    background: var(--service-gun-main);
    color: #000;
}

.service-badge-info {
    background: var(--service-shield-main);
    color: #000;
}

/* Comparison Box Styles */
.service-comparison-box-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));
    padding: var(--service-box-padding);
    border-radius: var(--service-box-border-radius);
    border: 2px solid rgba(239, 68, 68, 0.4);
    backdrop-filter: blur(var(--service-box-backdrop-blur));
    position: relative;
}

.service-comparison-box-success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
    padding: var(--service-box-padding);
    border-radius: var(--service-box-border-radius);
    border: 2px solid var(--service-core-main);
    backdrop-filter: blur(var(--service-box-backdrop-blur));
    position: relative;
    box-shadow: 0 0 40px rgba(34, 197, 94, 0.2);
}

.service-comparison-box-warning {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.15), rgba(255, 107, 0, 0.05));
    padding: var(--service-box-padding);
    border-radius: var(--service-box-border-radius);
    border: 2px solid var(--service-gun-main);
    backdrop-filter: blur(var(--service-box-backdrop-blur));
    position: relative;
    box-shadow: 0 0 40px rgba(255, 107, 0, 0.2);
}

.service-comparison-box-info {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05));
    padding: var(--service-box-padding);
    border-radius: var(--service-box-border-radius);
    border: 2px solid var(--service-shield-main);
    backdrop-filter: blur(var(--service-box-backdrop-blur));
    position: relative;
    box-shadow: 0 0 40px rgba(139, 92, 246, 0.2);
}

/* Urgency Indicator */
.service-urgency-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    border: 1px solid rgba(34, 197, 94, 0.3);
    margin-bottom: 1.5rem;
}

.service-urgency-indicator-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.service-urgency-dot {
    width: 8px;
    height: 8px;
    background: var(--service-core-main);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

/* List Styles for comparison boxes */
.service-comparison-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-comparison-list-item {
    padding-left: clamp(25px, 5vw, 30px);
    position: relative;
}

.service-comparison-icon {
    position: absolute;
    left: 0;
    font-size: clamp(1rem, 2vw, 1.25rem);
}

.service-comparison-icon-danger {
    color: #ef4444;
}

.service-comparison-icon-success {
    color: var(--service-core-main);
}

.service-comparison-icon-warning {
    color: var(--service-gun-main);
}

.service-comparison-icon-info {
    color: var(--service-shield-main);
}

/* Centered content wrapper */
.service-center-wrapper {
    display: flex;
    justify-content: center;
}

/* Video placeholder */
.service-video-wrapper {
    position: relative;
    width: 100%;
    max-width: 24rem;
    margin: 0 auto;
}

.service-video-placeholder {
    width: 100%;
    aspect-ratio: 9/16;
    border-radius: 11px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}

/* Bottom CTA Box */
.service-bottom-cta-box {
    margin-top: 4rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
    border: 2px solid var(--service-core-main);
    border-radius: var(--service-box-border-radius);
    padding: 3rem;
    text-align: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 60px rgba(34, 197, 94, 0.15);
}

.service-bottom-cta-box-gun {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.1), rgba(255, 107, 0, 0.05));
    border: 2px solid var(--service-gun-main);
    box-shadow: 0 0 60px rgba(255, 107, 0, 0.15);
}

.service-bottom-cta-box-shield {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.05));
    border: 2px solid var(--service-shield-main);
    box-shadow: 0 0 60px rgba(139, 92, 246, 0.15);
}

/* Guarantee/Risk Reversal Box */
.service-guarantee-box {
    margin-top: 3rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
    border: 2px solid rgba(34, 197, 94, 0.3);
    border-radius: 16px;
}

/* Trust badges wrapper */
.service-trust-badges {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    opacity: 0.7;
}

.service-trust-badge-item,
.div-trust-badge-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Grid layouts */
.service-grid-2-responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 450px), 1fr));
    gap: 2rem;
}

/* Image placeholder */
.service-image-placeholder {
    background: linear-gradient(135deg, rgb(from var(--service-core-main) r g b / 0.15) 0%, rgb(from var(--service-core-main) r g b / 0.05) 100%);
    border: 2px solid rgb(from var(--service-core-main) r g b / 0.3);
    border-radius: var(--service-box-border-radius);
    padding: 4rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    backdrop-filter: blur(10px);
}

/* Testimonial card with avatar */
.service-testimonial-avatar {
    width: 3.5rem;
    height: 3.5rem;
    background: var(--service-core-main);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.service-testimonial-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.service-testimonial-highlight {
    background: rgba(34, 197, 94, 0.15);
    padding: 1rem 1.5rem;
    border-radius: var(--service-box-border-radius);
    border-left: 4px solid var(--service-core-main);
}

/* Stats display */
.service-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3rem;
}

/* Position utilities */
.service-relative {
    position: relative;
}

.service-absolute {
    position: absolute;
}

/* Z-index utilities */
.service-z-10 {
    position: relative;
    z-index: 10;
}

/* Responsive heading sizes with clamp */
.service-heading-responsive-lg {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
}

.service-heading-responsive-md {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
}

/* Color utilities for text */
.service-text-muted {
    color: rgba(255, 255, 255, 0.7);
}

.service-text-muted-light {
    color: rgba(255, 255, 255, 0.6);
}

.service-text-white-90 {
    color: rgba(255, 255, 255, 0.9);
}

.service-text-white-95 {
    color: rgba(255, 255, 255, 0.95);
}

/* Font weight utilities */

/* Letter spacing */
.service-ls-tight {
    letter-spacing: 0.02em;
}

.service-ls-normal {
    letter-spacing: 0.05em;
}

.service-ls-wide {
    letter-spacing: 0.1em;
}

/* Heading padding for badges */
.service-heading-with-badge {
    padding-top: 2.5rem;
}

/* ==============================================
   LUXURY PAGES UTILITY CLASSES
   For uber-uns.html & homepage-luxury.html
   ============================================== */

/* === BASE BODY STYLES === */
.luxury-body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family-primary);
    background: #000000 !important;
    color: var(--luxury-white);
    overflow-x: hidden;
}

/* Ensure all luxury sections have black background */
.luxury-section,
.content-wrapper,
.background-section,
.content-relative {
    background: #000000 !important;
}

/* Contact Section for About Us page */
.contact-section {
    position: relative;
    background: transparent;
    padding: 200px 1.25rem;
    min-height: auto;
}

.contact-content {
    position: relative;
    z-index: 10;
    max-width: 900px;
    margin: 0 auto !important;
    width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
    text-align: center;
}

.contact-content h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: 1rem;
    color: white;
}

/* Remove section>div padding on mobile for contact section */
@media (max-width: 768px) {
    .contact-section > div {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* === PARALLAX BACKGROUND SYSTEM === */
.luxury-parallax-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: var(--luxury-z-background);
    overflow: hidden;
}

.luxury-parallax-bg {
    width: 100%;
    height: 100%;
    background: #000000;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.luxury-parallax-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--luxury-gradient-dark);
}

/* Darker overlay on mobile */
@media (max-width: 768px) {
    .luxury-parallax-overlay::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        pointer-events: none;
    }
}

/* === CONTENT WRAPPER === */
.luxury-content-wrapper {
    position: relative;
    z-index: var(--luxury-z-content);
}

/* === CONTAINER SYSTEM === */
.luxury-container {
    max-width: var(--luxury-container-xl);
    margin: 0 auto;
    padding: 0 var(--luxury-space-lg);
}

.luxury-container-narrow {
    max-width: var(--luxury-container-lg);
    margin: 0 auto;
    padding: 0 var(--luxury-space-lg);
}

.luxury-container-wide {
    max-width: var(--luxury-container-2xl);
    margin: 0 auto;
    padding: 0 var(--luxury-space-lg);
}

/* === SECTION SPACING === */
.luxury-section {
    padding: var(--luxury-space-4xl) 0;
}

.luxury-section-sm {
    padding: var(--luxury-space-3xl) 0;
}

.luxury-section-lg {
    padding: 8rem 0;
}

/* === GLASS MORPHISM COMPONENTS === */
/* .luxury-glass-card styles removed - now inherits from base .card class in variables.css */

.luxury-glass-card-large {
    padding: var(--luxury-space-2xl) var(--luxury-space-xl);
}

.luxury-glass-card-small {
    padding: var(--luxury-space-lg);
}

/* === APPLE CORNERS === */
.luxury-apple-corners {
    border-radius: var(--luxury-border-radius);
}

.luxury-apple-corners-large {
    border-radius: var(--luxury-border-radius-large);
}

.luxury-apple-corners-small {
    border-radius: var(--luxury-border-radius-small);
}

/* === TYPOGRAPHY === */
.luxury-heading-hero {
    font-family: var(--font-family-heading);
    font-size: var(--luxury-font-hero);
    line-height: 1.1;
    letter-spacing: 0.02em;
    margin: 0;
    color: var(--luxury-white);
}

.luxury-heading-h1 {
    font-family: var(--font-family-heading);
    font-size: var(--luxury-font-h1);
    line-height: 1.2;
    letter-spacing: 0.02em;
    margin: 0 0 var(--luxury-space-lg) 0;
    color: var(--luxury-white);
}

.luxury-heading-h2 {
    font-family: var(--font-family-heading);
    font-size: var(--luxury-font-h2);
    line-height: 1.3;
    letter-spacing: 0.02em;
    margin: 0 0 var(--luxury-space-md) 0;
    color: var(--luxury-white);
}

.luxury-heading-h3 {
    font-family: var(--font-family-heading);
    font-size: var(--luxury-font-h3);
    line-height: 1.3;
    letter-spacing: 0.02em;
    margin: 0 0 var(--luxury-space-md) 0;
    color: var(--luxury-white);
}

.luxury-heading-h4 {
    font-family: var(--font-family-primary);
    font-size: var(--luxury-font-h4);
    line-height: 1.4;
    margin: 0 0 var(--luxury-space-sm) 0;
    color: var(--luxury-white);
}

.luxury-text-body {
    font-size: var(--luxury-font-body);
    line-height: 1.8;
    color: var(--luxury-white-muted);
}

.luxury-text-body-large {
    font-size: var(--luxury-font-body-large);
    line-height: 1.8;
    color: var(--luxury-white-muted);
}

.luxury-text-small {
    font-size: var(--luxury-font-small);
    line-height: 1.6;
    color: var(--luxury-white-muted);
}

.luxury-text-center {
    text-align: center;
}

.luxury-text-gold {
    color: var(--luxury-gold);
}

.luxury-text-white {
    color: var(--luxury-white);
}

.luxury-text-muted {
    color: var(--luxury-white-muted);
}

/* === DECORATIVE ELEMENTS === */
.luxury-divider {
    height: 1px;
    background: var(--luxury-glass-border);
    margin: var(--luxury-space-xl) 0;
    border: none;
}

.luxury-divider-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--luxury-space-2xl) 0;
    gap: var(--luxury-space-xs);
}

.luxury-divider-dot::before,
.luxury-divider-dot::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--luxury-glass-border);
}

.luxury-divider-dot span {
    width: 6px;
    height: 6px;
    background: var(--luxury-white-subtle);
    border-radius: 50%;
}

/* === ICON CIRCLES === */
.luxury-icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--luxury-glass-bg);
    border: 1px solid var(--luxury-glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--luxury-space-md);
    transition: all var(--luxury-transition-base);
}

.luxury-icon-circle:hover {
    border-color: var(--luxury-glass-border-hover);
    box-shadow: var(--luxury-shadow-glow);
}

.luxury-icon-circle svg {
    width: 32px;
    height: 32px;
    color: var(--luxury-gold);
}

/* === GRID SYSTEMS === */
.luxury-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--luxury-space-xl);
}

.luxury-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--luxury-space-xl);
}

.luxury-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--luxury-space-xl);
}

.luxury-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--luxury-space-xl);
}

/* === RESPONSIVE GRIDS === */
@media (max-width: 1024px) {
    .luxury-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .luxury-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .luxury-grid-2,
    .luxury-grid-3,
    .luxury-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* === FLEX UTILITIES === */
.luxury-flex {
    display: flex;
}

.luxury-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.luxury-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.luxury-flex-column {
    display: flex;
    flex-direction: column;
}

.luxury-flex-wrap {
    flex-wrap: wrap;
}

.luxury-gap-sm {
    gap: var(--luxury-space-sm);
}

.luxury-gap-md {
    gap: var(--luxury-space-md);
}

.luxury-gap-lg {
    gap: var(--luxury-space-lg);
}

/* === STAT CARDS === */
/* .luxury-stat-card styles removed - now inherits from base .card class in variables.css */
.luxury-stat-card {
    text-align: center;
}

.luxury-stat-number {
    font-family: var(--font-family-heading);
    font-size: var(--journey-h2-section);
    color: var(--luxury-gold);
    margin-bottom: var(--luxury-space-sm);
    display: block;
}

.luxury-stat-label {
    font-size: var(--luxury-font-small);
    color: var(--luxury-white-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* === FEATURE CARDS === */
.luxury-feature-card {
    background: var(--luxury-glass-bg);
    backdrop-filter: var(--luxury-glass-blur);
    -webkit-backdrop-filter: var(--luxury-glass-blur);
    border: 1px solid var(--luxury-glass-border);
    border-radius: var(--luxury-border-radius);
    padding: var(--luxury-space-xl);
    transition: all var(--luxury-transition-base);
}

.luxury-feature-card:hover {
    background: var(--luxury-glass-bg-hover);
    border-color: var(--luxury-glass-border-hover);
    transform: translateY(-5px);
    box-shadow: var(--luxury-shadow-glow);
}

.luxury-feature-title {
    font-family: var(--font-family-primary);
    font-size: var(--luxury-font-h4);
    margin: var(--luxury-space-md) 0 var(--luxury-space-sm) 0;
    color: var(--luxury-white);
}

.luxury-feature-text {
    font-size: var(--luxury-font-body);
    line-height: 1.8;
    color: var(--luxury-white-muted);
}

/* === TESTIMONIAL CARDS === */
/* .luxury-testimonial-card styles removed - now inherits from base .card class in variables.css */

.luxury-testimonial-text {
    font-size: var(--luxury-font-body-large);
    line-height: 1.8;
    color: var(--luxury-white);
    margin-bottom: var(--luxury-space-lg);
    font-style: italic;
}

.luxury-testimonial-author {
    color: var(--luxury-gold);
    margin-bottom: var(--luxury-space-xs);
}

.luxury-testimonial-role {
    font-size: var(--luxury-font-small);
    color: var(--luxury-white-muted);
}

/* === GALLERY === */
.luxury-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--luxury-space-md);
}

.luxury-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 11px;
    height: 280px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    padding: 0 !important;
}

.luxury-gallery-item:hover {
    transform: scale(1.02);
    border-color: rgba(255, 255, 255, 0.2);
}

.luxury-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.1);
    transition: all 0.3s ease;
}

.luxury-gallery-item:hover img {
    filter: grayscale(80%) contrast(1.2);
    transform: scale(1.05);
}

.luxury-gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 2rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.luxury-gallery-item:hover .luxury-gallery-overlay {
    transform: translateY(0);
}

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

@media (max-width: 480px) {
    .luxury-gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* === BUTTONS === */
.luxury-button-primary {
    background: var(--luxury-gold);
    color: #000000;
    border: none;
    padding: var(--luxury-space-md) var(--luxury-space-xl);
    font-size: var(--luxury-font-body);
    border-radius: var(--luxury-border-radius);
    cursor: pointer;
    transition: all var(--luxury-transition-base);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.luxury-button-primary:hover {
    background: var(--luxury-gold-light);
    transform: translateY(-2px);
    box-shadow: var(--luxury-shadow-md);
}

.luxury-button-secondary {
    background: transparent;
    color: var(--luxury-white);
    border: 1px solid var(--luxury-glass-border);
    padding: var(--luxury-space-md) var(--luxury-space-xl);
    font-size: var(--luxury-font-body);
    border-radius: var(--luxury-border-radius);
    cursor: pointer;
    transition: all var(--luxury-transition-base);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.luxury-button-secondary:hover {
    border-color: var(--luxury-gold);
    color: var(--luxury-gold);
    background: rgba(212, 175, 55, 0.1);
}

/* === TIMELINE === */
.luxury-timeline {
    position: relative;
    padding-left: var(--luxury-space-2xl);
}

.luxury-timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--luxury-glass-border);
}

.luxury-timeline-item {
    position: relative;
    margin-bottom: var(--luxury-space-2xl);
}

.luxury-timeline-item::before {
    content: '';
    position: absolute;
    left: -41px;
    top: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--luxury-gold);
    border: 2px solid #000000;
}

.luxury-timeline-year {
    font-family: var(--font-family-heading);
    font-size: var(--luxury-font-h4);
    color: var(--luxury-gold);
    margin-bottom: var(--luxury-space-sm);
}

.luxury-timeline-title {
    font-size: var(--luxury-font-h4);
    margin-bottom: var(--luxury-space-sm);
    color: var(--luxury-white);
}

.luxury-timeline-text {
    font-size: var(--luxury-font-body);
    line-height: 1.8;
    color: var(--luxury-white-muted);
}

/* === FORM ELEMENTS === */
/* Multi-step form visibility */
.form-step {
    display: none;
}

.form-step.active {
    display: block;
}

.luxury-form-group {
    margin-bottom: var(--luxury-space-lg);
}

.luxury-form-label {
    display: block;
    font-size: var(--luxury-font-small);
    color: var(--luxury-white);
    margin-bottom: var(--luxury-space-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.luxury-form-input,
.luxury-form-textarea,
.luxury-form-select {
    width: 100%;
    padding: var(--luxury-space-md);
    background: var(--luxury-glass-bg);
    border: 1px solid var(--luxury-glass-border);
    border-radius: var(--luxury-border-radius);
    color: var(--luxury-white);
    font-size: var(--luxury-font-body);
    font-family: var(--font-family-primary);
    transition: all var(--luxury-transition-base);
}

.luxury-form-input:focus,
.luxury-form-textarea:focus,
.luxury-form-select:focus {
    outline: none;
    border-color: var(--luxury-gold);
    background: var(--luxury-glass-bg-hover);
}

.luxury-form-textarea {
    min-height: 120px;
    resize: vertical;
}

/* === PROGRESS INDICATOR === */
.luxury-progress-bar {
    display: flex;
    justify-content: space-between;
    gap: var(--luxury-space-lg);
    margin-bottom: var(--luxury-space-xl);
}

.luxury-progress-step {
    flex: 1;
    text-align: center;
    transition: all var(--luxury-transition-base);
}

/* === VIDEO CONTAINER === */
.luxury-video-container {
    position: relative;
    width: 100%;
    max-width: var(--luxury-homepage-max-width);
    margin: 0 auto;
    border-radius: var(--luxury-border-radius-large);
    overflow: hidden;
    box-shadow: var(--luxury-shadow-lg);
    aspect-ratio: 16/9;
}

.luxury-video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.luxury-video-aspect {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.luxury-video-aspect iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* === PROFILE IMAGE === */
.luxury-profile-image {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid var(--luxury-gold);
    box-shadow: var(--luxury-shadow-glow);
    overflow: hidden;
}

.luxury-profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.luxury-profile-image-large {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 3px solid var(--luxury-gold);
    box-shadow: var(--luxury-shadow-glow);
    overflow: hidden;
}

.luxury-profile-image-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* === ANIMATIONS === */
@keyframes luxury-pulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.1), 0 0 40px rgba(255, 255, 255, 0.05);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.15), 0 0 60px rgba(255, 255, 255, 0.08);
    }
}

.luxury-pulse {
    animation: luxury-pulse 3s ease-in-out infinite;
}

@keyframes luxury-fade-in {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.luxury-fade-in {
    opacity: 0;
    animation: luxury-fade-in 0.8s ease-out forwards;
}

.luxury-fade-in-delay-1 {
    animation-delay: 0.2s;
}

.luxury-fade-in-delay-2 {
    animation-delay: 0.4s;
}

.luxury-fade-in-delay-3 {
    animation-delay: 0.6s;
}

/* === SCROLL REVEAL === */
.luxury-scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.luxury-scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* === SPACING UTILITIES === */
.luxury-mt-xs { margin-top: var(--luxury-space-xs); }
.luxury-mt-sm { margin-top: var(--luxury-space-sm); }
.luxury-mt-md { margin-top: var(--luxury-space-md); }
.luxury-mt-lg { margin-top: var(--luxury-space-lg); }
.luxury-mt-xl { margin-top: var(--luxury-space-xl); }
.luxury-mt-2xl { margin-top: var(--luxury-space-2xl); }
.luxury-mt-3xl { margin-top: var(--luxury-space-3xl); }

.luxury-mb-xs { margin-bottom: var(--luxury-space-xs); }
.luxury-mb-sm { margin-bottom: var(--luxury-space-sm); }
.luxury-mb-md { margin-bottom: var(--luxury-space-md); }
.luxury-mb-lg { margin-bottom: var(--luxury-space-lg); }
.luxury-mb-xl { margin-bottom: var(--luxury-space-xl); }
.luxury-mb-2xl { margin-bottom: var(--luxury-space-2xl); }
.luxury-mb-3xl { margin-bottom: var(--luxury-space-3xl); }

.luxury-pt-xs { padding-top: var(--luxury-space-xs); }
.luxury-pt-sm { padding-top: var(--luxury-space-sm); }
.luxury-pt-md { padding-top: var(--luxury-space-md); }
.luxury-pt-lg { padding-top: var(--luxury-space-lg); }
.luxury-pt-xl { padding-top: var(--luxury-space-xl); }
.luxury-pt-2xl { padding-top: var(--luxury-space-2xl); }

.luxury-pb-xs { padding-bottom: var(--luxury-space-xs); }
.luxury-pb-sm { padding-bottom: var(--luxury-space-sm); }
.luxury-pb-md { padding-bottom: var(--luxury-space-md); }
.luxury-pb-lg { padding-bottom: var(--luxury-space-lg); }
.luxury-pb-xl { padding-bottom: var(--luxury-space-xl); }
.luxury-pb-2xl { padding-bottom: var(--luxury-space-2xl); }

/* === RESPONSIVE TYPOGRAPHY === */
@media (max-width: 1024px) {
    .luxury-heading-hero {
        font-size: var(--journey-h2-section);
    }
    .luxury-heading-h1 {
        font-size: var(--journey-h2-section);
    }
    .luxury-heading-h2 {
        font-size: var(--journey-h2-section);
    }
    .luxury-heading-h3 {
        font-size: var(--journey-h3-card);
    }
}

@media (max-width: 768px) {
    .luxury-heading-hero {
        font-size: var(--journey-h2-section);
    }
    .luxury-heading-h1 {
        font-size: var(--journey-h2-section);
    }
    .luxury-heading-h2 {
        font-size: var(--journey-h3-card);
    }
    .luxury-heading-h3 {
        font-size: var(--journey-text-description);
    }
    .luxury-heading-h4 {
        font-size: var(--journey-text-body);
    }

    .luxury-section {
        padding: var(--luxury-space-3xl) 0;
    }

    .luxury-container,
    .luxury-container-narrow,
    .luxury-container-wide {
        padding: 0 var(--journey-container-padding);
    }
}

/* === RESPONSIVE UTILITIES === */
@media (max-width: 768px) {
    .luxury-hide-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .luxury-show-mobile {
        display: none !important;
    }
}

/* ==============================================
   END LUXURY PAGES UTILITY CLASSES
   ============================================== */

/* Intermediate CTA spacing after comparison boxes */
.service-section .cta-wrapper {
    margin-top: 3rem; /* 48px gap */
}



/* COULD BE DUPLICATE CSS HAVE TO CHECK LATER*/

.final-section-wrapper {
        padding: 4rem 1rem;
        position: relative;
        z-index: 10;
    }

    .final-section-container {
        position: relative;
        z-index: 10;
        width: 100%;
        max-width: 90rem;
        margin: 0 auto;
    }

    .final-section-card {
        backdrop-filter: blur(20px);
        padding: 3rem;
        border: 1px solid rgba(255, 255, 255, 0.2);
        position: relative;
        overflow: hidden;
        margin-top: 2rem;
    }

    .final-section-inner {
        position: relative;
        z-index: 10;
    }

    .final-section-grid {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 3rem;
        align-items: center;
    }

    .final-section-description {
        position: relative;
        z-index: 10;
    }

    .final-section-cta-box {
        backdrop-filter: blur(10px);
        padding: 4rem 3rem;
        border: 1px solid rgba(255, 255, 255, 0.2);
        position: relative;
        overflow: hidden;
        min-height: 500px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .final-section-cta-content {
        position: relative;
        z-index: 10;
        text-align: center;
    }

    .final-section-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 1.5rem 3rem;
        font-size: var(--journey-text-body);
        transition: all 0.3s ease;
    }

    .final-section-button span {
        transition: all 0.3s ease;
    }

    .final-section-button svg {
        height: 1.5rem;
        width: 1.5rem;
        margin-left: 1rem;
        transition: transform 0.3s ease;
    }

    @media (max-width: 768px) {
        .final-section-grid {
            grid-template-columns: 1fr;
        }
    }

    /* Form Wrapper */
    .form-wrapper {
        max-width: 672px;
        margin: 0 auto;
    }

    /* Form Container */
    .form-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        width: 100%;
    }

    @media (min-width: 640px) {
        .form-container {
            flex-direction: row;
            align-items: stretch;
        }
    }

    /* Disclaimer */
    .disclaimer {
        text-align: center;
        margin-top: 1.5rem;
        color: rgba(255, 255, 255, 0.9);
        font-size: var(--journey-text-body);
        font-family: var(--font-family-primary);
    }

    /* Success Section */
    .success-message {
        text-align: center;
        max-width: 672px;
        margin: 0 auto;
    }

    /* Hidden Class */
    .hidden {
        display: none;
    }

    .hero-glass-box {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35));
    }

    /* Hero Title Styling */
    .hero-title-flex {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    /* Main Container Wrapper */
    .bert-section-wrapper {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4rem 2rem;
        background: #000000;
    }

    .bert-section-container {
        width: 100%;
        max-width: 90rem;
        margin: 0 auto;
    }

    /* Grid Layout */
    .bert-grid {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 4rem;
        align-items: center;
    }

    /* Left Column - Image */
    .bert-image-wrapper {
        position: relative;
    }

    .bert-image-container {
        width: 100%;
        aspect-ratio: 3/4;
        background: #2a2a2a;
        border-radius: 11px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        overflow: hidden;
        position: relative;
    }

    .bert-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Name Badge */
    .bert-name-badge {
        position: absolute;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(10px);
        padding: 1.5rem 3rem;
        border-radius: 11px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        text-align: center;
    }

    .bert-name {
        font-family: var(--font-family-heading);
        font-size: var(--journey-h3-card);
        color: #ffffff;
        margin-bottom: 0.25rem;
    }

    .bert-title {
        font-family: var(--font-family-primary);
        font-size: var(--journey-text-label);
        color: rgba(255, 255, 255, 0.7);
        text-transform: uppercase;
        letter-spacing: 0.15em;
    }

    /* Right Column - Content */
    .bert-content {
        position: relative;
        z-index: 10;
    }

    /* Main Heading */
    .bert-main-heading {
        font-family: var(--font-family-heading);
        font-size: var(--journey-h2-section);
        line-height: 1.2;
        margin-bottom: 0;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .bert-heading-text {
        color: #ffffff;
    }

    /* Description */
    .bert-description {
        font-family: var(--font-family-primary);
        font-size: var(--journey-text-body);
        line-height: 1.8;
        color: rgba(255, 255, 255, 0.9);
        margin: 0 0 3rem 0;
    }

    /* Features List */
    .bert-features {
        margin-bottom: 3rem;
    }

    .bert-feature {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .bert-feature:last-child {
        margin-bottom: 0;
    }

    .bert-feature-icon {
        width: 1.5rem;
        height: 1.5rem;
        flex-shrink: 0;
        margin-top: 0.25rem;
        color: #ffffff;
    }

    .bert-feature-text {
        font-family: var(--font-family-primary);
        font-size: var(--journey-text-body);
        line-height: 1.8;
        color: rgba(255, 255, 255, 0.9);
        margin: 0;
    }

    /* CTA Button */
    .bert-cta-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 1.5rem 3rem;
        font-size: var(--journey-text-body);
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .bert-cta-button svg {
        height: 1.5rem;
        width: 1.5rem;
        margin-left: 1rem;
        transition: transform 0.3s ease;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .bert-grid {
            grid-template-columns: 1fr;
            gap: 2rem;
        }

        .bert-main-heading {
            font-size: var(--journey-h2-section);
            text-align: center;
            margin-bottom: 1.5rem;
        }
    }

        /* Oracle Section */
    .oracle-section-wrapper {
        padding: 4rem 1rem;
        position: relative;
        z-index: 10;
    }

    .oracle-section-container {
        width: 100%;
        max-width: 90rem;
        margin: 0 auto;
        position: relative;
        z-index: 10;
    }

    .oracle-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 2rem;
    }

    /* Left Column */
    .oracle-left-box {
        backdrop-filter: blur(20px);
        padding: 3rem;
        border: 1px solid rgba(255, 255, 255, 0.2);
        position: relative;
        overflow: hidden;
    }

    .oracle-left-content {
        position: relative;
        z-index: 10;
    }

    .oracle-main-title {
        font-family: var(--font-family-heading);
        font-size: var(--journey-h2-section);
        text-align: center;
        line-height: 1.2;
        letter-spacing: 0.05em;
        margin-bottom: 2rem;
        color: var(--purple-main);
        text-shadow: var(--purple-main-glow);
    }

    .oracle-title-divider {
        height: 2px;
        width: 8rem;
        background: linear-gradient(to right, transparent, var(--purple-main), transparent);
        margin: 0 auto 3rem auto;
    }

    .oracle-image-container {
        border-radius: 1.5rem;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.2);
        margin-bottom: 2rem;
    }

    .oracle-image {
        width: 100%;
        height: 400px;
        object-fit: cover;
        background: linear-gradient(to bottom, #1a1a2e, #0f0f1a);
    }

    /* Cards Grid */
    .oracle-cards-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .oracle-card {
        backdrop-filter: blur(10px);
        padding: 2rem;
        border: 1px solid rgba(255, 255, 255, 0.2);
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .oracle-card-content {
        position: relative;
        z-index: 10;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .oracle-card-header {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .oracle-card-icon {
        width: 2rem;
        height: 2rem;
        flex-shrink: 0;
        color: var(--purple-main);
    }

    .oracle-card-title {
        font-family: var(--font-family-heading);
        font-size: var(--journey-text-description);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #ffffff;
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.3), 0 4px 12px rgba(0, 0, 0, 0.8);
    }

    .oracle-card-text {
        font-family: var(--font-family-primary);
        font-size: var(--journey-text-description);
        line-height: 1.8;
        color: rgba(255, 255, 255, 0.85);
    }

    /* Right Column */
    .oracle-right-box {
        backdrop-filter: blur(20px);
        padding: 3rem;
        border: 1px solid rgba(255, 255, 255, 0.2);
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .oracle-right-content {
        position: relative;
        z-index: 10;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .oracle-right-text-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2rem;
    }

    .oracle-right-text {
        font-family: var(--font-family-primary);
        font-size: var(--journey-text-body);
        line-height: 1.8;
        color: rgba(255, 255, 255, 0.85);
    }

    .oracle-cta-container {
        margin-top: 2rem;
    }

    .oracle-cta-button {
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 1.5rem 3rem;
        font-size: var(--journey-text-body);
        letter-spacing: 0.1em;
        border-radius: 0.75rem;
        transition: all 0.3s ease;
        font-family: var(--font-family-heading);
        background: linear-gradient(135deg, var(--purple-main) 0%, rgba(168, 85, 247, 0.8) 100%);
        color: #000000;
        border: none;
        cursor: pointer;
        text-transform: uppercase;
    }

    .oracle-cta-button svg {
        height: 1.5rem;
        width: 1.5rem;
        margin-left: 1rem;
        transition: transform 0.3s;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .oracle-grid {
            grid-template-columns: 1fr;
        }

        .oracle-cards-grid {
            grid-template-columns: 1fr;
        }

        .oracle-main-title {
            font-size: var(--journey-h2-section);
        }
    }

/* ==============================================
   ABOUT US PAGE - "MEIN WEG" TIMELINE SECTION
   ============================================== */

/* Journey grid container for timeline layout - ONLY when timeline-connector is present */
.luxury-journey-container:has(.timeline-connector) .luxury-journey-grid {
    display: block !important;
    position: relative;
    max-width: var(--luxury-homepage-max-width);
    margin: 0 auto;
    grid-template-columns: unset !important;
    gap: 0 !important;
}

/* Timeline connector line */
.timeline-connector {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2), transparent);
    transform: translateX(-50%);
    z-index: 1;
}

/* Journey item wrapper - alternating left/right */
.journey-item {
    display: grid;
    grid-template-columns: 1fr 100px 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
    align-items: center;
    position: relative;
}

/* Odd items (1, 3) - content on left, empty on right */
.journey-item:nth-child(odd) .luxury-journey-card {
    grid-column: 1;
    text-align: right;
}

.journey-item:nth-child(odd) .timeline-circle {
    grid-column: 2;
}

.journey-item:nth-child(odd) .journey-spacer {
    grid-column: 3;
}

/* Even items (2, 4) - empty on left, content on right */
.journey-item:nth-child(even) .journey-spacer {
    grid-column: 1;
}

.journey-item:nth-child(even) .timeline-circle {
    grid-column: 2;
}

.journey-item:nth-child(even) .luxury-journey-card {
    grid-column: 3;
    text-align: left;
}

/* Timeline circles in the middle */
.timeline-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border: 3px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--journey-h2-section);
    color: white;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.1);
    z-index: 2;
    position: relative;
    margin: 0 auto;
    transition: all 0.3s ease;
}

.journey-item:hover .timeline-circle {
    transform: scale(1.2);
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.5), inset 0 0 30px rgba(255, 255, 255, 0.2);
}

/* Override journey card styling when inside journey-item */
.journey-item .luxury-journey-card {
    min-height: 200px;
    padding: 3rem;
}

/* Responsive behavior for tablets and mobile */
@media (max-width: 1200px) {
    /* Stack journey items vertically on tablets */
    .journey-item {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .timeline-connector {
        display: none;
    }

    .timeline-circle {
        margin: 0 auto 2rem;
    }

    .journey-item:nth-child(odd) .luxury-journey-card,
    .journey-item:nth-child(even) .luxury-journey-card {
        grid-column: 1;
        text-align: center;
    }

    .journey-item:nth-child(odd) .timeline-circle,
    .journey-item:nth-child(even) .timeline-circle {
        grid-column: 1;
        grid-row: 1;
    }

    .journey-item:nth-child(odd) .journey-spacer,
    .journey-item:nth-child(even) .journey-spacer {
        display: none;
    }

    .journey-item:nth-child(odd) .luxury-journey-card,
    .journey-item:nth-child(even) .luxury-journey-card {
        grid-row: 2;
    }
}

/* ==============================================
   ABOUT US PAGE - VIDEO CONTAINER GLASS BOX
   ============================================== */

/* Override parent container max-width to be consistent (1200px) and remove padding */
.background-section .max-w-7xl {
    max-width: var(--luxury-homepage-max-width) !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Remove padding from the section that contains the video */
.background-section section.px-4 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Change flex to contents for About Us video section */
.background-section section.flex {
    display: contents !important;
}

/* Ensure video container is centered */
.background-section .video-container {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Video container with glass card effect - matching homepage style */
.background-section .video-container {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1.5rem;
    transition: all 0.3s ease;
    height: 700px;
    width: 100%;
    overflow: visible !important;
}

.background-section .video-container:hover {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Ensure iframe fills the container properly */
.background-section .video-container .video-iframe {
    width: 100%;
    height: calc(100% - 3rem);
    border: none;
    border-radius: 11px;
}

/* ============================================
   FIX HORIZONTAL SCROLL - COMPARISON GRID
   Critical fix for service pages
   ============================================ */

@media (max-width: 768px) {
    .service-comparison-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .service-comparison-grid {
        gap: 1rem;
    }
}

/* ============================================
   JOURNEY PAGE MOBILE RESPONSIVENESS
   Comprehensive mobile fixes for all journey sections
   ============================================ */

/* 640px - Large Phones (e.g., iPhone 14 Pro Max) */
@media (max-width: 640px) {
    /* ============================================
       UNIFIED MOBILE TYPOGRAPHY SYSTEM
       All headings and text standardized across journey page
       ============================================ */

    /* H1 - Main page headings - 48px */
    h1,
    .journey-hero-title,
    .journey-section-title,
    .meistern-main-title,
    .oracle-main-title,
    .bert-main-heading,
    .newsletter-container .main-heading,
    .newsletter-header .main-heading {
        font-size: var(--journey-h2-section) !important;
        line-height: 1.2 !important;
        letter-spacing: 0.03em !important;
        text-align: center !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* H2 - Section subheadings - 28px */
    h2,
    .journey-card-title-lg,
    .orange-karriere-title,
    .akzeptanz-title {
        font-size: var(--journey-h3-card) !important;
        line-height: 1.3 !important;
        letter-spacing: 0.03em !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* H3 - Card and component titles - 22px - Left aligned (secondary color) */
    h3,
    .journey-card-title,
    .orange-karriere-subtitle,
    .orange-karriere-feature-title,
    .meistern-card-title,
    .lbc-title {
        font-size: var(--journey-text-body) !important;
        line-height: 1.4 !important;
        letter-spacing: 0.03em !important;
        text-align: center !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* H4 - Small feature titles - 18px - Left aligned (secondary color) */
    h4,
    .journey-feature-title {
        font-size: var(--journey-text-body) !important;
        line-height: 1.4 !important;
        letter-spacing: 0.03em !important;
        text-align: left !important;
    }

    /* Body text - Paragraphs and descriptions - 19.2px */
    p,
    .journey-body-text,
    .journey-hero-description,
    .orange-karriere-text,
    .orange-karriere-feature-text,
    .meistern-card-description,
    .lbc-description,
    .bert-description,
    .akzeptanz-description {
        font-size: var(--journey-text-description) !important;
        line-height: 1.6 !important;
    }

    /* Small text - Stats, labels, captions - 14px */
    .service-stat-label,
    .cta-subtext {
        font-size: var(--journey-text-label) !important;
    }

    /* Hero Section */
    .hero-section {
        padding-top: 8rem !important;  /* Down from 16rem (256px → 128px) */
        padding-bottom: 1.5rem !important;
    }

    .journey-hero-title {
        font-size: var(--journey-h2-section) !important;  /* Down from 3.75rem */
        line-height: 1.2;
    }

    .hero-box {
        padding: 2.5rem 1.5rem !important;
        gap: 1.5rem;
    }

    /* Stats Section */
    .service-stat-number {
        font-size: var(--journey-h2-section) !important;  /* Down from 4rem (64px → 40px) */
    }

    .service-stat-label {
        font-size: var(--journey-text-label) !important;
    }

    /* All Journey Sections (Red, Orange, Green, Cyan, Purple) */
    .red-section,
    .orange-section,
    .green-section,
    .cyan-section,
    .purple-section {
        padding: 3rem 0 !important;  /* Down from 5rem (80px → 48px) */
    }

    .journey-section-title {
        font-size: var(--journey-h2-section) !important;  /* Down from 3rem */
        margin-bottom: 1.5rem !important;
    }

    .journey-body-text {
        font-size: var(--journey-text-description) !important;  /* Down from 1.25rem */
        line-height: 1.6;
    }

    /* Section Boxes */
    .red-box,
    .orange-box,
    .green-box,
    .cyan-box,
    .purple-box {
        padding: 2rem 1.5rem !important;
        gap: 1.5rem;
    }

    /* Cards */
    .journey-card,
    .red-card,
    .orange-card,
    .green-card,
    .cyan-card,
    .purple-card {
        padding: 1.5rem !important;
    }

    .journey-card-title {
        font-size: var(--journey-text-description) !important;
        margin-bottom: 0.75rem !important;
    }

    .journey-card-text {
        font-size: var(--journey-text-label) !important;
    }

    /* Service Grids - Force single column */
    .service-grid-2,
    .service-grid-3,
    .service-grid-4 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    /* CTA Button Centering - Fix for all journey section CTA buttons */
    .red-cta-button,
    .orange-cta-button,
    .green-cta-button,
    .cyan-cta-button,
    .purple-cta-button {
        display: block !important;
        margin: 1.5rem auto !important;
        width: 100% !important;
        max-width: 300px !important;
        text-align: center !important;
    }

    /* Orange Karriere Section - Fix box overflow */
    .orange-karriere-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .orange-karriere-left-box,
    .orange-karriere-right-box {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .orange-karriere-outer-box {
        padding: 2rem 1.5rem !important;
        overflow: hidden !important;
    }

    /* Purple Section - Fix transformation boxes overflow */
    .purple-transformation-grid,
    .purple-grid-4 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Bleiben Sie der Konkurrenz voraus component */
    .konkurrenz-title {
        font-size: var(--journey-h3-card) !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        text-align: center !important;
        margin-bottom: 2rem !important;
    }

    /* All glass boxes - prevent overflow on mobile */
    .apple-corners,
    .meistern-box {
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* MEISTERN SIE IHRE BERUFLICHE ZUKUNFT - Reduce size for full visibility */
    .meistern-main-title {
        font-size: var(--journey-h2-section) !important;
        letter-spacing: 0.03em !important;
        line-height: 1.15 !important;
    }

    /* Newsletter main heading - BLEIBEN SIE DER KONKURRENZ VORAUS */
    .newsletter-container .main-heading,
    .newsletter-header .main-heading {
        font-size: var(--journey-h2-section) !important;
        line-height: 1.2 !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Oracle section - IHRE TRANSFORMATION */
    .oracle-main-title {
        font-size: var(--journey-h3-card) !important;
        line-height: 1.2 !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }

    /* Bert section - HOLEN SIE SICH IHREN PERSÖNLICHEN FAHRPLAN ZUM ERFOLG */
    .bert-main-heading {
        font-size: var(--journey-h3-card) !important;
        text-align: center !important;
        margin-bottom: 1.5rem !important;
        line-height: 1.2 !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Akzeptanz section - DIE KRAFT DER AKZEPTANZ */
    .akzeptanz-title {
        text-align: center !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* 480px - Mobile Phones (e.g., iPhone 14) */
@media (max-width: 480px) {
    /* ============================================
       UNIFIED MOBILE TYPOGRAPHY SYSTEM - SMALLER
       Further size reduction for standard phones
       ============================================ */

    /* H1 - Main page headings - 48px */
    h1,
    .journey-hero-title,
    .journey-section-title,
    .meistern-main-title,
    .oracle-main-title,
    .bert-main-heading,
    .newsletter-container .main-heading,
    .newsletter-header .main-heading {
        font-size: var(--journey-h2-section) !important;
        letter-spacing: 0.02em !important;
    }

    /* H2 - Section subheadings - 26px */
    h2,
    .journey-card-title-lg,
    .orange-karriere-title,
    .akzeptanz-title {
        font-size: var(--journey-h3-card) !important;
    }

    /* H3 - Card and component titles - 22px - Left aligned (secondary color) */
    h3,
    .journey-card-title,
    .orange-karriere-subtitle,
    .orange-karriere-feature-title,
    .meistern-card-title,
    .lbc-title {
        font-size: var(--journey-text-body) !important;
        text-align: left !important;
    }

    /* H4 - Small feature titles - 16px - Left aligned (secondary color) */
    h4,
    .journey-feature-title {
        font-size: var(--journey-text-description) !important;
        text-align: left !important;
    }

    /* Body text remains at 16px (no change) */

    /* Hero Section - Further reduction */
    .hero-section {
        padding-top: 6rem !important;  /* Down from 8rem (128px → 96px) */
        padding-bottom: 1.25rem !important;
    }

    .hero-box {
        padding: 2rem 1.25rem !important;
        gap: 1.25rem;
    }

    /* Stats Section */
    .service-stat-number {
        font-size: var(--journey-h2-section) !important;  /* Down from 2.5rem (40px → 32px) */
    }

    .service-stat-label {
        font-size: var(--journey-text-label) !important;
    }

    /* All Journey Sections */
    .red-section,
    .orange-section,
    .green-section,
    .cyan-section,
    .purple-section {
        padding: 2.5rem 0 !important;  /* Down from 3rem (48px → 40px) */
    }

    .journey-section-title {
        font-size: var(--journey-h3-card) !important;  /* Down from 2rem */
        margin-bottom: 1.25rem !important;
    }

    .journey-body-text {
        font-size: var(--journey-text-label) !important;  /* Down from 1rem */
        line-height: 1.5;
    }

    /* Section Boxes */
    .red-box,
    .orange-box,
    .green-box,
    .cyan-box,
    .purple-box {
        padding: 1.75rem 1.25rem !important;
        gap: 1.25rem;
    }

    /* Cards */
    .journey-card,
    .red-card,
    .orange-card,
    .green-card,
    .cyan-card,
    .purple-card {
        padding: 1.25rem !important;
    }

    .journey-card-title {
        font-size: var(--journey-text-body) !important;
        margin-bottom: 0.625rem !important;
    }

    .journey-card-text {
        font-size: var(--journey-text-label) !important;
    }

    /* Service Grids */
    .service-grid-2,
    .service-grid-3,
    .service-grid-4 {
        gap: 1.25rem;
    }

    /* Bleiben Sie der Konkurrenz voraus - Further reduction */
    .konkurrenz-title {
        font-size: var(--journey-text-description) !important;
    }

    /* Meistern Section - Title reduction for better mobile appearance */
    .meistern-main-title {
        font-size: var(--journey-h3-card) !important;
        letter-spacing: 0.02em !important;
    }

    /* CTA Buttons - Better text sizing */
    .red-cta-button,
    .orange-cta-button,
    .green-cta-button,
    .cyan-cta-button,
    .purple-cta-button {
        font-size: var(--journey-text-label) !important;
        padding: 1rem 1.5rem !important;
        letter-spacing: 0.05em !important;
    }

    /* Orange Karriere Section - Feature titles same size as body text */
    .orange-karriere-feature-title {
        font-size: var(--journey-text-body) !important;
        letter-spacing: 0.05em !important;
        line-height: 1.8 !important;
    }

    .orange-karriere-subtitle {
        font-size: var(--journey-text-body) !important;
        letter-spacing: 0.1em !important;
        line-height: 1.8 !important;
    }

    /* Purple Section - IHRE TRANSFORMATION heading */
    .purple-section .journey-section-title,
    .purple-section .journey-hero-title {
        font-size: var(--journey-h3-card) !important;
        letter-spacing: 0.02em !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }

    /* Purple Section - Card titles and large card titles */
    .purple-section .journey-card-title-lg,
    .purple-section .journey-card-title {
        font-size: var(--journey-text-description) !important;
        letter-spacing: 0.03em !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* 375px - Small Phones (e.g., iPhone SE, iPhone 12 mini) */
@media (max-width: 375px) {
    /* ============================================
       UNIFIED MOBILE TYPOGRAPHY SYSTEM - SMALLEST
       Minimal sizes for small phones
       ============================================ */

    /* H1 - Main page headings - 48px */
    h1,
    .journey-hero-title,
    .journey-section-title,
    .meistern-main-title,
    .oracle-main-title,
    .bert-main-heading,
    .newsletter-container .main-heading,
    .newsletter-header .main-heading {
        font-size: var(--journey-h2-section) !important;
        letter-spacing: 0.02em !important;
    }

    /* H2 - Section subheadings - 24px */
    h2,
    .journey-card-title-lg,
    .orange-karriere-title,
    .akzeptanz-title {
        font-size: var(--journey-h3-card) !important;
    }

    /* H3 - Card and component titles - 22px - Left aligned (secondary color) */
    h3,
    .journey-card-title,
    .orange-karriere-subtitle,
    .orange-karriere-feature-title,
    .meistern-card-title,
    .lbc-title {
        font-size: var(--journey-text-body) !important;
        text-align: left !important;
    }

    /* H4 - Small feature titles - 14px - Left aligned (secondary color) */
    h4,
    .journey-feature-title {
        font-size: var(--journey-text-label) !important;
        text-align: left !important;
    }

    /* Body text - 19.2px */
    p,
    .journey-body-text,
    .journey-hero-description,
    .orange-karriere-text,
    .orange-karriere-feature-text,
    .meistern-card-description,
    .lbc-description,
    .bert-description,
    .akzeptanz-description {
        font-size: var(--journey-text-description) !important;
    }

    /* Hero Section - Minimal design */
    .hero-section {
        padding-top: 4rem !important;  /* Down from 6rem (96px → 64px) */
        padding-bottom: 1rem !important;
    }

    .hero-box {
        padding: 1.5rem 1rem !important;
        gap: 1rem;
    }

    /* Stats Section */
    .service-stat-number {
        font-size: var(--journey-h3-card) !important;  /* Down from 2rem (32px → 24px) */
    }

    .service-stat-label {
        font-size: var(--journey-text-caption) !important;
    }

    /* All Journey Sections */
    .red-section,
    .orange-section,
    .green-section,
    .cyan-section,
    .purple-section {
        padding: 2rem 0 !important;  /* Down from 2.5rem (40px → 32px) */
    }

    .journey-section-title {
        font-size: var(--journey-h3-card) !important;  /* Down from 1.75rem */
        margin-bottom: 1rem !important;
    }

    .journey-body-text {
        font-size: var(--journey-text-label) !important;  /* Down from 0.9375rem */
        line-height: 1.5;
    }

    /* Section Boxes */
    .red-box,
    .orange-box,
    .green-box,
    .cyan-box,
    .purple-box {
        padding: 1.5rem 1rem !important;
        gap: 1rem;
    }

    /* Cards - Ultra compact */
    .journey-card,
    .red-card,
    .orange-card,
    .green-card,
    .cyan-card,
    .purple-card {
        padding: 1rem !important;
    }

    .journey-card-title {
        font-size: var(--journey-text-description) !important;
        margin-bottom: 0.5rem !important;
    }

    .journey-card-text {
        font-size: var(--journey-text-label) !important;
    }

    /* Service Grids */
    .service-grid-2,
    .service-grid-3,
    .service-grid-4 {
        gap: 1rem;
    }

    /* Container Padding */
    .journey-container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* MEISTERN SIE IHRE BERUFLICHE ZUKUNFT - Extra small screens */
    .meistern-main-title {
        font-size: var(--journey-h3-card) !important;
        letter-spacing: 0.02em !important;
        line-height: 1.15 !important;
    }

    /* Purple Section - Card titles even smaller on extra small screens */
    .purple-section .journey-card-title-lg,
    .purple-section .journey-card-title {
        font-size: var(--journey-text-body) !important;
    }

    /* Purple Section - Hero and section titles even smaller with tighter letter spacing */
    .purple-section .journey-section-title,
    .purple-section .journey-hero-title {
        font-size: var(--journey-text-description) !important;
        letter-spacing: 0.01em !important;
    }

    /* Newsletter main heading - Further reduction */
    .newsletter-container .main-heading,
    .newsletter-header .main-heading {
        font-size: var(--journey-h3-card) !important;
    }

    /* Oracle section - Further reduction */
    .oracle-main-title {
        font-size: var(--journey-h3-card) !important;
        letter-spacing: 0.02em !important;
    }

    /* Bert section - Further reduction */
    .bert-main-heading {
        font-size: var(--journey-h3-card) !important;
        letter-spacing: 0.03em !important;
    }
}

/* ============================================
   UTILITY CLASSES FOR LINE BREAKS
   ============================================ */

/* Line break utility - Add <br class="mobile-break"> in HTML where you want line breaks on mobile */
.mobile-break {
    display: none;
}

@media (max-width: 768px) {
    .mobile-break {
        display: block;
    }
}

/* Alternative: Use word spacing to force breaks - Apply .force-word-break to heading */
.force-word-break {
    word-spacing: 100vw;
}

/* Green Section - Force "ENTDECKEN SIE IHREN WEG" to break after SIE on mobile */
@media (max-width: 768px) {
    .green-section-journey .journey-hero-title {
        display: inline-block;
        max-width: 100%;
    }

    /* This will make each word go to a new line, effectively breaking after SIE */
    .green-section-journey .journey-hero-title {
        word-spacing: 100vw;
    }

    /* Center all h3 elements in service sections on mobile */
    .service-section h3,
    .component-section h3 {
        text-align: center !important;
    }
}

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

.error-message {
    display: block;
    margin-top: 0.25rem;
    font-size: var(--journey-text-label);
    color: #ef4444;
}

.form-hint {
    display: block;
    margin-top: 0.25rem;
    font-size: var(--journey-text-label);
    color: rgba(255, 255, 255, 0.6);
}

.required-indicator {
    color: #ef4444;
}

.optional-indicator {
    font-size: var(--journey-text-label);
    color: rgba(255, 255, 255, 0.6);
}