/* ====================================
   RESET & BASE STYLES
==================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
}

/* ====================================
   HEADER STYLES
   - Glass bar design with rounded corners
   - Frosted glass effect
   - Centered with auto width
==================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 20px;
    display: flex;
    justify-content: center;
}

.header-glass-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    padding: 12px 24px;
    border-radius: 8px;
    -webkit-backdrop-filter: blur(clamp(8px, 1em, 20px));
    backdrop-filter: blur(clamp(8px, 1em, 20px));
    background: linear-gradient(-75deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.3),
        inset 0 -1px 1px rgba(255, 255, 255, 0.1),
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* ====================================
   LOGO STYLES
==================================== */
.logo {
    display: flex;
    align-items: center;
}

.logo-image {
    height: 40px;
    width: auto;
}

/* Header Contact Button */
.header-contact-btn {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    background-color: #fff;
    padding: 10px 24px;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-contact-btn:hover {
    background-color: #990000;
    color: #fff;
    transform: scale(0.98);
}

/* ====================================
   NAVIGATION MENU STYLES
   - Portfolio-style liquid wrap animation
   - White background expands from cursor on hover
==================================== */
.nav-menu {
    display: flex;
    gap: 16px;
    align-items: center;
}

.nav-link {
    cursor: pointer;
    display: block;
    white-space: nowrap;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    padding: 10px 24px;
    /* Matched to contact button */
    border-radius: 999vw;
    background: transparent;
    position: relative;
    z-index: 10;
    transition: all 0.3s ease;
}

.nav-link:hover {
    color: #990000;
    background: transparent;
    transform: scale(0.98);
    /* Slight shrinking match contact btn */
}

/* Liquid Wrap Animation (Center Bottom Origin) */
.nav-link::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    border-radius: 999vw;
    background: #ffffff;
    z-index: -1;
    opacity: 1;
    /* Start as a small dot at center bottom */
    clip-path: circle(0% at 50% 100%);
    transform: none;
    /* Maintain the bouncy/liquid feel but smoother/slower */
    transition: clip-path 0.65s cubic-bezier(0.19, 1, 0.22, 1);
}

.nav-link:hover::before {
    /* Expand to fill from center bottom */
    clip-path: circle(150% at 50% 100%);
}

/* ====================================
   HERO SECTION STYLES
   - Full screen sticky scroll
==================================== */
.hero-scroll-wrapper {
    height: 250vh;
    /* Scroll distance for animation */
    position: relative;
    z-index: 1;
}

.hero {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* Center content vertically */
    justify-content: center;
    background-color: #fff;
    /* White frame color */
    box-sizing: border-box;
    /* Padding shrinks content */
}

.hero-image-frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
    background-color: #fff;
    /* The white frame revealed by clip-path */
}

.hero-image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    /* Centered for zoom */
    transition: none;
}

.hero-text {
    position: absolute;
    top: 50%;
    /* Centered */
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
    max-width: 1600px;
    z-index: 10;
    /* In front of image */
}

.hero-headline {
    color: #000;
    font-size: 48px;
    /* Half size as requested */
    font-weight: 800;
    font-family: 'Inter', sans-serif;
    line-height: 1.1;
    text-shadow: none;
    margin-bottom: 32px;
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    /* Space for marker to breathe */
    z-index: 10;
}

