/* Sticky Callout Wrapper */
.sticky-callout-wrapper {
    position: relative;
    width: 100%;
    z-index: 10; /* Lower than header but higher than most content */
    height: 0; /* Don't take up space in the document flow */
    overflow: visible; /* Allow container to be visible outside */
}

/* Sticky Callout Container */
.sticky-callout-container {
    position: absolute;
    top: -85px; /* Initial position for absolute state */
    left: 0;
    right: 0;
    width: 100%;
    background: transparent;
    z-index: 10;
    transition: top 0.3s ease-in-out;
}
.sticky-callout-container.secondary {
    top: 170px;
}

/* Fixed state */
@media screen and (min-width: 769px) {
    .sticky-callout-container.is-fixed {
        position: fixed;
        /* top will be set by JavaScript based on header visibility */
        /* We're removing transform-based positioning in favor of direct top values */
    }

    /* Placeholder to prevent content jump */
    .sticky-callout-container.is-fixed ~ .sticky-callout-placeholder {
        display: block; /* Only show when container is fixed */
    }
}

/* Placeholder to prevent content jump */
.sticky-callout-placeholder {
    display: none; /* Hide by default */
    width: 100%;
}

/* Sticky Callout Content */
.sticky-callout-content {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0;
}

/* Image Title Container */
.sticky-callout-content .image-title-container {
    position: relative;
    margin-bottom: 0;
}

.sticky-callout-content .title-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 760px; /* Match the SVG width */
    gap: 30px;
}

.sticky-callout-content .title-text {
    color: var(--color-white);
    font-size: var(--font-size-floating-bow-text);
    line-height: var(--font-lh-floating-bow-text);
    font-weight: 600;
    margin: 0;
    flex: 1;
    text-align: right;
}

.sticky-callout-content .title-button {
    margin: 0;
    flex: 1;
}

.sticky-callout-content .title-button .wp-block-button__link {
    background-color: var(--color-yellow);
    color: var(--color-red);
    border: 2px solid var(--color-white);
    border-radius: 20px;
    font-weight: 600;
    padding: 7px 15px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.sticky-callout-content .title-button .wp-block-button__link:hover {
    background-color: var(--color-red);
    color: var(--color-yellow);
}

.sticky-callout-content .background-image-svg {
    width: 100%;
    max-width: 770px;
    height: 115px;
    margin: 30px auto 0;
    background-image: url('/wp-content/uploads/static/red-bow-medium.png');
    background-size: 100% 115px;
    background-position: center;
    background-repeat: no-repeat;
    overflow: visible;
    display: flex;
    justify-content: center;
}

.sticky-callout-content .background-image-svg svg {
    width: 805.294px;
    height: 150.523px;
    display: block;
    shape-rendering: geometricPrecision;
    image-rendering: optimizeQuality;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    filter: none;
    max-width: 100%;
}

/* Responsive Styles */
@media screen and (max-width: 1024px) {
    .sticky-callout-container.secondary {
        top: -10px;
    }

    .hero-section-wrapper.secondary.blue + .sticky-callout-wrapper .sticky-callout-container.secondary {
        top: 170px;
    }
    
    .sticky-callout-content .title-content {
        max-width: 600px;
        gap: 20px;
    }
    
    .sticky-callout-content .title-text {
        text-align: center;
    }
    
    .sticky-callout-content .title-button {
        margin: 0;
    }
    
    .sticky-callout-content .background-image-svg {
        height: 95px;
        max-width: 650px;
        background-size: 100% 95px;
    }
}

@media screen and (max-width: 767px) {
    .sticky-callout-container.secondary {
        top: -20px;
    }
    
    .sticky-callout-content {
        padding: 5px 35px 0;
    }
    
    .sticky-callout-content .background-image-svg {
        height: 135px;
        max-width: 320px;
        background-size: 100% 135px;
    }
    
    .sticky-callout-content .background-image-svg svg {
        height: 100px;
    }
    .sticky-callout-content .title-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        max-width: 100%;
        transform: none;
        left: auto;
        top: 30px;
    }
    .sticky-callout-content .title-text {
        text-align: center;
        font-size: var(--font-size-nav-button);
        line-height: var(--font-lh-nav-button);
    }

    .sticky-callout-content .title-button {
        margin: 0;
    }

    .sticky-callout-content .title-button .wp-block-button__link {
        font-size: var(--font-size-button-primary);
        line-height: var(--font-lh-button-primary);
    }
} .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100; /* Higher than banner */
    background-color: var(--color-nav-gray);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: var(--header-height);
    border-bottom-left-radius: 300% 150px;
    border-bottom-right-radius: 300% 150px;
    clip-path: inset(0 0 -150px 0); /* Ensures shadow is visible below curved edge */
    transition: transform 0.3s ease-in-out;
}

.site-header.header-hidden {
    transform: translateY(-100%);
}

/* Navigation Styles */
.primary-navigation {
    display: flex;
    align-items: flex-end;
    height: var(--header-height);
    max-width: 1490px;
    margin: 0 auto 30px;
    padding: 0 60px 20px;
    position: relative; /* Ensure it creates a stacking context */
    z-index: 100; /* Stacks within its parent (.site-header), which is z-index: 100 */
    border-bottom: 1px solid transparent;
}

.primary-navigation-subnav-border {
    border-bottom: 1px solid var(--color-white);
}

.wp-block-site-logo {
    width: var(--site-logo-width);
    margin-bottom: 25px;
}

.primary-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0 0 15px 0;
    padding: 0 0 0 4%;
    justify-content: space-between;
    max-width: 1100px;
    width: 100%;
}

.primary-menu li {
    margin: 0;
    padding: 0;
    position: relative;
    max-width: 120px;
}

/* Add safe hover area between menu item and subnav */
.primary-menu li.has-subnav::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20px; /* Extends below the menu item */
    height: 20px; /* Height of safe area */
    background: transparent;
    pointer-events: auto; /* Ensures hover works */
}

.primary-menu li:last-child {
    max-width: 279px;
    max-height: 80px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.5));
}

.primary-menu li:last-child a{
    font-size: var(--font-size-nav-button);
    line-height: var(--font-lh-nav-button);
    font-weight: 600;
    color: var(--color-red);
    background-color: var(--color-yellow);
    clip-path: var(--clip-path-mobile-headline);
    padding: 15px 30px 15px;
    border-radius: 0;
    display: inline-block;
    position: relative;
    opacity: 1;
    transition: all 0.3s ease-in-out;
}

.primary-menu li:last-child a:hover{
    color: var(--color-yellow);
    background-color: var(--color-red);
}

.primary-menu a {
    display: inline-block;
    font-size: var(--font-size-nav);
    line-height: var(--font-lh-nav);
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    font-weight: 500;
    opacity: 1;
    transition: opacity 0.15s ease-in-out;
}

.primary-menu .current_page_ancestor a {
    font-weight: 700 !important;
}

.primary-menu .has-subnav > a::after {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url('/wp-content/uploads/static/caret-down.svg');
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: -20px;
    top: 70%;
    transform: translateY(-50%);
    opacity: 1;
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.primary-menu a:hover {
    opacity: .75;
}

.primary-menu .has-subnav > a:hover::after {
    opacity: .75;
    transform: translateY(-40%);
}

.primary-menu li.current-menu-item a {
    font-weight: 600;
}

/* Sub-navigation Panel Styles */
.subnav-panels-container {
    position: absolute; /* Or relative, depending on where it's placed in HTML and desired flow */
}

.safe-hover-area {
    background: transparent;
    pointer-events: auto;
}

.subnav-panel {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--color-nav-gray);
    padding: 0;
    
    -webkit-mask-image: url(#subnav-shape-mask);
    mask-image: url(#subnav-shape-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    /* Initial animation state (visually hidden by position and z-index) */
    transform: translateY(-100%); /* Start with its top edge at top:0 then move up by its own height */
    z-index: 99; /* Below main header (which is z-index 100) */
    pointer-events: none; /* Not interactive when hidden */
    
    transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1); /* Only transform, adjusted timing function */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

/* Add safe hover area above subnav panel */
.subnav-panel::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -20px; /* Extends above the panel */
    height: 20px; /* Height of safe area */
    background: transparent;
    pointer-events: auto; /* Ensures hover works */
}

/* Remove the problematic ::after shadow */
.subnav-panel::after {
    display: none; /* Disable the problematic shadow */
}

/* Add separate shadow element that's not affected by mask */
.subnav-panel-shadow {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: rgba(0, 0, 0, 0.8); /* Very visible for testing */
    border-radius: 50% 50% 0 0 / 200% 200% 0 0; /* Curved top to match panel bottom */
    filter: blur(10px);
    z-index: 98; /* Behind the panel but above other content */
    pointer-events: none;
    transform: translateY(-100%); /* Start hidden - same as panel */
    transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1); /* Same timing as panel */
    opacity: 0;
    visibility: hidden;
    /* Debug styling */
    border: 2px solid red; /* Temporary border to see the element */
}

.subnav-panel-shadow.is-visible {
    transform: translateY(calc(var(--header-height) - 25px + 12px)); /* Position below panel */
    opacity: 1;
    visibility: visible;
}

/* Ensure no other drop-shadows are applied to subnav panels */
.subnav-panel,
.subnav-panels-container,
.subnav-panel * {
    filter: none !important;
    -webkit-filter: none !important;
}

.subnav-panel.is-visible {
    transform: translateY(calc(var(--header-height) - 25px));
    z-index: 99; /* CRITICAL: Keep z-index the same or lower than main header parts it should be behind */
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

.subnav-panel ul {
    list-style: none;
    margin: 0 auto; /* Centers the list within the full-width panel */
    padding: 40px 2.5%; /* Vertical padding + Horizontal padding to align with .primary-navigation content */
    max-width: 800px; /* Matches .primary-navigation max-width */
    opacity: 0;
    display: flex;
    gap: 10%;
    transform: translateY(-10px);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.subnav-panel.is-visible ul {
    opacity: 1;
    transform: translateY(0);
    /* Define transition specifically for fade-in */
    transition-property: opacity;
    transition-duration: 0.2s;
    transition-timing-function: ease-in;
    transition-delay: 0.25s; /* Delay for items to appear after panel slides in */
}

.subnav-panel ul li {
    margin: 0;
    padding: 0;
}

.subnav-panel ul li a {
    display: block;
    color: var(--color-white);
    font-size: var(--font-size-subnav);
    line-height: var(--font-lh-subnav);
    text-decoration: none;
    white-space: nowrap;
    padding: 10px 0;
    font-weight: 500;
    opacity: 1;
    transition: opacity 0.15s ease-in-out;
}

.subnav-panel ul li a:hover {
    opacity: .75;
}

/* Static Link Styles */
.site-switcher {
    font-size: var(--font-size-nav);
    color: var(--color-white);
    font-weight: 400;
    text-decoration: none;
    position: absolute  ;
    right: 85px;
    top: 15px;
}

.site-switcher-label-static {
    font-size: var(--font-size-subnav);
    color: var(--color-yellow);
    font-weight: 500;
    margin-right: 10px;
}

.site-switcher a {
    font-size: var(--font-size-subnav);
    color: var(--color-white);
    font-weight: 500;
    text-decoration: none;
    opacity: 1;
    transition: opacity 0.15s ease-in-out;
    margin-left: 10px;
}

.site-switcher a:hover {
    opacity: .75;
}

.site-switcher a::after {
    content: url('/wp-content/uploads/static/caret-right.svg');
    position: absolute;
    top: 1px;
    right: -20px;
    transition: transform 0.3s ease;
    width: 15px;
    height: 15px;
    display: inline-block;
    object-fit: contain;
}

.site-switcher a:hover::after {
    transform: translateX(2px);
}

@media (max-width: 1365px) {
    .primary-menu a {
        font-size: 1.0rem;
        line-height: 1.4rem;
    }
}

/* Hide desktop header on mobile - mobile header will take over */
@media (max-width: 1024px) {
    .site-header {
        display: none !important;
    }
}

/* Mobile Menu Styles */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-white);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-content {
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 80px 20px 20px;
    position: relative;
}

/* Lock scrolling using html element */
html.mobile-menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Ensure the page wrapper maintains scroll position */
html.mobile-menu-open #page {
    position: fixed;
    top: var(--scroll-position, 0);
    left: 0;
    width: 100%;
}

@media (max-width: 1365px) {
    .subnav-panel ul {
        gap: 5%;
    }
}/* Mobile Header Styles */
.mobile-header {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    pointer-events: none;
    width: 100%;
}

/* Mobile header background bar - matches desktop header styling */
.mobile-header::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height-mobile, 72px);
    background-color: var(--color-nav-gray);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-bottom-left-radius: 300% 50px;
    border-bottom-right-radius: 300% 50px;
    clip-path: inset(0 0 -50px 0);
    z-index: 999;
    pointer-events: none;
    transition: transform 0.3s ease-in-out;
    will-change: transform;
}

/* Header hidden state */
.mobile-header.header-hidden {
    transform: translateY(-120%); /* Increased from -100% to ensure complete hiding */
}

.mobile-header.header-hidden::before {
    transform: translateY(-120%); /* Match the header transform */
}

/* Show mobile header only on mobile */
@media (max-width: 1024px) {
    .mobile-header {
        display: block;
        pointer-events: auto;
    }
    
    .mobile-header::before {
        pointer-events: none;
    }
}

/* Mobile menu toggle button (hamburger) and close button - same position */
.mobile-menu-toggle,
.mobile-menu-close-fixed {
    position: fixed;
    top: 10px;
    right: 20px;
    z-index: 1001;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    will-change: transform;
    width: 48px;
    height: 40px;
}

/* Adjust toggle button position when header is hidden */
.mobile-header.header-hidden .mobile-menu-toggle {
    transform: translateY(-100%);
}

.mobile-menu-toggle:hover,
.mobile-menu-close-fixed:hover {
    opacity: 0.8;
}

.hamburger-icon,
.mobile-menu-close-fixed img {
    max-width: 32px;
    height: auto;
}

/* Specific styling for close button */
.mobile-menu-close-fixed {
    background: transparent;
}

.mobile-menu-close-fixed img {
    width: 24px;
    height: 24px;
}

/* Mobile menu overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-nav-gray);
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    z-index: 1000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-menu-overlay.is-open {
    transform: translateY(0);
}

/* Disable body scroll when mobile menu is open */
body.mobile-menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Mobile menu content */
.mobile-menu-content {
    padding: 20px 30px 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
}

.mobile-menu-overlay.is-open .mobile-menu-content {
    opacity: 1;
    transition-delay: 0.4s; /* Delay to start after slide animation completes */
}

/* Mobile menu navigation */
.mobile-menu-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 80px 40px 0;
}

/* Professional label */
.mobile-menu-label {
    font-size: 14px;
    color: var(--color-yellow);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-white);
    margin-bottom: 30px;
}

/* Mobile menu list */
.mobile-menu-list {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
}

/* Mobile menu items */
.mobile-menu-item {
    margin: 0;
    padding: 0;
}

.mobile-menu-item:last-child {
    position: relative;
}

.mobile-menu-item:last-child .mobile-menu-item-content{
    position: absolute;
    top: 120px;
    left: 0;
    right: 0;
    max-width: 300px;
    width: 100%;
    margin: 0 auto;
}

.mobile-menu-item:last-child .mobile-menu-item-content svg {
    display: none;
}

.mobile-menu-item-content {
    position: relative;
}

/* Mobile menu links */
.mobile-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 0;
    font-size: 20px;
    font-weight: 500;
    color: var(--color-yellow);
    text-transform: uppercase;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: opacity 0.3s ease;
}

.mobile-menu-link:hover,
.mobile-menu-link:focus,
.mobile-menu-link:active {
    opacity: 0.8;
    color: var(--color-yellow);
}

/* Mobile menu caret */
.mobile-menu-caret {
    width: 8px;
    height: 12px;
    color: var(--color-yellow);
    transition: transform 0.3s ease;
}

.mobile-submenu-toggle.is-expanded .mobile-menu-caret {
    transform: rotate(90deg);
}

/* Mobile submenu */
.mobile-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.mobile-submenu.is-expanded {
    max-height: 1000px;
    transition: max-height 0.5s ease-in;
}

.mobile-submenu-item {
    margin: 0;
    padding: 0;
}

.mobile-submenu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-white);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: opacity 0.3s ease;
}

.mobile-submenu-link:hover,
.mobile-submenu-link:focus,
.mobile-submenu-link:active {
    opacity: 1;
    color: var(--color-yellow);
}

/* Mobile site switcher */
.mobile-site-switcher {
    padding-top: 0px;
    border-top: 1px solid var(--color-white);
}

.mobile-site-switcher-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-white);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.mobile-site-switcher-link:hover,
.mobile-site-switcher-link:focus,
.mobile-site-switcher-link:active {
    opacity: 1;
    color: var(--color-yellow);
}

/* Logo link styling */
.mobile-menu-logo a,
.mobile-menu-logo-text a {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
}

.mobile-menu-logo a:hover,
.mobile-menu-logo-text a:hover {
    opacity: 0.8;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .mobile-menu-nav {
        padding: 80px 0 0;
    }

    .mobile-menu-link {
        padding: 10px 0;
    }

    .mobile-submenu-link {
        padding: 10px 0;
    }
}

/* Animation states */
.mobile-menu-overlay {
    visibility: hidden;
}

.mobile-menu-overlay.is-open {
    visibility: visible;
}

/* Ensure proper stacking */
.mobile-header * {
    box-sizing: border-box;
}

/* Hide desktop header on mobile when mobile header is present */
@media (max-width: 1024px) {
    .site-header {
        display: none !important;
    }
}

/* Mobile menu last item bow background treatment - matching desktop */
.mobile-menu-item:last-child .mobile-menu-link {
    font-weight: 600;
    color: var(--color-red);
    padding: 10px 20px;
    background-color: var(--color-yellow);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    opacity: 1;
    transition: all 0.3s ease-in-out;
    text-align: center;
    width: 300px;
    height: 44px;
    clip-path: var(--clip-path-mobile-headline);
}

.mobile-menu-item:last-child .mobile-menu-link:hover,
.mobile-menu-item:last-child .mobile-menu-link:focus,
.mobile-menu-item:last-child .mobile-menu-link:active {
    color: var(--color-yellow);
    background-color: var(--color-red);
    opacity: 1;
}

/* Override the caret color for last child to match text color */
.mobile-menu-item:last-child .mobile-menu-caret {
    color: var(--color-yellow);
}

/* Mobile submenu caret */
.mobile-submenu-caret {
    width: 8px;
    height: 12px;
    color: var(--color-white);
    transition: transform 0.3s ease;
}

/* Persistent mobile logo - always visible */
.mobile-header-logo-persistent {
    position: fixed;
    top: 10px;
    left: 20px;
    z-index: 1001;
    pointer-events: auto;
    transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out; /* Added opacity transition */
    will-change: transform, opacity;
}

/* Logo transition states */
.mobile-header-logo-persistent.initialized {
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Hide logo when header is hidden */
.mobile-header.header-hidden .mobile-header-logo-persistent {
    transform: translateY(-120%); /* Match the header transform */
    opacity: 0; /* Added opacity */
}

.mobile-persistent-logo-link,
.mobile-persistent-logo-text {
    display: inline-block;
    text-decoration: none;
    color: var(--color-white);
    transition: opacity 0.3s ease;
}

.mobile-persistent-logo-link:hover,
.mobile-persistent-logo-text:hover {
    opacity: 0.8;
}

.mobile-persistent-logo-img {
    max-height: 42px;
    width: auto;
}

/* Logo visibility states */
.mobile-logo-link {
    display: none; /* Hidden by default */
}

.mobile-menu-overlay.is-open .site-logo-link {
    display: none; /* Hide site logo when menu is open */
}

.mobile-menu-overlay.is-open .mobile-logo-link {
    display: inline-block; /* Show mobile logo when menu is open */
}

.mobile-persistent-logo-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-white);
}

/* Mobile-specific logo styles - only used in slide-out menu */
.mobile-menu-logo .mobile-specific-logo {
    /* Override styles if needed for mobile-specific logo in slide-out menu */
    max-height: 42px;
    width: auto;
} /* Viewport-Responsive Hero Custom Properties */
:root {
    --hero-height-min: 600px;
    --hero-height-preferred: 60vh;
    --hero-height-max: 700px;
    --hero-content-width-min: 320px;
    --hero-content-width-preferred: 35%;
    --hero-content-width-max: 600px;
    --hero-callout-width-min: 350px;
    --hero-callout-width-preferred: 25vw;
    --hero-callout-width-max: 450px;
    --hero-callout-height-min: 180px;
    --hero-callout-height-preferred: 15vh;
    --hero-callout-height-max: 230px;
}

/* Base wrapper styles for all heroes */
.hero-section-wrapper {
    width: 100%;
    position: relative;
    z-index: 5; /* Ensure this is lower than header z-index */
}

/* Secondary hero wrapper styles - curved bottom and background */
.hero-section-wrapper.secondary {
    background-color: var(--color-white);
    border-bottom-left-radius: 300% 150px;
    border-bottom-right-radius: 300% 150px;
    clip-path: inset(0 0 -150px 0); /* Ensures the curved edge is visible */
    z-index: 15; /* Ensure this is lower than header z-index */
}

/* Hero Section Base */
.hero-section {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: visible; 
    /* Viewport-responsive padding with bounds */
    padding-bottom: clamp(40px, 8vh, 80px);
    padding-top: clamp(80px, 12vh, 140px);
    /* Ensure full viewport coverage on larger screens */
    min-height: 100vh;
    background-color: var(--color-white);
}

.hero-container {
    position: relative;
    width: 100%;
}

/* Hero Image */
.hero-image-container {
    position: relative;
    width: 100%;
    z-index: 1;
}

.hero-image {
    width: 100%;
    margin: 0;
}

.hero-image img {
    width: 100%;
    height: auto;
    display: block;
}

.hero-image-container .mobile-image {
    display: none;
}

/* Hero Top Section */
.hero-top {
    position: relative;
    height: clamp(var(--hero-height-min), var(--hero-height-preferred), var(--hero-height-max));
}

/* Carousel */
.hero-carousel {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(--color-nav-gray);
}

.carousel-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    margin: 0;
}

