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

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

   THIS FILE CONSOLIDATES:
   - atoms-banner-spacer.css
   - molecules-card-banner-spacer.css
   - molecules-card-blogpost.css
   - molecules-card-faq.css
   - molecules-card-paragraph-options.css
   - molecules-card-resources.css
   - molecules-card-teaser.css
   - molecules-cards-resources.css
   - molecules-pillar-card.css
   - molecules-decorative-icon-display.css
   - molecules-ui-icon-display.css
   - molecules-form-contact.css
   - molecules-form-newsletter.css
   - molecules-form-resource.css
   - molecules-forms.css
   - molecules-return-button.css
   - molecules-sticky-menu.css
   - molecules-dropdown-menus.css
   - molecules-slides.css

   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)
   - Total lines: ~6100

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

/* =================================================
   CARD/BANNER-SPACER COMPONENT STYLES
   Version: 3.0 (External CSS)
   Dependencies: variables-v4.0-20251027.css
   File: atoms-banner-spacer.css
   ================================================= */

/* -------------------------------------------------
   BASE STRUCTURE
   ------------------------------------------------- */
.card-banner-spacer {
    position: relative;
    width: 100%;
}

.banner-spacer-content {
    padding: 12px var(--space-4);
    box-sizing: border-box;
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: var(--button-height-small);
}

/* -------------------------------------------------
   VARIANT: Spacer (Gradient, no text)
   ------------------------------------------------- */
.card-banner-spacer.variant-spacer {
    background: linear-gradient(
        to bottom,
        var(--bg-primary) 0%,
        var(--bg-brand) 100%
    );
    min-height: var(--button-height-small);
}

.card-banner-spacer.variant-spacer .banner-spacer-content {
    min-height: var(--button-height-small);
    padding: var(--space-5) var(--space-4);
}

/* -------------------------------------------------
   VARIANT: HeadlineBanner (Navy bg, white text, gold bottom border)
   ------------------------------------------------- */
.card-banner-spacer.variant-headline-banner {
    background-color: var(--banner-bg);
    border-bottom: var(--space-1) solid var(--banner-accent);
    height: 80px;
}

.variant-headline-banner .banner-headline {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    text-transform: uppercase;
    color: var(--banner-headline);
    white-space: nowrap;
    flex-shrink: 0;
    margin: 0;
}

/* -------------------------------------------------
   VARIANT: HeadlineReverse (White bg, navy text)
   ------------------------------------------------- */
.card-banner-spacer.variant-headline-reverse {
    background-color: var(--bg-primary);
    height: 80px;
}

.variant-headline-reverse .banner-headline {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    text-transform: uppercase;
    color: var(--text-heading);
    white-space: nowrap;
    flex-shrink: 0;
    margin: 0;
}

/* -------------------------------------------------
   RESPONSIVE TYPOGRAPHY
   ------------------------------------------------- */

/* Desktop Plus (1920px+) */
@media (min-width: 1920px) {
    .variant-headline-banner .banner-headline {
        font-size: var(--banner-headline-size-desktop);
        line-height: var(--banner-headline-height-desktop);
    }
    
    .variant-headline-reverse .banner-headline {
        font-size: var(--text-h3-size);
        line-height: var(--banner-subheading-height);
    }
    
    .banner-spacer-content {
        max-width: 1920px;
        margin: 0 auto;
    }
}

/* Desktop (1150px - 1919px) */
@media (min-width: 1150px) and (max-width: 1919px) {
    .variant-headline-banner .banner-headline {
        font-size: var(--banner-headline-size-desktop);
        line-height: var(--banner-headline-height-desktop);
    }
    
    .variant-headline-reverse .banner-headline {
        font-size: var(--text-h3-size);
        line-height: var(--banner-subheading-height);
    }
    
    .banner-spacer-content {
        max-width: 1920px;
        margin: 0 auto;
    }
}

/* Tablet (768px - 1149px) */
@media (min-width: 768px) and (max-width: 1149px) {
    .variant-headline-banner .banner-headline {
        font-size: var(--text-h3-size);
        line-height: var(--banner-subheading-height);
    }
    
    .variant-headline-reverse .banner-headline {
        font-size: var(--text-h4-size);
        line-height: var(--text-h2-size);
    }
    
    .banner-spacer-content {
        max-width: 1150px;
        margin: 0 auto;
    }
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
    .variant-headline-banner .banner-headline,
    .variant-headline-reverse .banner-headline {
        font-size: var(--banner-headline-size-mobile);
        line-height: var(--banner-headline-height-mobile);
        text-align: left;
    }

    .banner-spacer-content {
        justify-content: flex-start;
    }
}
/**
 * Card/BannerSpacer - HeadlineSubtitle Component Styles
 * Purposeful Media Promotions Design System
 *
 * Component: Molecule/Card/BannerSpacer
 * Variant: HeadlineSubtitle
 * Description: Full-width banner with icon, headline, and subtitle
 * Features: Fixed height, 90px icon at all breakpoints, gold border accent
 *
 * Layout Structure:
 * - Desktop/Tablet: 120px height, Horizontal [Icon] [Headline above Subtitle]
 * - Mobile: 245px height, Vertical centered [Icon] → [Headline] → [Subtitle]
 *
 * Height Constraints (per Figma):
 * - Desktop/DesktopPlus/Tablet: 120px fixed height
 * - Mobile: 245px fixed height
 *
 * Tokenized: 2025-10-28
 * Version: 3.1
 * Variables: v4.0-20251027 (corrected H1-H6 sizes)
 *
 * Changelog v3.1:
 * - Added fixed height constraints: 120px (desktop/tablet), 245px (mobile)
 * - Content max-width: 1920px (background extends full viewport)
 * - Headline and subtitle stack vertically (not inline)
 * - Corrected v4.0 variables H1-H6 sizes with 1.5x line heights
 * - Desktop/DesktopPlus: H1 (36px/54px), Tablet: H2 (30px/45px), Mobile: H3 (24px/36px)
 */

/* ============================================
   BASE BANNER STRUCTURE
   ============================================ */

.card-banner-spacer {
    position: relative;
    width: 100%;
    height: 120px;
    background-color: var(--color-primary-700);
}

.banner-spacer-content {
    padding: 0 var(--space-4);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: var(--space-4);
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

.banner-spacer-header {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-1);
    overflow: hidden;
}

/* ============================================
   ICON DISPLAY
   ============================================ */

/* Icons use standard decorative-icon-display--large (90px) at all breakpoints */
/* Icon styles are handled by molecules-decorative-icon-display.css */
/* No custom sizing overrides needed */

/* ============================================
   HEADLINE STYLES
   ============================================ */

.banner-headline {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    text-transform: uppercase;
    color: var(--color-white);
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.2;
    margin: 0;
}

/* ============================================
   SUBTITLE STYLES
   ============================================ */

.banner-subtitle {
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-large-size);
    line-height: 1.3;
    color: var(--color-neutral-200);
    flex: 1 1 auto;
    width: 100%;
    margin: 0;
}

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

/* Desktop Plus: 1920px+ */
@media (min-width: 1920px) {
    .banner-headline {
        font-size: var(--text-h1-size); /* 36px */
        line-height: 1.2; /* Tight for banner context */
    }

    .banner-subtitle {
        white-space: normal;
    }
}

/* Desktop: 1150-1919px */
@media (min-width: 1150px) and (max-width: 1919px) {
    .banner-headline {
        font-size: var(--text-h1-size); /* 36px */
        line-height: 1.2; /* Tight for banner context */
    }

    .banner-subtitle {
        white-space: normal;
    }
}

/* Tablet: 768-1149px */
@media (min-width: 768px) and (max-width: 1149px) {
    .banner-headline {
        font-size: var(--text-h2-size); /* 30px */
        line-height: 1.2; /* Tight for banner context */
    }

    .banner-subtitle {
        white-space: normal;
    }
}

/* Mobile: 380-767px */
@media (min-width: 380px) and (max-width: 767px) {
    .card-banner-spacer {
        height: 245px;
    }

    .banner-spacer-content {
        flex-direction: column;
        gap: var(--space-3);
        align-items: center;
        justify-content: center;
        padding: var(--space-4);
    }

    .banner-spacer-header {
        align-items: center;
        width: 100%;
        gap: var(--space-2);
    }

    .banner-headline {
        font-size: var(--text-h3-size); /* 24px */
        line-height: 1.3; /* 245px height allows more breathing room */
        text-align: center;
        white-space: normal;
    }

    .banner-subtitle {
        text-align: center;
        white-space: normal;
        width: 100%;
    }
}

/* Mobile: Below 380px (fallback for very small screens) */
@media (max-width: 379px) {
    .card-banner-spacer {
        height: 245px;
    }

    .banner-spacer-content {
        flex-direction: column;
        gap: var(--space-3);
        align-items: center;
        justify-content: center;
        padding: var(--space-4);
    }

    .banner-spacer-header {
        align-items: center;
        width: 100%;
        gap: var(--space-2);
    }

    .banner-headline {
        font-size: var(--text-h3-size); /* 24px */
        line-height: 1.3; /* 245px height allows more breathing room */
        text-align: center;
        white-space: normal;
    }

    .banner-subtitle {
        text-align: center;
        white-space: normal;
        width: 100%;
    }
}
/* =================================================
   BLOG CARD COMPONENT - MOLECULE
   Component: card-blogpost.html
   Purpose: Display blog post preview with title, metadata, excerpt, and read more link
   States: Default, Hover, Active
   Responsive: Mobile (380-767px), Tablet (768-1149px), Desktop (1150-1919px), DesktopPlus (1920px+)
   Version: 1.0 - Fully Tokenized
   Date: 2025-10-28
   ================================================= */

/* -------------------------------------------------
   BASE CARD STYLES
   ------------------------------------------------- */

.blog-card {
    /* Layout */
    display: flex;
    flex-direction: column;
    gap: var(--space-4); /* 16px */
    width: 100%;

    /* Spacing */
    padding: var(--space-3) var(--space-4); /* 12px 16px */

    /* Visual */
    background-color: var(--card-blog-bg-default);
    box-shadow: var(--shadow-none);

    /* Interactive */
    cursor: pointer;
    position: relative;

    /* Transitions */
    transition: background-color var(--transition-slow),
                box-shadow var(--transition-slow),
                transform var(--transition-base);
}

/* -------------------------------------------------
   CARD TOP SECTION (Title + Meta)
   ------------------------------------------------- */

.blog-card__top {
    display: flex;
    flex-direction: column;
    gap: var(--space-1); /* 4px */
}

.blog-card__title {
    /* Typography */
    font-family: var(--font-primary); /* Lato */
    font-weight: var(--font-weight-black); /* 900 */
    text-transform: uppercase;
    line-height: 1.45;

    /* Color */
    color: var(--text-heading); /* Navy #1b1464 */

    /* Transitions */
    transition: color var(--transition-slow);
}

.blog-card__meta {
    /* Typography */
    font-family: var(--font-secondary); /* Open Sans */
    font-size: var(--text-small-size); /* 12px */
    line-height: var(--text-small-height); /* 18px */
    font-weight: var(--font-weight-regular);

    /* Color */
    color: var(--text-heading); /* Navy #1b1464 */

    /* Transitions */
    transition: color var(--transition-slow);
}

/* -------------------------------------------------
   CARD CONTENT SECTION (Excerpt + Read More)
   ------------------------------------------------- */

.blog-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-3); /* 12px */
    padding-bottom: var(--space-5); /* 20px */
}

.blog-card__excerpt {
    /* Typography */
    font-family: var(--font-secondary); /* Open Sans */
    font-size: var(--text-default-size); /* 18px */
    line-height: var(--text-default-height); /* 27px */
    font-weight: var(--font-weight-regular);

    /* Color */
    color: var(--text-body); /* Gray #51585e */
}

.blog-card__read-more {
    /* Typography */
    font-family: var(--font-secondary);
    font-size: var(--text-default-size);
    font-weight: var(--font-weight-regular);

    /* Color */
    color: var(--card-blog-link-default); /* Blue #1d50de */

    /* Visual */
    text-decoration: none;

    /* Transitions */
    transition: color var(--transition-slow);
}

/* -------------------------------------------------
   HOVER STATE
   ------------------------------------------------- */

.blog-card:hover {
    background-color: var(--card-blog-bg-hover); /* Light gold #faf5e6 */
    box-shadow: var(--shadow-subtle); /* 4px 4px 12px 0px rgba(0, 0, 0, 0.1) */
}

.blog-card:hover .blog-card__title,
.blog-card:hover .blog-card__meta {
    color: var(--text-body); /* Gray #51585e */
}

.blog-card:hover .blog-card__read-more {
    color: var(--card-blog-link-hover); /* Teal #39cccc */
}

/* -------------------------------------------------
   ACTIVE STATE
   ------------------------------------------------- */

.blog-card:active {
    background-color: var(--card-blog-bg-default); /* White */
    box-shadow: var(--shadow-subtle);
    transform: scale(0.99);
}

.blog-card:active .blog-card__title,
.blog-card:active .blog-card__meta {
    color: var(--text-heading); /* Navy #1b1464 */
}

.blog-card:active .blog-card__read-more {
    color: var(--card-blog-link-active); /* Dark blue #06102b */
}

/* -------------------------------------------------
   RESPONSIVE BREAKPOINTS
   ------------------------------------------------- */

/* Mobile: 380-767px */
@media (max-width: 767px) {
    .blog-card__title {
        font-size: var(--text-h6-size); /* 16px */
        line-height: var(--text-h6-height); /* 24px */
    }
}

/* Tablet: 768-1149px */
@media (min-width: 768px) and (max-width: 1149px) {
    .blog-card__title {
        font-size: var(--text-h5-size); /* 18px */
        line-height: var(--text-h5-height); /* 27px */
    }
}

/* Desktop: 1150-1919px */
@media (min-width: 1150px) and (max-width: 1919px) {
    .blog-card__title {
        font-size: var(--text-h4-size); /* 21px */
        line-height: var(--text-h4-height); /* 31.5px */
    }
}

/* DesktopPlus: 1920px+ */
@media (min-width: 1920px) {
    .blog-card__title {
        font-size: var(--text-h4-size); /* 21px */
        line-height: var(--text-h4-height); /* 31.5px */
    }
}

/* =================================================
   END OF BLOG CARD COMPONENT
   ================================================= */
/* =================================================
   CARD FAQ COMPONENT - MOLECULE
   Component: card-faq.html
   Purpose: Accordion-style FAQ entries with expandable answers
   States: Default (closed), Hover (closed), Open (expanded)
   Responsive: Mobile (380-767px), Tablet (768-1149px), Desktop (1150-1919px), DesktopPlus (1920px+)
   Version: 1.0 - Fully Tokenized
   Date: 2025-10-29
   ================================================= */

/* -------------------------------------------------
   BASE FAQ CARD STYLES
   ------------------------------------------------- */

.card-faq {
    display: flex;
    flex-direction: column;
    padding: var(--space-4) var(--space-3);
    transition: all var(--transition-slow);
}

/* -------------------------------------------------
   QUESTION SECTION
   ------------------------------------------------- */

.card-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-medium);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-slow), box-shadow var(--transition-slow);
    user-select: none;
}

.card-faq__question-text {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    font-size: var(--text-h4-size);
    line-height: 30.5px;
    color: var(--color-neutral-700);
    flex: 1;
    padding-right: var(--space-3);
}

/* -------------------------------------------------
   ARROW ICON
   ------------------------------------------------- */

.card-faq__arrow {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    font-size: var(--text-h2-size);
    line-height: 45px;
    color: var(--color-neutral-700);
    width: 45px;
    text-align: center;
    transition: transform var(--transition-slow);
    transform-origin: center;
}

/* -------------------------------------------------
   ANSWER SECTION
   ------------------------------------------------- */

.card-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow), padding var(--transition-slow), opacity var(--transition-slow);
    opacity: 0;
}

.card-faq__answer-content {
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-8);
    font-family: var(--font-secondary);
    font-size: var(--text-default-size);
    line-height: 27px;
    color: var(--color-neutral-700);
}

/* -------------------------------------------------
   STATE: HOVER (CLOSED)
   ------------------------------------------------- */

.card-faq:not(.card-faq--open) .card-faq__question:hover {
    background-color: var(--color-accent-100);
    box-shadow: var(--shadow-standard);
}

/* -------------------------------------------------
   STATE: OPEN
   ------------------------------------------------- */

.card-faq--open .card-faq__arrow {
    transform: rotate(90deg);
}

.card-faq--open .card-faq__answer {
    max-height: 500px; /* Adjust based on content */
    opacity: 1;
}

.card-faq--open .card-faq__question {
    background-color: transparent;
    border: none;
    outline: none;
}

/* -------------------------------------------------
   FAQ GROUP CONTAINER
   ------------------------------------------------- */

.faq-group {
    max-width: 1120px;
    margin: 0 auto;
    background: var(--bg-primary);
    border-radius: var(--radius-large);
    padding: var(--space-5);
}

.faq-group .card-faq {
    border-bottom: 1px solid var(--color-neutral-200);
}

.faq-group .card-faq:last-child {
    border-bottom: none;
}

/* -------------------------------------------------
   ACCESSIBILITY
   ------------------------------------------------- */

.card-faq__question:focus {
    outline: none;
}

/* -------------------------------------------------
   PRINT STYLES
   ------------------------------------------------- */

@media print {
    .card-faq--open .card-faq__answer {
        max-height: none !important;
    }
}

/* -------------------------------------------------
   RESPONSIVE BREAKPOINTS
   ------------------------------------------------- */

/* Mobile: 380-767px */
@media (max-width: 767px) {
    .card-faq {
        padding: var(--space-2) var(--space-3);
    }
}

/* Tablet: 768-1149px */
@media (min-width: 768px) and (max-width: 1149px) {
    .card-faq {
        padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6);
    }
}

/* Desktop: 1150-1919px - Base styles work well */

/* DesktopPlus: 1920px+ - Base styles scale appropriately */

/* =================================================
   END OF CARD FAQ COMPONENT
   ================================================= */
/**
 * Card/ParagraphOptions Component Styles
 * Purposeful Media Promotions Design System
 *
 * Component: Molecule/Card/ParagraphOptions
 * Description: Options card with decorative icon, heading, body text, and CTA button
 * Variants: 12 total (4 breakpoints × 3 colors)
 * - Breakpoints: DesktopPlus, Desktop, Tablet, Mobile
 * - Colors: Default (white), Gray, Reverse (navy)
 * Features: Boolean icon toggle with data-show-icon attribute
 *
 * Tokenized: 2025-10-28
 * Version: 2.0
 * Variables: v4.0-20251027
 *
 * Changelog v2.0:
 * - Tokenized all hardcoded values to v4.0 design tokens
 * - Updated icon class names to decorative-icon-display standard
 * - Extracted all styles to external CSS
 */

/* ============================================
   BASE CARD STYLES
   ============================================ */

.card-paragraph-options {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    overflow: visible;
    padding: var(--space-10) var(--space-12) var(--space-16) var(--space-12);
    position: relative;
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-standard);
    width: 100%;
}

/* ============================================
   HEADER SECTION (Icon + Heading)
   ============================================ */

.card-paragraph-options__header {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    width: 100%;
    position: relative;
}

/* ============================================
   LAYOUT VARIANTS BY BREAKPOINT
   ============================================ */

/* Mobile: Vertical layout with centered content */
.card-paragraph-options[data-breakpoint="mobile"] {
    text-align: center;
}

.card-paragraph-options[data-breakpoint="mobile"] .card-paragraph-options__header {
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
}

/* ============================================
   COLOR VARIANTS
   ============================================ */

.card-paragraph-options[data-color="default"] {
    background-color: var(--color-white);
}

.card-paragraph-options[data-color="gray"] {
    background-color: var(--color-neutral-100);
}

.card-paragraph-options[data-color="reverse"] {
    background-color: var(--color-primary-700);
}

/* ============================================
   ICON DISPLAY CONTROL
   ============================================ */

/* Icon styles are handled by molecules-decorative-icon-display.css */
/* Icons use the large size (90px) with navy or white color variants */

/* Hide icon when data-show-icon="false" */
.card-paragraph-options[data-show-icon="false"] .decorative-icon-display {
    display: none;
}

/* Remove gap when icon is hidden */
.card-paragraph-options[data-show-icon="false"] .card-paragraph-options__header {
    gap: 0;
}

/* ============================================
   CONTENT SECTION (Body + Button)
   ============================================ */

.card-paragraph-options__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    width: 100%;
}

/* Mobile: center content */
.card-paragraph-options[data-breakpoint="mobile"] .card-paragraph-options__content {
    align-items: center;
}

/* ============================================
   HEADING STYLES
   ============================================ */

.card-paragraph-options__heading {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    font-style: normal;
    text-transform: uppercase;
    flex: 1;
}

.card-paragraph-options__heading p {
    margin: 0;
}

/* Heading Size Variants by Breakpoint */
.card-paragraph-options[data-breakpoint="desktopplus"] .card-paragraph-options__heading,
.card-paragraph-options[data-breakpoint="desktop"] .card-paragraph-options__heading,
.card-paragraph-options[data-breakpoint="tablet"] .card-paragraph-options__heading {
    font-size: var(--text-h3-size);
}

.card-paragraph-options[data-breakpoint="desktopplus"] .card-paragraph-options__heading p,
.card-paragraph-options[data-breakpoint="desktop"] .card-paragraph-options__heading p,
.card-paragraph-options[data-breakpoint="tablet"] .card-paragraph-options__heading p {
    line-height: 45px;
}