/* Realistic Red Marker Highlight (Behind) */
.hero-headline::before {
    content: "";
    display: block;
    position: absolute;
    /* Slight overflow for better coverage */
    width: calc(100% + 200px);
    height: 200%;
    left: -100px;
    top: 50%;
    transform: translateY(-50%) rotate(3deg);
    background-image: url('Pictures/marker.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    opacity: 0.9;
    mix-blend-mode: multiply;
}

.hero-headline-alt {
    color: #000;
    font-size: 48px;
    /* Reduced to fit marker */
    font-weight: 800;
    font-family: 'Inter', sans-serif;
    line-height: 1.1;
    text-shadow: none;
    margin-bottom: 32px;
    position: absolute;
    top: 0;
    /* Reset since sizes match now */
    /* Slight offset to align vertically with larger text baseline if needed */
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    /* Hug text so marker fits */
    max-width: 90%;
    opacity: 0;
    /* Hidden initially */
    padding: 10px 20px;
    z-index: 10;
}

/* Marker for Alt Headline */
.hero-headline-alt::before {
    content: "";
    display: block;
    position: absolute;
    /* Slight overflow for better coverage */
    width: calc(100% + 300px);
    height: 250%;
    left: -150px;
    top: 50%;
    transform: translateY(-50%) rotate(3deg);
    background-image: url('Pictures/marker.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    opacity: 0.9;
    mix-blend-mode: multiply;
}

.hero-subheadline {
    color: #000;
    font-size: 24px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    line-height: 1.4;
    text-shadow: none;
}

/* Hero Button Container */
.hero-button-container {
    margin-top: 32px;
}

/* ====================================
   GLASS BUTTON STYLES
   Custom Property Definitions for Animation
==================================== */
@property --angle-1 {
    syntax: "<angle>";
    inherits: false;
    initial-value: -75deg;
}

@property --angle-2 {
    syntax: "<angle>";
    inherits: false;
    initial-value: -45deg;
}

.glass-wrap {
    z-index: 2;
    pointer-events: none;
    background: 0 0;
    border-radius: 999vw;
    width: fit-content;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    padding: 0;
}

.glass-shadow {
    --shadow-cuttoff-fix: 2em;
    width: calc(100% + var(--shadow-cuttoff-fix));
    height: calc(100% + var(--shadow-cuttoff-fix));
    top: calc(0% - var(--shadow-cuttoff-fix) / 2);
    left: calc(0% - var(--shadow-cuttoff-fix) / 2);
    filter: blur(clamp(2px, 0.125em, 12px));
    pointer-events: none;
    position: absolute;
    overflow: visible;
}

.glass-shadow:after {
    content: "";
    z-index: 0;
    width: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
    height: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
    inset: 0;
    top: calc(var(--shadow-cuttoff-fix) - 0.5em);
    left: calc(var(--shadow-cuttoff-fix) - 0.875em);
    box-sizing: border-box;
    opacity: 1;
    background: linear-gradient(#0003, #0000001a);
    border-radius: 999vw;
    padding: 0.125em;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: absolute;
    overflow: visible;
    -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    -webkit-mask-position: 0 0, 0 0;
    mask-position: 0 0, 0 0;
    -webkit-mask-size: auto, auto;
    mask-size: auto, auto;
    -webkit-mask-repeat: repeat, repeat;
    mask-repeat: repeat, repeat;
    -webkit-mask-clip: content-box, border-box;
    mask-clip: content-box, border-box;
    -webkit-mask-origin: content-box, border-box;
    mask-origin: content-box, border-box;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    -webkit-mask-source-type: auto, auto;
    mask-mode: match-source, match-source;
}

.glass-button {
    --border-width: clamp(1px, 0.0625em, 4px);
    all: unset;
    cursor: pointer;
    -webkit-tap-highlight-color: #0000;
    pointer-events: auto;
    z-index: 3;
    -webkit-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
    backdrop-filter: blur(clamp(1px, 0.125em, 4px));
    background: linear-gradient(-75deg, #ffffff0d, #fff3, #ffffff0d);
    border-radius: 999vw;
    justify-content: center;
    align-items: center;
    width: auto;
    padding: 0 24px;
    height: 56px;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    position: relative;
    box-shadow: inset 0 0.125em 0.125em #0000000d,
        inset 0 -0.125em 0.125em #ffffff80, 0 0.25em 0.125em -0.125em #0003,
        inset 0 0 0.1em 0.25em #fff3, 0 0 #fff;
    box-sizing: border-box;
}

.glass-button:hover {
    -webkit-backdrop-filter: blur(0.01em);
    backdrop-filter: blur(0.01em);
    transform: scale(0.975);
    box-shadow: inset 0 0.125em 0.125em #0000000d,
        inset 0 -0.125em 0.125em #ffffff80, 0 0.15em 0.05em -0.1em #00000040,
        inset 0 0 0.05em 0.1em #ffffff80, 0 0 #fff;
}

.glass-button span {
    -webkit-user-select: none;
    user-select: none;
    color: #0D0D0D;
    text-shadow: 0 0.05em 0.05em #0000000d;
    letter-spacing: -0.18px;
    white-space: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    position: relative;
}

.glass-button:hover span {
    text-shadow: 0.025em 0.025em 0.025em #0000000f;
}

.glass-button span:after {
    content: "";
    z-index: 1;
    width: calc(100% - var(--border-width));
    height: calc(100% - var(--border-width));
    top: calc(0% + var(--border-width) / 2);
    left: calc(0% + var(--border-width) / 2);
    box-sizing: border-box;
    background: linear-gradient(var(--angle-2),
            #fff0 0,
            #ffffff80 40% 50%,
            #fff0 55%);
    z-index: 3;
    mix-blend-mode: screen;
    pointer-events: none;
    background-position: 0;
    background-repeat: no-repeat;
    background-size: 200% 200%;
    border-radius: 999vw;
    transition: background-position 0.5s cubic-bezier(0.25, 1, 0.5, 1),
        --angle-2 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    display: block;
    position: absolute;
    overflow: clip;
}

.glass-button:hover span:after {
    background-position: 25%;
}

.glass-button:active span:after {
    --angle-2: -15deg;
    background-position: 50% 15%;
}

.glass-button:after {
    content: "";
    z-index: 1;
    width: calc(100% + var(--border-width));
    height: calc(100% + var(--border-width));
    inset: 0;
    top: calc(0% - var(--border-width) / 2);
    left: calc(0% - var(--border-width) / 2);
    padding: var(--border-width);
    box-sizing: border-box;
    background: conic-gradient(from var(--angle-1) at 50% 50%,
            #00000080,
            #0000 5% 40%,
            #00000080 50%,
            #0000 60% 95%,
            #00000080),
        linear-gradient(180deg, #ffffff80, #ffffff80);
    box-shadow: inset 0 0 0 calc(var(--border-width) / 2) #ffffff80;
    border-radius: 999vw;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1), --angle-1 0.5s;
    position: absolute;
    -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    -webkit-mask-position: 0 0, 0 0;
    mask-position: 0 0, 0 0;
    -webkit-mask-size: auto, auto;
    mask-size: auto, auto;
    -webkit-mask-repeat: repeat, repeat;
    mask-repeat: repeat, repeat;
    -webkit-mask-clip: content-box, border-box;
    mask-clip: content-box, border-box;
    -webkit-mask-origin: content-box, border-box;
    mask-origin: content-box, border-box;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    -webkit-mask-source-type: auto, auto;
    mask-mode: match-source, match-source;
}

.glass-button:hover:after {
    --angle-1: -125deg;
}

.glass-button:active:after {
    --angle-1: -75deg;
}

.glass-wrap:has(.glass-button:hover) .glass-shadow {
    filter: blur(clamp(2px, 0.0625em, 6px));
    transition: filter 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.glass-wrap:has(.glass-button:hover) .glass-shadow:after {
    top: calc(var(--shadow-cuttoff-fix) - 0.875em);
    opacity: 1;
}

.glass-wrap:has(.glass-button:active) {
    transform: rotateX(25deg);
}

.glass-wrap:has(.glass-button:active) .glass-button {
    box-shadow: inset 0 0.125em 0.125em #0000000d,
        inset 0 -0.125em 0.125em #ffffff80, 0 0.125em 0.125em -0.125em #0003,
        inset 0 0 0.1em 0.25em #fff3, 0 0.225em 0.05em #0000000d,
        0 0.25em #ffffffbf, inset 0 0.25em 0.05em #00000026;
}

.glass-wrap:has(.glass-button:active) .glass-shadow {
    filter: blur(clamp(2px, 0.125em, 12px));
}

.glass-wrap:has(.glass-button:active) .glass-shadow:after {
    top: calc(var(--shadow-cuttoff-fix) - 0.5em);
    opacity: 0.75;
}

.glass-wrap:has(.glass-button:active) span {
    text-shadow: 0.025em 0.1em 0.05em #00000014;
}

/* ====================================
   BURGER MENU STYLES
   - Hidden on desktop
   - Visible on mobile
==================================== */
.burger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.burger-line {
    width: 100%;
    height: 3px;
    background-color: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Burger menu animation when active */
.burger-menu.active .burger-line:nth-child(1) {
    transform: translateY(10.5px) rotate(45deg);
    background-color: #000;
    /* Dark color for contrast on glass */
}

.burger-menu.active .burger-line:nth-child(2) {
    opacity: 0;
}

.burger-menu.active .burger-line:nth-child(3) {
    transform: translateY(-10.5px) rotate(-45deg);
    background-color: #000;
    /* Dark color for contrast on glass */
}

/* ====================================
   RESPONSIVE STYLES
==================================== */
@media (max-width: 768px) {
    .header {
        padding: 15px 20px;
    }

    .logo-image {
        height: 50px;
    }

    /* Show burger menu on mobile */
    .burger-menu {
        display: flex;
    }

    /* Mobile Navigation Menu - Dropdown Redesign */
    .nav-menu {
        position: absolute;
        top: 100%;
        margin-top: 15px;
        left: 20px;
        right: 20px;
        width: auto;
        height: auto;

        /* Glass / Card Styling */
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 16px;
        border: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);

        /* Layout */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 32px;
        gap: 20px;

        /* Animation properties */
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
        pointer-events: none;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 1002;
    }

    /* Show menu when active */
    .nav-menu.active {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .nav-link {
        font-size: 18px;
        padding: 15px 30px;
    }

    .hero-text {
        left: 0;
        top: 50%;
        bottom: auto;
        width: 100%;
        transform: translateY(-50%);
        /* Only center vertically */
        padding: 0 20px;
    }

    .hero-headline {
        font-size: 36px;
    }

    .hero-subheadline {
        font-size: 18px;
    }

    .section-container {
        padding: 60px 20px;
    }

    .section-title {
        font-size: 32px;
    }
}

/* ====================================
   CONTENT SECTIONS STYLES
==================================== */
.content-section {
    width: 100%;
    background-color: #fff;
}

.content-section--alt {
    background-color: #f8f8f8;
}

.section-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 100px 64px;
}

.section-title {
    font-family: 'Inter', sans-serif;
    font-size: 48px;
    font-weight: 800;
    color: #990000;
    margin-bottom: 40px;
    line-height: 1.1;
}

.section-text {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: #333;
    line-height: 1.6;
}

/* Target List Styles */
.target-list {
    list-style: none;
    margin-bottom: 32px;
}

.target-list li {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: #333;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.highlight-text {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #990000;
    margin-top: 24px;
}

/* Benefits List Styles */
.benefits-list {
    list-style: none;
    margin-bottom: 32px;
}

.benefits-list li {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #333;
    padding: 12px 0;
}

.duration-text {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #666;
    margin-top: 24px;
    padding: 16px 24px;
    background-color: #f0f0f0;
    border-radius: 8px;
    display: inline-block;
}

/* Not List Styles */
.not-list {
    list-style: none;
    margin-bottom: 32px;
}

.not-list li {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #666;
    padding: 12px 0;
}

.promise-text {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #000;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 2px solid #990000;
}

/* ====================================
   CONTACT FORM SECTION STYLES
   - Minimalist Design
   - Underlined Inputs
   ==================================== */
.contact-section-wrapper {
    background-color: #fff;
    padding: 100px 20px;
    display: flex;
    justify-content: center;
}

.contact-form-container {
    width: 100%;
    max-width: 600px;
}

.contact-headline {
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #000;
    margin-bottom: 48px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-group label {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.input-group input,
.input-group textarea {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #000;
    background: transparent;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    padding: 8px 0;
    outline: none;
    transition: border-color 0.3s ease;
    resize: none;
    /* For textarea */
}

.input-group input::placeholder,
.input-group textarea::placeholder {
    color: #a0a0a0;
}

.input-group input:focus,
.input-group textarea:focus {
    border-bottom-color: #000;
}

/* Rounded Send Button */
.contact-send-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 48px;
    background-color: #fff;
    color: #000;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    justify-content: center;
}

.contact-send-btn:hover {
    border-color: #000;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.contact-send-btn svg {
    margin-left: 4px;
}

/* Footer Info Grid */
.contact-footer-info {
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid #f0f0f0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #666;
}

.info-value {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    transition: color 0.2s ease;
}

.info-value:hover {
    color: #990000;
}

/* Footer Styles */
.footer {
    background-color: #000;
    padding: 60px 64px;
    text-align: center;
}

.footer-container {
    max-width: 1600px;
    margin: 0 auto;
}

.footer-brand {
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #990000;
    margin-bottom: 8px;
}

.footer-tagline {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 24px;
}

/* ====================================
   SCROLL STORYTELLING SECTION STYLES
==================================== */
.story-section {
    display: flex;
    position: relative;
    min-height: 100vh;
    background-color: #fff;
}

/* Left Side - Text Content */
.story-text-container {
    width: 50%;
    /* 50/50 split */
    padding: 25vh 80px 25vh 80px;
    /* Slight padding increase for 50% width */
    display: flex;
    flex-direction: column;
    gap: 0;
}

.story-text {
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 0;
    opacity: 0.3;
    transition: opacity 0.6s ease;
}

.story-text.active {
    opacity: 1;
}

.story-title {
    font-family: 'Inter', sans-serif;
    font-size: 42px;
    font-weight: 800;
    color: #990000;
    margin-bottom: 24px;
    line-height: 1.1;
}

/* Story Sentence Styling - Bold with color animation */
.story-sentence {
    font-family: 'Inter', sans-serif;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
}

.story-bold {
    font-weight: 700;
    color: #1a1a2e;
    display: inline;
}

.story-fade {
    font-weight: 700;
    color: #b0b0b0;
    display: inline;
}

/* When active, show fade text slightly darker */
.story-text.active .story-fade {
    color: #888;
}

.story-paragraph {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #333;
    line-height: 1.6;
}

.story-list,
.story-benefits,
.story-not-list {
    list-style: none;
    margin-bottom: 24px;
}

.story-list li,
.story-benefits li,
.story-not-list li {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #333;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.story-highlight {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #990000;
    margin-top: 16px;
}

.story-meta {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #666;
    margin-top: 16px;
    padding: 12px 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
    display: inline-block;
}

.story-promise {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #000;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 2px solid #990000;
}

/* Right Side - Sticky Image Container */
.story-image-container {
    width: 50%;
    /* 50/50 split */
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 25px;
    /* Restored padding */
    box-sizing: border-box;
    overflow: hidden;
}

.story-image-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #1a1a2e;
    clip-path: url(#notched-clip);
    -webkit-clip-path: url(#notched-clip);
}

/* Hide SVG */
.clip-svg {
    position: absolute;
    width: 0;
    height: 0;
}

/* Image styles */
.story-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.6s ease;
    background-color: transparent;
    /* Changed from colored blocks */
}

.story-img-content {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.story-image.active {
    opacity: 1;
}

/* Specific background colors removed as we use images now, 
   but keeping selectors if needed for overlays later */
.story-image[data-story="1"],
.story-image[data-story="2"],
.story-image[data-story="3"],
.story-image[data-story="4"],
.story-image[data-story="5"] {
    background: transparent;
}

.image-placeholder {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 4px;
}

/* Responsive - Stack on mobile */
@media (max-width: 900px) {
    .story-section {
        flex-direction: column;
    }

    .story-text-container {
        width: 100%;
        padding: 60px 20px;
    }

    .story-text {
        min-height: auto;
        padding: 40px 0;
        opacity: 1;
    }

    .story-image-container {
        width: 100%;
        position: relative;
        height: 50vh;
    }

    .story-image-wrapper {
        clip-path: polygon(0% 15%,
                100% 0%,
                100% 100%,
                0% 100%);
    }

    .story-title {
        font-size: 32px;
    }
}

/* ====================================
   PROCESS SECTION (REVERTED TO ARROW DESIGN)
==================================== */
.process-section {
    background-color: #fff;
    padding: 120px 64px 0 64px;
    position: relative;
    overflow: hidden;
}

.process-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.process-intro h2 {
    font-family: 'Inter', sans-serif;
    font-size: 56px;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 24px;
    line-height: 1.1;
}

.process-intro p {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #990000;
    line-height: 1.6;
}

.process-container {
    max-width: 1000px;
    margin: 80px auto 0 auto;
    position: relative;
    padding: 100px 0;
}

/* Central Track & Arrowhead */
.process-svg {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: calc(100% - 750px);
    z-index: 1;
}

.process-arrowhead-wrapper {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: calc(100% - 750px);
    z-index: 3;
    pointer-events: none;
}

.process-arrowhead {
    width: 20px;
    height: 20px;
    background-color: #990000;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;
    /* Animated via JS */
    box-shadow: 0 0 10px rgba(153, 0, 0, 0.3);
    /* Transition removed for instant scroll response */
    transform-origin: center;
}

.process-arrowhead svg {
    width: 12px;
    height: 12px;
}

/* Steps Layout */
.process-steps {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 15vh;
}

.process-step {
    width: 100%;
    display: flex;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.process-step.active {
    opacity: 1;
    transform: translateY(0);
}

.process-step[data-step="1"],
.process-step[data-step="3"] {
    justify-content: flex-start;
}

.process-step[data-step="2"] {
    justify-content: flex-end;
}

.step-content {
    max-width: 420px;
}

.process-step[data-step="2"] .step-content {
    text-align: right;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.process-step[data-step="2"] .step-header {
    flex-direction: row-reverse;
}

.step-number {
    font-family: 'Inter', sans-serif;
    font-size: 48px;
    font-weight: 800;
    color: #eee;
    line-height: 1;
}

.step-icon {
    width: 48px;
    height: 48px;
    color: #990000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-time {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #990000;
    letter-spacing: 2px;
}

.step-content h3 {
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 16px;
}

.step-content p {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    color: #444;
    line-height: 1.6;
}

/* Mobile Responsive Overrides */
@media (max-width: 800px) {
    .process-container {
        padding: 50px 20px;
    }

    .process-svg,
    .process-arrowhead-wrapper {
        left: 30px;
        transform: none;
    }

    .process-step,
    .process-step[data-step="2"] {
        justify-content: flex-start;
    }

    .step-content,
    .process-step[data-step="2"] .step-content {
        text-align: left;
        padding-left: 50px;
    }

    .step-header,
    .process-step[data-step="2"] .step-header {
        flex-direction: row;
    }
}

/* ====================================
   CURSOR HINT STYLES
   - "Scroll to explore" following mouse
==================================== */
.cursor-hint {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    opacity: 0;
    /* Hidden initially, shown by JS on move */
    transition: opacity 0.3s ease;
    white-space: nowrap;
    /* Centered on cursor via JS or slightly offset */
}

.cursor-hint.visible {
    opacity: 1;
}

.cursor-hint.hidden {
    opacity: 0 !important;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* ====================================
   PROCESS CONTACT CARD
   - Premium profile card at process end
   - Inspired by floating card aesthetic
   - Reveals when arrow reaches 100%
==================================== */
.process-contact-wrapper {
    width: 100%;
    max-width: 380px;
    margin: 0 auto 0 auto;
    perspective: 1000px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
        transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.process-contact-wrapper.active {
    opacity: 1;
    transform: translateY(0);
}

.contact-card {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4.2;
    background: #f8f9fa;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.1);
}

.card-image-wrapper {
    width: 100%;
    height: 100%;
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.card-info-overlay {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 16px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.info-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.id-badge h3 {
    font-size: 19px;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 2px;
    letter-spacing: -0.01em;
}

.id-badge p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.action-btn {
    width: 44px;
    height: 44px;
    background: #1a1a2e;
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.action-btn svg {
    width: 20px;
    height: 20px;
}

.info-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.contact-item:hover {
    opacity: 0.7;
}

.contact-item .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999;
    margin-bottom: 2px;
}

.contact-item .value {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a2e;
}

.contact-item.linkedin-icon {
    position: absolute;
    top: 16px;
    right: 20px;
    color: #0077b5;
    margin: 0;
    width: 24px;
    height: 24px;
}

.contact-item.linkedin-icon svg {
    width: 24px;
    height: 24px;
}

/* Mobile Tweak */
@media (max-width: 768px) {
    .process-contact-wrapper {
        padding: 0 20px;
        margin-top: 50px;
    }

    .contact-card {
        border-radius: 24px;
    }
}

/* ====================================
   CONSULTANT LOCATION SECTION
==================================== */
.consultant-section {
    background-color: #f9f9f9;
    padding: 20px 64px 100px;
    text-align: center;
}

.consultant-section .section-title {
    margin-bottom: 60px;
    color: #1a1a2e;
    /* Dark navy for contrast */
}

.consultant-map-container {
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
}

.consultant-map-image {
    width: 100%;
    height: auto;
    cursor: url('Pictures/cursor-target.svg') 12 12, crosshair;
    max-height: 60vh;
    /* Prevent it from being too tall on large screens */
    object-fit: contain;
    display: block;
}

/* Keep target cursor on location dots */
#consultant-map-svg .cls-2 {
    cursor: url('Pictures/cursor-target.svg') 12 12, crosshair;
}

@media (max-width: 768px) {
    .consultant-section {
        padding: 60px 20px;
    }
}

/* ====================================
   MAP POPUP STYLES (Compact Card)
==================================== */
.map-popup-card {
    position: absolute;
    z-index: 1000;
    max-width: 90vw;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -100%) translateY(-15px) scale(0.95);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.map-popup-card.active {
    opacity: 1;
    transform: translate(-50%, -100%) translateY(-15px) scale(1);
    pointer-events: auto;
    cursor: pointer;
}

.popup-cards-wrapper {
    display: flex;
    gap: 12px;
    padding: 4px;
}

.popup-card-mini {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.popup-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #f8f8f8;
    border-bottom: 1px solid #eee;
}

.popup-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    flex-shrink: 0;
}

.popup-name-block {
    flex: 1;
    min-width: 0;
}

.popup-name-block h4 {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.popup-name-block span {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #666;
}

.popup-linkedin {
    color: #0077b5;
    flex-shrink: 0;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s;
}

.popup-linkedin:hover {
    background: rgba(0, 119, 181, 0.1);
}

.popup-details {
    padding: 10px 12px;
}

.popup-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 6px 0 6px 4px;
}

.popup-row:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
}

.popup-link {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    transition: color 0.2s;
}

.popup-link:hover {
    color: #990000;
}

.copy-btn {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #999;
    margin-left: auto;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.copy-btn:hover {
    background: #f0f0f0;
    color: #333;
}

.copy-btn.copied {
    color: #22c55e;
}

/* ====================================
   FOOTER LINKS STYLES
==================================== */
.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

.footer-link {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-divider {
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
}

/* ====================================
   LEGAL PAGE STYLES (Datenschutz & Impressum)
==================================== */
.legal-page {
    padding-top: 120px;
    /* Space for fixed header */
    padding-bottom: 80px;
    background-color: #fff;
    min-height: 80vh;
}

.legal-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
}

.legal-title {
    font-family: 'Inter', sans-serif;
    font-size: 42px;
    font-weight: 800;
    color: #990000;
    margin-bottom: 48px;
}

.legal-section {
    margin-bottom: 40px;
}

.legal-section h2 {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #000;
    margin-bottom: 16px;
    margin-top: 32px;
}

.legal-section h3 {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    margin-top: 24px;
}

.legal-section h2:first-child {
    margin-top: 0;
}

.legal-section p,
.legal-section ul li {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 12px;
}

.legal-section ul {
    padding-left: 20px;
    margin-bottom: 16px;
}

.legal-address {
    background-color: #f8f8f8;
    padding: 24px;
    border-radius: 8px;
    margin-top: 16px;
}

.legal-address p {
    margin-bottom: 4px;
}

.legal-update {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #666;
    margin-top: 60px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* ====================================
   COOKIE CONSENT BANNER STYLES
==================================== */
.cookie-banner {
    position: fixed;
    bottom: 24px;
    left: 24px;
    right: 24px;
    max-width: 500px;
    /* Constrain width on large screens */
    margin: 0 auto;
    /* Center on mobile if strictly needed, but left aligned usually better */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    font-family: 'Inter', sans-serif;
    transform: translateY(150%);
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cookie-banner.visible {
    transform: translateY(0);
}

.cookie-title {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin-bottom: 4px;
}

.cookie-text {
    font-size: 14px;
    color: #444;
    line-height: 1.5;
}

.cookie-buttons {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.cookie-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    flex: 1;
}

.cookie-btn-accept {
    background-color: #990000;
    color: white;
}

.cookie-btn-accept:hover {
    background-color: #000;
    transform: translateY(-1px);
}

.cookie-btn-deny {
    background-color: #f0f0f0;
    color: #333;
}

.cookie-btn-deny:hover {
    background-color: #dedede;
}

@media (max-width: 768px) {
    .cookie-banner {
        left: 16px;
        right: 16px;
        bottom: 16px;
        max-width: none;
    }

    .cookie-buttons {
        flex-direction: column;
    }

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

/* ====================================
   ACCESSIBILITY STYLES (BITV 2.0)
==================================== */

/* Screen Reader Only Class */
.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;
}

/* Skip to Content Link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px;
    z-index: 10001;
    transition: top 0.3s;
    text-decoration: none;
    font-weight: bold;
}

.skip-link:focus {
    top: 0;
}

/* Enhanced Focus Styles for Keyboard Users */
:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* Map Dot Focus */
.consultant-map-image g:focus {
    outline: none;
}

.consultant-map-image g:focus circle {
    stroke: #000;
    stroke-width: 2px;
    r: 6px;
    /* Grow slightly to indicate focus */
}

/* Map Hint Text */
.map-hint-text {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #666;
    text-align: center;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.map-hint-text img {
    opacity: 0.6;
}

/* ====================================
   LERNEN / AUSBILDUNG PAGE STYLES
   - Card grids
   - Qualification levels
   - Tags
==================================== */

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 32px;
    margin-top: 40px;
}

.info-card {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.info-card.highlight-card {
    background: #fffafa;
    /* Very light red tint */
    border-left: 4px solid #990000;
}

.card-title {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 24px;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tag {
    background: #f0f0f0;
    color: #333;
    padding: 8px 16px;
    border-radius: 99px;
    font-weight: 600;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
}

.levels-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 40px;
}

.level-row-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.level-row-card:hover {
    border-color: #990000;
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.level-row-card.active {
    border-color: #990000;
    background: #fffafa;
    /* Very light red tint */
}

/* ====================================
   SPECIAL SECTION STYLES
   - Problem vs Solution Split
==================================== */
.special-split-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 10px;
    margin-bottom: 10px;
    align-items: start;
}

.problem-column {
    background: #f8f8f8;
    border-radius: 16px;
    padding: 32px;
    border: 1px dashed #ccc;
}

.problem-column .column-title {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #666;
    margin-bottom: 24px;
}

.solution-column {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #990000;
    position: relative;
}

.solution-column::before {
    content: "teamfixx®";
    position: absolute;
    top: -12px;
    right: 40px;
    background: #990000;
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.solution-column .column-title {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #990000;
    margin-bottom: 24px;
}

.comparison-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comparison-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
}

.problem-list li {
    color: #888;
    font-size: 16px;
}

.solution-list li {
    color: #1a1a2e;
    font-size: 18px;
    font-weight: 500;
}

.icon-cross {
    color: #ccc;
    font-weight: bold;
    font-size: 20px;
    margin-right: 12px;
    line-height: 1;
}

.icon-pictogram {
    color: #990000;
    width: 24px;
    height: 24px;
    margin-right: 16px;
    flex-shrink: 0;
}

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

.highlight-banner {
    text-align: center;
    padding: 32px;
    background: #1a1a2e;
    border-radius: 16px;
    margin-top: 40px;
}

.banner-text {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    color: #fff;
    font-weight: 400;
    margin: 0;
}

.banner-text .highlight {
    color: #fff;
    font-weight: 700;
    border-bottom: 2px solid #990000;
}

@media (max-width: 900px) {
    .special-split-layout {
        grid-template-columns: 1fr;
    }
}

.level-header {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    min-height: 100px;
}

.level-seal-wrapper {
    flex-shrink: 0;
    width: 150px;
    margin-right: 24px;
}

.level-seal-small {
    width: 100%;
    height: auto;
    display: block;
}

.level-main-info {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.level-number-small {
    font-size: 32px;
    font-weight: 800;
    color: #e0e0e0;
    font-family: 'Inter', sans-serif;
    margin-right: 16px;
    line-height: 1;
    transition: color 0.3s ease;
}

.level-row-card:hover .level-number-small,
.level-row-card.active .level-number-small {
    color: #990000;
}

.level-titles h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 4px 0;
    font-family: 'Inter', sans-serif;
    text-align: left;
}

.level-titles p {
    font-size: 14px;
    color: #666;
    margin: 0;
    font-family: 'Inter', sans-serif;
    text-align: left;
}

.level-toggle-icon {
    flex-shrink: 0;
    color: #999;
    transition: transform 0.3s ease, color 0.3s ease;
}

.level-row-card.active .level-toggle-icon {
    transform: rotate(180deg);
    color: #990000;
}

/* Expandable Details */
.level-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background: #fcfcfc;
    border-top: 1px solid transparent;
}

.level-row-card.active .level-details {
    max-height: 500px;
    /* Arbitrary large height */
    border-top-color: #eee;
}

.level-details-content {
    padding: 24px 24px 24px 128px;
    /* Indent to align with text */
}

.level-details-content h4 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
}

.level-details-content p {
    font-size: 15px;
    color: #555;
    line-height: 1.5;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

@media (max-width: 768px) {
    .level-header {
        flex-direction: column;
        align-items: flex-start;
        position: relative;
    }

    .level-seal-wrapper {
        width: 60px;
        margin-bottom: 12px;
    }

    .level-main-info {
        width: 100%;
    }

    .level-toggle-icon {
        position: absolute;
        top: 24px;
        right: 24px;
    }

    .level-details-content {
        padding: 24px;
    }
}

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

    .hero-headline {
        font-size: 36px;
        /* Adjust for mobile */
    }
}



/* ====================================
   LEARNING SECTION STYLES
   - Bento Grid Layout
==================================== */
.learning-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(200px, auto);
    /* Allow rows to grow */
    gap: 24px;
    margin-top: 40px;
}

.learn-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    border: 1px solid #e0e0e0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.learn-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

/* Large Visual Card */
.learn-card-large {
    grid-column: span 2;
    grid-row: span 2;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}

.learn-card-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    width: 100%;
    padding: 32px;
    color: #fff;
}

.learn-card-overlay h3 {
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
}

.learn-card-overlay p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    opacity: 0.9;
    max-width: 90%;
    line-height: 1.5;
}

/* Text Cards */
.learn-card-text {
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.learn-card-text .icon-box {
    width: 48px;
    height: 48px;
    background: #f5f5f5;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: #333;
}

.learn-card-text h3 {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 8px;
}

.learn-card-text p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

/* Wide Horizontal Card */
.learn-card-wide {
    /* Removed fixed grid positioning to allow flow */
    padding: 24px;
    background: #1a1a2e;
    /* Dark contrast */
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.learn-card-wide h3 {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
}

.learn-card-wide .tag {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 900px) {
    .learning-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .learn-card-large {
        grid-column: span 1;
        grid-row: span 1;
        height: 300px;
    }

    .learn-card-wide {
        grid-column: span 1;
        /* grid-row handled by auto flow */
    }
}

/* ====================================
   TARGET AUDIENCE SECTION
   - Persona Cards
==================================== */
.target-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
    margin-top: 40px;
}

.target-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.target-card:hover {
    transform: translateY(-5px);
}

.target-image-wrapper {
    width: 100%;
    height: 240px;
    overflow: hidden;
}

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

.target-card:hover .target-image {
    transform: scale(1.05);
    /* Subtle zoom on hover */
}

.target-content {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.target-title {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 12px;
}

.target-desc {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #555;
    line-height: 1.5;
    margin: 0;
}

.target-sublist {
    list-style: none;
    /* Removed bullet points */
    padding: 0;
    margin: 0;
}

.target-sublist li {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #555;
    padding: 4px 0;
    padding-left: 20px;
    position: relative;
}

.target-sublist li::before {
    content: "•";
    color: #990000;
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* ====================================
   TRAINING STRUCTURE SECTION STYLES
==================================== */
.training-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 40px;
}

/* Stack columns for A then B flow */
@media (min-width: 768px) {
    .training-grid {
        grid-template-columns: 1fr;
        /* Force single column to show A then B */
        gap: 60px;
    }
}

/* Part B specific coloring */
.training-col:nth-child(2) .webinar-code {
    color: #1D3557;
    background-color: #fff;
    border-color: rgba(29, 53, 87, 0.1);
}

.training-col:nth-child(2) .training-col-header {
    border-bottom-color: #1D3557;
}

.training-col-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #990000;
}

.training-col-title {
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #000;
    margin-bottom: 8px;
}

.training-col-desc {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 24px;
}

.training-list {
    list-style: none;
    margin-bottom: 40px;
}

.training-list li {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #333;
    padding: 8px 0;
    position: relative;
    padding-left: 24px;
    line-height: 1.4;
}

.training-list li::before {
    content: "•";
    color: #990000;
    font-weight: bold;
    position: absolute;
    left: 0;
    font-size: 24px;
    line-height: 24px;
    top: 4px;
}

.webinar-list-title {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #000;
    margin-bottom: 24px;
}

/* WEBINAR LIST GRID - 2 columns on Desktop */
.webinar-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .webinar-list {
        grid-template-columns: 1fr 1fr;
        /* A1 A2 side by side */
    }
}

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

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

.webinar-item {
    background-color: #fff;
    border: 1px solid #e5e5e5;
    /* Contrast increased for visibility */
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* For header bg */
}

.calendar-jump-btn {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #990000;
    text-decoration: none;
    cursor: pointer;
    padding: 8px 16px;
    border: 1px solid rgba(153, 0, 0, 0.2);
    border-radius: 6px;
    transition: all 0.2s ease;
    background: transparent;
    margin-top: 16px;
}

.calendar-jump-btn:hover {
    background-color: #990000;
    color: #fff;
    border-color: #990000;
}

.btn-primary-download {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    background-color: #990000;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 8px;
    transition: all 0.2s ease;
    border: none;
    box-shadow: 0 4px 12px rgba(153, 0, 0, 0.2);
    margin-top: 16px;
}

.btn-primary-download:hover {
    background-color: #7a0000;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(153, 0, 0, 0.3);
}

.webinar-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.1);
}

.webinar-header {
    background: #fcfcfc;
    border-bottom: 1px solid #f0f0f0;
    padding: 12px 16px;
    /* Reduced padding */
    display: flex;
    align-items: center;
    gap: 10px;
}

.webinar-code {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #990000;
    background-color: #fff;
    border: 1px solid rgba(153, 0, 0, 0.1);
    padding: 3px 6px;
    /* Slightly tighter */
    border-radius: 6px;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.webinar-code-a {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #000088;
    background-color: #fff;
    border: 1px solid rgba(153, 0, 0, 0.1);
    padding: 3px 6px;
    /* Slightly tighter */
    border-radius: 6px;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.webinar-code-b {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #990000;
    background-color: #fff;
    border: 1px solid rgba(153, 0, 0, 0.1);
    padding: 3px 6px;
    /* Slightly tighter */
    border-radius: 6px;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.webinar-title {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    /* Reduced from 17px */
    font-weight: 700;
    color: #222;
    line-height: 1.3;
}

.webinar-desc {
    padding: 16px;
    /* Reduced from 20px */
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    /* Slightly smaller text */
    font-weight: 400;
    color: #555;
    line-height: 1.5;
    margin: 0;
    flex-grow: 1;
}

.price-info {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-top: 32px;
    padding: 16px;
    background-color: #f7f7f7;
    border-radius: 8px;
    text-align: center;
    border: 1px dashed #ccc;
    line-height: 1.5;
}

.pdf-btn {
    display: inline-block;
    margin: 0 16px 16px 16px;
    /* Reduced margin */
    /* Aligned with padding */
    padding: 6px 12px;
    /* Smaller button */
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    text-decoration: none;
    transition: all 0.2s;
    background: #f9f9f9;
    align-self: flex-start;
}

.pdf-btn:hover {
    background: #eee;
    color: #000;
    border-color: #bbb;
}

/* Part C Styles */
.part-c-container {
    margin-top: 60px;
    background-color: #990000;
    color: #fff;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(153, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.part-c-container::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    background: linear-gradient(-45deg, rgba(255, 255, 255, 0.1), transparent);
    pointer-events: none;
}

.part-c-title {
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 16px;
}

.part-c-text {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    max-width: 800px;
    margin-bottom: 24px;
}

.part-c-details {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.part-c-detail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

/* Certification Section */
.certification-section {
    margin-top: 80px;
    padding-top: 40px;
    border-top: 2px solid #f0f0f0;
}

.certification-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

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

.cert-block-title {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #000;
    margin-bottom: 24px;
}

.cert-list {
    list-style: none;
}

.cert-list li {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 16px;
    padding-left: 28px;
    position: relative;
}

.cert-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #990000;
    font-weight: 800;
    font-size: 16px;
}

.cert-info-box {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 24px;
}

.cert-note {
    font-size: 14px;
    color: #666;
    font-style: italic;
    margin-top: 16px;
    line-height: 1.5;
}

/* ====================================
   VISUAL CALENDAR MODULE (PREMIUM)
==================================== */
.visual-calendar-section {
    max-width: 1600px;
    margin: 80px auto;
    font-family: 'Inter', sans-serif;
    padding: 0 64px;
    position: relative;
}

.calendar-section-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 48px;
    /* Larger title */
    color: #990000;
    margin: 0;
    letter-spacing: -0.5px;
}

.cal-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    /* More spacing */
    flex-wrap: wrap;
    gap: 20px;
}

.module-select {
    padding: 10px 20px;
    border-radius: 99px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    outline: none;
    transition: all 0.2s;
    appearance: none;
    /* Custom arrow if desired, or keep native for simplicity */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 10px;
    padding-right: 40px;
}

.module-select:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.2);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.event-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 6px;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.day-cell.has-event:hover .event-dot {
    transform: scale(1.5);
}

.dot.part-a {
    background-color: #E63946;
    box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.2);
}

.dot.part-b {
    background-color: #990000;
    box-shadow: 0 0 0 2px rgba(153, 0, 0, 0.2);
}

.months-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
}

.cal-nav-btn {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    color: #444;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-top: 140px;
    /* Center partially relative to cards */
}

.cal-nav-btn:hover {
    color: #990000;
    transform: scale(1.1);
    box-shadow: 0 8px 24px rgba(153, 0, 0, 0.15);
    border-color: rgba(153, 0, 0, 0.1);
}

.dual-month-container {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: center;
    perspective: 1000px;
}

.month-card {
    background: #fff;
    /* Removed border */
    border-radius: 24px;
    /* More rounded */
    padding: 32px 24px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08);
    /* Premium soft shadow */
    width: 480px;
    /* Increased to 480px */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

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

.event-label {
    font-size: 11px;
    font-weight: 800;
    margin-top: 2px;
    line-height: 1;
}

.event-label.part-a {
    color: #000088;
}

.event-label.part-b {
    color: #990000;
}

.month-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.12);
}

.month-header {
    text-align: center;
    font-weight: 700;
    margin-bottom: 24px;
    color: #222;
    font-size: 18px;
    letter-spacing: 0.5px;
}

.weekdays-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    /* More space between days */
}

.day-cell {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Centered content */
    padding-top: 0;
    /* No padding needed */
    font-size: 14px;
    font-weight: 500;
    color: #333;
    border-radius: 12px;
    /* Softer square/circle hybrid */
    cursor: default;
    position: relative;
    transition: all 0.2s ease;
}

.day-cell.empty {
    pointer-events: none;
}

.day-cell.has-event {
    cursor: pointer;
    background-color: transparent;
    /* Clean bg, indicator handles it */
    color: #000;
    font-weight: 600;
}

.day-cell.has-event:hover {
    background-color: #f8f8f8;
    transform: scale(1.1);
}

.day-cell.text-part-a {
    color: #000088;
    font-weight: 800;
    font-size: 16px;
}

.day-cell.text-part-b {
    color: #990000;
    font-weight: 800;
    font-size: 16px;
}

.day-cell.text-part-mixed {
    color: #444;
    font-weight: 800;
}

/* Fallback for mixed */


.day-number {
    z-index: 1;
}

.event-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-top: 2px;
    /* Reduced from 4px/6px */
}

/* Event Details Panel (Modal-like) */
/* Event Details Tooltip (Dynamic Position) */
/* Event Details Tooltip (Dynamic Position) */
.event-details-panel {
    position: fixed;
    /* Fixed relative to viewport */
    top: 0;
    left: 0;
    /* Default, set by JS */
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
    z-index: 20000;
    /* Extremely high z-index */
    width: 320px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    text-align: left;
}

.hidden {
    display: none !important;
}

.event-details-panel.visible {
    opacity: 1;
    pointer-events: all;
    /* Transform handled by JS for centering, e.g. translate(-50%, -100%) */
}

/* Hide Close Button for Tooltip Mode */
.close-details {
    display: none;
}



.close-details:hover {
    background: #e0e0e0;
    color: #333;
}

.event-details-panel h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 8px;
    color: #111;
}

.evt-meta {
    font-size: 15px;
    color: #666;
    margin-bottom: 24px;
    font-weight: 500;
    display: flex;
    gap: 12px;
    align-items: center;
}

.evt-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 30px;
}

.btn-book {
    background: linear-gradient(135deg, #990000 0%, #770000 100%);
    color: #fff;
    padding: 14px 24px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(153, 0, 0, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    letter-spacing: 0.5px;
}

.btn-book:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(153, 0, 0, 0.4);
}

.btn-pdf {
    background-color: transparent;
    color: #555;
    padding: 12px 24px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: all 0.2s;
}

.btn-pdf:hover {
    background-color: #f9f9f9;
    border-color: rgba(0, 0, 0, 0.2);
    color: #222;
}

@media (max-width: 768px) {
    .dual-month-container {
        flex-direction: column;
        align-items: center;
    }

    .month-card {
        width: 100%;
        max-width: 340px;
    }

    .cal-nav-btn {
        margin-top: 20px;
    }
}

/* ====================================
   PART C SECTION (Red Banner)
==================================== */
.part-c-container {
    width: 100%;
    background-color: #990000;
    color: #fff;
    border-radius: 16px;
    padding: 32px;
}

.part-c-title {
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 16px;
    line-height: 1.2;
}

.part-c-text {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    max-width: 800px;
    margin-bottom: 40px;
    line-height: 1.5;
}

.part-c-details {
    display: flex;
    align-items: center;
    gap: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    flex-wrap: wrap;
    /* Allow wrapping on small screens */
}

.part-c-detail-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

.part-c-detail-item svg {
    color: #fff;
    opacity: 0.9;
}

@media (max-width: 768px) {
    .part-c-details {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .part-c-detail-item[style*="margin-left: auto"] {
        margin-left: 0 !important;
        margin-top: 16px;
    }
}

/* ====================================
   VIDEO SECTION STYLES
   - Replaces "Das Besondere" content
==================================== */
.video-section-wrapper {
    width: 100%;
    max-width: 1000px;
    /* Limit width */
    margin: 40px auto;
    /* Centering */
    padding: 0 20px;
    /* Safe padding */
}

.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;

    /* Aesthetic */
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    background: #000;
    /* Fallback */
}

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

/* ====================================
   STANDARDS / QUALIFICATION GRID
   - Side-by-side layout for teamfixx-Standards
==================================== */
/* ====================================
   STANDARDS / QUALIFICATION GRID
   - Side-by-side layout for teamfixx-Standards
==================================== */
.levels-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 40px;
}

.level-row-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease;
}

