/* ============================================
   PRODUCTION ORGANISMS - CONSOLIDATED
   Purposeful Media Promotions Design System
   Version: 1.0
   Date: November 5, 2025

   Purpose: Consolidated organism component styles for CMS/production deployment
   Dependencies: variables-v4.0-20251027.css, production-molecules.css

   THIS FILE CONSOLIDATES:
   - organisms-headers.css (Banner headers - main, LP variants)
   - organisms-heroes.css (Hero sections - carousel, simple, ATF variants)
   - organisms-footers.css (Footer components - simple, main)
   - organisms-navigation.css (Navigation components)
   - organisms-content-2column-contact.css (Contact sections)
   - organisms-content-2column-contact-integrated.css (Integrated contact)
   - organisms-content-2column-graphic.css (Graphic content sections)
   - organisms-pillar-section.css (Pillar page sections)
   - organisms-section-contactus.css (Contact us sections)
   - organisms-section-faq-group.css (FAQ accordion sections)
   - organisms-section-resources.css (Resource sections)
   - organisms-sections.css (General sections)
   - organisms-text-block.css (Text block organisms)
   - blog-group-organism-v2.css (Blog listing organisms)

   DEPLOYMENT NOTES:
   - For development: Use individual component CSS files (easier maintenance)
   - For production/CMS: Use this consolidated file (fewer HTTP requests)
   - All @import statements for variables have been removed (load separately)
   - Requires production-molecules.css for molecule dependencies
   - Total lines: ~6000

   USAGE:
   <link rel="stylesheet" href="styles/variables-v4.0-20251027.css">
   <link rel="stylesheet" href="styles/production-molecules.css">
   <link rel="stylesheet" href="styles/production-organisms.css">
   ============================================ */

/*
 * ORGANISMS - HEADERS
 * Purposeful Media Design System
 * BannerHeader Component Styles
 *
 * Based on Figma specifications:
 * - Header height: 125px (desktop/tablet), 100px (mobile)
 * - Gold bottom border: 4px
 * - Menu text: 30px font, 45px line height, 800 weight
 *
 * Breakpoints:
 * - Mobile: 380-767px
 * - Tablet: 768-1149px
 * - Desktop: 1150-1919px
 * - DesktopPlus: 1920px+
 *
 * NOTE: Google Fonts should be loaded in HTML head, not through CSS imports
 */


/* ============================================
   BANNER HEADER COMPONENT
   ============================================ */

/* Base Container */
.banner-header {
    position: relative;
    width: 100%;
    background-color: var(--color-primary-700);
    height: 128px; /* 124px body + 4px border */
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: var(--space-1) solid var(--color-accent-500);
    z-index: 1000;
}

/* Inner Container */
.banner-header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    margin: 0; /* Ensure no margin */
    position: relative;
}

/* Logo Container */
.banner-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.banner-header__logo-link {
    display: flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
}

.banner-header__logo-image {
    display: none;
    max-width: none;
    height: auto;
}

/* Show appropriate logo variant per breakpoint */
.banner-header__logo-image--mobile {
    display: none;
}

.banner-header__logo-image--tablet {
    display: none;
}

.banner-header__logo-image--desktop {
    display: none;
}

/* Menu Wrapper */
.banner-header__menu-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-grow: 1;
    overflow: visible;
}

/* Menu Container */
.banner-header__menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-primary-700);
    overflow: visible;
    gap: 30px; /* Reduced from 40px to prevent overflow at narrower desktop widths */
}

/* Menu Items */
.banner-header__menu-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    flex-shrink: 0;
    position: relative;
}

/* Menu Links - H2/30 Navigation Typography */
.banner-header__menu-link {
    font-family: var(--nav-font-family);
    font-weight: var(--nav-font-weight);
    font-size: var(--nav-h2-font-size);
    line-height: var(--nav-h2-line-height);
    text-transform: var(--nav-h2-text-transform);
    color: var(--color-white, #ffffff); /* Default: white (matches footer) */
    text-decoration: none;
    text-shadow: var(--shadow-strong);
    white-space: var(--nav-h2-white-space);
    transition: color 0.3s ease; /* Matches footer transition */
}

.banner-header__menu-link:hover {
    color: var(--color-accent-500, #d4af37); /* Hover: accent gold (matches footer) */
}

.banner-header__menu-link--active,
.banner-header__menu-link:active {
    color: var(--color-accent-600, #b39226); /* Active: darker accent (matches footer) */
}

/* Dropdown Container */
.banner-header__dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    background-color: var(--dropdown-bg-default);
    min-width: 200px;
    box-shadow: var(--dropdown-box-shadow);
    border-radius: var(--dropdown-border-radius);
    padding: var(--dropdown-padding-block) var(--dropdown-padding-inline-end) var(--dropdown-padding-block) var(--dropdown-padding-inline-start);
    display: none;
    overflow: var(--dropdown-overflow);
    z-index: var(--z-dropdown);
}

/* Dropdown Container on Hover */
.banner-header__dropdown:hover {
    background-color: var(--dropdown-bg-hover);
}

/* Dropdown Container with Active Link */
.banner-header__dropdown:has(.banner-header__dropdown-link--active) {
    background-color: var(--dropdown-bg-active);
}

.banner-header__dropdown-link {
    display: block;
    margin-bottom: var(--dropdown-link-gap);
    font-family: var(--dropdown-font-family);
    font-weight: var(--dropdown-font-weight);
    font-size: var(--dropdown-font-size);
    line-height: var(--dropdown-line-height);
    text-transform: var(--dropdown-text-transform);
    white-space: var(--dropdown-white-space);
    color: var(--dropdown-link-default);
    text-decoration: none;
    transition: all 0.2s ease;
}

.banner-header__dropdown-link:last-child {
    margin-bottom: 0;
}

.banner-header__dropdown-link:hover {
    color: var(--dropdown-link-hover);
    text-decoration: var(--dropdown-link-hover-decoration);
    text-decoration-style: var(--dropdown-link-hover-decoration-style);
}

/* Active dropdown link */
.banner-header__dropdown-link--active {
    color: var(--dropdown-link-active);
}

/* Disabled sibling links when one is active */
.banner-header__dropdown:has(.banner-header__dropdown-link--active) .banner-header__dropdown-link:not(.banner-header__dropdown-link--active) {
    color: var(--dropdown-link-sibling-disabled);
}

/* Hamburger Menu Button */
.banner-header__hamburger {
    display: none;
    width: 54px;
    height: 54px;
    background: none;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.banner-header__hamburger-icon {
    width: 54px; /* Match button width */
    height: 54px; /* Match button height */
    background-image: url('../assets/svg/ui-icons/purposeful-sprite-ui.svg');
    background-size: calc(1536px * 0.21) calc(512px * 0.21); /* Scale sprite to ~323px x 107px */
    background-position: calc(-1024px * 0.21) 0px; /* Hamburger position scaled: (1024,0) */
    background-repeat: no-repeat;
    filter: brightness(0) saturate(100%) invert(100%); /* Makes it white */
}

/* Close icon state */
.banner-header__hamburger--active .banner-header__hamburger-icon {
    background-position: calc(-1280px * 0.21) 0px; /* Close icon position scaled: (1280,0) */
}

/* Mobile Menu Dropdown */
.banner-header__mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-white);
    box-shadow: var(--shadow-standard);
    display: none;
    z-index: var(--z-dropdown);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dropdown-transition-duration) var(--dropdown-transition-timing),
                opacity var(--dropdown-transition-duration) var(--dropdown-transition-timing);
    opacity: 0;
}

.banner-header__mobile-menu--active {
    display: block;
    max-height: 800px;
    opacity: 1;
}

/* Mobile Menu Styles */
.mobile-menu {
    padding: 0;
}

.mobile-menu__link {
    display: block;
    padding: 16px 24px;
    font-family: var(--nav-font-family);
    font-weight: var(--nav-font-weight);
    font-size: var(--nav-h4-font-size);
    line-height: var(--nav-h4-line-height);
    text-transform: var(--nav-h4-text-transform);
    color: var(--nav-h4-dropdown-default);
    text-decoration: none;
    border-bottom: 1px solid var(--color-light);
    transition: all 0.2s ease;
}

.mobile-menu__link:hover {
    background-color: var(--color-off-white);
    color: var(--nav-h4-dropdown-hover);
}

.mobile-menu__link--active {
    color: var(--nav-h4-dropdown-active);
    font-weight: var(--nav-font-weight);
    border-left: var(--space-1) solid var(--color-accent-500);
}

.mobile-menu__submenu {
    position: relative;
}

.mobile-menu__submenu-items {
    background-color: var(--color-off-white);
    display: none;
}

.mobile-menu__submenu--expanded .mobile-menu__submenu-items {
    display: block;
}

.mobile-menu__sublink {
    display: block;
    padding: 12px 24px 12px 48px;
    font-family: var(--nav-font-family);
    font-weight: var(--nav-font-weight);
    font-size: var(--nav-h5-font-size);
    line-height: var(--nav-h5-line-height);
    text-transform: var(--nav-h5-text-transform);
    color: var(--nav-h5-simple-default);
    text-decoration: none;
    transition: all 0.2s ease;
}

.mobile-menu__sublink:hover {
    color: var(--nav-h5-simple-hover);
    background-color: var(--color-neutral-100);
}

/* CTA Container for Landing Page Variants */
.banner-header__cta {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Phone Link Styling */
.banner-header__phone {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--color-accent-500);
    text-decoration: none;
    transition: opacity 0.3s ease;
    font-size: 36px;
    line-height: 1.2;
}

.banner-header__phone:hover {
    opacity: 0.85;
}

/* Button Styling for CTA Headers */
.banner-header__button {
    display: inline-block;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 2px solid transparent;
    border-radius: var(--radius-small);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    user-select: none;
}

/* Button Size - Medium */
.banner-header__button--medium {
    font-size: 16px;
    padding: var(--padding-button);
    min-width: 120px;
}

/* Button Type - Secondary (Gold) */
.banner-header__button--secondary {
    background-color: var(--button-secondary-bg);
    color: var(--color-primary-700);
    border-color: var(--button-secondary-bg);
}

.banner-header__button--secondary:hover {
    background-color: var(--button-secondary-hover);
    border-color: var(--button-secondary-hover);
}

.banner-header__button--secondary:active {
    background-color: var(--button-secondary-active);
    border-color: var(--button-secondary-active);
}

/* ============================================
   DESKTOP PLUS BREAKPOINT (1920px+)
   ============================================ */
@media (min-width: 1920px) {
    .banner-header__container {
        max-width: 1900px;
        padding: 0 24px; /* Updated to 24px left/right */
    }

    .banner-header__logo {
        width: 481px;
        height: 93px;
    }

    /* Show desktop logo only (larger size for DesktopPlus) */
    .banner-header__logo-image--desktop {
        display: block;
        width: 481px;
        height: 93px;
    }

    .banner-header__menu-wrapper {
        padding: 0 32px;
    }

    .banner-header__menu {
        width: 894px;
    }
}

/* ============================================
   DESKTOP BREAKPOINT (1150-1919px)
   ============================================ */
@media (min-width: 1150px) and (max-width: 1919px) {
    .banner-header__container {
        padding: 0 24px; /* Updated to 24px left/right */
    }

    .banner-header__logo {
        width: 460px;
        height: 89px;
    }

    /* Show desktop logo only */
    .banner-header__logo-image--desktop {
        display: block;
        width: 460px;
        height: 89px;
    }

    /* Phone number responsive sizing */
    .banner-header__phone {
        font-size: 32px;
    }

    .banner-header__menu {
        min-width: 615px;
        max-width: 886px;
        flex-grow: 1; /* Restored to allow menu to expand, now with 30px gap */
    }
}