.card-paragraph-options[data-breakpoint="mobile"] .card-paragraph-options__heading {
    font-size: var(--text-h5-size);
}

.card-paragraph-options[data-breakpoint="mobile"] .card-paragraph-options__heading p {
    line-height: 30.5px; /* 1.45 ratio for mobile heading */
}

/* Heading Color Variants */
.card-paragraph-options[data-color="default"] .card-paragraph-options__heading,
.card-paragraph-options[data-color="gray"] .card-paragraph-options__heading {
    color: var(--color-primary-700);
}

.card-paragraph-options[data-color="reverse"] .card-paragraph-options__heading {
    color: var(--color-white);
}

/* ============================================
   BODY TEXT STYLES
   ============================================ */

.card-paragraph-options__body {
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--text-default-size);
    width: 100%;
}

.card-paragraph-options__body p {
    margin: 0;
    line-height: var(--text-default-height);
}

/* Body Color Variants */
.card-paragraph-options[data-color="default"] .card-paragraph-options__body,
.card-paragraph-options[data-color="gray"] .card-paragraph-options__body {
    color: var(--color-neutral-600);
}

.card-paragraph-options[data-color="reverse"] .card-paragraph-options__body {
    color: var(--color-neutral-200);
}

/* ============================================
   BUTTON CONTAINER
   ============================================ */

.card-paragraph-options__button-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.card-paragraph-options[data-breakpoint="mobile"] .card-paragraph-options__button-container {
    justify-content: center;
    width: 100%;
}

/* ============================================
   BUTTON STYLES
   ============================================ */

.card-paragraph-options__button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: var(--radius-small);
    flex-shrink: 0;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

/* Button Size Variants by Breakpoint */
.card-paragraph-options[data-breakpoint="desktopplus"] .card-paragraph-options__button,
.card-paragraph-options[data-breakpoint="desktop"] .card-paragraph-options__button,
.card-paragraph-options[data-breakpoint="tablet"] .card-paragraph-options__button {
    padding: var(--space-4) var(--space-20);
}

.card-paragraph-options[data-breakpoint="mobile"] .card-paragraph-options__button {
    padding: var(--space-2) var(--space-16);
}

/* Button Color Variants */
.card-paragraph-options[data-color="default"] .card-paragraph-options__button,
.card-paragraph-options[data-color="gray"] .card-paragraph-options__button {
    background-color: var(--color-primary-700);
}

.card-paragraph-options[data-color="reverse"] .card-paragraph-options__button {
    background-color: var(--color-accent-500);
}

/* ============================================
   BUTTON TEXT STYLES
   ============================================ */

.card-paragraph-options__button-text {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    line-height: 0;
    font-style: normal;
    position: relative;
    flex-shrink: 0;
    font-size: var(--text-default-size);
    text-align: center;
    white-space: nowrap;
    text-transform: uppercase;
}

.card-paragraph-options__button-text p {
    margin: 0;
    line-height: var(--text-default-size);
    white-space: pre;
}

/* Button Text Color Variants */
.card-paragraph-options[data-color="default"] .card-paragraph-options__button-text,
.card-paragraph-options[data-color="gray"] .card-paragraph-options__button-text {
    color: var(--color-white);
}

.card-paragraph-options[data-color="reverse"] .card-paragraph-options__button-text {
    color: var(--color-primary-700);
}

/* ============================================
   BUTTON HOVER STATES
   ============================================ */

.card-paragraph-options[data-color="default"] .card-paragraph-options__button:hover,
.card-paragraph-options[data-color="gray"] .card-paragraph-options__button:hover {
    background-color: var(--color-primary-600);
}

.card-paragraph-options[data-color="reverse"] .card-paragraph-options__button:hover {
    background-color: var(--color-accent-400);
}

/* ============================================
   BUTTON ACTIVE STATES
   ============================================ */

.card-paragraph-options[data-color="default"] .card-paragraph-options__button:active,
.card-paragraph-options[data-color="gray"] .card-paragraph-options__button:active {
    background-color: var(--color-primary-800);
}

.card-paragraph-options[data-color="reverse"] .card-paragraph-options__button:active {
    background-color: var(--color-accent-600);
}

/* ============================================
   BREAKPOINT-BASED CONTAINER CONSTRAINTS
   ============================================ */

.card-paragraph-options[data-breakpoint="desktopplus"] {
    max-width: 600px; /* Large */
}

.card-paragraph-options[data-breakpoint="desktop"] {
    max-width: 500px; /* Medium */
}

.card-paragraph-options[data-breakpoint="tablet"] {
    max-width: 400px; /* Small */
}

.card-paragraph-options[data-breakpoint="mobile"] {
    max-width: 320px; /* Mobile */
    padding: var(--space-10) var(--space-6) var(--space-16) var(--space-6);
}

/* ============================================
   RESPONSIVE BREAKPOINTS (Media Queries)
   ============================================ */

/* Mobile: 380-767px */
@media (min-width: 380px) and (max-width: 767px) {
    .card-paragraph-options {
        max-width: 320px;
        padding: var(--space-10) var(--space-6) var(--space-16) var(--space-6);
        text-align: center;
    }

    .card-paragraph-options__header {
        flex-direction: column;
        align-items: center;
        gap: var(--space-5);
    }

    .card-paragraph-options__content {
        align-items: center;
    }

    .card-paragraph-options__button-container {
        justify-content: center;
        width: 100%;
    }

    .card-paragraph-options__heading {
        font-size: var(--text-h5-size);
    }

    .card-paragraph-options__button {
        padding: var(--space-2) var(--space-16);
    }
}

/* Tablet: 768-1149px */
@media (min-width: 768px) and (max-width: 1149px) {
    .card-paragraph-options {
        max-width: 400px;
    }

    .card-paragraph-options__heading {
        font-size: var(--text-h3-size);
    }
}

/* Desktop: 1150-1919px */
@media (min-width: 1150px) and (max-width: 1919px) {
    .card-paragraph-options {
        max-width: 500px;
    }

    .card-paragraph-options__heading {
        font-size: var(--text-h3-size);
    }
}

/* DesktopPlus: 1920px+ */
@media (min-width: 1920px) {
    .card-paragraph-options {
        max-width: 600px;
    }

    .card-paragraph-options__heading {
        font-size: var(--text-h3-size);
    }
}
/* =================================================
   CARD RESOURCES COMPONENT - MOLECULE
   Component: card-resources.html
   Purpose: Resource promotion card with thumbnail background, decorative icon, headline, CTA text, and button
   Variants: Single fixed size (350x453px portrait)
   States: Default, Hover, Active, Disabled, Focus
   Responsive: Fixed size, no breakpoint variants
   Version: 1.1 - Fully Tokenized
   Date: 2025-10-29

   Changelog v1.1:
   - Replaced custom icon sprite system with icon-display molecule
   - Simplified icon implementation using data-attributes
   - Removed background-position icon classes
   - Fully tokenized with v4.0 design tokens
   ================================================= */

/* -------------------------------------------------
   BASE CARD CONTAINER
   ------------------------------------------------- */

.card-resources {
    box-sizing: border-box;
    position: relative;
    width: 350px;
    height: 453px;
    border-radius: var(--radius-large);
    border: 4px solid var(--color-accent-500);
    overflow: hidden;
    background-color: var(--color-neutral-100);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* -------------------------------------------------
   THUMBNAIL BACKGROUND
   ------------------------------------------------- */

.card-resources__thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* -------------------------------------------------
   SEMI-TRANSPARENT OVERLAY
   ------------------------------------------------- */

.card-resources__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(27, 20, 100, 0.25); /* Primary-700 at 25% opacity */
    z-index: 2;
}

/* -------------------------------------------------
   CONTENT CONTAINER
   ------------------------------------------------- */

.card-resources__content {
    box-sizing: border-box;
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-3) var(--space-12) var(--space-3);
    width: 100%;
    height: 100%;
}

/* -------------------------------------------------
   HEADER SECTION (ICON + HEADLINE)
   ------------------------------------------------- */

.card-resources__header {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    justify-content: flex-start;
    width: 286px;
    height: 90px;
    flex-shrink: 0;
}

/* Decorative Icon Container - Uses icon-display molecule
   Icon styles are handled by molecules-decorative-icon-display.css
   Icon size: large (90px) with white color for overlay visibility */

/* -------------------------------------------------
   HEADLINE STYLES
   ------------------------------------------------- */

.card-resources__heading {
    flex: 1 1 0;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    font-size: var(--text-h4-size);
    line-height: 30.5px;
    font-style: normal;
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0;
}

/* -------------------------------------------------
   CTA PARAGRAPH SECTION
   ------------------------------------------------- */

.card-resources__cta {
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-regular);
    font-size: var(--text-default-size);
    line-height: var(--text-default-height);
    font-style: normal;
    text-align: center;
    color: var(--color-white);
    width: 286px;
    margin: 0;
}

/* -------------------------------------------------
   BUTTON SECTION
   ------------------------------------------------- */

.card-resources__button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-16);
    background-color: var(--color-accent-500);
    border-radius: var(--radius-small);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-base);
    flex-shrink: 0;
}

/* -------------------------------------------------
   BUTTON TEXT
   ------------------------------------------------- */

.card-resources__button-text {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-default-size);
    line-height: var(--text-form-height);
    font-style: normal;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    color: var(--color-primary-700);
    margin: 0;
}

/* -------------------------------------------------
   BUTTON STATES
   ------------------------------------------------- */

.card-resources__button:hover {
    background-color: var(--color-accent-400);
}

.card-resources__button:active {
    background-color: var(--color-accent-600);
}

.card-resources__button:disabled,
.card-resources__button[aria-disabled="true"] {
    background-color: var(--color-accent-400);
    opacity: 0.5;
    cursor: not-allowed;
}

/* -------------------------------------------------
   FOCUS STATE FOR ACCESSIBILITY
   ------------------------------------------------- */

.card-resources__button:focus {
    outline: 2px solid var(--color-accent-500);
    outline-offset: 2px;
}

/* =================================================
   END OF CARD RESOURCES COMPONENT
   ================================================= */
/* =================================================
   CARD TEASER COMPONENT - MOLECULE
   Component: card-teaser.html
   Purpose: Teaser card with heading, body text, and CTA button
   Variants: 12 total (4 sizes × 3 colors)
   - Sizes: Large (600px), Medium (500px), Small (400px), Mobile (380px)
   - Colors: Default (white), Gray, Reverse (navy)
   States: Default, Hover, Active
   Responsive: Mobile (380-767px), Tablet (768-1149px), Desktop (1150-1919px), DesktopPlus (1920px+)
   Version: 1.0 - Fully Tokenized
   Date: 2025-10-29
   ================================================= */

/* -------------------------------------------------
   BASE CARD STYLES
   ------------------------------------------------- */

.card-teaser {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    align-items: center;
    justify-content: flex-start;
    overflow: clip;
    padding: var(--space-10) var(--space-12) var(--space-16) var(--space-12);
    position: relative;
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-standard);
    width: 100%;
}

/* -------------------------------------------------
   COLOR VARIANTS
   ------------------------------------------------- */

.card-teaser[data-color="default"] {
    background-color: var(--color-white);
}

.card-teaser[data-color="gray"] {
    background-color: var(--color-neutral-200);
}

.card-teaser[data-color="reverse"] {
    background-color: var(--color-primary-700);
}

/* -------------------------------------------------
   HEADING STYLES
   ------------------------------------------------- */

.card-teaser__heading {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    line-height: 0;
    min-width: 100%;
    font-style: normal;
    position: relative;
    flex-shrink: 0;
    text-transform: uppercase;
    width: min-content;
}

.card-teaser__heading p {
    margin: 0;
}

/* Heading Size Variants */
.card-teaser[data-size="large"] .card-teaser__heading,
.card-teaser[data-size="medium"] .card-teaser__heading,
.card-teaser[data-size="small"] .card-teaser__heading {
    font-size: var(--text-h2-size);
}

.card-teaser[data-size="large"] .card-teaser__heading p,
.card-teaser[data-size="medium"] .card-teaser__heading p,
.card-teaser[data-size="small"] .card-teaser__heading p {
    line-height: 45px;
}

.card-teaser[data-size="mobile"] .card-teaser__heading {
    font-size: var(--text-h4-size);
}

.card-teaser[data-size="mobile"] .card-teaser__heading p {
    line-height: 30.5px;
}

/* Heading Color Variants */
.card-teaser[data-color="default"] .card-teaser__heading,
.card-teaser[data-color="gray"] .card-teaser__heading {
    color: var(--color-primary-700);
}

.card-teaser[data-color="reverse"] .card-teaser__heading {
    color: var(--color-white);
}

/* -------------------------------------------------
   BODY TEXT STYLES
   ------------------------------------------------- */

.card-teaser__body {
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-regular);
    line-height: 0;
    min-width: 100%;
    font-style: normal;
    position: relative;
    flex-shrink: 0;
    font-size: var(--text-default-size);
    width: min-content;
}

.card-teaser__body p {
    margin: 0;
    line-height: 27px;
}

/* Body Color Variants */
.card-teaser[data-color="default"] .card-teaser__body,
.card-teaser[data-color="gray"] .card-teaser__body {
    color: var(--color-neutral-700);
}

.card-teaser[data-color="reverse"] .card-teaser__body {
    color: var(--color-neutral-400);
}

/* -------------------------------------------------
   BUTTON STYLES
   ------------------------------------------------- */

.card-teaser__button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: var(--radius-small);
    flex-shrink: 0;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
}

/* Button Size Variants */
.card-teaser[data-size="large"] .card-teaser__button,
.card-teaser[data-size="medium"] .card-teaser__button,
.card-teaser[data-size="small"] .card-teaser__button {
    padding: var(--space-4) var(--space-20);
}

.card-teaser[data-size="mobile"] .card-teaser__button {
    padding: var(--space-2) var(--space-16);
}

/* Button Color Variants */
.card-teaser[data-color="default"] .card-teaser__button,
.card-teaser[data-color="gray"] .card-teaser__button {
    background-color: var(--color-primary-700);
}

.card-teaser[data-color="reverse"] .card-teaser__button {
    background-color: var(--color-accent-500);
}

/* -------------------------------------------------
   BUTTON TEXT STYLES
   ------------------------------------------------- */

.card-teaser__button-text {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    line-height: 0;
    font-style: normal;
    position: relative;
    flex-shrink: 0;
    font-size: var(--text-default-size);
    text-align: center;
    white-space: nowrap;
    text-transform: uppercase;
}

.card-teaser__button-text p {
    margin: 0;
    line-height: 18px;
    white-space: pre;
}

/* Button Text Color Variants */
.card-teaser[data-color="default"] .card-teaser__button-text,
.card-teaser[data-color="gray"] .card-teaser__button-text {
    color: var(--color-white);
}

.card-teaser[data-color="reverse"] .card-teaser__button-text {
    color: var(--color-primary-700);
}

/* -------------------------------------------------
   BUTTON HOVER STATES
   ------------------------------------------------- */

.card-teaser[data-color="default"] .card-teaser__button:hover,
.card-teaser[data-color="gray"] .card-teaser__button:hover {
    background-color: var(--color-primary-600);
}

.card-teaser[data-color="reverse"] .card-teaser__button:hover {
    background-color: var(--color-accent-400);
}

/* -------------------------------------------------
   BUTTON ACTIVE STATES
   ------------------------------------------------- */

.card-teaser[data-color="default"] .card-teaser__button:active,
.card-teaser[data-color="gray"] .card-teaser__button:active {
    background-color: var(--color-primary-800);
}

.card-teaser[data-color="reverse"] .card-teaser__button:active {
    background-color: var(--color-accent-600);
}

/* -------------------------------------------------
   SIZE-BASED CONTAINER CONSTRAINTS
   ------------------------------------------------- */

.card-teaser[data-size="large"] {
    max-width: 600px;
}

.card-teaser[data-size="medium"] {
    max-width: 500px;
}

.card-teaser[data-size="small"] {
    max-width: 400px;
}

.card-teaser[data-size="mobile"] {
    max-width: 380px;
}

/* -------------------------------------------------
   RESPONSIVE BREAKPOINTS
   ------------------------------------------------- */

/* Mobile: 380-767px */
@media (max-width: 767px) {
    .card-teaser {
        padding: var(--space-10) var(--space-6) var(--space-16) var(--space-6);
    }

    .card-teaser__heading {
        font-size: var(--text-h4-size);
    }

    .card-teaser__heading p {
        line-height: 30.5px;
    }

    .card-teaser__button {
        padding: var(--space-2) var(--space-16);
    }
}

/* Tablet: 768-1149px - Base styles work well */

/* Desktop: 1150-1919px - Base styles work well */

/* DesktopPlus: 1920px+ - Base styles scale appropriately */

/* =================================================
   END OF CARD TEASER COMPONENT
   ================================================= */
/* ====================================
   CARD/RESOURCES COMPONENT STYLES EXTRACT
   Component: Molecule/Card/Resources
   Version: 1.5
   Last Updated: 2025-10-04
   
   Description: Resource promotion card with thumbnail background,
                decorative icon, headline, CTA text, and button
   Variants: Single fixed size (350x453px portrait)
   States: Default, Hover, Active (through button component)
   
   FIXES APPLIED:
   - Added import for variables file
   - Fixed decorative icon sprite with specific card context selector
   ==================================== */

/* Import design tokens */