.level-row-card:hover {
    transform: translateY(-4px);
}

/* Header Container: Stacks Seal -> Info -> Icon */
.level-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 2px;
}

.level-seal-wrapper {
    margin-bottom: 12px;
}

.level-seal-small {
    width: 140px;
    /* Increased from 80px */
    height: 140px;
    object-fit: contain;
}

.level-main-info {
    width: 100%;
    margin-bottom: 8px;
}

.level-titles h3 {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    margin: 0;
    line-height: 1.2;
    font-family: 'Inter', sans-serif;
}

.level-titles p {
    font-size: 13px;
    color: #666;
    margin: 4px 0 0 0;
}

.level-toggle-icon {
    display: block;
    color: #990000;
    opacity: 0.8;
}

.level-details-content p {
    font-size: 14px;
    line-height: 1.4;
    color: #444;
    margin: 0;
}

/* Response for Tablet/Mobile */
@media (max-width: 1024px) {
    .levels-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .levels-list {
        grid-template-columns: 1fr;
    }
}

/* ====================================
   MOBILE CONSULTANT LIST STYLES
==================================== */
.consultant-mobile-list {
    display: none;
    /* Hidden on desktop */
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
}

.mobile-consultant-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mobile-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}

.mobile-card-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    border: 2px solid #f8f8f8;
}