/* ============================================
   TABLET BREAKPOINT (768-1149px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1149px) {
    .banner-header__container {
        padding: 0 24px; /* Already correct at 24px left/right */
    }

    .banner-header__logo {
        width: 289px;
        height: 62px;
    }

    /* Show tablet logo only */
    .banner-header__logo-image--tablet {
        display: block;
        width: 417.26px;
        height: 89px;
    }

    /* Phone number responsive sizing */
    .banner-header__phone {
        font-size: 24px;
    }

    /* Hide desktop menu, show hamburger */
    .banner-header__menu {
        display: none;
    }

    .banner-header__hamburger {
        display: flex;
    }

    /* Tablet Mobile Menu - Card Style Dropdown */
    .banner-header__mobile-menu {
        width: var(--dropdown-tablet-card-width);
        left: auto;
        right: var(--dropdown-tablet-position-right);
        background-color: var(--dropdown-tablet-card-bg-default);
        border-radius: var(--dropdown-tablet-card-border-radius);
        box-shadow: var(--dropdown-tablet-card-box-shadow);
        overflow: var(--dropdown-tablet-card-overflow);
    }

    .banner-header__mobile-menu:hover {
        background-color: var(--dropdown-tablet-card-bg-hover);
    }

    .mobile-menu {
        padding: var(--dropdown-tablet-card-padding-block) var(--dropdown-tablet-card-padding-inline-end) var(--dropdown-tablet-card-padding-block) var(--dropdown-tablet-card-padding-inline-start);
    }

    .mobile-menu__link {
        font-size: var(--dropdown-tablet-item-font-size);
        line-height: var(--dropdown-tablet-item-line-height);
        text-transform: var(--dropdown-tablet-item-text-transform);
        min-height: var(--dropdown-tablet-item-min-height);
        margin-bottom: var(--dropdown-tablet-card-gap-items);
        padding: 0;
        border-bottom: none;
        /* Keep mobile menu link color states */
        color: var(--nav-h4-dropdown-default);
        background-color: transparent;
    }

    .mobile-menu__link:hover {
        color: var(--nav-h4-dropdown-hover);
        background-color: transparent;
    }

    .mobile-menu__link--active {
        color: var(--nav-h4-dropdown-active);
        background-color: transparent;
    }

    /* Submenu items inherit container background */
    .mobile-menu__submenu-items {
        background-color: transparent; /* Inherits from container hover */
    }

    .mobile-menu__sublink {
        font-size: var(--dropdown-tablet-item-font-size);
        line-height: var(--dropdown-tablet-item-line-height);
        min-height: var(--dropdown-tablet-item-min-height);
        margin-bottom: var(--dropdown-tablet-card-gap-items);
        padding-left: 24px;
        /* Keep mobile menu link color states */
        color: var(--nav-h4-dropdown-default);
        background-color: transparent;
    }

    .mobile-menu__sublink:hover {
        color: var(--nav-h4-dropdown-hover);
        background-color: transparent;
    }
}

/* ============================================
   MOBILE BREAKPOINT (380-767px)
   ============================================ */