/* Base Card Container */
.card-resources {
    box-sizing: border-box;
    position: relative;
    width: 350px;
    height: 453px;
    border-radius: 16px;
    border: 4px solid var(--color-accent-500, #D4AF37);
    overflow: hidden;
    background-color: var(--color-neutral-100, #ECEEEF); /* Fallback */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Thumbnail Background */
.card-resources__thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Semi-transparent Overlay for Readability */
.card-resources__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(27, 20, 100, 0.25); /* #1B1464 at 25% opacity */
    z-index: 2;
}

/* Content Container */
.card-resources__content {
    box-sizing: border-box;
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    justify-content: center;
    padding: 12px 12px 48px 12px;
    width: 100%;
    height: 100%;
}

/* Header Section (Icon + Headline) */
.card-resources__header {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
    width: 286px;
    height: 90px;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

/* Decorative Icon Container - Base styles */
.card-resources__icon {
    position: relative;
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    z-index: 10;
    display: block;
}

/* SPECIFIC SELECTOR for icons inside cards - forces background to show */
.card-resources .card-resources__icon {
    background-image: url('../assets/svg/decorative-icons/purposeful-sprite-symbolic.svg') !important;
    background-repeat: no-repeat !important;
    background-size: 540px 1440px !important;
    background-position: 0px -1080px !important; /* Default position */
}

/* Icon Variants Using Background Position - WHITE versions for cards */
/* Row 13, Column 1-6 */
.card-resources .card-resources__icon--accelerate-white {
    background-position: 0px -1080px !important;
}

.card-resources .card-resources__icon--attract-white {
    background-position: -90px -1080px !important;
}

.card-resources .card-resources__icon--contact-white {
    background-position: -180px -1080px !important;
}

.card-resources .card-resources__icon--delight-white {
    background-position: -270px -1080px !important;
}

.card-resources .card-resources__icon--download-white {
    background-position: -360px -1080px !important;
}

.card-resources .card-resources__icon--efficiency-white {
    background-position: -450px -1080px !important;
}

/* Row 14, Column 1-6 */
.card-resources .card-resources__icon--email-white {
    background-position: 0px -1170px !important;
}

.card-resources .card-resources__icon--engage-white {
    background-position: -90px -1170px !important;
}

.card-resources .card-resources__icon--exit-white {
    background-position: -180px -1170px !important;
}

.card-resources .card-resources__icon--expertise-white {
    background-position: -270px -1170px !important;
}

.card-resources .card-resources__icon--inbound-white {
    background-position: -360px -1170px !important;
}

.card-resources .card-resources__icon--momentum-white {
    background-position: -450px -1170px !important;
}

/* Row 15, Column 1-6 */
.card-resources .card-resources__icon--news-white {
    background-position: 0px -1260px !important;
}

.card-resources .card-resources__icon--persona-white {
    background-position: -90px -1260px !important;
}

.card-resources .card-resources__icon--professional-white {
    background-position: -180px -1260px !important;
}

.card-resources .card-resources__icon--roi-white {
    background-position: -270px -1260px !important;
}

.card-resources .card-resources__icon--schedule-white {
    background-position: -360px -1260px !important;
}

.card-resources .card-resources__icon--strategy-white {
    background-position: -450px -1260px !important;
}

/* Row 16, Column 1-3 */
.card-resources .card-resources__icon--unit-white {
    background-position: 0px -1350px !important;
}

.card-resources .card-resources__icon--value-white {
    background-position: -90px -1350px !important;
}

.card-resources .card-resources__icon--webinar-white {
    background-position: -180px -1350px !important;
}

/* Headline Styles */
.card-resources__heading {
    flex: 1 1 0;
    font-family: var(--font-primary), 'Lato', sans-serif;
    font-weight: 900; /* Heavy */
    font-size: 21px;
    line-height: 30.5px;
    font-style: normal;
    text-transform: uppercase;
    color: var(--color-white, #FFFFFF);
    margin: 0;
    position: relative;
    z-index: 10;
}

/* CTA Paragraph Section */
.card-resources__cta {
    font-family: var(--font-secondary), 'Open Sans', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 18px;
    line-height: 27px;
    font-style: normal;
    text-align: center;
    color: var(--color-white, #FFFFFF);
    width: 286px;
    margin: 0;
    position: relative;
    z-index: 10;
}

/* Button Section */
.card-resources__button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 64px;
    background-color: var(--color-accent-500, #D4AF37);
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

/* Button Text */
.card-resources__button-text {
    font-family: var(--font-primary), 'Lato', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 18px;
    line-height: 18px;
    font-style: normal;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    color: var(--color-primary-700, #1B1464);
    margin: 0;
}

/* Button States */
.card-resources__button:hover {
    background-color: var(--color-accent-400, #DCBE5D);
}

.card-resources__button:active {
    background-color: var(--color-accent-600, #B39226);
}

.card-resources__button:disabled,
.card-resources__button[aria-disabled="true"] {
    background-color: var(--color-accent-400, #DCBE5D);
    opacity: 0.5;
    cursor: not-allowed;
}

/* Focus state for accessibility */
.card-resources__button:focus {
    outline: 2px solid var(--color-accent-500, #D4AF37);
    outline-offset: 2px;
}/* ====================================
   PILLAR CARD MOLECULE - VERSION 4.0
   ==================================== */
/* Component: Molecule/Card/Pillar-Card */
/* Last Updated: 2025-11-03 */
/* Dependencies: variables-v4.0-20251027.css, molecules-decorative-icon-display.css */

/* ====================================
   PILLAR CARD COMPONENT TOKENS
   ==================================== */
:root {
    /* Spacing Variables (from Figma) */
    --pillar-space-4: 16px;
    --pillar-space-8: 32px;
    --pillar-space-10: 40px;
    --pillar-space-12: 48px;
    --pillar-space-20: 80px;

    /* Color Variables */
    --pillar-heading-color: var(--heading, #1b1464);
    --pillar-text-color: var(--color-text-primary, #000000);
    --pillar-bg-color: var(--color-bg-white, #ffffff);

    /* Typography Tokens */
    --pillar-h2-font-family: 'Lato', sans-serif;
    --pillar-h2-font-weight: 800;
    --pillar-h2-font-size: 30px;
    --pillar-h2-line-height: 45px;
    --pillar-h2-text-transform: uppercase;

    --pillar-p-font-family: 'Open Sans', sans-serif;
    --pillar-p-font-weight: 400;
    --pillar-p-font-size: 18px;
    --pillar-p-line-height: 27px;

    /* Component Structure Tokens */
    --pillar-icon-size-desktop: 256px;
    --pillar-icon-size-mobile: 120px;
    --pillar-content-gap: 29px;
    --pillar-layout-gap-desktop: var(--pillar-space-8);
    --pillar-layout-gap-mobile: var(--pillar-space-4);

    /* Max Width Constraints */
    --pillar-content-max-width-desktopplus: 1262px;
    --pillar-content-max-width-desktop: 1264px;
}

/* ====================================
   BASE PILLAR CARD STYLES
   ==================================== */
.pillar-card {
    background-color: var(--pillar-bg-color);
    box-sizing: border-box;
    width: 100%;
    position: relative;
}

/* Icon Container */
.pillar-card__icon {
    flex-shrink: 0;
    position: relative;
}

/* Content Container */
.pillar-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--pillar-content-gap);
    align-items: flex-start;
    position: relative;
    flex-shrink: 0;
}

/* Headline */
.pillar-card__headline {
    display: flex;
    gap: 10px;
    align-items: center;
    position: relative;
    width: 100%;
    flex-shrink: 0;
}

.pillar-card__heading {
    font-family: var(--pillar-h2-font-family);
    font-weight: var(--pillar-h2-font-weight);
    font-size: var(--pillar-h2-font-size);
    line-height: var(--pillar-h2-line-height);
    text-transform: var(--pillar-h2-text-transform);
    color: var(--pillar-heading-color);
    font-style: normal;
    position: relative;
    flex-shrink: 0;
    width: 305px;
    margin: 0;
}

/* Paragraph Container */
.pillar-card__paragraph {
    display: flex;
    gap: 10px;
    align-items: center;
    position: relative;
    width: 100%;
    flex-shrink: 0;
}

.pillar-card__text {
    font-family: var(--pillar-p-font-family);
    font-weight: var(--pillar-p-font-weight);
    font-size: var(--pillar-p-font-size);
    line-height: var(--pillar-p-line-height);
    color: var(--pillar-text-color);
    font-style: normal;
    position: relative;
    flex: 1 0 0;
    min-width: 1px;
    min-height: 1px;
}

.pillar-card__text p {
    margin: 0 0 1em 0;
}

.pillar-card__text p:last-child {
    margin-bottom: 0;
}

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

/* Mobile: 380-767px */
@media (max-width: 767px) {
    .pillar-card {
        display: flex;
        flex-direction: column;
        gap: var(--pillar-layout-gap-mobile);
        align-items: flex-start;
        padding: var(--pillar-space-4) var(--pillar-space-20) var(--pillar-space-8);
    }

    .pillar-card__content {
        width: 100%;
    }

    .pillar-card__heading {
        width: 100%;
    }
}

/* Tablet: 768-1149px */
@media (min-width: 768px) and (max-width: 1149px) {
    .pillar-card {
        display: flex;
        flex-direction: row;
        gap: var(--pillar-layout-gap-desktop);
        align-items: flex-start;
        padding: var(--pillar-space-4) var(--pillar-space-20) var(--pillar-space-10);
    }

    .pillar-card__content {
        flex: 1 0 0;
        min-width: 1px;
        min-height: 1px;
    }
}

/* Desktop: 1150-1919px */
@media (min-width: 1150px) and (max-width: 1919px) {
    .pillar-card {
        display: flex;
        flex-direction: row;
        gap: var(--pillar-layout-gap-desktop);
        align-items: flex-start;
        padding: var(--pillar-space-4) var(--pillar-space-20) var(--pillar-space-12);
    }

    .pillar-card__content {
        flex: 1 0 0;
        max-width: var(--pillar-content-max-width-desktop);
        min-width: 1px;
        min-height: 1px;
    }
}

/* DesktopPlus: 1920px+ */
@media (min-width: 1920px) {
    .pillar-card {
        display: flex;
        flex-direction: row;
        gap: var(--pillar-layout-gap-desktop);
        align-items: flex-start;
        padding: var(--pillar-space-4) var(--pillar-space-20) var(--pillar-space-12);
    }

    .pillar-card__content {
        flex: 1 0 0;
        max-width: var(--pillar-content-max-width-desktopplus);
        min-width: 1px;
        min-height: 1px;
    }
}
/* ====================================
   DECORATIVE ICON DISPLAY MOLECULE STYLES
   Component: Molecule/Icon/Decorative-Display
   Version: 1.3 (Renamed from icon-display)
   Last Updated: 2025-10-28

   Description: Flexible decorative icon display component with size and color variants
   Sizes: Small (30px), Medium (60px), Large (90px), X-Large (120px)
   Colors: Navy (#1B1464), Gray (#6C757D), Dark (#54595F), White (#FFFFFF)
   Dependencies: variables-v2.0-20250915.css, purposeful-sprite-symbolic.svg

   NOTE: All background positions scale proportionally with icon size
   Scale factor = (icon_size / 90px)

   Sprite Sheet Layout (16 rows × 6 columns):
   - Rows 1-4:   Navy (#1B1464)
   - Rows 5-8:   Dark (#54595F)
   - Rows 9-12:  Gray (#6C757D)
   - Rows 13-16: White (#FFFFFF)

   Usage:
   <div class="decorative-icon-display decorative-icon-display--medium" data-icon="email" data-color="navy"></div>
   ==================================== */

/* Import dependencies */

/* ====================================
   BASE DECORATIVE ICON DISPLAY STYLES
   ==================================== */
.decorative-icon-display {
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url('../assets/svg/decorative-icons/purposeful-sprite-symbolic.svg');
    position: relative;
}

/* ====================================
   SIZE VARIANTS - SMALL (30px)
   Scale factor: 30/90 = 0.333...
   Sprite: 180px × 480px
   Positions: original * 0.333
   ==================================== */
.decorative-icon-display--small {
    width: 30px;
    height: 30px;
    background-size: 180px 480px;
}

/* Navy icons - Small */
.decorative-icon-display--small[data-icon="accelerate"][data-color="navy"] { background-position: 0px 0px; }
.decorative-icon-display--small[data-icon="attract"][data-color="navy"] { background-position: -30px 0px; }
.decorative-icon-display--small[data-icon="contact"][data-color="navy"] { background-position: -60px 0px; }
.decorative-icon-display--small[data-icon="delight"][data-color="navy"] { background-position: -90px 0px; }
.decorative-icon-display--small[data-icon="download"][data-color="navy"] { background-position: -120px 0px; }
.decorative-icon-display--small[data-icon="efficiency"][data-color="navy"] { background-position: -150px 0px; }

.decorative-icon-display--small[data-icon="email"][data-color="navy"] { background-position: 0px -30px; }
.decorative-icon-display--small[data-icon="engage"][data-color="navy"] { background-position: -30px -30px; }
.decorative-icon-display--small[data-icon="exit"][data-color="navy"] { background-position: -60px -30px; }
.decorative-icon-display--small[data-icon="expertise"][data-color="navy"] { background-position: -90px -30px; }
.decorative-icon-display--small[data-icon="inbound"][data-color="navy"] { background-position: -120px -30px; }
.decorative-icon-display--small[data-icon="momentum"][data-color="navy"] { background-position: -150px -30px; }

.decorative-icon-display--small[data-icon="news"][data-color="navy"] { background-position: 0px -60px; }
.decorative-icon-display--small[data-icon="persona"][data-color="navy"] { background-position: -30px -60px; }
.decorative-icon-display--small[data-icon="professional"][data-color="navy"] { background-position: -60px -60px; }
.decorative-icon-display--small[data-icon="roi"][data-color="navy"] { background-position: -90px -60px; }
.decorative-icon-display--small[data-icon="schedule"][data-color="navy"] { background-position: -120px -60px; }
.decorative-icon-display--small[data-icon="strategy"][data-color="navy"] { background-position: -150px -60px; }

.decorative-icon-display--small[data-icon="unit"][data-color="navy"] { background-position: 0px -90px; }
.decorative-icon-display--small[data-icon="value"][data-color="navy"] { background-position: -30px -90px; }
.decorative-icon-display--small[data-icon="webinar"][data-color="navy"] { background-position: -60px -90px; }

/* Gray icons - Small (#6C757D) */
.decorative-icon-display--small[data-icon="accelerate"][data-color="gray"] { background-position: 0px -240px; }
.decorative-icon-display--small[data-icon="attract"][data-color="gray"] { background-position: -30px -240px; }
.decorative-icon-display--small[data-icon="contact"][data-color="gray"] { background-position: -60px -240px; }
.decorative-icon-display--small[data-icon="delight"][data-color="gray"] { background-position: -90px -240px; }
.decorative-icon-display--small[data-icon="download"][data-color="gray"] { background-position: -120px -240px; }
.decorative-icon-display--small[data-icon="efficiency"][data-color="gray"] { background-position: -150px -240px; }

.decorative-icon-display--small[data-icon="email"][data-color="gray"] { background-position: 0px -270px; }
.decorative-icon-display--small[data-icon="engage"][data-color="gray"] { background-position: -30px -270px; }
.decorative-icon-display--small[data-icon="exit"][data-color="gray"] { background-position: -60px -270px; }
.decorative-icon-display--small[data-icon="expertise"][data-color="gray"] { background-position: -90px -270px; }
.decorative-icon-display--small[data-icon="inbound"][data-color="gray"] { background-position: -120px -270px; }
.decorative-icon-display--small[data-icon="momentum"][data-color="gray"] { background-position: -150px -270px; }

.decorative-icon-display--small[data-icon="news"][data-color="gray"] { background-position: 0px -300px; }
.decorative-icon-display--small[data-icon="persona"][data-color="gray"] { background-position: -30px -300px; }
.decorative-icon-display--small[data-icon="professional"][data-color="gray"] { background-position: -60px -300px; }
.decorative-icon-display--small[data-icon="roi"][data-color="gray"] { background-position: -90px -300px; }
.decorative-icon-display--small[data-icon="schedule"][data-color="gray"] { background-position: -120px -300px; }
.decorative-icon-display--small[data-icon="strategy"][data-color="gray"] { background-position: -150px -300px; }

.decorative-icon-display--small[data-icon="unit"][data-color="gray"] { background-position: 0px -330px; }
.decorative-icon-display--small[data-icon="value"][data-color="gray"] { background-position: -30px -330px; }
.decorative-icon-display--small[data-icon="webinar"][data-color="gray"] { background-position: -60px -330px; }

/* Dark icons - Small (#54595F) */
.decorative-icon-display--small[data-icon="accelerate"][data-color="dark"] { background-position: 0px -120px; }
.decorative-icon-display--small[data-icon="attract"][data-color="dark"] { background-position: -30px -120px; }
.decorative-icon-display--small[data-icon="contact"][data-color="dark"] { background-position: -60px -120px; }
.decorative-icon-display--small[data-icon="delight"][data-color="dark"] { background-position: -90px -120px; }
.decorative-icon-display--small[data-icon="download"][data-color="dark"] { background-position: -120px -120px; }
.decorative-icon-display--small[data-icon="efficiency"][data-color="dark"] { background-position: -150px -120px; }

.decorative-icon-display--small[data-icon="email"][data-color="dark"] { background-position: 0px -150px; }
.decorative-icon-display--small[data-icon="engage"][data-color="dark"] { background-position: -30px -150px; }
.decorative-icon-display--small[data-icon="exit"][data-color="dark"] { background-position: -60px -150px; }
.decorative-icon-display--small[data-icon="expertise"][data-color="dark"] { background-position: -90px -150px; }
.decorative-icon-display--small[data-icon="inbound"][data-color="dark"] { background-position: -120px -150px; }
.decorative-icon-display--small[data-icon="momentum"][data-color="dark"] { background-position: -150px -150px; }

.decorative-icon-display--small[data-icon="news"][data-color="dark"] { background-position: 0px -180px; }
.decorative-icon-display--small[data-icon="persona"][data-color="dark"] { background-position: -30px -180px; }
.decorative-icon-display--small[data-icon="professional"][data-color="dark"] { background-position: -60px -180px; }
.decorative-icon-display--small[data-icon="roi"][data-color="dark"] { background-position: -90px -180px; }
.decorative-icon-display--small[data-icon="schedule"][data-color="dark"] { background-position: -120px -180px; }
.decorative-icon-display--small[data-icon="strategy"][data-color="dark"] { background-position: -150px -180px; }

.decorative-icon-display--small[data-icon="unit"][data-color="dark"] { background-position: 0px -210px; }
.decorative-icon-display--small[data-icon="value"][data-color="dark"] { background-position: -30px -210px; }
.decorative-icon-display--small[data-icon="webinar"][data-color="dark"] { background-position: -60px -210px; }

/* White icons - Small */
.decorative-icon-display--small[data-icon="accelerate"][data-color="white"] { background-position: 0px -360px; }
.decorative-icon-display--small[data-icon="attract"][data-color="white"] { background-position: -30px -360px; }
.decorative-icon-display--small[data-icon="contact"][data-color="white"] { background-position: -60px -360px; }
.decorative-icon-display--small[data-icon="delight"][data-color="white"] { background-position: -90px -360px; }
.decorative-icon-display--small[data-icon="download"][data-color="white"] { background-position: -120px -360px; }
.decorative-icon-display--small[data-icon="efficiency"][data-color="white"] { background-position: -150px -360px; }

.decorative-icon-display--small[data-icon="email"][data-color="white"] { background-position: 0px -390px; }
.decorative-icon-display--small[data-icon="engage"][data-color="white"] { background-position: -30px -390px; }
.decorative-icon-display--small[data-icon="exit"][data-color="white"] { background-position: -60px -390px; }
.decorative-icon-display--small[data-icon="expertise"][data-color="white"] { background-position: -90px -390px; }
.decorative-icon-display--small[data-icon="inbound"][data-color="white"] { background-position: -120px -390px; }
.decorative-icon-display--small[data-icon="momentum"][data-color="white"] { background-position: -150px -390px; }

.decorative-icon-display--small[data-icon="news"][data-color="white"] { background-position: 0px -420px; }
.decorative-icon-display--small[data-icon="persona"][data-color="white"] { background-position: -30px -420px; }
.decorative-icon-display--small[data-icon="professional"][data-color="white"] { background-position: -60px -420px; }
.decorative-icon-display--small[data-icon="roi"][data-color="white"] { background-position: -90px -420px; }
.decorative-icon-display--small[data-icon="schedule"][data-color="white"] { background-position: -120px -420px; }
.decorative-icon-display--small[data-icon="strategy"][data-color="white"] { background-position: -150px -420px; }

.decorative-icon-display--small[data-icon="unit"][data-color="white"] { background-position: 0px -450px; }
.decorative-icon-display--small[data-icon="value"][data-color="white"] { background-position: -30px -450px; }
.decorative-icon-display--small[data-icon="webinar"][data-color="white"] { background-position: -60px -450px; }

/* ====================================
   SIZE VARIANTS - MEDIUM (60px)
   Scale factor: 60/90 = 0.666...
   Sprite: 360px × 960px
   Positions: original * 0.666
   ==================================== */
.decorative-icon-display--medium {
    width: 60px;
    height: 60px;
    background-size: 360px 960px;
}

/* Navy icons - Medium */
.decorative-icon-display--medium[data-icon="accelerate"][data-color="navy"] { background-position: 0px 0px; }
.decorative-icon-display--medium[data-icon="attract"][data-color="navy"] { background-position: -60px 0px; }
.decorative-icon-display--medium[data-icon="contact"][data-color="navy"] { background-position: -120px 0px; }
.decorative-icon-display--medium[data-icon="delight"][data-color="navy"] { background-position: -180px 0px; }
.decorative-icon-display--medium[data-icon="download"][data-color="navy"] { background-position: -240px 0px; }
.decorative-icon-display--medium[data-icon="efficiency"][data-color="navy"] { background-position: -300px 0px; }

.decorative-icon-display--medium[data-icon="email"][data-color="navy"] { background-position: 0px -60px; }
.decorative-icon-display--medium[data-icon="engage"][data-color="navy"] { background-position: -60px -60px; }
.decorative-icon-display--medium[data-icon="exit"][data-color="navy"] { background-position: -120px -60px; }
.decorative-icon-display--medium[data-icon="expertise"][data-color="navy"] { background-position: -180px -60px; }
.decorative-icon-display--medium[data-icon="inbound"][data-color="navy"] { background-position: -240px -60px; }
.decorative-icon-display--medium[data-icon="momentum"][data-color="navy"] { background-position: -300px -60px; }

.decorative-icon-display--medium[data-icon="news"][data-color="navy"] { background-position: 0px -120px; }
.decorative-icon-display--medium[data-icon="persona"][data-color="navy"] { background-position: -60px -120px; }
.decorative-icon-display--medium[data-icon="professional"][data-color="navy"] { background-position: -120px -120px; }
.decorative-icon-display--medium[data-icon="roi"][data-color="navy"] { background-position: -180px -120px; }
.decorative-icon-display--medium[data-icon="schedule"][data-color="navy"] { background-position: -240px -120px; }
.decorative-icon-display--medium[data-icon="strategy"][data-color="navy"] { background-position: -300px -120px; }

.decorative-icon-display--medium[data-icon="unit"][data-color="navy"] { background-position: 0px -180px; }
.decorative-icon-display--medium[data-icon="value"][data-color="navy"] { background-position: -60px -180px; }
.decorative-icon-display--medium[data-icon="webinar"][data-color="navy"] { background-position: -120px -180px; }

/* Gray icons - Medium (#6C757D) */
.decorative-icon-display--medium[data-icon="accelerate"][data-color="gray"] { background-position: 0px -480px; }
.decorative-icon-display--medium[data-icon="attract"][data-color="gray"] { background-position: -60px -480px; }
.decorative-icon-display--medium[data-icon="contact"][data-color="gray"] { background-position: -120px -480px; }
.decorative-icon-display--medium[data-icon="delight"][data-color="gray"] { background-position: -180px -480px; }
.decorative-icon-display--medium[data-icon="download"][data-color="gray"] { background-position: -240px -480px; }
.decorative-icon-display--medium[data-icon="efficiency"][data-color="gray"] { background-position: -300px -480px; }

.decorative-icon-display--medium[data-icon="email"][data-color="gray"] { background-position: 0px -540px; }
.decorative-icon-display--medium[data-icon="engage"][data-color="gray"] { background-position: -60px -540px; }
.decorative-icon-display--medium[data-icon="exit"][data-color="gray"] { background-position: -120px -540px; }
.decorative-icon-display--medium[data-icon="expertise"][data-color="gray"] { background-position: -180px -540px; }
.decorative-icon-display--medium[data-icon="inbound"][data-color="gray"] { background-position: -240px -540px; }
.decorative-icon-display--medium[data-icon="momentum"][data-color="gray"] { background-position: -300px -540px; }

.decorative-icon-display--medium[data-icon="news"][data-color="gray"] { background-position: 0px -600px; }
.decorative-icon-display--medium[data-icon="persona"][data-color="gray"] { background-position: -60px -600px; }
.decorative-icon-display--medium[data-icon="professional"][data-color="gray"] { background-position: -120px -600px; }
.decorative-icon-display--medium[data-icon="roi"][data-color="gray"] { background-position: -180px -600px; }
.decorative-icon-display--medium[data-icon="schedule"][data-color="gray"] { background-position: -240px -600px; }
.decorative-icon-display--medium[data-icon="strategy"][data-color="gray"] { background-position: -300px -600px; }

.decorative-icon-display--medium[data-icon="unit"][data-color="gray"] { background-position: 0px -660px; }
.decorative-icon-display--medium[data-icon="value"][data-color="gray"] { background-position: -60px -660px; }
.decorative-icon-display--medium[data-icon="webinar"][data-color="gray"] { background-position: -120px -660px; }

/* Dark icons - Medium (#54595F) */
.decorative-icon-display--medium[data-icon="accelerate"][data-color="dark"] { background-position: 0px -240px; }
.decorative-icon-display--medium[data-icon="attract"][data-color="dark"] { background-position: -60px -240px; }
.decorative-icon-display--medium[data-icon="contact"][data-color="dark"] { background-position: -120px -240px; }
.decorative-icon-display--medium[data-icon="delight"][data-color="dark"] { background-position: -180px -240px; }
.decorative-icon-display--medium[data-icon="download"][data-color="dark"] { background-position: -240px -240px; }
.decorative-icon-display--medium[data-icon="efficiency"][data-color="dark"] { background-position: -300px -240px; }

.decorative-icon-display--medium[data-icon="email"][data-color="dark"] { background-position: 0px -300px; }
.decorative-icon-display--medium[data-icon="engage"][data-color="dark"] { background-position: -60px -300px; }
.decorative-icon-display--medium[data-icon="exit"][data-color="dark"] { background-position: -120px -300px; }
.decorative-icon-display--medium[data-icon="expertise"][data-color="dark"] { background-position: -180px -300px; }
.decorative-icon-display--medium[data-icon="inbound"][data-color="dark"] { background-position: -240px -300px; }
.decorative-icon-display--medium[data-icon="momentum"][data-color="dark"] { background-position: -300px -300px; }

.decorative-icon-display--medium[data-icon="news"][data-color="dark"] { background-position: 0px -360px; }
.decorative-icon-display--medium[data-icon="persona"][data-color="dark"] { background-position: -60px -360px; }
.decorative-icon-display--medium[data-icon="professional"][data-color="dark"] { background-position: -120px -360px; }
.decorative-icon-display--medium[data-icon="roi"][data-color="dark"] { background-position: -180px -360px; }
.decorative-icon-display--medium[data-icon="schedule"][data-color="dark"] { background-position: -240px -360px; }
.decorative-icon-display--medium[data-icon="strategy"][data-color="dark"] { background-position: -300px -360px; }

.decorative-icon-display--medium[data-icon="unit"][data-color="dark"] { background-position: 0px -420px; }
.decorative-icon-display--medium[data-icon="value"][data-color="dark"] { background-position: -60px -420px; }
.decorative-icon-display--medium[data-icon="webinar"][data-color="dark"] { background-position: -120px -420px; }

/* White icons - Medium */
.decorative-icon-display--medium[data-icon="accelerate"][data-color="white"] { background-position: 0px -720px; }
.decorative-icon-display--medium[data-icon="attract"][data-color="white"] { background-position: -60px -720px; }
.decorative-icon-display--medium[data-icon="contact"][data-color="white"] { background-position: -120px -720px; }
.decorative-icon-display--medium[data-icon="delight"][data-color="white"] { background-position: -180px -720px; }
.decorative-icon-display--medium[data-icon="download"][data-color="white"] { background-position: -240px -720px; }
.decorative-icon-display--medium[data-icon="efficiency"][data-color="white"] { background-position: -300px -720px; }

.decorative-icon-display--medium[data-icon="email"][data-color="white"] { background-position: 0px -780px; }
.decorative-icon-display--medium[data-icon="engage"][data-color="white"] { background-position: -60px -780px; }
.decorative-icon-display--medium[data-icon="exit"][data-color="white"] { background-position: -120px -780px; }
.decorative-icon-display--medium[data-icon="expertise"][data-color="white"] { background-position: -180px -780px; }
.decorative-icon-display--medium[data-icon="inbound"][data-color="white"] { background-position: -240px -780px; }
.decorative-icon-display--medium[data-icon="momentum"][data-color="white"] { background-position: -300px -780px; }

.decorative-icon-display--medium[data-icon="news"][data-color="white"] { background-position: 0px -840px; }
.decorative-icon-display--medium[data-icon="persona"][data-color="white"] { background-position: -60px -840px; }
.decorative-icon-display--medium[data-icon="professional"][data-color="white"] { background-position: -120px -840px; }
.decorative-icon-display--medium[data-icon="roi"][data-color="white"] { background-position: -180px -840px; }
.decorative-icon-display--medium[data-icon="schedule"][data-color="white"] { background-position: -240px -840px; }
.decorative-icon-display--medium[data-icon="strategy"][data-color="white"] { background-position: -300px -840px; }

.decorative-icon-display--medium[data-icon="unit"][data-color="white"] { background-position: 0px -900px; }
.decorative-icon-display--medium[data-icon="value"][data-color="white"] { background-position: -60px -900px; }
.decorative-icon-display--medium[data-icon="webinar"][data-color="white"] { background-position: -120px -900px; }

/* ====================================
   SIZE VARIANTS - LARGE (90px)
   Scale factor: 1.0 (original)
   Sprite: 540px × 1440px
   Positions: original values
   ==================================== */
.decorative-icon-display--large {
    width: 90px;
    height: 90px;
    background-size: 540px 1440px;
}

/* Navy icons - Large (Original positions) */
.decorative-icon-display--large[data-icon="accelerate"][data-color="navy"] { background-position: 0px 0px; }
.decorative-icon-display--large[data-icon="attract"][data-color="navy"] { background-position: -90px 0px; }
.decorative-icon-display--large[data-icon="contact"][data-color="navy"] { background-position: -180px 0px; }
.decorative-icon-display--large[data-icon="delight"][data-color="navy"] { background-position: -270px 0px; }
.decorative-icon-display--large[data-icon="download"][data-color="navy"] { background-position: -360px 0px; }
.decorative-icon-display--large[data-icon="efficiency"][data-color="navy"] { background-position: -450px 0px; }

.decorative-icon-display--large[data-icon="email"][data-color="navy"] { background-position: 0px -90px; }
.decorative-icon-display--large[data-icon="engage"][data-color="navy"] { background-position: -90px -90px; }
.decorative-icon-display--large[data-icon="exit"][data-color="navy"] { background-position: -180px -90px; }
.decorative-icon-display--large[data-icon="expertise"][data-color="navy"] { background-position: -270px -90px; }
.decorative-icon-display--large[data-icon="inbound"][data-color="navy"] { background-position: -360px -90px; }
.decorative-icon-display--large[data-icon="momentum"][data-color="navy"] { background-position: -450px -90px; }

.decorative-icon-display--large[data-icon="news"][data-color="navy"] { background-position: 0px -180px; }
.decorative-icon-display--large[data-icon="persona"][data-color="navy"] { background-position: -90px -180px; }
.decorative-icon-display--large[data-icon="professional"][data-color="navy"] { background-position: -180px -180px; }
.decorative-icon-display--large[data-icon="roi"][data-color="navy"] { background-position: -270px -180px; }
.decorative-icon-display--large[data-icon="schedule"][data-color="navy"] { background-position: -360px -180px; }
.decorative-icon-display--large[data-icon="strategy"][data-color="navy"] { background-position: -450px -180px; }

.decorative-icon-display--large[data-icon="unit"][data-color="navy"] { background-position: 0px -270px; }
.decorative-icon-display--large[data-icon="value"][data-color="navy"] { background-position: -90px -270px; }
.decorative-icon-display--large[data-icon="webinar"][data-color="navy"] { background-position: -180px -270px; }

/* Gray icons - Large (#6C757D) */
.decorative-icon-display--large[data-icon="accelerate"][data-color="gray"] { background-position: 0px -720px; }
.decorative-icon-display--large[data-icon="attract"][data-color="gray"] { background-position: -90px -720px; }
.decorative-icon-display--large[data-icon="contact"][data-color="gray"] { background-position: -180px -720px; }
.decorative-icon-display--large[data-icon="delight"][data-color="gray"] { background-position: -270px -720px; }
.decorative-icon-display--large[data-icon="download"][data-color="gray"] { background-position: -360px -720px; }
.decorative-icon-display--large[data-icon="efficiency"][data-color="gray"] { background-position: -450px -720px; }

.decorative-icon-display--large[data-icon="email"][data-color="gray"] { background-position: 0px -810px; }
.decorative-icon-display--large[data-icon="engage"][data-color="gray"] { background-position: -90px -810px; }
.decorative-icon-display--large[data-icon="exit"][data-color="gray"] { background-position: -180px -810px; }
.decorative-icon-display--large[data-icon="expertise"][data-color="gray"] { background-position: -270px -810px; }
.decorative-icon-display--large[data-icon="inbound"][data-color="gray"] { background-position: -360px -810px; }
.decorative-icon-display--large[data-icon="momentum"][data-color="gray"] { background-position: -450px -810px; }

.decorative-icon-display--large[data-icon="news"][data-color="gray"] { background-position: 0px -900px; }
.decorative-icon-display--large[data-icon="persona"][data-color="gray"] { background-position: -90px -900px; }
.decorative-icon-display--large[data-icon="professional"][data-color="gray"] { background-position: -180px -900px; }
.decorative-icon-display--large[data-icon="roi"][data-color="gray"] { background-position: -270px -900px; }
.decorative-icon-display--large[data-icon="schedule"][data-color="gray"] { background-position: -360px -900px; }
.decorative-icon-display--large[data-icon="strategy"][data-color="gray"] { background-position: -450px -900px; }

.decorative-icon-display--large[data-icon="unit"][data-color="gray"] { background-position: 0px -990px; }
.decorative-icon-display--large[data-icon="value"][data-color="gray"] { background-position: -90px -990px; }
.decorative-icon-display--large[data-icon="webinar"][data-color="gray"] { background-position: -180px -990px; }

/* Dark icons - Large (#54595F) */
.decorative-icon-display--large[data-icon="accelerate"][data-color="dark"] { background-position: 0px -360px; }
.decorative-icon-display--large[data-icon="attract"][data-color="dark"] { background-position: -90px -360px; }
.decorative-icon-display--large[data-icon="contact"][data-color="dark"] { background-position: -180px -360px; }
.decorative-icon-display--large[data-icon="delight"][data-color="dark"] { background-position: -270px -360px; }
.decorative-icon-display--large[data-icon="download"][data-color="dark"] { background-position: -360px -360px; }
.decorative-icon-display--large[data-icon="efficiency"][data-color="dark"] { background-position: -450px -360px; }

.decorative-icon-display--large[data-icon="email"][data-color="dark"] { background-position: 0px -450px; }
.decorative-icon-display--large[data-icon="engage"][data-color="dark"] { background-position: -90px -450px; }
.decorative-icon-display--large[data-icon="exit"][data-color="dark"] { background-position: -180px -450px; }
.decorative-icon-display--large[data-icon="expertise"][data-color="dark"] { background-position: -270px -450px; }
.decorative-icon-display--large[data-icon="inbound"][data-color="dark"] { background-position: -360px -450px; }
.decorative-icon-display--large[data-icon="momentum"][data-color="dark"] { background-position: -450px -450px; }

.decorative-icon-display--large[data-icon="news"][data-color="dark"] { background-position: 0px -540px; }
.decorative-icon-display--large[data-icon="persona"][data-color="dark"] { background-position: -90px -540px; }
.decorative-icon-display--large[data-icon="professional"][data-color="dark"] { background-position: -180px -540px; }
.decorative-icon-display--large[data-icon="roi"][data-color="dark"] { background-position: -270px -540px; }
.decorative-icon-display--large[data-icon="schedule"][data-color="dark"] { background-position: -360px -540px; }
.decorative-icon-display--large[data-icon="strategy"][data-color="dark"] { background-position: -450px -540px; }

.decorative-icon-display--large[data-icon="unit"][data-color="dark"] { background-position: 0px -630px; }
.decorative-icon-display--large[data-icon="value"][data-color="dark"] { background-position: -90px -630px; }
.decorative-icon-display--large[data-icon="webinar"][data-color="dark"] { background-position: -180px -630px; }

/* White icons - Large */
.decorative-icon-display--large[data-icon="accelerate"][data-color="white"] { background-position: 0px -1080px; }
.decorative-icon-display--large[data-icon="attract"][data-color="white"] { background-position: -90px -1080px; }
.decorative-icon-display--large[data-icon="contact"][data-color="white"] { background-position: -180px -1080px; }
.decorative-icon-display--large[data-icon="delight"][data-color="white"] { background-position: -270px -1080px; }
.decorative-icon-display--large[data-icon="download"][data-color="white"] { background-position: -360px -1080px; }
.decorative-icon-display--large[data-icon="efficiency"][data-color="white"] { background-position: -450px -1080px; }

.decorative-icon-display--large[data-icon="email"][data-color="white"] { background-position: 0px -1170px; }
.decorative-icon-display--large[data-icon="engage"][data-color="white"] { background-position: -90px -1170px; }
.decorative-icon-display--large[data-icon="exit"][data-color="white"] { background-position: -180px -1170px; }
.decorative-icon-display--large[data-icon="expertise"][data-color="white"] { background-position: -270px -1170px; }
.decorative-icon-display--large[data-icon="inbound"][data-color="white"] { background-position: -360px -1170px; }
.decorative-icon-display--large[data-icon="momentum"][data-color="white"] { background-position: -450px -1170px; }

.decorative-icon-display--large[data-icon="news"][data-color="white"] { background-position: 0px -1260px; }
.decorative-icon-display--large[data-icon="persona"][data-color="white"] { background-position: -90px -1260px; }
.decorative-icon-display--large[data-icon="professional"][data-color="white"] { background-position: -180px -1260px; }
.decorative-icon-display--large[data-icon="roi"][data-color="white"] { background-position: -270px -1260px; }
.decorative-icon-display--large[data-icon="schedule"][data-color="white"] { background-position: -360px -1260px; }
.decorative-icon-display--large[data-icon="strategy"][data-color="white"] { background-position: -450px -1260px; }

.decorative-icon-display--large[data-icon="unit"][data-color="white"] { background-position: 0px -1350px; }
.decorative-icon-display--large[data-icon="value"][data-color="white"] { background-position: -90px -1350px; }
.decorative-icon-display--large[data-icon="webinar"][data-color="white"] { background-position: -180px -1350px; }

/* ====================================
   SIZE VARIANTS - XLARGE (120px)
   Scale factor: 120/90 = 1.333...
   Sprite: 720px × 1920px
   Positions: original * 1.333
   ==================================== */
.decorative-icon-display--xlarge {
    width: 120px;
    height: 120px;
    background-size: 720px 1920px;
}

/* Navy icons - XLarge */
.decorative-icon-display--xlarge[data-icon="accelerate"][data-color="navy"] { background-position: 0px 0px; }
.decorative-icon-display--xlarge[data-icon="attract"][data-color="navy"] { background-position: -120px 0px; }
.decorative-icon-display--xlarge[data-icon="contact"][data-color="navy"] { background-position: -240px 0px; }
.decorative-icon-display--xlarge[data-icon="delight"][data-color="navy"] { background-position: -360px 0px; }
.decorative-icon-display--xlarge[data-icon="download"][data-color="navy"] { background-position: -480px 0px; }
.decorative-icon-display--xlarge[data-icon="efficiency"][data-color="navy"] { background-position: -600px 0px; }

.decorative-icon-display--xlarge[data-icon="email"][data-color="navy"] { background-position: 0px -120px; }
.decorative-icon-display--xlarge[data-icon="engage"][data-color="navy"] { background-position: -120px -120px; }
.decorative-icon-display--xlarge[data-icon="exit"][data-color="navy"] { background-position: -240px -120px; }
.decorative-icon-display--xlarge[data-icon="expertise"][data-color="navy"] { background-position: -360px -120px; }
.decorative-icon-display--xlarge[data-icon="inbound"][data-color="navy"] { background-position: -480px -120px; }
.decorative-icon-display--xlarge[data-icon="momentum"][data-color="navy"] { background-position: -600px -120px; }

.decorative-icon-display--xlarge[data-icon="news"][data-color="navy"] { background-position: 0px -240px; }
.decorative-icon-display--xlarge[data-icon="persona"][data-color="navy"] { background-position: -120px -240px; }
.decorative-icon-display--xlarge[data-icon="professional"][data-color="navy"] { background-position: -240px -240px; }
.decorative-icon-display--xlarge[data-icon="roi"][data-color="navy"] { background-position: -360px -240px; }
.decorative-icon-display--xlarge[data-icon="schedule"][data-color="navy"] { background-position: -480px -240px; }
.decorative-icon-display--xlarge[data-icon="strategy"][data-color="navy"] { background-position: -600px -240px; }

.decorative-icon-display--xlarge[data-icon="unit"][data-color="navy"] { background-position: 0px -360px; }
.decorative-icon-display--xlarge[data-icon="value"][data-color="navy"] { background-position: -120px -360px; }
.decorative-icon-display--xlarge[data-icon="webinar"][data-color="navy"] { background-position: -240px -360px; }

/* Gray icons - XLarge (#6C757D) */
.decorative-icon-display--xlarge[data-icon="accelerate"][data-color="gray"] { background-position: 0px -960px; }
.decorative-icon-display--xlarge[data-icon="attract"][data-color="gray"] { background-position: -120px -960px; }
.decorative-icon-display--xlarge[data-icon="contact"][data-color="gray"] { background-position: -240px -960px; }
.decorative-icon-display--xlarge[data-icon="delight"][data-color="gray"] { background-position: -360px -960px; }
.decorative-icon-display--xlarge[data-icon="download"][data-color="gray"] { background-position: -480px -960px; }
.decorative-icon-display--xlarge[data-icon="efficiency"][data-color="gray"] { background-position: -600px -960px; }

.decorative-icon-display--xlarge[data-icon="email"][data-color="gray"] { background-position: 0px -1080px; }
.decorative-icon-display--xlarge[data-icon="engage"][data-color="gray"] { background-position: -120px -1080px; }
.decorative-icon-display--xlarge[data-icon="exit"][data-color="gray"] { background-position: -240px -1080px; }
.decorative-icon-display--xlarge[data-icon="expertise"][data-color="gray"] { background-position: -360px -1080px; }
.decorative-icon-display--xlarge[data-icon="inbound"][data-color="gray"] { background-position: -480px -1080px; }
.decorative-icon-display--xlarge[data-icon="momentum"][data-color="gray"] { background-position: -600px -1080px; }

.decorative-icon-display--xlarge[data-icon="news"][data-color="gray"] { background-position: 0px -1200px; }
.decorative-icon-display--xlarge[data-icon="persona"][data-color="gray"] { background-position: -120px -1200px; }
.decorative-icon-display--xlarge[data-icon="professional"][data-color="gray"] { background-position: -240px -1200px; }
.decorative-icon-display--xlarge[data-icon="roi"][data-color="gray"] { background-position: -360px -1200px; }
.decorative-icon-display--xlarge[data-icon="schedule"][data-color="gray"] { background-position: -480px -1200px; }
.decorative-icon-display--xlarge[data-icon="strategy"][data-color="gray"] { background-position: -600px -1200px; }

.decorative-icon-display--xlarge[data-icon="unit"][data-color="gray"] { background-position: 0px -1320px; }
.decorative-icon-display--xlarge[data-icon="value"][data-color="gray"] { background-position: -120px -1320px; }
.decorative-icon-display--xlarge[data-icon="webinar"][data-color="gray"] { background-position: -240px -1320px; }

/* Dark icons - XLarge (#54595F) */
.decorative-icon-display--xlarge[data-icon="accelerate"][data-color="dark"] { background-position: 0px -480px; }
.decorative-icon-display--xlarge[data-icon="attract"][data-color="dark"] { background-position: -120px -480px; }
.decorative-icon-display--xlarge[data-icon="contact"][data-color="dark"] { background-position: -240px -480px; }
.decorative-icon-display--xlarge[data-icon="delight"][data-color="dark"] { background-position: -360px -480px; }
.decorative-icon-display--xlarge[data-icon="download"][data-color="dark"] { background-position: -480px -480px; }
.decorative-icon-display--xlarge[data-icon="efficiency"][data-color="dark"] { background-position: -600px -480px; }

.decorative-icon-display--xlarge[data-icon="email"][data-color="dark"] { background-position: 0px -600px; }
.decorative-icon-display--xlarge[data-icon="engage"][data-color="dark"] { background-position: -120px -600px; }
.decorative-icon-display--xlarge[data-icon="exit"][data-color="dark"] { background-position: -240px -600px; }
.decorative-icon-display--xlarge[data-icon="expertise"][data-color="dark"] { background-position: -360px -600px; }
.decorative-icon-display--xlarge[data-icon="inbound"][data-color="dark"] { background-position: -480px -600px; }
.decorative-icon-display--xlarge[data-icon="momentum"][data-color="dark"] { background-position: -600px -600px; }

.decorative-icon-display--xlarge[data-icon="news"][data-color="dark"] { background-position: 0px -720px; }
.decorative-icon-display--xlarge[data-icon="persona"][data-color="dark"] { background-position: -120px -720px; }
.decorative-icon-display--xlarge[data-icon="professional"][data-color="dark"] { background-position: -240px -720px; }
.decorative-icon-display--xlarge[data-icon="roi"][data-color="dark"] { background-position: -360px -720px; }
.decorative-icon-display--xlarge[data-icon="schedule"][data-color="dark"] { background-position: -480px -720px; }
.decorative-icon-display--xlarge[data-icon="strategy"][data-color="dark"] { background-position: -600px -720px; }

.decorative-icon-display--xlarge[data-icon="unit"][data-color="dark"] { background-position: 0px -840px; }
.decorative-icon-display--xlarge[data-icon="value"][data-color="dark"] { background-position: -120px -840px; }
.decorative-icon-display--xlarge[data-icon="webinar"][data-color="dark"] { background-position: -240px -840px; }

/* White icons - XLarge */
.decorative-icon-display--xlarge[data-icon="accelerate"][data-color="white"] { background-position: 0px -1440px; }
.decorative-icon-display--xlarge[data-icon="attract"][data-color="white"] { background-position: -120px -1440px; }
.decorative-icon-display--xlarge[data-icon="contact"][data-color="white"] { background-position: -240px -1440px; }
.decorative-icon-display--xlarge[data-icon="delight"][data-color="white"] { background-position: -360px -1440px; }
.decorative-icon-display--xlarge[data-icon="download"][data-color="white"] { background-position: -480px -1440px; }
.decorative-icon-display--xlarge[data-icon="efficiency"][data-color="white"] { background-position: -600px -1440px; }

.decorative-icon-display--xlarge[data-icon="email"][data-color="white"] { background-position: 0px -1560px; }
.decorative-icon-display--xlarge[data-icon="engage"][data-color="white"] { background-position: -120px -1560px; }
.decorative-icon-display--xlarge[data-icon="exit"][data-color="white"] { background-position: -240px -1560px; }
.decorative-icon-display--xlarge[data-icon="expertise"][data-color="white"] { background-position: -360px -1560px; }
.decorative-icon-display--xlarge[data-icon="inbound"][data-color="white"] { background-position: -480px -1560px; }
.decorative-icon-display--xlarge[data-icon="momentum"][data-color="white"] { background-position: -600px -1560px; }

.decorative-icon-display--xlarge[data-icon="news"][data-color="white"] { background-position: 0px -1680px; }
.decorative-icon-display--xlarge[data-icon="persona"][data-color="white"] { background-position: -120px -1680px; }
.decorative-icon-display--xlarge[data-icon="professional"][data-color="white"] { background-position: -240px -1680px; }
.decorative-icon-display--xlarge[data-icon="roi"][data-color="white"] { background-position: -360px -1680px; }
.decorative-icon-display--xlarge[data-icon="schedule"][data-color="white"] { background-position: -480px -1680px; }
.decorative-icon-display--xlarge[data-icon="strategy"][data-color="white"] { background-position: -600px -1680px; }

.decorative-icon-display--xlarge[data-icon="unit"][data-color="white"] { background-position: 0px -1800px; }
.decorative-icon-display--xlarge[data-icon="value"][data-color="white"] { background-position: -120px -1800px; }
.decorative-icon-display--xlarge[data-icon="webinar"][data-color="white"] { background-position: -240px -1800px; }

/* ====================================
   SIZE VARIANTS - XXLARGE (256px)
   Scale factor: 256/90 = 2.844...
   Sprite: 1536px × 4096px
   Positions: original * 2.844
   ==================================== */
.decorative-icon-display--xxlarge {
    width: 256px;
    height: 256px;
    background-size: 1536px 4096px;
}

/* Navy icons - XXLarge */
.decorative-icon-display--xxlarge[data-icon="accelerate"][data-color="navy"] { background-position: 0px 0px; }
.decorative-icon-display--xxlarge[data-icon="attract"][data-color="navy"] { background-position: -256px 0px; }
.decorative-icon-display--xxlarge[data-icon="contact"][data-color="navy"] { background-position: -512px 0px; }
.decorative-icon-display--xxlarge[data-icon="delight"][data-color="navy"] { background-position: -768px 0px; }
.decorative-icon-display--xxlarge[data-icon="download"][data-color="navy"] { background-position: -1024px 0px; }
.decorative-icon-display--xxlarge[data-icon="efficiency"][data-color="navy"] { background-position: -1280px 0px; }

.decorative-icon-display--xxlarge[data-icon="email"][data-color="navy"] { background-position: 0px -256px; }
.decorative-icon-display--xxlarge[data-icon="engage"][data-color="navy"] { background-position: -256px -256px; }
.decorative-icon-display--xxlarge[data-icon="exit"][data-color="navy"] { background-position: -512px -256px; }
.decorative-icon-display--xxlarge[data-icon="expertise"][data-color="navy"] { background-position: -768px -256px; }
.decorative-icon-display--xxlarge[data-icon="inbound"][data-color="navy"] { background-position: -1024px -256px; }
.decorative-icon-display--xxlarge[data-icon="momentum"][data-color="navy"] { background-position: -1280px -256px; }

.decorative-icon-display--xxlarge[data-icon="news"][data-color="navy"] { background-position: 0px -512px; }
.decorative-icon-display--xxlarge[data-icon="persona"][data-color="navy"] { background-position: -256px -512px; }
.decorative-icon-display--xxlarge[data-icon="professional"][data-color="navy"] { background-position: -512px -512px; }
.decorative-icon-display--xxlarge[data-icon="roi"][data-color="navy"] { background-position: -768px -512px; }
.decorative-icon-display--xxlarge[data-icon="schedule"][data-color="navy"] { background-position: -1024px -512px; }
.decorative-icon-display--xxlarge[data-icon="strategy"][data-color="navy"] { background-position: -1280px -512px; }

.decorative-icon-display--xxlarge[data-icon="unit"][data-color="navy"] { background-position: 0px -768px; }
.decorative-icon-display--xxlarge[data-icon="value"][data-color="navy"] { background-position: -256px -768px; }
.decorative-icon-display--xxlarge[data-icon="webinar"][data-color="navy"] { background-position: -512px -768px; }

/* Gray icons - XXLarge (#6C757D) */
.decorative-icon-display--xxlarge[data-icon="accelerate"][data-color="gray"] { background-position: 0px -2048px; }
.decorative-icon-display--xxlarge[data-icon="attract"][data-color="gray"] { background-position: -256px -2048px; }
.decorative-icon-display--xxlarge[data-icon="contact"][data-color="gray"] { background-position: -512px -2048px; }
.decorative-icon-display--xxlarge[data-icon="delight"][data-color="gray"] { background-position: -768px -2048px; }
.decorative-icon-display--xxlarge[data-icon="download"][data-color="gray"] { background-position: -1024px -2048px; }
.decorative-icon-display--xxlarge[data-icon="efficiency"][data-color="gray"] { background-position: -1280px -2048px; }

.decorative-icon-display--xxlarge[data-icon="email"][data-color="gray"] { background-position: 0px -2304px; }
.decorative-icon-display--xxlarge[data-icon="engage"][data-color="gray"] { background-position: -256px -2304px; }
.decorative-icon-display--xxlarge[data-icon="exit"][data-color="gray"] { background-position: -512px -2304px; }
.decorative-icon-display--xxlarge[data-icon="expertise"][data-color="gray"] { background-position: -768px -2304px; }
.decorative-icon-display--xxlarge[data-icon="inbound"][data-color="gray"] { background-position: -1024px -2304px; }
.decorative-icon-display--xxlarge[data-icon="momentum"][data-color="gray"] { background-position: -1280px -2304px; }

.decorative-icon-display--xxlarge[data-icon="news"][data-color="gray"] { background-position: 0px -2560px; }
.decorative-icon-display--xxlarge[data-icon="persona"][data-color="gray"] { background-position: -256px -2560px; }
.decorative-icon-display--xxlarge[data-icon="professional"][data-color="gray"] { background-position: -512px -2560px; }
.decorative-icon-display--xxlarge[data-icon="roi"][data-color="gray"] { background-position: -768px -2560px; }
.decorative-icon-display--xxlarge[data-icon="schedule"][data-color="gray"] { background-position: -1024px -2560px; }
.decorative-icon-display--xxlarge[data-icon="strategy"][data-color="gray"] { background-position: -1280px -2560px; }

.decorative-icon-display--xxlarge[data-icon="unit"][data-color="gray"] { background-position: 0px -2816px; }
.decorative-icon-display--xxlarge[data-icon="value"][data-color="gray"] { background-position: -256px -2816px; }
.decorative-icon-display--xxlarge[data-icon="webinar"][data-color="gray"] { background-position: -512px -2816px; }

/* Dark icons - XXLarge (#54595F) */
.decorative-icon-display--xxlarge[data-icon="accelerate"][data-color="dark"] { background-position: 0px -1024px; }
.decorative-icon-display--xxlarge[data-icon="attract"][data-color="dark"] { background-position: -256px -1024px; }
.decorative-icon-display--xxlarge[data-icon="contact"][data-color="dark"] { background-position: -512px -1024px; }
.decorative-icon-display--xxlarge[data-icon="delight"][data-color="dark"] { background-position: -768px -1024px; }
.decorative-icon-display--xxlarge[data-icon="download"][data-color="dark"] { background-position: -1024px -1024px; }
.decorative-icon-display--xxlarge[data-icon="efficiency"][data-color="dark"] { background-position: -1280px -1024px; }

.decorative-icon-display--xxlarge[data-icon="email"][data-color="dark"] { background-position: 0px -1280px; }
.decorative-icon-display--xxlarge[data-icon="engage"][data-color="dark"] { background-position: -256px -1280px; }
.decorative-icon-display--xxlarge[data-icon="exit"][data-color="dark"] { background-position: -512px -1280px; }
.decorative-icon-display--xxlarge[data-icon="expertise"][data-color="dark"] { background-position: -768px -1280px; }
.decorative-icon-display--xxlarge[data-icon="inbound"][data-color="dark"] { background-position: -1024px -1280px; }
.decorative-icon-display--xxlarge[data-icon="momentum"][data-color="dark"] { background-position: -1280px -1280px; }

.decorative-icon-display--xxlarge[data-icon="news"][data-color="dark"] { background-position: 0px -1536px; }
.decorative-icon-display--xxlarge[data-icon="persona"][data-color="dark"] { background-position: -256px -1536px; }
.decorative-icon-display--xxlarge[data-icon="professional"][data-color="dark"] { background-position: -512px -1536px; }
.decorative-icon-display--xxlarge[data-icon="roi"][data-color="dark"] { background-position: -768px -1536px; }
.decorative-icon-display--xxlarge[data-icon="schedule"][data-color="dark"] { background-position: -1024px -1536px; }
.decorative-icon-display--xxlarge[data-icon="strategy"][data-color="dark"] { background-position: -1280px -1536px; }

.decorative-icon-display--xxlarge[data-icon="unit"][data-color="dark"] { background-position: 0px -1792px; }
.decorative-icon-display--xxlarge[data-icon="value"][data-color="dark"] { background-position: -256px -1792px; }
.decorative-icon-display--xxlarge[data-icon="webinar"][data-color="dark"] { background-position: -512px -1792px; }

/* White icons - XXLarge */
.decorative-icon-display--xxlarge[data-icon="accelerate"][data-color="white"] { background-position: 0px -3072px; }
.decorative-icon-display--xxlarge[data-icon="attract"][data-color="white"] { background-position: -256px -3072px; }
.decorative-icon-display--xxlarge[data-icon="contact"][data-color="white"] { background-position: -512px -3072px; }
.decorative-icon-display--xxlarge[data-icon="delight"][data-color="white"] { background-position: -768px -3072px; }
.decorative-icon-display--xxlarge[data-icon="download"][data-color="white"] { background-position: -1024px -3072px; }
.decorative-icon-display--xxlarge[data-icon="efficiency"][data-color="white"] { background-position: -1280px -3072px; }

.decorative-icon-display--xxlarge[data-icon="email"][data-color="white"] { background-position: 0px -3328px; }
.decorative-icon-display--xxlarge[data-icon="engage"][data-color="white"] { background-position: -256px -3328px; }
.decorative-icon-display--xxlarge[data-icon="exit"][data-color="white"] { background-position: -512px -3328px; }
.decorative-icon-display--xxlarge[data-icon="expertise"][data-color="white"] { background-position: -768px -3328px; }
.decorative-icon-display--xxlarge[data-icon="inbound"][data-color="white"] { background-position: -1024px -3328px; }
.decorative-icon-display--xxlarge[data-icon="momentum"][data-color="white"] { background-position: -1280px -3328px; }

.decorative-icon-display--xxlarge[data-icon="news"][data-color="white"] { background-position: 0px -3584px; }
.decorative-icon-display--xxlarge[data-icon="persona"][data-color="white"] { background-position: -256px -3584px; }
.decorative-icon-display--xxlarge[data-icon="professional"][data-color="white"] { background-position: -512px -3584px; }
.decorative-icon-display--xxlarge[data-icon="roi"][data-color="white"] { background-position: -768px -3584px; }
.decorative-icon-display--xxlarge[data-icon="schedule"][data-color="white"] { background-position: -1024px -3584px; }
.decorative-icon-display--xxlarge[data-icon="strategy"][data-color="white"] { background-position: -1280px -3584px; }

.decorative-icon-display--xxlarge[data-icon="unit"][data-color="white"] { background-position: 0px -3840px; }
.decorative-icon-display--xxlarge[data-icon="value"][data-color="white"] { background-position: -256px -3840px; }
.decorative-icon-display--xxlarge[data-icon="webinar"][data-color="white"] { background-position: -512px -3840px; }

/* ====================================
   OPTIONAL ENHANCEMENTS
   ==================================== */

/* Hover effects (optional) */
.decorative-icon-display--hoverable {
    transition: transform 0.2s ease, opacity 0.2s ease;
    cursor: pointer;
}

.decorative-icon-display--hoverable:hover {
    transform: scale(1.1);
    opacity: 0.9;
}

/* Background shapes (optional) */
.decorative-icon-display--circle {
    border-radius: 50%;
    padding: 10px;
    background-color: var(--color-neutral-100, #ECEEEF);
}

.decorative-icon-display--square {
    border-radius: 8px;
    padding: 10px;
    background-color: var(--color-neutral-100, #ECEEEF);
}

/* Inline text alignment helper */
.decorative-icon-display--inline {
    vertical-align: middle;
    margin: 0 8px;
}
/* ====================================
   UI ICON DISPLAY MOLECULE STYLES
   Component: Molecule/Icon/UI-Display
   Version: 1.0
   Last Updated: 2025-10-08
   
   Description: Flexible UI icon display component with size and color variants
   Sizes: Small (16px), Medium (24px), Large (32px), X-Large (48px)
   Colors: Navy (#1B1464), Gold (#D4AF37), Gray (#6C757D), White (#FFFFFF), Teal (#39CCCC)
   Dependencies: variables-v2.0-20250915.css, purposeful-sprite-ui.svg
   
   NOTE: UI icons use CSS filters for color variations (single sprite)
   NOTE: Arrow icon supports rotation via data-direction attribute
   
   Sprite Sheet Layout (6 columns × 2 rows, 256px per icon):
   Row 1: search, arrow-up, play, pause, hamburger, close
   Row 2: diamond, check, dot
   
   Usage:
   <div class="ui-icon-display ui-icon-display--medium" data-icon="arrow-up" data-color="navy"></div>
   
   Arrow Directions:
   <div class="ui-icon-display ui-icon-display--medium" data-icon="arrow-up" data-color="navy" data-direction="right"></div>
   ==================================== */

/* Import dependencies */

/* ====================================
   BASE UI ICON DISPLAY STYLES
   ==================================== */
.ui-icon-display {
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url('../assets/svg/ui-icons/purposeful-sprite-ui.svg');
    position: relative;
    flex-shrink: 0;
    transition: filter 0.2s ease;
}

/* ====================================
   SIZE VARIANTS - SMALL (16px)
   Scale factor: 16/256 = 0.0625
   Sprite: 96px × 32px
   ==================================== */
.ui-icon-display--small {
    width: 16px;
    height: 16px;
    background-size: 96px 32px;
}

/* Icon positions - Small */
.ui-icon-display--small[data-icon="search"] { background-position: 0px 0px; }
.ui-icon-display--small[data-icon="arrow-up"] { background-position: -16px 0px; }
.ui-icon-display--small[data-icon="play"] { background-position: -32px 0px; }
.ui-icon-display--small[data-icon="pause"] { background-position: -48px 0px; }
.ui-icon-display--small[data-icon="hamburger"] { background-position: -64px 0px; }
.ui-icon-display--small[data-icon="close"] { background-position: -80px 0px; }
.ui-icon-display--small[data-icon="diamond"] { background-position: 0px -16px; }
.ui-icon-display--small[data-icon="check"] { background-position: -16px -16px; }
.ui-icon-display--small[data-icon="dot"] { background-position: -32px -16px; }

/* ====================================
   SIZE VARIANTS - MEDIUM (24px)
   Scale factor: 24/256 = 0.09375
   Sprite: 144px × 48px
   ==================================== */
.ui-icon-display--medium {
    width: 24px;
    height: 24px;
    background-size: 144px 48px;
}

/* Icon positions - Medium */
.ui-icon-display--medium[data-icon="search"] { background-position: 0px 0px; }
.ui-icon-display--medium[data-icon="arrow-up"] { background-position: -24px 0px; }
.ui-icon-display--medium[data-icon="play"] { background-position: -48px 0px; }
.ui-icon-display--medium[data-icon="pause"] { background-position: -72px 0px; }
.ui-icon-display--medium[data-icon="hamburger"] { background-position: -96px 0px; }
.ui-icon-display--medium[data-icon="close"] { background-position: -120px 0px; }
.ui-icon-display--medium[data-icon="diamond"] { background-position: 0px -24px; }
.ui-icon-display--medium[data-icon="check"] { background-position: -24px -24px; }
.ui-icon-display--medium[data-icon="dot"] { background-position: -48px -24px; }

/* ====================================
   SIZE VARIANTS - LARGE (32px)
   Scale factor: 32/256 = 0.125
   Sprite: 192px × 64px
   ==================================== */
.ui-icon-display--large {
    width: 32px;
    height: 32px;
    background-size: 192px 64px;
}

/* Icon positions - Large */
.ui-icon-display--large[data-icon="search"] { background-position: 0px 0px; }
.ui-icon-display--large[data-icon="arrow-up"] { background-position: -32px 0px; }
.ui-icon-display--large[data-icon="play"] { background-position: -64px 0px; }
.ui-icon-display--large[data-icon="pause"] { background-position: -96px 0px; }
.ui-icon-display--large[data-icon="hamburger"] { background-position: -128px 0px; }
.ui-icon-display--large[data-icon="close"] { background-position: -160px 0px; }
.ui-icon-display--large[data-icon="diamond"] { background-position: 0px -32px; }
.ui-icon-display--large[data-icon="check"] { background-position: -32px -32px; }
.ui-icon-display--large[data-icon="dot"] { background-position: -64px -32px; }

/* ====================================
   SIZE VARIANTS - XLARGE (48px)
   Scale factor: 48/256 = 0.1875
   Sprite: 288px × 96px
   ==================================== */
.ui-icon-display--xlarge {
    width: 48px;
    height: 48px;
    background-size: 288px 96px;
}

/* Icon positions - X-Large */
.ui-icon-display--xlarge[data-icon="search"] { background-position: 0px 0px; }
.ui-icon-display--xlarge[data-icon="arrow-up"] { background-position: -48px 0px; }
.ui-icon-display--xlarge[data-icon="play"] { background-position: -96px 0px; }
.ui-icon-display--xlarge[data-icon="pause"] { background-position: -144px 0px; }
.ui-icon-display--xlarge[data-icon="hamburger"] { background-position: -192px 0px; }
.ui-icon-display--xlarge[data-icon="close"] { background-position: -240px 0px; }
.ui-icon-display--xlarge[data-icon="diamond"] { background-position: 0px -48px; }
.ui-icon-display--xlarge[data-icon="check"] { background-position: -48px -48px; }
.ui-icon-display--xlarge[data-icon="dot"] { background-position: -96px -48px; }

/* ====================================
   COLOR VARIANTS - CSS FILTERS
   
   Colors are applied via CSS filters to recolor the sprite
   Filters generated using: https://codepen.io/sosuke/pen/Pjoqqp
   ==================================== */

/* Navy (#1B1464) */
.ui-icon-display[data-color="navy"] {
    filter: brightness(0) saturate(100%) invert(8%) sepia(94%) saturate(3268%) hue-rotate(237deg) brightness(93%) contrast(101%);
}

/* Gold (#D4AF37) */
.ui-icon-display[data-color="gold"] {
    filter: brightness(0) saturate(100%) invert(81%) sepia(26%) saturate(735%) hue-rotate(6deg) brightness(95%) contrast(87%);
}

/* Gray (#6C757D) */
.ui-icon-display[data-color="gray"] {
    filter: brightness(0) saturate(100%) invert(47%) sepia(8%) saturate(719%) hue-rotate(178deg) brightness(93%) contrast(87%);
}

/* White (#FFFFFF) */
.ui-icon-display[data-color="white"] {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Teal (#39CCCC) */
.ui-icon-display[data-color="teal"] {
    filter: brightness(0) saturate(100%) invert(66%) sepia(74%) saturate(458%) hue-rotate(134deg) brightness(96%) contrast(91%);
}

/* ====================================
   ARROW DIRECTION VARIANTS
   
   Arrow icon supports rotation for different directions
   Data attribute: data-direction="up|right|down|left"
   Default: up
   ==================================== */

.ui-icon-display[data-icon="arrow-up"][data-direction="up"] {
    transform: rotate(0deg);
}

.ui-icon-display[data-icon="arrow-up"][data-direction="right"] {
    transform: rotate(90deg);
}

.ui-icon-display[data-icon="arrow-up"][data-direction="down"] {
    transform: rotate(180deg);
}

.ui-icon-display[data-icon="arrow-up"][data-direction="left"] {
    transform: rotate(-90deg);
}

/* ====================================
   HOVER STATES
   
   Optional hover color changes
   Add .ui-icon-display--interactive class for hover effects
   ==================================== */

.ui-icon-display--interactive {
    cursor: pointer;
}

/* Navy hover to Gold */
.ui-icon-display--interactive[data-color="navy"]:hover {
    filter: brightness(0) saturate(100%) invert(81%) sepia(26%) saturate(735%) hue-rotate(6deg) brightness(95%) contrast(87%);
}

/* Gold hover to Navy */
.ui-icon-display--interactive[data-color="gold"]:hover {
    filter: brightness(0) saturate(100%) invert(8%) sepia(94%) saturate(3268%) hue-rotate(237deg) brightness(93%) contrast(101%);
}

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

/* White hover to Gold */
.ui-icon-display--interactive[data-color="white"]:hover {
    filter: brightness(0) saturate(100%) invert(81%) sepia(26%) saturate(735%) hue-rotate(6deg) brightness(95%) contrast(87%);
}

/* Teal hover to Navy */
.ui-icon-display--interactive[data-color="teal"]:hover {
    filter: brightness(0) saturate(100%) invert(8%) sepia(94%) saturate(3268%) hue-rotate(237deg) brightness(93%) contrast(101%);
}

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

/* Ensure smooth transitions for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .ui-icon-display {
        transition: none;
    }
    
    .ui-icon-display[data-icon="arrow-up"] {
        transition: none;
    }
}

/* ====================================
   USAGE EXAMPLES
   ==================================== */

/*
Basic Icon:
<div class="ui-icon-display ui-icon-display--medium" data-icon="search" data-color="navy"></div>

Arrow with Direction:
<div class="ui-icon-display ui-icon-display--large" data-icon="arrow-up" data-color="gold" data-direction="right"></div>

Interactive Icon with Hover:
<div class="ui-icon-display ui-icon-display--medium ui-icon-display--interactive" data-icon="close" data-color="gray"></div>

In a Button:
<button class="my-button">
    <span class="ui-icon-display ui-icon-display--small" data-icon="check" data-color="white"></span>
    <span>Confirm</span>
</button>

All Available Icons:
- search
- arrow-up (supports data-direction: up, right, down, left)
- play
- pause
- hamburger
- close
- diamond
- check
- dot

All Available Colors:
- navy (#1B1464)
- gold (#D4AF37)
- gray (#6C757D)
- white (#FFFFFF)
- teal (#39CCCC)

All Available Sizes:
- small (16px)
- medium (24px)
- large (32px)
- xlarge (48px)
*/

/* =================================================
   FORM CONTACT COMPONENT - MOLECULE
   Component: form-contact.html
   Purpose: Contact form with multiple fields and HubSpot integration
   States: Default, Hover, Active, Error, Disabled, Success
   Responsive: Mobile (380-767px), Tablet (768-1149px), Desktop (1150-1919px), DesktopPlus (1920px+)
   Version: 1.0 - Fully Tokenized
   Date: 2025-10-29
   ================================================= */

/* -------------------------------------------------
   FORM CONTACT CONTAINER
   ------------------------------------------------- */

.form-contact {
    background-color: var(--color-neutral-100);
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-subtle);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 600px;
    padding: var(--space-6) 27px var(--space-8) 27px;
    gap: 11px;
}

/* -------------------------------------------------
   TITLE STYLES
   ------------------------------------------------- */

.form-contact__title {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-height);
    color: var(--color-primary-700);
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0;
}

/* -------------------------------------------------
   DESCRIPTION STYLES
   ------------------------------------------------- */

.form-contact__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%;
}

/* -------------------------------------------------
   FORM LAYOUT
   ------------------------------------------------- */

.form-contact__form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

/* -------------------------------------------------
   ROW CONTAINER FOR SIDE-BY-SIDE FIELDS
   ------------------------------------------------- */

.form-contact__row {
    display: flex;
    gap: 11px;
    width: 100%;
}

/* -------------------------------------------------
   FORM FIELD CONTAINER
   ------------------------------------------------- */

.form-contact__field-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
    padding: var(--space-1) 0;
    min-height: 79px;
    justify-content: center;
}

.form-contact__field-container--full {
    width: 100%;
}

.form-contact__field-container--phone {
    max-width: 300px;
}

.form-contact__field-container--message {
    width: 100%;
}

/* -------------------------------------------------
   INPUT LABEL
   ------------------------------------------------- */

.form-contact__label {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    font-size: var(--text-default-size);
    line-height: var(--text-form-height);
    color: var(--color-neutral-600);
    white-space: nowrap;
    display: flex;
    align-items: center;
}

/* -------------------------------------------------
   INPUT FIELD WRAPPER
   ------------------------------------------------- */

.form-contact__input-wrapper {
    position: relative;
    width: 100%;
}

/* -------------------------------------------------
   INPUT FIELD & TEXTAREA STYLES
   ------------------------------------------------- */

.form-contact__input,
.form-contact__textarea {
    width: 100%;
    padding: var(--space-1) var(--space-2);
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-small);
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-regular);
    font-size: var(--text-default-size);
    line-height: var(--text-form-height);
    color: var(--color-neutral-600);
    outline: none;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    min-height: 27px;
}

.form-contact__textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 24px;
    padding: var(--space-2);
}

/* -------------------------------------------------
   PLACEHOLDER STYLES
   ------------------------------------------------- */

.form-contact__input::placeholder,
.form-contact__textarea::placeholder {
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-light);
    font-style: italic;
    color: var(--color-neutral-300);
}

/* -------------------------------------------------
   INPUT STATES - HOVER
   ------------------------------------------------- */

.form-contact__input:hover,
.form-contact__textarea:hover {
    border-color: var(--color-primary-500);
}

/* -------------------------------------------------
   INPUT STATES - FOCUS
   ------------------------------------------------- */

.form-contact__input:focus,
.form-contact__textarea:focus {
    border-color: var(--color-primary-500);
}

/* -------------------------------------------------
   INPUT STATES - DISABLED
   ------------------------------------------------- */

.form-contact__input:disabled,
.form-contact__textarea:disabled {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-300);
    cursor: not-allowed;
}

/* -------------------------------------------------
   INPUT STATES - ERROR
   ------------------------------------------------- */

.form-contact__input--error,
.form-contact__textarea--error {
    background-color: var(--color-error-50);
    border-color: var(--color-error-500);
    color: var(--color-error-500);
}

/* -------------------------------------------------
   HELPER TEXT
   ------------------------------------------------- */

.form-contact__helper {
    font-family: var(--font-secondary);
    font-style: italic;
    font-weight: var(--font-weight-regular);
    font-size: var(--text-helper-size);
    line-height: var(--text-helper-height);
    color: var(--color-neutral-600);
    max-width: 327px;
}

.form-contact__helper--error {
    color: var(--color-neutral-600);
}

/* -------------------------------------------------
   SUBMIT CONTAINER
   ------------------------------------------------- */

.form-contact__submit-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    padding-top: var(--space-5);
    padding-bottom: var(--space-8);
}

/* -------------------------------------------------
   SUBMIT BUTTON
   ------------------------------------------------- */

.form-contact__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-20);
    background-color: var(--color-primary-700);
    border: none;
    border-radius: var(--radius-small);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-default-size);
    line-height: var(--text-form-height);
    color: var(--color-white);
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition-base);
}

/* -------------------------------------------------
   SUBMIT BUTTON STATES - HOVER
   ------------------------------------------------- */

.form-contact__submit:hover {
    background-color: var(--color-primary-500);
}

/* -------------------------------------------------
   SUBMIT BUTTON STATES - ACTIVE
   ------------------------------------------------- */

.form-contact__submit:active {
    background-color: var(--color-primary-900);
}

/* -------------------------------------------------
   SUBMIT BUTTON STATES - DISABLED
   ------------------------------------------------- */

.form-contact__submit:disabled {
    background-color: var(--color-neutral-400);
    color: var(--color-neutral-200);
    cursor: not-allowed;
}

/* -------------------------------------------------
   ERROR STATE BUTTON
   ------------------------------------------------- */

.form-contact--error .form-contact__submit {
    background-color: transparent;
    border: 2px solid var(--color-neutral-400);
    color: var(--color-neutral-200);
    cursor: not-allowed;
}

/* -------------------------------------------------
   SUCCESS STATE STYLES
   ------------------------------------------------- */

.form-contact--success {
    text-align: center;
}

.form-contact--success .form-contact__title {
    text-align: center;
    width: 100%;
}

.form-contact--success .form-contact__description {
    text-align: center;
}

.form-contact__success {
    width: 100%;
}

.form-contact__success--hidden {
    display: none;
}

.form-contact__success-message {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    font-size: var(--text-default-size);
    line-height: var(--text-form-height);
    color: var(--color-primary-700);
    text-align: center;
    width: 100%;
    margin-bottom: var(--space-3);
    padding: 0 var(--space-16);
}

.form-contact__success-link {
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-default-size);
    line-height: var(--text-default-height);
    color: var(--color-primary-700);
    text-decoration: underline;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity var(--transition-base);
}

.form-contact__success-link:hover {
    opacity: 0.8;
}

/* -------------------------------------------------
   COMPONENT STATE CLASSES
   ------------------------------------------------- */

.form-contact--hover .form-contact__submit {
    background-color: var(--color-primary-500);
}

.form-contact--active .form-contact__input,
.form-contact--active .form-contact__textarea {
    border-color: var(--color-primary-500);
}

.form-contact--active .form-contact__submit {
    background-color: var(--color-primary-900);
}

.form-contact--disabled .form-contact__input,
.form-contact--disabled .form-contact__textarea {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-300);
}