.mobile-card-info {
    flex: 1;
}

.mobile-card-info h3 {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 4px;
}

.mobile-card-location {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.mobile-card-social.linkedin {
    color: #0077b5;
    padding: 8px;
    background: #f0f7fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid #f5f5f5;
}

.mobile-card-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.mobile-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}

.mobile-action-btn.email {
    background: #f0f0f0;
    color: #333;
}

.mobile-action-btn.phone {
    background: #f0fdf4;
    color: #166534;
}

.mobile-copy-btn {
    width: 42px;
    height: 42px;
    /* Match height of action btn approx */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    color: #666;
    cursor: pointer;
}

.mobile-copy-btn.copied {
    color: #22c55e;
    border-color: #22c55e;
    background: #f0fdf4;
}

.mobile-card-footer {
    border-top: 1px solid #f5f5f5;
    padding-top: 12px;
}

.mobile-card-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

@media (max-width: 900px) {

    .consultant-map-container,
    .map-hint-text {
        display: none !important;
    }

    .consultant-mobile-list {
        display: flex;
    }

    /* Adjust text sizes for responsiveness */
    .hero-headline {
        font-size: 32px;
    }

    .hero-headline-alt {
        font-size: 32px;
    }

    .story-sentence {
        font-size: 28px;
    }

    .section-title {
        font-size: 32px;
    }

    .process-intro h2 {
        font-size: 36px;
    }
}