.carousel-slide.active {
    opacity: 1;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Carousel Indicator */
.carousel-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.indicator-wrapper {
    cursor: pointer;
}

.indicator-wrapper svg {
    display: block;
}

.indicator-line {
    transition: all 0.3s ease-in-out;
    pointer-events: all;
}

/* Hero Carousel Disclaimer */
.hero-carousel-disclaimer {
    position: absolute;
    bottom: 20px; /* Adjust as needed */
    font-size: 1.0rem; /* 10px */
    line-height: 1.2rem; /* 12px */
    color: var(--color-white);
    transition: all 0.3s ease-in-out;
    z-index: 10;
}

/* Position classes */
.hero-carousel-disclaimer.position-left {
    right: 5%;
}

.hero-carousel-disclaimer.position-right {
    left: 3%;
}

/* Fade animation */
.hero-carousel-disclaimer.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Hero Content */
.hero-content {
    position: absolute;
    top: 50%;
    right: 15%;
    transform: translateY(-50%);
    /* Viewport-responsive width with bounds */
    width: clamp(var(--hero-content-width-min), var(--hero-content-width-preferred), var(--hero-content-width-max));
    color: white;
    z-index: 2;
    text-align: center;
    /* Smooth transitions for positioning */
    transition: opacity 0.3s ease-in-out, left 0.5s ease-in-out, right 0.5s ease-in-out;
}

/* Hero Content - Left Positioning */
.hero-content.position-left {
    left: 15%;
    right: auto;
}

/* Hero Content - Right Positioning (default) */
.hero-content.position-right {
    right: 15%;
    left: auto;
}

/* Hero Content - Fade states for transitions */
.hero-content.fade-out {
    opacity: 0;
}

.hero-content.fade-in {
    opacity: 1;
}

.hero-content h1 {
    /* Viewport-responsive margin scaling */
    margin: 0 0 clamp(25px, 5vh, 50px);
    font-size: var(--font-size-h1);
    line-height: var(--font-lh-h1);
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-content h1 .big {
    font-size: var(--font-size-h1-big);
    line-height: var(--font-lh-h1-big);
    position: relative;
    font-weight: 700;
    margin: 20px 0;
    display: inline-block;
    padding: 0;
}

.hero-content h1 .big .blue-text {
    color: var(--color-blue);
}

.hero-content h1 .big .hero-border-top,
.hero-content h1 .big .hero-border-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    height: 6px;
    color: var(--color-blue);
}

.hero-content h1 .big .hero-border-top {
    top: 0;
}

.hero-content h1 .big .hero-border-bottom {
    bottom: 0;
}

.hero-content h2 {
    margin: 0;
    font-size: var(--font-size-h2);
    line-height: var(--font-lh-h2);
    color: var(--color-yellow);
    font-weight: 600;
}

.hero-content p {
    margin: 0 0 20px;
    font-size: var(--font-size-body);
    line-height: var(--font-lh-body);
}

/* Hero Bottom Section */
.hero-bottom {
    padding: 120px 0 120px;
    background-color: var(--wp--preset--color--background);
    position: relative;
    z-index: 4; /* Ensure proper stacking with other sections */
}

/* Hero Divider Section - Blue background bar */
.hero-divider {
    background: linear-gradient(to bottom, #2086B1 0%, #28A7DD 100%);
    height: 77px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 3;
    margin-bottom: 40px;
    cursor: pointer;
    clip-path: var(--clip-path-fixed-mobile-bowl);
    margin-top: -10px;
}

.divider-content {
    max-width: 840px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 0 30px;
    position: relative;
    width: 100%;
}

.divider-text-container {
    flex: 1;
    text-align: right;
    max-width: 600px;
    position: relative;
    margin-right: 0;
}

.divider-heading {
    color: var(--color-white, #ffffff);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    text-align: right;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.hero-divider:hover .divider-heading {
    color: var(--color-yellow, #FFD700);
}

.hero-divider:hover .thumbnail-image img {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.thumbnail-images-container {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 110px;
    height: auto;
    flex-shrink: 0;
}

.thumbnail-image {
    width: 110px;
    height: auto;
    margin: 0;
    opacity: 0;
    transition: opacity 0.1s ease-out delay(0.4s);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.thumbnail-image.active {
    opacity: 1;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
}

.thumbnail-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Link wrapper for hero-divider */
.hero-divider-wrapper {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
    height: 100%;
}

.hero-divider-wrapper:hover {
    text-decoration: none;
    color: inherit;
}

.text-content {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 945px;
    margin: 0px auto;
    padding: 50px 0;
    position: relative;
}

.text-content::before,
.text-content::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 3.5px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.text-content::before {
    top: 0;
    background-image: url('/wp-content/uploads/static/tapered-top-border-blue.svg');
}

.text-content::after {
    bottom: 0;
    background-image: url('/wp-content/uploads/static/tapered-bottom-border-blue.svg');
}

.left-text-container,
.right-text-container {
    position: relative;
    flex: 1;
    height: 100%;
}

.left-text {
    text-align: right;
    padding-right: 160px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    margin: 0;
    font-size: var(--font-size-h3);
    line-height: var(--font-lh-h3);
}

.right-text {
    text-align: left;
    padding-left: 160px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    margin: 0;
    font-size: var(--font-size-h3);
    line-height: var(--font-lh-h3);
}

.left-text.active,
.right-text.active {
    opacity: 1;
}

.center-images-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.center-image {
    width: 299px;
    height: 322px;
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -55%);
    z-index: 2;
    background: var(--wp--preset--color--background);
    box-shadow: 0 0 0 20px var(--wp--preset--color--background);
    opacity: 0;
    transition: opacity 0.1s ease-out delay(0.4s);
}

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

.center-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding-bottom: 0;
}

.disclaimer-text-container {
    position: absolute;
    bottom: -110px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.disclaimer-text-container .disclaimer-text{
    font-size: 10px;
}

/* Hero Copy Section */
.hero-copy {
    padding: 0px 0 20px;
    background-color: var(--color-white);
    position: relative;
    margin-top: 0px;
    z-index: 4; 
}

.copy-content {
    max-width: 1177px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

/* Scope image-title-container to hero only */
.hero-copy .image-title-shadow-wrapper {
    position: relative;
    max-width: 1140px;
    margin: 0 auto 35px;
    filter: drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.5));
}

.hero-copy .image-title-container {
    position: relative;
    background-color: var(--color-red);
    width: 100%;
    height: 115px;
    clip-path: var(--clip-path-headline-bowl);
}

.hero-copy .image-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    margin: 0;
    color: var(--color-white);
    font-size: var(--font-size-h2-bow);
    line-height: var(--font-lh-h2-bow);
    font-weight: 600;
    text-align: center;
    width: 100%;
}

/* Removed .background-image-svg class in favor of clip-path solution */

.red-title {
    margin: 0 0 25px;
    color: var(--color-red);
    font-size: var(--font-size-h3);
    line-height: var(--font-lh-h3);
    font-weight: 700;
}

.bold-copy {
    margin: 0 0 25px;
    font-size: var(--font-size-important-text);
    line-height: var(--font-lh-important-text);
    font-weight: 700;
}

.regular-copy {
    margin: 0 0 25px;
    font-size: var(--font-size-important-text);
    line-height: var(--font-lh-important-text);
    font-weight: 400;
}

/* Hero Secondary Styles */
.hero-secondary {
    position: relative;
    height: 375px;
    padding: 220px 0 0px; /* Add back some bottom padding to ensure content doesn't overlap mask */
    background-color: var(--color-nav-gray);
    color: var(--color-white);
    margin-bottom: -100px; /* Pull the next content section up to hide the overlap */
    z-index: 1;
    min-height: unset;
    /* Safari-specific layout fixes */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* Ensure proper box model calculation */
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* Add a separate container for the bottom mask effect */
.hero-secondary::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px; /* Match subnav panel height */
    background-color: var(--color-nav-gray);
    -webkit-mask-image: url(#subnav-shape-mask);
    mask-image: url(#subnav-shape-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: bottom center;
    mask-position: bottom center;
    transform: translateY(149px); /* Position the mask at the bottom edge */
    z-index: 2;
}

/* Blue variant for hero-secondary */
.hero-secondary.blue {
    background: var(--color-blue-gradient);
    padding-top: 270px;
    height: 540px;
    margin-bottom: -210px;
    /* Safari-specific fixes */
    -webkit-transform: translateZ(0); /* Force hardware acceleration */
    transform: translateZ(0);
    /* Ensure proper height calculation in Safari */
    min-height: 540px;
    max-height: 540px;
    /* Alternative gradient approach for Safari */
    background: -webkit-linear-gradient(to bottom, #29AAE1, #1C7399);
    background: linear-gradient(to bottom, #29AAE1, #1C7399);
}

/* Remove the old ::after pseudo element for blue variant */
.hero-secondary.blue::after {
    display: none;
}

/* Bottom curve container - positioned relative to main wrapper */
.bottom-curve-container {
    position: absolute;
    bottom: -34px;
    left: 0;
    right: 0;
    height: 35px;
    overflow: hidden;
    z-index: 3;
    /* Safari-specific positioning fix */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.bottom-curve {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    -webkit-mask-image: url(#subnav-shape-mask);
    mask-image: url(#subnav-shape-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: bottom center;
    mask-position: bottom center;
    z-index: 3;
    /* Safari-specific mask rendering fix */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.bottom-curve-container:not(.blue) .bottom-curve {
    background-color: var(--color-yellow);
}

.bottom-curve-container.blue .bottom-curve {
    background-color: var(--color-blue-dark);
    /* Safari-specific background fix */
    background: -webkit-linear-gradient(to bottom, #1C7399, #1C7399);
    background: linear-gradient(to bottom, #1C7399, #1C7399);
    /* Ensure consistent positioning with regular variant */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.hero-content-secondary {
    position: relative;
    max-width: 1177px;
    margin: 0 auto;
    padding: 0 30px 20px; /* Reduce bottom padding since we've added it to the parent */
    text-align: center;
    z-index: 3; /* Ensure content stays above the mask */
}

.hero-secondary.blue .hero-content-secondary {
    max-width: unset;
    padding: 0 0 20px;
}

.title-container {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    width: 100%;
}

/* Hero Secondary Title Styles - Scoped to secondary heroes only */
.hero-secondary .hero-title {
    margin: 0 auto;
    font-size: var(--font-size-hero-headline);
    line-height: var(--font-lh-hero-headline);
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-transform: uppercase;
}

.hero-secondary .hero-title .small {
    font-size: var(--font-size-hero-headline);
    line-height: var(--font-lh-hero-headline);
    color: var(--color-yellow);
    margin: 0;
}

.hero-secondary .hero-title .big {
    color: var(--color-white);
    font-size: var(--font-size-hero-headline-big);
    line-height: var(--font-lh-hero-headline-big);
    position: relative;
    font-weight: 600;
    margin: 40px auto;
    display: inline-block;
    text-align: center;
    width: auto; /* Allow width to be determined by content */
    padding: 0 20px; /* Add slight padding for visual spacing */
    min-width: 800px;
}

.hero-secondary .hero-title .big::before,
.hero-secondary .hero-title .big::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 8.4px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%; /* Ensure border covers full width of text */
    color: var(--color-blue); /* Default color for HCP */
}

.hero-secondary .hero-title .big::before {
    top: -25px;
    background-image: url('/wp-content/uploads/static/tapered-top-border-hero-secondary-blue.svg');
    background-position: center top;
}

.hero-secondary .hero-title .big::after {
    bottom: -25px;
    background-image: url('/wp-content/uploads/static/tapered-bottom-border-hero-secondary-blue.svg');
    background-position: center bottom;
}

/* Blue variant for hero-title */
.hero-secondary.blue .hero-title .small {
    color: var(--color-white);
    font-size: var(--font-size-hero-headline-blue);
    line-height: var(--font-lh-hero-headline-blue);
    margin-top: 20px;
}

.hero-secondary.blue .hero-title .big {
    font-size: var(--font-size-hero-headline-big-blue);
    line-height: var(--font-lh-hero-headline-big-blue);
    margin-top: 0;
    font-weight: 700;
}

.hero-secondary.blue .hero-title .big::before {
    background-image: none
}

.hero-secondary.blue .hero-title .big::after {
    background-image: none;
}

/* Responsive Styles */
@media screen and (max-width: 1599px) {
    /* Adjust viewport scaling for smaller large screens */
    :root {
        --hero-height-preferred: 55vh;
        --hero-height-max: 600px;
        --hero-callout-width-preferred: 23vw;
        --hero-callout-height-preferred: 12vh;
    }

    .hero-top {
        position: relative;
        height: clamp(450px, var(--hero-height-preferred), var(--hero-height-max));
    }

    .hero-content{
        top: 55%;
        right: 10%;
    }

    .hero-content.position-left {
        left: 7%;
        right: auto;
    }

    .hero-content.position-right {
        right: 7%;
        left: auto;
    }

    .hero-content p{
        margin: 0 0 10px
    }

    .hero-content h1{
        margin: 0 0 20px;
    }

    .hero-content-inner {
        padding: 13% 0 7%;
    }

    .hero-content-inner h1 {
        line-height: 8.5rem;
    }

    .hero-content-inner p {
        line-height: 2.4rem;
    }

    .hero-content-top p{
        width: 350px;
    }
    
    .hero-content-top p:last-of-type {
        width: 430px;
    }

    .hero-callout {
        /* Override with specific values for this breakpoint */
        width: clamp(300px, 23vw, 370px);
        height: clamp(150px, 12vh, 185px);
    }

    .hero-callout .callout-link a {
        line-height: 3.6rem;
    }

    .hero-content-bottom p {
        line-height: 1.5rem;
    }
}

@media screen and (max-width: 1365px) {
    /* Further adjust viewport scaling for medium screens */
    :root {
        --hero-height-preferred: 50vh;
        --hero-height-max: 525px;
        --hero-callout-width-preferred: 20vw;
    }

    .hero-content-inner {
        padding: 15% 0 4%;
    }

    .hero-content-inner h1 {
        line-height: 6.5rem;
        width: 85%;
        margin: 0 auto 2%;
    }

    .hero-content-inner p {
        line-height: 2.2rem;
    }

    .hero-content-top p{
        width: 260px;
    }
    
    .hero-content-top p:last-of-type {
        width: 320px;
    }

    .hero-callout {
        width: clamp(240px, 20vw, 300px);
        height: clamp(125px, 10vh, 150px);
        /* Adjust positioning for smaller viewport */
        top: calc(var(--hero-height-preferred) + 5vh);
    }

    .hero-callout.fixed {
        margin-top: var(--header-height);
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .hero-callout::after {
        bottom: 7px;
        width: 16px;
        height: 6px;
    }

    .hero-callout .callout-link a {
        line-height: 2.4rem;
    }

    .hero-content-bottom p {
        line-height: 1.5rem;
    }

    /* Hero Copy responsive */
    .hero-copy .image-title {
        font-size: calc(var(--font-size-h2));
    }
    
    .red-title {
        font-size: calc(var(--font-size-h3));
    }
    
    .bold-copy,
    .regular-copy {
        font-size: var(--font-size-important-text);
        line-height: var(--font-lh-important-text);
    }

    .hero-copy .background-image-svg {
        height: 100px;
        max-width: 1000px;
        background-size: 100% 98px;
    }
}

@media screen and (max-width: 1024px) {
    /* Adjust viewport scaling for tablet/small desktop */
    :root {
        --hero-height-preferred: 45vh;
        --hero-height-max: 450px;
        --hero-height-min: 400px;
    }

    .hero-section {
        /* Remove full height constraint on tablet */
        /* Safari-specific fix - avoid min-height: auto */
        min-height: 400px;
        padding-top: 60px;
        /* Safari-specific rendering fixes */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    /* Keep the original carousel layout but adjust positioning */
    .hero-top {
        position: relative;
        height: clamp(var(--hero-height-min), var(--hero-height-preferred), var(--hero-height-max));
    }

    /* Fix hero content positioning - keep it overlaid on carousel */
    .hero-content {
        position: absolute;
        top: 50%;
        right: 5%;
        transform: translateY(-50%);
        color: white;
        z-index: 2;
        text-align: center;
    }

    .hero-content.position-left {
        left: 5%;
        right: auto;
    }

    .hero-content h1 {
        margin: 0 0 clamp(15px, 3vh, 30px);
        font-size: 2.2rem;
        line-height: 2.7rem;
    }

    .hero-content h1 .big {
        font-size: 4.6rem;
        line-height: 6.0rem;
        margin: 8px 0 15px;
    }

    .hero-content h2 {
        font-size: 1.8rem;
        line-height: 2.4rem;
    }

    .hero-content p {
        font-size: 1.45rem;
        line-height: 2.0rem;
        margin: 0 0 15px;
    }

    .divider-content {
        max-width: 700px;
    }

    .divider-heading {
        font-size: 16px;
    }

    .thumbnail-images-container .thumbnail-image {
        width: 140px;
    }

    /* Hero Divider responsive for 1024px */
    .hero-divider {
        clip-path: var(--clip-path-mobile-headline);
    }

    /* Fix bottom section to maintain carousel functionality */
    .hero-bottom {
        padding: 120px 0 80px;
    }

    .bottom-content {
        padding: 0 40px;
    }

    /* Keep the original desktop layout for text-content but adjust spacing */
    .text-content {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 800px;
        margin: 0px auto;
        padding: 40px 0;
        position: relative;
    }

    .left-text-container,
    .right-text-container {
        position: relative;
        flex: 1;
        height: 100%;
    }

    .left-text {
        text-align: right;
        padding-right: 120px;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 100%;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
        margin: 0;
    }

    .right-text {
        text-align: left;
        padding-left: 120px;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 100%;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
        margin: 0;
    }

    .left-text.active,
    .right-text.active {
        opacity: 1;
    }

    .center-images-container {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    .center-image {
        width: 200px;
        height: 230px;
        margin: 0;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        background: var(--wp--preset--color--background);
        box-shadow: 0 0 0 15px var(--wp--preset--color--background);
        opacity: 0;
        transition: opacity 0.1s ease-out delay(0.4s);
    }

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

    .center-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        padding-bottom: 30px;
    }

    .disclaimer-text-container {
        bottom: -85px;
    }

    /* Hero Copy responsive */
    .copy-content {
        padding: 0 40px;
    }
    
    .hero-copy .image-title {
        font-size: calc(var(--font-size-h2-bow) - 8px);
    }
    
    .hero-copy .background-image-svg {
        height: 95px;
        max-width: 950px;
        background-size: 100% 74px;
    }

    /* Hero Secondary responsive */
    .hero-secondary {
        padding: 130px 0px 0;
        position: relative;
        overflow: visible;
        height: auto;
        margin-bottom: 0;
        z-index: 2;
    }

    /* Ensure mask remains visible at 1024px breakpoint */
    .hero-secondary::after {
        height: 50px;
        transform: translateY(40px);
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        z-index: 2;
    }

    .hero-secondary.blue {
        padding-top: 80px;
        height: 400px;
        min-height: 400px;
        max-height: 400px;
    }
}

@media (max-width: 767px) {
    /* Optimize viewport scaling for mobile */
    :root {
        --hero-height-preferred: 40vh;
        --hero-height-max: 400px;
        --hero-height-min: 300px;
        --hero-content-width-preferred: 80%;
        --hero-content-width-max: 350px;
    }

    /* Mobile responsive styles for secondary hero wrappers only */
    .hero-section-wrapper.secondary {
        border-bottom-left-radius: 300% 50px;
        border-bottom-right-radius: 300% 50px;
        clip-path: inset(0 0 -50px 0);
    }

    .hero-section {
        /* Mobile-optimized padding and remove full height */
        padding-top: clamp(40px, 8vh, 60px);
        padding-bottom: clamp(60px, 4vh, 40px);
    }

    .carousel-indicator {
        bottom: 390px;
    }

    /* Mobile layout: stack hero-top and hero-content vertically */
    .hero-top {
        position: relative;
        height: auto;
    }

    /* Change hero-content from absolute to relative positioning */
    .hero-content {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        transform: none;
        width: 100%;
        margin: 0 auto;
        background-color: var(--color-nav-gray);
        z-index: 2;
        text-align: center;
        padding: 20px 0 40px;
    }

    /* On mobile, positioning classes don't apply */
    .hero-content.position-left,
    .hero-content.position-right {
        left: auto;
        right: auto;
    }

    .hero-content h1 {
        margin: 0 20px clamp(15px, 3vh, 25px);
        font-size: 2.0rem;
        line-height: 2.6rem;
    }

    .hero-content h1 .big {
        font-size: 5.4rem;
        line-height: 8.1rem;
        margin: 8px 0 15px;
        white-space: nowrap;
    }

    .hero-content h2 {
        font-size: 1.6rem;
        line-height: 2.2rem;
        color: var(--color-yellow);
    }

    .hero-content p {
        font-size: 1.2rem;
        line-height: 1.6rem;
        margin: 0 0 15px;
    }

    .divider-content {
        max-width: 375px;
        padding: 0;
        gap: 0;
    }

    .divider-heading {
        white-space: normal;
        text-align: left;
        width: 90%;
        padding-left: 20px;
        font-size: 14px;
    }
    /* Fix hero-bottom positioning to come after hero-content */
    .hero-bottom {
        padding: 0px 0 10px;
        margin-top: 0;
        position: relative;
        z-index: 1;
    }

    .hero-callout {
        position: relative;
        top: auto;
        left: 50%;
        transform: translateX(-50%);
        margin: 30px auto 0;
        border-radius: 8px;
        position: static;
        margin: 30px auto 0;
    }

    .bottom-content {
        padding: 0;
    }

    /* Simplify text-content layout for mobile */
    .text-content {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: relative;
        max-width: 100%;
        margin: 0;
        padding: 40px 0 20px 0;
    }
    .center-images-container {
        order: 0;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        z-index: 2;
        margin: 0 0 20px 0;
        pointer-events: none;
    }
    .left-text-container {
        order: 1;
        margin-top: 180px; /* space for the absolute image */
    }
    .right-text-container {
        order: 2;
        margin-top: 0px;
    }

    .left-text,
    .right-text {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        width: 100%;
        padding: 0;
        text-align: center;
        opacity: 1;
        transition: none;
        margin: 0;
        font-size: var(--font-size-h3);
        line-height: var(--font-lh-h3);
    }

    /* Hide inactive text on mobile for cleaner layout */
    .left-text:not(.active),
    .right-text:not(.active) {
        display: none;
    }

    .center-image {
        width: 200px;
        height: 230px;
        margin: 0 auto 20px;
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        z-index: 2;
        background: var(--wp--preset--color--background);
        box-shadow: 0 0 0 10px var(--wp--preset--color--background);
        opacity: 1;
        transition: none;
    }

    /* Hide inactive images on mobile */
    .center-image:not(.active) {
        display: none;
    }

    .center-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        padding-bottom: 20px;
    }

    /* Hero Copy responsive */
    .hero-copy {
        padding: 0;
        margin-top: 0;
    }
    
    .copy-content {
        padding: 0 20px;
    }
    
    .hero-copy .image-title {
        font-size: 2.0rem;
        line-height: 2.6rem;
        max-width: 285px;
    }
    
    .hero-copy .background-image-svg {
        height: 135px;
        max-width: 600px;
        background-size: 100% 135px;
    }
    
    .red-title {
        font-size: var(--font-size-h3);
        line-height: var(--font-lh-h3);
        padding: 0 5%
    }
    
    .bold-copy,
    .regular-copy {
        font-size: var(--font-size-important-text);
        line-height: var(--font-lh-important-text);
        padding: 0 4%
    }

    /* Hero Secondary responsive */
    .hero-secondary {
        padding: 160px 0px 0;
        position: relative;
        overflow: visible;
        height: auto;
        margin-bottom: 0;
        z-index: 2;
    }

    .hero-secondary::after {
        height: 30px;
        transform: translateY(30px);
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        z-index: 2;
    }

    .title-container {
        margin-bottom: 0;
    }

    .hero-secondary .hero-title .big {
        margin: 20px auto;
        min-width: unset;
    }
    .hero-secondary .hero-title .big::before{
        top:-15px;
    }
    .hero-secondary .hero-title .big::after{
        bottom:-15px;
    }

    .hero-secondary.blue .hero-title.deflate-together .big{
        font-size: 6.0rem;
        line-height: 7.0rem;
        margin: 20px 0;
    }

    /* Natural flow for carousel containers and slides on mobile only */
    .hero-carousel,
    .carousel-slides {
        position: relative;
        width: 100%;
        height: auto;
    }
    .carousel-slide {
        position: relative;
        width: 200%;
        height: auto;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
        margin: 0;
        top: auto;
        left: -15%;
    }
    
    /* Mobile slide positioning for different content positions */
    .carousel-slide.mobile-slide-left {
        left: -80%;
    }
    
    .carousel-slide.mobile-slide-right {
        left: -15%;
    }
    .carousel-slide.active {
        opacity: 1;
    }
    .carousel-slide img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .carousel-slide {
        display: none;
    }
    .carousel-slide.active {
        display: block;
    }

    .hero-carousel-disclaimer {
        position: relative;
        margin: 0 auto;
        text-align: center;
        white-space: nowrap;
    }

    .hero-carousel-disclaimer p{
        position: relative;
        margin: 5px auto 0;
        text-align: center;
        white-space: nowrap;
    }

    .hero-carousel-disclaimer p{
        font-size: 1.0rem;
        line-height: 1.2rem;
    }

    .text-content::before,
    .text-content::after {
        display: none;
    }
    .left-text-container::before {
        content: '';
        display: block;
        width: 100%;
        height: 8px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('/wp-content/uploads/static/tapered-top-border-blue.svg');
        margin-bottom: 10px;
    }
    .right-text-container::after {
        content: '';
        display: block;
        width: 100%;
        height: 8px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('/wp-content/uploads/static/tapered-bottom-border-blue.svg');
        margin-top: 10px;
    }

    .disclaimer-text-container {
        bottom: -20px;
    }

    .hero-copy .image-title-shadow-wrapper {
        filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.5));
    }

    .hero-copy .image-title-container {
        height: 90px;
        clip-path: var(--clip-path-mobile-headline);
    }

    .hero-copy .image-title {
        font-size: var(--font-size-h2-bow-mobile);
        line-height: var(--font-lh-h2-bow-mobile);
    }

    .bottom-curve-container.blue {
        bottom: -19px;
        height: 20px;
        /* Safari-specific positioning fix for mobile */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    .bottom-curve-container.blue .bottom-curve {
        height: 50px;
        /* Safari-specific mask fix for mobile */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* Extra small mobile styles to prevent thumbnail cutoff */
@media (max-width: 400px) {
    .divider-content {
        max-width: calc(100% - 30px);
        padding: 0 15px;
        margin: 0 auto;
        gap: 15px;
        justify-content: space-between;
    }

    .divider-heading {
        max-width: none;
        width: auto;
        flex: 1;
        padding-left: 0;
        font-size: 12px;
        line-height: 1.2;
        margin-right: 10px;
    }

    .thumbnail-images-container {
    }

    .thumbnail-image {
    }
}
/* Reference Section Pattern */
.entry-content .wp-block-group.is-style-reference-section {
    padding: 50px 14%;
    margin: 0 auto;
    width: 100%;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* Critical fix for container line heights */
.entry-content .wp-block-group.is-style-reference-section .wp-block-list {
    line-height: var(--font-lh-reference);
    display: inline;
}

.entry-content .wp-block-group.is-style-reference-section .wp-block-group {
    line-height: var(--font-lh-reference);
    max-width: 1460px;
    margin: 0 auto;
}

/* Reference List Styling */
.entry-content .wp-block-group.is-style-reference-section .reference-list {
    margin: 0 0 20px 0;
    display: block;
    font-size: var(--font-size-reference-title);
    line-height: var(--font-lh-reference-title);
    text-transform: uppercase;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.entry-content .wp-block-group.is-style-reference-section .inline-references {
    counter-reset: reference-counter;
    margin: 0;
    padding: 0;
    display: inline;
    list-style: none;
    font-size: var(--font-size-reference);
    line-height: var(--font-lh-reference);
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.entry-content .wp-block-group.is-style-reference-section .inline-references li {
    display: inline;
    font-size: var(--font-size-reference);
    line-height: var(--font-lh-reference);
    margin-right: 3px;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none !important;
}

/* Link styling */
.entry-content .wp-block-group.is-style-reference-section .inline-references li a {
    text-decoration: none;
    color: var(--color-yellow);
    font-size: var(--font-size-reference);
    line-height: var(--font-lh-reference);
}

/* Prevent phone number detection on all text content */
.entry-content .wp-block-group.is-style-reference-section * {
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Additional protection for text content */
.entry-content .wp-block-group.is-style-reference-section p,
.entry-content .wp-block-group.is-style-reference-section span,
.entry-content .wp-block-group.is-style-reference-section div {
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Reference numbers */
.entry-content .wp-block-group.is-style-reference-section .inline-references li::before {
    counter-increment: reference-counter;
    content: counter(reference-counter) ".";
    font-weight: 700;
    margin: 0 0.25em 0 0;
}

/* Dark Styles */
.entry-content .wp-block-group.is-style-reference-section.dark {
    color: white;
}

@media screen and (max-width: 1599px) {
    .entry-content .wp-block-group.is-style-reference-section {
        padding: 100px 10% 0;
    }
}

@media screen and (max-width: 1365px) {
    .entry-content .wp-block-group.is-style-reference-section {
        padding: 60px 10% 0;
    }
}

@media screen and (max-width: 767px) {
    .entry-content .wp-block-group.is-style-reference-section {
        padding: 40px 5% 0;
    }
}.site-footer {
    position: relative;
    background-color: var(--color-nav-gray);
    color: white;
    padding: 40px 0 80px 0;
    z-index: 10;
}

.site-footer .site-footer-inner {
    width: 100%;
    margin: 0 auto;
    padding: 0 14%;
}

.site-footer .wp-block-columns {
    flex-wrap: nowrap !important;
    margin-bottom: 0 !important;
}

/* Main footer layout */
.site-footer .footer-badge-column {
    flex-basis: 307px !important;
    width: 307px !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    margin-right: 33px !important;
}

.site-footer .footer-content-column {
    flex: 1 !important;
    flex-basis: auto !important;
    margin-left: 0 !important;
    display: flex;
    flex-direction: column;
}

/* Badge styles */
.site-footer .footer-badge-link {
    display: block;
    text-decoration: none;
    box-shadow: none;
}

.site-footer .footer-badge {
    position: relative;
    width: 307px;
    height: 254px;
    background-image: url("/wp-content/uploads/static/footer-badge-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    overflow: hidden;
}

.site-footer .footer-badge img#balloon-badge {
    position: absolute;
    width: 70px;
    height: auto;
    left: 5px;
    top: 35px;
    transition: opacity 0.3s ease-in-out;
}

.site-footer .badge-headline {
    position: absolute;
    top: 22px;
    left: 55px;
    margin: 0;
    color: var(--color-red);
    font-weight: 600;
    font-size: var(--font-size-footer-badge-headline);
    line-height: var(--font-lh-footer-badge-headline);
    transition: all 0.25s ease-in-out;
}

.site-footer .badge-subheadline {
    position: absolute;
    top: 105px;
    left: 125px;
    width: 165px;
    margin: 0;
    color: var(--color-nav-gray);
    font-size: var(--font-size-footer-badge-subheadline);
    line-height: var(--font-lh-footer-badge-subheadline);
    font-weight: 600;
    text-align: center;
}

.site-footer .footer-badge-link:hover .badge-headline {
    text-decoration: underline;
}

/* Footer top section */
.site-footer .footer-top {
    display: flex !important;
    justify-content: space-between !important;
    flex-direction: row !important; 
    flex-wrap: nowrap !important;
    margin-bottom: 10px;
    height: 60px;
}

.site-footer .social-icons {
    display: flex;
    align-items: center;
    flex: 0 0 auto !important;
    align-self: center !important;
}

.site-footer .social-icon {
    margin: 0;
    position: relative;
}

.site-footer .social-icon:not(:last-child) {
    margin-right: 30px;
}
/* Add divider between social icons */
.site-footer .social-icon:not(:last-child)::after {
    content: "|";
    display: inline-block;
    color: var(--color-yellow);
    font-size: var(--font-size-card-title);
    font-weight: 300;
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
}

.site-footer .social-icon a {
    display: block;
}

.site-footer .social-icon img {
    width: 25px;
    height: 25px;
    transition: all 0.25s ease-in-out;
}

.site-footer .social-icon:hover img {
    opacity: 0.8;
}

.site-footer .footer-menu {
    flex: 1 !important;
    margin-right: 20px !important;
}

.site-footer .footer-menu .footer-menu-items {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 20px 0 0 0;
    justify-content: flex-start;
}

.site-footer .footer-menu .footer-menu-items li {
    padding: 0 5% 0 0;
}

.site-footer .footer-menu .footer-menu-items li:last-child {
    padding-right: 0;
}

.site-footer .footer-menu .footer-menu-items li a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--font-size-footer-links);
    line-height: var(--font-lh-footer-links);
    opacity: 1;
    transition: opacity 0.15s ease-in-out;
    white-space: nowrap;
}

.site-footer .footer-menu .footer-menu-items li a:hover {
    opacity: 0.75;
}

/* Footer bottom section */
.site-footer .footer-bottom {
    margin-top: 0;
    padding-top: 0;
    height: auto;
    margin-bottom: 20px;
}

.site-footer .footer-divider {
    border-top: 1px solid white;
    margin-bottom: 30px;
}

.site-footer .footer-bottom .wp-block-columns {
    margin-bottom: 0 !important;
    align-items: flex-start !important;
    gap: 0;
}

.site-footer .footer-logo-column {
    flex: 0 0 25% !important;
    width: 25% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.site-footer .footer-logo img {
    width: 204px;
    height: auto;
}

.site-footer .footer-info {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    margin-left: 0 !important;
    padding-left: 0;
    margin-top: 30px;
}

.site-footer .footer-info p sup{
    font-size: 100%;
    bottom: .5ex;
}

.site-footer .footer-copyright {
    font-family: var(--font-family-poppins);
    font-weight: 500;
    font-size: var(--font-size-footer-body);
    line-height: var(--font-lh-footer-body);
    color: white;
    text-align: right;
    margin: 0;
}

@media all and (max-width: 1599px) {
    .site-footer .footer-badge-column {
        margin-right: 0px !important;
    }

    .site-footer .site-footer-inner {
        padding: 0 10%;
    }

    .site-footer .footer-badge {
        position: relative;
        width: 275px;
        height: 228px;
    }

    .site-footer .footer-badge img#balloon-badge {
        width: 60px;
        top: 40px;
    }

    .site-footer .badge-subheadline {
        left: 105px;
    }

    .site-footer .footer-info {
        margin-top: 10px;
    }
    
}

/* Responsive adjustments */
@media all and (max-width: 1023px) {
    
    .site-footer .wp-block-columns {
        flex-direction: column;
    }
    
    .site-footer .footer-badge-column {
        margin-right: 0;
        margin-bottom: 20px;
        align-self: center;
        flex-basis: 227px !important;
    }
    
    .site-footer .footer-content-column {
        width: 100%;
    }

    .site-footer .footer-info {
        width: 100% !important;
    }
}

@media all and (max-width: 768px) {
    .site-footer {
        padding: 40px 0 220px;
    }

    .site-footer .footer-badge {
        margin: 0 auto;
    }
    
    .site-footer .wp-block-columns {
        flex-wrap: wrap !important;
    }
    
    .site-footer .footer-badge-column,
    .site-footer .footer-content-column {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
    
    .site-footer .footer-badge-column {
        margin-right: 0 !important;
        margin-bottom: 20px !important;
        display: none;
    }
    
    .site-footer .footer-top {
        flex-direction: column !important;
        height: auto !important;
    }
    
    .site-footer .footer-menu {
        margin-right: 0 !important;
        margin-top: 20px !important;
    }
    
    .site-footer .footer-menu .footer-menu-items {
        flex-direction: column;
        align-items: center;
        margin-top: -50px;
    }
    
    .site-footer .footer-menu .footer-menu-items li {
        padding: 20px 0;
    }
    
    .site-footer .social-icons {
        align-self: center !important;
        margin: 40px 0;
    }
    
    .site-footer .footer-bottom .wp-block-columns {
        flex-direction: column !important;
    }
    
    .site-footer .footer-logo-column {
        flex: 0 0 100% !important;
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    .site-footer .footer-content-column {
        flex: 0 0 100% !important;
        width: 100% !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .site-footer .footer-info {
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0;
    }

    .site-footer .footer-copyright {
        text-align: center;
    }
}.external-link-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.external-link-popup.is-active {
    display: flex;
}

.external-link-popup .popup-content {
    background-image: url('/wp-content/uploads/static/white-winged-popup-bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 780px;
    height: 316px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
    box-sizing: border-box;
}

.external-link-popup .popup-heading {
    color: var(--color-nav-gray);
    font-size: var(--font-size-popup-headline); /* 24px */
    line-height: var(--font-lh-popup-headline); /* 30px */
    font-weight: 700;
    margin: 0 0 15px 0;
}

.external-link-popup .popup-text {
    color: var(--color-nav-gray);
    font-size: var(--font-size-body);
    line-height: var(--font-lh-body);
    margin: 0 0 25px 0;
    max-width: 600px;
}

/* Template-specific content visibility */
.external-link-popup .patient-text {
    display: none;
}

.external-link-popup .hcp-text {
    display: inline;
}

/* Patient template overrides */
.page-template-page-deflatehae-patient .external-link-popup .patient-text {
    display: inline;
}

.page-template-page-deflatehae-patient .external-link-popup .hcp-text {
    display: none;
}

.external-link-popup .popup-buttons {
    display: flex;
    gap: 20px;
    margin: 0;
}

.external-link-popup .popup-yes .wp-block-button__link,
.external-link-popup .popup-no .wp-block-button__link {
    background-color: var(--color-yellow);
    color: var(--color-nav-gray);
    font-size: var(--font-size-button-primary);
    line-height: var(--font-lh-button-primary);
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 20px;
    border: 2px solid var(--color-yellow);
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-block;
    min-width: 140px;
}

.external-link-popup .popup-yes .wp-block-button__link:hover,
.external-link-popup .popup-no .wp-block-button__link:hover {
    background-color: var(--color-white);
    color: var(--color-yellow);
}

/* Responsive Design */
@media screen and (max-width: 900px) {
    .external-link-popup .popup-content {
        width: 90%;
        max-width: 780px;
        height: auto;
        min-height: 316px;
        background-size: cover;
        padding: 30px 20px;
    }
    
    .external-link-popup .popup-heading {
        font-size: 2.0rem; /* 20px */
        line-height: 2.6rem; /* 26px */
    }
    
    .external-link-popup .popup-text {
        font-size: 1.4rem; /* 14px */
        line-height: 1.8rem; /* 18px */
    }
}

@media screen and (max-width: 600px) {
    .external-link-popup .popup-content {
        padding: 25px 15px;
    }
    
    .external-link-popup .popup-buttons {
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }
    
    .external-link-popup .popup-yes .wp-block-button__link,
    .external-link-popup .popup-no .wp-block-button__link {
        width: 100%;
        min-width: auto;
    }
    
    .external-link-popup .popup-heading {
        font-size: 1.8rem; /* 18px */
        line-height: 2.2rem; /* 22px */
    }
}.form-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.form-popup.is-active {
    display: flex;
}

/* Prevent body scroll when popup is active */
body.popup-active {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

.form-popup .popup-content {
    padding: 40px;
    border-radius: 8px;
    max-width: 1500px;
    width: 100%;
    max-height: 95vh;
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

/* Override base form styles for popup */
.form-popup .configurable-form-outer-wrapper {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: transparent;
    position: relative;
    height: auto;
    min-height: 0;
    overflow: visible;
}

.form-popup .configurable-form-container {
    margin: 0;
    padding: 0;
    width: 100%;
    position: relative;
    height: auto;
    min-height: 0;
}

.form-popup .configurable-form-content {
    width: 100%;
    max-width: none;
    padding: 120px 40px 45px;
    margin: 0;
    position: relative;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    background-image: url('/wp-content/uploads/static/popup-bg-balloon.png');
    background-position: -150px 340px;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Override text colors for popup form */
.form-popup .configurable-form-content,
.form-popup .configurable-form-content p:not(.input-field),
.form-popup .configurable-form-content label:not(.input-field),
.form-popup .configurable-form-content span:not(.input-field),
.form-popup .configurable-form-content div:not(.form-input) {
    color: var(--color-nav-gray) !important;
}

/* Ensure subheading matches new color scheme */
.form-popup .configurable-form-subheading {
    color: var(--color-nav-gray);
}

/* Keep form field text colors consistent and add borders */
.form-popup .configurable-form-content input:not(.pv-btn),
.form-popup .configurable-form-content select,
.form-popup .configurable-form-content textarea {
    color: var(--color-nav-gray) !important;
    border: 1px solid var(--color-nav-gray) !important;
}

/* Style focus states */
.form-popup .configurable-form-content input:not(.pv-btn):focus,
.form-popup .configurable-form-content select:focus,
.form-popup .configurable-form-content textarea:focus {
    border: 1px solid var(--color-blue) !important;
    box-shadow: 0 0 3px var(--color-blue) !important;
}

/* Style error states */
.form-popup .configurable-form-content input:not(.pv-btn).form-error,
.form-popup .configurable-form-content select.form-error,
.form-popup .configurable-form-content textarea.form-error {
    border: 1px solid var(--color-red) !important;
    box-shadow: 0 0 3px var(--color-red) !important;
}

/* Style checkboxes specifically */
.form-popup .configurable-form-content input[type="checkbox"],
.form-popup .configurable-form-content input.input-field.checkbox {
    border: 1px solid var(--color-nav-gray) !important;
}

.form-popup .configurable-form-content input[type="checkbox"]:focus,
.form-popup .configurable-form-content input.input-field.checkbox:focus {
    outline: 1px solid var(--color-nav-gray);
    outline-offset: 1px;
}

/* Maintain button styling */
.form-popup .configurable-form-content #form-col4 .form-input input.pv-btn.sf-button {
    background-color: var(--color-yellow);
    border: 2px solid var(--color-yellow);
    color: var(--color-nav-gray);
}

.form-popup .configurable-form-content #form-col4 .form-input input.pv-btn.sf-button:hover {
    background-color: var(--color-red);
    color: var(--color-yellow) !important;
}

/* Make the form container scrollable */
.form-popup .configurable-form-content #salesforce-form-container {
    width: 100%;
    max-width: 1080px;
    max-height: calc(95vh - 250px); /* Account for header and padding */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 40px;
    margin: 0 auto;
}

/* Hide scrollbar but keep functionality */
.form-popup .configurable-form-content #salesforce-form-container {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.form-popup .configurable-form-content #salesforce-form-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Ensure form fields have proper spacing */
.form-popup .salesforce-form .form-col {
    padding: 0;
}

/* Ensure buttons and inputs maintain proper width */
.form-popup .salesforce-form .form-col .sf-form-field .form-input {
    width: 100%;
}

.form-popup .configurable-form-category-headline {
    position: absolute;
    z-index: 3;
    transform: translateY(-50%);
    background-color: var(--color-red);
    color: var(--color-white);
    top: 15px;
}

.popup-close-button {
    position: absolute;
    top: 60px;
    right: 8%;
    width: 50px;
    height: 50px;
    padding: 7.5px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.popup-close-button:hover {
    opacity: 0.7;
}

.popup-close-button img {
    width: 30px;
    height: 30px;
    display: block;
}

.form-popup .configurable-form-content a.form-link {
    color: var(--color-nav-gray);
}

.form-popup .configurable-form-content .configurable-form-success-headline {
    color: var(--color-nav-gray);
}

/* Responsive adjustments */
@media screen and (max-width: 1366px) {
    .form-popup .popup-content {
        max-width: 90%;
    }
}

@media screen and (max-width: 1024px) {
    .form-popup .configurable-form-content {
        background-position: -40px 450px;
    }
}

@media screen and (max-width: 768px) {
    .form-popup {
        padding: 0;
    }
    
    .form-popup .popup-content {
        padding: 10px;
        max-height: 90vh;
        height: 100%;
        overflow: visible;
        max-width: 100%;
    }

    .form-popup .configurable-form-content {
        padding: 120px 20px 45px;
        background-position: bottom left;
    }

    .form-popup .configurable-form-content #salesforce-form-container {
        max-height: calc(100vh - 200px);
        padding: 0 0 20px;
    }

    .form-popup .configurable-form-category-headline {
        top: -35px;
        transform: translateY(0); /* Reset transform on mobile */
        width: 80%;
        left: 50%;
        transform: translateX(-50%); /* Center horizontally */
    }

    .popup-close-button {
        width: 25px;
        height: 25px;
        top: 30px;
        right: 3%;
    }

    .popup-close-button img {
        width: 25px;
        height: 25px;
    }

    .form-popup .configurable-form-content .salesforce-form {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media screen and (max-width: 440px) {
    .form-popup .configurable-form-category-headline {
        width: 85%;
    }
}

/* Style form links in popup */
.form-popup .configurable-form-content .salesforce-form #form-col3 .legal-consent-container .sf-form-field p.pv-p.form-title a.form-link {
    color: var(--color-nav-gray);
    font-weight: bold;
    text-decoration: none;
}

.form-popup .configurable-form-content .salesforce-form #form-col3 .legal-consent-container .sf-form-field p.pv-p.form-title a.form-link:hover {
    color: var(--color-blue);
    text-decoration: underline;
}/* Stories Section Wrapper */
.stories-section-wrapper {
    width: 100%;
    background: var(--color-blue-gradient);
    position: relative;
    z-index: 4;
}

/* Stories Section Base */
.stories-section {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: -30px auto 0;
    padding: 0;
    overflow: visible;
}

/* Stories Content */
.stories-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 150px 0 0;
    text-align: center;
    position: relative;
    color: var(--color-white);
}

.stories-content .content-small {
    font-size: var(--font-size-story-small);
    line-height: var(--font-lh-story-small);
    margin: 0 0 20px;
    font-weight: 600;
}

.stories-content .content-medium {
    font-size: var(--font-size-story-medium);
    line-height: var(--font-lh-story-medium);
    margin: 0 0 20px;
    font-weight: 700;
}

.stories-content .content-large {
    font-size: var(--font-size-story-large);
    line-height: var(--font-lh-story-large);
    margin: 0 0 -35px;
    font-weight: 700;
}

/* Content Image Container */
.stories-content .content-image-container {
    position: relative;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.stories-content .content-image {
    margin: 0;
    width: 100%;
}

.stories-content .content-image img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

.stories-content .disclaimer-text {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    margin: 0;
    width: auto;
}

/* Overlay Button */
.stories-content .content-overlay-button {
    position: absolute;
    bottom: 140px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    margin: 0;
    width: auto;
    max-width: 600px;
}

.stories-content .content-overlay-button .wp-block-button {
    margin: 0;
    width: 100%;
}

.stories-content .content-overlay-button .wp-block-button__link {
    background-color: var(--color-white);
    color: var(--color-red);
    border: 2px solid var(--color-white);
    border-radius: 20px;
    font-weight: 600;
    padding: 7px 25px;
    text-decoration: none;
    transition: all 0.3s ease;
    width: 100%;
    white-space: nowrap;
}

.stories-content .content-overlay-button .wp-block-button__link:hover {
    background-color: var(--color-red);
    color: var(--color-white);
}

/* Responsive Styles */
@media screen and (max-width: 1024px) {
    .stories-content .content-small {
        font-size: 1.8rem;  /* 18px - 60% of 30px */
        line-height: 2.4rem; /* 24px - 60% of 40px */
    }
    
    .stories-content .content-medium {
        font-size: 6.0rem;  /* 60px - 60% of 100px */
        line-height: 6.6rem; /* 66px - 60% of 110px */
        margin: 0;
    }
    
    .stories-content .content-large {
        font-size: 13.2rem;  /* 132px - 60% of 220px */
        line-height: 13.8rem; /* 138px - 60% of 230px */
    }
}

@media screen and (max-width: 767px) {
    .stories-section {
        padding: 30px 0 0;
    }
    
    .stories-content {
        padding: 120px 0 80px;
    }
    
    .stories-content .content-small {
        font-size: 1.8rem;  /* 20px */
        line-height: 2.6rem; /* 30px */
        max-width: 260px;
        margin: 0 auto;
    }
    
    .stories-content .content-medium {
        font-size: 4.0rem;  /* 40px */
        line-height: 3.0rem; /* 46px */
        margin-top: 40px;
    }
    
    .stories-content .content-large {
        font-size: 6.2rem;  /* 88px */
        line-height: 8.0rem; /* 92px */
        white-space: nowrap;
    }

    /* Content Image Container */
    .stories-content .content-image-container {
        position: relative;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    
    .stories-content .content-image {
        margin: 0;
        width: 100%;
    }
    
    .stories-content .content-image img {
        max-width: 70%;
        margin: 0 auto;
        height: auto;
        vertical-align: bottom;
    }

    .stories-content .disclaimer-text {
        bottom: -78px;
        font-size: 1.4rem;
        white-space: nowrap;
    }
    
    .stories-content .content-overlay-button {
        bottom: -50px;
        max-width: 300px;
        width: 100%;
    }
    
    .stories-content .content-overlay-button .wp-block-button__link {
        font-size: var(--font-size-quote-attribution);
        line-height: 2.2rem;
        padding: 5px 10px;
        white-space: wrap;
    }
} /* Callout Styles */

/* Callout Row Container */
.callout-row-wrapper {
    width: 100%;
    background-color: var(--color-white);
    padding-top: var(--wp--preset--spacing--60);
    padding-bottom: var(--wp--preset--spacing--60);
}

.callout-row-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Center callouts in the row */
.callout-row {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.callout-row .wp-block-column {
    flex: 0 1 500px;
}

/* Individual Callout Block */
.callout-block {
    height: 100%;
    max-width: 600px;
    margin: 0 auto;
    background-color: transparent;
    box-shadow: none;
    margin-bottom: 0;
    overflow: visible;
    border-radius: 8px;
    padding: 0 40px 0 20px;
}

/* Callout columns layout - align items to bottom */
.callout-block .wp-block-columns {
    align-items: flex-end !important;
}

/* Left column with image */
.callout-block .wp-block-column:first-child {
    flex-basis: 30% !important;
}

/* Right column with title and button */
.callout-block .wp-block-column:last-child {
    flex-basis: 70% !important;
    align-self: flex-end !important;
}

/* Limit image width */
.callout-block .callout-image {
    max-width: 168px;
    margin: 0 auto;
    text-align: center;
}

.callout-block .callout-image img {
    width: 100%;
    height: auto;
    margin: 0 auto -40px;
}

/* Title and button column - align to bottom */
.callout-block .wp-block-column:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: flex-end !important;
    align-items: center;
    text-align: center;
}

/* Style the title */
.callout-block .callout-title {
    font-size: var(--font-size-callout-title);
    line-height: var(--font-lh-callout-title);
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 0;
    text-align: center;
}

/* Style the button */
.callout-block .callout-button {
    margin-top: 15px;
}

.callout-block .callout-button .wp-block-button__link {
    border-radius: 20px;
    font-weight: 600;
    background-color: var(--color-yellow);
    color: var(--color-nav-gray);
    border: 2px solid var(--color-white);
    padding: 7px 15px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.callout-block .callout-button .wp-block-button__link:hover {
    background-color: var(--color-nav-gray);
    color: var(--color-yellow);
}

.callout-left,
.callout-right {
    padding: 0 15px;
}

.callout-right {
    border-left: 1px solid var(--color-nav-gray);
}

/* Empty state styles for callout blocks */
.callout-block-empty {
    border-radius: 8px;
    padding: 40px;
    background-color: rgba(0, 0, 0, 0.05);
    font-style: italic;
    text-align: center;
}

/* Responsive Styles */
@media (max-width: 1365px) {
    .callout-block {
        max-width: 410px;
        padding: 20px;
    }

    .callout-block .wp-block-columns {
        flex-direction: column;
        align-items: center !important;
    }
    
    .callout-block .wp-block-column:first-child {
        flex-basis: auto !important;
        width: 100%;
        margin-bottom: 20px;
    }
    
    .callout-block .wp-block-column:last-child {
        flex-basis: auto !important;
        width: 100%;
    }
    
    .callout-block .callout-image {
        height: 168px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .callout-block .callout-image img {
        max-height: 100%;
        width: auto;
    }
    
    .callout-row .wp-block-column {
        margin-bottom: 30px;
    }
} 

/* Responsive Styles */
@media (max-width: 1024px) {
    .callout-row-wrapper {
        padding: 0;
    }

    .callout-row {
        flex-direction: column;
        padding: 0 20px;
    }
    
    .callout-row .wp-block-column {
        margin-bottom: 0px;
    }
    
    .callout-right {
        border-left: none;
        border-top: 1px solid var(--color-nav-gray);
        padding-top: 30px;
    }
} 

/* Responsive Styles */
@media (max-width: 768px) {
    .callout-block {
        padding: 20px 0;
    }

    .callout-row,
    .callout-row .wp-block-column{
        padding: 0;
    }
} /* Trade-off Cards Section */
.trade-off-cards-section {
    width: 100%;
    background-color: var(--color-white);
    padding: 155px 0;
    position: relative;
    overflow: hidden;
    background-image: url('/wp-content/uploads/static/blue-balloon-bg.png');
    background-size: 100% 100%;
    background-position: -130px 130px;
    background-repeat: no-repeat;
    border-bottom-left-radius: 300% 150px;
    border-bottom-right-radius: 300% 150px;
    clip-path: inset(0 0 -150px 0); /* Ensures the curved edge is visible */
    z-index: 3; /* Ensure this is lower than header z-index */

    .trade-off-cards-container {
        margin: 0 auto;
        padding: 250px 20px 0;
    }

    /* Section Title */
    .section-title {
        color: var(--color-red);
        font-size: var(--font-size-h2-bow);
        line-height: var(--font-lh-h2-bow);
        margin-bottom: 0px;
        text-align: center;
        font-weight: 600;
    }

    /* Card Wrapper */
    .trade-off-card-wrapper {
        margin: 60px 0 0;

        &:last-child {
            margin-bottom: 0;
        }
    }

    /* Shadow Wrapper */
    .trade-off-card-shadow-wrapper {
        position: relative;
        max-width: 1194px;
        margin: 0 auto;
        padding-bottom: 20px;
        filter: drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.2));
    }

    /* Trade-off Card */
    .trade-off-card {
        width: 100%;
        margin: 0 auto;
        padding: 0;
        background-color: var(--color-white);
        position: relative;
        display: flex;
        flex-direction: column;
        clip-path: var(--clip-path-smooth-bowl);
    }

    /* Remove old background containers */
    .card-top-bg,
    .card-bottom-bg {
        display: none;
    }

    /* Card Header */
    .card-header {
        padding: 70px 60px 20px;
        position: relative;
        z-index: 2;
    }

    .card-title {
        color: var(--color-red);
        font-size: var(--font-size-trade-off-card-title);
        line-height: var(--font-lh-trade-off-card-title);
        font-weight: 600;
        text-transform: uppercase;
        margin: 0;
        position: relative;
        padding-right: 30px;
        display: inline-block;

        &::after {
            content: '';
            position: absolute;
            right: -590px; /* This will be adjusted to extend to the end of card */
            bottom: 0;
            height: 1px;
            background-color: var(--color-red);
            width: 590px; /* This will be adjusted based on card width */
        }
    }

    /* Card Content */
    .card-content {
        background-color: var(--color-white);
        padding: 10px 40px 40px;
        position: relative;
        z-index: 2; /* Above the background images */
        flex: 1; /* Allow this section to expand */
    }

    .content-columns {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
    }

    .image-column {
        flex: 0 0 277px;
    }

    .column-image {
        width: 100%;
        height: auto;
        margin: 0;

        img {
            width: 100%;
            height: auto;
            display: block;
        }
    }

    .text-column-1,
    .text-column-2 {
        flex: 1;
    }

    .text-group {
        margin-bottom: 30px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .text-title {
        font-size: var(--font-size-body);
        line-height: var(--font-lh-body);
        color: var(--color-red);
        margin: 0 0 10px;
        font-weight: 600;
        text-transform: uppercase;
    }

    .text-description {
        font-size: var(--font-size-body);
        line-height: var(--font-lh-body);
        margin: 0;
        padding-right: 30px;
    }

    /* Card Footer */
    .card-footer {
        background-color: var(--color-nav-gray);
        padding: 30px 50px 0 90px;
        max-height: 178px;
        min-height: 178px;
        position: relative;
        z-index: 2; /* Above the background images */
        margin-top: 0px;
        margin-bottom: 60px; /* Increased to make room for bottom background */
    }

    .footer-columns {
        display: flex;
        align-items: flex-end;
        gap: 30px;
    }

    .footer-text-column {
        flex: 3;
    }

    .footer-image-column {
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .footer-quote {
        font-size: var(--font-size-trade-off-card-quote);
        line-height: var(--font-lh-trade-off-card-quote);
        color: var(--color-yellow);
        font-weight: 600;
        margin: 0 0 10px;
        position: relative;

        &::before {
            content: '';
            position: absolute;
            width: 16px;
            height: 14px;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url('/wp-content/uploads/static/opening-quotes-white.svg');
            left: -25px;
            top: 3px;
        }
    }

    /* Remove the ::after pseudo-element */
    .footer-quote::after {
        content: none;
    }

    /* Add a class for the closing quote span */
    .closing-quote {
        display: inline-block;
        width: 16px;
        height: 14px;
        background-image: url('/wp-content/uploads/static/closing-quotes-white.svg');
        background-size: contain;
        background-repeat: no-repeat;
        position: relative;
        top: -2px;
        margin-left: 6px;
    }

    .footer-citation {
        font-size: var(--font-size-trade-off-card-quote-attribution);
        line-height: var(--font-lh-trade-off-card-quote-attribution);
        color: var(--color-white);
        margin: 0;
    }

    .footer-image {
        margin: 0;
        position: absolute;
        bottom: 0;
        max-width: 227px;
        z-index: 3; /* Ensure it appears above the bottom background */

        img {
            display: block;
            width: 100%;
            height: auto;
        }
    }

    /* Reverse layout for second card footer */
    .card-footer.reverse .footer-columns {
        flex-direction: row-reverse;
    }

    @media screen and (max-width: 1024px) {

        .trade-off-cards-container {
            margin: 0 auto;
            padding: 30px 20px 0;
        }

        .card-title::after {
            right: -350px;
            width: 350px;
        }
    }

    @media screen and (max-width: 768px) {
        .trade-off-card-shadow-wrapper {
            filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.2));
        }
        .trade-off-card {
            clip-path: var(--clip-path-mobile-bowl);
        }

        .card-header {
            text-align: center;
        }

        .card-title {
            margin: 0 auto;
            padding-right: 0;

            &::after {
                display: none;
            }
        }
        
        .column-image {
            max-width: 190px;
            margin: 0 auto;
        }

        /* Center content elements */
        .content-columns {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .image-column {
            flex: none;
            width: 100%;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--color-red);
            margin-bottom: 20px;
        }

        .column-image {
            max-width: 190px;
        }

        .text-column-1,
        .text-column-2 {
            flex: none;
            width: 100%;
        }

        .text-title {
            font-size: 1.6rem;
            line-height: 2.2rem;
        }

        .text-description {
            font-size: 1.6rem;
            line-height: 2.2rem;
            padding-right: 0;
        }

        /* Card footer adjustments */
        .card-footer {
            padding: 30px 20px 0;
            max-height: none;
            margin-bottom: 80px;
        }

        .footer-columns {
            flex-direction: column !important;
            gap: 20px;
        }

        .footer-text-column {
            flex: none;
            width: 100%;
            order: 1;
        }

        .footer-image-column {
            flex: none;
            width: 100%;
            order: 2;
        }

        .footer-image {
            position: relative;
            max-width: 270px;
            margin: 0 auto;
            bottom: 0;
        }

        /* Footer quote adjustments */
        .footer-quote {
            padding: 30px 0;
            border-top: 1px solid var(--color-white);
            border-bottom: 1px solid var(--color-white);
            margin-top: 20px;
            font-size: 1.8rem;
            line-height: 2.4rem;
            font-weight: 700;
            text-align: center;

            &::before {
                left: 50%;
                transform: translateX(-50%);
                top: -10px;
                padding: 0 30px 0 30px;
                background-color: var(--color-nav-gray);
                background-size: 16px 14px;
                background-position: center;
                margin: 0 auto;
            }

            &::after {
                content: '';
                position: absolute;
                width: 16px;
                height: 14px;
                background-size: 16px 14px;
                background-repeat: no-repeat;
                background-image: url('/wp-content/uploads/static/closing-quotes-white.svg');
                background-size: contain;
                background-repeat: no-repeat;
                padding: 0 30px 0 30px;
                background-position: center;
                margin: 0 auto;
                background-color: var(--color-nav-gray);
                left: 50%;
                transform: translateX(-50%);
                bottom: -10px;
            }
        }

        .footer-citation {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            text-align: center;
            margin-top: 20px;
            font-size: 1.6rem;
            line-height: 2.6rem;

            span {
                display: block;
            }
        }

        .closing-quote {
            display: none !important;
        }
        
        .footer-columns {
            margin-bottom: 0;
        }

        .card-footer {
            margin-bottom: 40px;
        }

        /* Force reverse layout to follow same order */
        .card-footer.reverse .footer-columns {
            flex-direction: column !important;
        }

        .card-footer.reverse .footer-text-column {
            order: 1;
        }

        .card-footer.reverse .footer-image-column {
            order: 2;
        }
    }

    /* Override WordPress core column stacking */
    @media screen and (min-width: 769px) {
        .content-columns,
        .footer-columns {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            gap: 30px !important;
        }

        .image-column {
            flex: 0 0 277px !important;
            width: 277px !important;
            max-width: 277px !important;
        }

        .footer-image-column {
            flex: 0 0 150px !important;
            width: 150px !important;
            max-width: 150px !important;
        }

        .text-column-1,
        .text-column-2,
        .footer-text-column {
            flex: 1 1 0% !important;
            width: auto !important;
        }
    }
} /* Balloon Animation Styles - Properly Scoped */
.balloon-animation-wrapper {
    width: 100%;
    background-color: var(--color-bg-gray);
    padding: 100px 0 0;
    margin-top: -25px;

    .balloon-animation-container {
        max-width: 1300px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .balloon-animation-content {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 40px;
    }

    /* Left Column - Balloon Animation */
    .balloon-animation-left {
        flex: 1;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        min-height: 600px; /* Ensure sufficient height for animation */
    }

    .balloon-girl-image {
        position: relative;
        z-index: 2;
        margin: 0;
        max-width: 500px;
    }

    .balloon-animation {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        pointer-events: none;
    }

    /* Balloon styling - for direct image elements */
    .balloon {
        position: absolute;
        width: 475px;
        max-width: 475px;
        height: auto;
        max-height: 1200px;
        pointer-events: none;
        z-index: 1;
        object-fit: contain;
        transform-origin: center bottom; /* Ensure animation pivots from bottom */
        transition: opacity 0.3s ease; /* Smooth opacity transitions */
        image-rendering: -webkit-optimize-contrast; /* Improve image quality */
        image-rendering: crisp-edges;
        -webkit-backface-visibility: hidden; /* Reduce flickering */
        backface-visibility: hidden;
        will-change: transform, opacity; /* Optimize for animation */
    }

    #blue-balloon {
        top: -50px;
        left: 55px;
    }

    #red-balloon {
        top: -40px;
        left: 55px;
    }

    #yellow-balloon {
        top: -40px;
        left: 55px;
    }

    /* Balloon dots styling - for separate elements */
    .dot {
        position: absolute;
        width: 65px;
        height: 65px;
        cursor: pointer;
        z-index: 20;
        transition: transform 0.3s ease, opacity 0.3s ease;
        pointer-events: auto;
        will-change: transform, opacity; /* Optimize for animation */
    }

    .dot img {
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    .dot:hover {
        transform: scale(1.1);
    }

    #blue-dot {
        top: 145px;
        left: 265px;
    }

    #red-dot {
        top: 25px;
        left: 150px;
    }

    #yellow-dot {
        top: 25px;
        left: 370px;
    }

    /* Right Column - Content */
    .balloon-animation-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-bottom: 60px;
    }

    /* Title styling */
    .balloon-title-container {
        text-align: center;
        margin-bottom: 20px;
    }

    .balloon-title {
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-weight: 600;
    }

    .balloon-title .small {
        display: block;
        font-size: var(--font-size-balloon-title-small);
        line-height: var(--font-lh-balloon-title-small);
        margin: 0;
    }

    .balloon-title .big {
        font-size: var(--font-size-balloon-title-big);
        line-height: var(--font-lh-balloon-title-big);
        font-weight: 700;
        position: relative;
        margin: 0;
        padding: 0 15px;
        color: var(--color-red);
        text-transform: uppercase;
    }

    .balloon-title .big .balloon-border-top,
    .balloon-title .big .balloon-border-bottom{
        max-width: 600px;
        width: 100%;
        margin-bottom: 10px;
        color: var(--color-blue);
    }

    .balloon-title .big::before,
    .balloon-title .big::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 8px;
        color: var(--color-blue);
    }

    .balloon-title .big::before {
        top: -15px;
    }

    .balloon-title .big::after {
        bottom: -15px;
    }

    .balloon-subtitle {
        font-size: var(--font-size-body);
        line-height: var(--font-lh-body);
        margin: 30px 0 0;
        font-style: italic;
        font-weight: 600;
    }

    .disclaimer-text {
        display: none;
    }

    /* Buttons styling */
    .balloon-buttons {
        display: flex;
        justify-content: center;
        margin: 40px 0;
    }

    .wp-block-buttons {
        display: flex;
        gap: 15px;
        justify-content: center;
    }

    .balloon-button {
        margin: 0 10px;
    }

    .balloon-button a.wp-block-button__link {
        padding: 12px 25px;
        border-radius: 25px;
        font-weight: 600;
        font-size: var(--font-size-button-small);
        line-height: var(--font-lh-button-small);
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        color: white;
        background-color: var(--color-red);
        border: 2px solid var(--color-red);
    }

    .balloon-button a.wp-block-button__link:hover,
    .balloon-button a.wp-block-button__link.active {
        background-color: var(--color-white);
        color: var(--color-red);
    }

    /* Text block styling */
    .balloon-text-block {
        position: relative;
        margin: 0 0 30px;
        height: 200px;
        width: 625px;
        z-index: 2;
    }

    .balloon-text-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        margin: 0;
    }

    .balloon-text-background img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .balloon-text-content {
        position: relative;
        z-index: 2;
        padding: 30px 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        min-height: 120px;
    }

    .balloon-text {
        font-size: var(--font-size-balloon-redbox-text);
        line-height: var(--font-lh-balloon-redbox-text);
        color: var(--color-white);
        text-align: center;
        font-weight: 600;
        margin: 0;
        padding: 0 10px;
        display: none;
        transition: opacity 0.3s ease;
    }

    .balloon-text.active {
        display: block;
        animation: balloonFadeIn 0.3s ease;
    }

    @keyframes balloonFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* Component-specific text classes - properly prefixed */
    .balloon-text-default,
    .balloon-text-blue,
    .balloon-text-red,
    .balloon-text-yellow,
    .balloon-button-left-text,
    .balloon-button-middle-text,
    .balloon-button-right-text {
        max-width: 800px;
        margin: 0 auto;
    }

    .balloon-text-yellow{
        padding: 0 30px;
    }
    .balloon-text-blue{
        padding: 0 30px;
    }
    .balloon-text-red{
        padding: 0 40px;
    }
    .balloon-button-left-text{
        padding: 0 40px;
    }
    .balloon-button-middle-text{
        padding: 0 110px;
    }
    .balloon-button-right-text{
        padding: 0 60px
    }

    /* Footer text styling */
    .balloon-footer-text {
        position: relative;
        margin: -40px auto 0;
        width: 525px;
        height: 170px;
        font-size: var(--font-size-balloon-yellowbox-text);
        line-height: var(--font-lh-balloon-yellowbox-text);
    }

    .balloon-footer-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        margin: 0;
    }

    .balloon-footer-background img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .balloon-footer-content {
        position: relative;
        z-index: 2;
        padding: 20px 50px;
        text-align: center;
        font-size: var(--font-size-interactive-body);
        line-height: var(--font-lh-interactive-body);
        font-weight: 600;
        color: var(--color-nav-gray);
        margin-top: 20px;
    }

    @media (max-width: 1599px) {

        .balloon-title .small {
            font-size: 2.2rem;
            line-height: 3.2rem;
        }
    
        .balloon-title .big {
            font-size: 3.4rem;
            line-height: 4.2rem;
        }

        .balloon-animation-left {
            min-height: unset;
        }

        .balloon-animation-container{
            max-width: 1100px;
        }

        .balloon-girl-image{
            min-width: 490px;
        }

        #blue-balloon {
            top: -110px;
            left: 5px;
        }
    
        #red-balloon {
            top: -100px;
            left: 5px;
        }
    
        #yellow-balloon {
            top: -100px;
            left: 5px;
        }

        .dot {
            width: 55px;
            height: 55px;
        }
    
        #blue-dot {
            top: 95px;
            left: 220px;
        }
    
        #red-dot {
            top: -25px;
            left: 110px;
        }
    
        #yellow-dot {
            top: -25px;
            left: 330px;
        }

        /* Add responsive widths for text blocks while maintaining aspect ratio */
        .balloon-text-block {
            width: 525px;
            /* Remove fixed height to maintain aspect ratio */
            height: auto;
            aspect-ratio: 625/200;
        }

        .balloon-footer-text {
            width: 450px;
            /* Remove fixed height to maintain aspect ratio */
            height: auto;
            aspect-ratio: 525/170;
        }

        .balloon-footer-content{
            margin-top: 10px;
        }

        .balloon-buttons{
            margin: 20px 0;
        }

        .balloon-text {
            font-size: 1.8rem;
            line-height: 2.6rem;
        }
        .balloon-footer-content{
            font-size: 1.6rem;
            line-height: 2.4rem;
        }
    }

    @media (max-width: 1366px) {

        .balloon-title .small {
            font-size: 2.0rem;
            line-height: 2.0rem;
        }
    
        .balloon-title .big {
            font-size: 3.0rem;
            line-height: 3.5rem;
        }

        .balloon-subtitle{
            font-size: 1.6rem;
        }

        .balloon-animation-container{
            max-width: 1000px;
        }

        .balloon-girl-image{
            max-width: 390px;
            min-width: 390px;
        }

        /* Scale down balloons proportionally */
        .balloon {
            width: 350px;
            max-width: 350px;
        }

        #blue-balloon {
            top: -45px;
            left: 55px;
        }
    
        #red-balloon {
            top: -35px;
            left: 55px;
        }
    
        #yellow-balloon {
            top: -35px;
            left: 55px;
        }

        /* Scale down dots and adjust positions */
        .dot {
            width: 40px;
            height: 40px;
        }
    
        #blue-dot {
            top: 105px;
            left: 210px;
        }
    
        #red-dot {
            top: 10px;
            left: 130px;
        }
    
        #yellow-dot {
            top: 10px;
            left: 300px;
        }

        /* Scale down text blocks proportionally */
        .balloon-title .big{
            margin: 0;
        }

        .balloon-text-block {
            width: 400px;
            margin: 0 auto;
        }

        .balloon-text{
            font-size: 1.4rem;
            line-height: 2.2rem;
        }

        .balloon-footer-text {
            width: 350px;
        }

        .wp-block-buttons {
            gap: 0;
        }

        .balloon-button a.wp-block-button__link{
            padding: 8px 20px;
        }

        .balloon-footer-content {
            padding: 45px 40px;
            font-size: 1.2rem;
            line-height: 2.0rem;
        }

        /* Adjust gap between columns */
        .balloon-animation-content {
            gap: 30px;
        }
    }

    @media (max-width: 1023px) {

        .balloon-title .small {
            font-size: 1.8rem;
            line-height: 1.8rem;
        }
    
        .balloon-title .big {
            font-size: 2.4rem;
            line-height: 2.4rem;
            margin: 10px 0 0;
        }

        .balloon-title .big .balloon-border-bottom{
            margin-top: 20px;
        }

        .balloon-subtitle{
            font-size: 1.2rem;
            margin-top: 15px;
        }

        .balloon-animation-container{
            max-width: 700px;
        }

        .balloon-animation-right{
            padding-bottom: 0;
        }

        .balloon-girl-image{
            max-width: 300px;
            min-width: 300px;
        }

        /* Scale down balloons proportionally */
        .balloon {
            width: 300px;
            max-width: 300px;
        }

        #blue-balloon {
            top: -45px;
            left: 0px;
        }
    
        #red-balloon {
            top: -35px;
            left: 0px;
        }
    
        #yellow-balloon {
            top: -35px;
            left: 0px;
        }

        /* Scale down dots and adjust positions */
        .dot {
            width: 35px;
            height: 35px;
        }
    
        #blue-dot {
            top: 85px;
            left: 135px;
        }
    
        #red-dot {
            top: 10px;
            left: 65px;
        }
    
        #yellow-dot {
            top: 10px;
            left: 205px;
        }

        /* Scale down text blocks proportionally */

        .balloon-text-block {
            width: 350px;
            margin: 0 auto;
        }

        .balloon-text{
            font-size: 1.1rem;
            line-height: 1.8rem;
        }

        .balloon-footer-text {
            width: 300px;
            margin-top: -45px;
        }

        .balloon-button a.wp-block-button__link{
            padding: 8px 16px;
        }

        .balloon-footer-content {
            padding: 45px 40px;
            font-size: 1.0rem;
            line-height: 1.7rem;
        }

        /* Adjust gap between columns */
        .balloon-animation-content {
            gap: 30px;
        }
    }

    /* Hide mobile elements above 767px */
    .balloon-mobile-image,
    .balloon-mobile-nav-container {
        display: none;
    }

    @media (max-width: 767px) {
        .balloon-animation-wrapper {
            padding: 50px 0 0;
        }

        .balloon-animation-container {
            max-width: 100%;
            padding: 0;
        }

        .balloon-animation-content {
            flex-direction: column;
            gap: 20px;
        }

        .balloon-animation-left {
            display: none;
        }

        .balloon-animation-right {
            width: 100%;
            padding-bottom: 30px;
            position: relative;
        }

        .balloon-title-container {
            position: relative;
        }

        .balloon-title .small.mobile-short{
            padding: 0 100px;
        }

        .balloon-title .small {
            font-size: 1.8rem;
            line-height: 2.4rem;
        }

        .balloon-title .big {
            font-size: 2.6rem;
            line-height: 3.2rem;
            margin: 5px 0;
        }

        .balloon-subtitle {
            display: none;
        }

        .disclaimer-text {
            display: block;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: -30px;
            font-size: 1.0rem;
            line-height: 1.4rem;
        }

        .balloon-buttons {
            display: none;
        }

        /* Mobile-only elements */
        .balloon-mobile-image {
            position: relative;
            width: 100%;
            max-width: 250px;
            margin: 0 auto;
            display: block;
        }

        .balloon-mobile-image img {
            width: 100%;
            height: auto;
            opacity: 0;
            position: relative;
            top: 0;
            left: 0;
            transition: opacity 0.3s ease;
        }

        .balloon-mobile-image img.active {
            opacity: 1;
        }

        .balloon-mobile-image img.default {
            position: relative;
            opacity: 1;
        }

        /* Mobile navigation container - two dropdowns side by side */
        .balloon-mobile-nav-container {
            display: flex;
            position: relative;
            width: 95%;
            max-width: 500px;
            left: 50%;
            transform: translateX(-50%);
            bottom: 30px;
            z-index: 10;
            gap: 8px;
        }

        /* Responsive adjustments for smaller mobile screens */
        @media (max-width: 480px) {
            .balloon-mobile-nav-container {
                width: 100%;
                gap: 5px;
            }
            
            .balloon-mobile-nav-btn {
                font-size: 1.2rem;
                padding: 10px 12px;
            }
            
            .balloon-mobile-nav-option {
                font-size: 1.2rem;
                padding: 10px 12px;
            }
        }

        /* Individual dropdown styling */
        .balloon-mobile-nav {
            flex: 1;
            position: relative;
            background-color: var(--color-yellow);
            display: flex;
        }

        .balloon-mobile-nav-btn {
            display: none;
            width: 100%;
            padding: 5px 10px;
            min-height: 44px;
            background: none;
            border: none;
            color: var(--color-white);
            font-size: 1.4rem;
            line-height: 1.6rem;
            text-align: center;
            cursor: pointer;
        }

        .balloon-mobile-nav-btn.active {
            display: block;
            background: none;
            border: none;
            box-shadow: none;
            color: var(--color-red);
            position: relative;
            padding-right: 30px;
        }

        /* Dropdown arrow */
        .balloon-mobile-nav-btn.active::after {
            content: '';
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid var(--color-red);
        }

        /* Open dropdown state */
        .balloon-mobile-nav.open {
            height: 44px;
        }

        /* Dropdown options container */
        .balloon-mobile-nav-options {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background-color: var(--color-red);
            border-radius: 4px;
            margin-top: 1px;
            flex-direction: column;
            z-index: 15;
        }

        .balloon-mobile-nav.open .balloon-mobile-nav-options {
            display: flex;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        }

        .balloon-mobile-nav-option {
            display: block;
            position: relative;
            text-align: center;
            padding: 12px 15px;
            color: var(--color-white);
            font-size: 1.4rem;
            line-height: 1.8rem;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .balloon-mobile-nav-option:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .balloon-mobile-nav-option.active {
            display: none;
        }

        .balloon-text-block {
            width: 100%;
            margin-top: -50px;
            background-color: var(--color-red);
        }

        .balloon-text-background{
            display: none;
        }

        .balloon-text-content{
            max-width: 350px;
            min-height: 156px;
            margin: 0 auto;
            padding: 30px 0;
        }

        .balloon-text {
            font-size: 1.6rem;
            line-height: 2.4rem;
            padding: 0 15px;
        }

        .balloon-footer-text {
            width: 80%;
            margin: -30px auto 0;
            background-color: var(--color-yellow);
            clip-path: var(--clip-path-mobile-headline);
        }

        .balloon-footer-background{
            display: none;
        }

        .balloon-footer-content {
            padding: 50px 20px 20px;
            font-size: 1.4rem;
            line-height: 2.0rem;
        }
    }
}
/* Facts Floating Section Styles */
/* Base styles without viewport-responsive scaling */
.facts-floating-wrapper {
    width: 100%;
    background-color: var(--color-yellow);
    padding: 100px 0;
    position: relative;
}