.form-contact--disabled .form-contact__submit {
    background-color: var(--color-neutral-400);
    color: var(--color-neutral-200);
}

/* -------------------------------------------------
   RESPONSIVE BREAKPOINTS
   ------------------------------------------------- */

/* Mobile: 380-767px */
@media (max-width: 767px) {
    .form-contact {
        width: 100%;
        max-width: 400px;
        padding: var(--space-5);
    }

    .form-contact__row {
        flex-direction: column;
    }

    .form-contact__field-container--phone {
        max-width: 100%;
    }
}

/* Mobile Small: 320-479px */
@media (max-width: 479px) {
    .form-contact {
        max-width: 320px;
    }
}

/* =================================================
   END OF FORM CONTACT COMPONENT
   ================================================= */
/* =================================================
   FORM NEWSLETTER COMPONENT - MOLECULE
   Component: form-newsletter.html
   Purpose: Newsletter signup form with email capture and HubSpot integration
   States: Default, Hover, Active, Error, Disabled, Success
   Responsive: Mobile (380-767px), Tablet (768-1149px), Desktop (1150-1919px), DesktopPlus (1920px+)
   Version: 1.0 - Fully Tokenized
   Date: 2025-10-29
   ================================================= */

/* -------------------------------------------------
   FORM NEWSLETTER CONTAINER
   ------------------------------------------------- */