/* ====================================
   HERO MOBILE REFINEMENTS
   - Adjusts marker size and positioning
   - Ensures text remains readable
==================================== */
@media (max-width: 900px) {

    .hero-headline,
    .hero-headline-alt {
        font-size: 32px;
        /* Ensure consistent smaller size */
        margin-bottom: 20px;
        padding: 5px 10px;
        /* Reducing padding helps contain the marker */
    }

    /* Tighter marker for main headline */
    .hero-headline::before {
        width: calc(100% + 40px);
        left: -20px;
        height: 140%;
        /* Reduced from 200% */
        top: 50%;
        transform: translateY(-50%) rotate(2deg);
        /* Slightly less rotation */
    }

    /* Tighter marker for alt headline */
    .hero-headline-alt::before {
        width: calc(100% + 50px);
        left: -25px;
        height: 140%;
        top: 50%;
        transform: translateY(-50%) rotate(-2deg);
    }

    /* Adjust container to give space */
    .hero-text {
        width: 100%;
        padding: 0 20px;
    }
}

/* ====================================
   LERNEN MOBILE RESPONSIVENESS
==================================== */
@media (max-width: 900px) {

    /* --- General Grid Reset --- */
    .learning-grid,
    .target-grid {
        grid-template-columns: 1fr;
        /* Force single column */
    }

    /* --- Target Audience Cards --- */
    .target-card {
        max-width: 100%;
    }

    .target-image-wrapper {
        height: 200px;
        /* Slightly shorten images on mobile */
    }

    /* --- Training Columns (Side by Side -> Stacked) --- */
    .training-grid {
        flex-direction: column;
        display: flex;
        /* Ensure flex if not already */
        gap: 32px;
    }

    .training-col {
        width: 100%;
        max-width: 100%;
        padding-right: 0;
        /* Remove divider padding logic if any */
        border-right: none;
    }

    /* --- Visual Calendar Section --- */
    .visual-calendar-section {
        padding: 0 20px;
        margin: 40px auto;
    }

    .calendar-section-title {
        font-size: 32px;
        text-align: center;
        margin-bottom: 24px;
    }

    .cal-header-row {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    /* Calendar Controls & Month Cards */
    .months-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .month-card {
        width: 100%;
        max-width: 100%;
        /* Override fixed 480px */
        padding: 24px 16px;
    }

    .day-cell {
        height: 80px;
        /* Reduce visual height slightly */
        font-size: 14px;
    }

    .event-label {
        font-size: 10px;
        white-space: normal;
        /* Allow text wrapping if needed */
    }

    /* Nav Buttons - adjust if absolute or pushed */
    .cal-nav-btn {
        margin-top: 0;
        /* Reset specific margin */
        order: -1;
        /* Put nav buttons visible or manage via JS/Layout */
        /* Currently they are "prev" and "next" inside wrapper, might need reordering */
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
    }

    .cal-nav-btn.prev {
        left: -10px;
    }

    .cal-nav-btn.next {
        right: -10px;
    }

    /* Ensure container has reference for absolute buttons */
    .months-wrapper {
        position: relative;
    }

    /* Hide nav buttons if they overlap content too much, or style better
       For simplicity on mobile swipe, maybe hide or adjust. 
       Let's style them to float over edges for now. 
    */
    .cal-nav-btn {
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
}

/* ====================================
   FULL WIDTH VIDEO SECTION
==================================== */
.video-section-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-bottom: 60px;
    /* Spacing after video */
}

.video-container {
    width: 100%;
    max-width: 100% !important;
    border-radius: 0 !important;
    /* Remove corners for full width */
    box-shadow: none !important;
    /* Cleaner look */
}

/* Ensure iframe fits */
.video-container iframe {
    width: 100%;
    height: 100%;
}

/* Keep responsive on mobile (default behavior of 100vw is fine, but maybe add padding if needed? 
   Actually user said "for the desktop version", but full width video is standard on mobile too.
   Let's keep it 100vw globally as it looks good. */

/* ====================================
   MOBILE FONT ADJUSTMENTS (LERNEN)
==================================== */
@media (max-width: 480px) {

    /* Reduce headline size further for very small screens */
    .hero-headline,
    .hero-headline-alt {
        font-size: 26px !important;
        /* Force smaller size to fit long words */
        word-wrap: break-word;
        /* Ensure long words break if needed */
        hyphens: auto;
        /* Nice hyphenation */
    }

    .hero-subheadline {
        font-size: 18px !important;
    }
}

/* ====================================
   MOBILE CALENDAR WIDTH FIX
==================================== */
@media (max-width: 900px) {

    /* Force wrapper to not overflow */
    .visual-calendar-section {
        overflow-x: hidden;
        padding: 0 10px;
        /* Reduced padding */
        width: 100%;
        box-sizing: border-box;
    }

    .months-wrapper {
        width: 100%;
        flex-direction: column;
        align-items: center;
    }

    /* Force card to stay within bounds */
    .month-card {
        width: 100% !important;
        min-width: 0 !important;
        /* Prevent flex item from staying large */
        max-width: 100% !important;
        margin: 0 !important;
        padding: 20px 10px !important;
        /* Reduce padding inside card */
        box-sizing: border-box;
    }

    /* Ensure flex container doesn't fight the width */
    .dual-month-container {
        width: 100%;
        max-width: 100%;
    }
}

/* ====================================
   HERO & CALENDAR REFINEMENTS
==================================== */

/* --- 1. Hero Title Position Fix --- */
/* Default Desktop Behavior (matched previous inline style) */
.hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 100%;
    text-align: center;
}