.facts-content {
    width: 100%;
    max-width: 1194px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    padding: 120px 40px 100px 120px;
    position: relative;
    background-color: var(--color-white);
    clip-path: var(--clip-path-fixed-bowl);
}

/* Background Image Variant */
.facts-floating-wrapper.with-background-image {
    background-color: var(--color-white);
    background-image: url('/wp-content/uploads/static/blue-balloon-bg.png');
    background-size: 2000px 2000px;
    background-repeat: no-repeat;
    background-position: -220px -770px;
}

/* Allow inline style override for background image */
.facts-floating-wrapper[style*="background-image"] {
    background-color: var(--color-white);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

.facts-floating-container {
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    filter: drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.5));
}

/* Headline Styles */
.facts-headline-container {
    position: absolute;
    top: -20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-red);
    clip-path: var(--clip-path-mobile-headline);
    z-index: 2;
    padding: 20px 60px;
    margin: 0 0 100px 0;
}

.facts-headline {
    margin: 0;
    color: var(--color-white);
    font-size: var(--font-size-floating-card-bow-text);
    line-height: var(--font-lh-floating-card-bow-text);
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    padding-bottom: 5px; /* Small adjustment to visually center */
}

.facts-row {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
}

.fact-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
    width: 100%;
}

.fact-icon {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 91px; /* Match the largest icon size */
    flex-shrink: 0;
}