.form-newsletter {
    background-color: var(--color-neutral-100);
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-subtle);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* -------------------------------------------------
   RESPONSIVE BREAKPOINT SIZING
   ------------------------------------------------- */

/* DesktopPlus: 1920px+ */
.form-newsletter--desktop-plus {
    width: 600px;
    padding: 29px 27px;
    gap: 11px;
}

/* Desktop: 1150-1919px */
.form-newsletter--desktop {
    width: 500px;
    padding: 29px 27px;
    gap: 11px;
}

/* Tablet: 768-1149px */
.form-newsletter--tablet {
    width: 400px;
    padding: 29px 27px;
    gap: 11px;
}

/* Mobile: 380-767px */
.form-newsletter--mobile {
    width: 320px;
    max-width: 320px;
    padding: var(--space-8) var(--space-6);
    gap: var(--space-3);
}

/* -------------------------------------------------
   TITLE STYLES
   ------------------------------------------------- */

.form-newsletter__title {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-height);
    color: var(--color-primary-700);
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0;
}

/* -------------------------------------------------
   DESCRIPTION STYLES
   ------------------------------------------------- */

.form-newsletter__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;
}

/* Breakpoint-specific description sizing */
.form-newsletter--desktop-plus .form-newsletter__description {
    width: 547px;
    min-height: 54px;
}