.hero-subheadline {
    margin-top: 24px;
    line-height: 1.3;
    /* Font size handled by existing media queries/base */
    font-size: 28px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

@media (max-width: 900px) {
    .hero-text {
        top: auto;
        /* Unset top: 50% */
        bottom: 80px;
        /* Push from bottom instead, creates space from menu */
        /* OR simpler: add padding-top to container and use relative flow? 
           But strict positioning is requested. 
           Let's try pushing it down. 
           If menu is fixed at top ~80px, we want title below.
           top: 120px might be safer than bottom.
        */
        top: 140px;
        transform: translateX(-50%);
        /* remove Y translate */
        padding: 0 20px;
    }

    .hero-subheadline {
        font-size: 18px;
        /* Match mobile adjustments */
        margin-top: 16px;
        color: #000;
    }
}


/* --- 2. Mobile Calendar Refinements --- */
@media (max-width: 900px) {

    /* Show only FIRST month */
    .dual-month-container .month-card:nth-child(2) {
        display: none !important;
    }

    /* Adjust Wrapper for Button Positioning */
    .months-wrapper {
        position: relative;
        padding-top: 60px;
        /* Space for buttons */
        padding-bottom: 20px;
    }

    /* Absolute Position Buttons */
    .cal-nav-btn {
        position: absolute;
        top: 0;
        z-index: 10;
        margin-top: 0;
        background: transparent;
        /* Cleaner look */
        box-shadow: none;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }

    .cal-nav-btn.prev {
        left: calc(50% - 150px);
        /* Adjust spacing from center */
    }

    .cal-nav-btn.next {
        right: calc(50% - 150px);
    }

    /* Ensure title visibility/centering if we have phantom space */
}

@media (max-width: 400px) {

    /* Tighter spacing for small screens */
    .cal-nav-btn.prev {
        left: 10px;
    }

    .cal-nav-btn.next {
        right: 10px;
    }
}

/* ====================================
   BURGER MENU ICON COLOR
==================================== */
.burger-line {
    background-color: #000 !important;
    /* Force black lines */
}

/* Ensure hover state is also visible or distinct if needed */
.burger-menu:hover .burger-line {
    background-color: #333 !important;
}

/* ====================================
   MOBILE EVENT CARD CENTERING
==================================== */
@media (max-width: 900px) {
    .event-details-panel {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        position: fixed !important;
        width: 90% !important;
        max-width: 340px !important;
        margin: 0 !important;
        z-index: 20002 !important;
    }
}

/* ====================================
   GLOBAL LAYOUT CONTAINERS
==================================== */
.section-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
    /* Minimal padding for mobile safety */
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .section-container {
        padding: 0 64px;
        /* Desktop margin match footer */
    }
}

/* ====================================
   VIDEO SECTION RESTORATION (REWRITE)
==================================== */
.yt-video-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.yt-video-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 32px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    position: relative;
    background: #000;
}

.yt-video-frame iframe {
    width: 100%;
    height: 100%;
    display: block;
}