@media (max-width: 767px) {
    .banner-header {
        height: 128px; /* Updated to 128px (124px + 4px border) */
    }

    .banner-header__container {
        padding: 0 24px; /* Updated to 24px left/right */
    }

    .banner-header__logo {
        width: 200px;
        height: 43px;
    }

    /* Show mobile logo only */
    .banner-header__logo-image--mobile {
        display: block;
        width: 179.23px;
        height: 89px;
    }

    /* Phone number responsive sizing */
    .banner-header__phone {
        font-size: 18px;
    }

    /* Button responsive sizing */
    .banner-header__button--medium {
        font-size: 14px;
        padding: var(--padding-button-small);
        min-width: 100px;
    }

    /* Hide desktop menu, show hamburger */
    .banner-header__menu {
        display: none;
    }

    .banner-header__hamburger {
        display: flex;
    }

    .banner-header__hamburger-icon {
        /* Smaller size for mobile: match close icon scaling */
        background-size: calc(1536px * 0.21) calc(512px * 0.21);
        background-position: calc(-1024px * 0.21) 0px;
    }

    .banner-header__hamburger--active .banner-header__hamburger-icon {
        background-position: calc(-1280px * 0.21) 0px;
    }

    /* Mobile Menu - Accordion Variant Styling */
    .banner-header__mobile-menu {
        background-color: var(--dropdown-tablet-accordion-bg-default, #eceeef);
        border-radius: var(--dropdown-tablet-accordion-border-radius, 8px);
    }

    .banner-header__mobile-menu--active {
        background-color: var(--dropdown-tablet-accordion-bg-default, #eceeef);
    }

    .banner-header__mobile-menu:hover {
        background-color: var(--dropdown-tablet-accordion-bg-hover, #f4ebcd);
    }

    .mobile-menu {
        padding: var(--dropdown-tablet-accordion-padding-block, 20px) var(--dropdown-tablet-accordion-padding-inline-end, 16px) var(--dropdown-tablet-accordion-padding-block, 20px) var(--dropdown-tablet-accordion-padding-inline-start, 24px);
    }

    .mobile-menu__link {
        font-size: var(--dropdown-tablet-item-font-size, 21px);
        line-height: var(--dropdown-tablet-item-line-height, 30.5px);
        text-transform: var(--dropdown-tablet-item-text-transform, none);
        min-height: var(--dropdown-tablet-item-min-height, 44px);
        margin-bottom: var(--dropdown-tablet-accordion-gap-items, 10px);
        color: var(--dropdown-tablet-item-color-default, #1b1464);
        background-color: transparent;
        border-bottom: none;
    }

    .mobile-menu__link:hover {
        color: var(--dropdown-tablet-item-color-hover, #1d50de);
        background-color: transparent;
    }

    .mobile-menu__link--active {
        color: var(--nav-h4-dropdown-active);
        background-color: transparent;
    }

    .mobile-menu__submenu-items {
        background-color: transparent;
    }

    .mobile-menu__sublink {
        font-size: var(--dropdown-tablet-item-font-size, 21px);
        line-height: var(--dropdown-tablet-item-line-height, 30.5px);
        min-height: var(--dropdown-tablet-item-min-height, 44px);
        margin-bottom: var(--dropdown-tablet-accordion-gap-items, 10px);
        padding-left: 24px;
        color: var(--nav-h4-dropdown-default);
        background-color: transparent;
    }

    .mobile-menu__sublink:hover {
        color: var(--nav-h4-dropdown-hover);
        background-color: transparent;
    }

    .mobile-menu__trigger {
        cursor: pointer;
    }
}

/* ============================================
   HEADER TYPE VARIANTS
   ============================================ */

/* LP-Clean: Logo only */
.banner-header--lp-clean .banner-header__menu-wrapper,
.banner-header--lp-clean .banner-header__hamburger,
.banner-header--lp-clean .banner-header__cta {
    display: none;
}

/* LP-CTA: Logo + CTA Button */
.banner-header--lp-cta .banner-header__menu-wrapper,
.banner-header--lp-cta .banner-header__hamburger {
    display: none;
}

.banner-header--lp-cta .banner-header__cta {
    display: flex;
}

/* LP-Contact: Logo + Phone */
.banner-header--lp-contact .banner-header__menu-wrapper,
.banner-header--lp-contact .banner-header__hamburger {
    display: none;
}

.banner-header--lp-contact .banner-header__cta {
    display: flex;
}

/* ============================================
   STICKY HEADER BEHAVIOR
   ============================================ */
.banner-header--sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Add padding to body when header is sticky */
body.has-sticky-header {
    padding-top: 128px; /* Updated to match new header height */
}

@media (max-width: 767px) {
    body.has-sticky-header {
        padding-top: 128px; /* Updated to match new mobile header height */
    }
}/* ============================================
   ORGANISMS - HEROES
   Purposeful Media Design System
   Version: 4.0
   Last Modified: 2025-10-30
   Dependencies: variables-v4.0-20251027.css

   Components:
   - Hero Carousel
   - Hero Simple (Default)
   - Hero Simple Reverse
   - Hero ATF Center
   ============================================ */

/* Import dependencies */

/* ==========================================================================
   1. HERO CAROUSEL
   Full-screen carousel with navigation controls
   ========================================================================== */

.hero-carousel {
  width: 100%;
  height: 100vh;
  min-height: 600px;
  max-height: 1080px;
  position: relative;
  overflow: hidden;
  background-color: var(--color-neutral-900, #0e0f10);
}

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

/* Carousel Track and Slides */
.carousel-track {
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.8s ease-in-out, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.carousel-slide.active {
  opacity: 1;
  transform: translateX(0);
  z-index: 2;
}

.carousel-slide.prev {
  transform: translateX(-100%);
  z-index: 1;
}

/* Slide Background and Media */
.slide-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slide-background img,
.slide-background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Gradient Overlay */
.slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(27, 20, 100, 0.2) 0%,
    rgba(255, 255, 255, 0.2) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Slide Content */
.slide-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  padding: var(--space-8, 32px);
  max-width: 800px;
  width: 90%;
}

.slide-eyebrow {
  color: var(--color-neutral-600, #51585e);
  font-family: 'Open Sans', 'OpenSans-Semibold', sans-serif;
  font-size: 24px;
  line-height: 36px;
  font-weight: 600;
  margin-bottom: var(--space-4, 16px);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.slide-headline {
  color: var(--color-white, #ffffff);
  font-family: 'Lato', 'Lato-Heavy', sans-serif;
  font-size: 36px;
  line-height: 54px;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0 0 var(--space-5, 20px) 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.slide-description {
  color: var(--color-primary-700, #1b1464);
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  line-height: 27px;
  font-weight: 700;
  margin-bottom: var(--space-8, 32px);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.slide-cta {
  display: inline-block;
  background: var(--color-primary-700, #1b1464);
  color: var(--color-white, #ffffff);
  padding: 16px 80px;
  border-radius: 4px;
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  line-height: 18px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.slide-cta:hover {
  background: var(--color-accent-500, #d4af37);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Navigation Controls */
.carousel-controls {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  width: 317px;
  z-index: 20;
}

.carousel-nav {
  width: 48px;
  height: 48px;
  border-radius: var(--space-2, 8px);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  padding: 0;
}

.carousel-nav:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

.carousel-nav .nav-icon {
  width: 48px;
  height: 48px;
  fill: var(--color-neutral-400, #868f97);
}

.carousel-nav:hover .nav-icon {
  fill: var(--color-primary-700, #1b1464);
}

/* Slide Indicators */
.carousel-indicators {
  position: absolute;
  bottom: 56px; /* Aligned with carousel-controls vertical center (60px - 4px) */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-3, 12px);
  padding: var(--space-5, 20px);
  z-index: 20;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-neutral-400, #868f97);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.indicator.active {
  background: var(--color-accent-500, #d4af37);
  transform: scale(1.25);
}

.indicator:hover:not(.active) {
  background: var(--color-accent-400, #dcbe5d);
  opacity: 0.7;
}

/* Carousel Text Visibility Enhancements */
.slide-eyebrow {
    color: var(--color-accent-500, #D4AF37);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.slide-description {
    font-family: 'Open Sans', 'OpenSans-Regular', sans-serif;
    font-size: 24px;
    line-height: 24px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Carousel Navigation with UI Icons */
.carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hover state - Gray to Navy filter for UI icons */
.carousel-nav:hover .ui-icon-display[data-color="gray"] {
    filter: brightness(0) saturate(100%) invert(8%) sepia(94%) saturate(3268%) hue-rotate(237deg) brightness(93%) contrast(101%);
}

/* Demo content styling */
.demo-content {
    padding: 40px;
    background: #f5f5f5;
    text-align: left;
    font-family: 'Open Sans', sans-serif;
}

.demo-content h2 {
    color: var(--color-primary-700, #1b1464);
    font-family: 'Lato', sans-serif;
    margin-bottom: 20px;
}

.demo-content p {
    color: var(--color-neutral-600, #51585e);
    font-family: 'Open Sans', sans-serif;
    margin-bottom: 10px;
}

.demo-content p:first-of-type {
    margin-top: 0;
}

.demo-content ul {
    margin-left: 20px;
    margin-bottom: 10px;
    margin-top: 10px;
    color: var(--color-neutral-600, #51585e);
}

.demo-content li {
    margin-bottom: 5px;
}

/* ==========================================================================
   2. HERO SIMPLE (DEFAULT)
   Simple hero with gradient background and centered text
   ========================================================================== */

.hero-simple {
    position: relative;
    width: 100%;
    height: 124px;
    background: linear-gradient(180deg, var(--color-accent-500) 0%, var(--color-primary-700) 100%);
    border-bottom: 4px solid var(--color-accent-500);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Content Container - with 40px padding to show gradient background */
.hero-simple__content {
    position: relative;
    width: 100%;
    max-width: 1920px;
    height: 100%;
    background-color: var(--color-primary-700);
    display: flex;
    align-items: center;
    padding: 0 100px; /* 40px outer + 60px inner = 100px total */
}

/* Headline Typography */
.hero-simple__headline {
    font-family: var(--font-primary);
    font-size: 36px; /* v4.0 H1 */
    line-height: 1.5; /* v4.0 H1 */
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    text-transform: uppercase;
    text-align: center;
    letter-spacing: -0.02em;
    margin: 0;
    width: 100%;
}

/* ==========================================================================
   3. HERO SIMPLE REVERSE
   Reverse color scheme hero with radial gradient content
   ========================================================================== */

.hero-simple-reverse {
    position: relative;
    width: 100%;
    height: 124px;
    background: var(--color-primary-700); /* Solid blue background */
    border-bottom: 4px solid var(--color-accent-500);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Content Container - Light Gray to Gold Radial Gradient */
.hero-simple-reverse__content {
    position: relative;
    width: 100%;
    max-width: 1920px;
    height: 100%;
    /* Exact gradient from Figma - light gray center to gold edges */
    background: radial-gradient(355.56% 50% at 50% 50%, #F5F5F5 0%, var(--color-accent-500) 100%);
    display: flex;
    align-items: center;
    padding: 0 100px; /* 40px outer + 60px inner = 100px total */
}

/* Headline Typography - Dark Blue on Light Background */
.hero-simple-reverse__headline {
    font-family: var(--font-primary);
    font-size: 36px; /* v4.0 H1 */
    line-height: 1.5; /* v4.0 H1 */
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-700); /* Dark blue text */
    text-transform: uppercase;
    text-align: center;
    letter-spacing: -0.02em;
    margin: 0;
    width: 100%;
}

/* ==========================================================================
   4. HERO ATF CENTER
   Above-the-fold hero with media support and centered content
   ========================================================================== */

.hero-atf-center {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 600px; /* Default height */
    min-height: 500px;
    background: linear-gradient(
        0deg,
        var(--primary-700, #1b1464) 0%,
        var(--accent-500, #d4af37) 50%
    );
    border: 4px solid var(--accent-500, #d4af37);
    box-sizing: border-box;
}

/* Media Container Styles */
.hero-media-container {
    position: absolute;
    top: var(--space-4, 16px);
    left: var(--space-5, 20px);
    right: var(--space-5, 20px);
    bottom: var(--space-20, 80px);
    width: auto;
    height: auto;
    overflow: hidden;
    z-index: 1;
}

/* Overlay gradient for better text contrast */
.hero-media-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        0deg,
        rgba(27, 20, 100, 0.85) 0%,
        rgba(212, 175, 55, 0.4) 50%,
        rgba(212, 175, 55, 0.2) 100%
    );
    z-index: 2;
    pointer-events: none;
}

/* Media elements (images and videos) */
.hero-media-container img,
.hero-media-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}

/* Video-specific styling */
video.hero-media {
    pointer-events: none; /* Prevents default video controls */
}

/* Fallback when no media is provided */
.hero-atf-center.no-media .hero-media-container {
    display: none;
}

/* Demo placeholder styling */
.hero-media-placeholder {
    width: 100%;
    height: 100%;
    background: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-family: sans-serif;
    font-size: 24px;
}

/* Content Container */
.hero-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 554px;
    padding: 0 var(--space-5, 20px);
}

/* Typography Styles */
.hero-headline {
    color: var(--neutrals-50, #ffffff);
    font-family: var(--font-primary, 'Lato'), sans-serif;
    font-weight: 900;
    font-size: 36px;
    line-height: 54px;
    text-transform: uppercase;
    margin: 0 0 var(--space-6, 24px) 0;
    text-align: center;
}

.hero-subheadline {
    color: var(--neutrals-50, #ffffff);
    font-family: var(--font-primary, 'Lato'), sans-serif;
    font-weight: 900;
    font-size: 18px;
    line-height: 24px;
    margin: 0 0 var(--space-8, 32px) 0;
    text-align: center;
}

/* Button Styles */
.hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-500, #d4af37);
    color: var(--primary-700, #1b1464);
    font-family: var(--font-primary, 'Lato'), sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 18px;
    text-transform: uppercase;
    padding: var(--space-4, 16px) var(--space-20, 80px);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.hero-button:hover {
    background: var(--accent-600, #b39226);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.hero-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hero-button:focus {
    outline: 2px solid var(--accent-400, #dcbe5d);
    outline-offset: 2px;
}

/* ==========================================================================
   5. HERO ATF LEFT
   Above-the-fold hero with left-aligned content and diagonal gradient
   ========================================================================== */

.hero-atf-left {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    width: 100%;
    height: 600px; /* Default height */
    min-height: 500px;
    background: linear-gradient(
        45deg,
        var(--primary-700, #1b1464) 0%,
        var(--accent-500, #d4af37) 100%
    );
    border: 4px solid var(--accent-500, #d4af37);
    box-sizing: border-box;
}

/* Inherit media container and overlay styles from hero-atf-center */
.hero-atf-left .hero-media-container {
    position: absolute;
    top: var(--space-4, 16px);
    left: var(--space-5, 20px);
    right: var(--space-5, 20px);
    bottom: var(--space-20, 80px);
    width: auto;
    height: auto;
    overflow: hidden;
    z-index: 1;
}

.hero-atf-left .hero-media-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        0deg,
        rgba(27, 20, 100, 0.85) 0%,
        rgba(212, 175, 55, 0.4) 50%,
        rgba(212, 175, 55, 0.2) 100%
    );
    z-index: 2;
    pointer-events: none;
}

.hero-atf-left .hero-media-container img,
.hero-atf-left .hero-media-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}

.hero-atf-left video.hero-media {
    pointer-events: none;
}

.hero-atf-left.no-media .hero-media-container {
    display: none;
}

.hero-atf-left .hero-media-placeholder {
    width: 100%;
    height: 100%;
    background: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-family: sans-serif;
    font-size: 24px;
}

/* Content positioning for left variant */
.hero-atf-left .hero-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    width: 100%;
    max-width: 554px;
    padding: 0 var(--space-20, 80px);
}

/* Inherit typography and button styles from hero-atf-center */

/* ==========================================================================
   6. HERO ATF RIGHT
   Above-the-fold hero with right-aligned content and diagonal gradient
   ========================================================================== */

.hero-atf-right {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
    height: 600px; /* Default height */
    min-height: 500px;
    background: linear-gradient(
        135deg,
        var(--accent-500, #d4af37) 0%,
        var(--primary-700, #1b1464) 100%
    );
    border: 4px solid var(--accent-500, #d4af37);
    box-sizing: border-box;
}

/* Inherit media container and overlay styles from hero-atf-center */
.hero-atf-right .hero-media-container {
    position: absolute;
    top: var(--space-4, 16px);
    left: var(--space-5, 20px);
    right: var(--space-5, 20px);
    bottom: var(--space-20, 80px);
    width: auto;
    height: auto;
    overflow: hidden;
    z-index: 1;
}

.hero-atf-right .hero-media-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        0deg,
        rgba(27, 20, 100, 0.85) 0%,
        rgba(212, 175, 55, 0.4) 50%,
        rgba(212, 175, 55, 0.2) 100%
    );
    z-index: 2;
    pointer-events: none;
}

.hero-atf-right .hero-media-container img,
.hero-atf-right .hero-media-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}

.hero-atf-right video.hero-media {
    pointer-events: none;
}

.hero-atf-right.no-media .hero-media-container {
    display: none;
}

.hero-atf-right .hero-media-placeholder {
    width: 100%;
    height: 100%;
    background: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-family: sans-serif;
    font-size: 24px;
}

/* Content positioning for right variant */
.hero-atf-right .hero-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
    width: 100%;
    max-width: 554px;
    padding: 0 var(--space-20, 80px);
}

/* Inherit typography and button styles from hero-atf-center */

/* ==========================================================================
   RESPONSIVE STYLES FOR ALL HERO VARIANTS
   ========================================================================== */

/* DesktopPlus: 1920px and wider */
@media (min-width: 1920px) {
    /* Hero Carousel */
    .hero-carousel {
        max-height: 1080px;
    }

    .slide-headline {
        font-size: 48px;
        line-height: 72px;
    }

    .slide-eyebrow {
        font-size: 28px;
        line-height: 42px;
    }

    .slide-description {
        font-size: 20px;
        line-height: 30px;
    }

    .slide-content {
        max-width: 1000px;
    }
    
    .slide-cta {
        padding: 20px 100px;
        font-size: 20px;
    }
    
    /* Hero Simple - max-width 1840px creates 40px margin each side at 1920px */
    .hero-simple__content {
        width: 100%;
        max-width: 1840px;
        margin: 0 auto; /* Centers content, allowing gradient to show on sides */
        padding: 0 60px; /* Inner padding only */
    }

    /* Hero Simple Reverse - max-width 1840px creates 40px margin each side at 1920px */
    .hero-simple-reverse__content {
        width: 100%;
        max-width: 1840px;
        margin: 0 auto; /* Centers content, allowing gradient to show on sides */
        padding: 0 60px; /* Inner padding only */
    }
    
    /* Hero ATF Center */
    .hero-atf-center {
        min-height: 1051px;
    }

    .hero-media-container {
        top: var(--space-4, 16px);
        left: var(--hero-padding-x, 40px);
        right: var(--hero-padding-x, 40px);
        bottom: var(--space-20, 80px);
    }

    .hero-content {
        margin-bottom: 198px;
    }

    /* Hero ATF Left */
    .hero-atf-left {
        min-height: 1051px;
    }

    .hero-atf-left .hero-media-container {
        top: var(--space-4, 16px);
        left: var(--hero-padding-x, 40px);
        right: var(--hero-padding-x, 40px);
        bottom: var(--space-20, 80px);
    }

    .hero-atf-left .hero-content {
        margin-bottom: 198px;
    }

    /* Hero ATF Right */
    .hero-atf-right {
        min-height: 1051px;
    }

    .hero-atf-right .hero-media-container {
        top: var(--space-4, 16px);
        left: var(--hero-padding-x, 40px);
        right: var(--hero-padding-x, 40px);
        bottom: var(--space-20, 80px);
    }

    .hero-atf-right .hero-content {
        margin-bottom: 198px;
    }
}

/* Desktop: 1150px to 1919px */
@media (min-width: 1150px) and (max-width: 1919px) {
    /* Hero Carousel */
    .hero-carousel {
        max-height: 900px;
    }
    
    .slide-content {
        max-width: 800px;
    }
    
    /* Hero Simple */
    .hero-simple__content {
        width: calc(100% - 80px);
        max-width: calc(100% - 80px);
        margin: 0 40px;
    }
    
    /* Hero Simple Reverse */
    .hero-simple-reverse__content {
        width: calc(100% - 80px);
        max-width: calc(100% - 80px);
        margin: 0 40px;
    }
    
    /* Hero ATF Center */
    .hero-atf-center {
        height: calc(100vw * 0.6426); /* Aspect ratio 1919:1233 */
        min-height: 739px;
        max-height: 1233px;
    }

    .hero-media-container {
        top: var(--space-4, 16px);
        left: var(--hero-padding-x, 40px);
        right: var(--hero-padding-x, 40px);
        bottom: var(--space-20, 80px);
    }

    .hero-content {
        margin-bottom: calc(100vw * 0.176);
        max-width: 554px;
    }

    .hero-button {
        padding: var(--space-3, 12px) var(--space-16, 64px);
    }

    /* Hero ATF Left */
    .hero-atf-left {
        height: calc(100vw * 0.6426);
        min-height: 739px;
        max-height: 1233px;
    }

    .hero-atf-left .hero-media-container {
        top: var(--space-4, 16px);
        left: var(--hero-padding-x, 40px);
        right: var(--hero-padding-x, 40px);
        bottom: var(--space-20, 80px);
    }

    .hero-atf-left .hero-content {
        margin-bottom: calc(100vw * 0.176);
        max-width: 554px;
    }

    /* Hero ATF Right */
    .hero-atf-right {
        height: calc(100vw * 0.6426);
        min-height: 739px;
        max-height: 1233px;
    }

    .hero-atf-right .hero-media-container {
        top: var(--space-4, 16px);
        left: var(--hero-padding-x, 40px);
        right: var(--hero-padding-x, 40px);
        bottom: var(--space-20, 80px);
    }

    .hero-atf-right .hero-content {
        margin-bottom: calc(100vw * 0.176);
        max-width: 554px;
    }
}

/* Tablet: 768px to 1149px */
@media (min-width: 768px) and (max-width: 1149px) {
    /* Hero Carousel */
    .hero-carousel {
        max-height: 800px;
        min-height: 500px;
    }

    .slide-content {
        max-width: 600px;
        padding: var(--space-6, 24px);
    }

    .slide-headline {
        font-size: 32px;
        line-height: 48px;
    }

    .slide-eyebrow {
        font-size: 20px;
        line-height: 30px;
    }

    .slide-description {
        font-size: 16px;
        line-height: 24px;
    }

    .slide-cta {
        padding: 14px 60px;
        font-size: 16px;
    }

    .carousel-controls {
        width: 280px;
        bottom: 30px;
    }

    .carousel-indicators {
        bottom: 50px; /* Aligned with controls center at tablet: 30px + 24px - 4px = 50px */
    }
    
    /* Hero Simple & Reverse - Transition zone */
    .hero-simple__content,
    .hero-simple-reverse__content {
        width: calc(100% - 80px);
        margin: 0 40px;
        padding: 0 40px;
    }
    
    .hero-simple__headline,
    .hero-simple-reverse__headline {
        font-size: var(--text-h2-size);
        line-height: var(--text-h2-height);
    }
    
    /* Hero ATF Center */
    .hero-atf-center {
        height: calc(100vw * 0.6426); /* Maintains aspect ratio */
        min-height: 493px;
        max-height: 738px;
    }

    .hero-media-container {
        top: var(--space-3, 12px);
        left: var(--space-8, 32px);
        right: var(--space-8, 32px);
        bottom: var(--space-16, 64px);
    }

    .hero-content {
        margin-bottom: calc(100vw * 0.15);
        max-width: 480px;
    }

    .hero-headline {
        font-size: 32px;
        line-height: 48px;
        margin-bottom: var(--space-5, 20px);
    }

    .hero-subheadline {
        font-size: 16px;
        line-height: 22px;
        margin-bottom: var(--space-6, 24px);
    }

    .hero-button {
        padding: var(--space-3, 12px) var(--space-12, 48px);
        font-size: 16px;
    }

    /* Hero ATF Left */
    .hero-atf-left {
        height: calc(100vw * 0.6426);
        min-height: 493px;
        max-height: 738px;
    }

    .hero-atf-left .hero-media-container {
        top: var(--space-3, 12px);
        left: var(--space-8, 32px);
        right: var(--space-8, 32px);
        bottom: var(--space-16, 64px);
    }

    .hero-atf-left .hero-content {
        margin-bottom: calc(100vw * 0.15);
        max-width: 480px;
    }

    /* Hero ATF Right */
    .hero-atf-right {
        height: calc(100vw * 0.6426);
        min-height: 493px;
        max-height: 738px;
    }

    .hero-atf-right .hero-media-container {
        top: var(--space-3, 12px);
        left: var(--space-8, 32px);
        right: var(--space-8, 32px);
        bottom: var(--space-16, 64px);
    }

    .hero-atf-right .hero-content {
        margin-bottom: calc(100vw * 0.15);
        max-width: 480px;
    }
}

/* Tablet transition: 768px to 808px - smooth margin increase from 0px to 40px */
@media (min-width: 768px) and (max-width: 808px) {
    .hero-simple__content,
    .hero-simple-reverse__content {
        width: calc(100% - (100vw - 768px) * 2); /* Width reduces as margin increases */
        /* Margin increases pixel-for-pixel: at 768px = 0px, at 808px = 40px */
        margin: 0 calc((100vw - 768px));
        padding: 0 60px; /* Inner padding only */
    }
}

/* Tablet with full padding: 808px to 1149px */
@media (min-width: 808px) and (max-width: 1149px) {
    .hero-simple__content,
    .hero-simple-reverse__content {
        width: 100%;
        padding: 0 100px; /* 40px outer + 60px inner */
    }

    .hero-simple__headline,
    .hero-simple-reverse__headline {
        font-size: var(--text-h2-size);
        line-height: var(--text-h2-height);
    }
}

/* Mobile: 380px to 767px */
@media (max-width: 767px) {
    /* Hero Carousel */
    .hero-carousel {
        min-height: 450px;
        max-height: 700px;
    }

    .slide-content {
        max-width: 90%;
        padding: var(--space-4, 16px);
    }

    .slide-headline {
        font-size: 24px;
        line-height: 36px;
        margin-bottom: var(--space-4, 16px);
    }

    .slide-eyebrow {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: var(--space-3, 12px);
    }

    .slide-description {
        font-size: 14px;
        line-height: 21px;
        margin-bottom: var(--space-5, 20px);
    }

    .slide-cta {
        padding: 12px 40px;
        font-size: 14px;
    }

    .carousel-controls {
        width: calc(100% - 40px);
        max-width: 280px;
        bottom: 20px;
    }

    .carousel-nav {
        width: 40px;
        height: 40px;
    }

    .carousel-nav .nav-icon {
        width: 40px;
        height: 40px;
    }

    .carousel-indicators {
        bottom: 37px; /* Aligned with controls center at mobile: 20px + 20px - 3px = 37px */
        gap: var(--space-2, 8px);
    }

    .indicator {
        width: 6px;
        height: 6px;
    }

    /* Mobile: UI Icon adjustments for carousel navigation */
    .carousel-nav .ui-icon-display {
        width: 32px;
        height: 32px;
        background-size: 192px 64px;
    }

    /* Hero Simple - Mobile: no margin, padding only */
    .hero-simple__content,
    .hero-simple-reverse__content {
        width: 100%;
        margin: 0; /* No margin at mobile */
        padding: 0 40px; /* Inner padding only */
    }

    .hero-simple__headline,
    .hero-simple-reverse__headline {
        font-size: var(--text-h3-size);
        line-height: var(--text-h3-height);
    }

    /* Update arrow positions for 32px size */
    .carousel-nav .ui-icon-display[data-icon="arrow-up"] {
        background-position: -32px 0;
    }
    
    /* Hero Simple */
    .hero-simple {
        background: var(--color-primary-700);
    }
    
    .hero-simple__content {
        width: 100%;
        min-width: unset;
        padding: 0 20px;
        margin: 0;
    }
    
    .hero-simple__headline {
        font-size: var(--text-h3-size);
        line-height: var(--text-h3-height);
    }
    
    /* Hero Simple Reverse */
    .hero-simple-reverse {
        background: var(--color-primary-700);
    }
    
    .hero-simple-reverse__content {
        width: 100%;
        min-width: unset;
        padding: 0 20px;
        margin: 0;
        background: radial-gradient(355.56% 50% at 50% 50%, #F5F5F5 0%, var(--color-accent-500) 100%);
    }
    
    .hero-simple-reverse__headline {
        font-size: var(--text-h3-size);
        line-height: var(--text-h3-height);
    }
    
    /* Hero ATF Center */
    .hero-atf-center {
        height: 600px;
        min-height: 500px;
    }

    .hero-media-container {
        top: var(--space-3, 12px);
        left: var(--space-5, 20px);
        right: var(--space-5, 20px);
        bottom: var(--space-12, 48px);
    }

    .hero-content {
        margin-bottom: var(--space-16, 64px);
        max-width: 320px;
    }

    .hero-headline {
        font-size: 28px;
        line-height: 42px;
        margin-bottom: var(--space-4, 16px);
    }

    .hero-subheadline {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: var(--space-5, 20px);
    }

    .hero-button {
        padding: var(--space-3, 12px) var(--space-10, 40px);
        font-size: 14px;
        width: 100%;
        max-width: 280px;
    }

    /* Hero ATF Left */
    .hero-atf-left {
        height: 600px;
        min-height: 500px;
    }

    .hero-atf-left .hero-media-container {
        top: var(--space-3, 12px);
        left: var(--space-5, 20px);
        right: var(--space-5, 20px);
        bottom: var(--space-12, 48px);
    }

    .hero-atf-left .hero-content {
        margin-bottom: var(--space-16, 64px);
        max-width: 320px;
    }

    /* Hero ATF Right */
    .hero-atf-right {
        height: 600px;
        min-height: 500px;
    }

    .hero-atf-right .hero-media-container {
        top: var(--space-3, 12px);
        left: var(--space-5, 20px);
        right: var(--space-5, 20px);
        bottom: var(--space-12, 48px);
    }

    .hero-atf-right .hero-content {
        margin-bottom: var(--space-16, 64px);
        max-width: 320px;
    }
}

/* Small Mobile: Below 380px */
@media (max-width: 379px) {
    /* Hero Carousel */
    .hero-carousel {
        min-height: 400px;
    }
    
    .slide-headline {
        font-size: 20px;
        line-height: 30px;
    }
    
    .slide-cta {
        padding: 10px 30px;
        font-size: 12px;
    }
    
    /* Hero Simple & Reverse */
    .hero-simple__content,
    .hero-simple-reverse__content {
        padding: 0 16px;
    }
    
    .hero-simple__headline,
    .hero-simple-reverse__headline {
        font-size: var(--text-h4-size);
        line-height: var(--text-h4-height);
    }
    
    /* Hero ATF Center */
    .hero-atf-center {
        height: 500px;
        min-height: 450px;
    }

    .hero-media-container {
        top: var(--space-3, 12px);
        left: var(--space-4, 16px);
        right: var(--space-4, 16px);
        bottom: var(--space-10, 40px);
    }

    .hero-content {
        margin-bottom: var(--space-12, 48px);
        max-width: 280px;
    }

    .hero-headline {
        font-size: 24px;
        line-height: 36px;
        margin-bottom: var(--space-3, 12px);
    }

    .hero-subheadline {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: var(--space-4, 16px);
    }

    .hero-button {
        padding: var(--space-2, 8px) var(--space-8, 32px);
        font-size: 14px;
        width: 100%;
    }

    /* Hero ATF Left */
    .hero-atf-left {
        height: 500px;
        min-height: 450px;
    }

    .hero-atf-left .hero-media-container {
        top: var(--space-3, 12px);
        left: var(--space-4, 16px);
        right: var(--space-4, 16px);
        bottom: var(--space-10, 40px);
    }

    .hero-atf-left .hero-content {
        margin-bottom: var(--space-12, 48px);
        max-width: 280px;
    }

    /* Hero ATF Right */
    .hero-atf-right {
        height: 500px;
        min-height: 450px;
    }

    .hero-atf-right .hero-media-container {
        top: var(--space-3, 12px);
        left: var(--space-4, 16px);
        right: var(--space-4, 16px);
        bottom: var(--space-10, 40px);
    }

    .hero-atf-right .hero-content {
        margin-bottom: var(--space-12, 48px);
        max-width: 280px;
    }
}

/* ==========================================================================
   ANIMATION CLASSES (OPTIONAL)
   ========================================================================== */

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

.hero-content.animate-in > * {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
}

.hero-content.animate-in .hero-headline {
    animation-delay: 0.2s;
}

.hero-content.animate-in .hero-subheadline {
    animation-delay: 0.4s;
}

.hero-content.animate-in .hero-button {
    animation-delay: 0.6s;
}

/* ==========================================================================
   ACCESSIBILITY IMPROVEMENTS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .hero-button,
    .hero-content.animate-in > *,
    .carousel-slide {
        animation: none;
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: more) {
    .hero-media-container::after,
    .slide-overlay {
        background: linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.5) 50%,
            rgba(0, 0, 0, 0.3) 100%
        );
    }
    
    .hero-button {
        border: 2px solid currentColor;
    }
}
/* ============================================
   ORGANISMS - FOOTERS
   Purposeful Media Design System
   Version: 4.0
   Last Modified: 2025-10-30
   Dependencies: variables-v4.0-20251027.css

   Components:
   - Footer Main (Desktop/Tablet)
   - Footer Mobile
   - Footer Menu Module
   - Footer Attribution
   - Footer Simple
   ============================================ */

/* Import dependencies */

/* ==========================================================================
   1. FOOTER MAIN (DESKTOP/TABLET)
   Full-width footer with logo, navigation columns, and newsletter
   ========================================================================== */

.footer-main {
    background: var(--color-primary-700, #1b1464);
    border-top: 4px solid var(--color-accent-500, #d4af37);
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 1920px;
    position: relative;
    overflow: hidden;
}

/* Footer Container */
.footer-container {
    background: var(--color-primary-700, #1b1464);
    padding: var(--space-12, 48px);
    display: flex;
    flex-direction: column;
    gap: var(--space-8, 32px);
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

/* Logo Section */
.footer-logo-section {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.footer-logo {
    width: 214.31px;
    height: 112.5px;
    display: block;
}

/* Footer Content Grid */
.footer-content {
    display: flex;
    flex-direction: row;
    gap: var(--space-6, 24px);
    align-items: flex-start;
    justify-content: space-between;
}

/* Footer Columns */
.footer-column {
    flex: 1;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: var(--space-6, 24px);
}

.footer-column[data-column="company-newsletter"] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-8, 32px);
}

/* ==========================================================================
   2. FOOTER MENU MODULE
   Reusable navigation column component
   ========================================================================== */

.footer-menu {
    background: var(--color-white, #ffffff);
    display: flex;
    flex-direction: column;
    gap: var(--space-0, 0px);
    align-items: flex-start;
    justify-content: flex-start;
    width: 240px;
    position: relative;
    overflow: hidden;
}

.footer-menu__container,
.footer-menu-section {
    background: var(--color-primary-700, #1b1464);
    padding: var(--space-3, 12px);
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.footer-menu__header {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
}

.footer-menu__title,
.footer-menu-title {
    color: var(--color-white, #ffffff);
    font-family: 'Lato', 'Lato-Heavy', sans-serif;
    font-size: 30px;
    line-height: 45px;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
}

.footer-menu__items,
.footer-menu-nav {
    padding: var(--space-3, 12px);
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    position: relative;
}

.footer-menu-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-menu__item {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    position: relative;
}

.footer-menu__link,
.footer-menu-link {
    color: var(--color-white, #ffffff);
    font-family: 'Open Sans', 'OpenSans-Bold', sans-serif;
    font-size: 21px;
    line-height: 21px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
    display: block;
    flex: 1;
}

.footer-menu__link:hover,
.footer-menu-link:hover {
    color: var(--color-accent-500, #d4af37);
}

.footer-menu__link:active,
.footer-menu-link:active {
    color: var(--color-accent-600, #b39226);
}

.footer-menu__link--disabled,
.footer-menu-link.disabled {
    color: var(--color-neutral-400, #868f97);
    pointer-events: none;
    cursor: default;
}

/* ==========================================================================
   3. NEWSLETTER FORM IN FOOTER
   Wrapper for form-newsletter molecule
   Note: All form styling now handled by molecules-form-newsletter.css
   ========================================================================== */

.footer-newsletter {
    /* Wrapper container styling only */
    background: var(--color-neutral-100, #eceeef);
    border-radius: var(--radius-small, 4px);
    padding: var(--space-8, 32px) var(--space-6, 24px);
    width: 320px;
    max-width: 320px;
    box-shadow: var(--shadow-subtle, 4px 4px 12px 0px rgba(0, 0, 0, 0.1));
}

/* Override molecule box-shadow within footer context */
.footer-newsletter .form-newsletter {
    box-shadow: none;
    padding: 0;
    background: transparent;
    max-width: 100%;
}

/* ==========================================================================
   4. FOOTER ATTRIBUTION
   Copyright and legal links sub-footer
   ========================================================================== */

.footer-attribution {
    background: var(--color-primary-900, #06102b);
    padding: var(--space-3, 12px) var(--space-8, 32px);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--space-12, 48px);
}

.footer-attribution-content {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex-wrap: wrap;
    justify-content: center;
}

.footer-copyright,
.footer-company,
.footer-divider {
    color: var(--color-neutral-200, #c7cbcf);
    font-family: 'Open Sans', 'OpenSans-Regular', sans-serif;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
}

.footer-policy-link {
    color: var(--color-neutral-200, #c7cbcf);
    font-family: 'Open Sans', 'OpenSans-Regular', sans-serif;
    font-size: 12px;
    line-height: 12px;
    font-weight: 400;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.footer-policy-link:hover {
    color: var(--color-accent-500, #d4af37);
}

/* ==========================================================================
   5. FOOTER MOBILE
   Mobile-specific footer layout
   ========================================================================== */

.footer-mobile {
    display: none; /* Hidden by default, shown on mobile */
    flex-direction: column;
    gap: 0;
    min-width: 380px;
    max-width: 767px;
    width: 100%;
}

.footer-mobile__top {
    background: var(--color-primary-700, #1b1464);
    border-top: 4px solid var(--color-accent-500, #d4af37);
    padding: var(--space-6, 24px) 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.footer-mobile__logo {
    width: 171px;
    height: 90px;
    flex-shrink: 0;
}

/* Mobile Navigation Section */
.footer-mobile__nav {
    background: var(--color-primary-700, #1b1464);
    padding: var(--space-8, 32px) var(--space-3, 12px);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.footer-mobile__nav-item {
    background: var(--color-primary-700, #1b1464);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.footer-mobile__nav-item:hover {
    background: var(--color-primary-600, #1740b0);
}

.footer-mobile__nav-item.active {
    background: var(--color-primary-600, #1740b0);
}

.footer-mobile__nav-text {
    color: var(--color-white, #ffffff);
    font-family: 'Lato', sans-serif;
    font-size: 36px;
    line-height: 54px;
    font-weight: 900;
    text-transform: uppercase;
}

.footer-mobile__nav-arrow {
    color: var(--color-white, #ffffff);
    font-family: 'Lato', sans-serif;
    font-size: 36px;
    line-height: 54px;
    font-weight: 900;
    text-transform: uppercase;
    transition: transform 0.3s ease;
}

.footer-mobile__nav-item.active .footer-mobile__nav-arrow {
    transform: rotate(90deg);
}

/* Mobile Newsletter Section */
.footer-mobile__newsletter {
    background: var(--color-primary-700, #1b1464);
    padding: var(--space-6, 24px) var(--space-4, 16px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Wrapper for form-newsletter molecule in mobile context */
.footer-mobile__newsletter .form-newsletter {
    background: var(--color-neutral-100, #eceeef);
    box-shadow: var(--shadow-subtle, 4px 4px 12px 0px rgba(0, 0, 0, 0.1));
    padding: var(--space-6, 24px) var(--space-4, 16px);
    width: 100%;
    max-width: 320px;
}

/* Mobile Attribution Section */
.footer-mobile__attribution {
    background: var(--color-primary-900, #06102b);
    padding: var(--space-3, 12px) var(--space-8, 32px);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.footer-mobile__attribution-content {
    padding: var(--space-3, 12px) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
    align-items: center;
    text-align: center;
}

.footer-mobile__company,
.footer-mobile__copyright {
    color: var(--color-neutral-200, #c7cbcf);
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
}

.footer-mobile__policy {
    color: var(--color-neutral-200, #c7cbcf);
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    line-height: 12px;
    font-weight: 400;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.footer-mobile__policy:hover {
    color: var(--color-accent-500, #d4af37);
}

/* ==========================================================================
   6. FOOTER SIMPLE
   Minimal footer with logo and attribution only
   ========================================================================== */

.footer-simple {
    background: var(--color-primary-700, #1b1464);
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Default Color Scheme */
.footer-simple[data-color-scheme="default"] {
    background: var(--color-primary-700, #1b1464);
}

.footer-simple[data-color-scheme="default"] .footer-border {
    background: var(--color-accent-500, #d4af37);
}

/* Reverse Color Scheme */
.footer-simple[data-color-scheme="reverse"] {
    background: var(--color-neutral-100, #eceeef);
}

.footer-simple[data-color-scheme="reverse"] .footer-border {
    background: var(--color-neutral-300, #a2a9af);
}

.footer-simple[data-color-scheme="reverse"] .sub-footer {
    background: var(--color-primary-900, #06102b);
}

.footer-simple[data-color-scheme="reverse"] .attribution,
.footer-simple[data-color-scheme="reverse"] .copyright,
.footer-simple[data-color-scheme="reverse"] .separator,
.footer-simple[data-color-scheme="reverse"] .policy-link {
    color: var(--color-neutral-200, #c7cbcf);
}

/* Top Border Accent */
.footer-simple .footer-border {
    height: 4px;
    width: 100%;
    border: 0;
}

/* Main Content Container */
.footer-simple .footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Logo Container */
.footer-simple .footer-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-8, 32px) 0;
}

.footer-simple .footer-logo img,
.footer-simple .footer-logo picture {
    display: block;
    height: auto;
}

/* Sub-footer Attribution */
.footer-simple .sub-footer {
    background: var(--color-primary-900, #06102b);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-3, 12px) var(--space-8, 32px);
    height: var(--space-12, 48px);
}

.footer-simple .attribution {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex-wrap: wrap;
    justify-content: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    color: var(--color-neutral-200, #c7cbcf);
}

.footer-simple .copyright,
.footer-simple .separator,
.footer-simple .company {
    color: var(--color-neutral-200, #c7cbcf);
    display: inline-block;
}

.footer-simple .policy-link {
    color: var(--color-neutral-200, #c7cbcf);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.footer-simple .policy-link:hover {
    color: var(--color-accent-500, #d4af37);
}

/* Responsive: Mobile - 380px to 767px */
@media (max-width: 767px) {
    .footer-simple {
        min-width: 380px;
    }
    
    .footer-simple .footer-logo {
        padding: var(--space-6, 24px) 0;
    }
    
    .footer-simple .footer-logo img {
        width: 234px;
        height: 123px;
    }
    
    /* Mobile attribution layout - stack elements vertically */
    .footer-simple .sub-footer {
        padding: var(--space-3, 12px) var(--space-8, 32px);
        min-height: auto;
        height: auto;
    }
    
    .footer-simple .attribution {
        flex-direction: column;
        gap: var(--space-1, 4px);
        padding: var(--space-3, 12px) 0;
        text-align: center;
    }
    
    /* Hide separators on mobile */
    .footer-simple .separator {
        display: none;
    }
    
    /* Reorder elements for mobile: copyright, company, policy */
    .footer-simple .copyright {
        order: 1;
    }
    
    .footer-simple .separator:first-of-type {
        order: 2;
        display: none;
    }
    
    .footer-simple .attribution > span:nth-of-type(3) {
        order: 3;
        /* This targets the company name text */
    }
    
    .footer-simple .separator:last-of-type {
        order: 4;
        display: none;
    }
    
    .footer-simple .policy-link {
        order: 5;
    }
}

/* Responsive: Tablet - 768px to 1149px */
@media (min-width: 768px) and (max-width: 1149px) {
    .footer-simple {
        min-width: 768px;
    }
    
    .footer-simple .footer-logo img {
        width: 389px;
        height: 128px;
    }
}

/* Responsive: Desktop - 1150px to 1919px */
@media (min-width: 1150px) and (max-width: 1919px) {
    .footer-simple {
        min-width: 1150px;
    }
    
    .footer-simple .footer-logo img {
        width: 467px;
        height: 154px;
    }
}

/* Responsive: DesktopPlus - 1920px and wider */
@media (min-width: 1920px) {
    .footer-simple {
        min-width: 1920px;
    }
    
    .footer-simple .footer-logo img {
        width: 467px;
        height: 154px;
    }
}

/* ==========================================================================
   7. MOBILE DROPDOWN MENU
   Accordion-style dropdown for mobile footer navigation
   ========================================================================== */

.dropdown-mobile {
    background: var(--color-accent-100, #f4ebcd);
    border-radius: 8px;
    padding: 32px 64px 32px var(--space-12, 48px);
    display: none;
    flex-direction: column;
    gap: 16px;
    min-width: 380px;
    margin: 0 var(--space-3, 12px);
    box-shadow: var(--shadow-subtle, 4px 4px 12px 0px rgba(0, 0, 0, 0.1));
    overflow: hidden;
    transform-origin: top;
    opacity: 0;
    max-height: 0;
    transition: all 0.3s ease;
}

.dropdown-mobile.active {
    display: flex;
    opacity: 1;
    max-height: 500px;
    margin-bottom: var(--space-3, 12px);
}

.dropdown-mobile__item {
    padding: var(--space-3, 12px);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dropdown-mobile__link {
    color: var(--color-primary-700, #1b1464);
    font-family: 'Lato', sans-serif;
    font-size: 21px;
    line-height: 30.5px;
    font-weight: 900;
    text-decoration: none;
    transition: color 0.3s ease;
    display: block;
}

.dropdown-mobile__link:hover:not(.dropdown-mobile__link--disabled) {
    color: var(--color-accent-500, #d4af37);
}

.dropdown-mobile__link--disabled {
    color: var(--color-neutral-400, #868f97);
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Mobile: 380px to 767px */
@media (max-width: 767px) {
    .footer-main {
        display: none;
    }
    
    .footer-mobile {
        display: flex;
    }
}

/* Tablet: 768px to 1149px */
@media (min-width: 768px) and (max-width: 1149px) {
    .footer-mobile,
    .dropdown-mobile {
        display: none;
    }
    
    .footer-main {
        min-width: 768px;
        max-width: 1149px;
    }
    
    .footer-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8, 32px);
    }
    
    .footer-column[data-column="services"],
    .footer-column[data-column="who-we-serve"],
    .footer-column[data-column="resources"] {
        grid-column: 1;
    }
    
    .footer-column[data-column="company-newsletter"] {
        grid-column: 2;
        grid-row: 1 / 4;
    }
    
    .footer-menu {
        width: 100%;
        max-width: 360px;
    }
}

/* Desktop: 1150px to 1919px */
@media (min-width: 1150px) and (max-width: 1919px) {
    .footer-mobile,
    .dropdown-mobile {
        display: none;
    }
    
    .footer-main {
        min-width: 1150px;
        max-width: 1919px;
    }
    
    .footer-menu {
        width: 240px;
    }
}

/* DesktopPlus: 1920px and wider */
@media (min-width: 1920px) {
    .footer-mobile,
    .dropdown-mobile {
        display: none;
    }
    
    .footer-main {
        min-width: 1920px;
    }
    
    .footer-container {
        max-width: 1920px;
    }
    
    .footer-menu {
        width: 240px;
    }
}
/* ============================================
   ORGANISMS: NAVIGATION COMPONENTS
   Version: 1.0
   Date: September 22, 2025
   
   Purpose: Navigation organism components
   Dependencies: variables-v2.0-20250915.css
   
   Components:
   - Header Navigation
   - Footer Navigation
   - Mobile Navigation
   - Breadcrumb Navigation
   ============================================ */

/* Import Variables */

/* ============================================
   HEADER NAVIGATION
   ============================================ */

.nav-header {
    /* Component styles will be added during organism export */
    /* This file serves as the template structure */
}

/* ============================================
   FOOTER NAVIGATION
   ============================================ */

.nav-footer {
    /* Component styles will be added during organism export */
}

/* ============================================
   MOBILE NAVIGATION
   ============================================ */

.nav-mobile {
    /* Component styles will be added during organism export */
}

/* ============================================
   BREADCRUMB NAVIGATION
   ============================================ */

.nav-breadcrumb {
    /* Component styles will be added during organism export */
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Mobile: 380-767px */
@media (max-width: 767px) {
    /* Mobile-specific navigation styles */
}

/* Tablet: 768-1149px */
@media (min-width: 768px) and (max-width: 1149px) {
    /* Tablet-specific navigation styles */
}

/* Desktop: 1150-1919px */
@media (min-width: 1150px) and (max-width: 1919px) {
    /* Desktop-specific navigation styles */
}

/* DesktopPlus: 1920px+ */
@media (min-width: 1920px) {
    /* Large desktop-specific navigation styles */
}/* ============================================
   Content/2ColumnContact Section Styles
   Purposeful Media Design System
   Version: 2.0 - v4.0 Token Implementation
   Dependencies: variables-v4.0-20251027.css
   Date: 2025-10-29

   Components:
   - Two-column responsive contact section
   - Contact card (teaser) with CTA
   - eBook/resource image display
   - Reverse variant (image left, card right)

   UPDATED: All hardcoded values replaced with v4.0 tokens
   ============================================ */

/* Import Variables v4.0 */

/* Base Section Styles */
.content-2column-contact {
    position: relative;
    background-color: var(--color-neutral-100);
    padding: var(--space-2) 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
}

/* Demo Divider (for component demonstration) */
.demo-divider {
    height: var(--space-25);
    background: var(--color-neutral-200);
}

/* Optional Background Container */
.section-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Main Column Group Container */
.column-group {
    position: relative;
    background-color: var(--color-white);
    display: flex;
    gap: var(--space-5);
    align-items: center;
    padding: var(--space-8) var(--space-5);
    z-index: 1;
    width: 100%;
    max-width: 1150px;
}

/* Content Columns */
.content-column {
    display: flex;
    align-items: center;
}

.left-column {
    flex-shrink: 0;
    min-width: 0;
}

.right-column {
    flex-shrink: 0;
    position: relative;
}

/* Contact Card Styles */
.contact-card {
    background: var(--color-white);
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-card);
    padding: var(--space-10) var(--space-12) var(--space-16);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 600px;
}

.card-title {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-height);
    text-transform: uppercase;
    color: var(--color-primary-700);
    margin: 0;
    width: 100%;
}

.card-description {
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-regular);
    font-size: var(--text-default-size);
    line-height: var(--text-default-height);
    color: var(--color-neutral-600);
    margin: 0;
    width: 100%;
}

/* Button Styles */
.btn-primary {
    background-color: var(--button-primary-bg);
    border: none;
    border-radius: var(--radius-small);
    padding: var(--padding-button);
    cursor: pointer;
    transition: background-color var(--transition-base), transform var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary:hover {
    background-color: var(--button-primary-hover);
    transform: translateY(-1px);
}

.btn-primary:active {
    background-color: var(--button-primary-active);
    transform: translateY(0);
}

.btn-text {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-default-size);
    line-height: var(--text-default-size);
    text-transform: uppercase;
    color: var(--color-white);
    white-space: nowrap;
}

/* Image Container Styles */
.image-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.ebook-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* ========================================
   REVERSE VARIANT
   ======================================== */

.content-2column-contact.reverse .left-column {
    flex-shrink: 0;
}

.content-2column-contact.reverse .right-column {
    flex: 1;
    min-width: 0;
}

.content-2column-contact.reverse .contact-card {
    align-items: flex-start;
}

/* ========================================
   RESPONSIVE BREAKPOINTS - DEFAULT
   ======================================== */

/* Desktop Plus (1920px and wider) */
.content-2column-contact.desktop-plus {
    padding: var(--space-2) var(--space-16);
}

.desktop-plus .column-group {
    width: 1348px;
}

.desktop-plus .contact-card {
    max-width: 600px;
}

.desktop-plus .right-column {
    width: 693px;
    height: 1047px;
    margin-right: -64px; /* Overlay right padding */
}

/* Desktop (1150px - 1919px) */
.content-2column-contact.desktop {
    padding: var(--space-2) var(--space-16);
}

.desktop .column-group {
    width: 1148px;
}

.desktop .contact-card {
    max-width: 500px;
}

.desktop .right-column {
    width: 500px;
    height: 892px;
    margin-right: -64px; /* Overlay right padding */
}

/* Tablet (768px - 1149px) */
.content-2column-contact.tablet {
    padding: var(--space-2) 0;
    justify-content: flex-start;
}

.tablet .column-group {
    width: 1149px;
    max-width: none;
}

.tablet .contact-card {
    max-width: 500px;
}

.tablet .card-title {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-height);
}

.tablet .btn-primary {
    padding: var(--padding-button-small);
}

.tablet .right-column {
    width: 500px;
    height: 731px;
    margin-right: -64px; /* Overlay right padding */
}

/* Mobile (380px - 767px) */
.content-2column-contact.mobile {
    padding: var(--space-2) 0;
    justify-content: flex-start;
}

.mobile .column-group {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-4) var(--space-16);
    width: auto;
    max-width: none;
}

.mobile .left-column,
.mobile .right-column {
    width: 100%;
}

.mobile .contact-card {
    max-width: 320px;
    width: 100%;
}

.mobile .right-column {
    margin-right: 0;
    margin-top: var(--space-5);
    height: auto;
}

.mobile .image-container {
    width: 320px;
    aspect-ratio: 8.5 / 11; /* Standard US Letter proportion for eBook */
}

/* ========================================
   RESPONSIVE BREAKPOINTS - REVERSE VARIANT
   ======================================== */

/* Desktop Plus (1920px and wider) - Reverse */
.content-2column-contact.reverse.desktop-plus {
    padding: var(--space-2) 0;
    justify-content: center;
    align-items: center;
}

.reverse.desktop-plus .column-group {
    width: 1150px;
    padding: var(--space-8) var(--space-5);
}

.reverse.desktop-plus .left-column {
    width: 610px;
    height: 790px;
}

.reverse.desktop-plus .contact-card {
    max-width: none;
    padding: var(--space-10) var(--space-12);
}

.reverse.desktop-plus .right-column {
    margin-right: 0;
    width: auto;
    height: auto;
}

/* Desktop (1150px - 1919px) - Reverse */
.content-2column-contact.reverse.desktop {
    padding: var(--space-2) 0;
    justify-content: center;
    align-items: center;
}

.reverse.desktop .column-group {
    width: 1150px;
    padding: var(--space-8) var(--space-5);
}

.reverse.desktop .left-column {
    width: 610px;
    height: 790px;
}

.reverse.desktop .contact-card {
    max-width: none;
    padding: var(--space-10) var(--space-12);
}

.reverse.desktop .right-column {
    margin-right: 0;
    width: auto;
    height: auto;
}

/* Tablet (768px - 1149px) - Reverse */
.content-2column-contact.reverse.tablet {
    padding: var(--space-2) 0;
}

.reverse.tablet .column-group {
    width: 100%;
    max-width: 1149px;
    padding: var(--space-8) var(--space-5);
}

.reverse.tablet .left-column {
    width: 500px;
    height: 650px;
}

.reverse.tablet .contact-card {
    max-width: none;
    padding: var(--space-10) var(--space-12);
}

.reverse.tablet .right-column {
    margin-right: 0;
    width: auto;
    height: auto;
}

/* Mobile (380px - 767px) - Reverse */
.content-2column-contact.reverse.mobile {
    padding: var(--space-2) 0;
    min-height: auto;
}

.reverse.mobile .column-group {
    flex-direction: column;
    align-items: center;
    padding: var(--space-8) var(--space-5);
    width: 100%;
}

.reverse.mobile .left-column {
    display: none; /* No image on mobile for reverse variant */
}

.reverse.mobile .right-column {
    width: 100%;
    margin-top: 0;
}

.reverse.mobile .contact-card {
    max-width: 500px;
    width: 100%;
    min-width: 380px;
    padding: var(--space-10) var(--space-6);
}

.reverse.mobile .card-title {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-height);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Background Image Support */
.content-2column-contact.has-background .section-background {
    background-image: var(--section-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.1;
}

/* Visibility Control for Narrow Viewports */
@media (max-width: 1149px) {
    .section-background {
        display: none;
    }
}

/* Print Styles */
@media print {
    .content-2column-contact {
        background-color: transparent;
        min-height: auto;
        padding: var(--space-5);
    }

    .contact-card {
        box-shadow: none;
        border: 1px solid var(--color-neutral-300);
    }

    .btn-primary {
        border: 2px solid var(--color-primary-700);
    }
}/* ============================================
   Content/2ColumnContact Component - Integrated Version
   Purposeful Media Design System v4.0

   Fully tokenized organism-level component
   Dependencies: variables-v4.0-20251027.css
   Date: 2025-11-04

   Component Structure:
   - Two-column responsive layout
   - Contact card with heading, body text, and CTA button
   - Image display with aspect ratio management
   - Background layer for desktop viewports
   - Full responsive support across all breakpoints

   BEM Naming Convention:
   .content-2column-contact (Block)
   .content-2column-contact__element (Element)
   .content-2column-contact--modifier (Modifier)
   ============================================ */

/* ============================================
   BASE COMPONENT STYLES
   ============================================ */

.content-2column-contact {
    box-sizing: border-box;
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
    position: relative;
    width: 100%;
    padding: var(--space-2) var(--space-16);
}

/* ============================================
   BACKGROUND LAYER (Desktop/DesktopPlus Only)
   ============================================ */

.content-2column-contact__background {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.content-2column-contact__background-color {
    position: absolute;
    inset: 0;
    background-color: var(--color-neutral-100);
}

.content-2column-contact__background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    opacity: 0.67;
    max-width: none;
}

/* ============================================
   COLUMN LAYOUT
   ============================================ */

.content-2column-contact__columns {
    background-color: var(--color-white);
    box-sizing: border-box;
    display: flex;
    gap: var(--space-5);
    align-items: center;
    padding: var(--space-4) var(--space-16);
    position: relative;
    z-index: 1;
    width: 100%;
}

/* ============================================
   CONTACT CARD (Left Column)
   ============================================ */

.content-2column-contact__card {
    background-color: var(--color-white);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: var(--space-10) var(--space-12) var(--space-16);
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-subtle);
    position: relative;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

.content-2column-contact__heading {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-height);
    color: var(--color-primary-700);
    text-transform: uppercase;
    margin: 0;
    width: 100%;
    position: relative;
    flex-shrink: 0;
}

.content-2column-contact__body {
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-regular);
    font-size: var(--text-default-size);
    line-height: var(--text-default-height);
    color: var(--color-neutral-600);
    margin: 0;
    width: 100%;
    position: relative;
    flex-shrink: 0;
}

/* ============================================
   BUTTON COMPONENT
   ============================================ */

.content-2column-contact__button {
    background-color: var(--button-primary-bg);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-20);
    border-radius: var(--radius-small);
    border: none;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background-color var(--transition-base), transform var(--transition-fast);
    overflow: hidden;
}

.content-2column-contact__button:hover {
    background-color: var(--button-primary-hover);
    transform: translateY(-1px);
}

.content-2column-contact__button:active {
    background-color: var(--button-primary-active);
    transform: translateY(0);
}

.content-2column-contact__button-text {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-default-size);
    line-height: var(--text-default-size);
    color: var(--color-white);
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* ============================================
   IMAGE COMPONENT (Right Column)
   ============================================ */

.content-2column-contact__image-wrapper {
    position: relative;
    aspect-ratio: 667/1000;
}

.content-2column-contact__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 50%;
    max-width: none;
}

/* Image Loading State - Default visible, smooth transition on load */
.content-2column-contact__image {
    opacity: 1;
    transition: opacity var(--transition-slow);
}

/* Optional loading state if JavaScript adds loaded class */
.content-2column-contact__image.loaded {
    opacity: 1;
}

/* ============================================
   STATE CLASSES
   ============================================ */

/* Component loaded state */
.content-2column-contact--loaded {
    animation: fadeIn var(--transition-slow) ease;
}

/* Component active/visible state */
.content-2column-contact--active .content-2column-contact__card {
    animation: slideInLeft 0.5s ease;
}

.content-2column-contact--active .content-2column-contact__image-wrapper {
    animation: slideInRight 0.5s ease;
}

/* ============================================
   ANIMATIONS
   ============================================ */

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

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

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

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* DesktopPlus (1920px and wider) */
@media (min-width: 1920px) {
    .content-2column-contact {
        justify-content: center;
        max-width: 1920px;
        min-width: 1920px;
    }

    .content-2column-contact__columns {
        max-width: 1348px;
        margin: 0 auto;
    }

    .content-2column-contact__card {
        width: 600px;
        flex-shrink: 0;
    }

    .content-2column-contact__image-wrapper {
        flex: 1;
        min-width: 400px;
        align-self: stretch;
    }

    /* Hide secondary background on DesktopPlus */
    .content-2column-contact__background-color {
        display: none;
    }
}

/* Desktop (1150px - 1919px) */
@media (min-width: 1150px) and (max-width: 1919px) {
    .content-2column-contact {
        justify-content: center;
        max-width: 1919px;
        min-width: 1150px;
    }

    .content-2column-contact__columns {
        max-width: 1349px;
    }

    .content-2column-contact__card {
        flex: 1 1 0;
        min-width: 1px;
        min-height: 1px;
    }

    .content-2column-contact__image-wrapper {
        width: 600px;
        height: 899px;
        flex-shrink: 0;
        aspect-ratio: auto;
    }
}

/* Tablet (768px - 1149px) */
@media (min-width: 768px) and (max-width: 1149px) {
    .content-2column-contact {
        padding: var(--space-2) 0;
        background-color: var(--color-neutral-100);
        max-width: 1149px;
        min-width: 768px;
    }

    .content-2column-contact__background {
        display: none;
    }

    .content-2column-contact__columns {
        max-width: 1149px;
    }

    .content-2column-contact__card {
        min-width: 500px;
        flex: 1 1 0;
    }

    .content-2column-contact__heading {
        font-size: var(--text-h3-size);
        line-height: var(--text-h3-height);
    }

    .content-2column-contact__button {
        padding: var(--space-3) var(--space-16);
    }

    .content-2column-contact__image-wrapper {
        flex: 1;
        min-width: 300px;
        align-self: stretch;
    }
}

/* Mobile (380px - 767px) */
@media (max-width: 767px) {
    .content-2column-contact {
        padding: var(--space-2) 0;
        background-color: var(--color-neutral-100);
        max-width: 767px;
        min-width: 380px;
        overflow: hidden;
    }

    .content-2column-contact__background {
        display: none;
    }

    .content-2column-contact__columns {
        flex-direction: row;
        align-items: stretch;
        overflow: visible;
    }

    .content-2column-contact__card {
        width: 320px;
        flex-shrink: 0;
    }

    .content-2column-contact__image-wrapper {
        flex: 1;
        align-self: stretch;
        min-width: 0;
        aspect-ratio: auto;
    }

    .content-2column-contact__image {
        height: 100%;
        width: auto;
        object-fit: cover;
        object-position: left center;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .content-2column-contact__background {
        display: none;
    }

    .content-2column-contact__button {
        border: 1px solid var(--color-primary-700);
    }

    .content-2column-contact__card {
        box-shadow: none;
    }
}
/* =================================================
   CONTENT 2-COLUMN GRAPHIC ORGANISM
   Version: 4.0
   Date: 2025-11-04
   Description: Full-viewport background with two teaser card overlays
   Features: Responsive layout, gold/navy button variants
   ================================================= */

/* =================================================
   BASE COMPONENT STRUCTURE
   ================================================= */

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Main Container */
.content-2column-graphic {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    display: flex;
    overflow: hidden;
}

/* Background Image */
.content-2column-graphic__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.content-2column-graphic__background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Content Container */
.content-2column-graphic__container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 1;
}

/* =================================================
   TEASER CARD COMPONENT
   ================================================= */

.teaser-card {
    background-color: var(--color-white);
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-subtle);
    padding: var(--space-16) var(--space-8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-8);
    overflow: hidden;
}

.teaser-card__headline {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-8);
}

.teaser-card__title {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-height);
    text-transform: uppercase;
    color: var(--color-primary-700);
    flex: 1;
    min-width: 1px;
    min-height: 1px;
}

.teaser-card__description {
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-regular);
    font-size: var(--text-default-size);
    line-height: var(--text-default-height);
    color: var(--color-neutral-600);
    width: 100%;
}

/* =================================================
   BUTTON COMPONENT
   ================================================= */

.teaser-card__button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-20);
    border-radius: var(--radius-small);
    cursor: pointer;
    transition: all var(--transition-slow);
    text-decoration: none;
    border: none;
    outline: none;
}

.teaser-card__button-text {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--label-cta-size);
    line-height: var(--label-cta-size);
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
}

/* Gold Button Variant */
.teaser-card__button--gold {
    background-color: var(--color-accent-500);
}

.teaser-card__button--gold:hover {
    background-color: var(--color-accent-400);
    transform: translateY(-2px);
}

.teaser-card__button--gold:active {
    background-color: var(--color-accent-600);
}

.teaser-card__button--gold .teaser-card__button-text {
    color: var(--color-primary-700);
}

/* Navy Button Variant */
.teaser-card__button--navy {
    background-color: var(--color-primary-700);
}

.teaser-card__button--navy:hover {
    background-color: var(--color-primary-500);
    transform: translateY(-2px);
}

.teaser-card__button--navy:active {
    background-color: var(--color-primary-900);
}

.teaser-card__button--navy .teaser-card__button-text {
    color: var(--color-white);
}

/* =================================================
   RESPONSIVE BREAKPOINTS
   ================================================= */

/* DesktopPlus: 1920px and wider */
@media (min-width: 1920px) {
    .content-2column-graphic {
        height: 1000px;
    }

    .content-2column-graphic__container {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        padding: var(--space-0) var(--space-16);
    }

    .content-2column-graphic__column {
        flex: 1 0 0;
        min-width: 1px;
        min-height: 1px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding: var(--space-16);
        gap: var(--space-5);
        height: 100%;
    }

    .teaser-card {
        width: 600px;
        max-width: 600px;
    }

    .teaser-card__description {
        width: 536px;
    }

    .teaser-card__button {
        height: 50px;
    }
}

/* Desktop: 1150px to 1919px */
@media (min-width: 1150px) and (max-width: 1919px) {
    .content-2column-graphic {
        height: 1000px;
    }

    .content-2column-graphic__container {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        padding: var(--space-0) var(--space-16);
    }

    .content-2column-graphic__column {
        flex: 1 0 0;
        min-width: 1px;
        min-height: 1px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding: var(--space-16);
        gap: var(--space-5);
        height: 100%;
    }

    .content-2column-graphic__column--left {
        justify-content: flex-start;
    }

    .content-2column-graphic__column--right {
        justify-content: flex-end;
    }

    .teaser-card {
        flex: 1 0 0;
        max-width: 600px;
        min-width: 1px;
        min-height: 1px;
    }

    .teaser-card__button {
        height: 50px;
    }
}

/* Tablet: 768px to 1149px */
@media (min-width: 768px) and (max-width: 1149px) {
    .content-2column-graphic {
        min-height: auto;
        height: auto;
    }

    .content-2column-graphic__container {
        flex-direction: column;
        align-items: center;
        gap: var(--space-5);
        padding: var(--space-0) var(--space-16);
    }

    .content-2column-graphic__column {
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        padding: var(--space-16);
        gap: var(--space-5);
    }

    .teaser-card {
        width: 376px;
        max-width: 376px;
    }

    .teaser-card__title {
        font-size: var(--text-h2-size);
        line-height: var(--text-h2-height);
    }

    .teaser-card__description {
        width: 312px;
    }

    .teaser-card__button {
        height: 50px;
    }
}

/* Mobile: 380px to 767px */
@media (max-width: 767px) {
    .content-2column-graphic {
        min-height: auto;
        height: auto;
    }

    .content-2column-graphic__container {
        flex-direction: column;
        align-items: center;
        gap: var(--space-5);
        padding: var(--space-0) var(--space-6);
    }

    .content-2column-graphic__column {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: var(--space-16) var(--space-4);
        gap: var(--space-5);
    }

    .teaser-card {
        width: 320px;
        padding: var(--space-16) var(--space-8);
    }

    .teaser-card__headline {
        flex-direction: column;
        gap: var(--space-8);
    }

    .teaser-card__title {
        font-size: var(--text-h4-size);
        line-height: var(--text-h4-height);
        width: 256px;
    }

    .teaser-card__description {
        width: 256px;
    }

    .teaser-card__button {
        height: 34px;
        padding: var(--space-2) var(--space-12);
    }
}

/* =================================================
   END OF COMPONENT
   ================================================= */
/* ====================================
   PILLAR SECTION ORGANISM - VERSION 4.0
   ==================================== */
/* Component: Organism/Section/Pillar-Section */
/* Last Updated: 2025-11-03 */
/* Dependencies: variables-v4.0-20251027.css, molecules-pillar-card.css, molecules-decorative-icon-display.css */

/* ====================================
   PILLAR SECTION ORGANISM TOKENS
   ==================================== */
:root {
    /* Section Background */
    --pillar-section-bg: var(--secondary, #eceeef);

    /* Section Spacing */
    --pillar-section-gap: var(--space-8, 32px);
    --pillar-section-padding-top: var(--space-8, 32px);
    --pillar-section-padding-bottom: 0px;

    /* Section Headline Typography */
    --pillar-section-h1-font-family: 'Lato', sans-serif;
    --pillar-section-h1-font-weight: 800;
    --pillar-section-h1-font-size: 36px;
    --pillar-section-h1-line-height: 54px;
    --pillar-section-h1-text-transform: uppercase;
    --pillar-section-h1-color: var(--heading, #1b1464);
}

/* ====================================
   BASE PILLAR SECTION STYLES
   ==================================== */
.pillar-section {
    background-color: var(--pillar-section-bg);
    display: flex;
    flex-direction: column;
    gap: var(--pillar-section-gap);
    align-items: flex-start;
    position: relative;
    width: 100%;
}

/* Section Headline Container */
.pillar-section__header {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    padding: var(--pillar-section-padding-top) var(--pillar-space-20, 80px) var(--pillar-section-padding-bottom);
    position: relative;
    width: 100%;
}

.pillar-section__headline-wrapper {
    background-color: var(--pillar-section-bg);
    display: flex;
    gap: 10px;
    align-items: center;
    position: relative;
}

.pillar-section__headline {
    font-family: var(--pillar-section-h1-font-family);
    font-weight: var(--pillar-section-h1-font-weight);
    font-size: var(--pillar-section-h1-font-size);
    line-height: var(--pillar-section-h1-line-height);
    text-transform: var(--pillar-section-h1-text-transform);
    color: var(--pillar-section-h1-color);
    font-style: normal;
    position: relative;
    white-space: nowrap;
    margin: 0;
}

/* Individual Pillar Card Container (within section) */
.pillar-section__card {
    background-color: var(--pillar-section-bg);
    box-sizing: border-box;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Override pillar-card background to match section */
.pillar-section .pillar-card {
    background-color: var(--pillar-section-bg);
}

/* ====================================
   RESPONSIVE BREAKPOINTS
   ==================================== */

/* Mobile: 380-767px */
@media (max-width: 767px) {
    .pillar-section__card {
        max-width: 767px;
        min-width: 380px;
    }
}

/* Tablet: 768-1149px */
@media (min-width: 768px) and (max-width: 1149px) {
    .pillar-section__card {
        max-width: 1149px;
        min-width: 768px;
    }
}

/* Desktop: 1150-1919px */
@media (min-width: 1150px) and (max-width: 1919px) {
    .pillar-section__card {
        max-width: 1920px;
        min-width: 1150px;
    }
}

/* DesktopPlus: 1920px+ */
@media (min-width: 1920px) {
    .pillar-section__card {
        max-width: 1920px;
        min-width: 1920px;
    }
}
/* ============================================
   ORGANISMS - SECTION CONTACT US
   Purposeful Media Design System
   Version: 4.0
   Last Modified: 2025-10-30
   Dependencies: variables-v4.0-20251027.css

   Description:
   This organism provides a section wrapper for the Form/Contact molecule.
   Following Atomic Design principles: Organisms compose Molecules.
   The Form/Contact molecule handles all form styling independently.

   Breakpoints:
   - Mobile: 380-767px
   - Tablet: 768-1149px
   - Desktop: 1150-1919px
   - DesktopPlus: 1920px+
   ============================================ */

/* Import dependencies */

/* ============================================
   SECTION WRAPPER STYLES
   ============================================ */

/* Section container provides background and spacing */
.section-contactus {
  background-color: var(--color-neutral-100, #eceeef);
  padding: var(--space-16, 64px) var(--space-5, 20px);
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Container centers the form molecule */
.section-contactus__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1200px;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Mobile: 380px to 767px */
@media (max-width: 767px) {
  .section-contactus {
    padding: var(--space-16, 64px) var(--space-4, 16px);
  }
}

/* Tablet: 768px to 1149px */
@media (min-width: 768px) and (max-width: 1149px) {
  .section-contactus {
    padding: var(--space-16, 64px) var(--space-8, 32px);
  }

  .section-contactus__container {
    max-width: 900px;
  }
}

/* Desktop: 1150px to 1919px */
@media (min-width: 1150px) and (max-width: 1919px) {
  .section-contactus {
    padding: var(--space-16, 64px) var(--space-10, 40px);
  }

  .section-contactus__container {
    max-width: 1100px;
  }
}

/* DesktopPlus: 1920px and wider */
@media (min-width: 1920px) {
  .section-contactus {
    padding: var(--space-16, 64px);
  }

  .section-contactus__container {
    max-width: 1200px;
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .section-contactus {
    background-color: white;
    padding: 0;
  }
}
/* ============================================
   ORGANISMS - SECTION FAQ GROUP
   Purposeful Media Design System
   Version: 4.0
   Last Modified: 2025-10-30
   Dependencies: variables-v4.0-20251027.css

   Description:
   This organism provides a section wrapper for multiple Card/FAQ molecules.
   Following Atomic Design principles: Organisms compose Molecules.
   The Card/FAQ molecule handles all FAQ card styling independently.

   Structure:
   1. Outer Section - Full width, optional background
   2. Container - Centers content, provides padding
   3. Items Wrapper - Gray background container that hugs the cards

   Breakpoints:
   - Mobile: 380-767px
   - Tablet: 768-1149px
   - Desktop: 1150-1919px
   - DesktopPlus: 1920px+
   ============================================ */

/* Import dependencies */

/* ============================================
   SECTION WRAPPER STYLES
   ============================================ */

/* Outer section container */
.section-faq-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
  /* Outer section can have optional background image or color */
  background-color: transparent;
}

/* Container centers the FAQ items and provides padding */
.section-faq-group__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  padding: var(--space-16, 64px) var(--space-5, 20px);
  box-sizing: border-box;
  position: relative;
}

/* Items wrapper - gray background that hugs the cards */
.section-faq-group__items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  background-color: var(--color-neutral-100, #eceeef);
  border-radius: 20px;
  padding: var(--space-6, 24px);
  box-sizing: border-box;
  position: relative;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Mobile: 380px to 767px */
@media (max-width: 767px) {
  .section-faq-group__container {
    padding: var(--space-16, 64px) var(--space-4, 16px);
  }

  .section-faq-group__items {
    border-radius: 16px;
    padding: var(--space-4, 16px);
  }
}

/* Tablet: 768px to 1149px */
@media (min-width: 768px) and (max-width: 1149px) {
  .section-faq-group__container {
    padding: var(--space-16, 64px) var(--space-8, 32px);
    max-width: 900px;
  }

  .section-faq-group__items {
    border-radius: 18px;
    padding: var(--space-5, 20px);
  }
}

/* Desktop: 1150px to 1919px */
@media (min-width: 1150px) and (max-width: 1919px) {
  .section-faq-group__container {
    padding: var(--space-16, 64px) var(--space-10, 40px);
    max-width: 1100px;
  }

  .section-faq-group__items {
    border-radius: 20px;
    padding: var(--space-6, 24px);
  }
}

/* DesktopPlus: 1920px and wider */
@media (min-width: 1920px) {
  .section-faq-group__container {
    padding: var(--space-16, 64px);
    max-width: 1200px;
  }

  .section-faq-group__items {
    border-radius: 20px;
    padding: var(--space-6, 24px);
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .section-faq-group {
    background-color: white;
  }

  .section-faq-group__container {
    padding: 0;
  }

  .section-faq-group__items {
    border-radius: 0;
    padding: var(--space-4, 16px);
  }
}
/* ============================================
   ORGANISMS - SECTION RESOURCES
   Purposeful Media Design System
   Version: 4.0
   Last Modified: 2025-10-30
   Dependencies: variables-v4.0-20251027.css

   Description:
   This organism provides a responsive grid wrapper for multiple Card/Resources molecules.
   Following Atomic Design principles: Organisms compose Molecules.
   The Card/Resources molecule handles all card styling independently.

   Grid Layout:
   - Mobile (380-767px): 1 column
   - Tablet (768-1149px): 2 columns
   - Desktop (1150-1919px): 3 columns
   - DesktopPlus (1920px+): 4 columns

   Card dimensions: Fixed 350px width per card
   Gap: 32px between cards

   Breakpoints:
   - Mobile: 380-767px
   - Tablet: 768-1149px
   - Desktop: 1150-1919px
   - DesktopPlus: 1920px+
   ============================================ */

/* Import dependencies */

/* ============================================
   SECTION WRAPPER STYLES
   ============================================ */

/* Base section container */
.section-resources {
  box-sizing: border-box;
  width: 100%;
  background-color: var(--color-neutral-100, #eceeef);
  padding: var(--space-16, 64px) 0;
}

/* Container centers the grid and provides padding */
.section-resources__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 var(--space-8, 32px);
  box-sizing: border-box;
}

/* Grid container - CSS Grid for precise column control */
.section-resources__grid {
  display: grid;
  gap: var(--space-8, 32px);
  width: 100%;
  justify-content: center;
  align-items: start;
  box-sizing: border-box;
  /* Default: 1 column for mobile-first approach */
  grid-template-columns: repeat(auto-fit, minmax(300px, 350px));
  max-width: 350px;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Mobile: 380px to 767px - 1 card per row */
@media (max-width: 767px) {
  .section-resources {
    padding: var(--space-16, 64px) 0;
  }

  .section-resources__container {
    padding: 0 var(--space-4, 16px);
  }

  .section-resources__grid {
    grid-template-columns: 1fr;
    max-width: 350px;
    gap: var(--space-8, 32px);
  }
}

/* Tablet: 768px to 1149px - EXACTLY 2 cards per row */
@media (min-width: 768px) and (max-width: 1149px) {
  .section-resources {
    padding: var(--space-16, 64px) 0;
  }

  .section-resources__container {
    padding: 0 var(--space-8, 32px);
  }

  .section-resources__grid {
    grid-template-columns: repeat(2, 350px);
    max-width: 732px; /* 350*2 + 32 gap = 732px */
    gap: var(--space-8, 32px);
  }
}

/* Desktop: 1150px to 1919px - EXACTLY 3 cards per row */
@media (min-width: 1150px) and (max-width: 1919px) {
  .section-resources {
    padding: var(--space-16, 64px) 0;
  }

  .section-resources__container {
    padding: 0 var(--space-10, 40px);
  }

  .section-resources__grid {
    grid-template-columns: repeat(3, 350px);
    max-width: 1114px; /* 350*3 + 32*2 gaps = 1114px */
    gap: var(--space-8, 32px);
  }
}

/* DesktopPlus: 1920px and wider - EXACTLY 4 cards per row */
@media (min-width: 1920px) {
  .section-resources {
    padding: var(--space-16, 64px) 0;
  }

  .section-resources__container {
    padding: 0 var(--space-16, 64px);
  }

  .section-resources__grid {
    grid-template-columns: repeat(4, 350px);
    max-width: 1496px; /* 350*4 + 32*3 gaps = 1496px */
    gap: var(--space-8, 32px);
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .section-resources {
    background-color: white;
    padding: 0;
  }

  .section-resources__container {
    padding: 0;
  }

  .section-resources__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4, 16px);
  }
}
/* ============================================
   ORGANISMS: PAGE SECTIONS
   Version: 1.0
   Date: September 22, 2025
   
   Purpose: Content section organism components
   Dependencies: variables-v2.0-20250915.css
   
   Components:
   - Hero Sections
   - Feature Sections
   - Testimonial Sections
   - CTA Sections
   - Blog Sections
   - Resource Sections
   ============================================ */

/* Import Variables */

/* Import Section Components */

/* ============================================
   HERO SECTIONS
   ============================================ */

.section-hero {
    /* Component styles will be added during organism export */
    /* This file serves as the template structure */
}

.section-hero-simple {
    /* Simplified hero variant */
}

.section-hero-visual {
    /* Hero with background image/video */
}

/* ============================================
   FEATURE SECTIONS
   ============================================ */

.section-features {
    /* Feature grid/list sections */
}

.section-features-grid {
    /* Grid layout for features */
}

.section-features-list {
    /* List layout for features */
}

/* ============================================
   TESTIMONIAL SECTIONS
   ============================================ */

.section-testimonials {
    /* Customer testimonial sections */
}

.section-testimonials-carousel {
    /* Carousel variant for testimonials */
}

.section-testimonials-grid {
    /* Grid variant for testimonials */
}

/* ============================================
   CTA SECTIONS
   ============================================ */

.section-cta {
    /* Call-to-action sections */
}

.section-cta-simple {
    /* Simple CTA variant */
}

.section-cta-split {
    /* Split layout CTA variant */
}

/* ============================================
   BLOG SECTIONS
   ============================================ */

.section-blog {
    /* Blog post listing sections */
}

.section-blog-grid {
    /* Grid layout for blog posts */
}

.section-blog-list {
    /* List layout for blog posts */
}

/* ============================================
   RESOURCE SECTIONS
   ============================================ */

.section-resources {
    /* Resource/download sections */
}

.section-resources-grid {
    /* Grid layout for resources */
}

.section-resources-featured {
    /* Featured resource highlight */
}

/* ============================================
   CONTACT SECTIONS
   ============================================ */

/* Content/2ColumnContact styles imported above */
/* Additional contact section variants can be added here */

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Mobile: 380-767px */
@media (max-width: 767px) {
    /* Mobile-specific section styles */
}

/* Tablet: 768-1149px */
@media (min-width: 768px) and (max-width: 1149px) {
    /* Tablet-specific section styles */
}

/* Desktop: 1150-1919px */
@media (min-width: 1150px) and (max-width: 1919px) {
    /* Desktop-specific section styles */
}

/* DesktopPlus: 1920px+ */
@media (min-width: 1920px) {
    /* Large desktop-specific section styles */

/* ============================================
   ORGANISMS - TEXT BLOCK V2 (FIGMA-ACCURATE)
   ============================================
   
   NOTE: Text block styles have been moved to a separate file
   for easier maintenance and Figma-accurate styling.
   
   Load: organisms-text-block-v2.css
   
   The old text-block styles (lines 4929-5943) have been
   deprecated and replaced with Figma-spec styles:
   - Gray background (#ECEEEF)
   - Uppercase headlines
   - Lato-Heavy font (900 weight)
   - Exact gap spacing (16px)
   
   DO NOT uncomment the old styles below. They conflict
   with the new v2 implementation.
   ============================================ */

/*
OLD TEXT BLOCK STYLES COMMENTED OUT - DO NOT USE
Lines 4929-5943 from previous version
Load organisms-text-block-v2.css instead
*/


/* =================================================
   USAGE NOTES
   
   This organism works with the card-blogpost molecule.
   
   HTML Structure:
   <section class="blog-group blog-group--frontpage">
     <header class="blog-group__header"> (optional)
       <h2 class="blog-group__title">Latest Articles</h2>
       <p class="blog-group__subtitle">Insights for B2B Success</p>
     </header>
     
     <div class="blog-group__cards">
       <div class="blog-group__inner">
         <!-- Multiple card-blogpost molecules here -->
         <article class="card-blogpost">...</article>
         <article class="card-blogpost">...</article>
       </div>
     </div>
     
     <footer class="blog-group__footer">
       <a class="blog-group__pagination">More Articles →</a>
     </footer>
   </section>
   
   Modes:
   - .blog-group--teaser (2 posts, no pagination)
   - .blog-group--frontpage-mobile (4 posts)
   - .blog-group--frontpage-tablet (6 posts)  
   - .blog-group--frontpage-desktop (8 posts)
   - .blog-group--infinite (all posts, no pagination)
   
   ================================================= */

/* =================================================
   TOKEN USAGE SUMMARY
   
   ✅ Single-column layout per Figma design
   ✅ Spacing tokens for all padding/margins:
      - var(--space-*) throughout
   
   ✅ Container tokens:
      - var(--container-standard) for max-width
   
   ✅ Color tokens:
      - var(--bg-primary) for background
      - var(--text-body) for pagination
      - var(--text-heading) for titles
   
   ✅ Typography tokens:
      - var(--font-secondary) for pagination
      - var(--text-default-*) for pagination
   
   ✅ Interactive tokens:
      - var(--transition-base) for hover
      - var(--color-primary-*) for link states
   
   ⚠️ NO card styling (handled by molecule)
   ⚠️ NO hardcoded values
   ⚠️ NO inline styles needed
   
   ================================================= */