.form-newsletter--desktop .form-newsletter__description {
    width: 446px;
    min-height: 54px;
}

.form-newsletter--tablet .form-newsletter__description {
    width: 346px;
    min-height: 81px;
}

.form-newsletter--mobile .form-newsletter__description {
    width: 266px;
    min-height: 108px;
}

/* -------------------------------------------------
   FALLBACK FORM STYLES
   ------------------------------------------------- */

.form-newsletter__fallback {
    width: 100%;
}

.form-newsletter__fallback--hidden {
    display: none;
}

/* -------------------------------------------------
   FORM FIELD CONTAINER
   ------------------------------------------------- */

.form-newsletter__field-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-1) 0;
    min-height: 79px;
    justify-content: center;
}

/* -------------------------------------------------
   INPUT LABEL
   ------------------------------------------------- */

.form-newsletter__label {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    font-size: var(--text-default-size);
    line-height: var(--text-form-height);
    color: var(--color-neutral-600);
    white-space: nowrap;
    display: flex;
    align-items: center;
}

/* -------------------------------------------------
   INPUT FIELD WRAPPER
   ------------------------------------------------- */

.form-newsletter__input-wrapper {
    position: relative;
    width: 100%;
}

/* -------------------------------------------------
   INPUT FIELD STYLES
   ------------------------------------------------- */

.form-newsletter__input {
    width: 100%;
    padding: var(--space-1) var(--space-2);
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-small);
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-regular);
    font-size: var(--text-default-size);
    line-height: var(--text-form-height);
    color: var(--color-neutral-600);
    outline: none;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    min-height: 27px;
}

/* -------------------------------------------------
   PLACEHOLDER STYLES
   ------------------------------------------------- */

.form-newsletter__input::placeholder {
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-light);
    font-style: italic;
    color: var(--color-neutral-300);
}

/* -------------------------------------------------
   INPUT STATES - HOVER
   ------------------------------------------------- */

.form-newsletter__input:hover {
    border-color: var(--color-primary-500);
}

/* -------------------------------------------------
   INPUT STATES - FOCUS
   ------------------------------------------------- */

.form-newsletter__input:focus {
    border-color: var(--color-primary-500);
}

/* -------------------------------------------------
   INPUT STATES - DISABLED
   ------------------------------------------------- */

.form-newsletter__input:disabled {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-300);
    cursor: not-allowed;
}

/* -------------------------------------------------
   INPUT STATES - ERROR
   ------------------------------------------------- */

.form-newsletter__input--error {
    background-color: var(--color-error-50);
    border-color: var(--color-error-500);
    color: var(--color-error-500);
}

/* -------------------------------------------------
   HELPER TEXT
   ------------------------------------------------- */

.form-newsletter__helper {
    font-family: var(--font-secondary);
    font-style: italic;
    font-weight: var(--font-weight-regular);
    font-size: var(--text-helper-size);
    line-height: var(--text-helper-height);
    color: var(--color-neutral-600);
    max-width: 327px;
}

.form-newsletter__helper--error {
    color: var(--color-neutral-600);
}

/* -------------------------------------------------
   SUBMIT CONTAINER
   ------------------------------------------------- */

.form-newsletter__submit-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    padding-top: var(--space-5);
    padding-bottom: var(--space-8);
}

/* -------------------------------------------------
   SUBMIT BUTTON
   ------------------------------------------------- */

.form-newsletter__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-20);
    background-color: var(--color-primary-700);
    border: none;
    border-radius: var(--radius-small);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-default-size);
    line-height: var(--text-form-height);
    color: var(--color-white);
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition-base);
}

/* -------------------------------------------------
   SUBMIT BUTTON STATES - HOVER
   ------------------------------------------------- */

.form-newsletter__submit:hover {
    background-color: var(--color-primary-500);
}

/* -------------------------------------------------
   SUBMIT BUTTON STATES - ACTIVE
   ------------------------------------------------- */

.form-newsletter__submit:active {
    background-color: var(--color-primary-900);
}

/* -------------------------------------------------
   SUBMIT BUTTON STATES - DISABLED
   ------------------------------------------------- */

.form-newsletter__submit:disabled {
    background-color: var(--color-neutral-400);
    color: var(--color-neutral-200);
    cursor: not-allowed;
}

/* -------------------------------------------------
   ERROR STATE BUTTON
   ------------------------------------------------- */

.form-newsletter--error .form-newsletter__submit {
    background-color: transparent;
    border: 2px solid var(--color-neutral-400);
    color: var(--color-neutral-200);
    cursor: not-allowed;
}

/* -------------------------------------------------
   SUCCESS STATE STYLES
   ------------------------------------------------- */

.form-newsletter--success .form-newsletter__submit-container {
    padding-bottom: var(--space-3);
}

.form-newsletter__success {
    width: 100%;
}

.form-newsletter__success--hidden {
    display: none;
}

.form-newsletter__success-message {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    font-size: var(--text-default-size);
    line-height: var(--text-form-height);
    color: var(--color-primary-700);
    text-align: center;
    width: 100%;
    margin-bottom: var(--space-3);
}

.form-newsletter__success-link {
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-default-size);
    line-height: var(--text-default-height);
    color: var(--color-primary-700);
    text-decoration: underline;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity var(--transition-base);
}

.form-newsletter__success-link:hover {
    opacity: 0.8;
}

/* -------------------------------------------------
   COMPONENT STATE CLASSES
   ------------------------------------------------- */

.form-newsletter--hover .form-newsletter__submit {
    background-color: var(--color-primary-500);
}

.form-newsletter--active .form-newsletter__input {
    border-color: var(--color-primary-500);
}

.form-newsletter--active .form-newsletter__submit {
    background-color: var(--color-primary-900);
}

.form-newsletter--disabled .form-newsletter__input {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-300);
}

.form-newsletter--disabled .form-newsletter__submit {
    background-color: var(--color-neutral-400);
    color: var(--color-neutral-200);
}

/* -------------------------------------------------
   HUBSPOT FORM INTEGRATION STYLES
   ------------------------------------------------- */

.form-newsletter__hubspot-container {
    width: 100%;
}

.form-newsletter__hubspot-container--hidden {
    display: none;
}

/* Override HubSpot form styles when it loads */
.form-newsletter__hubspot-container .hs-form {
    width: 100%;
}

.form-newsletter__hubspot-container .hs-form-field {
    margin-bottom: var(--space-2);
}

.form-newsletter__hubspot-container .hs-form-field label {
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-black) !important;
    font-size: var(--text-default-size) !important;
    line-height: var(--text-form-height) !important;
    color: var(--color-neutral-600) !important;
    display: block !important;
    margin-bottom: var(--space-2) !important;
}

.form-newsletter__hubspot-container .hs-form-field input[type="email"],
.form-newsletter__hubspot-container .hs-form-field input[type="text"] {
    width: 100% !important;
    padding: var(--space-1) var(--space-2) !important;
    background-color: var(--color-white) !important;
    border: 1px solid var(--color-neutral-300) !important;
    border-radius: var(--radius-small) !important;
    font-family: var(--font-secondary) !important;
    font-size: var(--text-default-size) !important;
    line-height: var(--text-form-height) !important;
    color: var(--color-neutral-600) !important;
    min-height: 27px !important;
    outline: none !important;
}

.form-newsletter__hubspot-container .hs-form-field input[type="email"]:hover,
.form-newsletter__hubspot-container .hs-form-field input[type="text"]:hover {
    border-color: var(--color-primary-500) !important;
}

.form-newsletter__hubspot-container .hs-form-field input[type="email"]:focus,
.form-newsletter__hubspot-container .hs-form-field input[type="text"]:focus {
    border-color: var(--color-primary-500) !important;
}

.form-newsletter__hubspot-container .hs-form-field .hs-error-msg {
    font-family: var(--font-secondary) !important;
    font-style: italic !important;
    font-size: var(--text-helper-size) !important;
    line-height: var(--text-helper-height) !important;
    color: var(--color-neutral-600) !important;
    margin-top: var(--space-1) !important;
}

.form-newsletter__hubspot-container .hs-submit {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding-top: var(--space-5) !important;
    padding-bottom: var(--space-8) !important;
}

.form-newsletter__hubspot-container .hs-submit input {
    padding: var(--space-4) var(--space-20) !important;
    background-color: var(--color-primary-700) !important;
    border: none !important;
    border-radius: var(--radius-small) !important;
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-bold) !important;
    font-size: var(--text-default-size) !important;
    line-height: var(--text-form-height) !important;
    color: var(--color-white) !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background-color var(--transition-base) !important;
    white-space: nowrap !important;
}

.form-newsletter__hubspot-container .hs-submit input:hover {
    background-color: var(--color-primary-500) !important;
}

.form-newsletter__hubspot-container .hs-submit input:active {
    background-color: var(--color-primary-900) !important;
}

/* -------------------------------------------------
   RESPONSIVE BREAKPOINTS
   ------------------------------------------------- */

/* Mobile: 380-767px */
@media (max-width: 767px) {
    .form-newsletter--mobile {
        width: 100%;
        max-width: 320px;
    }
}

/* =================================================
   END OF FORM NEWSLETTER COMPONENT
   ================================================= */