.fact-icon img {
    max-width: 91px;
    max-height: 91px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.fact-text {
    margin: 0 0 10px;
    font-size: var(--font-size-body);
    line-height: var(--font-lh-body);
    color: var(--color-text);
    flex-grow: 1;
}

.fact-item .wp-block-list,
.fact-item ul {
    margin: 0;
    list-style: none; /* Remove default bullets */
    padding-left: 0;
    text-align: left;
}

.fact-item .wp-block-list li,
.fact-item ul li {
    position: relative;
    padding-left: 20px; /* Space for custom bullet */
}

.fact-item .wp-block-list li::before,
.fact-item ul li::before {
    content: "•";
    color: var(--color-red);
    font-weight: bold;
    position: absolute;
    left: 0px; /* Position bullet to the left - adjust this value */
    top: 0;
}

/* Keep the ::marker rule in case some browsers still show it */
.fact-item .wp-block-list li::marker,
.fact-item ul li::marker {
    color: var(--color-red);
}

/* Responsive Styles */
@media screen and (min-width: 1600px) {
    /* Viewport-Responsive Facts Custom Properties */
    :root {
        --facts-content-height-min: 600px;
        --facts-content-height-preferred: 70vh;
        --facts-content-height-max: 746px;
        --facts-content-width-min: 900px;
        --facts-content-width-preferred: 80vw;
        --facts-content-width-max: 1194px;
        --facts-padding-top-min: 100px;
        --facts-padding-top-preferred: 10vh;
        --facts-padding-top-max: 136px;
        --facts-padding-bottom-min: 80px;
        --facts-padding-bottom-preferred: 8vh;
        --facts-padding-bottom-max: 109px;
    }

    .facts-floating-wrapper {
        padding: clamp(var(--facts-padding-top-min), var(--facts-padding-top-preferred), var(--facts-padding-top-max)) 0 
                clamp(var(--facts-padding-bottom-min), var(--facts-padding-bottom-preferred), var(--facts-padding-bottom-max));
    }

    .facts-content {
        width: clamp(var(--facts-content-width-min), var(--facts-content-width-preferred), var(--facts-content-width-max));
        height: clamp(var(--facts-content-height-min), var(--facts-content-height-preferred), var(--facts-content-height-max));
        gap: clamp(30px, 4vh, 60px);
    }
}

@media screen and (max-width: 1599px) {

    .facts-headline-container{
        height: 82px;
    }
    .facts-content {
        max-width: 1000px;
        min-height: 550px;
        gap: 40px;
        padding: 90px 100px;
    }
}

@media screen and (max-width: 1365px) {

    .facts-headline-container{
        height: 72px;
    }
    .facts-content {
        max-width: 900px;
        min-height: 500px;
        gap: 35px;
        padding: 80px 90px;
    }
}

@media screen and (max-width: 1024px) {

    .facts-headline-container{
        top: -30px;
    }
    .facts-floating-wrapper {
        padding: 60px 0;
    }

    .facts-content {
        max-width: 800px;
        min-height: 450px;
        gap: 30px;
        padding: 70px 60px;
        clip-path: var(--clip-path-mobile-bowl);
    }

    .fact-icon {
        min-width: 75px;
    }

    .fact-icon img {
        max-width: 75px;
        max-height: 75px;
    }
}

@media screen and (max-width: 767px) {
    .facts-floating-wrapper.with-background-image {
        background-image: none;
    }

    .facts-floating-container {
        padding: 0;
    }
    .facts-floating-wrapper {
        padding: 60px 0;
    }

    .facts-content {
        width: 100%;
        min-height: auto;
        gap: 25px;
        padding: 140px 40px;
        margin: 0 20px;
        background-size: cover;
    }

    .fact-item {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .fact-icon {
        min-width: 90px;
    }

    .fact-icon img {
        max-width: 90px;
        max-height: 90px;
    }
}/* Types Floating Section Styles */
.types-floating-wrapper {
    width: 100%;
    background-color: var(--color-white);
    padding: 360px 0 0;
    position: relative;
}

/* Intro text above the floating container */
.types-floating-wrapper .types-intro-text {
    max-width: 1080px;
    margin: 0 auto 190px;
    padding: 0 20px;
    text-align: center;
    font-size: var(--font-size-h2-bow);
    line-height: var(--font-lh-h2-bow);
    font-weight: 600;
    z-index: 2;
    position: relative;
}

.types-floating-wrapper .types-floating-container {
    margin: 0 auto;
    padding: 0 0 130px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Content container with curved treatment */
.types-floating-wrapper .types-content {
    width: 1440px;
    position: relative;
    background: var(--color-blue-gradient-extended);
    padding: 100px 0 80px;
    margin-top: -100px;
    margin: -100px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    color: var(--color-white);
    clip-path: var(--clip-path-smooth-bowl);
}

/* Headline container with curved treatment - positioned to overlap content */
.types-floating-wrapper .types-headline-container {
    width: 840px;
    background-color: var(--color-red);
    text-align: center;
    padding: 30px 40px;
    position: absolute;
    top: -140px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    clip-path: var(--clip-path-headline-bowl);
}

.types-floating-wrapper .types-headline {
    margin: 0;
    color: var(--color-white);
    font-size: var(--font-size-h2-bow-large);
    line-height: var(--font-lh-h2-bow-large);
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
}

/* Column layout for the types */
.types-floating-wrapper .types-columns {
    display: flex;
    justify-content: space-between;
    gap: 0;
    margin-bottom: 20px;
    max-width: 1280px;
    width: 100%;
}

.types-floating-wrapper .type-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 25px; /* Adding 25px top padding as requested */
}

/* Type title - 30px headline */
.types-floating-wrapper .type-title {
    font-size: var(--font-size-types-floating-title);
    line-height: var(--font-lh-types-floating-title);
    font-weight: 600;
    margin: 0 0 30px;
    color: var(--color-white);
    position: relative;
    height: 60px; /* Fixed height for vertical alignment */
    display: flex;
    align-items: center;
    justify-content: center; /* Center text vertically */
}

/* Icon styles */
.types-floating-wrapper .type-icon {
    margin: 20px 0 5px 0; /* 25px top margin as requested, keeping your bottom margin */
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    height: 91px; /* Fixed height for vertical alignment */
    width: 91px; /* Fixed width for consistent sizing */
}

/* Custom top border using the yellow-custom-border.svg */
.types-floating-wrapper .type-icon::before {
    content: "";
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 168px;
    height: 3px;
    background-image: url('/wp-content/uploads/static/yellow-custom-border.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.types-floating-wrapper .type-icon img {
    max-width: 91px;
    height: auto;
    object-fit: contain;
}

/* Subtitle - 24px text under the icon */
.types-floating-wrapper .type-subtitle {
    font-size: var(--font-size-types-floating-subtitle);
    line-height: var(--font-lh-types-floating-subtitle);
    font-weight: 600;
    margin: 15px 0 20px 0; /* 15px top margin as requested, keeping your bottom margin */
    color: var(--color-white);
    height: 50px; /* Fixed height for vertical alignment */
    display: flex;
    align-items: center;
    justify-content: center; /* Center text vertically */
}

/* Type text - body copy */
.types-floating-wrapper .type-text {
    font-size: var(--font-size-body);
    line-height: var(--font-lh-body);
    color: var(--color-white);
    margin: 30px auto 0; /* 30px top margin as requested */
    max-width: 250px;
}

/* Footer styles - gray container with two paragraphs */
.types-floating-wrapper .types-footer {
    background-color: var(--color-nav-gray);
    padding: 40px;
    width: 100%;
}

.types-floating-wrapper .types-footer .footer-text {
    font-size: var(--font-size-body);
    line-height: var(--font-lh-body);
    font-weight: 600;
    color: var(--color-white);
    margin: 0 0 20px;
    text-align: center;
}

.types-floating-wrapper .types-footer .footer-text:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 1599px) {
    .types-floating-wrapper .types-content {
        clip-path: var(--clip-path-smooth-bowl);
    }
    .types-floating-wrapper .types-headline-container {
        width: 750px;
        top: -130px;
        clip-path: var(--clip-path-headline-bowl);
    }
}

@media screen and (max-width: 1024px) {
    .types-floating-wrapper {
        padding: 200px 0 0;
    }
    .types-floating-wrapper .types-headline-container {
        width: 550px;
        top: -110px;
        padding: 30px 0;
        clip-path: var(--clip-path-headline-bowl);
    }
    .types-floating-wrapper .types-columns {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    .types-floating-wrapper .type-title{
        margin: 0 0 15px;
        height: auto;
    }
    .types-floating-wrapper .type-text{
        margin: 5px auto 0;
    }
}

@media screen and (max-width: 768px) {
    .types-floating-wrapper .types-content {
        margin: -100px 5%;
        clip-path: var(--clip-path-mobile-bowl);
    }
    .types-floating-wrapper .types-headline-container {
        width: 240px;
        padding: 25px 0;
        top: -130px;
        clip-path: var(--clip-path-mobile-headline);
    }
}/* Blue Outline Headline Styles */
.blue-outline-headline-wrapper {
    width: 100%;
    padding: 60px 0;
    background-color: var(--color-white);
    z-index: 2;
    position: relative;
}

.blue-outline-headline-wrapper.under-curve {
    padding: 120px 0 60px;
    margin-top: -25px;
}

.blue-outline-headline-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.blue-outline-headline-wrapper.short .blue-outline-headline-container {
    max-width: 780px;
}

/* Title styling */
.blue-outline-headline {
    margin: 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-weight: 600;
    position: relative;
}

.blue-outline-headline .small {
    display: block;
    font-size: var(--font-size-outline-headline-small);
    line-height: var(--font-lh-outline-headline-small);
    margin: 0;
}

.blue-outline-headline .big {
    font-size: var(--font-size-outline-headline-large);
    line-height: var(--font-lh-outline-headline-large);
    font-weight: 700;
    position: relative;
    margin: 30px 0;
    padding: 0 15px;
    color: var(--color-red);
    text-transform: uppercase;
    width: 100%;
    display: inline-block;
}

.blue-outline-headline .big .blue-border-top,
.blue-outline-headline .big .blue-border-bottom {
    position: absolute;
    left: 0;
    right: 0;
    height: 7px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    color: var(--color-blue);
}

.blue-outline-headline .big .blue-border-top {
    top: -15px;
}

.blue-outline-headline .big .blue-border-bottom {
    bottom: -15px;
}

.blue-outline-subtitle{
    font-size: 1.8rem;
    line-height: 2.6rem;
    margin: 30px auto 0;
    max-width: 840px;
}

@media screen and (max-width: 767px) {

    .blue-outline-headline-wrapper {
        padding: 70px 0 30px;
    }

    .blue-outline-headline-wrapper.under-curve {
        padding: 80px 0 0;
    }

    .blue-outline-headline .big {
        margin: 20px 0;
    }

    .blue-outline-headline .subtitle {
        margin: 20px 0;
    }
}/* Content Floating Section Styles */
.content-floating-wrapper {
    width: 100%;
    background-color: var(--color-bg-gray);
    padding: 200px 0;
    position: relative;
}

.content-floating-container {
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.content-floating-content {
    width: 1550px;
    background-image: url('/wp-content/uploads/static/floating-card-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    flex-direction: column;
    padding: 30px 9% 10px;
    position: relative;
}

/* Top and bottom endcap images */
.content-floating-content::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 0;
    right: 0;
    height: 100px;
    background-image: url('/wp-content/uploads/static/floating-card-top.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}

.content-floating-content::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: 0;
    right: 0;
    height: 100px;
    background-image: url('/wp-content/uploads/static/floating-card-bottom.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}

/* Main headline - 30px red bold centered */
.content-floating-headline {
    margin: 0 0 100px 0;
    color: var(--color-red);
    font-size: var(--font-size-h2-bow);
    line-height: var(--font-lh-h2-bow);
    font-weight: 700;
    text-align: center;
    position: relative;
    z-index: 2;
}

.content-floating-rows {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
    z-index: 2;
}

.content-row {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

/* Container headline with blue border and red bow background */
.content-row-headline-container {
    position: relative;
    width: 100%;
    height: 72px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.content-row-headline-container::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    height: 7px;
    background-image: url('/wp-content/uploads/static/tapered-top-border-blue.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}

/* Red bow background container for the headline */
.content-row-headline-container .content-row-headline {
    margin: 0 0 15px;
    padding-bottom: 5px;
    position: relative;
    z-index: 2;
    height: 72px;
    width: 435px;
    background-image: url('/wp-content/uploads/static/red-bow-medium.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The actual headline text */
.content-row-headline {
    color: var(--color-white);
    font-size: var(--font-size-story-accent-35);
    line-height: var(--font-lh-story-accent-35);
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
}

/* Three column layout */
.content-row-columns {
    display: grid;
    grid-template-columns: 340px .9fr 0.85fr; /* Image column, large list (15% bigger), small list */
    gap: 10px;
    align-items: flex-start;
}

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

/* Image column */
.content-column-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.content-row-image {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content-row-image img {
    width: auto;
    height: auto;
    max-height: 330px;
    object-fit: contain;
}

/* List columns */
.content-column-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    padding-top: 40px;
    min-height: 250px;
}

.content-bulleted-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-card-body);
    line-height: var(--font-lh-card-body);
    color: var(--color-text);
    align-self: flex-start;
}

.content-bulleted-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 20px;
}

.content-bulleted-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 13px;
    width: 8px;
    height: 8px;
    background-color: var(--color-red);
    border-radius: 50%;
    transform: translateY(-50%);
}

.content-bulleted-list li:last-child {
    margin-bottom: 0;
}

/* Responsive styles */
@media (max-width: 1024px) {
    .content-row-columns{
        grid-template-columns: 220px .9fr 0.85fr;
    }
}
@media (max-width: 768px) {
    .content-row-headline-container {
        position: absolute;
        top: 210px;

        &::before{
            display: none;
        }
    }
    .content-row-headline-container .content-row-headline{
        width: 225px;
        font-size: 2.0rem;
        line-height: 2.6rem;
    }
    .content-row-columns{
        grid-template-columns: 1fr;
    }
    .content-row{
        position: relative;
    }
    .content-row-image img{
        max-height: 220px;
        max-width: 200px;
    }
    .content-column-list {
        height: auto;
        min-height: 0;
        padding-top: 20px;
    }
    .content-column-list-large {
        height: auto;
        min-height: 0;
        padding-top: 100px;
    }
    .content-bulleted-list{
        padding-left: 0 !important;
    }
}/* Full Length Quote Section */
.full-length-quote-section {
    width: 100%;
    background-color: var(--color-nav-gray);
    padding: 0;
    position: relative;
    z-index: 2;
    margin: 0;
}

.full-length-quote-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Quote Wrapper */
.full-length-quote-wrapper {
    width: 100%;
    position: relative;
}

.quote-columns {
    display: flex;
    align-items: flex-end;
    gap: 200px;
    margin-bottom: 0px;
}

.quote-text-column {
    flex: 3;
    padding: 40px 0 20px;
}

.quote-image-column {
    flex: 1;
    display: flex;
    justify-content: center;
}

.quote-text {
    font-size: var(--font-size-quote-text);
    line-height: var(--font-lh-quote-text);
    color: var(--color-yellow);
    font-weight: 600;
    margin: 0 0 10px;
    position: relative;
}

.quote-text::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('/wp-content/uploads/static/opening-quotes-white.svg');
    left: -25px;
    top: 3px;
}

/* Remove the ::after pseudo-element */
.quote-text::after {
    content: none;
}

/* Add a class for the closing quote span */
.closing-quote {
    display: inline-block;
    width: 16px;
    height: 14px;
    background-image: url('/wp-content/uploads/static/closing-quotes-white.svg');
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    top: -10px;
    margin-left: 5px;
}

.quote-citation {
    font-size: var(--font-size-quote-attribution);
    line-height: var(--font-lh-quote-attribution);
    color: var(--color-white);
    margin: 0;
}

.quote-image {
    margin: 0;
    position: absolute;
    bottom: 0;
    max-width: 484px;
    width: 100%;
    z-index: 3;
}

.quote-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Responsive Styles */
@media screen and (max-width: 1366px) {
    .full-length-quote-container {
        margin: 0 10%;
    }
    .quote-columns {
        gap: 10%;
    }
}
@media screen and (max-width: 1024px) {
    .full-length-quote-container {
        margin: 0 5%;
    }
}

@media (max-width: 781px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column.quote-text-column {
        flex-basis: 75% !important;
        flex-grow: 0 !important;
    }
    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column.quote-image-column {
        flex-basis: 25% !important;
        flex: 1 !important;
    }
}

@media screen and (max-width: 768px) {
    .full-length-quote-container {
        padding: 0 20px;
    }

    .quote-columns {
        flex-direction: column !important;
        gap: 20px;
        text-align: center;
    }

    .quote-text-column {
        flex: none;
        width: 100%;
        order: 1;
        padding: 20px 0 0;
        flex-basis: 100% !important;
        flex-grow: 1 !important;
    }

    .quote-image-column {
        flex: none;
        width: 100%;
        order: 2;
        flex-basis: 100% !important;
        flex-grow: 1 !important;
    }

    .quote-text {
        padding: 30px 0;
        border-top: 1px solid var(--color-white);
        border-bottom: 1px solid var(--color-white);
        margin-top: 20px;
    }

    .quote-text::before {
        left: 50%;
        transform: translateX(-50%);
        top: -10px;
        padding: 0 30px;
        background-color: var(--color-nav-gray);
        background-position: center;
        margin: 0 auto;
    }

    .quote-text::after {
        content: '';
        position: absolute;
        width: 16px;
        height: 14px;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url('/wp-content/uploads/static/opening-quotes-white.svg');
        left: 50%;
        transform: translateX(-50%);
        bottom: -10px;
        padding: 0 30px;
        background-color: var(--color-nav-gray);
        background-position: center;
        margin: 0 auto;
    }

    .quote-citation {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        text-align: center;
        margin-top: 20px;
    }

    .closing-quote {
        display: none !important;
    }

    .quote-image {
        position: relative;
        margin: 0 auto;
        bottom: 0px;
    }
}/* Excess Bradykinin Animation Styles */
.excess-bradykinin-wrapper {
    width: 100%;
    background-color: var(--color-white);
    padding: 60px 0;
    overflow: hidden;
    position: relative;
    z-index: 1; /* Base layer, below sticky stories */
}

.excess-bradykinin-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

/* Header Section with Gray Bow Background */
.excess-bradykinin-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -20px;
    z-index: 3;
}

.excess-bradykinin-header-bg {
    position: relative;
    margin: 0;
    width: 800px;
    height: 120px;
}

.excess-bradykinin-header-bg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.excess-bradykinin-header-text {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-size: var(--font-size-excess-bradykinin-header);
    line-height: var(--font-lh-excess-bradykinin-header);
    font-weight: 600;
    color: var(--color-dark-gray);
    text-align: center;
    z-index: 2;
    max-width: 730px;
    width: 100%;
}

/* Main Animation Section */
.excess-bradykinin-animation-section {
    position: relative;
    margin-bottom: 0px;
}

.excess-bradykinin-main-bg {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 956px;
    height: auto;
    clip-path: inset(0% 0% 100% 0%);
    transition: clip-path 1s ease;
    z-index: 2; /* Red background layer */
}

.excess-bradykinin-main-bg.visible {
    clip-path: inset(0% 0% 0% 0%);
}

.excess-bradykinin-main-bg img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Animation Elements Container */
.excess-bradykinin-animation-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3; /* Above red background */
}

/* Individual Animation Elements */
.animation-element {
    position: absolute;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.animation-element.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Element 1: Low C1-INH (top center) */
.element-1 {
    top: 5%;
    left: 50%;
    transform: translateX(-50%) translateY(30px);
}

.element-1.visible {
    transform: translateX(-50%) translateY(0);
}

/* Element 2: Timer (middle left area) */
.element-2 {
    top: 25%;
    left: 50%;
    transform: translateX(-50%) translateY(30px);
}

.element-2.visible {
    transform: translateX(-50%) translateY(0);
}

/* Element 3: Overproduction (middle right area) */
.element-3 {
    top: 42%;
    left: 50%;
    transform: translateX(-50%) translateY(30px);
}

.element-3.visible {
    transform: translateX(-50%) translateY(0);
}

/* Element 4: Swollen hand (bottom area) */
.element-4 {
    bottom: 40%;
    left: 50%;
    transform: translateX(-50%);
}

.element-4.visible {
    transform: translateX(-50%);
}

/* Element Icons */
.element-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    position: relative;
    z-index: 4; /* On top of red background */
}

.element-icon img {
    object-fit: contain;
}

/* Specific icon sizes */
.element-1 .element-icon img {
    width: 52px;
    height: 52px;
}

.element-2 .element-icon img {
    width: 70px;
    height: 70px;
}

.element-3 .element-icon img {
    width: 171px;
    height: 171px;
}

/* Element Text Center */
.element-text-center {
    text-align: center;
    margin-bottom: 15px;
    position: relative;
    z-index: 4; /* On top of red background */
}

.element-label {
    font-size: var(--font-size-excess-bradykinin-element-label);
    line-height: var(--font-lh-excess-bradykinin-element-label);
    font-weight: 600;
    color: var(--color-white);
    margin: 0;
}

.element-label-bold {
    font-size: var(--font-size-excess-bradykinin-element-label);
    line-height: var(--font-lh-excess-bradykinin-element-label);
    font-weight: 700;
    color: var(--color-white);
    margin: 0;
}

.element-label-large {
    font-size: var(--font-size-excess-bradykinin-large);
    line-height: var(--font-lh-excess-bradykinin-large);
    font-weight: 700;
    color: var(--color-white);
    margin: 0;
}

/* Sliding Text Elements */
.element-text-slide {
    position: absolute;
    top: 50%;
    opacity: 0;
    transform: translateY(-45%);
    transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
    width: 600px;
    z-index: 1; /* Behind red background, furthest back */
}

.element-text-slide.visible {
    opacity: 1;
}

.slide-left {
    right: 100%;
    margin-right: 20px;
    transform: translateY(-50%) translateX(-30px);
}

.slide-left.visible {
    transform: translateY(-50%) translateX(0);
}

.slide-right {
    left: 100%;
    margin-left: 20px;
    transform: translateY(-50%) translateX(30px);
}

.slide-right.visible {
    transform: translateY(-50%) translateX(0);
}

/* Text Container with Blue Underline */
.text-container {
    padding: 15px 40px 0 0;
    position: relative;
}

.blue-underline::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--color-blue);
}

.text-container p {
    margin: 0;
    font-size: var(--font-size-excess-bradykinin-bottom);
    line-height: var(--font-lh-excess-bradykinin-bottom);
    font-weight: 400;
}

/* Element 4 Specific Styles */
.element-image {
    margin-bottom: 0;
    position: relative;
    z-index: 4; /* On top of red background */
    display: flex;
    justify-content: center;
}

.hand-sequence-container {
    position: relative;
    width: 390px;
    height: auto;
    display: flex;
    justify-content: center;
}

.hand-sequence-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 390px;
    height: auto;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
    transition: none; /* Disable any CSS transitions that might cause flickering */
}

.hand-sequence-container img.active {
    opacity: 1;
}

.element-text-blue-bg {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translateX(-50%) translateY(140%);
    z-index: 3; /* Behind swollen hand, in front of red background */
    opacity: 0;
    transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s, left 0.6s ease 0.3s;
}

.element-text-blue-bg.visible {
    left: 118%;
    transform: translateX(0) translateY(50%);
    opacity: 1;
}

.blue-winged-bg {
    position: relative;
    width: 614px;
    height: 338px;
}

.blue-bg-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.blue-bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 60px 90px;
    text-align: left;
    width: 100%;
}

.blue-bg-text p {
    margin: 0;
    font-size: var(--font-size-excess-bradykinin-blue-bg);
    line-height: var(--font-lh-excess-bradykinin-blue-bg);
    color: var(--color-white);
}

/* Footer Section with Yellow Bow Background */
.excess-bradykinin-footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
    margin-top: -40px;
    z-index: 3;
}

.excess-bradykinin-footer-bg {
    position: relative;
    margin: 0;
    width: 976px;
    height: 110px;
}

.excess-bradykinin-footer-bg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.excess-bradykinin-footer-text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    padding-bottom: 15px;
    transform: translate(-50%, -50%);
    margin: 0;
    font-size: var(--font-size-excess-bradykinin-footer);
    line-height: var(--font-lh-excess-bradykinin-footer);
    font-weight: 600;
    text-align: center;
    z-index: 2;
}

/* Bottom Section */
.excess-bradykinin-bottom {
    text-align: center;
}

.excess-bradykinin-bottom-text {
    margin: 0;
    font-size: var(--font-size-excess-bradykinin-bottom);
    line-height: var(--font-lh-excess-bradykinin-bottom);
    color: var(--color-dark-gray);
    font-weight: 500;
    max-width: 800px;
    margin: 0 auto;
}

/* Slide-out Texts Container (separate from animation elements) */
.excess-bradykinin-slide-texts {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Behind red background, furthest back */
    pointer-events: none; /* Don't interfere with other interactions */
}

/* Individual slide-out text positioning */
.element-1-text {
    top: 7%;
    left: 35%;
    transform: translateX(-50%) translateY(-45%);
    transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s, left 0.6s ease 0.3s;
}

.element-1-text .text-container {
    padding: 15px 100px 0 0;
}

.element-1-text.visible {
    left: 26%;
    transform: translateX(-100%) translateY(-45%);
}

.element-2-text {
    top: 31%;
    left: 65%;
    transform: translateX(-50%) translateY(-45%);
    transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s, left 0.6s ease 0.3s;
}

.element-2-text .text-container {
    padding: 15px 0 0 100px;
}

.element-2-text.visible {
    left: 73%;
    transform: translateX(0) translateY(-45%);
}

.element-3-text {
    top: 53%;
    left: 40%;
    transform: translateX(-50%) translateY(-45%);
    transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s, left 0.6s ease 0.3s;
}

.element-3-text .text-container {
    padding: 15px 100px 0 0;
}

.element-3-text.visible {
    left: 28%;
    transform: translateX(-100%) translateY(-45%);
    padding-right: 40px;
}

@media screen and (max-width: 1365px) {
    .element-text-slide{
        width: 400px;
    }

    .blue-bg-text{
        padding: 0 30px 0 80px;
    }

    .blue-bg-text p {
        font-size: 1.6rem;
        line-height: 2.8rem;
    }

    .hand-sequence-container img {
        top: 200px;
        width: 240px;
        left: 50%;
        transform: translateX(-50%);
    }

    .blue-winged-bg {
        width: 460px;
        height: 300px;
    }

} 

@media screen and (max-width: 1023px) {
    .excess-bradykinin-header{
        margin-bottom: -30px;
    }
    .excess-bradykinin-header-bg{
        width: 318px;
        height: 187px;
    }
    .excess-bradykinin-header-bg img{
        object-fit: fill;
    }
    .excess-bradykinin-header-text{
        padding: 0 40px;
        width: 100%;
        max-width: 360px;
    }
    .blue-bg-text {
        padding: 0 130px 0 70px;
    }
} 

/* Mobile-specific styles */
@media screen and (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }
    
    .mobile-text-bg {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block;
    }

    .excess-bradykinin-wrapper {
        padding: 30px 0;
    }

    /* Header adjustments */
    .excess-bradykinin-header-bg {
        width: 318px;
        height: 187px;
    }

    .excess-bradykinin-header-text {
        padding: 0 20px;
        width: 100%;
        max-width: 300px;
    }

    /* Main background adjustments */
    .excess-bradykinin-main-bg {
        width: 100%;
        max-width: none;
        clip-path: none;
        text-align: center;
    }

    .excess-bradykinin-main-bg img {
        width: 956px; /* Original desktop width */
        min-width: 956px;
        height: auto;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        display: inline-block;
    }

    .excess-bradykinin-main-bg.mobile-only {
        opacity: 1;
        clip-path: none;
    }

    /* Change z-index for mobile layout */
    .excess-bradykinin-slide-texts {
        z-index: 4; /* Move above red background */
    }

    /* Mobile text styling */
    .element-text-slide {
        width: 382px;
        top: auto;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0;
        opacity: 0;
        transition: opacity 0.6s ease;
    }

    .element-text-slide.visible {
        opacity: 1;
        transform: translateX(-50%) !important;
    }

    .text-container {
        padding: 30px 40px !important;
        text-align: center;
        position: relative;
    }

    .element-1-text.visible{
        top: 190px;
    }

    .element-2-text.visible{
        top: 540px;
    }

    .element-3-text.visible{
        top: 970px;
        padding-right: 0;
    }

    .element-3{
        top: 52%
    }
    .element-3-text .text-container{
        padding: 30px 20% !important;
    }

    .text-container p {
        position: relative;
        z-index: 1;
        color: var(--color-white);
        margin: 0;
    }

    .mobile-text-bg {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .mobile-text-bg img {
        width: 382px;
        height: 148px;
        object-fit: contain;
    }

    /* Remove blue underline */
    .blue-underline::after {
        display: none;
    }

    /* Element 4 adjustments */
    .element-4 {
        width: 100%;
        bottom: 0;
        bottom: -200px;
    }

    .hand-sequence-container {
        width: 100%;
    }

    .hand-sequence-container img {
        width: 80%;
        max-width: 200px;
        top: -280px;
        left: 50%;
        transform: translateX(-50%);
    }

    .element-text-blue-bg {
        position: relative;
        width: 100vw;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 auto;
        opacity: 0;
        transition: opacity 0.6s ease;
        bottom: auto;
        z-index: 4;
    }

    .element-text-blue-bg.visible {
        opacity: 1;
        transform: translateX(-50%) !important;
    }

    .blue-winged-bg {
        width: 100%;
        height: auto;
        max-height: 210px;
    }

    .blue-bg-image {
        max-height: 210px;
    }

    .blue-bg-text {
        padding: 30px 40px;
        text-align: center;
        max-width: 382px;
        margin: 0 auto;
    }

    /* Footer adjustments */
    .excess-bradykinin-footer {
        margin-top: 190px;
        margin-bottom: 10px;
        width: 100vw;
        left: 50%;
        transform: translateX(-50%);
        position: relative;
    }

    .excess-bradykinin-footer-bg {
        width: 100%;
        height: 85px;
    }

    .excess-bradykinin-footer-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .excess-bradykinin-footer-text{
        max-width: 350px;
    }

    .excess-bradykinin-bottom {
        padding: 0;
    }

    .excess-bradykinin-bottom-text {
        max-width: 320px;
    }
} 

@media screen and (max-width: 400px) {
    .blue-bg-text p {
        font-size: 1.2rem;
        line-height: 2rem;
    }

    .excess-bradykinin-footer-text {
        max-width: 300px;
        font-size: 1.8rem;
        line-height: 2.4rem;
    }
}/* Chart Title Component */
.chart-title-wrapper {
    position: relative;
    width: 100%;
    padding: 6rem 0;
    background-color: var(--color-white);
}

.chart-title-container {
    position: relative;
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.chart-title {
    position: relative;
    color: var(--color-white);
    background-color: var(--color-red);
    font-size: 4.0rem;
    line-height: 5.0rem;
    font-weight: 600;
    text-align: center;
    margin: 0 auto 80px;
    max-width: 1050px;
    clip-path: var(--clip-path-headline-bowl);
    padding: 4rem 2rem;
    text-transform: uppercase;
}

.chart-image-container {
    position: relative;
    width: 100%;
    max-width: var(--container-max-width);
    margin: 4rem auto 0;
    padding: 0 2rem;
}

.chart-image {
    width: 100%;
    height: auto;
}

.chart-image img {
    width: 100%;
    height: auto;
}

/* Responsive Styles */
@media screen and (max-width: 1599px) {
    .chart-title-wrapper {
        padding: 5rem 0;
    }

    .chart-title {
        font-size: 3.5rem;
        max-width: 1000px;
    }
}

@media screen and (max-width: 1365px) {
    .chart-title-wrapper {
        padding: 4rem 0;
    }

    .chart-title {
        font-size: 3rem;
        max-width: 900px;
    }
}

@media screen and (max-width: 1023px) {
    .chart-title-wrapper {
        padding: 3rem 0;
    }

    .chart-title {
        font-size: 2.5rem;
        max-width: 670px;
        padding: 3rem 1.5rem;
    }
}

@media screen and (max-width: 767px) {
    .chart-image-container {
        display: none;
    }

    .chart-title {
        font-size: 3.0rem;
        line-height: 3.6rem;
        max-width: 670px;
        padding: 4rem 2rem;
        clip-path: var(--clip-path-mobile-headline);
    }
} /* People Stories Interactive Component */
.people-stories-interactive-wrapper {
    background: var(--color-white);
    padding: 370px 0 40px;
}

.people-stories-interactive-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Initial State */
.people-stories-initial-state {
    text-align: center;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.people-stories-initial-state.fade-out {
    opacity: 0;
}

/* Typography */
.people-stories-headline {
    font-size: 3.0rem;    /* 30px */
    line-height: 4.0rem;  /* 40px */
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--color-dark-gray);
    margin-bottom: 24px;
}

.people-stories-body {
    font-size: var(--font-size-body);
    line-height: var(--font-lh-body);
    font-family: 'Poppins', sans-serif;
    color: var(--color-medium-gray);
    margin-bottom: 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Image Section */
.people-stories-image-section {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.people-stories-main-image {
    width: 100%;
    margin: 0;
}

.people-stories-main-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Clickable Areas */
.people-stories-clickable-areas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.people-stories-click-target {
    position: absolute;
    height: 100%;
    cursor: pointer;
    pointer-events: all;
    transition: all 0.3s ease;
    /* Width and left position will be set inline by PHP */
}

/* Remove hardcoded positioning - now handled dynamically */
/* Legacy classes kept for backward compatibility if needed */
.people-stories-click-target-1 {
    left: 0%;
    width: 25%;
}

.people-stories-click-target-2 {
    left: 25%;
    width: 25%;
}

.people-stories-click-target-3 {
    left: 50%;
    width: 25%;
}

.people-stories-click-target-4 {
    left: 75%;
    width: 25%;
}

/* Nameplate Hover Effects */
.people-stories-nameplate-hover {
    position: absolute;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 5;
}

.people-stories-click-target:hover .people-stories-nameplate-hover {
    opacity: 1;
    transform: translateY(0);
}

.people-stories-nameplate-bg {
    position: relative;
    width: 200px;
    height: auto;
    margin: 0;
}

.people-stories-nameplate-bg img {
    width: 100%;
    height: auto;
    display: block;
}

.people-stories-nameplate-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 80%;
}

.people-stories-person-name {
    font-size: 3.0rem;
    line-height: 3.0rem;
    font-weight: 600;
    color: var(--color-white);
    text-transform: uppercase;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 80%;
}

/* Position nameplates differently for each person */
.people-stories-click-target-1 .people-stories-nameplate-hover {
    top: 33%;
    left: 10%;
}

.people-stories-click-target-2 .people-stories-nameplate-hover {
    top: 33%;
    left: 10%;
}

.people-stories-click-target-3 .people-stories-nameplate-hover {
    top: 33%;
    right: 12%;
}

.people-stories-click-target-4 .people-stories-nameplate-hover {
    top: 33%;
    right: 24%;
}

/* Secondary State */
.people-stories-secondary-state {
    opacity: 0;
    display: none;
    transition: opacity 0.5s ease-in-out;
}

.people-stories-secondary-state.fade-in {
    opacity: 1;
    display: block;
}

/* Profile Navigation Icons */
.people-stories-profile-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 100px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

.people-stories-profile-nav-icon {
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.people-stories-profile-nav-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 133px;
    height: 133px;
    border-radius: 50%;
    background-color: var(--color-blue);
    transition: all 0.3s ease;
    z-index: 1;
}

.people-stories-profile-nav-icon:hover::before {
    background-color: var(--color-red);
}

.people-stories-profile-nav-icon.active::before {
    background-color: var(--color-yellow);
}

.people-stories-profile-nav-icon.active:hover::before {
    background-color: var(--color-yellow);
}

.people-stories-profile-icon {
    position: relative;
    z-index: 2;
    margin: 0 0 16px 0;
    border-radius: 50%;
    overflow: hidden;
    width: 133px;
    height: 133px;
}

.people-stories-profile-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.people-stories-profile-nav-name {
    font-size: 2.0rem;     /* 20px */
    line-height: 2.4rem;   /* 24px */
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: var(--color-dark-gray);
    text-align: center;
    margin: 0;
    z-index: 2;
    position: relative;
    text-transform: uppercase;
}

/* Profile Content Wrapper */
.people-stories-profile-content-wrapper {
    position: relative;
    max-width: 1194px;
    margin: 0 auto;
}

/* Profile Disclaimer */
.people-stories-profile-disclaimer {
    position: absolute;
    bottom: -40px;
    left: 33.5%; /* Approximately 400px from a 1194px container */
    font-size: 1.0rem; /* 10px */
    line-height: 1.2rem; /* 12px */
    font-family: 'Poppins', sans-serif;
    color: var(--color-nav-gray);
    margin: 0;
    white-space: nowrap;
    z-index: 5;
}

/* Initial State Disclaimer (Desktop) */
.people-stories-initial-disclaimer {
    text-align: center;
    font-size: 1.0rem; /* 10px */
    line-height: 1.2rem; /* 12px */
    font-family: 'Poppins', sans-serif;
    color: var(--color-nav-gray);
    margin: 20px 0 0;
}

/* Mobile Disclaimer */
.people-stories-mobile-disclaimer {
    text-align: center;
    font-size: 1.0rem; /* 10px */
    line-height: 1.2rem; /* 12px */
    font-family: 'Poppins', sans-serif;
    color: var(--color-nav-gray);
    margin: 20px 0 0;
    padding: 0 20px;
}

/* Close Button */
.people-stories-close-button {
    position: absolute;
    top: 20px;
    right: 40px;
    z-index: 10;
    cursor: pointer;
    transition: opacity 0.3s ease;
    margin: 0;
}

.people-stories-close-button:hover {
    opacity: 0.7;
}

.people-stories-close-button img {
    width: 22px;
    height: 22px;
}

/* Navigation Arrows */
.people-stories-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    transition: opacity 0.3s ease;
    margin: 0;
}

.people-stories-nav-arrow:hover {
    opacity: 0.7;
}

.people-stories-nav-arrow-left {
    left: -60px;
}

.people-stories-nav-arrow-right {
    right: -60px;
}

.people-stories-nav-arrow.hidden {
    display: none;
}

/* Profile Background */
.people-stories-profile-background {
    width: 1194px;
    height: 585px;
    margin: 0 auto;
    display: block;
    position: relative;
}

.people-stories-profile-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Profile Content */
.people-stories-profile-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    padding: 40px;
    box-sizing: border-box;
}

/* Profile Main Image */
.people-stories-profile-main-image {
    width: 530px;
    position: absolute;
    left: -75px;
    bottom: -160px;
}

.people-stories-profile-main-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Profile Text Content */
.people-stories-profile-text-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 60px 6% 0 38%;
}

.people-stories-profile-name {
    font-size: 12.0rem;    /* 120px */
    line-height: 12.0rem;   /* 30px */
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: var(--color-white);
    margin: 0 auto 14px;
    text-transform: uppercase;
}

.people-stories-profile-description {
    font-size: var(--font-size-body);
    line-height: var(--font-lh-body);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--color-white);
    margin: 0 auto 40px;
    text-align: center;
}

/* Profile Quote Section */
.people-stories-profile-quote-section {
    position: relative;
    padding: 25px 0;
    border-top: 2px solid var(--color-yellow);
    border-bottom: 2px solid var(--color-yellow);
}

.people-stories-profile-quote {
    font-size: 3.0rem;     /* 30px */
    line-height: 4.0rem;   /* 40px */
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--color-yellow);
    margin: 0;
    text-align: center;
    padding: 0;
    position: relative;
    width: 110%;
    left: 50%;
    transform: translateX(-50%);
}

/* Quote Icons */
.people-stories-quote-icon {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 8px 16px;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.people-stories-quote-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 32px;
    background-color: var(--color-red);
    border-radius: 50%;
}

.people-stories-quote-opening {
    top: -16px;
}

.people-stories-quote-closing {
    bottom: -16px;
}

.people-stories-quote-icon img {
    /* Use SVG's natural aspect ratio: 15.947×13.649 */
    width: 29px !important;
    height: 25px !important;
    max-width: 29px;
    max-height: 25px;
    min-width: 29px;
    min-height: 25px;
    position: relative;
    display: block;
    object-fit: contain;
    flex-shrink: 0;
}

/* Video Section Container */
.people-stories-video-section {
    margin-top: 40px;
}

.people-stories-video-section [class*="profile-video-"] {
    margin: 0 auto;
    opacity: 1;
    transition: opacity 0s ease;
}

/* Video Placeholder */
.people-stories-video-placeholder {
    max-width: 1194px;
    margin: 0 auto;
    padding: 40px 0;
    text-align: center;
    background-color: var(--color-background-gray);
    border: 2px dashed var(--color-medium-gray);
}

.people-stories-video-placeholder-text {
    font-size: var(--font-size-body);
    color: var(--color-medium-gray);
    margin: 0;
}

/* Video Player Section */
.people-stories-video-player-section {
    max-width: 1194px;
    margin: 0 auto;
    padding: 40px 0;
    text-align: center;
}

.people-stories-video-player-section .people-stories-video-placeholder-text {
    font-size: var(--font-size-body);
    color: var(--color-dark-gray);
    margin: 0 0 20px 0;
    font-weight: 600;
}

/* Responsive Video Container */
.people-stories-responsive-video-container {
    position: relative;
    width: 100%;
    margin: 0 auto 0;
    overflow: hidden;
}

.people-stories-responsive-video-container::before {
    content: '';
    display: block;
    padding-top: 56.25%; /* 16:9 aspect ratio */
}

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