/* =================================================
   FORM RESOURCE COMPONENT - MOLECULE
   Component: form-resource.html
   Purpose: Resource download form with email capture and HubSpot integration
   States: Default, Hover, Active, Error, Disabled, Success
   Responsive: Mobile (380-767px), Tablet (768-1149px), Desktop (1150-1919px), DesktopPlus (1920px+)
   Version: 1.0 - Fully Tokenized
   Date: 2025-10-29
   ================================================= */

/* -------------------------------------------------
   FORM RESOURCE CONTAINER
   ------------------------------------------------- */

.form-resource {
    background-color: var(--color-neutral-100);
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-subtle);
    padding: var(--space-6) 27px var(--space-8);
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    transition: all var(--transition-slow);
}

/* -------------------------------------------------
   SIZE VARIANTS
   ------------------------------------------------- */

.form-resource--size-large {
    max-width: 600px;
}

.form-resource--size-medium {
    max-width: 500px;
}

.form-resource--size-small {
    max-width: 400px;
}

.form-resource--size-mobile {
    max-width: 320px;
    padding: var(--space-6) 27px var(--space-8);
}

/* -------------------------------------------------
   FORM STATES
   ------------------------------------------------- */

.form-resource--state-hover {
    transform: translateY(-2px);
    box-shadow: 6px 6px 16px 0px rgba(0, 0, 0, 0.15);
}

.form-resource--state-disabled {
    opacity: 0.8;
    pointer-events: none;
}

/* -------------------------------------------------
   TYPOGRAPHY - TITLE
   ------------------------------------------------- */

.form-resource__title {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-height);
    color: var(--color-primary-700);
    text-transform: uppercase;
}

/* -------------------------------------------------
   TYPOGRAPHY - DESCRIPTION
   ------------------------------------------------- */

.form-resource__description {
    font-family: var(--font-secondary);
    font-size: var(--text-default-size);
    line-height: var(--text-default-height);
    color: var(--color-neutral-600);
}

/* -------------------------------------------------
   TYPOGRAPHY - LIST
   ------------------------------------------------- */

.form-resource__list {
    font-family: var(--font-secondary);
    font-size: var(--text-default-size);
    line-height: var(--text-default-height);
    color: var(--color-neutral-600);
    padding-left: 27px;
    list-style-type: disc;
}

.form-resource__list li {
    margin-bottom: 0;
}

/* -------------------------------------------------
   FORM ITEM
   ------------------------------------------------- */

.form-resource__form-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    width: 100%;
    max-width: 356px;
}

.form-resource__label {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    font-size: var(--text-default-size);
    line-height: var(--text-form-height);
    color: var(--color-neutral-600);
}

.form-resource__input {
    font-family: var(--font-secondary);
    font-size: var(--text-default-size);
    line-height: var(--text-form-height);
    color: var(--color-neutral-600);
    padding: var(--space-1) var(--space-2);
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-small);
    width: 100%;
    transition: border-color var(--transition-slow);
    outline: none;
}

.form-resource__input::placeholder {
    color: var(--color-neutral-300);
    font-weight: var(--font-weight-light);
    font-style: italic;
}

.form-resource__input:hover {
    border-color: var(--color-neutral-400);
}

.form-resource__input:focus {
    border-color: var(--color-primary-500);
}

.form-resource__input:disabled {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-300);
    cursor: not-allowed;
}

.form-resource__form-item--error .form-resource__input {
    background-color: var(--color-error-50);
    border-color: var(--color-error-500);
    color: var(--color-error-500);
}

.form-resource__helper {
    font-family: var(--font-secondary);
    font-style: italic;
    font-size: var(--text-helper-size);
    line-height: var(--text-helper-height);
    color: var(--color-neutral-600);
}

/* -------------------------------------------------
   SUBMIT SECTION
   ------------------------------------------------- */

.form-resource__submit {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: center;
    padding-top: var(--space-5);
    padding-bottom: var(--space-8);
}

/* -------------------------------------------------
   BUTTON STYLES
   ------------------------------------------------- */

.form-resource__button {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-default-size);
    line-height: var(--text-form-height);
    text-transform: uppercase;
    text-align: center;
    padding: var(--space-4) var(--space-20);
    border-radius: var(--radius-small);
    border: none;
    cursor: pointer;
    transition: all var(--transition-slow);
    white-space: nowrap;
}

.form-resource__button--primary {
    background-color: var(--color-primary-700);
    color: var(--color-white);
}

.form-resource__button--primary:hover {
    background-color: var(--color-primary-500);
}

.form-resource__button--primary:active {
    background-color: var(--color-primary-900);
}

.form-resource__button--primary:disabled {
    background-color: var(--color-neutral-400);
    color: var(--color-neutral-200);
    cursor: not-allowed;
}

.form-resource__button--outline {
    background-color: transparent;
    color: var(--color-neutral-200);
    border: 2px solid var(--color-neutral-400);
}

/* -------------------------------------------------
   SUCCESS STATE
   ------------------------------------------------- */

.form-resource--state-success .form-resource__content {
    display: none;
}

.form-resource__success {
    display: none;
    flex-direction: column;
    gap: var(--space-5);
    align-items: center;
    text-align: center;
}

.form-resource--state-success .form-resource__success {
    display: flex;
}

.form-resource__success-title {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-height);
    color: var(--color-primary-700);
    text-transform: uppercase;
}

.form-resource__success-message {
    font-family: var(--font-secondary);
    font-size: var(--text-default-size);
    line-height: var(--text-default-height);
    color: var(--color-neutral-600);
}

.form-resource__download-link {
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-default-size);
    line-height: var(--text-default-height);
    color: var(--color-primary-700);
    text-decoration: underline;
    cursor: pointer;
    transition: color var(--transition-slow);
}

.form-resource__download-link:hover {
    color: var(--color-primary-500);
}

.form-resource__bonus-text {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    font-size: var(--text-default-size);
    line-height: var(--text-form-height);
    color: var(--color-primary-700);
    text-align: center;
    padding: 0 var(--space-16);
}

/* -------------------------------------------------
   RESPONSIVE BREAKPOINTS
   ------------------------------------------------- */

/* Mobile: 380-767px */
@media (max-width: 767px) {
    .form-resource--size-mobile .form-resource__button {
        padding: var(--space-2) var(--space-16);
    }
}

/* =================================================
   END OF FORM RESOURCE COMPONENT
   ================================================= */
/* ================================================
   MOLECULES - FORM COMPONENTS
   Version: 1.1
   Updated: 2025-09-23
   
   Complete Form Component System
   
   FIXES APPLIED:
   - Import already exists (no fix needed)
   - Fixed variable names: neutrals- → color-neutral-
   - Fixed other variable references for consistency
   ================================================ */

/* Import design tokens */

/* Form Input Field Component
   ------------------------------------------------ */
.form-input-field {
    --input-padding-y: 4px;
    --input-padding-x: 8px;
    --input-border-radius: 4px;
    --input-border-width: 1px;
    --input-font-size: 18px;
    --input-line-height: 18px;
    
    position: relative;
    width: 100%;
    min-height: 28px; /* Based on padding + line-height */
}

.form-input-field__input {
    width: 100%;
    padding: var(--input-padding-y) var(--input-padding-x);
    border: var(--input-border-width) solid var(--color-neutral-300, #A2A9AF);
    border-radius: var(--input-border-radius);
    background: var(--color-white, #FFFFFF);
    font-family: var(--font-secondary);
    font-size: var(--input-font-size);
    line-height: var(--input-line-height);
    font-weight: 400;
    color: var(--color-neutral-600, #51585E);
    transition: all 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

/* State: Unfilled (placeholder) */
.form-input-field__input::placeholder {
    color: var(--color-neutral-300, #A2A9AF);
    font-weight: 300;
    font-style: italic;
    opacity: 1;
}

/* State: Focus */
.form-input-field__input:focus {
    border-color: var(--color-primary-500, #1D50DE);
    box-shadow: 0 0 0 2px rgba(29, 80, 222, 0.1);
}

/* State: Disabled */
.form-input-field__input:disabled {
    background-color: var(--color-neutral-100, #ECEEEF);
    color: var(--color-neutral-300, #A2A9AF);
    cursor: not-allowed;
}

/* State: Error */
.form-input-field--error .form-input-field__input {
    border-color: var(--color-error-500, #EF4444);
    background-color: var(--color-error-50, #FEF2F2);
    color: var(--color-error-500, #EF4444);
}

.form-input-field--error .form-input-field__input:focus {
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
}

/* Error message */
.form-input-field__error-message {
    display: none;
    color: var(--color-error-500, #EF4444);
    font-size: 14px;
    line-height: 20px;
    margin-top: 4px;
}

.form-input-field--error .form-input-field__error-message {
    display: block;
}

/* ================================================
   Form/Item Component
   Updated: 2025-09-23
   ================================================ */

/* Form Item Component */
.form-item {
    --item-gap: 8px;
    --item-padding-y: 4px;
    
    display: flex;
    flex-direction: column;
    gap: var(--item-gap);
    padding: var(--item-padding-y) 0;
    width: 100%;
    position: relative;
}

.form-item__label {
    font-family: var(--font-primary, 'Lato', sans-serif);
    font-weight: 900;
    font-size: 18px;
    line-height: 18px;
    color: var(--color-neutral-600, #51585E);
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-item__helper {
    font-family: var(--font-secondary, 'Open Sans', sans-serif);
    font-style: italic;
    font-size: 12px;
    line-height: 12px;
    color: var(--color-neutral-600, #51585E);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* State: Required */
.form-item--required .form-item__label::after {
    content: '*';
    color: var(--color-error-500, #EF4444);
}

/* State: Error */
.form-item--error .form-input-field__input {
    background-color: var(--color-error-50, #FEF2F2);
    border-color: var(--color-error-500, #EF4444);
    color: var(--color-error-500, #EF4444);
}

/* ================================================
   Form/Newsletter Component
   Updated: 2025-09-23
   ================================================ */

/* Newsletter Form Component */
.form-newsletter {
    --newsletter-bg: var(--color-neutral-100, #ECEEEF);
    --newsletter-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.1);
    --newsletter-padding: 32px;
    --newsletter-gap: 20px;
    --newsletter-border-radius: 4px;
    
    background-color: var(--newsletter-bg);
    border-radius: var(--newsletter-border-radius);
    box-shadow: var(--newsletter-shadow);
    padding: var(--newsletter-padding);
    display: flex;
    flex-direction: column;
    gap: var(--newsletter-gap);
    position: relative;
    transition: all 0.3s ease;
}

/* Size Variants */
.form-newsletter--size-large {
    max-width: 600px;
    width: 100%;
}

.form-newsletter--size-medium {
    max-width: 500px;
    width: 100%;
}

.form-newsletter--size-small {
    max-width: 400px;
    width: 100%;
}

.form-newsletter--size-mobile {
    max-width: 320px;
    width: 100%;
}

/* State: Hover */
.form-newsletter--state-hover {
    transform: translateY(-2px);
    box-shadow: 6px 6px 16px 0px rgba(0, 0, 0, 0.15);
}

/* State: Active */
.form-newsletter--state-active .form-newsletter__submit .btn {
    background-color: var(--color-primary-900, #06102B);
}

/* State: Disabled */
.form-newsletter--state-disabled {
    opacity: 0.8;
    pointer-events: none;
}

/* State: Error */
.form-newsletter--state-error .form-newsletter__submit .btn {
    background-color: transparent;
    color: var(--color-neutral-200, #C7CBCF);
    border: 2px solid var(--color-neutral-400, #868F97);
}

/* Typography Elements */
.form-newsletter__title {
    font-family: var(--font-primary, 'Lato', sans-serif);
    font-weight: 900;
    font-size: 24px;
    line-height: 36px;
    color: var(--color-primary-700, #1B1464);
    text-transform: uppercase;
}

.form-newsletter__description {
    font-family: var(--font-secondary, 'Open Sans', sans-serif);
    font-size: 18px;
    line-height: 27px;
    color: var(--color-neutral-600, #51585E);
    font-weight: 400;
}

/* Form Layout */
.form-newsletter__form {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    width: 100%;
}

.form-newsletter__input-wrapper {
    flex: 1;
    min-width: 0;
}

.form-newsletter__submit {
    flex-shrink: 0;
}

/* Success State */
.form-newsletter--state-success .form-newsletter__content {
    display: none;
}

.form-newsletter__success {
    display: none;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
}

.form-newsletter--state-success .form-newsletter__success {
    display: flex;
}

.form-newsletter__success-title {
    font-family: var(--font-primary, 'Lato', sans-serif);
    font-weight: 900;
    font-size: 24px;
    line-height: 36px;
    color: var(--color-primary-700, #1B1464);
    text-transform: uppercase;
}

.form-newsletter__success-message {
    font-family: var(--font-secondary, 'Open Sans', sans-serif);
    font-size: 18px;
    line-height: 27px;
    color: var(--color-neutral-600, #51585E);
}

/* Responsive: Mobile Size */
@media (max-width: 380px) {
    .form-newsletter--size-mobile .form-newsletter__form {
        flex-direction: column;
        gap: 12px;
    }
    
    .form-newsletter--size-mobile .form-newsletter__submit {
        width: 100%;
    }
    
    .form-newsletter--size-mobile .form-newsletter__submit .btn {
        width: 100%;
        padding: 8px 64px;
    }
}

/* ================================================
   Form/Resource Component
   Updated: 2025-09-23
   ================================================ */

/* Resource Form Component */
.form-resource {
    --resource-bg: var(--color-neutral-100, #ECEEEF);
    --resource-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.1);
    --resource-padding-x: 27px;
    --resource-padding-top: 24px;
    --resource-padding-bottom: 32px;
    --resource-gap: 20px;
    --resource-border-radius: 4px;
    
    background-color: var(--resource-bg);
    border-radius: var(--resource-border-radius);
    box-shadow: var(--resource-shadow);
    padding: var(--resource-padding-top) var(--resource-padding-x) var(--resource-padding-bottom);
    display: flex;
    flex-direction: column;
    gap: var(--resource-gap);
    position: relative;
    transition: all 0.3s ease;
}

/* Size Variants */
.form-resource--size-large {
    max-width: 600px;
    width: 100%;
}

.form-resource--size-medium {
    max-width: 500px;
    width: 100%;
}

.form-resource--size-small {
    max-width: 400px;
    width: 100%;
}

.form-resource--size-mobile {
    max-width: 320px;
    width: 100%;
}

/* State: Hover */
.form-resource--state-hover {
    transform: translateY(-2px);
    box-shadow: 6px 6px 16px 0px rgba(0, 0, 0, 0.15);
}

/* State: Active */
.form-resource--state-active .form-resource__submit .btn {
    background-color: var(--color-primary-900, #06102B);
}

/* State: Disabled */
.form-resource--state-disabled {
    opacity: 0.8;
    pointer-events: none;
}

/* State: Error */
.form-resource--state-error .form-resource__submit .btn {
    background-color: transparent;
    color: var(--color-neutral-200, #C7CBCF);
    border: 2px solid var(--color-neutral-400, #868F97);
}

/* Typography Elements */
.form-resource__title {
    font-family: var(--font-primary, 'Lato', sans-serif);
    font-weight: 900;
    font-size: 24px;
    line-height: 36px;
    color: var(--color-primary-700, #1B1464);
    text-transform: uppercase;
}

.form-resource__description {
    font-family: var(--font-secondary, 'Open Sans', sans-serif);
    font-size: 18px;
    line-height: 27px;
    color: var(--color-neutral-600, #51585E);
    font-weight: 400;
}

.form-resource__list {
    font-family: var(--font-secondary, 'Open Sans', sans-serif);
    font-size: 18px;
    line-height: 27px;
    color: var(--color-neutral-600, #51585E);
    padding-left: 27px;
    list-style-type: disc;
    margin: 0;
}

.form-resource__list li {
    margin-bottom: 0;
}

/* Form Fields */
.form-resource__form-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
    width: 100%;
    max-width: 356px;
}

.form-resource__label {
    font-family: var(--font-primary, 'Lato', sans-serif);
    font-weight: 900;
    font-size: 18px;
    line-height: 18px;
    color: var(--color-neutral-600, #51585E);
}

.form-resource__helper {
    font-family: var(--font-secondary, 'Open Sans', sans-serif);
    font-style: italic;
    font-size: 12px;
    line-height: 12px;
    color: var(--color-neutral-600, #51585E);
}

/* Submit Section */
.form-resource__submit {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 32px;
}

/* Success State */
.form-resource--state-success .form-resource__content {
    display: none;
}

.form-resource__success {
    display: none;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
}

.form-resource--state-success .form-resource__success {
    display: flex;
}

.form-resource__success-title {
    font-family: var(--font-primary, 'Lato', sans-serif);
    font-weight: 900;
    font-size: 24px;
    line-height: 36px;
    color: var(--color-primary-700, #1B1464);
    text-transform: uppercase;
}

.form-resource__success-message {
    font-family: var(--font-secondary, 'Open Sans', sans-serif);
    font-size: 18px;
    line-height: 27px;
    color: var(--color-neutral-600, #51585E);
}

.form-resource__download-link {
    font-family: var(--font-secondary, 'Open Sans', sans-serif);
    font-weight: 600;
    font-size: 18px;
    line-height: 27px;
    color: var(--color-primary-700, #1B1464);
    text-decoration: underline;
    text-underline-position: from-font;
    cursor: pointer;
    transition: color 0.3s ease;
}

.form-resource__download-link:hover {
    color: var(--color-primary-500, #1D50DE);
}

.form-resource__bonus-text {
    font-family: var(--font-primary, 'Lato', sans-serif);
    font-weight: 900;
    font-size: 18px;
    line-height: 18px;
    color: var(--color-primary-700, #1B1464);
    text-align: center;
    padding: 0 64px;
}

/* Responsive: Mobile Size */
@media (max-width: 380px) {
    .form-resource--size-mobile .form-resource__submit .btn {
        padding: 8px 64px;
    }
}

/* ================================================
   Form/Contact Component
   Version: 1.0
   Created: 2025-09-23
   
   Contact Form with all required fields
   ================================================ */

/* Contact Form Component */
.form-contact {
    --contact-bg: var(--color-neutral-100, #ECEEEF);
    --contact-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.1);
    --contact-padding-x: 32px;
    --contact-padding-y: 32px;
    --contact-gap: 24px;
    --contact-border-radius: 4px;
    
    background-color: var(--contact-bg);
    border-radius: var(--contact-border-radius);
    box-shadow: var(--contact-shadow);
    padding: var(--contact-padding-y) var(--contact-padding-x);
    display: flex;
    flex-direction: column;
    gap: var(--contact-gap);
    position: relative;
    transition: all 0.3s ease;
}

/* Size Variants */
.form-contact--size-large {
    max-width: 700px;
    width: 100%;
}

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

.form-contact--size-small {
    max-width: 500px;
    width: 100%;
}

/* State: Hover */
.form-contact--state-hover {
    transform: translateY(-2px);
    box-shadow: 6px 6px 16px 0px rgba(0, 0, 0, 0.15);
}

/* Typography Elements */
.form-contact__title {
    font-family: var(--font-primary, 'Lato', sans-serif);
    font-weight: 900;
    font-size: 24px;
    line-height: 36px;
    color: var(--color-primary-700, #1B1464);
    text-transform: uppercase;
}

.form-contact__description {
    font-family: var(--font-secondary, 'Open Sans', sans-serif);
    font-size: 18px;
    line-height: 27px;
    color: var(--color-neutral-600, #51585E);
    font-weight: 400;
}

/* Form Grid Layout */
.form-contact__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-contact__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-contact__field--full {
    grid-column: 1 / -1;
}

/* Message Field */
.form-contact__message {
    min-height: 120px;
    resize: vertical;
}

/* Submit Section */
.form-contact__submit {
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

/* Success State */
.form-contact--state-success .form-contact__content {
    display: none;
}

.form-contact__success {
    display: none;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
    padding: 32px;
}

.form-contact--state-success .form-contact__success {
    display: flex;
}

.form-contact__success-title {
    font-family: var(--font-primary, 'Lato', sans-serif);
    font-weight: 900;
    font-size: 24px;
    line-height: 36px;
    color: var(--color-primary-700, #1B1464);
    text-transform: uppercase;
}

.form-contact__success-message {
    font-family: var(--font-secondary, 'Open Sans', sans-serif);
    font-size: 18px;
    line-height: 27px;
    color: var(--color-neutral-600, #51585E);
}

/* Responsive: Tablet and Mobile */
@media (max-width: 768px) {
    .form-contact__fields {
        grid-template-columns: 1fr;
    }
    
    .form-contact {
        --contact-padding-x: 24px;
        --contact-padding-y: 24px;
    }
}

@media (max-width: 480px) {
    .form-contact {
        --contact-padding-x: 16px;
        --contact-padding-y: 20px;
        --contact-gap: 20px;
    }
    
    .form-contact__submit .btn {
        width: 100%;
    }
}/* ====================================
   RETURN BUTTON MOLECULE STYLES
   Component: Molecule/Button/Return-To-Top
   Version: 1.0 (Tokenized)
   Last Updated: 2025-10-28

   Description: Floating return-to-top button with icon
   Dependencies: variables-v4.0-20251027.css, molecules-ui-icon-display.css

   Features:
   - Fixed position bottom-right
   - Scroll-triggered visibility
   - Icon hover color change (gray → navy)
   - Smooth scroll animation

   Usage:
   <button class="return-button" id="returnButton" aria-label="Return to top">
       <div class="ui-icon-display ui-icon-display--large"
            data-icon="arrow-up"
            data-color="gray"
            data-direction="up"></div>
   </button>
   ==================================== */

/* ====================================
   RETURN BUTTON - FLOATING COMPONENT
   ==================================== */
.return-button {
    position: fixed;
    bottom: var(--space-8);
    right: var(--space-8);
    width: var(--icon-size-large);
    height: var(--icon-size-large);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: var(--radius-medium);
    cursor: pointer;
    box-shadow: var(--shadow-standard);
    transition: all var(--transition-slow);
    opacity: 0;
    visibility: hidden;
    z-index: var(--z-fixed);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Visible State (toggled by JavaScript) */
.return-button.visible {
    opacity: 1;
    visibility: visible;
}

/* Hover State */
.return-button:hover {
    box-shadow: var(--shadow-medium);
    transform: translateY(-2px);
}

/* Active State */
.return-button:active {
    transform: translateY(0);
}

/* Icon Hover Effect - Gray to Navy */
.return-button: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 STYLES (Remove in production)
   ==================================== */

/* Demo Container */
.demo-container {
    max-width: 800px;
    margin: 0 auto;
}

/* Demo Section */
.demo-section {
    margin: var(--space-12) 0;
    padding: var(--space-8);
    background: var(--bg-secondary);
    border-radius: var(--radius-medium);
}

/* Demo Headings */
.demo-container h1 {
    margin-bottom: var(--space-4);
    color: var(--color-primary-700);
}

.demo-container h2 {
    margin-bottom: var(--space-4);
    color: var(--color-neutral-700);
}

.demo-container h3 {
    margin-bottom: var(--space-3);
    color: var(--color-neutral-600);
}

/* Demo Paragraphs */
.demo-container p {
    margin-bottom: var(--space-4);
}

/* Demo Lists */
.demo-container ul {
    margin-left: var(--space-6);
    margin-bottom: var(--space-4);
}

.demo-container ul li {
    margin-bottom: var(--space-2);
    line-height: var(--text-default-height);
}

/* Demo Buttons Container */
.demo-buttons {
    display: flex;
    gap: var(--space-8);
    align-items: center;
    flex-wrap: wrap;
}

/* Static Demo Button */
.demo-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-large);
    height: var(--icon-size-large);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-standard);
}

/* Hover State Demo - Navy color */
.demo-button--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%);
}

/* Button Wrapper */
.button-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* State Label */
.state-label {
    font-size: var(--text-small-size);
    color: var(--text-muted);
    margin-top: var(--space-2);
    text-align: center;
}

/* Scroll Indicator */
.scroll-indicator {
    text-align: center;
    padding: var(--space-8);
    margin-top: var(--space-12);
    background: var(--color-primary-50);
    border-radius: var(--radius-medium);
}

.scroll-indicator p {
    margin-bottom: 0;
    font-weight: var(--font-weight-medium);
    color: var(--color-primary-500);
}

/* Demo Code Block */
.demo-container pre {
    background: var(--bg-secondary);
    padding: var(--space-4);
    border-radius: var(--radius-small);
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.5;
}

/* ====================================
   BASE DEMO PAGE STYLES
   ==================================== */

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

/* Body */
body {
    font-family: var(--font-content);
    line-height: 1.6;
    padding: var(--space-8);
    min-height: 200vh; /* Make page tall enough to scroll */
}

/* ====================================
   RESPONSIVE ADJUSTMENTS
   ==================================== */

/* Tablet (768px - 1149px) */
@media (min-width: 768px) and (max-width: 1149px) {
    .return-button {
        bottom: var(--space-6);
        right: var(--space-6);
    }
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
    body {
        padding: var(--space-4);
    }

    .return-button {
        bottom: var(--space-4);
        right: var(--space-4);
    }

    .demo-section {
        padding: var(--space-4);
    }

    .demo-buttons {
        gap: var(--space-4);
    }
}
/* =================================================
   STICKY MENU COMPONENT - MOLECULE
   Component: sticky-menu.html
   Purpose: In-page navigation menu that sticks to top of viewport
   States: Default, Active, Hover, Open (mobile)
   Responsive: Mobile (380-767px), Tablet/Desktop (768px+)
   Version: 1.0 - Fully Tokenized
   Date: 2025-10-29
   ================================================= */

/* -------------------------------------------------
   BASE STICKY MENU STYLES
   ------------------------------------------------- */

.pm-sticky-menu {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    left: 0;
    right: 0;
    background: var(--color-neutral-100);
    border-bottom: 1px solid var(--color-accent-500);
    box-shadow: var(--shadow-subtle);
    z-index: 1000;
    transition: transform var(--transition-slow);
}

.pm-sticky-menu.hidden {
    transform: translateY(-100%);
}

/* -------------------------------------------------
   DESKTOP/TABLET MENU (768px+)
   ------------------------------------------------- */

.pm-sticky-menu-desktop {
    display: none;
    padding: var(--space-1) var(--space-2);
}

.pm-sticky-menu-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    gap: 10px;
}

/* -------------------------------------------------
   DESKTOP MENU ITEMS
   ------------------------------------------------- */

.pm-sticky-menu-item {
    color: var(--color-primary-700);
    text-decoration: none;
    text-transform: uppercase;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    font-size: var(--text-default-size);
    line-height: var(--text-default-height);
    padding: var(--space-2) var(--space-4);
    position: relative;
    transition: all var(--transition-slow);
    cursor: pointer;
    white-space: nowrap;
}

.pm-sticky-menu-item:hover {
    opacity: 0.8;
}

.pm-sticky-menu-item.active {
    background: var(--color-accent-100);
    border-radius: var(--radius-medium);
    color: var(--color-accent-500); /* Gold #D4AF37 */
}

/* -------------------------------------------------
   MENU SEPARATOR
   ------------------------------------------------- */

.pm-sticky-menu-separator {
    color: var(--color-primary-700);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    font-size: var(--text-h4-size);
    line-height: 30.5px;
    user-select: none;
}

/* -------------------------------------------------
   GET STARTED BUTTON
   ------------------------------------------------- */

.pm-sticky-menu-start {
    background: var(--color-accent-100);
    border-radius: var(--radius-medium);
    padding: var(--space-2) var(--space-4);
    color: var(--color-primary-700);
    text-decoration: none;
    text-transform: uppercase;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    font-size: var(--text-default-size);
    line-height: var(--text-default-height);
    transition: all var(--transition-slow);
    white-space: nowrap;
}

.pm-sticky-menu-start:hover {
    background: var(--color-accent-600);
    color: var(--color-white);
}

/* -------------------------------------------------
   MOBILE MENU (767px and below)
   ------------------------------------------------- */

.pm-sticky-menu-mobile {
    display: none;
    position: relative;
}

.pm-sticky-menu-mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    min-height: 60px;
}

/* -------------------------------------------------
   MOBILE CURRENT SECTION DISPLAY
   ------------------------------------------------- */

.pm-sticky-menu-mobile-current {
    background: var(--color-accent-100);
    border-radius: var(--radius-medium);
    padding: var(--space-3) var(--space-4);
    color: var(--color-primary-700);
    text-transform: uppercase;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    font-size: var(--text-default-size);
    line-height: var(--text-default-height);
}

/* -------------------------------------------------
   MOBILE TOGGLE BUTTON
   ------------------------------------------------- */

.pm-sticky-menu-mobile-toggle {
    background: var(--color-accent-100);
    border: none;
    border-radius: var(--radius-medium);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-slow);
}

.pm-sticky-menu-mobile-toggle:hover {
    background: var(--color-accent-600);
}

/* -------------------------------------------------
   HAMBURGER ICON
   ------------------------------------------------- */

.pm-sticky-menu-hamburger {
    width: 24px;
    height: 20px;
    position: relative;
}

.pm-sticky-menu-hamburger span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: var(--color-primary-700);
    border-radius: var(--radius-xsmall);
    opacity: 1;
    left: 0;
    transition: 0.25s ease-in-out;
}

.pm-sticky-menu-hamburger span:nth-child(1) {
    top: 0px;
}

.pm-sticky-menu-hamburger span:nth-child(2) {
    top: 8px;
}

.pm-sticky-menu-hamburger span:nth-child(3) {
    top: 16px;
}

/* -------------------------------------------------
   HAMBURGER CLOSE STATE (X)
   ------------------------------------------------- */

.pm-sticky-menu-mobile-toggle.open .pm-sticky-menu-hamburger span:nth-child(1) {
    top: 8px;
    transform: rotate(45deg);
}

.pm-sticky-menu-mobile-toggle.open .pm-sticky-menu-hamburger span:nth-child(2) {
    opacity: 0;
}

.pm-sticky-menu-mobile-toggle.open .pm-sticky-menu-hamburger span:nth-child(3) {
    top: 8px;
    transform: rotate(-45deg);
}

/* -------------------------------------------------
   MOBILE DROPDOWN
   ------------------------------------------------- */

.pm-sticky-menu-dropdown {
    display: none;
    background: var(--color-neutral-100);
    padding: var(--space-4) var(--space-2);
    border-top: 2px solid var(--color-accent-500);
}

.pm-sticky-menu-dropdown.open {
    display: block;
}

.pm-sticky-menu-dropdown-inner {
    padding-left: var(--space-8);
    padding-right: var(--space-16);
}

/* -------------------------------------------------
   MOBILE DROPDOWN ITEMS
   ------------------------------------------------- */

.pm-sticky-menu-dropdown-item {
    display: block;
    padding: var(--space-3) 0;
    color: var(--color-primary-700);
    text-decoration: none;
    text-transform: uppercase;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    font-size: var(--text-default-size);
    line-height: var(--text-default-height);
    transition: all var(--transition-slow);
}

.pm-sticky-menu-dropdown-item:hover {
    padding-left: var(--space-2);
    opacity: 0.8;
}

.pm-sticky-menu-dropdown-item.active {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    background: var(--color-accent-100);
    border-radius: var(--radius-medium);
}

.pm-sticky-menu-dropdown-item.start {
    background: var(--color-accent-100);
    border-radius: var(--radius-medium);
    padding: var(--space-3) var(--space-2);
    color: var(--color-accent-600);
    font-size: var(--text-default-size);
    line-height: var(--text-default-height);
}

.pm-sticky-menu-dropdown-item.start:hover {
    background: var(--color-accent-600);
    color: var(--color-white);
}

/* -------------------------------------------------
   RESPONSIVE BREAKPOINTS
   ------------------------------------------------- */

/* Tablet/Desktop: 768px+ */
@media screen and (min-width: 768px) {
    .pm-sticky-menu-desktop {
        display: block;
    }

    .pm-sticky-menu-mobile {
        display: none;
    }
}

/* Mobile: 767px and below */
@media screen and (max-width: 767px) {
    .pm-sticky-menu-desktop {
        display: none;
    }

    .pm-sticky-menu-mobile {
        display: block;
    }

    .pm-sticky-menu-dropdown-inner {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}

/* Mobile Small: 380px and below */
@media screen and (max-width: 380px) {
    .pm-sticky-menu-mobile-bar {
        padding: var(--space-2);
    }

    .pm-sticky-menu-mobile-current {
        font-size: var(--text-small-size);
        padding: 10px var(--space-3);
    }
}

/* DesktopPlus: 1920px+ */
@media screen and (min-width: 1920px) {
    .pm-sticky-menu-inner {
        padding: 0 var(--space-5);
    }
}

/* =================================================
   END OF STICKY MENU COMPONENT
   ================================================= */
/*
 * MOLECULES - DROPDOWN MENUS
 * Purposeful Media Design System
 * Dropdown Menu Components for Headers
 * 
 * Dependencies:
 * - variables-v2.0-20250915.css (color variables)
 * - atoms-master.css (typography)
 */


/* ============================================
   HEADER DROPDOWN MENU COMPONENT
   ============================================ */

.header-dropdown-menu {
    background-color: var(--color-white, #FFFFFF);
    border-radius: 4px;
    padding: 0;
    min-width: 250px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.header-dropdown-menu__list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.header-dropdown-menu__item {
    margin: 0;
}

.header-dropdown-menu__link {
    display: block;
    padding: 12px 24px;
    color: var(--color-neutral-800, #2D3748);
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
}

/* Hover state */
.header-dropdown-menu__link:hover {
    background-color: var(--color-neutral-50, #F7FAFC);
    color: var(--color-primary, #1B1464);
}

/* Active/Current page state */
.header-dropdown-menu__link--active {
    color: var(--color-primary, #1B1464);
    font-weight: 700;
}

.header-dropdown-menu__link--active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--color-secondary, #D4AF37);
}

/* Separator */
.header-dropdown-menu__separator {
    height: 1px;
    background-color: var(--color-neutral-200, #E2E8F0);
    margin: 8px 0;
}

/* Submenu styles */
.header-dropdown-menu__item--has-submenu {
    position: relative;
}

.header-dropdown-menu__submenu-toggle {
    position: absolute;
    right: 24px;
    top: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.header-dropdown-menu__submenu-icon {
    width: 12px;
    height: 12px;
    background-image: url('../assets/svg/ui-icons/purposeful-sprite-ui.svg');
    background-position: -256px 0; /* Arrow icon */
    background-size: 1536px 512px;
    transform: rotate(90deg); /* Point right */
    transition: transform 0.2s ease;
}

.header-dropdown-menu__item--expanded .header-dropdown-menu__submenu-icon {
    transform: rotate(180deg); /* Point down */
}

/* Submenu list */
.header-dropdown-menu__submenu {
    display: none;
    background-color: var(--color-neutral-50, #F7FAFC);
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-dropdown-menu__item--expanded .header-dropdown-menu__submenu {
    display: block;
}

.header-dropdown-menu__submenu .header-dropdown-menu__link {
    padding-left: 48px;
    font-size: 14px;
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */

/* Mobile specific styles */
@media (max-width: 767px) {
    .header-dropdown-menu {
        border-radius: 0;
        width: 100%;
        min-width: 100%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .header-dropdown-menu__link {
        padding: 16px 20px;
        font-size: 18px;
    }
    
    .header-dropdown-menu__submenu .header-dropdown-menu__link {
        padding-left: 40px;
        font-size: 16px;
    }
    
    .header-dropdown-menu__submenu-toggle {
        right: 20px;
        top: 16px;
    }
}

/* Tablet specific styles */
@media (min-width: 768px) and (max-width: 1149px) {
    .header-dropdown-menu {
        width: 250px;
    }
}

/* ============================================
   ANIMATION CLASSES
   ============================================ */

/* Slide down animation */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header-dropdown-menu--animated {
    animation: slideDown 0.3s ease;
}

/* Accordion animation for mobile */
@keyframes accordionOpen {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: 500px;
        opacity: 1;
    }
}

.header-dropdown-menu__submenu--animated {
    overflow: hidden;
    animation: accordionOpen 0.3s ease;
}/* ============================================
   Molecules: Slide Components Styles
   Version: 1.1
   Date: September 23, 2025
   
   Components:
   - Slide/Image
   - Slide/Video
   - Slide/Hero
   
   FIXES APPLIED:
   - Added import for variables file
   - Fixed neutral variable names (removed 's')
   ============================================ */

/* Import design tokens */

/* ============================================
   BASE SLIDE STYLES
   ============================================ */

.slide-container {
    position: relative;
    width: 100%;
    background: var(--color-white, #ffffff);
    border-radius: 8px;
    overflow: hidden;
}

.slide-frame {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
}

/* ============================================
   ASPECT RATIOS
   ============================================ */

.aspect-16-9 { 
    aspect-ratio: 16/9; 
}

.aspect-4-3 { 
    aspect-ratio: 4/3; 
}

.aspect-1-1 { 
    aspect-ratio: 1/1; 
}

.aspect-flex { 
    min-height: 156px;
    height: auto;
}

/* ============================================
   SLIDE STATES
   ============================================ */

/* Loading State */
.slide-frame[data-state="loading"] {
    background-color: var(--color-neutral-200, #C7CBCF);
    background: linear-gradient(
        90deg,
        var(--color-neutral-200, #C7CBCF) 25%,
        var(--color-neutral-100, #ECEEEF) 50%,
        var(--color-neutral-200, #C7CBCF) 75%
    );
    background-size: 2000px 100%;
    animation: shimmer 2s infinite;
}

/* Ready State */
.slide-frame[data-state="ready"] {
    background-color: transparent;
}

/* Error State */
.slide-frame[data-state="error"] {
    background-color: var(--color-error-100, #FEE2E2);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Focus State */
.slide-frame[data-state="focus"] {
    background-color: transparent;
    box-shadow: 0 0 0 3px var(--color-primary-500, #1D50DE);
    outline: none;
}

/* ============================================
   OVERLAYS
   ============================================ */

/* Caption Overlay for Image Slides */
.caption-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: linear-gradient(
        to bottom, 
        rgba(255, 255, 255, 0) 0%, 
        var(--color-primary-700, #1B1464) 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.slide-image-container:hover .caption-overlay,
.slide-image-container[data-show-caption="true"] .caption-overlay,
.slide-image-container:focus-within .caption-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* Video Overlay */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(27, 20, 100, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    transition: background-color 0.3s ease;
}

.slide-video-container:hover .video-overlay {
    background: rgba(27, 20, 100, 0.4);
}

/* Hero Overlay */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(27, 20, 100, 0.2) 0%,
        rgba(255, 255, 255, 0.2) 100%
    );
    pointer-events: none;
}

/* ============================================
   CAPTION CONTENT
   ============================================ */

.slide-headline {
    font-family: var(--font-primary, 'Lato'), sans-serif;
    font-weight: 900;
    font-size: 21px;
    line-height: 30.5px;
    color: var(--color-white, #ffffff);
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin: 0;
}

.slide-paragraph {
    font-family: var(--font-secondary, 'Open Sans'), sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    color: var(--color-white, #ffffff);
    text-align: center;
    max-width: 100%;
    margin: 0;
}

/* ============================================
   CONTROL BUTTONS
   ============================================ */

/* Play/Pause Button */
.play-pause-button {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.play-pause-button:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: scale(1.05);
}

.play-pause-button:active {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(0.98);
}

.play-pause-button.solid {
    background: var(--color-white, #ffffff);
}

.play-pause-button.small {
    width: 48px;
    height: 48px;
    padding: 8px;
}

/* Navigation Arrows */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}

.nav-arrow:hover {
    background: var(--color-white, #ffffff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.nav-arrow.prev {
    left: 16px;
}

.nav-arrow.next {
    right: 16px;
}

.nav-arrow.outside {
    background: var(--color-primary-700, #1B1464);
    color: var(--color-white, #ffffff);
}

.nav-arrow.outside:hover {
    background: var(--color-primary-600, #1740B0);
}

/* Navigation Dots */
.nav-dots {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.nav-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-neutral-300, #A2A9AF);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nav-dot:hover {
    background: var(--color-neutral-400, #868F97);
    transform: scale(1.2);
}

.nav-dot.active {
    background: var(--color-primary-700, #1B1464);
    transform: scale(1.2);
}

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

@keyframes shimmer {
    0% { 
        background-position: -1000px 0; 
    }
    100% { 
        background-position: 1000px 0; 
    }
}

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

@keyframes slideIn {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Mobile: 380-767px */
@media (max-width: 767px) {
    .slide-headline {
        font-size: 18px;
        line-height: 26px;
    }
    
    .slide-paragraph {
        font-size: 16px;
        line-height: 24px;
    }
    
    .caption-overlay,
    .video-overlay {
        padding: 12px;
    }
    
    .play-pause-button {
        width: 48px;
        height: 48px;
    }
    
    .nav-arrow {
        width: 40px;
        height: 40px;
    }
    
    .nav-arrow.prev {
        left: 8px;
    }
    
    .nav-arrow.next {
        right: 8px;
    }
    
    .nav-dot {
        width: 10px;
        height: 10px;
    }
}

/* Tablet: 768-1149px */
@media (min-width: 768px) and (max-width: 1149px) {
    .slide-headline {
        font-size: 19px;
        line-height: 28px;
    }
    
    .slide-paragraph {
        font-size: 17px;
        line-height: 25.5px;
    }
    
    .caption-overlay,
    .video-overlay {
        padding: 14px;
    }
}

/* Desktop: 1150-1919px */
@media (min-width: 1150px) and (max-width: 1919px) {
    /* Default sizes apply */
}

/* DesktopPlus: 1920px+ */
@media (min-width: 1920px) {
    /* Default sizes apply */
    
    /* Larger containers may need adjusted spacing */
    .nav-arrow.prev {
        left: 24px;
    }
    
    .nav-arrow.next {
        right: 24px;
    }
}

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

/* Focus visible states */
.slide-container:focus-visible,
.play-pause-button:focus-visible,
.nav-arrow:focus-visible,
.nav-dot:focus-visible {
    outline: 2px solid var(--color-primary-500, #1D50DE);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .slide-frame,
    .caption-overlay,
    .video-overlay,
    .play-pause-button,
    .nav-arrow,
    .nav-dot {
        transition: none;
    }
    
    .slide-frame[data-state="loading"] {
        animation: none;
        background: var(--color-neutral-200, #C7CBCF);
    }
}

/* High contrast mode */
@media (prefers-contrast: more) {
    .caption-overlay {
        background: linear-gradient(
            to bottom,
            transparent 0%,
            var(--color-primary-900, #06102B) 100%
        );
    }
    
    .play-pause-button,
    .nav-arrow {
        border: 2px solid currentColor;
    }
}

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

.slide-hidden {
    display: none !important;
}

.slide-visible {
    display: block !important;
}

.slide-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.slide-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    max-width: none;
    border-radius: 0;
}