/* Video Poster Functionality */
.people-stories-video-poster-container {
    position: relative;
    width: 100%;
    cursor: pointer;
}

.people-stories-video-poster-container::before {
    content: '';
    display: block;
    padding-top: 56.25%; /* 16:9 aspect ratio */
}

.people-stories-video-poster-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.5s ease;
}

.people-stories-video-poster-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.people-stories-video-poster-container.playing iframe {
    display: block !important;
}

.people-stories-video-error {
    font-size: var(--font-size-body);
    color: var(--color-red);
    margin: 20px 0;
    padding: 20px;
    background: var(--color-background-gray);
    border-radius: 8px;
    border-left: 4px solid var(--color-red);
}

/* Legacy placeholder (to be removed) */
.people-stories-secondary-placeholder {
    font-size: var(--font-size-body);
    line-height: var(--font-lh-body);
    text-align: center;
    color: var(--color-medium-gray);
    padding: 60px 20px;
}

/* Responsive Design */
@media screen and (max-width: 1599px) {
    .people-stories-interactive-container {
        max-width: 1200px;
    }
    
    .people-stories-profile-content-wrapper {
        max-width: 1000px;
    }
    
    .people-stories-profile-background {
        width: 1000px;
        height: 490px; /* Maintains aspect ratio */
    }
    
    .people-stories-profile-main-image {
        width: 480px; /* Proportionally scaled from 570px */
        left: -90px; /* Adjusted positioning */
        bottom: -151px;
    }
    
    .people-stories-profile-name {
        font-size: 10.0rem; /* Scaled from 12.0rem */
        line-height: 10.0rem;
    }
    .people-stories-profile-text-content{
        padding-top: 0;
    }
    .people-stories-profile-quote{
        font-size: 2.5rem;
        line-height: 3.5rem;
    }
}

@media screen and (max-width: 1366px) {
    .people-stories-interactive-container {
        max-width: 1000px;
    }
    
    .people-stories-profile-content-wrapper {
        max-width: 900px;
    }
    
    .people-stories-profile-background {
        width: 900px;
        height: 440px;
    }
    
    .people-stories-profile-main-image {
        width: 430px;
        left: -80px;
        bottom: -146px;
    }
    
    .people-stories-profile-name {
        font-size: 9.0rem;
        line-height: 9.0rem;
    }
    
    .title-container {
        margin-bottom: 0;
    }

    .people-stories-profile-quote{
        font-size: 2.2rem;
        line-height: 3.2rem;
    }
}

@media screen and (max-width: 1023px) {

    /* Hide desktop interactive elements */
    .people-stories-initial-state,
    .people-stories-secondary-state,
    .people-stories-clickable-areas,
    .people-stories-nav-arrow,
    .people-stories-close-button {
        display: none !important;
    }

    .people-stories-interactive-wrapper {
        padding: 350px 0 0;
    }

    .people-stories-interactive-container {
        max-width: 100%;
        padding: 0;
    }

    /* Headline styling */
    .people-stories-headline {
        padding: 0 70px;
        margin-bottom: 0;
        text-align: center;
        font-size: 2.0rem;
        line-height: 2.6rem;
    }

    /* Main image section */
    .people-stories-image-section {
        margin-bottom: 60px;
    }

    /* Mobile Profile List */
    .people-stories-mobile-profiles {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .people-stories-mobile-profile {
        padding: 60px 20px;
        text-align: center;
    }

    /* Alternate background for even profiles */
    .people-stories-mobile-profile:nth-child(even) {
        background: var(--color-blue-gradient-extended-bottom);
    }

    /* Profile navigation icon adjustments */
    .people-stories-profile-nav-icon {
        margin: 0 auto;
        pointer-events: none;
    }

    .people-stories-profile-nav-icon::before {
        background-color: var(--color-blue);
    }

    /* Remove background for even profiles */
    .people-stories-mobile-profile:nth-child(even) .people-stories-profile-nav-icon::before {
        background-color: var(--color-bg-gray);
    }

    /* Profile content adjustments */
    .people-stories-profile-name {
        font-size: 4.3rem;
        line-height: 7.9rem;
        margin-bottom: 0;
        color: var(--color-dark-gray);
    }

    .people-stories-mobile-profile:nth-child(even) .people-stories-profile-name {
        color: var(--color-white);
    }

    .people-stories-profile-description {
        font-size: var(--font-size-body);
        line-height: var(--font-lh-body);
        margin: 0 50px 30px;
        color: var(--color-dark-gray);
    }

    .people-stories-mobile-profile:nth-child(even) .people-stories-profile-description {
        color: var(--color-white);
    }

    /* Mobile Video section adjustments */
    .people-stories-video-section {
        margin: 30px auto;
        max-width: 100%;
        padding: 0 20px;
    }

    /* Mobile Video Poster Enhancements */
    .people-stories-mobile .people-stories-video-poster-container {
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.2);
        user-select: none;
        touch-action: manipulation;
    }

    .people-stories-mobile .people-stories-video-poster-container iframe {
        display: none;
        opacity: 0;
    }

    .people-stories-mobile .people-stories-video-poster-container.playing iframe {
        display: block !important;
        opacity: 1 !important;
    }

    .people-stories-mobile .people-stories-video-poster-container.playing .people-stories-video-poster-image {
        opacity: 0;
    }

    /* Quote section adjustments */


    .people-stories-mobile-profile .people-stories-profile-quote-section{
        position: relative;
        padding: 33px 0;
        border: none;
    }

    .people-stories-mobile-profile .people-stories-profile-quote-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-top: 1px solid var(--color-nav-gray);
        border-bottom: 1px solid var(--color-nav-gray);
        -webkit-mask-image: linear-gradient(to right, 
            transparent 0%, 
            transparent 30%, 
            black 30%, 
            black 70%, 
            transparent 70%, 
            transparent 100%
        );
        mask-image: linear-gradient(to right, 
            transparent 0%, 
            transparent 30%, 
            black 30%, 
            black 70%, 
            transparent 70%, 
            transparent 100%
        );
        pointer-events: none;
    }

    /* Even profiles - white borders */
    .people-stories-mobile-profile:nth-child(even) .people-stories-profile-quote-section::before {
        border-color: var(--color-white);
    }

    .people-stories-profile-quote {
        font-size: 2.2rem;
        line-height: 3.0rem;
        border-left: none;
    }

    .people-stories-mobile-profile:nth-child(even) .people-stories-profile-quote {
        color: var(--color-white);
    }

    .people-stories-mobile-profile:nth-child(even) .people-stories-profile-quote-section {
        border-color: var(--color-white);
    }

    /* Quote section adjustments for mobile */
    .people-stories-mobile-profile .people-stories-profile-quote-section {
        margin: 40px auto 0;
        max-width: 445px;
        padding: 30px 0;
        border-color: var(--color-nav-gray);
    }

    .people-stories-mobile-profile .people-stories-profile-quote {
        color: var(--color-nav-gray);
    }

    .people-stories-mobile-profile .people-stories-quote-icon::before {
        background-color: var(--color-white);
    }

    .people-stories-mobile-profile .people-stories-quote-icon img {
        filter: invert(57%) sepia(98%) saturate(1642%) hue-rotate(165deg) brightness(95%) contrast(91%);
        width: 28px !important;
        height: 24px !important;
        max-width: 28px;
        max-height: 24px;
        min-width: 28px;
        min-height: 24px;
    }

    /* Alternate (even) profile quote styling */
    .people-stories-mobile-profile:nth-child(even) .people-stories-profile-quote-section {
        border-color: var(--color-white);
    }

    .people-stories-mobile-profile:nth-child(even) .people-stories-profile-quote {
        color: var(--color-white);
    }

    .people-stories-mobile-profile:nth-child(even) .people-stories-quote-icon::before {
        background-color: var(--color-blue-dark);
    }

    .people-stories-mobile-profile:nth-child(even) .people-stories-quote-icon img {
        filter: brightness(0) invert(1);
    }
}

/* Hide mobile version above 1023px */
@media screen and (min-width: 1024px) {
    .people-stories-mobile {
        display: none;
    }
} 

@media screen and (max-width: 767px) {

    .people-stories-profile-quote {
        font-size: 1.6rem;
        line-height: 2.2rem;
        padding: 0 35px;
    }
}/* HAE Burdens Interactive Component - Scoped Styles */
.hae-burdens-interactive-wrapper {
    /* Component Wrapper */
    width: 100%;
    padding: 210px 0 0;
    margin: 0;
    background-color: var(--color-white);

    /* Container */
    .hae-burdens-interactive-container {
        width: 100%;
        height: 1150px; /* Original height for 1600px+ */
        position: relative;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 160px 20px 40px;
        box-sizing: border-box;
    }

    /* Header Section */
    .hae-burdens-header {
        text-align: center;
        margin-bottom: 40px;
        padding: 0 5%;
        z-index: 5;
    }

    .hae-burdens-headline {
        font-size: var(--font-size-h2-burdens);  /* 30px */
        line-height: var(--font-lh-h2-burdens);  /* 40px */
        font-weight: 600;
        margin-bottom: 16px;
        margin-top: 0;
        max-width: 1120px;
    }

    .hae-burdens-body {
        font-size: var(--font-size-body);  /* 16px */
        line-height: var(--font-lh-body);
        font-weight: 600;
        margin: 20px auto;
    }

    /* Navigation Buttons */
    .hae-burdens-navigation {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin-bottom: 50px;
        z-index: 5;
        flex-wrap: wrap;
        width: 100%;
        max-width: 930px;
    }

    .hae-burden-nav-btn {
        background-color: var(--color-red);
        color: var(--color-white);
        border: 2px solid var(--color-red);
        border-radius: 25px;
        padding: 8px 24px;
        font-size: var(--font-size-body);
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        min-width: 175px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hae-burden-nav-btn:hover {
        background-color: var(--color-white);
        color: var(--color-red);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .hae-burden-nav-btn.active {
        background-color: var(--color-white);
        color: var(--color-red);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

    /* Content Container */
    .hae-burdens-content-container {
        width: 100%;
        max-width: 625px;
        min-height: 400px;
        position: relative;
        z-index: 5;
        display: flex;
        flex-direction: column;
        filter: drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.5));
    }

    .hae-burdens-content-container.card-right {
        margin: 80px 0 0 580px;
    }

    .hae-burdens-content-container.card-left {
        margin: 50px 0 0 -580px;
    }

    .burden-content {
        padding: 40px 40px 20px 60px;
        opacity: 1;
        transition: opacity 0.3s ease;
        flex: 1;
        display: flex;
        flex-direction: column;
        background-color: var(--color-white);
        clip-path: var(--clip-path-fixed-bowl-sides);
    }

    .burden-content:not(.active) {
        display: none;
    }

    /* Card Title */
    .burden-card-title {
        font-size: var(--font-size-burden-card-title);
        line-height: var(--font-lh-burden-card-title);
        font-weight: 600;
        color: var(--color-red);
        text-align: center;
        margin-bottom: 30px;
        margin-top: 0;
        text-transform: uppercase;
    }

    /* List Section */
    .burden-list-section {
        margin-bottom: 40px;
    }

    .burden-list-label {
        font-size: var(--font-size-body);
        line-height: var(--font-lh-body);
        font-weight: 600;
        margin-bottom: 16px;
        text-align: left;
    }

    .burden-list {
        list-style: none;
        padding: 0 !important;
        margin: 0;
    }

    .burden-list-item {
        font-size: var(--font-size-body);
        line-height: var(--font-lh-body);
        font-weight: 400;
        margin-bottom: 12px;
        padding-left: 20px;
        position: relative;
    }

    .burden-list-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 9px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: var(--color-red);
    }

    .burden-list-item:last-child {
        margin-bottom: 0;
    }

    /* Quote Section */
    .burden-quote-section {
        margin-bottom: 30px;
        position: relative;
    }

    .quote-border-line {
        position: relative;
        height: 2px;
        background-color: var(--color-nav-gray);
        margin: 0 0 20px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .quote-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--color-white);
        padding: 8px;
        margin: 0;
    }

    .quote-icon img {
        width: 32px;
        height: auto;
        display: block;
    }

    .burden-quote {
        font-size: var(--font-size-burden-card-quote);
        line-height: var(--font-lh-burden-card-quote);
        font-weight: 600;
        color: var(--color-red);
        text-align: center;
        margin: 0;
        padding: 10px 40px 0;
        font-style: normal;
        border-left: none;
    }

    /* Footer Section */
    .burden-footer-section {
        text-align: center;
    }

    .footer-dash {
        width: 20px;
        height: 2px;
        background-color: var(--color-nav-gray);
        margin: 0 auto 16px;
    }

    .burden-footer-text {
        font-size: var(--font-size-burden-card-quote-attribution);
        line-height: var(--font-lh-burden-card-quote-attribution);
        font-weight: 400;
        color: var(--color-nav-gray);
        margin: 0;
        text-align: center;
    }

    /* Responsive Design */
    @media screen and (max-width: 1599px) {
        .hae-burdens-interactive-container {
            height: clamp(900px, 95vh, 1150px);
            min-height: 900px;
            padding: clamp(120px, 15vh, 160px) 20px 40px;
        }

        .hae-burdens-content-container {
        }

        .burden-content {
        }

        .hae-burdens-header {
            margin-bottom: 10px;
        }

        .hae-burdens-navigation {
            max-width: 800px;
        }
        
        .hae-burden-nav-btn {
            min-width: 145px;
        }

        .hae-burdens-content-container.card-right {
            margin: 0 0 0 550px;
        }
    
        .hae-burdens-content-container.card-left {
            margin: -20px 0 0 -580px;
        }
    }

    @media screen and (max-width: 1024px) {
        padding: 30px 0 0;
        
        .hae-burdens-interactive-container {
            height: clamp(1240px, calc(1240px + (1400 - 1240) * ((100vw - 768px) / (1024 - 768))), 1400px);
            min-height: auto;
            padding: 130px 20px 40px;
            background-size: contain;
            background-position: bottom center;
            background-repeat: no-repeat;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        .hae-burdens-navigation {
            position: relative;
            width: 195px;
            margin: 0 auto;
            height: 44px;
            background-image: url('/wp-content/uploads/static/yellow-bow-narrow.png');
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            z-index: 6;
        }

        .hae-burden-nav-btn {
            display: none;
            width: 100%;
            padding: 12px 20px;
            background: none;
            border: none;
            color: var(--color-white);
            font-size: var(--font-size-body);
            text-align: left;
            cursor: pointer;
        }

        .hae-burden-nav-btn.active {
            display: block;
            background: none;
            border: none;
            box-shadow: none;
            color: var(--color-red);
            position: relative;
            padding-right: 35px;
        }

        /* Dropdown arrow */
        .hae-burden-nav-btn.active::after {
            content: '';
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid var(--color-red);
        }

        /* Open dropdown state */
        .hae-burdens-navigation.open {
            height: 44px;
        }

        /* Dropdown options container */
        .hae-burdens-navigation.open .dropdown-options {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background-color: var(--color-red);
            border-radius: 4px;
            margin-top: 1px;
            display: flex;
            flex-direction: column;
        }

        .hae-burdens-navigation.open .hae-burden-nav-btn:not(.active) {
            display: block;
            position: relative;
            padding: 12px 20px;
            color: var(--color-white);
        }

        .hae-burdens-content-container,
        .hae-burdens-content-container.card-right,
        .hae-burdens-content-container.card-left {
            margin: 40px auto 0;
        }

        .burden-content {
            clip-path: var(--clip-path-fixed-bowl-sides);
        }
        
        .burden-card-title {
            font-size: 2.4rem;
            line-height: 3.2rem;
        }
    }

    @media screen and (max-width: 767px) {
        .hae-burdens-interactive-container {
            height: 1440px;
            background-size: 250% auto;
            background-repeat: no-repeat;
        }

        /* Background position based on card position */
        .hae-burdens-interactive-container[data-card-position="card-right"] {
            background-position: 25% bottom;
        }

        .hae-burdens-interactive-container[data-card-position="card-left"] {
            background-position: 75% bottom;
        }

        .hae-burdens-content-container {
        }

        .burden-content {
            padding: 20px 40px 20px 40px;
        }

        .burden-quote {
            padding: 10px 23px 0;
        }
    }
} /* Content Structured Component - Scoped Styles */
.content-structured-wrapper {
    width: 100%;
    background-color: var(--color-white);
    background-image: url('/wp-content/uploads/static/blue-balloon-bg.png');
    background-size: 2000px 2000px;
    background-position: -100px 10px;
    background-repeat: no-repeat;
    padding: 200px 0 200px;
    position: relative;
    overflow: hidden;
    border-bottom-left-radius: 300% 150px;
    border-bottom-right-radius: 300% 150px;
    clip-path: inset(0 0 -150px 0);
    z-index: 3;
    margin-bottom: -25px !important;
}

.content-structured-wrapper .content-structured-container {
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    filter: drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.5));
}

/* Title with red bow background */
.title-with-bow {
    position: absolute;
    top: -20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-red);
    clip-path: var(--clip-path-mobile-headline);
    z-index: 2;
    padding: 30px 120px;
    margin: 0 0 100px 0;
}

.content-structured-wrapper .content-structured-content {
    max-width: 1194px;
    width: calc(100% - 80px);
    display: flex;
    flex-direction: column;
    padding: 120px 0 0;
    position: relative;
    background-color: var(--color-white);
    clip-path: var(--clip-path-fixed-bowl);
    margin: 0 auto;
}

.content-structured-wrapper .structured-title {
    margin: 0;
    color: var(--color-white);
    font-size: var(--font-size-content-structured-title);
    line-height: var(--font-lh-content-structured-title);
    font-weight: 600;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Main headlines */
.content-structured-wrapper .structured-headline,
.content-structured-wrapper .structured-headline-bottom {
    font-size: var(--font-size-content-structured-headline);
    line-height: var(--font-lh-content-structured-headline);
    font-weight: 600;
    text-align: center;
    position: relative;
    z-index: 2;
}

.content-structured-wrapper .structured-headline {
    margin: 0 auto 50px;
    max-width: 750px;
}

.content-structured-wrapper .structured-headline-bottom {
    margin: 30px 0 200px 0;
    padding: 0 175px;
}

/* Structured rows container */
.content-structured-wrapper .structured-rows {
    display: flex;
    flex-direction: column;
    gap: 60px;
    position: relative;
    z-index: 2;
    margin-bottom: 60px;
    padding: 0 175px;
}

/* Individual row */
.content-structured-wrapper .structured-row {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Columns within each row */
.content-structured-wrapper .structured-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
    position: relative;
}

/* Individual column */
.content-structured-wrapper .structured-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    position: relative;
    padding-bottom: 30px;
    height: 100%;
}

/* Blue underline for each individual column in non-final rows */
.content-structured-wrapper .structured-row:not(.structured-row-final) .structured-column::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--color-blue);
    z-index: 1;
}

/* Column icons */
.content-structured-wrapper .column-icon {
    margin: 0 0 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content-structured-wrapper .column-icon img {
    width: 150px;
    height: 150px;
    object-fit: contain;
}

/* Column text */
.content-structured-wrapper .column-text {
    margin: 0;
    font-size: var(--font-size-body);
    line-height: var(--font-lh-body);
    text-align: left;
    width: 100%;
    flex: 1;
}

/* Quote container - absolute positioned */
.content-structured-wrapper .quote-container-absolute {    
    max-width: 1194px;
    width: calc(100% - 80px);
    margin: -20px auto 0;
    position: relative;
    padding: 30px 50px 60px;
    z-index: 3;
    display: flex;
    justify-content: flex-end;
    background-color: var(--color-nav-gray);
    clip-path: var(--clip-path-fixed-bowl-bottom-only);
}

.content-structured-wrapper .quote-content {
    width: 70%;
    flex: none;
}

.content-structured-wrapper .quote-profile-image {
    width: 220px;
    height: auto;
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-220%);
    z-index: 3;
}

.content-structured-wrapper .quote-profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content-structured-wrapper .quote-text {
    font-size: var(--font-size-trade-off-card-quote);
    line-height: var(--font-lh-trade-off-card-quote);
    color: var(--color-yellow);
    font-weight: 600;
    margin: 0 0 10px 0;
    position: relative;
}

.content-structured-wrapper .quote-text::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('/wp-content/uploads/static/opening-quotes-white.svg');
    left: -25px;
    top: 3px;
}

.content-structured-wrapper .quote-text::after {
    content: none;
}

.content-structured-wrapper .closing-quote {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('/wp-content/uploads/static/closing-quotes-white.svg');
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    top: 4px;
    margin-left: 7px;
}

.content-structured-wrapper .quote-attribution {
    font-size: var(--font-size-trade-off-card-quote-attribution);
    line-height: var(--font-lh-trade-off-card-quote-attribution);
    color: var(--color-white);
    margin: 0;
}

/* Final content container - absolute positioned */
.content-structured-wrapper .final-content-absolute {
    position: absolute;
    z-index: 2;
    background-color: var(--color-yellow);
    padding: 40px 80px 20px;
    max-width: 962px;
    width: calc(100% - 80px);
    bottom: -130px;
    left: 50%;
    transform: translateX(-50%);
}

.content-structured-wrapper .final-row {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 650px;
}

.content-structured-wrapper .final-text-bold {
    margin: 0;
    font-size: var(--font-size-body);
    line-height: var(--font-lh-body);
    font-weight: 600;
    flex: 1;
}

.content-structured-wrapper .final-text-bold a{
    color: var(--color-nav-gray);
    text-decoration: underline;
}

.content-structured-wrapper .final-text-bold a:hover{
    color: var(--color-nav-gray);
    text-decoration: none !important;
    box-shadow: none !important;
}

.content-structured-wrapper .final-text-bold .regular{
    font-weight: 400;
}

.content-structured-wrapper .final-button-image {
    display: flex;
    align-items: center;
    gap: 20px;
}

.content-structured-wrapper .white-button .wp-block-button__link {
    background-color: var(--color-white);
    color: var(--color-red);
    border: 2px solid var(--color-red);
    border-radius: 30px;
    padding: 12px 24px;
    font-size: var(--font-size-button-primary);
    line-height: var(--font-lh-button-primary);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.content-structured-wrapper .white-button .wp-block-button__link:hover {
    background-color: var(--color-red);
    color: var(--color-white);
}

.content-structured-wrapper .final-image {
    margin: 0;
    flex: 0 0 auto;
    position: absolute;
    z-index: 3;
    width: 290px;
    height: auto;
    bottom: -50px;
    left: 50%;
}

.content-structured-wrapper .final-image img {
    width: 290px;
    height: auto;
    position: absolute;
    right: -260px;
    bottom: -100px;
}

@media screen and (max-width: 1599px) {
}

/* Responsive Styles */
@media screen and (max-width: 1366px) {
}

@media screen and (max-width: 1024px) {

    .content-structured-wrapper .quote-profile-image {
        left: 5%;
        transform: unset;
    }

    .content-structured-wrapper .structured-rows {
        padding: 0 40px;
    }

    .content-structured-wrapper .structured-columns {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .content-structured-wrapper .structured-headline,
    .content-structured-wrapper .structured-headline-bottom {
        padding: 0 40px;
    }

    /* Add blue underline to belly item (1st item in final row) when stacked in mobile view */
    .content-structured-wrapper .structured-row-final .structured-column:first-child::after {
        content: '';
        position: absolute;
        bottom: -30px;
        left: 0;
        right: 0;
        height: 2px;
        background-color: var(--color-blue);
        z-index: 1;
    }
}

@media screen and (max-width: 768px) {
    .content-structured-wrapper {
        padding-bottom: 450px;
        padding-top: 100px;
    }

    .content-structured-wrapper .content-structured-content {
        width: calc(100% - 40px);
    }

    .title-with-bow{
        padding: 30px 40px;
    }

    .content-structured-wrapper .structured-headline-bottom {
        margin-bottom: 60px;
    }

    .content-structured-wrapper .quote-container-absolute {
        padding: 0 20px;
        clip-path: unset;
        width: calc(100% - 40px);
    }

    .content-structured-wrapper .quote-content {
        width: 100%;
        text-align: center;
        order: 1;
        padding: 20px 0 300px;
    }

    .content-structured-wrapper .quote-text {
        padding: 30px 0;
        border-top: 1px solid var(--color-white);
        border-bottom: 1px solid var(--color-white);
        margin: 20px 0;
    }

    .content-structured-wrapper .quote-text::before {
        left: 50%;
        transform: translateX(-50%);
        top: -10px;
        padding: 0 30px;
        background-color: var(--color-nav-gray);
        background-position: center;
        margin: 0 auto;
    }

    .content-structured-wrapper .quote-text::after {
        content: '';
        position: absolute;
        width: 16px;
        height: 14px;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url('/wp-content/uploads/static/opening-quotes-white.svg');
        left: 50%;
        transform: translateX(-50%);
        bottom: -10px;
        padding: 0 30px;
        background-color: var(--color-nav-gray);
        background-position: center;
        margin: 0 auto;
    }

    .content-structured-wrapper .quote-attribution {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        text-align: center;
        margin-top: 20px;
    }

    .content-structured-wrapper .closing-quote {
        display: none !important;
    }

    .content-structured-wrapper .quote-profile-image {
        max-width: 160px;
        left: 50%;
        transform: translateX(-50%);
        bottom: -16px;
    }

    .content-structured-wrapper .final-content-absolute {
        width: calc(100% - 80px);
        bottom: -380px;
        padding: 40px 20px;
    }

    .content-structured-wrapper .final-row {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        text-align: center;
        padding-bottom: 100px;
    }

    .content-structured-wrapper .final-text-bold .regular{
        font-size: 14px;
    }

    .content-structured-wrapper .final-image {
        transform: translateX(-50%);
        bottom: -300px;
    }

    .content-structured-wrapper .final-image img {
        width: 180px;
        right: unset;
        left: 25%;
    }
} /* Image Text Columns Component - Scoped Styles */
.image-text-columns-wrapper {
    width: 100%;
    background-color: var(--color-bg-gray);
    padding: 0 0 60px;
    position: relative;
}

.image-text-columns-wrapper .image-text-columns-container {
    margin: 0 auto;
    max-width: 1190px;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-text-columns-wrapper .image-text-columns-content {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Main row layout */
.image-text-columns-wrapper .image-text-row {
    display: flex;
    gap: 90px;
    align-items: flex-start;
    width: 100%;
    max-width: 1200px;
}

/* Image column */
.image-text-columns-wrapper .image-text-image-column {
    flex: 0 0 420px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.image-text-columns-wrapper .main-content-image {
    margin: 0;
    width: 420px;
}

.image-text-columns-wrapper .main-content-image img {
    width: 420px;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}

/* Text column */
.image-text-columns-wrapper .image-text-text-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Red bold text paragraphs */
.image-text-columns-wrapper .bold-red-text {
    margin: 0;
    font-size: var(--font-size-body);
    line-height: var(--font-lh-body);
    font-weight: 600;
    color: var(--color-red);
}

.image-text-columns-wrapper .text-column-second {
    margin-top: 40px;
}

/* Red disc lists */
.image-text-columns-wrapper .red-disc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-body);
    line-height: var(--font-lh-body);
    color: var(--color-nav-gray);
}

.image-text-columns-wrapper .red-disc-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
}

.image-text-columns-wrapper .red-disc-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 8px;
    height: 8px;
    background-color: var(--color-red);
    border-radius: 50%;
    transform: translateY(-50%);
}

.image-text-columns-wrapper .red-disc-list li:last-child {
    margin-bottom: 0;
}

/* Responsive Design */
@media screen and (max-width: 1200px) {
    .image-text-columns-wrapper .image-text-row {
        gap: 60px;
        max-width: 100%;
    }
    
    .image-text-columns-wrapper .image-text-image-column {
        flex: 0 0 380px;
    }
    
    .image-text-columns-wrapper .main-content-image {
        width: 380px;
    }
    
    .image-text-columns-wrapper .main-content-image img {
        width: 380px;
    }
}

@media screen and (max-width: 1024px) {
    .image-text-columns-wrapper {
        padding: 50px 0;
    }
    
    .image-text-columns-wrapper .image-text-row {
        gap: 50px;
    }
    
    .image-text-columns-wrapper .image-text-image-column {
        flex: 0 0 320px;
    }
    
    .image-text-columns-wrapper .main-content-image {
        width: 320px;
    }
    
    .image-text-columns-wrapper .main-content-image img {
        width: 320px;
    }
}

@media screen and (max-width: 768px) {
    .image-text-columns-wrapper {
        padding: 0;
    }
    
    .image-text-columns-wrapper .image-text-columns-container {
        padding: 0 20px 40px 50px;
    }
    
    .image-text-columns-wrapper .image-text-row {
        flex-direction: column-reverse;
        gap: 30px;
        align-items: center;
    }
    
    .image-text-columns-wrapper .image-text-image-column {
        flex: none;
        width: 100%;
        max-width: 420px;
    }
    
    .image-text-columns-wrapper .main-content-image {
        width: 100%;
        margin-left: -30px;
    }
    
    .image-text-columns-wrapper .main-content-image img {
        width: 100%;
        max-width: 420px;
    }
    
    .image-text-columns-wrapper .image-text-text-column {
        width: 100%;
    }

    .image-text-columns-wrapper .text-column-second{
        margin-top: 0;
    }
}/* Resources Component - Scoped Styles */
.resources-wrapper {
    background-color: var(--color-white);
    padding: 380px 0 60px;
    
    .resources-container {
        max-width: 1194px;
        margin: 0 auto;
        width: 100%;
    }
    
    .resources-headline {
        font-size: var(--font-size-resources-headline);
        line-height: var(--font-lh-resources-headline);
        font-weight: 600;
        color: var(--color-blue);
        text-align: center;
        margin-bottom: 120px;
        text-transform: uppercase;
    }
    
    .resources-list {
        display: flex;
        flex-direction: column;
        gap: 3rem;
        margin-bottom: 4rem;
    }
    
    .resource-row {
        display: flex;
        gap: 40px;
        align-items: flex-start;
        padding: 20px 0;
    }
    
    .resource-logo-column {
        width: 200px;
        flex-shrink: 0;
        display: flex;
        justify-content: flex-end;
        align-self: center;
    }
    
    .resource-logo {
        height: auto;
        display: block;
    }
    
    .resource-logo-placeholder {
        width: 100px;
        height: 100px;
        background-color: var(--color-bg-gray);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        
        span {
            font-size: 3rem;
            font-weight: 600;
            color: var(--color-nav-gray);
        }
    }
    
    .resource-content-column {
        flex: 1;
        display: flex;
        flex-direction: column;
        border-left: 1px solid var(--color-blue);
        padding-left: 30px;
    }
    
    .resource-title {
        font-size: var(--font-size-resources-title);
        line-height: var(--font-lh-resources-title);
        font-weight: 600;
        color: var(--color-blue);
        margin: 0;
    }
    
    .resource-link {
        font-size: var(--font-size-resources-link);
        line-height: var(--font-lh-resources-link);
        font-weight: 600;
        text-decoration: none;
        display: inline-block;
        transition: color 0.3s ease;
        
        &:hover,
        &:focus {
            color: var(--color-blue);
            text-decoration: underline;
        }
    }
    
    .resource-description {
        font-size: var(--font-size-body);
        line-height: var(--font-lh-body);
        color: var(--color-nav-gray);
        margin-top: 2rem;
        margin-bottom: 2rem;

        span.footnote{
            font-size: 12px;
            line-height: 16px;
        }
    }
    
    .resource-button {
        background-color: var(--color-yellow);
        color: var(--color-nav-gray);
        border: 2px solid var(--color-yellow);
        border-radius: 30px;
        padding: 12px 24px;
        font-size: var(--font-size-button-primary);
        line-height: var(--font-lh-button-primary);
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
        width: fit-content;

        &:hover,
        &:focus {
            background-color: var(--color-nav-gray);
            color: var(--color-yellow);
            text-decoration: none;
        }
    }
    
    .resources-footer {
        font-size: var(--font-size-resources-footer);
        line-height: var(--font-lh-resources-footer);
        color: var(--color-nav-gray);
        text-align: center;
        margin: 0;
        padding-top: 2rem;
        
        sup {
            font-size: 60%;
            color: var(--color-red);
        }
    }
    
    .resources-empty-state {
        text-align: center;
        padding: 4rem 2rem;
        color: var(--color-nav-gray);
        
        p {
            font-size: var(--font-size-body);
            line-height: var(--font-lh-body);
            margin: 0;
        }
        
        a {
            color: var(--color-blue);
            text-decoration: underline;
            
            &:hover {
                text-decoration: none;
            }
        }
    }
    
    /* Responsive Design */
    @media screen and (max-width: 1024px) {
        padding: 170px 0 30px;
        
        .resource-row {
            gap: 2rem;
        }

        .resource-content-column{
            padding-right: 30px;
        }
        
        .resource-logo-column {
            width: 150px;
        }
        
        .resource-logo {
            max-width: 120px;
        }
        
        .resource-logo-placeholder {
            width: 80px;
            height: 80px;
            
            span {
                font-size: 2.4rem;
            }
        }

        .resources-footer{
            padding: 0 5%;
        }
    }
    
    @media screen and (max-width: 768px) {
        padding: 200px 0 60px;
        
        .resources-list{
            gap: 0;
        }

        .resource-row {
            flex-direction: column;
            gap: 1.5rem;
            text-align: center;
            padding: 20px 0 0;
        }
        
        .resource-logo-column {
            width: 100%;
            justify-content: center;
        }
        
        .resource-content-column {
            text-align: center;
            border-bottom: 1px solid var(--color-blue);
            border-left: none;
            padding: 0 0 30px;
            margin: 0 30px;
        }

        .resources-headline{
            margin-bottom: 20px;
        }

        .resource-description{
            margin: 20px 8px;
        }

        .resource-button{
            margin: 10px auto;
        }

        .resources-footer{
            padding: 0 40px;
        }
    }
}/* Downloadable Resources Component - Scoped Styles */
.downloadable-resources-wrapper {
    width: 100%;
    background-color: var(--color-white);
    padding: 150px 0 0;
    position: relative;
    
    .downloadable-resources-headline {
        font-size: var(--font-size-downloadable-headline);
        line-height: var(--font-lh-downloadable-headline);
        font-weight: 600;
        color: var(--color-blue);
        text-align: center;
        margin: 0 auto 120px;
        padding: 0 20px;
        max-width: 1080px;
        z-index: 2;
        position: relative;
        text-transform: uppercase;
    }

    .downloadable-resources-floating-container {
        margin: 0 auto;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 100%;
    }

    .downloadable-resources-content {
        width: 1440px;
        position: relative;
        background-color: var(--color-red);
        padding: 150px 0 100px;
        margin: 0 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
        z-index: 1;
        clip-path: var(--clip-path-smooth-bowl);
    }

    .downloadable-resources-category-container {
        width: 840px;
        background-color: var(--color-yellow);
        text-align: center;
        padding: 20px 40px;
        position: absolute;
        top: -40px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        clip-path: var(--clip-path-headline-bowl);
    }

    .downloadable-resources-category-headline {
        margin: 0;
        color: var(--color-nav-gray);
        font-size: var(--font-size-downloadable-category);
        line-height: var(--font-lh-downloadable-category);
        font-weight: 600;
        text-align: center;
    }

    .downloadable-resources-grid {
        display: grid;
        /* Start with 2 columns by default */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px;
        width: 100%;
        max-width: 840px; /* Width for 2 columns */
        position: relative;
        z-index: 2;
        padding: 30px 0;
        margin: 0 auto;

        /* When we have only one item, center it */
        &:has(> :only-child) {
            grid-template-columns: minmax(0, 1fr);
            max-width: 420px; /* Width for 1 column - half of 2 columns */
            
            .downloadable-resource-item {
                justify-self: center;
                max-width: 100%;
            }
        }

        /* When we have 3 or more items, expand to 3 columns */
        &:has(> :nth-child(3)) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            max-width: 1280px; /* Width for 3 columns */
        }
    }

    .downloadable-resource-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        position: relative;
    }
    
    .download-audience {
        font-size: var(--font-size-downloadable-audience);
        line-height: var(--font-lh-downloadable-audience);
        font-weight: 700;
        color: var(--color-yellow);
        text-transform: uppercase;
        min-height: var(--font-lh-downloadable-audience);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    
    .download-title {
        font-size: var(--font-size-body);
        line-height: var(--font-lh-body);
        font-weight: 700;
        color: var(--color-white);
        text-transform: uppercase;
        min-height: calc(var(--font-lh-body) * 2);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        text-align: center;
    }
    
    .download-image-container {
        width: 100%;
        
        .download-image {
            width: 100%;
            height: 100%;
            margin-left: 40px;
        }
    }
    
    .download-button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        background-color: var(--color-yellow);
        color: var(--color-nav-gray);
        font-size: var(--font-size-downloadable-button);
        line-height: var(--font-lh-downloadable-button);
        font-weight: 600;
        text-decoration: none;
        padding: 8px 25px;
        border-radius: 20px;
        transition: all 0.3s ease;
        border: 2px solid var(--color-yellow);
        cursor: pointer;
        width: 100%;
        max-width: 200px;
        
        .download-button-text {
            white-space: nowrap;
        }
        
        .download-icon {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
            transition: all 0.3s ease;
            
            /* Style for both fill and stroke SVGs */
            fill: currentColor;
            stroke: currentColor;
        }
        
        &:hover {
            background-color: var(--color-nav-gray);
            color: var(--color-yellow);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);

            .download-icon {
                /* SVG will inherit yellow color from parent with high specificity */
                fill: var(--color-yellow) !important;
                stroke: var(--color-yellow) !important;
                
                path {
                    fill: var(--color-yellow) !important;
                    stroke: var(--color-yellow) !important;
                }
                
                circle, rect, line, polyline, polygon {
                    fill: var(--color-yellow) !important;
                    stroke: var(--color-yellow) !important;
                }
            }
        }
        
        &:focus {
            outline: 2px solid var(--color-white);
            outline-offset: 2px;
        }
    }
    
    .downloadable-resources-empty-state {
        text-align: center;
        color: var(--color-white);
        font-size: var(--font-size-body);
        line-height: var(--font-lh-body);
        position: relative;
        z-index: 2;
        
        a {
            color: var(--color-yellow);
            text-decoration: underline;
            
            &:hover {
                color: var(--color-white);
            }
        }
    }
    
    /* Responsive Design */
    @media screen and (max-width: 1599px) {

        .downloadable-resources-category-container {
            width: 580px;
        }
    }

    @media screen and (max-width: 1024px) {
        padding: 50px 0 0;

        .downloadable-resources-category-container {
            width: 90%;
            padding: 20px;
            max-width: 460px;
        }

        .downloadable-resources-grid {
            padding: 30px 20px;
            gap: 20px;
            max-width: 90%;

            /* Maintain single column width on tablet */
            &:has(> :only-child) {
                max-width: min(420px, 90%);
            }

            &:has(> :nth-child(3)) {
                max-width: 90%;
            }
        }
    }

    @media screen and (max-width: 768px) {
        .downloadable-resources-headline {
            margin: 0 auto 80px;
        }
        .downloadable-resources-content {
            padding: 70px 0 40px;
            margin: 0 20px;
            clip-path: var(--clip-path-mobile-bowl);
        }

        .downloadable-resources-category-container {
            width: calc(100% - 120px);
            padding: 20px;
        }

        .downloadable-resources-grid {
            grid-template-columns: minmax(0, 1fr);
            max-width: calc(100% - 40px);
            gap: 30px;
            padding: 30px 10px;

            /* Maintain single column width on mobile */
            &:has(> :only-child) {
                max-width: 100%;
            }

            /* Override 3-column layout on mobile */
            &:has(> :nth-child(3)) {
                grid-template-columns: minmax(0, 1fr);
                max-width: calc(100% - 40px);
            }
        }
    }

    @media screen and (max-width: 400px) {
        .downloadable-resources-category-headline {
            font-size: 1.4rem;
            line-height: 2rem;
        }
    }
} 

.downloadable-resources-page .downloadable-resources-wrapper {
    padding: 340px 0 80px;
}

.downloadable-resources-page .downloadable-resources-wrapper .downloadable-resources-headline {
    display: none;
}

@media screen and (max-width: 1024px) {
    .downloadable-resources-page .downloadable-resources-wrapper {
        padding: 220px 0 80px;
    }
}/* Review Callout Component - Scoped Styles */
.review-callout-outer {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 20px;
    box-sizing: border-box;
    background-color: var(--color-white)
}

.review-callout-wrapper {
    background-image: url('/wp-content/uploads/static/blue-bow-wide.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--color-white);
    padding: 60px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 166px;
    z-index: 1;
    position: relative;
    width: 100%;
    max-width: 1600px;
    
    .review-callout-container {
        display: flex;
        align-items: center;
        gap: 30px;
        max-width: 1194px;
        width: 100%;
        justify-content: center;
    }
    
    .review-callout-text {
        font-size: var(--font-size-review-callout-text);
        line-height: var(--font-lh-review-callout-text);
        color: var(--color-white);
        margin: 0;
        font-weight: 600;
    }
    
    .review-callout-button-container {
        margin: 0;
    }
    
    .review-callout-button {
        background-color: var(--color-white);
        color: var(--color-nav-gray);
        border: 2px solid var(--color-white);
        border-radius: 30px;
        padding: 12px 24px;
        box-shadow: none;
        font-size: var(--font-size-button-primary);
        line-height: var(--font-lh-button-primary);
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
        display: inline-block;
        
        &:hover,
        &:focus {
            background-color: transparent;
            color: var(--color-white);
            text-decoration: none;
        }
    }
    
    /* Responsive Design */
    @media screen and (max-width: 1366px) {
        max-width: 100%;
        padding: 50px 40px;
        background-size: 100% 90%;
        
        .review-callout-container {
            max-width: 900px;
        }
    }
    
    @media screen and (max-width: 1024px) {
        padding: 50px 30px;
        
        .review-callout-container {
            gap: 25px;
        }
        
        .review-callout-text {
            font-size: 2.4rem;
            line-height: 2.8rem;
        }
        
        .review-callout-button {
            font-size: var(--font-size-button-secondary);
            line-height: var(--font-lh-button-secondary);
            padding: 10px 20px;
        }
    }
    
    @media screen and (max-width: 768px) {
        padding: 40px 20px;
        
        .review-callout-container {
            flex-direction: column;
            gap: 20px;
            text-align: center;
        }
        
        .review-callout-text {
            font-size: 2.0rem;
            line-height: 2.6rem;
        }
        
        .review-callout-button {
            font-size: var(--font-size-button-small);
            line-height: var(--font-lh-button-small);
        }
    }
    
    @media screen and (max-width: 480px) {
        padding: 30px 15px;
        
        .review-callout-button {
            padding: 8px 16px;
        }
    }
} /* External Resource Callout Component - Scoped Styles */
.external-resource-callout-wrapper {
    position: relative;
    width: 100%;
    min-height: 600px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--color-white);
    z-index: 2;

    .external-resource-callout-container {
        position: relative;
        width: 100%;
        max-width: 1550px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        min-height: 600px;
    }

    .external-resource-main-image {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-60%);
        width: 990px;
        height: 100%;
        margin: 0;
        z-index: 1;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
    }

    .external-resource-content-column {
        position: absolute;
        z-index: 2;
        margin-left: auto;
        width: 75%;
        padding: 40px 0 0 40%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .external-resource-copy {
        font-size: var(--font-size-body);
        line-height: var(--font-lh-body);
        color: var(--color-white);
        margin: 0 0 30px;
        font-weight: 600;
        text-align: left;
    }

    .external-resource-button-container {
        margin: 0 0 60px;
    }

    .external-resource-button {
        .wp-block-button__link {
            background-color: var(--color-yellow);
            color: var(--color-nav-gray);
            font-size: var(--font-size-button-primary);
            line-height: var(--font-lh-button-primary);
            font-weight: 600;
            text-decoration: none;
            border: 2px solid var(--color-yellow);
            border-radius: 20px;
            padding: 8px 25px;
            transition: all 0.3s ease;

            &:hover {
                background-color: var(--color-nav-gray);
                color: var(--color-yellow);
            }
        }
    }

    .external-resource-footnote {
        font-size: var(--font-size-external-resource-footnote);
        line-height: var(--font-lh-external-resource-footnote);
        color: var(--color-nav-gray);
        margin: 0;
        text-align: left;
    }

    .external-resource-mobile-image {
        display: none; /* Hidden by default */
    }

    /* Responsive Design */
    @media screen and (max-width: 1366px) {
        .external-resource-content-column {
            width: 82%;
            padding-left: 38%;
        }
    }

    @media screen and (max-width: 1024px) {
        .external-resource-content-column {
            width: 85%;
            padding-left: 35%;
        }
    }

    @media screen and (max-width: 768px) {
        min-height: auto;
        padding: 170px 0 50px;

        .external-resource-callout-container {
            min-height: auto;
            flex-direction: column;
            gap: 30px;
        }

        .external-resource-main-image {
            display: none; /* Hide desktop image */
        }

        .external-resource-mobile-image {
            display: block; /* Show mobile image */
            position: absolute;
            width: 200%;
            max-width: 500px;
            margin: 0 auto;
            z-index: 3;
            top: -220px;
            left: 50%;
            transform: translateX(-42%);

            img {
                width: 100%;
                height: auto;
            }
        }

        .external-resource-content-column {
            position: relative;
            width: 100%;
            padding: 200px 0 30px;
            align-items: center;
            text-align: center;
            background-color: var(--color-nav-gray);
        }

        .external-resource-copy {
            text-align: center;
            max-width: 500px;
            margin: 0 auto 30px;
            padding: 0 40px;
            font-size: 1.8rem;
            line-height: 2.6rem;
        }

        .external-resource-button-container {
            margin: 0 0 30px;
        }

        .external-resource-footnote {
            text-align: center;
            margin: 0 40px;
            padding: 20px 0;
            color: var(--color-white);
            font-size: 1.2rem;
            line-height: 1.6rem;
        }
    }
} /* Glossary Component - Scoped Styles */
.glossary-wrapper {
    background-color: var(--color-white);
    padding: 380px 0 0;

    /* Container Styles */
    .glossary-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px 40px;
    }
    
    /* Header Section */
    .glossary-header {
        text-align: center;
        margin-bottom: 30px;
    }
    
    .glossary-headline {
        font-size: var(--font-size-glossary-headline);
        line-height: var(--font-lh-glossary-headline);
        font-weight: 600;
        text-transform: uppercase;
        color: var(--color-blue);
        margin-bottom: 30px;
    }
    
    .glossary-subheadline {
        font-size: 30px;
        line-height: 40px;
        font-weight: 600;
        color: var(--color-nav-gray);
        margin: 0 auto 90px;
        max-width: 950px;
        text-align: center;
    }
    
    /* Terms List */
    .glossary-terms-list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    
    /* Term Row */
    .glossary-term-row {
        padding: 30px 0;
        border-bottom: 1px solid var(--color-blue);
        
        &.no-border {
            border-bottom: none;
        }
    }
    
    .glossary-term-content {
        display: flex;
        align-items: center;
        gap: 40px;
    }
    
    /* Term Column (Left) */
    .glossary-term-column {
        width: 400px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        min-height: 60px; /* Ensure vertical centering space */
    }
    
    .glossary-term-title {
        font-size: var(--font-size-glossary-term);
        line-height: var(--font-lh-glossary-term);
        font-weight: bold;
        color: var(--color-blue);
        margin: 0;
        text-align: left;
    }
    
    /* Description Column (Right) */
    .glossary-description-column {
        flex: 1;
        display: flex;
        align-items: center;
        min-height: 60px; /* Match term column height for alignment */
    }
    
    .glossary-term-description {
        font-size: var(--font-size-glossary-description);
        line-height: var(--font-lh-glossary-description);
        color: var(--color-nav-gray);
        margin: 0;
        
        /* Support for HTML tags in descriptions */
        
        br {
            line-height: 1;
        }
        
        em {
            font-style: italic;
        }
        
        strong {
            font-weight: bold;
        }
    }
    
    /* Responsive Design */
    @media screen and (max-width: 1024px) {
        padding: 130px 0 0;

        .glossary-container {
            padding: 30px 60px;
        }

        .glossary-subheadline {
            font-size: 26px;
            line-height: 36px;
            margin-bottom: 60px;
            padding: 0 20px;
        }

        .glossary-term-column {
            width: 250px;
        }
    }
    
    /* Responsive Design */
    @media screen and (max-width: 768px) {
        .glossary-container {
            padding: 30px 30px;
        }
        
        .glossary-header {
            margin-bottom: 40px;
        }

        .glossary-subheadline {
            font-size: 22px;
            line-height: 32px;
            margin-bottom: 40px;
        }
        
        .glossary-term-content {
            flex-direction: column;
            gap: 15px;
            align-items: flex-start;
        }
        
        .glossary-term-column {
            width: 100%;
            min-height: auto;
            display: block;
        }
        
        .glossary-description-column {
            min-height: auto;
            width: 100%;
        }
        
        .glossary-term-row {
            padding: 15px 0;
        }

        .glossary-term-title {
            text-align: center;
            width: 100%;
            display: block;
        }

        .glossary-term-description{
            text-align: center;
        }
    }
} /* Image Text Overlay Pattern Styles */
.image-text-overlay-wrapper {
    position: relative;
    width: 100%;
    overflow: visible;
    background-color: var(--color-white);
    padding: 150px 0 100px 100px;
}

.image-text-overlay-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 250px;
    max-width: 970px;
    margin: 0 auto;
    padding: 0;
}

.image-text-overlay-background {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    margin: 0;
}

.image-text-overlay-background img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-text-overlay-woman {
    position: absolute;
    left: -100px;
    bottom: -4px;
    z-index: 2;
    max-width: 310px;
    margin: 0;
}

.image-text-overlay-woman img {
    width: 100%;
    height: auto;
    display: block;
}

.image-text-overlay-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0;
}

.image-text-overlay-text {
    color: white;
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 3.0rem;
    margin: 0 0 2rem 0;
}

.image-text-overlay-button-container {
    margin: 0;
    justify-content: center;
}

.image-text-overlay-button .wp-block-button__link {
    background-color: var(--color-yellow);
    color: var(--color-nav-gray);
    border: 2px solid var(--color-yellow);
    border-radius: 20px;
    padding: 8px 20px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.image-text-overlay-button .wp-block-button__link:hover {
    background-color: var(--color-red);
    color: var(--color-yellow);
}

/* Responsive Styles */
@media screen and (max-width: 1024px) {

    .image-text-overlay-container {
        max-width: 800px;
    }

    .image-text-overlay-content {
        max-width: 70%;
        padding: 0 4% 0 11%;
    }
}

@media screen and (max-width: 768px) {

    .image-text-overlay-wrapper {
        padding: 360px 0 245px;
    }

    .image-text-overlay-container{
        position: absolute;
        max-width: 100%;
        width: 100%;
        background-color: var(--color-red);
        flex-direction: column;
    }
    .image-text-overlay-background {
        display: none;
    }
    .image-text-overlay-woman {
        left: auto;
        bottom: 245px;
        margin: 0 0 0 -40px;
    }
    .image-text-overlay-content {
        padding: 0 10%;
        max-width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .image-text-overlay-content {
        padding: 0 5%;
    }

    .image-text-overlay-text {
        color: white;
        font-size: 2rem;
        font-weight: 600;
        line-height: 2.6rem;
        margin: 0 0 1rem 0;
    }
}

/* 404 Error Page Styles */
.error-404-wrapper {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-standard) 0;
}

.error-404-wrapper .error-404-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 30vh 20px 0;
}

.error-404-wrapper .error-404-title {
    font-size: 40px;
    line-height: 60px;
    color: var(--color-white);
    font-weight: 400;
    margin: 0 0 40px 0;
    text-transform: uppercase;
    text-align: center;
}

.error-404-wrapper .error-404-title strong {
    font-weight: 600;
}

.error-404-wrapper .error-404-buttons {
    justify-content: center;
    margin-top: 40px;
}

.error-404-wrapper .error-404-button.yellow-button .wp-block-button__link {
    background-color: var(--color-yellow);
    color: var(--color-nav-gray);
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 20px;
    border: 2px solid var(--color-yellow);
    text-decoration: none;
    display: inline-block;
    font-size: var(--font-size-button-primary, 1.8rem);
    line-height: var(--font-lh-button-primary, 2.2rem);
    cursor: pointer;
    transition: all 0.3s ease;
}

.error-404-wrapper .error-404-button.yellow-button .wp-block-button__link:hover {
    background-color: var(--color-nav-gray);
    color: var(--color-yellow);
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .error-404-wrapper .error-404-title {
        font-size: 32px;
        line-height: 48px;
        margin: 0 0 30px 0;
    }
    
    .error-404-wrapper .error-404-container {
        padding: 30px 15px;
    }
    
    .error-404-wrapper .error-404-buttons {
        margin-top: 30px;
    }
}

@media screen and (max-width: 480px) {
    .error-404-wrapper .error-404-title {
        font-size: 28px;
        line-height: 42px;
    }
    
    .error-404-wrapper .error-404-button.yellow-button .wp-block-button__link {
        padding: 10px 24px;
        font-size: 1.6rem;
    }
} /* ******* PHARVARIS HCP 2024 COOKIE BAR COMPONENT ******* */

/* Cookie Bar Container */
.wt-cli-cookie-bar-container {
    transition: all 0.3s ease-in-out;
}

/* Cookie Bar */
.wt-cli-cookie-bar-container #cookie-law-info-bar {
    transition: all 0.3s ease-in-out;
}

/* Cookie "Manage Consent" Button */
#cookie-law-info-again {
    font-size: 14px;
    padding: 5px 10px;
    text-align: center;
    z-index: 2000;
    cursor: pointer;
    box-shadow: none;
    background-color: var(--color-yellow) !important;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    width: 175px !important;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0;
    margin: 0 auto;
    left: 0;
    right: 0 !important;
    border: 2px solid var(--color-white);
    border-bottom: none;
    position: fixed;
    bottom: 0;
    transition: bottom 0.3s ease-in-out !important;
}

/* Move cookie consent up when footer CTA is present */
.wt-cli-cookie-bar-container.slide-up #cookie-law-info-bar,
#cookie-law-info-again.slide-up {
    bottom: 92px !important; /* Use !important to override inline styles */
}

/* Cookie Bar Container Styles */
div.wt-cli-cookie-bar-container div#cookie-law-info-bar {
    background-color: var(--color-nav-gray) !important;
    border: none;
    height: auto;
    padding: 1.5% 0 1.7% 0 !important;
}

/* Additional class that appears in live version */
div.wt-cli-cookie-bar-container div#cookie-law-info-bar.wt-cli-cookie-bar {
    background-color: var(--color-nav-gray) !important;
    text-align: left;
}

div.wt-cli-cookie-bar-container div#cookie-law-info-bar div.cli-wrapper span#wt-cli-cookie-banner div.cli-bar-container {
    max-width: 1436px;
    width: 80%;
    padding: 0;
    margin-right: auto;
    margin-left: auto;
    background-color: unset;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Additional styling for cli-style-v2 class */
div.wt-cli-cookie-bar-container div#cookie-law-info-bar div.cli-wrapper span#wt-cli-cookie-banner div.cli-bar-container.cli-style-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

div.wt-cli-cookie-bar-container div#cookie-law-info-bar div.cli-wrapper span#wt-cli-cookie-banner div.cli-bar-container div.cli-bar-message {
    width: 75% !important;
    display: flex;
    color: var(--color-white);
    font-size: 16px;
    line-height: 20px !important;
}

div.wt-cli-cookie-bar-container div#cookie-law-info-bar div.cli-wrapper span#wt-cli-cookie-banner div.cli-bar-container div.cli-bar-btn_container {
    width: 25% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

/* Button Styling - Settings Button */
div.wt-cli-cookie-bar-container div#cookie-law-info-bar div.cli-wrapper span#wt-cli-cookie-banner div.cli-bar-container div.cli-bar-btn_container a#wt-cli-settings-btn {
    color: var(--color-white) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--color-white) !important;
    text-decoration: none !important;
    padding: 0 !important;
    font-size: 18px !important;
    cursor: pointer;
    border-radius: 0 !important;
}

div.wt-cli-cookie-bar-container div#cookie-law-info-bar div.cli-wrapper span#wt-cli-cookie-banner div.cli-bar-container div.cli-bar-btn_container a#wt-cli-settings-btn:hover {
    opacity: 0.8;
}

/* Button Styling - Accept Button */
div.wt-cli-cookie-bar-container div#cookie-law-info-bar div.cli-wrapper span#wt-cli-cookie-banner div.cli-bar-container div.cli-bar-btn_container a#wt-cli-accept-btn {
    background-color: var(--color-white) !important;
    color: var(--color-nav-gray) !important;
    border: 2px solid var(--color-white) !important;
    padding: 10px 20px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: 20px !important;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

div.wt-cli-cookie-bar-container div#cookie-law-info-bar div.cli-wrapper span#wt-cli-cookie-banner div.cli-bar-container div.cli-bar-btn_container a#wt-cli-accept-btn:hover {
    background-color: var(--color-nav-gray) !important;
    color: var(--color-white) !important;
}

/* Modal Content Styles - using mid-gray for modal background */
div.cli-modal-content {
    background-color: var(--color-mid-gray);
    border-radius: 1.25rem;
    color: var(--color-white);
    padding: 20px;
}

div.cli-modal-content div.cli-privacy-content-text {
    color: var(--color-white);
    margin-bottom: 15px;
}

div.cli-modal-content a#wt-cli-privacy-readmore {
    color: var(--color-white) !important;
    font-weight: bold !important;
    text-decoration: underline;
}

/* Privacy Overview Section */
div.cli-modal-content div.cli-privacy-overview h4#wt-cli-privacy-title {
    color: var(--color-white);
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}

/* Tab Header Styling */
div.cli-modal-content div.cli-tab-header {
    background-color: var(--color-nav-gray);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

div.cli-modal-content div.cli-tab-content {
    border-radius: 15px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.05);
}

/* Tab Navigation Links */
div.cli-modal-content a.cli-nav-link {
    color: var(--color-white) !important;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
}

div.cli-modal-content a.cli-nav-link:hover {
    opacity: 0.8;
}

/* Necessary Caption */
div.cli-modal-content span.cli-necessary-caption {
    color: var(--color-white) !important;
    font-size: 12px;
    opacity: 0.8;
}

/* Tab Header Navigation Arrows */
div.cli-modal-content .cli-tab-header a:before {
    border-right: 1px solid var(--color-white);
    border-bottom: 1px solid var(--color-white);
}

/* Switch/Toggle Styling */
div.cli-modal-content .cli-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

div.cli-modal-content .cli-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

div.cli-modal-content .cli-switch .cli-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 24px;
}

div.cli-modal-content .cli-switch .cli-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

div.cli-modal-content .cli-switch input:checked + .cli-slider {
    background-color: var(--color-blue);
}

div.cli-modal-content .cli-switch input:checked + .cli-slider:before {
    transform: translateX(26px);
}

div.cli-modal-content .cli-switch .cli-slider:after {
    color: var(--color-white) !important;
}

/* Checkbox Styling for Necessary Cookies */
div.cli-modal-content .wt-cli-necessary-checkbox input[type="checkbox"] {
    margin-right: 8px;
}

div.cli-modal-content .wt-cli-necessary-checkbox label {
    color: var(--color-white);
    font-size: 14px;
}

/* Cookie Description */
div.cli-modal-content .wt-cli-cookie-description {
    color: var(--color-white);
    line-height: 1.5;
    margin-bottom: 15px;
}

/* Close Button */
div.cli-modal-content .cli-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
}

div.cli-modal-content .cli-modal-close svg {
    fill: var(--color-white);
    width: 24px;
    height: 24px;
}

div.cli-modal-content .cli-modal-close:hover svg {
    opacity: 0.7;
}

/* Modal Footer Button */
div.cli-modal-content .cli-modal-footer a#wt-cli-privacy-save-btn {
    background-color: var(--color-blue) !important;
    color: var(--color-white) !important;
    border: none !important;
    padding: 12px 25px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    cursor: pointer;
    display: inline-block;
    margin-top: 20px;
}

div.cli-modal-content .cli-modal-footer a#wt-cli-privacy-save-btn:hover {
    background-color: var(--color-blue-dark) !important;
}

/* Table Styles */
table.cookielawinfo-winter {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

table.cookielawinfo-winter thead th {
    background: var(--color-blue) !important;
    color: var(--color-white);
    padding: 10px;
    text-align: left;
    font-weight: bold;
}

table.cookielawinfo-winter tbody td {
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-white);
}

table.cookielawinfo-winter tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Responsive Styles */
@media all and (max-width: 1024px) {
    div.wt-cli-cookie-bar-container div#cookie-law-info-bar div.cli-wrapper span#wt-cli-cookie-banner div.cli-bar-container {
        max-width: 825px;
        width: 80%;
        padding: 0;
        margin-right: auto;
        margin-left: auto;
        background-color: unset;
    }

    div.wt-cli-cookie-bar-container div#cookie-law-info-bar div.cli-wrapper span#wt-cli-cookie-banner div.cli-bar-container div.cli-bar-message {
        width: 58% !important;
        display: flex;
        color: var(--color-white);
        font-size: 14px;
        line-height: 20px !important;
    }

    div.wt-cli-cookie-bar-container div#cookie-law-info-bar div.cli-wrapper span#wt-cli-cookie-banner div.cli-bar-container div.cli-bar-btn_container {
        width: 42% !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    /* Smaller buttons on tablet */
    div.wt-cli-cookie-bar-container div#cookie-law-info-bar div.cli-wrapper span#wt-cli-cookie-banner div.cli-bar-container div.cli-bar-btn_container a#wt-cli-settings-btn {
        padding: 6px 12px !important;
        font-size: 13px !important;
    }

    div.wt-cli-cookie-bar-container div#cookie-law-info-bar div.cli-wrapper span#wt-cli-cookie-banner div.cli-bar-container div.cli-bar-btn_container a#wt-cli-accept-btn {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }
}

@media all and (max-width: 768px) {
    div.wt-cli-cookie-bar-container div#cookie-law-info-bar {
        height: auto;
        padding: 2% 0 !important;
    }

    div.wt-cli-cookie-bar-container div#cookie-law-info-bar div.cli-wrapper span#wt-cli-cookie-banner div.cli-bar-container {
        max-width: 600px;
        flex-direction: column;
    }

    div.wt-cli-cookie-bar-container div#cookie-law-info-bar div.cli-wrapper span#wt-cli-cookie-banner div.cli-bar-container div.cli-bar-message {
        width: 100% !important;
        padding-bottom: 0;
        padding-right: 0;
        font-size: 12px;
        line-height: 18px;
        margin-bottom: 15px;
    }

    div.wt-cli-cookie-bar-container div#cookie-law-info-bar div.cli-wrapper span#wt-cli-cookie-banner div.cli-bar-container div.cli-bar-btn_container {
        width: 100% !important;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        padding-top: 2%;
        max-width: 344px;
        gap: 15px;
    }

    /* Mobile button styling */
    div.wt-cli-cookie-bar-container div#cookie-law-info-bar div.cli-wrapper span#wt-cli-cookie-banner div.cli-bar-container div.cli-bar-btn_container a#wt-cli-settings-btn {
        padding: 8px 15px !important;
        font-size: 12px !important;
        flex: 1;
        text-align: center;
    }

    div.wt-cli-cookie-bar-container div#cookie-law-info-bar div.cli-wrapper span#wt-cli-cookie-banner div.cli-bar-container div.cli-bar-btn_container a#wt-cli-accept-btn {
        padding: 10px 20px !important;
        font-size: 12px !important;
        flex: 1;
        text-align: center;
    }

    /* Modal responsive */
    div.cli-modal-content {
        margin: 10px;
        padding: 15px;
    }

    div.cli-modal-content div.cli-tab-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    #cookie-law-info-again {
        margin: 0 auto 0 auto !important;
        bottom: 92px !important;
    }
}

/* ******* PHARVARIS HCP 2024 COOKIE BAR COMPONENT END ******* */ /* Stay Informed CTA Component - Scoped Styles */

/* Side CTA - Desktop Only (>1024px) */
.stay-informed-wrapper {
    position: fixed;
    z-index: 200;
    transition: all 0.3s ease-in-out;
    display: none; /* Hidden by default */
    visibility: hidden; /* Ensure no flash on load */
    opacity: 0;
    pointer-events: none;
}

/* Show when activated */
.stay-informed-wrapper.is-active {
    display: block;
    visibility: visible;
    opacity: 1;
}

/* Ensure badge is hidden when wrapper is not active */
.stay-informed-wrapper:not(.is-active) {
    display: none;
    visibility: hidden;
    opacity: 0;
}

/* Default state - hidden off-screen on desktop only on initial page load */
@media (min-width: 769px) {
    .stay-informed-wrapper.is-active {
        bottom: 60px;
        left: 5px;
    }

    /* Initial state - hidden by default */
    .stay-informed-wrapper .cta-container {
        transform: translateX(-200%);
        opacity: 0;
        pointer-events: none;
        width: 188px;
        height: 225px;
        margin: 0 0 -40px;
        border: none;
        position: relative;
        background-image: url('/wp-content/uploads/static/side-badge-bg.png');
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: end;
        padding: 0 0 70px 0;
        transition: none; /* Start with no transition */
        cursor: pointer;
        will-change: transform, opacity;
        text-decoration: none;
        color: inherit;
        /* Ensure it's completely hidden on initial load */
        visibility: hidden;
    }

    /* Enable transitions only after initialization */
    .stay-informed-wrapper .cta-container.initialized {
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Slide in/out states */
    .stay-informed-wrapper .cta-container.slide-in {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }

    .stay-informed-wrapper .cta-container.slide-out {
        transform: translateX(-200%);
        opacity: 0;
        pointer-events: none;
        visibility: visible; /* Keep visible for JavaScript manipulation */
    }

    /* Animation badges */
    .stay-informed-wrapper .cta-container #balloon-badge,
    .stay-informed-wrapper .cta-container #speech-badge {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: opacity 0.3s ease-in-out;
    }

    .stay-informed-wrapper .cta-container #balloon-badge {
        top: -40px;
        left: 40px;
        width: 70px;
        height: auto;
    }

    .stay-informed-wrapper .cta-container #speech-badge {
        width: 116px;
        height: auto;
        right: -55px;
        top: -70px;
    }

    /* Side badge text */
    .stay-informed-wrapper .cta-hero-button {
        font-size: 15px;
        padding-left: 10px;
        padding-bottom: 3px;
        font-weight: 600;
        color: var(--color-red);
        text-decoration: none;
        z-index: 1;
        pointer-events: none;
    }

    .stay-informed-wrapper .cta-hero-button:hover {
        text-decoration: underline;
    }

    .stay-informed-wrapper .cta-container:hover .cta-hero-button {
        text-decoration: underline;
    }
}

/* Hide side badge on mobile */
@media (max-width: 768px) {
    .stay-informed-wrapper {
        display: none;
    }
}

/* Footer CTA - Mobile Only (≤768px) */
.stay-informed-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 200;
    display: none; /* Hidden by default */
}

/* Emma balloon positioned independently */
.footer-emma-balloon {
    position: absolute;
    bottom: 0;
    left: 5px;
    max-width: 120px;
    height: auto;
    z-index: 201;
    pointer-events: none;
}

/* Footer Emma Balloon Disclaimer */
.footer-badge-disclaimer {
    position: absolute;
    bottom: 5px;
    left: 125px;
    font-weight: 500;
    font-size: 8px;
    line-height: 1.2;
    color: var(--color-white);
    text-align: center;
    white-space: nowrap;
    z-index: 202;
    pointer-events: none;
    margin: 0;
}

/* Show footer CTA on mobile */
@media all and (max-width: 768px) {
    .stay-informed-footer {
        display: block;
    }

    /* Clipped content container */
    .stay-informed-footer > .footer-content {
        width: 100%;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        min-height: 100px;
        text-align: center;
        background-color: var(--color-red);
        clip-path: var(--clip-path-smooth-bowl);
        z-index: 1;
        cursor: pointer;
        text-decoration: none;
        margin-bottom: -5px;
    }

    .stay-informed-footer .footer-text {
        font-size: 18px;
        color: var(--color-white);
        margin: 0;
        font-weight: 600;
        flex: 1;
        padding-left: 35%;
        min-width: 280px;
    }

    .stay-informed-footer .footer-arrow {
        width: 35px;
        height: 35px;
        min-width: 35px;
        background-image: url('/wp-content/uploads/static/badge-arrow.png');
        background-size: contain;
        background-repeat: no-repeat;
    }
}

.stay-informed-wrapper .cta-container.slide-out {
    transform: translateX(-200%);
    opacity: 0;
    pointer-events: none;
}

.stay-informed-wrapper .cta-hero-button {
    font-size: 15px;
    padding-left: 10px;
    font-weight: 600;
    color: var(--color-red);
    text-decoration: none;
}

.stay-informed-wrapper .cta-hero-button.desktop {
    display: block;
}

.stay-informed-wrapper .cta-hero-button.mobile {
    display: none;
}

.stay-informed-wrapper .cta-hero-button:hover {
    text-decoration: underline;
}

.stay-informed-wrapper .cta-container:hover .cta-hero-button {
    text-decoration: underline;
}

/* Badge positioning */
.stay-informed-wrapper .cta-container #balloon-badge,
.stay-informed-wrapper .cta-container #speech-badge {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.3s ease-in-out;
}

.stay-informed-wrapper .cta-container #balloon-badge {
    top: -40px;
    left: 40px;
    width: 70px;
}

.stay-informed-wrapper .cta-container #speech-badge {
    width: 116px;
    right: -35px;
    top: -100px;
}

/* Cookie consent integration */
div#cookie-law-info-again {
    font-size: 14px;
    padding: 5px 10px;
    text-align: center;
    z-index: 2000;
    cursor: pointer;
    box-shadow: none;
    background-color: var(--color-yellow) !important;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    width: 175px !important;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0;
    margin: 0 auto;
    left: 0;
    right: 0 !important;
    border: 2px solid var(--color-white);
    border-bottom: none;
    position: fixed;
    bottom: 0 !important; /* Default position at bottom */
    transition: bottom 0.3s ease-in-out !important;
}

/* Move cookie consent up when footer CTA is present */
div#cookie-law-info-again.slide-up {
    bottom: 92px !important; /* Moved up for footer CTA */
}

@media all and (max-width: 1200px) {
    div#cookie-law-info-again {
        position: fixed;
        z-index: 1000;
        transition: bottom 0.5s ease-in-out;
    }
    
    div#cookie-law-info-again.slide-down {
        bottom: 0 !important;
    }
}

/* Responsive breakpoints matching original design */
@media all and (max-width: 1599px) {
    .stay-informed-wrapper .cta-container {
        width: 138px;
        height: 170px;
        padding: 0 0 53px 0;
    }

    .stay-informed-wrapper .cta-hero-button {
        font-size: 12px;
        padding-left: 5px;
    }

    .stay-informed-wrapper .cta-container #balloon-badge {
        top: -35px;
        left: 30px;
        width: 50px;
    }

    .stay-informed-wrapper .cta-container #speech-badge {
        width: 86px;
        right: -25px;
        top: -80px;
    }
}

@media all and (max-width: 1024px) {
    .stay-informed-wrapper .cta-container {
        width: 108px;
        height: 125px;
        padding: 0 0 34px 0;
    }

    .stay-informed-wrapper .cta-hero-button {
        font-size: 10px;
        padding-left: 0px;
    }

    .stay-informed-wrapper .cta-container #balloon-badge {
        top: -30px;
        left: 20px;
        width: 40px;
    }

    .stay-informed-wrapper .cta-container #speech-badge {
        width: 65px;
        right: -20px;
        top: -60px;
    }
}

@media all and (max-width: 576px) {
    .stay-informed-wrapper .cta-container .cta-hero-button.mobile {
        left: 130px;
    }
    
    .stay-informed-wrapper .cta-container {
        background-position: -15px 5px;
    }
}

@media all and (max-width: 400px) {
    /* Additional mobile adjustments if needed */
} /* Privacy Policy Pattern Styles */
.privacy-policy-wrapper {
    width: 100%;
    background-color: var(--color-white);
    padding-top: 250px;
}

/* Hero Section Styles */
.privacy-hero-section {
    width: 100%;
    height: 604px;
    background-image: url('/api/placeholder/1920/604');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.privacy-hero-container {
    max-width: 80%;
    width: 100%;
    height: 88%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.privacy-hero-logo {
    margin: 0;
}

.privacy-hero-logo img {
    max-width: 100%;
    height: auto;
}

/* Content Section Styles */
.privacy-content-section {
    width: 100%;
    padding: 3% 0;
    background-color: var(--color-white);
}

.privacy-content-container {
    max-width: 1177px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography Styles */
.privacy-main-heading {
    color: var(--color-nav-gray);
    font-size: 2.1rem;
    line-height: 2.6rem;
    font-weight: 600;
    margin: 0 0 20px 0;
    padding-bottom: 20px;
}

.privacy-last-updated {
    color: var(--color-nav-gray);
    font-size: var(--font-size-body);
    line-height: var(--font-lh-body);
    font-weight: 400;
    margin: 0 0 20px 0;
}

.privacy-section-heading {
    color: var(--color-nav-gray);
    font-size: 2.1rem;
    line-height: 2.6rem;
    font-weight: 600;
    margin: 30px 0 20px 0;
    padding-bottom: 20px;
}

.privacy-paragraph {
    color: var(--color-nav-gray);
    font-size: var(--font-size-body);
    line-height: var(--font-lh-body);
    font-weight: 400;
    margin: 0 0 20px 0;
    text-align: left;
}

/* List Styles */
.privacy-list {
    list-style-position: outside;
    margin: 0 0 20px 0;
    padding-left: 0;
}

.privacy-list-item {
    color: var(--color-nav-gray);
    font-size: var(--font-size-body);
    line-height: var(--font-lh-body);
    font-weight: 400;
    text-align: left;
    padding: 0;
    margin-left: 0;
}

.privacy-list-item-sublist {
    padding-bottom: 0;
}

.privacy-sublist {
    margin-top: 20px;
}

.privacy-list li::marker {
    color: var(--color-red);
}

/* Links */
.privacy-paragraph a {
    color: var(--color-blue);
    text-decoration: underline;
}

.privacy-paragraph a:hover {
    color: var(--color-nav-gray);
}

/* Responsive Styles */
@media screen and (max-width: 1024px) {
    .privacy-policy-wrapper {
        padding-top: 50px;
    }

    .privacy-hero-section {
        height: 587px;
        background-image: url('/api/placeholder/1024/587');
    }

    .privacy-hero-container {
        height: 92%;
    }

    .privacy-content-section {
        padding: 5% 0;
    }
}

@media screen and (max-width: 768px) {
    .privacy-hero-section {
        height: 439px;
        background-image: url('/api/placeholder/576/439');
    }

    .privacy-content-section {
        padding: 7% 0;
    }

    .privacy-content-container {
        padding: 0 20px;
    }

    .privacy-main-heading {
        font-size: calc(2.1rem * 0.9);
        line-height: calc(2.6rem * 0.9);
    }

    .privacy-section-heading {
        font-size: calc(2.1rem * 0.9);
        line-height: calc(2.6rem * 0.9);
    }
}

@media screen and (max-width: 576px) {
    .privacy-content-section {
        padding: 9% 0;
    }

    .privacy-content-container {
        padding: 0 15px;
    }

    .privacy-main-heading {
        font-size: calc(2.1rem * 0.8);
        line-height: calc(2.6rem * 0.8);
    }

    .privacy-section-heading {
        font-size: calc(2.1rem * 0.8);
        line-height: calc(2.6rem * 0.8);
    }

    .privacy-paragraph,
    .privacy-list-item {
        font-size: calc(var(--font-size-body) * 0.9);
        line-height: calc(var(--font-lh-body) * 0.9);
    }
} /* Terms of Use Pattern Styles */
.terms-of-use-wrapper {
    width: 100%;
    background-color: var(--color-white);
    padding-top: 250px;
}

/* Content Section Styles */
.terms-content-section {
    width: 100%;
    padding: 3% 0;
    background-color: var(--color-white);
}

.terms-content-container {
    max-width: 1177px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography Styles */
.terms-main-heading {
    color: var(--color-nav-gray);
    font-size: 2.1rem;
    line-height: 2.6rem;
    font-weight: 600;
    margin: 0 0 20px 0;
    padding-bottom: 20px;
}

.terms-last-updated {
    color: var(--color-nav-gray);
    font-size: var(--font-size-body);
    line-height: var(--font-lh-body);
    font-weight: 400;
    margin: 0 0 20px 0;
}

.terms-section-heading {
    color: var(--color-nav-gray);
    font-size: 2.1rem;
    line-height: 2.6rem;
    font-weight: 600;
    margin: 30px 0 20px 0;
    padding-bottom: 20px;
}

.terms-paragraph {
    color: var(--color-nav-gray);
    font-size: var(--font-size-body);
    line-height: var(--font-lh-body);
    font-weight: 400;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Links */
.terms-paragraph a {
    color: var(--color-blue);
    text-decoration: underline;
}

.terms-paragraph a:hover {
    color: var(--color-nav-gray);
}

/* Responsive Styles */
@media screen and (max-width: 1024px) {
    .terms-of-use-wrapper {
        padding-top: 50px;
    }

    .terms-content-section {
        padding: 5% 0;
    }
}

@media screen and (max-width: 768px) {
    .terms-content-section {
        padding: 7% 0;
    }

    .terms-content-container {
        padding: 0 20px;
    }

    .terms-main-heading {
        font-size: calc(2.1rem * 0.9);
        line-height: calc(2.6rem * 0.9);
    }

    .terms-section-heading {
        font-size: calc(2.1rem * 0.9);
        line-height: calc(2.6rem * 0.9);
    }
}

@media screen and (max-width: 576px) {
    .terms-content-section {
        padding: 9% 0;
    }

    .terms-content-container {
        padding: 0 15px;
    }

    .terms-main-heading {
        font-size: calc(2.1rem * 0.8);
        line-height: calc(2.6rem * 0.8);
    }

    .terms-section-heading {
        font-size: calc(2.1rem * 0.8);
        line-height: calc(2.6rem * 0.8);
    }

    .terms-paragraph {
        font-size: calc(var(--font-size-body) * 0.9);
        line-height: calc(var(--font-lh-body) * 0.9);
    }
} /* Sitemap Pattern Styles */
.sitemap-wrapper {
    width: 100%;
    background-color: var(--color-white);
    padding-top: 250px;
}

/* Content Section Styles */
.sitemap-content-section {
    width: 100%;
    padding: 3% 0;
    background-color: var(--color-white);
}

.sitemap-content-container {
    max-width: 1177px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

/* Typography Styles */
.sitemap-main-heading {
    color: var(--color-nav-gray);
    font-size: 2.1rem;
    line-height: 2.6rem;
    font-weight: 600;
    margin: 0 0 40px 0;
    padding-bottom: 20px;
    text-align: center;
}

/* Menu Container */
.sitemap-menu-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Menu List Styles */
.sitemap-menu-list {
    list-style: none;
    margin: 0;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.sitemap-menu-list li {
    margin: 0;
    padding: 0;
}

.sitemap-menu-list a {
    color: var(--color-nav-gray);
    font-size: 2.4rem;
    line-height: 3.6rem;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    display: block;
    transition: color 0.3s ease;
}

.sitemap-menu-list a:hover {
    color: var(--color-blue);
    text-decoration: underline;
}

/* No Menu Message */
.sitemap-no-menu {
    text-align: center;
    margin: 40px 0;
}

.sitemap-no-menu p {
    color: var(--color-nav-gray);
    font-size: var(--font-size-body);
    line-height: var(--font-lh-body);
    font-style: italic;
    max-width: 600px;
    margin: 0 auto;
}

/* Responsive Styles */
@media screen and (max-width: 1024px) {
    .sitemap-wrapper {
        padding-top: 50px;
    }

    .sitemap-content-section {
        padding: 5% 0;
    }
}

@media screen and (max-width: 768px) {
    .sitemap-content-section {
        padding: 7% 0;
    }

    .sitemap-content-container {
        padding: 0 20px;
    }

    .sitemap-main-heading {
        font-size: calc(2.1rem * 0.9);
        line-height: calc(2.6rem * 0.9);
    }

    .sitemap-menu-list a {
        font-size: calc(2.4rem * 0.9);
        line-height: calc(3.6rem * 0.9);
    }
}

@media screen and (max-width: 576px) {
    .sitemap-content-section {
        padding: 9% 0;
    }

    .sitemap-content-container {
        padding: 0 15px;
    }

    .sitemap-main-heading {
        font-size: calc(2.1rem * 0.8);
        line-height: calc(2.6rem * 0.8);
    }

    .sitemap-menu-list a {
        font-size: calc(2.4rem * 0.8);
        line-height: calc(3.6rem * 0.8);
    }

    .sitemap-menu-list {
        gap: 15px;
    }
} /* Configurable Form Component - Properly Scoped Styles */

.configurable-form-content {
    -webkit-clip-path: var(--clip-path-smooth-bowl);
    clip-path: var(--clip-path-smooth-bowl);
}

.configurable-form-category-headline {
    -webkit-clip-path: var(--clip-path-headline-bowl);
    clip-path: var(--clip-path-headline-bowl);
}

/* Remove all pseudo-element styles */
.configurable-form-content::before,
.configurable-form-content::after,
.configurable-form-category-headline::before,
.configurable-form-category-headline::after {
    display: none;
}

/* White outer wrapper */
.configurable-form-outer-wrapper {
    background-color: var(--color-white);
    width: 100%;
    padding: 260px 0 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}

/* Form container */
.configurable-form-container {
    max-width: 1436px;
    width: 100%;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Form content wrapper with colored background */
.configurable-form-content {
    position: relative;
    width: 100%;
    background-color: var(--color-red);
    padding: 120px 0 100px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    z-index: 1;
    -webkit-clip-path: var(--clip-path-smooth-bowl);
    clip-path: var(--clip-path-smooth-bowl);
}

/* Theme variations */
.configurable-form-content.form-theme-yellow {
    background-color: var(--color-yellow);
}

.configurable-form-content.form-theme-blue {
    background-color: var(--color-blue);
}

.configurable-form-content.form-theme-background-grey {
    background-color: var(--color-background-gray);
}

/* Form headline with curved treatment */
.configurable-form-category-headline {
    font-size: var(--font-size-downloadable-category);
    line-height: var(--font-lh-downloadable-category);
    font-weight: 600;
    color: var(--color-red);
    background-color: var(--color-yellow);
    text-align: center;
    padding: 30px 40px;
    position: absolute;
    top: -30px;
    z-index: 2;
    width: 840px;
    text-transform: uppercase;
    -webkit-clip-path: var(--clip-path-headline-bowl);
    clip-path: var(--clip-path-headline-bowl);
}

/* Form subheading */
.configurable-form-subheading {
    font-size: var(--font-size-body);
    line-height: var(--font-lh-body);
    font-weight: 600;
    color: var(--color-white);
    text-align: center;
    margin: 0;
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 800px;
}

/* Form fields container */
.salesforce-form {
    width: 100%;
    max-width: 1080px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0 20px;
    margin: 0 auto;
    justify-content: center;
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

/* Webkit browsers (Chrome, Safari, Edge) */
.alesforce-form::-webkit-scrollbar {
    display: none;
  }

/* Form field wrapper */
.sf-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

/* Half-width fields */
.sf-form-field.col-2 {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
}

/* Center the last half-width field if it's alone in its row */
.sf-form-field.col-2:last-child:nth-child(odd) {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
    margin: 0 auto;
}

/* Full-width fields */
.sf-form-field.col-1 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Form input container */
.form-input {
    width: 100%;
    position: relative;
    margin: 0;
}

/* Input field styling */
.input-field {
    width: 100%;
    height: 44px;
    padding: 0 25px !important;
    border-radius: 6px;
    font-family: "Poppins", Arial, sans-serif;
    font-size: var(--font-size-form-input);
    color: #000 !important;
    background-color: var(--color-white);
    border: 3px solid var(--color-white);
    outline: none;
    transition: 0.25s;
    margin: 0;
    text-indent: 0;
    line-height: 44px;
}

/* Select field specific styling - aggressive default arrow removal */
select.input-field {
    /* Remove default appearance */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    
    /* Additional properties to force removal of default arrow */
    background-image: none !important;
    background-color: white !important;
    background: white !important;
    
    /* Ensure no default arrow shows */
    cursor: pointer;
    padding-right: 50px !important; /* Increased padding for our custom arrow */
}

/* Remove default arrow in IE */
select.input-field::-ms-expand {
    display: none;
}

/* Remove default arrow in Firefox */
select.input-field {
    text-indent: 1px;
    text-overflow: '';
}

/* Remove default arrow in Safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) { 
    select.input-field {
        background: white !important;
        -webkit-background-image: none !important;
        line-height: 1.2;
    }
}

/* Custom dropdown arrow container */
.form-input:has(select.input-field:not([multiple])) {
    position: relative;
}

/* Custom dropdown arrow */
.form-input:has(select.input-field:not([multiple]))::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url('/wp-content/uploads/static/caret-down.svg');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    filter: brightness(0) invert(1) sepia(0) saturate(0) brightness(0.47);
    z-index: 1;
}

/* Remove padding for multi-select */
.form-input select.input-field.nobackg,
.form-input select.input-field[multiple] {
    padding-right: 15px !important;
}

/* Checkbox container */
.legal-consent-container {
    width: 100%;
    margin-top: 16px;
}

/* Required fields notice */
.required-fields-container {
    width: 100%;
    margin-bottom: 0;
    text-align: center;
}
.required-fields-container p.pv-p.center.italic {
    font-size: 14px;
    line-height: 20px;
    font-style: italic;
}

/* Submit button container - ensure it stays centered */
#form-col4,
.configurable-form-content .salesforce-form #form-col4 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

/* Ensure button itself is centered */
#form-col4 .form-input,
.configurable-form-content .salesforce-form #form-col4 .form-input {
    display: flex;
    justify-content: center;
    width: auto;
}

/* Submit button styling */
.pv-btn.sf-button {
    background-color: var(--color-yellow);
    border: 2px solid var(--color-yellow);
    color: var(--color-nav-gray);
    width: 188px;
    border-radius: 20px;
    font-size: var(--font-size-button-primary);
    line-height: var(--font-size-button-primary);
    transition: all 0.3s ease;
    padding: 10px 0px;
    cursor: pointer;
}

.pv-btn.sf-button:hover {
    background-color: transparent;
    color: var(--color-yellow) !important;
}

/* Checkbox styling */
.input-field.checkbox {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px;
    min-height: 22px;
    margin-right: 20px;
    padding: 0 !important;
}

/* Checkbox label */
.sf-form-label {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    cursor: pointer;
}

.sf-form-label .form-title {
    margin: 0;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-white);
}

/* Error state */
.input-field.form-error {
    border-color: var(--color-red) !important;
    box-shadow: 0 0 3px var(--color-red) !important;
}

/* Ensure all form text is white - but exclude inputs and placeholders */
.configurable-form-content,
.configurable-form-content p:not(.input-field),
.configurable-form-content label:not(.input-field),
.configurable-form-content span:not(.input-field),
.configurable-form-content div:not(.form-input) {
    color: var(--color-white) !important;
}

/* Keep input text black for readability */
.configurable-form-content .input-field,
.configurable-form-content input,
.configurable-form-content select,
.configurable-form-content textarea {
    color: #000 !important;
}

/* Placeholder text styling - visible black color */
.configurable-form-content .input-field::placeholder,
.configurable-form-content input::placeholder,
.configurable-form-content textarea::placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

/* Firefox placeholder styling */
.configurable-form-content .input-field::-moz-placeholder,
.configurable-form-content input::-moz-placeholder,
.configurable-form-content textarea::-moz-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

/* WebKit placeholder styling */
.configurable-form-content .input-field::-webkit-input-placeholder,
.configurable-form-content input::-webkit-input-placeholder,
.configurable-form-content textarea::-webkit-input-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

/* Microsoft Edge placeholder styling */
.configurable-form-content .input-field::-ms-input-placeholder,
.configurable-form-content input::-ms-input-placeholder,
.configurable-form-content textarea::-ms-input-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

/* Ensure select elements specifically show black text */
.configurable-form-content .salesforce-form .form-col .sf-form-field .form-input select.input-field {
    color: #000 !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: none;
    padding-right: 50px;
    position: relative;
}

/* Form input container with select gets position relative */
.configurable-form-content .salesforce-form .form-col .sf-form-field .form-input {
    position: relative;
}

/* Textarea */
.configurable-form-content .salesforce-form .form-col .sf-form-field .form-input textarea.input-field {
    resize: vertical;
    min-height: 44px;
    text-indent: 15px;
    padding-top: 15px !important;
    border-radius: 6px;
}

/* Specific column layouts */
.configurable-form-content .salesforce-form #form-col2b {
    width: 100%;
    justify-content: center;
    align-items: center;
}

.configurable-form-content .salesforce-form #form-col2b .sf-form-field {
    justify-content: center;
    align-items: center;
    width: 50%;
}

.configurable-form-content .salesforce-form #form-col3 {
    flex-direction: column;
}

.configurable-form-content .salesforce-form #form-col3 .legal-consent-container .required-fields-container {
    width: 100%;
    margin-top: 16px;
}

.configurable-form-content .salesforce-form #form-col3 .legal-consent-container .required-fields-container p.pv-p.center.italic {
    font-size: 12px;
    line-height: 18px;
}

.configurable-form-content .salesforce-form #form-col3 .legal-consent-container .sf-form-field label.sf-form-label {
    display: flex;
    margin: 0;
}

.configurable-form-content .salesforce-form #form-col3 .legal-consent-container .sf-form-field {
    margin: 0 0 10px;
}

.configurable-form-content .salesforce-form #form-col3 .legal-consent-container .sf-form-field label.sf-form-label .form-input {
    width: 22px;
    margin-right: 20px !important;
}

.configurable-form-content .salesforce-form #form-col3 .legal-consent-container .sf-form-field p.pv-p.form-title {
    font-size: 16px;
    line-height: 26px;
    width: 100%;
    font-weight: 400;
}

.configurable-form-content .salesforce-form #form-col3 .legal-consent-container .sf-form-field p.pv-p.form-title a.form-link {
    color: var(--color-white);
    font-weight: bold;
    text-decoration: none;
}

.configurable-form-content .salesforce-form #form-col3 .legal-consent-container .sf-form-field p.pv-p.form-title a.form-link:hover {
    text-decoration: underline;
}

.configurable-form-content .salesforce-form #form-col4 .form-input input.pv-btn.sf-button {
    background-color: var(--color-yellow);
    border: 2px solid var(--color-yellow);
    color: var(--color-nav-gray);
    max-width: 230px;
    width: 100%;
    border-radius: 20px;
    font-size: var(--font-size-button-primary);
    transition: all 0.3s ease;
    padding: 8px 20px;
}

.configurable-form-content .salesforce-form #form-col4 .form-input input.pv-btn.sf-button:hover {
    background-color: var(--color-red);
    color: var(--color-yellow) !important;
    box-shadow: none;
}

/* Form links */
.configurable-form-content a.form-link {
    color: var(--color-white);
    text-decoration: none;
    box-shadow: none;
    font-weight: 600;
}

.configurable-form-content a.form-link:hover {
    color: var(--color-yellow) !important;
    text-decoration: none !important;
    box-shadow: none;
}

/* Form messages */
.configurable-form-content .form-message {
    padding: 15px;
    margin: 20px 0;
    border-radius: 5px;
    font-size: var(--font-size-form-message);
}

.configurable-form-content .form-message.form-message-error {
    background-color: #ffebee;
    color: var(--color-red);
    border: 1px solid var(--color-red);
}

.configurable-form-content .form-message.form-message-success {
    background-color: #e8f5e8;
    color: #2e7d32;
    border: 1px solid #4caf50;
}

.configurable-form-content .form-message.form-message-info {
    background-color: #e3f2fd;
    color: #1976d2;
    border: 1px solid #2196f3;
}

.configurable-form-content .form-message p {
    margin: 0;
}

/* Loading overlay */
.configurable-form-content .form-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.configurable-form-content .form-loading-overlay .form-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-background-gray);
    border-top: 4px solid var(--color-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.configurable-form-content .form-loading-overlay p {
    margin-top: 20px;
    font-size: var(--font-size-form-loading);
    color: var(--color-black);
}

/* Multi-select hint */
.configurable-form-content .multi-select-hint {
    display: block;
    font-size: 12px;
    color: var(--color-white);
    margin-top: 5px;
    opacity: 0.8;
}

/* Focus states */
.configurable-form-content .sf-form-field.field-focused .input-field {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Form submission state */
.configurable-form-content.form-submitting .input-field {
    pointer-events: none;
}

/* Focus and outline reset */
input:focus, 
textarea:focus, 
select:focus {
    outline-offset: 0px !important;
    outline: none !important;
}

/* Keyframe animations */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Select options styling */
.configurable-form-content select.input-field option {
    color: #000 !important;
    background-color: var(--color-white) !important;
}

/* Selected value in dropdown */
.configurable-form-content select.input-field:focus option:checked,
.configurable-form-content select.input-field option:checked {
    background-color: var(--color-blue) !important;
    color: var(--color-white) !important;
}

/* Disabled default options styling */
.configurable-form-content select.input-field option:disabled {
    color: #999999 !important;
    background-color: #f5f5f5 !important;
}

.configurable-form-content input[type="text"], .configurable-form-content input[type="email"], .configurable-form-content input[type="url"], .configurable-form-content input[type="password"], .configurable-form-content input[type="search"], .configurable-form-content input[type="number"], .configurable-form-content input[type="date"], .configurable-form-content input[type="datetime"], .configurable-form-content input[type="datetime-local"], .configurable-form-content input[type="week"], .configurable-form-content input[type="tel"], .configurable-form-content input[type="time"], .configurable-form-content input[type="month"], .configurable-form-content input[type="tel"], .configurable-form-content textarea, .configurable-form-content select, .configurable-form-content .select2-container .select2-selection--single{
    border-radius: 6px;
}

/* Remove all media query clip-paths */
@media screen and (max-width: 1599px) {
    .configurable-form-category-headline {
        width: 750px;
        top: -25px;
    }
    
    .configurable-form-content {
        padding: 130px 0 85px;
    }
}

@media screen and (max-width: 1366px) {
    
    .configurable-form-content {
        padding: 100px 0 75px;
    }
}

@media screen and (max-width: 1024px) {
    .configurable-form-outer-wrapper {
        padding: 150px 0 30px;
    }

    .configurable-form-category-headline {
        width: 450px;
        top: -35px;
    }
    
    .configurable-form-content {
        padding: 120px 40px 65px;
    }
}

@media screen and (max-width: 767px) {
    .configurable-form-outer-wrapper {
        padding: 70px 0 30px;
    }

    .configurable-form-container {
        height: 100%;
        padding: 80px 20px 20px;
        position: relative;
    }

    .configurable-form-category-headline {
        width: 280px;
        top: 30px;
        -webkit-clip-path: var(--clip-path-mobile-headline);
        clip-path: var(--clip-path-mobile-headline);
    }
    
    .configurable-form-content {
        padding: 120px 20px 45px;
        -webkit-clip-path: var(--clip-path-mobile-bowl);
        clip-path: var(--clip-path-mobile-bowl);
    }

    /* Form columns go single column */
    .configurable-form-content .salesforce-form {
        .form-col {
            flex-direction: column;
            width: 100%;
        }

        .form-col .sf-form-field {
            width: 100%;
            padding: 0;
            margin: 10px 0;
        }

        .form-col .sf-form-field:first-child {
            padding: 0;
        }

        /* Ensure country select is full width */
        #form-col2b .sf-form-field {
            width: 100%;
        }

        /* Adjust spacing for checkbox section */
        #form-col3 .legal-consent-container {
            margin-top: 20px;
        }

        /* Ensure submit button is visible */
        #form-col4 {
            margin-bottom: 20px;
        }
    }

    /* Hide scrollbar but keep functionality */
    .configurable-form-content {
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }
    
    .configurable-form-content::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

    .sf-form-field.col-2 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .salesforce-form {
        gap: 15px;
        padding: 0 15px;
    }
}

/* Checkbox group styling */
.checkbox-group-label {
    text-align: center;
    margin-bottom: 20px;
    margin-top: 20px;
    width: 100%;
    justify-content: center;
}

.checkbox-group-label .form-title {
    text-align: center;
    margin: 0;
}

.checkbox-group-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 90%;
    margin: 0 auto 20px;
}

.checkbox-option {
    flex: 0 1 calc(25% - 20px);
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Success message styling */
.configurable-form-success-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    min-height: 400px;
    padding: 60px 20px;
    gap: 0;
}

.configurable-form-success-headline {
    font-size: 4.3rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--color-white);
    text-transform: uppercase;
    margin: 0;
    text-align: center;
}

.configurable-form-success-text {
    font-size: 2.4rem;
    line-height: 1.4;
    font-weight: 400;
    color: var(--color-white);
    margin: 0;
    text-align: center;
    max-width: 600px;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.configurable-form-success-button {
    background-color: var(--color-yellow);
    color: var(--color-red);
    border: none;
    padding: 15px 40px;
    font-size: var(--font-size-button-primary);
    line-height: var(--font-lh-button-primary);
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s ease;
    min-width: 120px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.configurable-form-success-button:hover {
    background-color: var(--color-red);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}



@media screen and (max-width: 767px) {
    .checkbox-group-container {
        flex-direction: column;
    }
    
    .checkbox-option {
        flex: 1;
        min-width: 100%;
    }
    
    /* Mobile success message adjustments */
    .configurable-form-success-message {
        min-height: 300px;
        padding: 40px 20px;
        gap: 20px;
    }
    
    .configurable-form-success-headline {
        font-size: 3.2rem;
    }
    
    .configurable-form-success-text {
        font-size: 1.8rem;
        max-width: 100%;
    }
    
    .configurable-form-success-button {
        padding: 12px 30px;
        font-size: var(--font-size-button-secondary);
        line-height: var(--font-lh-button-secondary);
        min-width: 100px;
    }
    

}/* Interactive Profile Assessment Block Styles */
/* Phase 2: Complete interactive styling */

.interactive-assessment-wrapper{
    background-color: var(--color-white);
    padding: 80px 0;
}

.assessment-container {
    /* Base dimensions designed for 1920x1080 viewport */
    width: 1432px;
    height: 746px; /* Maintains the aspect ratio */
    margin: 0 auto;
    padding: 0;
    font-family: inherit;
    clip-path: var(--clip-path-fixed-bowl);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    background-color: var(--color-nav-gray);
    position: relative;
    overflow: hidden;
    transform-origin: center center;
    
    /* Maintain aspect ratio as viewport scales */
    aspect-ratio: 1432 / 746; /* Original proportions: ~1.92:1 */
}

/* Cross-Browser Responsive Scaling System */
/* Define scaling breakpoints with explicit transforms */
/* Container maintains exact 1432x746 dimensions, only scaling via transform */

/* 1920px - Full size */
@media (min-width: 1920px) {
    .assessment-container {
        transform: scale(1);
        width: 1432px;
        height: 746px;
    }
}

.intro-paragraph {
    font-size: 30px;
    line-height: 36px;
    max-width: 1150px;
    margin: 0 auto;
    color: var(--color-white);
    font-weight: bold;
    text-align: center;
}

.intro-navigation {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* Hide home button on default view */
.assessment-view-default .btn-home {
    display: none;
}

/* Home button - absolute positioned in top-left on intro view */
.assessment-view-intro .btn-home {
    position: absolute;
    top: 40px;
    left: 40px;
    background: transparent;
    color: var(--color-white);
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    font-size: 2rem;
    z-index: 10;
    box-shadow: none;
}

.assessment-view-intro .btn-home:hover {
    color: var(--color-yellow);
    box-shadow: none;
}

.progress-to-quiz {
    background: var(--color-yellow);
    color: var(--color-nav-gray);
    border: 2px solid var(--color-yellow);
    padding: 8px 12px;
    font-size: 1.8rem;
    line-height: 2.6rem;
    font-weight: 600;
    border-radius: 20px;
    min-width: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.progress-to-quiz:hover {
    background: var(--color-nav-gray);
    color: var(--color-yellow);
    border: 2px solid var(--color-yellow);
    box-shadow: none;
    -webkit-box-shadow: none;
}

/* Quiz View */

.quiz-frame{
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Quiz Home Button - same styling as intro home */
.quiz-home {
    position: absolute;
    top: 40px;
    left: 40px;
    background: transparent;
    color: var(--color-white);
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-size: 2rem;
    padding: 0;
    z-index: 10;
    box-shadow: none;
}

.quiz-home:hover {
    color: var(--color-yellow);
    box-shadow: none;
}

/* Quiz Title - Yellow background box */
.quiz-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    min-width: 194px;
    width: auto;
    height: 92px;
    background: var(--color-yellow);
    color: var(--color-nav-gray);
    font-size: 2.4rem;
    font-weight: 600;
    padding: 40px 20px 20px;
    text-transform: uppercase;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Quiz Progress - top right */
.quiz-progress {
    position: absolute;
    top: 40px;
    right: 40px;
    z-index: 10;
}

.progress-text {
    font-size: 20px;
    font-weight: bold;
    color: var(--color-white);
}

/* Quiz header now uses absolute positioning for frame elements */
.quiz-header {
    position: relative;
    height: 92px; /* Height of the quiz title box */
    z-index: 5;
}

/* Quiz Content Area */
.quiz-content {
    position: absolute;
    width: 100%;
    height: 100%;
}

.quiz-main {
    position: relative;
    z-index: 2;
}

.quiz-slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    z-index: 1;
}

.quiz-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.quiz-slide.transitioning-out {
    opacity: 0;
    visibility: visible;
    z-index: 1;
}

/* Question Slide */
.quiz-slide-question {
    padding: 20px 0;
}

.question-text {
    position: absolute;
    top: 150px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 40px;
    font-weight: bold;
    line-height: 46px;
    max-width: 1000px;
    width: 100%;
    color: var(--color-white);
    margin: 0;
    text-align: center;
    text-transform: uppercase;
}

/* Hide question text for two-part questions on DESKTOP only since we render it inline */
@media (min-width: 1024px) {
    .quiz-slide-question:has(.two-part-options) .question-text {
        display: none;
    }

    .quiz-slide-question:has(.two-part-special-options) .question-text {
        display: none;
    }
}

/* Answer Options Styling */
.answer-options {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 85px; /* Half of question position (170px) to center in remaining space */
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Single Select Options */
.single-select-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 330px;
    width: 100%;
}

.answer-option {
    background: var(--color-yellow);
    color: var(--color-nav-gray);
    border: 2px solid var(--color-yellow);
    padding: 15px 30px;
    border-radius: 30px;
    cursor: pointer;
    text-align: center;
    font-size: 24px;
    line-height: 25px;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    text-decoration: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.answer-option:hover {
    background: transparent;
    color: var(--color-yellow);
}

.answer-option.selected {
    background: transparent;
    color: var(--color-yellow);
}

/* Removed checkmark for answer options - not needed per design */

/* Multi-Select Options */
.multi-select-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Two-column layout for multi-select and multiple choice */
.multi-select-options.multi-select-two-columns,
.single-select-options.multi-select-two-columns {
    flex-direction: row;
    gap: 0;
    align-items: flex-start;
    width: 65%; /* Limit width to 80% of container */
    margin: 0 auto; /* Center the container */
}

.multi-select-options.multi-select-two-columns .multi-select-instruction {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    margin-bottom: 0;
}

.multi-select-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.multi-select-column-first {
    flex: 0 0 58%; /* First column takes 60% of width */
}

.multi-select-column-second {
    flex: 0 0 42%; /* Second column takes 40% of width */
}

/* Two-column specific checkbox styling */
.multi-select-options.multi-select-two-columns .multi-select-option {
    align-items: flex-start; /* Top align checkbox and text */
}

.multi-select-options.multi-select-two-columns .checkbox-label {
    font-size: 16px; /* Smaller font size for two-column */
    line-height: 26px; /* Specific line height */
    font-weight: normal; /* Not bold */
    margin-top: 2px; /* Slight adjustment to align with checkbox top */
}

/* Two-column specific multiple choice styling */
.single-select-options.multi-select-two-columns {
    gap: 30px; /* 30px gap between columns for multiple choice */
}

.single-select-options.multi-select-two-columns .multi-select-column-first {
    flex: 0 0 calc(50% - 15px); /* Equal width for multiple choice - first column, accounting for gap */
}

.single-select-options.multi-select-two-columns .multi-select-column-second {
    flex: 0 0 calc(50% - 15px); /* Equal width for multiple choice - second column, accounting for gap */
}

.single-select-options.multi-select-two-columns .answer-option {
    padding: 15px 20px;
    margin: 8px 0;
    width: 100%;
    text-align: center;
}

.multi-select-instruction {
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 15px;
    font-weight: 500;
}

.multi-select-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 15px;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.multi-select-option:hover {
    /* Removed hover state */
}

.multi-select-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.multi-select-option::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 9px;
    height: 24px;
    width: 24px;
    background-color: white;
    border-radius: 50%;
    border: 2px solid white;
}

.multi-select-option.checked::before {
    background-color: var(--color-nav-gray) !important;
    border: 2px solid white !important;
}

.checkbox-label {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    line-height: 1.4;
    margin-left: 36px; /* Account for custom circle space */
}

.multi-select-continue {
    position: absolute;
    bottom: 40px;
    right: 40px;
    z-index: 20;
    background: var(--color-yellow);
    color: var(--color-nav-gray);
    border: 2px solid var(--color-yellow);
    padding: 8px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1.8rem;
    font-weight: 500;
    box-shadow: none;
    -webkit-box-shadow: none;
    transition: all 0.3s ease;
    text-decoration: none;
}

.multi-select-continue:hover:not(:disabled) {
    background: transparent;
    color: var(--color-yellow);
}

.multi-select-continue:disabled {
    background: #ccc;
    color: #666;
    border-color: #ccc;
    cursor: not-allowed;
}

/* Two-Part Options */
.two-part-options {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -80%);
    display: flex;
    flex-direction: row;
    gap: 8%;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}

/* Two-column layout for main question buttons */
.two-part-main .answer-option {
    max-width: 185px;
    padding: 15px 20px;
}

/* Create two-column grid for main question options */
.two-part-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 12px;
    width: 465px;
    transition: transform 0.3s ease;
}

/* Question spans full width */
.two-part-main-question {
    grid-column: 1 / -1; /* Span both columns */
    font-size: 36px;
    font-weight: bold;
    line-height: 42px;
    color: var(--color-white);
    text-align: left;
    text-transform: uppercase;
    margin: 0 0 30px 0;
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.two-part-main.answered {
    transform: translateX(-20px); /* Increased shift for wider container */
    transition: transform 0.3s ease; /* Smooth transition for the shift */
}

.two-part-satisfaction {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 12px;
    width: 600px; /* Wider for larger buttons */
    opacity: 0;
    transform: translateX(40px) translateY(100px); /* Push down 100px */
    transition: opacity 0.3s ease 0.2s, transform 0.4s ease 0.3s; /* Delayed fade-in */
    position: relative;
}

.two-part-satisfaction:not([style*="display: none"]) {
    opacity: 1;
    transform: translateX(0) translateY(100px); /* Maintain 100px offset when visible */
}

/* Add vertical rule line between the two questions */
.two-part-satisfaction::before {
    content: '';
    position: absolute;
    top: -100px; /* Start from top of satisfaction section offset */
    left: -80px; /* Position to the left, between the two sections */
    width: 1px; /* 1px wide vertical line */
    height: 480px; /* Tall enough to span both question areas */
    background-color: var(--color-white);
    opacity: 0;
    transition: opacity 0.4s ease 0.2s; /* Delay appearance slightly */
}

.two-part-satisfaction:not([style*="display: none"])::before {
    opacity: 1;
}

.two-part-satisfaction .satisfaction-question {
    grid-column: 1 / -1; /* Span both columns */
    font-size: 24px; /* Smaller font for second question */
    font-weight: bold;
    line-height: 32px; /* Smaller line height */
    color: var(--color-white);
    margin: 0 0 30px 0;
    text-align: left; /* Left aligned like first question */
    text-transform: uppercase;
    min-height: 64px; /* Adjusted for smaller text */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Left align content */
}

/* Larger buttons for satisfaction options */
.two-part-satisfaction .answer-option {
    max-width: 272px;
    font-size: 20px; /* Smaller text for satisfaction buttons */
    padding: 15px 20px; /* Reduced horizontal padding from 30px to 20px */
}

/* Two-Part Special Questions (3 questions layout) */
.two-part-special-options {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -80%);
    display: flex;
    flex-direction: row;
    gap: 8%;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}

/* Main question container for two-part special */
.two-part-special-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 12px;
    width: 465px;
    transition: transform 0.3s ease;
}

/* Main question text for two-part special */
.two-part-special-main-question {
    grid-column: 1 / -1; /* Span both columns */
    font-size: 36px;
    font-weight: bold;
    line-height: 42px;
    color: var(--color-white);
    text-align: left;
    text-transform: uppercase;
    margin: 0 0 30px 0;
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Two-column layout for main question buttons */
.two-part-special-main .answer-option {
    max-width: 185px;
    padding: 15px 20px;
}

/* Shift main question left when answered */
.two-part-special-main.answered {
    transform: translateX(-20px);
    transition: transform 0.3s ease;
}

/* Secondary questions container (two questions side by side) */
.two-part-special-secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;
    width: 700px;
    opacity: 0;
    transform: translateX(40px) translateY(100px);
    transition: opacity 0.3s ease 0.2s, transform 0.4s ease 0.3s;
    position: relative;
}

.two-part-special-secondary:not([style*="display: none"]) {
    opacity: 1;
    transform: translateX(0) translateY(100px);
}

/* Add vertical rule line between main and secondary sections */
.two-part-special-secondary::before {
    content: '';
    position: absolute;
    top: -100px;
    left: -80px;
    width: 1px;
    height: 480px;
    background-color: var(--color-white);
    opacity: 0;
    transition: opacity 0.4s ease 0.2s;
}

.two-part-special-secondary:not([style*="display: none"])::before {
    opacity: 1;
}

/* Individual question containers in secondary */
.two-part-special-question-two,
.two-part-special-question-three {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Question text for secondary questions */
.two-part-special-question-text {
    font-size: 24px;
    font-weight: bold;
    line-height: 32px;
    color: var(--color-white);
    text-align: left;
    text-transform: uppercase;
    margin: 0 0 20px 0;
    word-wrap: break-word;
    hyphens: auto;
}

/* Answer options for secondary questions - single column, forced width */
.two-part-special-option {
    max-width: none !important;
    width: 100% !important;
    font-size: 18px;
    padding: 15px 20px;
    margin-bottom: 10px;
    text-align: center;
    word-wrap: break-word;
    hyphens: auto;
}

/* Navigation Buttons */
.btn-next-slide {
    background: #28a745;
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1rem;
    margin-top: 20px;
    transition: background-color 0.3s ease;
    font-weight: 500;
}

.btn-next-slide:hover {
    background: #218838;
}

/* Insight Slide - positioned relative to assessment container */
.assessment-container .quiz-slide-insight {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

.assessment-container .quiz-slide-insight.active {
    display: flex;
}

/* Insight Image Container */
.insight-image-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.insight-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.btn-next-question {
    position: absolute;
    bottom: 40px;
    right: 40px;
    z-index: 20;
    background: var(--color-yellow);
    color: var(--color-nav-gray);
    border: 2px solid var(--color-yellow);
    padding: 8px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1.8rem;
    font-weight: 500;
    box-shadow: none;
    -webkit-box-shadow: none;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-next-question:hover {
    background: transparent;
    color: var(--color-yellow);
}

/* Quiz Image - absolutely positioned */
.quiz-current-image {
    position: absolute;
    bottom: 0;
    left: 20px;
    width: 122px;
    height: 213px;
    object-fit: cover;
    z-index: 5;
}

/* Remove quiz sidebar */
.quiz-sidebar {
    display: none;
}

/* Profile View */
/* Profile View - Full Width Clickable Image */
.assessment-view-profile {
    padding: 0;
    width: 100%;
    height: 100%;
    display: none; /* Hidden by default like other assessment views */
}

.assessment-view-profile.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-image-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.profile-image-container:hover {
    opacity: 0.95;
}

.profile-image-display {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* Profile CTA Buttons */
.profile-cta-container {
    position: absolute;
    bottom: 9%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.profile-cta-wrapper {
    display: flex;
    gap: 20px;
    align-items: center;
}

.profile-cta-wrapper.single-cta {
    justify-content: flex-start;
}

.profile-cta-wrapper.dual-cta {
    justify-content: flex-start;
}

.profile-cta-btn {
    background: var(--color-yellow);
    color: var(--color-nav-gray);
    border: 2px solid var(--color-yellow);
    padding: 15px 30px;
    border-radius: 30px;
    cursor: pointer;
    text-align: center;
    font-size: 20px;
    line-height: 20px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    white-space: nowrap;
    min-width: 180px;
}

.profile-cta-btn:hover {
    background: transparent;
    color: var(--color-yellow);
}

.profile-cta-btn.profile-cta-single {
    /* Single button styling - can be larger if needed */
    min-width: 200px;
}

.profile-cta-btn.profile-cta-primary {
    /* First button in dual layout */
    min-width: 180px;
}

.profile-cta-btn.profile-cta-secondary {
    /* Second button in dual layout */
    min-width: 180px;
}

/* Legacy profile styles removed - now using full-width image layout */

/* Form View */
.assessment-view-form.active {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.assessment-view-form .view-content {
    flex: 1;
}

.form-content {
    width: 100%;
    margin: 0;
}

.form-container {
    width: 100%;
}

/* Assessment Form Integration */
.assessment-view-form .configurable-form-outer-wrapper {
    background: transparent;
    padding: 0;
    width: 100%;
}

.assessment-view-form .configurable-form-container {
    padding: 0;
    max-width: none;
    width: 100%;
}

.assessment-view-form .configurable-form-category-headline,
.assessment-view-form .configurable-form-subheading {
    display: none; /* Hide the form headline and subheading in assessment context */
}

.assessment-view-form .configurable-form-content {
    margin-top: 0;
    position: static;
    clip-path: none;
    -webkit-clip-path: none;
    width: 100%;
    max-width: 1000px;
    background-color: transparent;
}

.assessment-view-form .salesforce-form {
    width: 100%;
    max-width: none;
}

.assessment-view-form .configurable-form-content .salesforce-form #form-col4 .form-input input.pv-btn.sf-button{
    width: auto;
    font-size: 1.8rem;
    line-height: 1.8rem;
    padding: 8px 16px;
    font-weight: 500;
    max-width: 300px;
    white-space: normal;
}

/* HTML Content Support */
.default-content p,
.intro-content p,
.question-text p,
.insight-content p {
    margin-bottom: 15px;
}

.default-content span,
.intro-content span,
.question-text span,
.insight-content span {
    display: inline;
}

.default-content sup,
.intro-content sup,
.question-text sup,
.insight-content sup {
    font-size: 60%;
}

.default-content sub,
.intro-content sub,
.question-text sub,
.insight-content sub {
    vertical-align: sub;
    font-size: smaller;
}

.default-content strong,
.intro-content strong,
.question-text strong,
.insight-content strong {
    font-weight: bold;
}

.default-content em,
.intro-content em,
.question-text em,
.insight-content em {
    font-style: italic;
}



/* 1800px */
@media (max-width: 1919px) and (min-width: 1700px) {
    .assessment-container {
        transform: scale(0.9375); /* 1800/1920 */
        width: 1432px;
        height: 746px;
    }
}

/* 1600px */
@media (max-width: 1699px) and (min-width: 1024px) {
    .assessment-container {
        transform: scale(0.80); /* Tighter scaling for smaller viewports */
        width: 1432px;
        height: 746px;
    }
    
    /* Two-part-special responsive adjustments for 1099-1024px - More aggressive scaling */
    .two-part-special-main {
        width: 35%; /* 465px * 0.82 */
    }
    
    .two-part-special-main-question {
        font-size: 28px; /* 36px * 0.78 */
        line-height: 34px; /* 42px * 0.81 */
        min-height: 68px; /* 84px * 0.81 */
    }
    
    .two-part-special-secondary {
        width: 49%; /* 700px * 0.81 */
        grid-gap: 20px; /* 30px * 0.67 */
    }
    
    .two-part-special-question-text {
        font-size: 19px; /* 24px * 0.79 */
        line-height: 25px; /* 32px * 0.78 */
    }
    
    .two-part-special-option {
        font-size: 14px; /* 18px * 0.78 */
        padding: 10px 15px; /* 15px 20px * 0.75 */
    }
    
    .two-part-special-main .answer-option {
        max-width: 145px; /* 185px * 0.78 */
        padding: 10px 15px; /* 15px 20px * 0.75 */
    }
    
    /* Two-part responsive adjustments for 1099-1024px - More aggressive scaling */
    .two-part-main {
        width: 35%; /* Keep same as 1199-1100px for consistency */
    }

    .two-part-satisfaction:not([style*="display: none"]) {
        width: 49%;
    }
    
    .two-part-main-question {
        font-size: 28px; /* 36px * 0.78 */
        line-height: 34px; /* 42px * 0.81 */
        min-height: 68px; /* 84px * 0.81 */
    }
    
    .two-part-satisfaction .satisfaction-question {
        font-size: 19px; /* 24px * 0.79 */
        line-height: 25px; /* 32px * 0.78 */
    }
    
    .two-part-main .answer-option {
        max-width: 160px; /* 185px * 0.78 */
        padding: 8px 15px; /* 15px 20px * 0.75 */
    }
    
    .two-part-satisfaction .answer-option {
        font-size: 14px; /* 18px * 0.78 */
        padding: 8px 15px; /* 15px 20px * 0.75 */
    }
}

/* Ensure wrapper accommodates scaled content and prevents overflow */
@media (max-width: 1920px) and (min-width: 1024px) {
    .interactive-assessment-wrapper {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 40px 0;
        overflow: hidden;
        /* Ensure wrapper can contain the scaled container */
        min-height: 800px; /* Accommodate scaled height + padding */
    }
    
    /* If scaled container would exceed 75% viewport width, add horizontal scroll */
    .interactive-assessment-wrapper {
        overflow-x: auto;
    }
    
    /* Only apply body overflow when assessment is present */
    .page:has(.interactive-assessment-wrapper) body {
        overflow-x: auto;
    }
}

/* Fallback for browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 1) {
    .assessment-container {
        height: 746px; /* Fixed height based on design */
    }
}

/* Debug Panel */
.assessment-debug {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    font-size: 14px;
}

.assessment-debug h4 {
    margin: 0 0 10px 0;
    color: #856404;
}

.assessment-debug p {
    margin: 5px 0;
    color: #856404;
}

/* View Management with Cross-Fade Transitions */
.assessment-view {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    min-height: 400px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    z-index: 1;
    pointer-events: none; /* Prevent interaction when hidden */
}

.assessment-view.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
    pointer-events: auto; /* Allow interaction when active */
}

.assessment-view.transitioning-out {
    opacity: 0;
    visibility: visible;
    z-index: 1;
    pointer-events: none; /* Prevent interaction during transition */
}

/* Default View */
.assessment-view-default {
    text-align: center;
    padding: 40px 20px;
    position: relative;
    z-index: 2;
}

/* Background image for default view */
.assessment-view-default::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: contain;
    background-position: 0 100px;
    background-repeat: no-repeat;
    z-index: -1;
}

.default-subhead {
    font-size: 20px;
    line-height: 32px;
    color: var(--color-white);
    font-weight: bold;
    text-align: center;
    margin: 100px auto 40px;
}

.default-title {
    margin: 0 auto 30px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-weight: 600;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}

.default-title .small {
    display: block;
    font-size: 60px;
    line-height: 60px;
    color: var(--color-white);
    margin: 0;
}

.default-title .big {
    font-size: 60px;
    line-height: 66px;
    font-weight: 700;
    position: relative;
    margin: 30px auto;
    padding: 0 15px;
    color: var(--color-yellow);
    width: 100%;
    max-width: 670px;
    display: inline-block;
}

.default-title .big::before,
.default-title .big::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 7px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='6.328' viewBox='0 0 500 6.328' preserveAspectRatio='none'%3E%3Cpath d='M0,0C0,3.494,111.929,6.326,250,6.326S500,3.494,500,0' fill='%2329AAE1'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.default-title .big::before {
    top: -15px;
}

.default-title .big::after {
    bottom: -15px;
    transform: scaleY(-1); /* Flip the bottom border */
}

.default-content {
    font-size: 1.1rem;
    margin-bottom: 30px;
    color: #666;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Floating CTA Balloon Animation */
.floating-cta-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0 auto;
    max-width: 400px;
}

.cta-text-left,
.cta-text-right {
    font-size: 20px;
    font-weight: bold;
    color: var(--color-blue);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 40px;
}

.floating-cta-balloon {
    cursor: pointer;
    transition: transform 0.3s ease;
    animation: float 3s ease-in-out infinite;
    transform-origin: center bottom;
    max-width: 200px;
    height: auto;
    display: block;
}

/* Floating animation - balloon bobs up and down */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
}

/* Hover state - stop floating and scale up */
.floating-cta-balloon:hover {
    animation-play-state: paused;
    transform: scale(1.1) translateY(0px) !important;
}

/* Patient template overrides for CTA text color */
.page-template-page-deflatehae-patient .cta-text-left,
.page-template-page-deflatehae-patient .cta-text-right {
    color: var(--color-nav-gray);
}

/* Intro View */
.assessment-view-intro {
    padding: 0;
    position: relative;
    z-index: 2;
}

.assessment-view-intro .view-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
}

/* No background image for intro view */

.intro-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
}

.intro-title {
    margin: 0 auto 30px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-weight: 600;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}

.intro-title .small {
    display: block;
    font-size: 40px;
    line-height: 40px;
    color: var(--color-white);
    margin: 0;
}

.intro-title .big {
    font-size: 40px;
    line-height: 40px;
    font-weight: 700;
    position: relative;
    margin: 30px auto;
    padding: 0 15px;
    color: var(--color-yellow);
    text-transform: uppercase;
    width: 100%;
    display: inline-block;
}

.intro-title .big::before,
.intro-title .big::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 5px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='6.328' viewBox='0 0 500 6.328' preserveAspectRatio='none'%3E%3Cpath d='M0,0C0,3.494,111.929,6.326,250,6.326S500,3.494,500,0' fill='%2329AAE1'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.intro-title .big::before {
    top: -12px;
}

.intro-title .big::after {
    bottom: -10px;
    height: 4px;
    transform: scaleY(-1); /* Flip the bottom border */
}

.intro-paragraph {
    font-size: 30px;
    line-height: 36px;
    max-width: 1150px;
    margin: 0 auto;
    color: var(--color-white);
    font-weight: bold;
    text-align: center;
} 

/* Intro Image Container */
.intro-image-container {
    width: 100%;
    text-align: center;
    margin: 20px auto;
}

.intro-image {
    max-width: 70%;
    width: 100%;
    height: auto;
}

@media (max-width: 1365px) and (min-width: 1024px) {
    .default-title .big {
        max-width: 550px;
        font-size: 5rem;
    }

    .default-title .small {
        font-size: 5rem;
    }

    .default-title .big::before, .default-title .big::after {
        max-width: 400px;
    }

    .default-subhead {
        margin-top: 50px;
    }
}

/* Mobile-specific intro image handling */
@media (max-width: 1023px) {
    .interactive-assessment-wrapper{
        padding: 0;
    }

    .assessment-container {
        transform: scale(1);
        width: 100vw;
        height: 80vh;
        clip-path: none;
    }

    .assessment-view-default::before {
        background-position: 0 410px;
    }

    .floating-cta-balloon {
        max-width: 125px;
    }

    /* Mobile reordering for HCP - make title appear before subhead */
    .default-content {
        display: flex;
        flex-direction: column;
    }
    
    .default-subhead {
        order: 2; /* Move subhead after title */
        margin: 0 auto 40px; /* Adjust margins for new position */
    }
    
    .default-title {
        order: 1; /* Move title before subhead */
        margin: 0; /* Take the original subhead top margin */
    }
    
    .default-action {
        order: 3; /* Keep action buttons last */
    }

    .default-title .small{
        font-size: 40px;
    }

    .default-title .big{
        font-size: 50px;
    }

    .assessment-view-intro .btn-home {
        position: relative;
        top: unset;
        left: unset;
    }

    .quiz-home {
        left: 30px;
        top: 20px;
        padding: 0;
    }

    .quiz-title {
        padding: 10px 10px 10px;
        height: 72px;
    }

    .quiz-progress {
        top: 30px;
    }

    .intro-image-desktop {
        display: none !important;
    }

    .intro-image-mobile {
        display: block !important;
    }
    
    .profile-image-desktop {
        display: none !important;
    }

    .profile-image-mobile {
        display: block !important;
    }

    /* Change "CLICK" to "TAP" on mobile */
    .cta-text-left {
        font-size: 0; /* Hide original text */
    }

    .cta-text-right {
        font-size: 1.6rem;
    }
    
    .cta-text-left::before {
        content: "TAP";
        font-size: 1.6rem; /* Restore font size */
        font-weight: bold;
        color: var(--color-blue);
        text-transform: uppercase;
        letter-spacing: 1px;
        text-align: right
    }
}

@media (min-width: 1024px) {
    
    .intro-image-mobile {
        display: none !important;
    }
    
    .profile-image-desktop {
        display: block !important;
    }
    
    .profile-image-mobile {
        display: none !important;
    }
}

@media (max-width: 1023px) {
    .assessment-container {
        transform: scale(1);
        width: 100vw;
        height: 80vh;
        clip-path: none;
    }

    /* Default view mobile reordering - HCP only */

    .assessment-view-default::before {
        background-position: 0 80%;
    }

    .default-content {
        display: flex;
        flex-direction: column;
    }

    .default-title {
        order: 1;
        margin: 0 auto 20px;
    }

    .default-subhead {
        order: 2;
        margin: 20px auto 30px;
        max-width: 420px;
    }

    .default-action {
        order: 3;
    }

    .default-title .small{
        font-size: 4rem;
        line-height: 4.6rem;
    }

    .default-title .big{
        font-size: 4rem;
        line-height: 4.6rem;
    }

    .floating-cta-container {
        margin-top: 0;
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
    }

    .floating-cta-balloon {
        max-width: 125px;
    }

    .assessment-view-intro .btn-home {
        position: relative;
        top: unset;
        left: unset;
    }

    .intro-title .big,
    .intro-title .small {
        font-size: 3rem;
        line-height: 3.6rem;
    }

    .intro-paragraph {
        font-size: 2rem;
        line-height: 2.6rem;
    }

    .intro-navigation {
        justify-content: space-between;
        margin-top: 20px;
        width: 100%;
    }

    .quiz-home {
        left: 6%;
        top: 15px;
        padding: 0;
        font-weight: 400;
        font-size: 1.6rem;
        line-height: 1.6rem;
    }

    .quiz-title {
        padding: 10px 10px 10px;
        height: 50px;
        font-size: 1.8rem;
        line-height: 1.8rem;
    }

    .quiz-progress {
        top: 15px;
        right: 7%;
    }

    .progress-text{
        font-size: 1.6rem;
        line-height: 1.6rem;
    }

    /* Mobile Two-Part Question Overrides */
    
    /* General question text positioning and sizing on mobile */
    .question-text {
        font-size: 1.4rem;
        line-height: 2rem;
        max-width: 300px;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: 60px auto 20px !important;
        text-align: center !important;
    }

    /* Show question text on mobile for two-part and multi-select types */
    .question-type-two-part .question-text,
    .question-type-two-part_special .question-text,
    .question-type-multi-select .question-text {
        display: block !important;
        font-size: 1.8rem;
        line-height: 2.4rem;
    }

    .question-type-two-part_special.mobile-two-part-question .question-text {
        max-width: 320px;
    }

    .two-part-options {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        flex-direction: column;
        gap: 30px;
        align-items: center;
        width: 100%;
        padding: 0 20px;
    }

    .two-part-main .answer-option {
        padding: 8px 20px;
        font-size: 1.8rem;
    }

    /* Quiz current image positioning on mobile */
    .quiz-current-image{
        bottom: -30px;
        left: 10px;
        width: 82px;
        height: 143px;
    }

    /* Multi-select options layout on mobile */
    .multi-select-options.multi-select-two-columns, 
    .single-select-options.multi-select-two-columns{
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .single-select-options.multi-select-two-columns .answer-option{
        width: 100%;
        font-size: 1.8rem;
        padding: 8px 20px;
        margin: 6px 0;
    }

    /* General answer-option mobile sizing for all question types */
    .answer-option {
        font-size: 1.8rem !important;
        padding: 8px 20px !important;
    }
    
    /* Answer options positioning */
    .answer-options {
        top: 55%;
    }
    
    .multi-select-column {
        width: 100%;
    }

    /* Hide the inline question text for both two-part types on mobile to avoid duplication */
    .question-type-two-part .two-part-main-question,
    .question-type-two-part .two-part-options .two-part-main-question,
    .question-type-two-part-special .two-part-special-main-question,
    .question-type-two-part-special .two-part-special-options .two-part-special-main-question,
    .question-type-two-part-special .two-part-special-main .two-part-special-main-question {
        display: none !important;
    }

    /* Main question container on mobile */
    .two-part-main {
        width: 100%;
        max-width: 400px;
        gap: 12px;
    }

    /* Main question stays in place on mobile */
    .two-part-main.answered {
        transform: translateX(0) !important; /* Override desktop shift */
    }

    /* Secondary questions slide in from bottom right and position under main */
    .two-part-satisfaction {
        width: 100%;
        max-width: 400px;
        transform: translateX(100vw) translateY(0px); /* Start from right edge */
        opacity: 0;
        transition: opacity 0.3s ease 0.2s, transform 0.4s ease 0.3s;
        position: relative;
        margin-top: 20px;
    }

    .two-part-satisfaction:not([style*="display: none"]) {
        opacity: 1;
        transform: translateX(0) translateY(0px); /* Slide to center position */
    }

    /* Remove vertical line on mobile */
    .two-part-satisfaction::before {
        display: none;
    }

    /* Show satisfaction question text on mobile since main question is at top */
    .question-type-two-part .two-part-satisfaction .satisfaction-question {
        display: block !important;
        font-size: 1.8rem;
        line-height: 2.4rem;
        color: var(--color-white);
        margin: 0 0 20px 0;
        text-align: center;
        text-transform: uppercase;
    }

    /* Two-part main and special question sizing */
    .two-part-special-main-question, 
    .two-part-main-question{
        font-size: 2.0rem;
        line-height: 2.6rem;
        max-width: 270px;
        margin: 0 auto;
        text-align: center;
    }

    /* Mobile Two-Part Special Questions */
    .two-part-special-options {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: translate(-50%, -200%) !important;
        flex-direction: column;
        gap: 20px;
        align-items: center;
        width: 100%;
        padding: 0 20px;
    }

    .two-part-special-question-text{
        font-size: 1.6rem;
        line-height: 2.2rem;
        text-align: center;
    }

    .two-part-special-main .answer-option {
        padding: 8px 20px;
        margin: 10px auto 0;
        min-width: 120px;
    }

    .two-part-special-main {
        width: 300px;
    }

    /* Main question container for special on mobile */
    .two-part-special-main {
        width: 100%;
        max-width: 400px;
        gap: 12px;
    }

    /* Main question stays in place on mobile for special questions */
    .two-part-special-main.answered {
        transform: translateX(0) !important; /* Override desktop shift */
    }

    /* Secondary questions for special - slide in from bottom right */
    .two-part-special-secondary {
        width: 100%;
        max-width: 400px;
        grid-template-columns: 1fr; /* Stack vertically on mobile */
        grid-gap: 0;
        transform: translateX(100vw) translateY(0px); /* Start from right edge */
        opacity: 0;
        position: relative;
        margin-top: 0;
    }

    .two-part-special-secondary:not([style*="display: none"]) {
        opacity: 1;
        transform: translateX(0) translateY(0px); /* Slide to center position */
    }

    /* Remove vertical line on mobile for special questions */
    .two-part-special-secondary::before {
        display: none;
    }

    /* Stack secondary questions vertically on mobile */
    .two-part-special-question-two,
    .two-part-special-question-three {
        width: 100%;
        margin-bottom: 20px;
        gap: 10px;
    }

    /* Fix answer options positioning on mobile */
    .answer-options {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin-top: 10px !important;
        width: 100%;
    }

    /* Adjust button sizing for mobile */
    .two-part-satisfaction .answer-option,
    .two-part-special-option {
        max-width: 300px !important;
        width: 100%;
        font-size: 1.6rem;
        padding: 8px 20px;
        margin: 0 auto;
    }

    /* Insight container sizing on mobile */
    .insight-image-container{
        width: 100%;
        height: 100%;
        max-height: 65%;
        max-width: 85%;
        margin: 0 auto;
        top: 50%;
        transform: translateY(-50%);
    }
    
    /* Button positioning on mobile */
    .btn-next-question{
        right: 50%;
        transform: translateX(50%);
    }

    /* Mobile Multi-Select Question Styles */
    .question-type-multi-select .multi-select-options {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        gap: 0;
    }

    /* Remove gaps between columns on mobile */
    .question-type-multi-select .multi-select-options.multi-select-two-columns {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .question-type-multi-select .multi-select-column {
        width: 100%;
        margin: 0;
        gap: 0;
    }

    .question-type-multi-select .multi-select-column-first,
    .question-type-multi-select .multi-select-column-second {
        flex: none !important;
        width: 100% !important;
        margin: 0;
        gap: 0;
    }

    .question-type-multi-select .multi-select-column-first{
        margin-top: 20px;
    }

    .question-type-multi-select .multi-select-instruction {
        font-size: 1.4rem;
        color: #fff;
        margin: 10px 0;
        font-weight: 500;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        text-align: center;
    }

    .question-type-multi-select .multi-select-option {
        display: block !important;
        width: 100%;
        padding: 0;
        margin: 0;
        background: none;
        border: none;
        border-bottom: 1px solid var(--color-yellow);
        position: relative;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .question-type-multi-select .multi-select-option:first-child {
        border-top: 1px solid var(--color-yellow);
    }

    /* Remove top border from second column's first option to avoid double border */
    .question-type-multi-select .multi-select-column-second .multi-select-option:first-child {
        border-top: none;
    }

    /* Hide the custom circle styling on mobile */
    .question-type-multi-select .multi-select-option::before {
        display: none;
    }

    .question-type-multi-select .checkbox-label {
        display: block;
        width: 100%;
        padding: 15px 20px;
        font-size: 1.6rem;
        font-weight: 400;
        color: #fff;
        text-align: center;
        margin: 0;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    /* Selected state */
    .question-type-multi-select .multi-select-option.checked {
        background-color: var(--color-yellow);
    }

    .question-type-multi-select .multi-select-option.checked .checkbox-label {
        color: var(--color-nav-gray);
    }

    /* Multi-select continue button positioning and sizing */
    .question-type-multi-select .multi-select-continue {
        position: fixed;
        bottom: 40px;
        right: 50%;
        transform: translateX(50%);
        z-index: 20;
        padding: 8px 20px;
        font-size: 1.8rem;
    }

    .multi-select-options.multi-select-two-columns .multi-select-instruction {
        top: -20px;
    }

    .multi-select-options.multi-select-two-columns .checkbox-label {
        font-size: 1.4rem; /* Smaller font size for two-column */
        line-height: 2rem; /* Specific line height */
        font-weight: normal; /* Not bold */
        margin-top: 2px; /* Slight adjustment to align with checkbox top */
        padding: 8px 5px;
    }

    .profile-image-container{
        width: 100%;
        max-height: 60vh;
        max-width: 80vw;
        height: auto;
        margin: 0 auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
    }

    /* Mobile Profile CTA Button Layout */
    .profile-cta-wrapper.dual-cta {
        flex-direction: column;
        gap: 15px;
        align-items: center;
        justify-content: center;
    }

    .profile-cta-btn.profile-cta-primary,
    .profile-cta-btn.profile-cta-secondary {
        padding: 8px 20px;
        font-size: 1.8rem;
        min-width: 200px;
        width: 100%;
        max-width: 300px;
    }

    .profile-cta-container{
        bottom: 5%;
    }

    /* Hide home button in form view on mobile */
    .assessment-view-form .btn-home.quiz-home {
        display: none;
    }

    /* Form view quiz title minimum width on mobile */
    .assessment-view-form .quiz-title {
        min-width: 350px;
    }
    
    .assessment-view-form .configurable-form-content {
        padding-top: 0;
    }

    /* Mobile checkbox group override for assessment forms */
    .assessment-view-form .checkbox-group-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 auto 20px !important;
    }

    .assessment-view-form .checkbox-option {
        flex: 0 1 calc(50% - 5px) !important;
        min-width: calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
    }
}

@media screen and (max-width: 767px) {
    .assessment-view-form .sf-form-label .form-title {
        font-size: 1.4rem;
        line-height: 1.8rem;
    }

    .assessment-view-form .required-fields-container p.pv-p.center.italic {
        font-size: 1.2rem;
        line-height: 1.2rem;
    }

    .assessment-view-form .input-field {
        height: 35px;
    }

    .assessment-view-form.active {
        overflow-y: scroll;
    }
}

@media screen and (max-width: 400px) {
    .insight-image {
        max-height: 50vh;
    }

    .default-title .big,
    .intro-title .big {
        font-size: 2.6rem;
        line-height: 3.4rem;
        margin: 20px auto;
    }

    .default-title .small,
    .intro-title .small {
        font-size: 2.6rem;
        line-height: 3.4rem;
    }

    .default-subhead {
        font-size: 1.8rem;
        line-height: 2.8rem;
        margin: 0 auto;
    }

    .intro-paragraph {
        font-size: 1.4rem;
        line-height: 2.2rem;
        margin: 0 auto;
    }

    .assessment-view-intro .btn-home {
        font-size: 1.6rem !important;
        line-height: 2rem !important;
        padding: 6px 20px !important;
    }

    .progress-to-quiz,
    .btn-next-question,
    .question-type-multi-select .multi-select-continue {
        font-size: 1.6rem !important;
        line-height: 2rem !important;
        padding: 6px 20px !important;
    }

    .question-type-two-part_special.mobile-two-part-question .question-text,
    .question-type-multi-select .question-text {
        font-size: 1.4rem;
        line-height: 2rem;
        margin-top: 50px !important;
    }

    .two-part-special-question-text {
        font-size: 1.2rem;
        line-height: 1.8rem;
        margin-bottom: 10px;
    }

    .answer-option {
        font-size: 1.2rem !important;
        line-height: 1.8rem !important;
        padding: 6px 20px !important;
    }

    .question-type-two-part .question-text,
    .question-type-two-part .two-part-satisfaction .satisfaction-question {
        font-size: 1.4rem;
        line-height: 2rem;
        padding: 0;
        margin-bottom: 0;
    }

    .two-part-options {
        gap: 10px;
    }

    .question-type-multi-select .multi-select-instruction {
        font-size: 1.4rem !important;
        line-height: 2rem !important;
        margin-bottom: 10px !important;
    }

    .question-type-multi-select .checkbox-label {
        font-size: 1.2rem !important;
        line-height: 1.6rem !important;
        padding: 7px 20px !important;
    }

    .profile-cta-btn.profile-cta-primary, 
    .profile-cta-btn.profile-cta-secondary {
        padding: 8px 20px !important;
        font-size: 1.4rem !important;
        line-height: 2rem !important;
    }

    .profile-image-mobile {
        max-height: 50vh;
    }

    .profile-cta-btn {
        padding: 8px 20px;
        border-radius: 30px;
        font-size: 1.4rem;
        line-height: 1.8rem;
    }
    
}

/* Mobile Safari specific fixes to prevent crashes */
@supports (-webkit-touch-callout: none) {
    /* iPhone Safari specific fixes */
    .assessment-container {
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        -webkit-transform: translateZ(0); /* Force hardware acceleration */
        transform: translateZ(0);
    }
    
    .assessment-view {
        -webkit-overflow-scrolling: touch;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* Prevent text size adjustment on orientation change */
    .assessment-container,
    .assessment-view,
    .quiz-slide,
    .answer-option,
    .question-text {
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    
    /* Prevent zoom on input focus */
    .assessment-view-form input,
    .assessment-view-form textarea,
    .assessment-view-form select {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
}
.chart-image-container-mobile {
    display: none;
}

.chart-mobile-content {
    display: none;
}

.chart-mobile-disclaimer {
    font-size: 12px;
    font-style: italic;
    text-align: center;
    margin-top: -30px;
    color: var(--color-nav-gray);
}

@media screen and (max-width: 767px) {
    .chart-image-container-mobile {
        display: block;
    }

    .chart-image-container {
        display: none;
    }

    .chart-mobile-content {
        display: block;
        width: 100%;
        padding: 0;
    }

    .chart-mobile-copy {
        text-align: center;
        margin-bottom: 0;
        height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
    }

    .chart-mobile-description-container {
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
    }

    .chart-mobile-description {
        font-size: 1.6rem;
        line-height: 1.4;
        font-weight: 700;
        color: var(--color-nav-gray);
        margin: 0;
        opacity: 0;
        transition: opacity 0.3s ease;
        padding: 0 20px 40px;
        width: 100%;
        height: 100%;
        display: none;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
    }

    /* Show first description by default but transparent */
    .chart-mobile-description.description-start {
        display: flex;
    }

    .chart-mobile-description.active {
        opacity: 1;
        display: flex;
    }

    .chart-mobile-title {
        font-size: 2.4rem;
        line-height: 1.2;
        font-weight: 700;
        margin: 0;
        transition: opacity 0.3s ease;
        height: 60px;
        display: none;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    .chart-mobile-title.title-start {
        color: var(--color-blue);
        display: flex;
    }

    .chart-mobile-title.title-middle {
        color: var(--color-nav-gray);
    }

    .chart-mobile-title.title-end {
        color: var(--color-red);
    }

    /* States for titles */
    .chart-mobile-title.active {
        display: flex;
    }

    .chart-image-container-mobile {
        position: relative;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }

    .chart-mobile-background {
        width: 100%;
        height: auto;
        display: block;
        margin: 0;
    }

    .chart-touch-points {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    .touch-point {
        position: absolute;
        width: 68px;
        height: 68px;
        transform: translate(-50%, -50%);
        pointer-events: auto;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .touch-point svg {
        width: 68px;
        height: 68px;
        max-width: none;
        max-height: none;
    }

    /* Default circle colors */
    .touch-point-blue #Ellipse_263-2 {
        fill: var(--color-blue);
    }

    .touch-point-gray #Ellipse_263-2 {
        fill: var(--color-nav-gray);
    }

    .touch-point-red #Ellipse_263-2 {
        fill: var(--color-red);
    }

    /* Default inner circle is white */
    .touch-point #Ellipse_266-2 {
        fill: var(--color-white);
        transition: fill 0.3s ease;
    }

    /* Active states - inner circle takes outer circle color */
    .touch-point-blue.active #Ellipse_266-2 {
        fill: var(--color-blue);
    }

    .touch-point-gray.active #Ellipse_266-2 {
        fill: var(--color-nav-gray);
    }

    .touch-point-red.active #Ellipse_266-2 {
        fill: var(--color-red);
    }

    /* Circle positions */
    .touch-point-blue {
        left: 7%;
        top: 75%;
    }

    .touch-point-gray {
        left: 28%;
        top: 8%;
    }

    .touch-point-red {
        left: 91%;
        top: 75%;
    }
}