/* ==========================================================================
   Purposeful Media MVW2 - Design System Variables

   Source: Figma Design System v3 (exported via AutoHTML)
   Created: January 13, 2026

   Naming Convention:
   --[category]-[property]-[variant]

   Categories: font, color, shadow, spacing, radius, breakpoint
   ========================================================================== */

:root {
  /* ==========================================================================
     TYPOGRAPHY - Font Families
     ========================================================================== */
  --font-family-heading: 'Lato', sans-serif;
  --font-family-body: 'Open Sans', sans-serif;

  /* ==========================================================================
     TYPOGRAPHY - Font Sizes
     Figma naming: size/line-height (e.g., 36/54 = 36px size, 54px line-height)
     ========================================================================== */

  /* Headlines */
  --font-size-h1: 36px;
  --font-size-h2: 30px;
  --font-size-h3: 24px;
  --font-size-h4: 21px;
  --font-size-h5: 18px;
  --font-size-h6: 16px;

  /* Paragraphs */
  --font-size-lead: 24px;        /* Paragraph 24/36 Semi-Bold */
  --font-size-body-lg: 21px;     /* Paragraph 21/31.5 */
  --font-size-body: 18px;        /* Paragraph 18/27 - primary body */
  --font-size-sm: 12px;          /* Paragraph 12/18 */
  --font-size-meta: 11px;        /* Blog card meta (mobile) 11/16 */
  --font-size-xs: 10px;          /* Captions 10/12 */

  /* Quotes/Blockquotes */
  --font-size-quote-xl: 52px;    /* Quote 52/78 - Extra large pullquote */
  --font-size-quote-lg: 30px;    /* Quote 30/45 - Large (matches H2) */
  --font-size-quote-md: 24px;    /* Quote 24/36 - Medium (matches H3) */

  /* ==========================================================================
     TYPOGRAPHY - Line Heights
     All headlines use 1.5x ratio per design system
     ========================================================================== */

  /* Headlines (1.5x ratio) */
  --line-height-h1: 54px;
  --line-height-h2: 45px;
  --line-height-h3: 36px;
  --line-height-h4: 31.5px;
  --line-height-h5: 27px;
  --line-height-h6: 24px;

  /* Paragraphs */
  --line-height-lead: 36px;
  --line-height-body-lg: 31.5px;
  --line-height-body: 27px;
  --line-height-sm: 18px;
  --line-height-meta: 16px;      /* Blog card meta (mobile) */
  --line-height-xs: 12px;
  --line-height-form: 18px;      /* Form text: 18/18 (1:1 ratio) */

  /* Quotes/Blockquotes (1.5x ratio) */
  --line-height-quote-xl: 78px;  /* Quote 52/78 */
  --line-height-quote-lg: 45px;  /* Quote 30/45 (matches H2) */
  --line-height-quote-md: 36px;  /* Quote 24/36 (matches H3) */

  /* ==========================================================================
     TYPOGRAPHY - Font Weights
     Note: Lato offers weights 100/300/400/700/900. We load 400/700/900.
     --font-weight-heavy maps to 700 (Lato Bold) per design approval.
     ========================================================================== */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;      /* Lato Heavy — approved heading weight */

  /* ==========================================================================
     COLORS - Primary (Navy)
     Brand primary: --color-primary (#1B1464) = Figma 700
     ========================================================================== */
  --color-primary-50: #f0f3fd;
  --color-primary-100: #d1dcf9;
  --color-primary-200: #a3b8f3;
  --color-primary-300: #7595ed;
  --color-primary-400: #4872e7;
  --color-primary-500: #1d50de;
  --color-primary-600: #1740b0;
  --color-primary-700: #1b1464;   /* Primary Navy */
  --color-primary-800: #0b1f57;
  --color-primary-900: #06102b;

  /* Semantic alias */
  --color-primary: var(--color-primary-700);
  --color-primary-light: var(--color-primary-500);
  --color-primary-dark: var(--color-primary-900);
  --color-primary-navy-20: rgba(27, 20, 100, 0.2);  /* Navy at 20% opacity (gradients, shadows) */

  /* ==========================================================================
     COLORS - Accent (Gold)
     Brand accent: --color-accent (#D4AF37) = Figma 500
     ========================================================================== */
  --color-accent-50: #faf5e6;
  --color-accent-100: #f4ebcd;
  --color-accent-200: #ecdca8;
  --color-accent-300: #e4cd82;
  --color-accent-400: #dcbe5d;
  --color-accent-500: #d4af37;    /* Primary Gold */
  --color-accent-600: #b39226;
  --color-accent-700: #89701e;
  --color-accent-800: #524312;
  --color-accent-900: #292209;

  /* Semantic alias */
  --color-accent: var(--color-accent-500);
  --color-accent-light: var(--color-accent-300);
  --color-accent-dark: var(--color-accent-700);

  /* ==========================================================================
     COLORS - Neutral (Gray)
     ========================================================================== */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #f6f6f7;
  --color-neutral-100: #eceeef;
  --color-neutral-200: #c7cbcf;
  --color-neutral-300: #a2a9af;
  --color-neutral-400: #868f97;
  --color-neutral-500: #6c757d;
  --color-neutral-600: #51585e;
  --color-neutral-700: #363a3e;
  --color-neutral-800: #1b1d1f;
  --color-neutral-900: #0e0f10;
  --color-neutral-1000: #000000;

  /* Semantic aliases */
  --color-white: var(--color-neutral-0);
  --color-black: var(--color-neutral-1000);

  /* ==========================================================================
     COLORS - Error (Red)
     ========================================================================== */
  --color-error-50: #fef2f2;
  --color-error-100: #fee2e2;
  --color-error-200: #fecaca;
  --color-error-300: #fca5a5;
  --color-error-400: #f87171;
  --color-error-500: #ef4444;
  --color-error-600: #dc2626;
  --color-error-700: #b91c1c;
  --color-error-800: #991b1b;
  --color-error-900: #7f1d1d;

  --color-error: var(--color-error-500);

  /* ==========================================================================
     COLORS - Warning (Orange)
     ========================================================================== */
  --color-warning-50: #fef1e8;
  --color-warning-100: #fedcc5;
  --color-warning-200: #fcc096;
  --color-warning-300: #fba468;
  --color-warning-400: #fa8839;
  --color-warning-500: #f97316;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;
  --color-warning-800: #92400e;
  --color-warning-900: #78350f;

  --color-warning: var(--color-warning-500);

  /* ==========================================================================
     COLORS - Teal (Buttons/Interactive)
     Used for button variants and interactive elements
     ========================================================================== */
  --color-teal-50: #f2fcfc;
  --color-teal-100: #d7f5f5;
  --color-teal-200: #b0ebeb;
  --color-teal-300: #88e0e0;
  --color-teal-400: #61d6d6;
  --color-teal-500: #39cccc;
  --color-teal-600: #2ba9a9;
  --color-teal-700: #1e7575;
  --color-teal-800: #114141;
  --color-teal-900: #0a2727;

  --color-teal: var(--color-teal-500);
  --color-teal-light: var(--color-teal-300);
  --color-teal-dark: var(--color-teal-700);

  /* ==========================================================================
     COLORS - Text
     Semantic text colors referencing the palette
     ========================================================================== */
  --color-text-heading: var(--color-primary-700);
  --color-text-body: var(--color-neutral-600);
  --color-text-muted: var(--color-neutral-200);
  --color-text-reverse: var(--color-neutral-0);
  --color-text-dark: var(--color-neutral-600);
  --color-text-error: var(--color-error-500);
  --color-text-focus: var(--color-primary-900);
  --color-text-disabled: var(--color-neutral-300);

  /* ==========================================================================
     COLORS - Background
     ========================================================================== */
  --color-bg-primary: var(--color-neutral-0);
  --color-bg-secondary: var(--color-neutral-100);
  --color-bg-brand: var(--color-primary-700);

  /* ==========================================================================
     COLORS - Borders
     ========================================================================== */
  --color-border-subtle: var(--color-neutral-200);
  --color-border-default: var(--color-neutral-300);
  --color-border-strong: var(--color-neutral-600);
  --color-border-primary: var(--color-primary-700);
  --color-border-accent: var(--color-accent-500);

  /* ==========================================================================
     COLORS - Buttons
     Semantic button color tokens extracted from button typography export
     ========================================================================== */

  /* Primary Button (Navy) */
  --color-btn-primary-default: var(--color-primary-700);
  --color-btn-primary-hover: var(--color-primary-500);
  --color-btn-primary-active: var(--color-primary-900);
  --color-btn-primary-text: var(--color-neutral-0);

  /* Secondary Button (Gold) */
  --color-btn-secondary-default: var(--color-accent-500);
  --color-btn-secondary-hover: var(--color-accent-400);
  --color-btn-secondary-active: var(--color-accent-600);
  --color-btn-secondary-text: var(--color-primary-700);

  /* Tertiary Button (Teal) */
  --color-btn-tertiary-default: var(--color-teal-500);
  --color-btn-tertiary-hover: var(--color-teal-300);
  --color-btn-tertiary-active: var(--color-teal-700);
  --color-btn-tertiary-text: var(--color-neutral-0);

  /* Disabled Button */
  --color-btn-disabled-bg: var(--color-neutral-400);
  --color-btn-disabled-text: var(--color-neutral-200);

  /* ==========================================================================
     COLORS - Navigation
     Semantic navigation color tokens extracted from navigation typography export
     ========================================================================== */

  /* Simple Navigation (on dark backgrounds, e.g., header) */
  --color-nav-simple-default: var(--color-neutral-0);
  --color-nav-simple-hover: var(--color-accent-400);
  --color-nav-simple-active: var(--color-accent-600);
  --color-nav-simple-accent: var(--color-accent-500);

  /* Dropdown/Accordion Navigation (on light backgrounds) */
  --color-nav-dropdown-default: var(--color-primary-700);
  --color-nav-dropdown-hover: var(--color-primary-500);
  --color-nav-dropdown-active: var(--color-primary-900);

  /* Footer Navigation */
  --color-nav-footer-default: var(--color-primary-700);
  --color-nav-footer-hover: var(--color-primary-700);
  --color-nav-footer-active: var(--color-neutral-0);
  --color-nav-footer-disabled: var(--color-text-muted);

  /* Disabled Navigation */
  --color-nav-disabled: var(--color-neutral-400);

  /* ==========================================================================
     COLORS - Links
     Semantic link color tokens extracted from link typography export
     ========================================================================== */

  /* Text Links (in body content) */
  --color-link-text-default: var(--color-primary-700);
  --color-link-text-hover: var(--color-primary-500);
  --color-link-text-active: var(--color-primary-900);
  --color-link-text-visited: var(--color-primary-700);

  /* Accent Links (gold) */
  --color-link-accent-default: var(--color-accent-500);
  --color-link-accent-hover: var(--color-accent-400);
  --color-link-accent-active: var(--color-accent-600);

  /* Menu Links (navigation context) */
  --color-link-menu-default: var(--color-primary-700);
  --color-link-menu-hover: var(--color-primary-500);
  --color-link-menu-reverse: var(--color-neutral-0);

  /* Attribution/Footer Links */
  --color-link-attribution: var(--color-neutral-200);

  /* Pagination Links */
  --color-link-pagination-default: var(--color-neutral-400);
  --color-link-pagination-hover: var(--color-neutral-500);
  --color-link-pagination-active: var(--color-neutral-600);
  --color-link-pagination-disabled: var(--color-neutral-200);

  /* Disabled Links */
  --color-link-disabled: var(--color-neutral-400);

  /* ==========================================================================
     COLORS - Quotes/Blockquotes
     Semantic quote color tokens extracted from quote typography export
     ========================================================================== */

  --color-quote-default: var(--color-text-muted);      /* Muted gray for subtle quotes */
  --color-quote-brand: var(--color-text-heading);      /* Navy for emphasis */
  --color-quote-reverse: var(--color-text-reverse);    /* White for dark backgrounds */
  --color-quote-body: var(--color-text-body);          /* Body gray for standard quotes */

  /* ==========================================================================
     SHADOWS
     ========================================================================== */
  --shadow-none: 0px 4px 4px 0px rgba(0, 0, 0, 0);
  --shadow-subtle: 4px 4px 12px 0px rgba(0, 0, 0, 0.1);
  --shadow-standard: 4px 4px 12px 0px rgba(0, 0, 0, 0.15);
  --shadow-medium: 4px 4px 12px 0px rgba(0, 0, 0, 0.2);
  --shadow-strong: 4px 4px 12px 0px rgba(0, 0, 0, 0.25);

  /* ==========================================================================
     SPACING
     ========================================================================== */
  --spacing-xs: 4px;
  --spacing-6: 6px;
  --spacing-sm: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-md: 16px;
  --spacing-20: 20px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-40: 40px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-80: 80px;

  /* ==========================================================================
     BUTTON SIZING
     ========================================================================== */
  --btn-padding-vertical-md: var(--spacing-12);
  --btn-padding-horizontal: var(--spacing-3xl);
  --btn-padding-horizontal-lg: var(--spacing-80);

  /* ==========================================================================
     TYPOGRAPHY - Compact Line Heights
     Used in navigation and menu contexts (1:1 font-size to line-height ratio)
     ========================================================================== */
  --line-height-menu: 21px;            /* Menu links: matches body-lg font-size */

  /* ==========================================================================
     BORDER RADIUS
     ========================================================================== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ==========================================================================
     BREAKPOINTS
     Per CLAUDE.md specifications
     ========================================================================== */
  --breakpoint-mobile: 380px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1150px;
  --breakpoint-desktop-plus: 1920px;
}
/* ==========================================================================
   Purposeful Media - Sprite Sheet CSS
   ==========================================================================

   Two sprite systems:
   1. Decorative Icons - Symbolic icons with 4 color variants baked in
   2. UI Icons - Functional icons with CSS filter-based coloring

   Reference: docs/sprite-scaling-reference.md
   ========================================================================== */

/* ==========================================================================
   DECORATIVE ICONS (purposeful-sprite-symbolic.svg)
   ==========================================================================

   Source Specifications:
   - Grid: 6 columns × 16 rows
   - Reference icon size: 90px
   - Reference sprite dimensions: 540px × 1440px
   - Colors by row groups:
     - Rows 1-4 (offset 0): Navy (#1B1464)
     - Rows 5-8 (offset 360px): Dark (#54595F)
     - Rows 9-12 (offset 720px): Gray (#6C757D)
     - Rows 13-16 (offset 1080px): White (#FFFFFF)

   Scaling Formula:
     scale_factor = display_size / 90
     background-size: (540 × scale) (1440 × scale)
     background-position: (baseX × scale) (baseY × scale)
   ========================================================================== */

.decorative-icon-display {
  display: inline-block;
  background-image: url('../svg/decorative-icons/purposeful-sprite-symbolic.svg');
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* --------------------------------------
   Size Variants
   -------------------------------------- */

/* Small: 30px (scale 0.333) */
.decorative-icon-display--small {
  width: 30px;
  height: 30px;
  background-size: 180px 480px;
}

/* Medium: 60px (scale 0.666) */
.decorative-icon-display--medium {
  width: 60px;
  height: 60px;
  background-size: 360px 960px;
}

/* Large: 90px (scale 1.0 - reference size) */
.decorative-icon-display--large {
  width: 90px;
  height: 90px;
  background-size: 540px 1440px;
}

/* XLarge: 120px (scale 1.333) */
.decorative-icon-display--xlarge {
  width: 120px;
  height: 120px;
  background-size: 720px 1920px;
}

/* --------------------------------------
   Icon Positions - NAVY Color
   Base positions at 90px reference
   -------------------------------------- */

/* Row 1 Navy - base Y: 0 */
.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; }

/* Row 2 Navy - base Y: -90 */
.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; }

/* Row 3 Navy - base Y: -180 */
.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; }

/* Row 4 Navy - base Y: -270 */
.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; }

/* --------------------------------------
   Icon Positions - WHITE Color
   Y offset: +1080px (12 rows × 90px)
   -------------------------------------- */

/* Row 1 White - base Y: -1080 */
.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; }

/* Row 2 White - base Y: -1170 */
.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; }

/* Row 3 White - base Y: -1260 */
.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; }

/* Row 4 White - base Y: -1350 */
.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; }

/* --------------------------------------
   Scaled Positions - SMALL (30px)
   Scale factor: 0.333
   -------------------------------------- */

/* Navy - 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; }

/* --------------------------------------
   Scaled Positions - MEDIUM (60px)
   Scale factor: 0.666
   -------------------------------------- */

/* Navy - 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; }


/* ==========================================================================
   UI ICONS (purposeful-sprite-ui.svg)
   ==========================================================================

   Source Specifications:
   - Grid: 6 columns × 2 rows
   - Reference icon size: 256px
   - Reference sprite dimensions: 1536px × 512px
   - Single color in sprite - uses CSS filters for color variations

   Scaling Formula:
     scale_factor = display_size / 256
     background-size: (1536 × scale) (512 × scale)
     background-position: (baseX × scale) (baseY × scale)
   ========================================================================== */

.ui-icon {
  display: inline-block;
  background-image: url('../svg/ui-icons/purposeful-sprite-ui.svg');
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* --------------------------------------
   Size Variants
   -------------------------------------- */

/* 16px (scale 0.0625) */
.ui-icon--16 {
  width: 16px;
  height: 16px;
  background-size: 96px 32px;
}

/* 24px (scale 0.09375) */
.ui-icon--24 {
  width: 24px;
  height: 24px;
  background-size: 144px 48px;
}

/* 32px (scale 0.125) */
.ui-icon--32 {
  width: 32px;
  height: 32px;
  background-size: 192px 64px;
}

/* 48px (scale 0.1875) */
.ui-icon--48 {
  width: 48px;
  height: 48px;
  background-size: 288px 96px;
}

/* --------------------------------------
   Icon Positions - 24px Size
   Base positions at 256px: search(0,0), arrow-up(-256,0), play(-512,0),
   pause(-768,0), hamburger(-1024,0), close(-1280,0)
   Scale: 0.09375
   -------------------------------------- */

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

/* --------------------------------------
   Icon Positions - 32px Size
   Scale: 0.125
   -------------------------------------- */

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

/* --------------------------------------
   Icon Positions - 48px Size
   Scale: 0.1875
   -------------------------------------- */

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

/* --------------------------------------
   Arrow Rotation Utilities
   -------------------------------------- */

.ui-icon[data-icon="arrow-down"] { transform: rotate(180deg); }
.ui-icon[data-icon="arrow-left"] { transform: rotate(-90deg); }
.ui-icon[data-icon="arrow-right"] { transform: rotate(90deg); }

/* Arrow variants use arrow-up position */
.ui-icon--24[data-icon="arrow-down"],
.ui-icon--24[data-icon="arrow-left"],
.ui-icon--24[data-icon="arrow-right"] { background-position: -24px 0px; }

.ui-icon--32[data-icon="arrow-down"],
.ui-icon--32[data-icon="arrow-left"],
.ui-icon--32[data-icon="arrow-right"] { background-position: -32px 0px; }

.ui-icon--48[data-icon="arrow-down"],
.ui-icon--48[data-icon="arrow-left"],
.ui-icon--48[data-icon="arrow-right"] { background-position: -48px 0px; }

/* --------------------------------------
   Color Filters for UI Icons
   -------------------------------------- */

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

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

/* Gray (#868F97) */
.ui-icon[data-color="gray"] {
  filter: brightness(0) saturate(100%) invert(62%) sepia(6%) saturate(515%) hue-rotate(169deg) brightness(89%) contrast(86%);
}

/* Gold (#D4AF37) */
.ui-icon[data-color="gold"] {
  filter: brightness(0) saturate(100%) invert(73%) sepia(47%) saturate(491%) hue-rotate(10deg) brightness(91%) contrast(89%);
}
/* ==========================================================================
   Purposeful Media MVW2 - Reset & Base Styles

   Minimal reset and foundational body styles.
   Must be imported AFTER variables.css and BEFORE all component CSS.

   Created: February 3, 2026
   Source: Tier 2 typography-showcase.html
   ========================================================================== */

/* ==========================================================================
   BOX MODEL RESET
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   BASE BODY
   ========================================================================== */
body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-body);
  background-color: var(--color-white);
}

/* Hide touch menu items orphaned to body by WP nav menu processing */
body > .header-touch-menu__section {
  display: none !important;
}
/* ==========================================================================
   Purposeful Media MVW2 - Atoms Master Stylesheet

   All atomic-level typography and UI elements consolidated from
   Tier 2 typography-showcase.html.

   Import order: variables.css → sprites.css → reset.css → THIS FILE

   Created: February 3, 2026
   ========================================================================== */


/* ==========================================================================
   HEADLINES (H1-H6)

   Font: Lato Heavy (800)
   Color variants: default (navy), reverse (white), dark (gray), muted
   Transform: uppercase modifier
   ========================================================================== */
.headline-h1,
.headline-h2,
.headline-h3,
.headline-h4,
.headline-h5,
.headline-h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heavy);
  color: var(--color-text-heading);
  margin-bottom: var(--spacing-md);
}

.headline-h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
}

.headline-h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
}

.headline-h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}

.headline-h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
}

.headline-h5 {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
}

.headline-h6 {
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
}

/* Headline Color Variants */
.headline--reverse { color: var(--color-text-reverse); }
.headline--dark { color: var(--color-text-dark); }
.headline--muted { color: var(--color-text-muted); }

/* Headline Text Transform */
.headline--uppercase { text-transform: uppercase; }


/* ==========================================================================
   PARAGRAPHS

   Font: Open Sans
   Sizes: lead (24px), lg (21px), base (18px), sm (12px)
   Weights: light, regular, medium, semibold, bold
   ========================================================================== */
.paragraph {
  font-family: var(--font-family-body);
  color: var(--color-text-body);
  margin-bottom: var(--spacing-md);
}

.paragraph--lead {
  font-size: var(--font-size-lead);
  line-height: var(--line-height-lead);
  font-weight: var(--font-weight-semibold);
}

.paragraph--lg {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
}

.paragraph--base {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.paragraph--sm {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

/* Paragraph Weights */
.paragraph--light { font-weight: var(--font-weight-light); }
.paragraph--regular { font-weight: var(--font-weight-regular); }
.paragraph--medium { font-weight: var(--font-weight-medium); }
.paragraph--semibold { font-weight: var(--font-weight-semibold); }
.paragraph--bold { font-weight: var(--font-weight-bold); }


/* ==========================================================================
   BUTTONS

   Font: Lato Bold (700), uppercase
   Types: primary (navy), secondary (gold), tertiary (teal)
   Styles: solid, ghost (outline)
   Sizes: small, medium, large
   States: default, hover, active, disabled
   ========================================================================== */
.btn {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-body);
  line-height: var(--line-height-form);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.btn:active {
  transform: translateY(1px);
}

/* Button Sizes */
.btn--small { padding: var(--spacing-sm) var(--btn-padding-horizontal); }
.btn--medium { padding: var(--btn-padding-vertical-md) var(--btn-padding-horizontal); }
.btn--large { padding: var(--spacing-md) var(--btn-padding-horizontal-lg); }

/* Primary Button (Navy) */
.btn--primary {
  background-color: var(--color-btn-primary-default);
  border-color: var(--color-btn-primary-default);
  color: var(--color-btn-primary-text);
}
.btn--primary:hover {
  background-color: var(--color-btn-primary-hover);
  border-color: var(--color-btn-primary-hover);
}
.btn--primary:active {
  background-color: var(--color-btn-primary-active);
  border-color: var(--color-btn-primary-active);
}

/* Secondary Button (Gold) */
.btn--secondary {
  background-color: var(--color-btn-secondary-default);
  border-color: var(--color-btn-secondary-default);
  color: var(--color-btn-secondary-text);
}
.btn--secondary:hover {
  background-color: var(--color-btn-secondary-hover);
  border-color: var(--color-btn-secondary-hover);
}
.btn--secondary:active {
  background-color: var(--color-btn-secondary-active);
  border-color: var(--color-btn-secondary-active);
}

/* Tertiary Button (Teal) */
.btn--tertiary {
  background-color: var(--color-btn-tertiary-default);
  border-color: var(--color-btn-tertiary-default);
  color: var(--color-btn-tertiary-text);
}
.btn--tertiary:hover {
  background-color: var(--color-btn-tertiary-hover);
  border-color: var(--color-btn-tertiary-hover);
}
.btn--tertiary:active {
  background-color: var(--color-btn-tertiary-active);
  border-color: var(--color-btn-tertiary-active);
}

/* Ghost Buttons (Outline) */
.btn--ghost-primary {
  background-color: transparent;
  border-color: var(--color-btn-primary-default);
  color: var(--color-btn-primary-default);
}
.btn--ghost-primary:hover {
  background-color: var(--color-btn-primary-default);
  color: var(--color-btn-primary-text);
}

.btn--ghost-secondary {
  background-color: transparent;
  border-color: var(--color-btn-secondary-default);
  color: var(--color-btn-secondary-default);
}
.btn--ghost-secondary:hover {
  background-color: var(--color-btn-secondary-default);
  color: var(--color-btn-secondary-text);
}

.btn--ghost-tertiary {
  background-color: transparent;
  border-color: var(--color-btn-tertiary-default);
  color: var(--color-btn-tertiary-default);
}
.btn--ghost-tertiary:hover {
  background-color: var(--color-btn-tertiary-default);
  color: var(--color-btn-tertiary-text);
}

/* Disabled Button */
.btn:disabled,
.btn--disabled {
  background-color: var(--color-btn-disabled-bg);
  border-color: var(--color-btn-disabled-bg);
  color: var(--color-btn-disabled-text);
  cursor: not-allowed;
  opacity: 0.6;
}
.btn:disabled:hover,
.btn--disabled:hover {
  transform: none;
}


/* ==========================================================================
   LINKS

   Types: text (body content), accent (gold), menu, attribution, pagination
   ========================================================================== */

/* Text Links (in body content) */
.link--text {
  font-family: var(--font-family-body);
  font-size: inherit;
  font-weight: var(--font-weight-semibold);
  color: var(--color-link-text-default);
  text-decoration: underline;
  transition: color 0.2s ease;
}
.link--text:hover {
  color: var(--color-link-text-hover);
}
.link--text:active {
  color: var(--color-link-text-active);
}

/* Accent Links (gold) */
.link--accent {
  color: var(--color-link-accent-default);
}
.link--accent:hover {
  color: var(--color-link-accent-hover);
}
.link--accent:active {
  color: var(--color-link-accent-active);
}

/* Menu Links */
.link--menu {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-menu);
  font-weight: var(--font-weight-bold);
  color: var(--color-link-menu-default);
  text-decoration: none;
  transition: color 0.2s ease;
}
.link--menu:hover {
  color: var(--color-link-menu-hover);
}
.link--menu-reverse {
  color: var(--color-link-menu-reverse);
}
.link--menu-reverse:hover {
  color: var(--color-accent-400);
}

/* Attribution Links */
.link--attribution {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-link-attribution);
  text-decoration: underline;
}
.link--attribution:hover {
  color: var(--color-neutral-0);
}

/* Pagination Links */
.link--pagination {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  color: var(--color-link-pagination-default);
  text-decoration: none;
  padding: var(--spacing-xs) var(--spacing-sm);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.link--pagination:hover {
  color: var(--color-link-pagination-hover);
  background-color: var(--color-neutral-100);
}
.link--pagination-active {
  color: var(--color-link-pagination-active);
  background-color: var(--color-neutral-200);
}
.link--pagination-disabled {
  color: var(--color-link-pagination-disabled);
  cursor: not-allowed;
}


/* ==========================================================================
   LABELS

   Font: Lato, uppercase
   Dual weight: bold (700) for buttons, heavy (800) for forms/CTAs
   ========================================================================== */
.label {
  font-family: var(--font-family-heading);
  text-transform: uppercase;
  display: inline-block;
}

/* Button Labels (Bold 700) */
.label--button {
  font-size: var(--font-size-body);
  line-height: var(--line-height-form);
  font-weight: var(--font-weight-bold);
}

/* Form/CTA Labels (Heavy 800) */
.label--form {
  font-size: var(--font-size-body);
  line-height: var(--line-height-form);
  font-weight: var(--font-weight-heavy);
  color: var(--color-text-heading);
}


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

   Contexts: simple (header/dark bg), dropdown (light bg), footer
   ========================================================================== */
.nav-list {
  list-style: none;
  display: flex;
  gap: var(--spacing-lg);
}

/* Simple Navigation (header on dark bg) */
.nav-simple .nav-link {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-nav-simple-default);
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav-simple .nav-link:hover {
  color: var(--color-nav-simple-hover);
}
.nav-simple .nav-link--active {
  color: var(--color-nav-simple-accent);
}

/* Dropdown Navigation (light bg) */
.nav-dropdown .nav-link {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-nav-dropdown-default);
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav-dropdown .nav-link:hover {
  color: var(--color-nav-dropdown-hover);
}

/* Footer Navigation */
.nav-footer .nav-link {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-nav-footer-default);
  text-decoration: none;
}
.nav-footer .nav-link:hover {
  text-decoration: underline;
}


/* ==========================================================================
   QUOTES / BLOCKQUOTES

   Font: Open Sans Semibold Italic
   Sizes: xl (52px), lg (30px), md (24px)
   Colors: default (muted), brand (navy), body (gray), reverse (white)
   ========================================================================== */
.quote {
  display: block;
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-lg) var(--spacing-2xl);
  position: relative;
}

.quote__text {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-semibold);
  font-style: italic;
  margin: 0;
}

.quote__citation {
  display: block;
  margin-top: var(--spacing-md);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  font-style: normal;
  opacity: 0.8;
}

/* Quote Sizes */
.quote--xl .quote__text {
  font-size: var(--font-size-quote-xl);
  line-height: var(--line-height-quote-xl);
}

.quote--lg .quote__text {
  font-size: var(--font-size-quote-lg);
  line-height: var(--line-height-quote-lg);
}

.quote--md .quote__text {
  font-size: var(--font-size-quote-md);
  line-height: var(--line-height-quote-md);
}

/* Quote Colors */
.quote--default { color: var(--color-quote-default); }
.quote--brand { color: var(--color-quote-brand); }
.quote--body { color: var(--color-quote-body); }
.quote--reverse { color: var(--color-quote-reverse); }
/* ==========================================================================
   Purposeful Media MVW2 - Molecules Master Stylesheet

   All molecule-level components consolidated from Tier 2 demos:
   - Banner Graphic (CTA banner with icon)
   - Banner Spacer (section divider)
   - Feature Banner (compact callout)
   - Footer Menu Mobile Dropdown (accordion)
   - Pagination Bar (archive/post navigation)
   - Pillar Page Sticky Menu (scroll navigation)
   - Return to Top (scroll-to-top button)

   Import order: variables.css → sprites.css → reset.css → atoms-master.css → THIS FILE

   Created: February 3, 2026
   ========================================================================== */


/* ==========================================================================
   BANNER GRAPHIC

   CTA banner with large decorative icon, headline, and body text.
   Navy background, gold bottom border, 120px height on desktop.
   Layout: horizontal (desktop/tablet), vertical stacked (mobile).
   ========================================================================== */
.banner-graphic {
  background: var(--color-primary-700);
  border-bottom: 4px solid var(--color-accent-500);
  padding: var(--spacing-12) var(--spacing-md);
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

.banner-graphic__container {
  display: flex;
  gap: var(--spacing-12);
  align-items: flex-start;
  flex: 1;
}

.banner-graphic__content {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-height: 90px;
  justify-content: flex-start;
}

.banner-graphic__headline {
  color: var(--color-text-reverse);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  text-align: left;
  margin: 0;
}

.banner-graphic__text {
  color: var(--color-text-muted);
  font-family: var(--font-family-body);
  font-size: var(--font-size-lead);
  line-height: var(--line-height-lead);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  margin: 0;
  flex: 1;
}

/* Default headline size (below 1150px) */
.banner-graphic__headline {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
}

/* Desktop+ (1150px+): H1, horizontal */
@media (min-width: 1150px) {
  .banner-graphic {
    height: 120px;
  }

  .banner-graphic__container {
    align-items: center;
  }

  .banner-graphic__headline {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
  }

  .banner-graphic__content {
    justify-content: center;
  }
}

/* Tablet (768-1149px): H2, horizontal */
@media (min-width: 768px) and (max-width: 1149px) {
  .banner-graphic {
    height: 120px;
  }

  .banner-graphic__container {
    gap: var(--spacing-10);
    align-items: center;
  }

  .banner-graphic__headline {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }

  .banner-graphic__content {
    justify-content: center;
  }
}

/* Mobile (380-767px): H3, vertical stacked */
@media (max-width: 767px) {
  .banner-graphic {
    height: auto;
    padding: var(--spacing-md);
  }

  .banner-graphic__container {
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: center;
    text-align: center;
  }

  .banner-graphic__headline {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    text-align: center;
  }

  .banner-graphic__text {
    text-align: center;
  }

  .banner-graphic__content {
    min-height: auto;
    align-items: center;
  }
}


/* ==========================================================================
   BANNER SPACER

   Section divider with headline text.
   Two schemes: default (navy bg, gold border-bottom) and reverse (white bg, navy border-top).
   Fixed 80px height (default), auto height (reverse).
   ========================================================================== */
.banner-spacer {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: var(--spacing-12) var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

.banner-spacer__headline {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  text-align: left;
  margin: 0;
}

/* Default Scheme (Navy Background) */
.banner-spacer--default {
  background: var(--color-primary-700);
  border-bottom: 4px solid var(--color-accent-500);
  height: 80px;
}

.banner-spacer--default .banner-spacer__headline {
  color: var(--color-text-reverse);
}

/* Default: Desktop+ H1 */
.banner-spacer--default .banner-spacer__headline {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
}

/* Default: Tablet H2 */
@media (min-width: 768px) and (max-width: 1149px) {
  .banner-spacer--default .banner-spacer__headline {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }
}

/* Default: Mobile H3 */
@media (max-width: 767px) {
  .banner-spacer--default .banner-spacer__headline {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
  }
}

/* Reverse Scheme (White Background) */
.banner-spacer--reverse {
  background: var(--color-neutral-0);
  height: auto;
  min-height: 60px;
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}

.banner-spacer--reverse .banner-spacer__headline {
  color: var(--color-text-heading);
}

/* Reverse: Desktop+ H2 */
.banner-spacer--reverse .banner-spacer__headline {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
}

/* Reverse: Tablet H3 */
@media (min-width: 768px) and (max-width: 1149px) {
  .banner-spacer--reverse .banner-spacer__headline {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
  }
}

/* Reverse: Mobile H4 */
@media (max-width: 767px) {
  .banner-spacer--reverse .banner-spacer__headline {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
  }
}


/* ==========================================================================
   FEATURE BANNER

   Compact callout with small icon and headline.
   White background, navy top border. Horizontal layout at all breakpoints.
   Variants: accent (gold border), icon-right (reversed layout).
   ========================================================================== */
.feature-banner {
  background: var(--color-neutral-0);
  border-top: 4px solid var(--color-primary-700);
  padding: var(--spacing-12) var(--spacing-md);
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  gap: var(--spacing-10);
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  text-decoration: none;
}

/* Linked banner hover state */
a.feature-banner {
  transition: background-color 0.2s ease;
}

a.feature-banner:hover {
  background-color: var(--color-neutral-50);
}

a.feature-banner:focus-visible {
  outline: 2px solid var(--color-primary-700);
  outline-offset: 2px;
}

.feature-banner__headline {
  color: var(--color-text-heading);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  text-align: left;
  margin: 0;
}

/* Desktop & Tablet (768px+): H3 */
.feature-banner__headline {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}

/* Mobile (380-767px): H4 */
@media (max-width: 767px) {
  .feature-banner__headline {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
  }
}

/* Gold accent border variant */
.feature-banner--accent {
  border-top-color: var(--color-accent-500);
}

/* Icon on right */
.feature-banner--icon-right {
  flex-direction: row-reverse;
}


/* ==========================================================================
   FOOTER MENU MOBILE DROPDOWN

   Accordion menu for mobile footer navigation.
   Light gold background, H4 typography.
   Mobile only (380-767px) in production.
   ========================================================================== */
.footer-menu-dropdown {
  background-color: var(--color-accent-100);
  width: 100%;
}

/* Trigger button */
.footer-menu-dropdown__trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.footer-menu-dropdown__trigger:hover {
  background-color: var(--color-accent-200);
}

.footer-menu-dropdown__trigger:focus-visible {
  outline: 2px solid var(--color-primary-700);
  outline-offset: -2px;
}

/* Trigger text */
.footer-menu-dropdown__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  color: var(--color-text-heading);
  margin: 0;
}

/* Trigger icon - chevron behavior */
.footer-menu-dropdown__icon {
  transition: transform 0.3s ease;
  transform: rotate(180deg);
}

.footer-menu-dropdown[aria-expanded="true"] .footer-menu-dropdown__icon {
  transform: rotate(0deg);
}

/* Menu list (collapsible) */
.footer-menu-dropdown__list {
  list-style: none;
  margin: 0;
  padding: 0 var(--spacing-3xl) var(--spacing-xl) var(--spacing-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);

  /* Collapsed state */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

/* Expanded state */
.footer-menu-dropdown[aria-expanded="true"] .footer-menu-dropdown__list {
  max-height: 500px;
  opacity: 1;
  padding-top: var(--spacing-sm);
}

/* Menu items */
.footer-menu-dropdown__item {
  padding: var(--spacing-12) 0;
}

/* Menu links */
.footer-menu-dropdown__link {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  color: var(--color-text-heading);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-menu-dropdown__link:hover {
  color: var(--color-primary-500);
}

.footer-menu-dropdown__link:focus-visible {
  outline: 2px solid var(--color-primary-700);
  outline-offset: 2px;
}

/* Production: hide on tablet and desktop */
@media (min-width: 768px) {
  .footer-menu-dropdown--mobile-only {
    display: none;
  }
}


/* ==========================================================================
   PAGINATION BAR

   Archive and post navigation with arrow buttons and page links.
   Gray background strip with white pill container.
   Variants: standard and small (compact).
   ========================================================================== */

/* Outer container */
.pagination-bar {
  background: var(--color-neutral-100);
  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-md) var(--spacing-lg);
  display: flex;
  flex-direction: row;
  gap: var(--spacing-12);
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
}

/* Small variant */
.pagination-bar--small {
  padding: var(--spacing-6) var(--spacing-md) var(--spacing-12) var(--spacing-md);
}

/* Inner pill container */
.pagination-bar__group {
  background: var(--color-white);
  border-radius: var(--radius-full);
  padding: 0 var(--spacing-md);
  display: flex;
  flex-direction: row;
  gap: var(--spacing-12);
  align-items: center;
  justify-content: center;
}

/* Arrow buttons */
.pagination-bar__arrow {
  width: var(--spacing-2xl);
  height: var(--spacing-2xl);
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

.pagination-bar__arrow:hover:not(.pagination-bar__arrow--disabled) {
  background-color: var(--color-neutral-100);
}

.pagination-bar__arrow--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Small arrow variant */
.pagination-bar--small .pagination-bar__arrow {
  width: 36px;
  height: 36px;
}

/* Page links */
.pagination-bar__link {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  color: var(--color-neutral-400);
  padding: var(--spacing-sm) var(--spacing-xs);
  cursor: pointer;
  transition: color 0.2s ease;
  text-decoration: none;
}

.pagination-bar__link:hover {
  color: var(--color-neutral-600);
}

.pagination-bar__link--active {
  color: var(--color-neutral-700);
}

.pagination-bar__link--disabled {
  color: var(--color-neutral-300);
  cursor: not-allowed;
}

/* Separator (ellipsis / em dash) */
.pagination-bar__separator {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  font-weight: var(--font-weight-heavy);
  color: var(--color-neutral-400);
  padding: var(--spacing-sm) var(--spacing-xs);
}

/* Small text variant */
.pagination-bar--small .pagination-bar__link,
.pagination-bar--small .pagination-bar__separator {
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .pagination-bar {
    padding: var(--spacing-6) var(--spacing-12) var(--spacing-12) var(--spacing-12);
  }

  .pagination-bar__group {
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-12);
  }

  .pagination-bar__arrow {
    width: 40px;
    height: 40px;
  }

  .pagination-bar__link {
    font-size: var(--font-size-h6);
    padding: var(--spacing-6) 2px;
  }
}


/* ==========================================================================
   PILLAR PAGE STICKY MENU

   Three-part scroll navigation for pillar pages:
   1. Desktop/Tablet bar (768px+) — horizontal with separators
   2. Mobile bar (380-767px) — compact with hamburger toggle
   3. Mobile dropdown — vertical menu overlay

   Uses wrapper pattern for full-width background with 1920px content constraint.
   ========================================================================== */

/* Full-width wrapper */
.sticky-menu-wrapper {
  background-color: var(--color-neutral-100);
  box-shadow: var(--shadow-subtle);
  width: 100%;
  border-bottom: 1px solid var(--color-accent-500);
}

.sticky-menu {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

/* Desktop/Tablet bar */
.sticky-menu--desktop {
  max-width: 1200px;
  margin: 0 auto;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
}

.sticky-menu__container {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: space-between;
  gap: 10px;
}

.sticky-menu__item {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  color: var(--color-text-heading);
  text-decoration: none;
  padding: var(--spacing-sm) var(--spacing-md);
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.sticky-menu__item:hover {
  opacity: 0.8;
}

.sticky-menu__item.is-active {
  background-color: var(--color-accent-100);
  border-radius: var(--radius-md);
  color: var(--color-accent-500);
}

.sticky-menu__separator {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  font-weight: var(--font-weight-heavy);
  color: var(--color-primary-700);
  user-select: none;
}

.sticky-menu__cta {
  position: relative;
  margin-left: 30px;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  color: var(--color-text-heading);
  text-decoration: none;
  background-color: var(--color-accent-100);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sticky-menu__cta::before {
  content: '>';
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  font-weight: var(--font-weight-heavy);
  color: var(--color-primary-700);
  pointer-events: none;
}

.sticky-menu__cta:hover {
  background-color: var(--color-accent-500);
  color: var(--color-white);
}

/* Mobile bar */
.sticky-menu--mobile {
  padding: var(--spacing-sm);
}

.sticky-menu__mobile-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sticky-menu__current-section {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  color: var(--color-text-heading);
  background-color: var(--color-accent-50);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
}

.sticky-menu__toggle {
  width: 44px;
  height: 44px;
  background-color: var(--color-accent-50);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.sticky-menu__toggle:hover {
  background-color: var(--color-accent-100);
}

.sticky-menu__toggle:focus-visible {
  outline: 2px solid var(--color-primary-700);
  outline-offset: 2px;
}

/* Mobile dropdown */
.sticky-menu__dropdown {
  background-color: var(--color-neutral-100);
  border-top: 2px solid var(--color-accent-500);

  /* Collapsed by default */
  max-height: 0;
  padding: 0 var(--spacing-lg);
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

.sticky-menu__dropdown.is-open {
  max-height: 400px;
  opacity: 1;
  padding: var(--spacing-md) var(--spacing-lg);
}

.sticky-menu__dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.sticky-menu__dropdown-item {
  display: block;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  color: var(--color-text-heading);
  text-decoration: none;
  padding: var(--spacing-sm) 0;
  transition: color 0.2s ease;
}

.sticky-menu__dropdown-item:hover {
  color: var(--color-accent-600);
}

.sticky-menu__dropdown-item.is-active {
  color: var(--color-accent-600);
}

.sticky-menu__dropdown-cta {
  display: inline-block;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  color: var(--color-text-heading);
  text-decoration: none;
  background-color: var(--color-accent-50);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  margin-top: var(--spacing-md);
  transition: background-color 0.2s ease;
}

.sticky-menu__dropdown-cta:hover {
  background-color: var(--color-accent-100);
}


/* ==========================================================================
   RETURN TO TOP

   Fixed-position scroll-to-top button.
   48px (40px mobile), white bg, medium shadow.
   Hidden by default, visible after 300px scroll via JS.
   ========================================================================== */
.return-to-top {
  position: fixed;
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  width: 48px;
  height: 48px;

  background-color: var(--color-neutral-0);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-medium);

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  z-index: 1000;

  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;

  user-select: none;
  -webkit-user-select: none;
}

/* Visible state (toggled via JS) */
.return-to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.return-to-top:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
}

.return-to-top:active {
  transform: translateY(0);
}

.return-to-top:focus-visible {
  outline: 2px solid var(--color-primary-700);
  outline-offset: 2px;
}

/* Icon styles */
.return-to-top__icon {
  transition: filter 0.2s ease;
}

.return-to-top:hover .return-to-top__icon {
  filter: brightness(0) saturate(100%) invert(8%) sepia(94%) saturate(3268%) hue-rotate(237deg) brightness(93%) contrast(101%);
}

/* Tablet */
@media (max-width: 1149px) {
  .return-to-top {
    bottom: var(--spacing-md);
    right: var(--spacing-md);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .return-to-top {
    width: 40px;
    height: 40px;
    bottom: var(--spacing-sm);
    right: var(--spacing-sm);
  }

  .return-to-top .ui-icon--48 {
    width: 40px;
    height: 40px;
    background-size: 240px 80px;
  }

  .return-to-top .ui-icon--48[data-icon="arrow-up"] {
    background-position: -40px 0px;
  }
}
/* ==========================================================================
   Purposeful Media MVW2 - Page Shell Organisms

   Header, Hero, Hero Carousel, Footer components consolidated from
   Tier 2 responsive demos.

   Import order: variables.css → sprites.css → reset.css → atoms-master.css
                 → molecules-master.css → THIS FILE

   Created: February 3, 2026
   ========================================================================== */


/* ==========================================================================
   HEADER - Base Styles

   Variants: menu (full nav), lp-clean (logo only),
             lp-cta (logo + button), lp-contact (logo + link)
   Breakpoints: all 4
   ========================================================================== */

.header {
  background-color: var(--color-primary-700);
  border-bottom: 4px solid var(--color-accent-500);
  width: 100%;
}

.header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 121px;
  padding: 0 var(--spacing-xl) 0 var(--spacing-lg);
}


/* --------------------------------------------------------------------------
   Header - Logo
   -------------------------------------------------------------------------- */

.header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.header__logo-img {
  height: auto;
  display: block;
}


/* --------------------------------------------------------------------------
   Header - Navigation Menu (Desktop/DesktopPlus)
   -------------------------------------------------------------------------- */

.header__nav {
  display: flex;
  align-items: center;
}

.header__menu {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.header__menu-item {
  position: relative;
}

.header__menu-link {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  color: var(--color-white);
  background: transparent;
  border: none;
  text-decoration: none;
  padding: var(--spacing-xs);
  cursor: pointer;
  transition: color 0.2s ease;
}

.header__menu-link:hover,
.header__menu-link:focus-visible {
  color: var(--color-accent-500);
}

.header__menu-link:focus-visible {
  outline: 2px solid var(--color-accent-500);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   Header - LP-CTA Button
   -------------------------------------------------------------------------- */

.header__cta-button {
  background-color: var(--color-accent-500);
  color: var(--color-primary-700);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  padding: var(--spacing-md) var(--spacing-80);
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease;
}

.header__cta-button:hover,
.header__cta-button:focus-visible {
  background-color: var(--color-accent-600);
}

.header__cta-button:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   Header - LP-Contact Link
   -------------------------------------------------------------------------- */

.header__contact-link {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  color: var(--color-accent-500);
  text-decoration: none;
  transition: color 0.2s ease;
}

.header__contact-link:hover,
.header__contact-link:focus-visible {
  color: var(--color-white);
}

.header__contact-link:focus-visible {
  outline: 2px solid var(--color-accent-500);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   Header - Hamburger Menu Toggle (Tablet/Mobile)
   -------------------------------------------------------------------------- */

.header__menu-toggle {
  width: 54px;
  height: 54px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
  padding: 0;
}

.header__menu-toggle:hover {
  opacity: 0.8;
}

.header__menu-toggle:focus-visible {
  outline: 2px solid var(--color-accent-500);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   Header - Dropdown (Desktop/DesktopPlus hover menus)
   -------------------------------------------------------------------------- */

.header-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-neutral-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-medium);
  padding: var(--spacing-xl);
  margin-top: var(--spacing-sm);
  min-width: 320px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease, background-color 0.2s ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  list-style: none;
}

.header__menu-item:hover .header-dropdown,
.header-dropdown:hover {
  opacity: 1;
  visibility: visible;
  background-color: var(--color-accent-100);
}

.header-dropdown__link {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  color: var(--color-primary-700);
  text-decoration: none;
  display: block;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.header-dropdown__link:hover,
.header-dropdown__link:focus-visible {
  color: var(--color-primary-500);
  text-decoration: underline;
}


/* --------------------------------------------------------------------------
   Header - Touch Menu (Tablet/Mobile)
   -------------------------------------------------------------------------- */

.header-touch-menu {
  background-color: var(--color-neutral-100);
  padding: var(--spacing-20) var(--spacing-md) var(--spacing-20) var(--spacing-xl);
  display: none;
  transition: background-color 0.2s ease;
}

.header-touch-menu.is-open {
  display: block;
}

.header-touch-menu:hover {
  background-color: var(--color-accent-100);
}

.header-touch-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-touch-menu__section {
  list-style: none;
  margin-bottom: var(--spacing-md);
}

.header-touch-menu__section:last-child {
  margin-bottom: 0;
}

.header-touch-menu__heading {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  color: var(--color-primary-700);
  margin-bottom: var(--spacing-xs);
}

.header-touch-menu__link {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  color: var(--color-primary-700);
  text-decoration: none;
  display: block;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.header-touch-menu__link:hover,
.header-touch-menu__link:focus-visible {
  color: var(--color-primary-500);
  text-decoration: underline;
}

.header-touch-menu__submenu {
  list-style: none;
  margin: var(--spacing-xs) 0 0 var(--spacing-md);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}

.header-touch-menu__submenu-link {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  color: var(--color-primary-700);
  text-decoration: none;
  display: block;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.header-touch-menu__submenu-link:hover,
.header-touch-menu__submenu-link:focus-visible {
  color: var(--color-primary-500);
  text-decoration: underline;
}


/* --------------------------------------------------------------------------
   Header - Custom UI Icon Sizes (Menu Icons)
   -------------------------------------------------------------------------- */

/* 38px for mobile hamburger/close */
.ui-icon--38 {
  width: 38px;
  height: 38px;
  background-size: 228px 76px;
}

.ui-icon--38[data-icon="hamburger"] { background-position: -152px 0px; }
.ui-icon--38[data-icon="close"] { background-position: -190px 0px; }

/* 45px for tablet hamburger/close */
.ui-icon--45 {
  width: 45px;
  height: 45px;
  background-size: 270px 90px;
}

.ui-icon--45[data-icon="hamburger"] { background-position: -180px 0px; }
.ui-icon--45[data-icon="close"] { background-position: -225px 0px; }


/* --------------------------------------------------------------------------
   Header - Responsive
   -------------------------------------------------------------------------- */

/* DesktopPlus: Constrain to 1920px */
@media (min-width: 1920px) {
  .header__container {
    max-width: 1920px;
    margin: 0 auto;
  }
}

/* Desktop: Reduced CTA padding */
@media (min-width: 1150px) and (max-width: 1919px) {
  .header__cta-button {
    padding: var(--spacing-12) var(--spacing-3xl);
  }

  .header__contact-link {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }
}

/* Tablet: Icon size 45px, reduced CTA padding */
@media (min-width: 768px) and (max-width: 1149px) {
  .header__menu-toggle .ui-icon {
    width: 45px;
    height: 45px;
    background-size: 270px 90px;
  }

  .header__menu-toggle .ui-icon[data-icon="hamburger"] {
    background-position: -180px 0px;
  }

  .header__menu-toggle .ui-icon[data-icon="close"] {
    background-position: -225px 0px;
  }

  .header__cta-button {
    padding: var(--spacing-12) var(--spacing-3xl);
  }

  .header__contact-link {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }

  /* Touch menu: Absolute card anchored below header */
  .header-touch-menu {
    position: absolute;
    top: 100%;
    right: var(--spacing-lg);
    width: 400px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-medium);
    z-index: 1000;
  }
}

/* Mobile: Icon size 38px, vertical LP layouts */
@media (max-width: 767px) {
  .header__menu-toggle .ui-icon {
    width: 38px;
    height: 38px;
    background-size: 228px 76px;
  }

  .header__menu-toggle .ui-icon[data-icon="hamburger"] {
    background-position: -152px 0px;
  }

  .header__menu-toggle .ui-icon[data-icon="close"] {
    background-position: -190px 0px;
  }

  /* LP-Clean: Center logo */
  .header--lp-clean .header__container {
    justify-content: center;
  }

  /* LP-CTA and LP-Contact: Vertical stacked layout */
  .header--lp-cta .header__container,
  .header--lp-contact .header__container {
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-12);
    height: auto;
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
  }

  .header__cta-button {
    padding: var(--spacing-12) var(--spacing-3xl);
  }

  /* Touch menu: Full-width accordion */
  .header-touch-menu {
    width: 100%;
  }
}


/* ==========================================================================
   HERO - Base Styles

   Variants: simple, reverse, atf-center, atf-left, atf-right
   Breakpoints: all 4
   ========================================================================== */

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

.hero__content {
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-40);
}

.hero__headline {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  margin: 0;
}


/* --------------------------------------------------------------------------
   Hero - Simple (navy background, headline only)
   -------------------------------------------------------------------------- */

.hero--simple {
  height: 124px;
  background: linear-gradient(
    0deg,
    var(--color-primary) 0%,
    var(--color-accent) 50%
  );
  border-bottom: 4px solid var(--color-accent-500);
}

.hero--simple .hero__content {
  background-color: var(--color-primary-700);
  height: 100%;
  justify-content: center;
}

.hero--simple .hero__headline {
  color: var(--color-white);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
}


/* --------------------------------------------------------------------------
   Hero - Reverse (light background, headline only)
   -------------------------------------------------------------------------- */

.hero--reverse {
  height: 124px;
  background: radial-gradient(
    closest-side,
    rgba(245, 245, 245, 1) 0%,
    var(--color-accent) 100%
  );
  border-bottom: 4px solid var(--color-primary-700);
}

.hero--reverse .hero__content {
  background-color: transparent;
  height: 100%;
  justify-content: center;
}

.hero--reverse .hero__headline {
  color: var(--color-primary-700);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
}


/* --------------------------------------------------------------------------
   Hero - ATF (Above The Fold) - shared base
   -------------------------------------------------------------------------- */

.hero--atf {
  height: 820px;
  border-bottom: 4px solid var(--color-accent-500);
  overflow: hidden;
}

.hero__image-container {
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-40);
  right: var(--spacing-40);
  bottom: var(--spacing-40);
  z-index: 1;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.hero--atf::before {
  z-index: 2;
}

.hero__text {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  max-width: 554px;
}

.hero--atf .hero__headline {
  color: var(--color-white);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  margin-bottom: var(--spacing-xl);
}

.hero__cta-text {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--spacing-xl);
}

.hero__button {
  background-color: var(--color-accent-500);
  color: var(--color-primary-700);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  padding: var(--spacing-md) var(--spacing-80);
  border-radius: var(--radius-sm);
  align-self: flex-start;
  transition: background-color 0.2s ease;
}

.hero__button:hover,
.hero__button:focus-visible {
  background-color: var(--color-accent-600);
}

.hero__button:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   Hero - ATF Center
   -------------------------------------------------------------------------- */

.hero--atf-center {
  background: linear-gradient(180deg, #D4AF37 0%, #1B1464 100%);
}

.hero--atf-center::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.3) 0%, rgba(27, 20, 100, 0.7) 100%);
}

.hero--atf-center .hero__text {
  left: 50%;
  transform: translateX(-50%);
  bottom: 100px;
  text-align: center;
  align-items: center;
}

.hero--atf-center .hero__button {
  align-self: center;
}


/* --------------------------------------------------------------------------
   Hero - ATF Left
   -------------------------------------------------------------------------- */

.hero--atf-left {
  background: linear-gradient(225deg, #D4AF37 0%, #1B1464 100%);
}

.hero--atf-left::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(225deg, rgba(212, 175, 55, 0.3) 0%, rgba(27, 20, 100, 0.7) 100%);
}

.hero--atf-left .hero__text {
  left: calc(var(--spacing-40) + 60px);
  bottom: 100px;
}


/* --------------------------------------------------------------------------
   Hero - ATF Right
   -------------------------------------------------------------------------- */

.hero--atf-right {
  background: linear-gradient(135deg, #D4AF37 0%, #1B1464 100%);
}

.hero--atf-right::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.3) 0%, rgba(27, 20, 100, 0.7) 100%);
}

.hero--atf-right .hero__text {
  right: calc(var(--spacing-40) + 60px);
  bottom: 100px;
  text-align: right;
  align-items: flex-end;
}

.hero--atf-right .hero__button {
  align-self: flex-end;
}


/* --------------------------------------------------------------------------
   Hero - Responsive
   -------------------------------------------------------------------------- */

/* DesktopPlus: Constrain to 1920px */
@media (min-width: 1920px) {
  .hero {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Desktop: Reduced ATF height */
@media (min-width: 1150px) and (max-width: 1919px) {
  .hero--atf {
    height: 700px;
  }

  .hero--atf-center .hero__text {
    bottom: 100px;
  }

  .hero--atf-left .hero__text {
    left: calc(var(--spacing-40) + 60px);
    top: auto;
    bottom: 100px;
  }

  .hero--atf-right .hero__text {
    right: calc(var(--spacing-40) + 60px);
    top: auto;
    bottom: 100px;
  }
}

/* Tablet: Typography scaling, reduced ATF height */
@media (min-width: 768px) and (max-width: 1149px) {
  .hero--simple .hero__headline,
  .hero--reverse .hero__headline,
  .hero--atf .hero__headline {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }

  .hero--atf {
    height: 600px;
  }

  .hero__image-container {
    top: var(--spacing-12);
    left: var(--spacing-40);
    right: var(--spacing-40);
    bottom: var(--spacing-3xl);
  }

  /* Center text vertically on tablet */
  .hero--atf-center .hero__text {
    top: 50%;
    transform: translate(-50%, -50%);
    bottom: auto;
  }

  .hero--atf-left .hero__text,
  .hero--atf-right .hero__text {
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
  }

  .hero--atf-left .hero__text {
    left: calc(var(--spacing-40) + 60px);
  }

  .hero--atf-right .hero__text {
    right: calc(var(--spacing-40) + 60px);
  }
}

/* Mobile: Typography scaling, aspect ratio ATF */
@media (max-width: 767px) {
  .hero--simple .hero__headline,
  .hero--reverse .hero__headline,
  .hero--atf .hero__headline {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }

  .hero__content {
    padding: 0 var(--spacing-lg);
  }

  .hero--atf {
    height: auto;
    aspect-ratio: 767 / 578;
    min-height: 286px;
    max-height: 578px;
  }

  .hero__image-container {
    top: var(--spacing-12);
    left: var(--spacing-12);
    right: var(--spacing-12);
    bottom: var(--spacing-xl);
  }

  .hero__text {
    max-width: calc(100% - var(--spacing-lg));
    padding: var(--spacing-12);
  }

  .hero--simple .hero__headline,
  .hero--reverse .hero__headline {
    text-align: center;
    width: 100%;
  }

  .hero--atf .hero__headline {
    margin-bottom: var(--spacing-12);
  }

  .hero__cta-text {
    margin-bottom: var(--spacing-12);
  }

  .hero__button {
    padding: var(--spacing-sm) var(--spacing-3xl);
  }

  /* Center text vertically on mobile */
  .hero--atf-center .hero__text {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    bottom: auto;
    right: auto;
    text-align: center;
    align-items: center;
  }

  .hero--atf-left .hero__text,
  .hero--atf-right .hero__text {
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
    left: var(--spacing-12);
    right: var(--spacing-12);
  }
}


/* ==========================================================================
   HERO CAROUSEL

   Video/image slide carousel with dot pagination and arrow navigation.
   Breakpoints: all 4
   ========================================================================== */

.hero-carousel {
  position: relative;
  width: 100%;
  height: 820px;
  overflow: hidden;
}

/* Custom UI Icon Sizes for Carousel */

/* 8px dots (inactive) */
.ui-icon--8 {
  width: 8px;
  height: 8px;
  background-size: 48px 16px;
}

.ui-icon--8[data-icon="dot"] {
  background-position: -16px -8px;
}

/* 12px dots (active) */
.ui-icon--12 {
  width: 12px;
  height: 12px;
  background-size: 72px 24px;
}

.ui-icon--12[data-icon="dot"] {
  background-position: -24px -12px;
}

/* 40px arrows (mobile) */
.ui-icon--40 {
  width: 40px;
  height: 40px;
  background-size: 240px 80px;
}

.ui-icon--40[data-icon="arrow-left"],
.ui-icon--40[data-icon="arrow-right"] {
  background-position: -40px 0px;
}


/* --------------------------------------------------------------------------
   Hero Carousel - Slide Track
   -------------------------------------------------------------------------- */

.hero-carousel__slide-track {
  display: flex;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-carousel__slide {
  min-width: 100%;
  height: 100%;
  position: relative;
}

.hero-carousel__video-port {
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient(
    180deg,
    var(--color-primary-navy-20) 0%,
    rgba(255, 255, 255, 0.2) 100%
  );
}

.hero-carousel__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.33;
}


/* --------------------------------------------------------------------------
   Hero Carousel - Text Overlay
   -------------------------------------------------------------------------- */

.hero-carousel__overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  max-width: 1150px;
  width: 100%;
  padding: 0 var(--spacing-40);
  align-items: center;
  text-align: center;
}

.hero-carousel__eyebrow {
  font-family: var(--font-family-body);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-500);
  text-transform: uppercase;
}

.hero-carousel__headline {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0;
}

.hero-carousel__cta-text {
  font-family: var(--font-family-body);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-700);
  line-height: 1.5;
  max-width: 800px;
}

.hero-carousel__button {
  background-color: var(--color-primary-700);
  color: var(--color-white);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  padding: var(--spacing-md) var(--spacing-80);
  border-radius: var(--radius-sm);
  align-self: center;
  transition: background-color 0.2s ease;
}

.hero-carousel__button:hover {
  background-color: var(--color-accent-500);
  color: var(--color-white);
}

.hero-carousel__button:active {
  background-color: var(--color-accent-500);
  color: var(--color-white);
}

.hero-carousel__button:focus-visible {
  background-color: var(--color-accent-500);
  color: var(--color-white);
  outline: 2px solid var(--color-accent-500);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   Hero Carousel - Navigation Group
   -------------------------------------------------------------------------- */

.hero-carousel__nav-group {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-40);
}

/* Dot Pagination */
.hero-carousel__dots {
  display: flex;
  gap: var(--spacing-12);
  align-items: center;
}

.hero-carousel__dot {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  transition: filter 0.3s ease;
}

.hero-carousel__dot:hover {
  filter: brightness(0) saturate(100%) invert(73%) sepia(47%) saturate(491%) hue-rotate(10deg) brightness(91%) contrast(89%);
}

.hero-carousel__dot:focus-visible {
  outline: 2px solid var(--color-accent-500);
  outline-offset: 2px;
}

/* Arrow Navigation */
.hero-carousel__arrows {
  display: flex;
  gap: 317px;
  align-items: center;
}

.hero-carousel__arrow {
  width: var(--spacing-2xl);
  height: var(--spacing-2xl);
  background-color: var(--color-neutral-0);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-medium);
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-carousel__arrow:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
}

.hero-carousel__arrow:hover .ui-icon {
  filter: brightness(0) saturate(100%) invert(8%) sepia(94%) saturate(3268%) hue-rotate(237deg) brightness(93%) contrast(101%);
}

.hero-carousel__arrow:active {
  transform: translateY(0);
}

.hero-carousel__arrow:active .ui-icon {
  filter: brightness(0) saturate(100%) invert(8%) sepia(94%) saturate(3268%) hue-rotate(237deg) brightness(93%) contrast(101%);
}

.hero-carousel__arrow:focus-visible {
  outline: 2px solid var(--color-primary-700);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   Hero Carousel - Responsive
   -------------------------------------------------------------------------- */

/* Desktop & DesktopPlus: Lower overlay position */
@media (min-width: 1150px) {
  .hero-carousel__overlay {
    top: auto;
    bottom: 140px;
    transform: translateX(-50%);
  }
}

/* DesktopPlus: Constrain to 1920px */
@media (min-width: 1920px) {
  .hero-carousel {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Desktop: Reduced height */
@media (min-width: 1150px) and (max-width: 1919px) {
  .hero-carousel {
    height: 648px;
  }
}

/* Tablet: Reduced height */
@media (min-width: 768px) and (max-width: 1149px) {
  .hero-carousel {
    height: 600px;
  }

  .hero-carousel__arrows {
    gap: 200px;
  }
}

/* Mobile: Aspect ratio, typography scaling */
@media (max-width: 767px) {
  .hero-carousel {
    height: auto;
    aspect-ratio: 767 / 575;
    min-height: 285px;
    max-height: 575px;
  }

  .hero-carousel__overlay {
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-lg);
    transform: translate(-50%, calc(-50% - 32px));
  }

  .hero-carousel__eyebrow {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-heavy);
  }

  .hero-carousel__headline {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
  }

  .hero-carousel__cta-text {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-heavy);
  }

  .hero-carousel__button {
    padding: var(--spacing-sm) var(--spacing-3xl);
  }

  .hero-carousel__nav-group {
    bottom: 36px;
    gap: var(--spacing-lg);
  }

  .hero-carousel__arrows {
    gap: 100px;
  }

  .hero-carousel__arrow {
    width: var(--spacing-40);
    height: var(--spacing-40);
  }

  /* Scale down arrow icons to 40px on mobile */
  .hero-carousel__arrow .ui-icon--48 {
    width: 40px;
    height: 40px;
    background-size: 240px 80px;
  }

  .hero-carousel__arrow .ui-icon--48[data-icon="arrow-left"],
  .hero-carousel__arrow .ui-icon--48[data-icon="arrow-right"] {
    background-position: -40px 0px;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .hero-carousel__slide-track {
    transition: none;
  }
}


/* ==========================================================================
   FOOTER SIMPLE

   Minimal footer for landing pages. Logo + sub-footer only.
   Variants: default (navy), reverse (light)
   ========================================================================== */

.footer-simple {
  background-color: var(--color-primary-700);
  border-top: 4px solid var(--color-accent-500);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-2xl) 0 0 0;
}

.footer-simple--reverse {
  background-color: var(--color-neutral-100);
  border-top: none;
}

.footer-simple__logo-link {
  display: block;
  margin-bottom: var(--spacing-2xl);
}

.footer-simple__logo {
  width: 214px;
  height: 113px;
}

.footer-simple__sub-footer {
  width: 100%;
  background-color: var(--color-primary-900);
  height: var(--spacing-2xl);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-12) var(--spacing-xl);
}

.footer-simple__copyright,
.footer-simple__separator {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-text-muted);
}

.footer-simple__policy-link {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-xs);
  color: var(--color-text-muted);
  text-decoration: underline;
}

.footer-simple__policy-link:hover {
  color: var(--color-accent-400);
}

.footer-simple__policy-link:focus-visible {
  outline: 2px solid var(--color-accent-500);
  outline-offset: 2px;
}


/* ==========================================================================
   FOOTER MAIN

   Full navigation footer with 4-column nav, newsletter, mobile accordion.
   ========================================================================== */

.footer-main {
  background-color: var(--color-primary-700);
  border-top: 4px solid var(--color-accent-500);
}

.footer-main__main-footer {
  padding: var(--spacing-2xl);
  max-width: 1920px;
  margin: 0 auto;
}


/* --------------------------------------------------------------------------
   Footer Main - Logo Row
   -------------------------------------------------------------------------- */

.footer-main__logo-row {
  margin-bottom: var(--spacing-lg);
}

.footer-main__logo-link {
  display: block;
}

.footer-main__logo {
  width: 214px;
  height: 113px;
}


/* --------------------------------------------------------------------------
   Footer Main - Navigation Columns
   -------------------------------------------------------------------------- */

.footer-main__nav-columns {
  display: flex;
  gap: var(--spacing-lg);
}

/* Left column: 3 menus side-by-side on desktop */
.footer-main__col-left {
  display: flex;
  flex: 3;
  gap: var(--spacing-lg);
}

.footer-main__col-left .footer-main__menu-module {
  flex: 1;
}

/* Right column: Company + Form stacked */
.footer-main__col-right {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--spacing-lg);
}

/* Menu Module */
.footer-main__menu-module {
  padding: var(--spacing-12);
}

.footer-main__section-heading {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  color: var(--color-text-reverse);
  margin-bottom: var(--spacing-12);
}

.footer-main__nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-12) 0;
}

.footer-main__nav-list a {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-menu);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-reverse);
  text-decoration: none;
}

.footer-main__nav-list a:hover {
  color: var(--color-accent-400);
}

.footer-main__nav-list a:focus-visible {
  outline: 2px solid var(--color-accent-500);
  outline-offset: 2px;
}

.footer-main__nav-list a.is-disabled,
.footer-main__accordion-links a.is-disabled {
  color: var(--color-neutral-400);
  pointer-events: none;
  cursor: default;
}

.footer-main__nav-list a.is-disabled:hover,
.footer-main__accordion-links a.is-disabled:hover {
  color: var(--color-neutral-400);
}


/* --------------------------------------------------------------------------
   Footer Main - Newsletter Form
   -------------------------------------------------------------------------- */

.footer-main__form-newsletter {
  background-color: var(--color-neutral-100);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xl) var(--spacing-lg);
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}

.footer-main__form-newsletter--mobile {
  display: none;
}

.footer-main__form-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  color: var(--color-text-heading);
  margin: 0;
}

.footer-main__form-description {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: 1.5;
  color: var(--color-text-body);
  margin: 0;
}

.footer-main__form-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.footer-main__label {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-body);
  line-height: 1.5;
  font-weight: var(--font-weight-heavy);
  color: var(--color-text-body);
}

.footer-main__input {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-form);
  color: var(--color-text-body);
  padding: var(--spacing-12) var(--spacing-md);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
}

.footer-main__input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 2px var(--color-primary-navy-20);
}

.footer-main__helper-text {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-xs);
  font-style: italic;
  color: var(--color-text-body);
}

.footer-main__optin-line {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
}

.footer-main__checkbox {
  width: var(--spacing-md);
  height: var(--spacing-md);
  flex-shrink: 0;
  margin-top: 2px;
}

.footer-main__optin-text {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-text-body);
}

.footer-main__submit-btn {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-body);
  line-height: var(--line-height-form);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-text-reverse);
  background-color: var(--color-primary-700);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--spacing-12) var(--spacing-3xl);
  cursor: pointer;
  transition: background-color 0.2s ease;
  align-self: flex-start;
}

.footer-main__submit-btn:hover {
  background-color: var(--color-primary-600);
}

.footer-main__submit-btn:focus-visible {
  outline: 2px solid var(--color-accent-500);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   Footer Main - Sub-footer
   -------------------------------------------------------------------------- */

.footer-main__sub-footer {
  width: 100%;
  background-color: var(--color-primary-900);
  height: var(--spacing-2xl);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-12) var(--spacing-xl);
}

.footer-main__sub-footer span {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-text-muted);
}

.footer-main__sub-footer a {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-xs);
  color: var(--color-text-muted);
  text-decoration: underline;
}

.footer-main__sub-footer a:hover {
  color: var(--color-accent-400);
}


/* --------------------------------------------------------------------------
   Footer Main - Mobile Accordion Menu
   -------------------------------------------------------------------------- */

.footer-main__mobile-accordion {
  display: none;
  width: 100%;
  background: var(--color-primary-700);
  padding: var(--spacing-xl) var(--spacing-12);
}

.footer-main__accordion-trigger {
  width: 100%;
  background: transparent;
  border: none;
  padding: var(--spacing-sm) var(--spacing-12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
}

.footer-main__accordion-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  color: var(--color-text-reverse);
}

.footer-main__accordion-arrow {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  font-weight: var(--font-weight-heavy);
  color: var(--color-text-reverse);
  transition: transform 0.3s ease;
}

.footer-main__accordion-trigger[aria-expanded="true"] .footer-main__accordion-arrow {
  transform: rotate(90deg);
}

.footer-main__accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: var(--color-accent-100);
}

.footer-main__accordion-panel.is-open {
  max-height: 500px;
  padding: var(--spacing-xl) var(--spacing-12);
}

.footer-main__accordion-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: 0;
  margin: 0;
  list-style: none;
}

.footer-main__accordion-links li {
  padding: var(--spacing-12);
}

.footer-main__accordion-links a {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
  font-weight: var(--font-weight-heavy);
  color: var(--color-primary-700);
  text-decoration: none;
}

.footer-main__accordion-links a:hover {
  color: var(--color-primary-500);
}


/* --------------------------------------------------------------------------
   Footer - Responsive
   -------------------------------------------------------------------------- */

/* Tablet */
@media (min-width: 768px) and (max-width: 1149px) {
  .footer-main__main-footer {
    padding: var(--spacing-xl);
  }

  .footer-main__nav-columns {
    display: flex;
    gap: var(--spacing-xl);
    align-items: flex-start;
  }

  /* Left column: stack vertically on tablet */
  .footer-main__col-left {
    flex-direction: column;
    flex: 1;
    gap: 0;
  }

  .footer-main__col-right {
    flex: 1;
    align-self: flex-start;
  }

  .footer-main__section-heading {
    font-size: var(--font-size-h3);
  }

  .footer-main__nav-list a {
    font-size: var(--font-size-body);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .footer-simple__sub-footer {
    flex-direction: column;
    height: auto;
    gap: var(--spacing-xs);
    padding: var(--spacing-12);
  }

  .footer-main__main-footer {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-main__logo-row {
    text-align: center;
    margin-bottom: var(--spacing-lg);
  }

  .footer-main__logo {
    width: 171px;
    height: 90px;
  }

  .footer-main__nav-columns {
    display: none;
  }

  .footer-main__mobile-accordion {
    display: block;
    width: 100%;
  }

  .footer-main__form-newsletter--mobile {
    display: flex;
    width: 100%;
    margin-top: var(--spacing-lg);
  }

  .footer-main__sub-footer {
    flex-direction: column;
    height: auto;
    gap: var(--spacing-xs);
    padding: var(--spacing-12);
  }
}


/* ==========================================================================
   Header - Responsive Visibility

   Desktop/DesktopPlus: Show full nav menu, hide hamburger toggle
   Tablet/Mobile: Show hamburger toggle, hide full nav menu
   ========================================================================== */

/* Hamburger hidden on desktop+ */
.header__menu-toggle {
  display: none;
}

/* Nav visible on desktop+ (base state) */
.header__nav {
  display: flex;
}

/* Tablet: Show hamburger, hide desktop nav */
@media (max-width: 1149px) {
  .header__menu-toggle {
    display: flex;
  }

  .header__nav {
    display: none;
  }
}


/* ==========================================================================
   Sticky Menu - Position and Responsive Visibility

   The sticky menu wrapper sticks below the header when scrolling.
   Desktop/Tablet shows horizontal bar; Mobile shows compact bar + dropdown.
   ========================================================================== */

.sticky-menu-wrapper {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Desktop/Tablet (768px+): Show desktop bar, hide mobile bar */
.sticky-menu--desktop {
  display: flex;
}

.sticky-menu--mobile {
  display: none;
}

/* Tablet (768px–1149px): Scale items down to fit full width */
@media (min-width: 768px) and (max-width: 1149px) {
  .sticky-menu--desktop {
    height: 52px;
    gap: var(--spacing-xs);
  }

  .sticky-menu__container {
    gap: var(--spacing-xs);
  }

  .sticky-menu__item {
    font-size: 14px;
    line-height: var(--line-height-h6);
    padding: var(--spacing-xs) var(--spacing-6);
  }

  .sticky-menu__separator {
    font-size: 14px;
    line-height: var(--line-height-h6);
  }

  .sticky-menu__cta {
    font-size: 14px;
    line-height: var(--line-height-h6);
    padding: var(--spacing-xs) var(--spacing-sm);
    margin-left: 18px;
  }

  .sticky-menu__cta::before {
    font-size: 14px;
    line-height: var(--line-height-h6);
    right: calc(100% + 6px);
  }
}

/* Mobile (below 768px): Show mobile bar, hide desktop bar */
@media (max-width: 767px) {
  .sticky-menu--desktop {
    display: none;
  }

  .sticky-menu--mobile {
    display: block;
  }
}
/* ==========================================================================
   Purposeful Media MVW2 - Contextual Section Organisms

   13 contextual section components consolidated from Tier 2 responsive demos.

   Import order: variables.css → sprites.css → reset.css → atoms-master.css
                 → molecules-master.css → organisms-page-shell.css → THIS FILE

   Created: February 3, 2026
   ========================================================================== */


/* ==========================================================================
   1. PAGE OVERVIEW
   Overview/introduction section at the top of content pages.
   ========================================================================== */

.section-page-overview {
  background-color: var(--color-neutral-100);
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.section-page-overview__content-padding {
  padding: 0 var(--spacing-3xl);
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  max-width: 1920px;
}

.section-page-overview__overview-title {
  padding: var(--spacing-xl) var(--spacing-md) 0 var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
}

.section-page-overview__headline {
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: flex-start;
  justify-content: flex-start;
}

.section-page-overview__h2 {
  color: var(--color-text-heading);
  text-align: left;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
}

.section-page-overview__introduction {
  padding: var(--spacing-xl) var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
}

.section-page-overview__paragraph-text {
  background-color: var(--color-neutral-100);
  padding: var(--spacing-10);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  max-width: 1792px;
}

.section-page-overview__heading-group {
  display: flex;
  flex-direction: row;
  gap: 22px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
}

.section-page-overview__h3 {
  color: var(--color-text-heading);
  text-align: left;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  flex: 1;
}

.section-page-overview__paragraph-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
}

.section-page-overview__paragraph {
  color: var(--color-text-body);
  text-align: left;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-regular);
  flex: 1;
}

/* Page Overview - Responsive */

@media (min-width: 1920px) {
  .section-page-overview {
    max-width: 1920px;
    margin: 0 auto;
  }
}

@media (min-width: 768px) and (max-width: 1149px) {
  .section-page-overview__content-padding {
    padding: 0 var(--spacing-xl);
  }
}

@media (max-width: 767px) {
  .section-page-overview__content-padding {
    padding: 0 var(--spacing-md);
  }

  .section-page-overview__introduction {
    padding: var(--spacing-xl);
  }
}


/* ==========================================================================
   2. PAGE CONTENT
   Main content area for standard pages with hierarchical headings.
   ========================================================================== */

.section-page-content {
  background-color: var(--color-neutral-100);
  padding: var(--spacing-3xl);
  display: flex;
  flex-direction: row;
  gap: var(--spacing-xl);
  align-items: center;
  justify-content: flex-start;
}

.section-page-content__content-area {
  background-color: var(--color-neutral-100);
  padding: var(--spacing-lg) var(--spacing-md);
  display: block;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
}

.section-page-content__introduction {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
  align-items: center;
  justify-content: center;
  align-self: stretch;
}

.section-page-content__h1 {
  color: var(--color-text-heading);
  text-align: left;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  align-self: stretch;
}

.section-page-content__paragraph {
  color: var(--color-text-body);
  text-align: left;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-regular);
  align-self: stretch;
}

.section-page-content__subsection {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
}

.section-page-content__h2 {
  color: var(--color-text-heading);
  text-align: left;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  align-self: stretch;
}

.section-page-content__detail-section {
  padding: var(--spacing-sm) 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
  align-items: center;
  justify-content: center;
  align-self: stretch;
}

.section-page-content__h2-large {
  color: var(--color-text-heading);
  text-align: left;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  align-self: stretch;
}

.section-page-content__expanded-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
}

.section-page-content__h3 {
  color: var(--color-text-heading);
  text-align: left;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  align-self: stretch;
}

.section-page-content__bulleted-list {
  color: var(--color-text-body);
  text-align: left;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-regular);
  align-self: stretch;
  padding-left: var(--spacing-lg);
}

.section-page-content__bulleted-list li {
  margin-bottom: var(--spacing-xs);
}

/* Page Content - Responsive */

@media (min-width: 1920px) {
  .section-page-content {
    max-width: 1920px;
    margin: 0 auto;
  }
}

@media (min-width: 768px) and (max-width: 1149px) {
  .section-page-content {
    padding: var(--spacing-3xl) var(--spacing-2xl);
  }
}

@media (max-width: 767px) {
  .section-page-content {
    padding: var(--spacing-3xl) var(--spacing-lg);
  }
}


/* --------------------------------------------------------------------------
   Content Typography — bare HTML from the_content() and ACF WYSIWYG fields.
   Scoped to content areas so it doesn't bleed into component markup.
   -------------------------------------------------------------------------- */

.section-page-content__content-area h1,
.section-page-content__content-area h2,
.section-page-content__content-area h3,
.section-page-content__content-area h4,
.section-page-content__content-area h5,
.section-page-content__content-area h6,
.card-pillar__body h1,
.card-pillar__body h2,
.card-pillar__body h3,
.card-pillar__body h4,
.card-pillar__body h5,
.card-pillar__body h6,
.section-landing-page__content h1,
.section-landing-page__content h2,
.section-landing-page__content h3,
.section-landing-page__content h4,
.section-landing-page__content h5,
.section-landing-page__content h6 {
  font-family: var(--font-family-heading) !important;
  font-weight: var(--font-weight-heavy) !important;
  text-transform: uppercase;
  color: var(--color-text-heading);
  margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
}

.section-page-content__content-area h1,
.card-pillar__body h1,
.section-landing-page__content h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
}

.section-page-content__content-area h2,
.card-pillar__body h2,
.section-landing-page__content h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
}

.section-page-content__content-area h3,
.card-pillar__body h3,
.section-landing-page__content h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}

.section-page-content__content-area h4,
.card-pillar__body h4,
.section-landing-page__content h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
}

.section-page-content__content-area h5,
.card-pillar__body h5,
.section-landing-page__content h5 {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
}

.section-page-content__content-area h6,
.card-pillar__body h6,
.section-landing-page__content h6 {
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
}

.section-page-content__content-area p,
.card-pillar__body p,
.section-landing-page__content p,
.section-page-overview__paragraph p,
.card-cta__paragraph p,
.section-contact-us__paragraph p,
.section-resource-offer__paragraph p {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-body);
  margin: 0 0 var(--spacing-md) 0;
}

.section-page-content__content-area ul,
.section-page-content__content-area ol,
.card-pillar__body ul,
.card-pillar__body ol,
.section-landing-page__content ul,
.section-landing-page__content ol {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-body);
  margin: 0 0 var(--spacing-md) 0;
  padding-left: var(--spacing-lg);
  list-style-position: outside;
}

.section-page-content__content-area li,
.card-pillar__body li,
.section-landing-page__content li {
  margin-bottom: var(--spacing-xs);
}

.section-page-content__content-area a,
.card-pillar__body a,
.section-landing-page__content a {
  color: var(--color-accent-600);
  text-decoration: underline;
}

.section-page-content__content-area a:hover,
.card-pillar__body a:hover,
.section-landing-page__content a:hover {
  color: var(--color-accent-500);
}

/* --------------------------------------------------------------------------
   WordPress Image Alignment — classes generated by the classic editor.
   Scoped to content areas to avoid bleeding into component markup.
   -------------------------------------------------------------------------- */

.section-page-content__content-area img,
.card-pillar__body img,
.section-landing-page__content img {
  max-width: 100%;
  height: auto;
}

.section-page-content__content-area .alignright,
.card-pillar__body .alignright,
.section-landing-page__content .alignright {
  float: right;
  margin: 0 0 var(--spacing-md) var(--spacing-md);
}

.section-page-content__content-area .alignleft,
.card-pillar__body .alignleft,
.section-landing-page__content .alignleft {
  float: left;
  margin: 0 var(--spacing-md) var(--spacing-md) 0;
}

.section-page-content__content-area .aligncenter,
.card-pillar__body .aligncenter,
.section-landing-page__content .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--spacing-md);
}

.section-page-content__content-area .alignnone,
.card-pillar__body .alignnone,
.section-landing-page__content .alignnone {
  display: block;
  margin-bottom: var(--spacing-md);
}

/* WordPress captions */
.section-page-content__content-area .wp-caption,
.card-pillar__body .wp-caption,
.section-landing-page__content .wp-caption {
  max-width: 100%;
  padding: var(--spacing-xs);
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
}

.section-page-content__content-area .wp-caption img,
.card-pillar__body .wp-caption img,
.section-landing-page__content .wp-caption img {
  display: block;
  width: 100%;
  height: auto;
}

.section-page-content__content-area .wp-caption-text,
.card-pillar__body .wp-caption-text,
.section-landing-page__content .wp-caption-text {
  font-family: var(--font-family-body);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--spacing-xs);
}

/* Clear floats after content with aligned images */
.section-page-content__content-area::after,
.card-pillar__body::after,
.section-landing-page__content::after {
  content: '';
  display: table;
  clear: both;
}

/* Mobile: stack aligned images full-width */
@media (max-width: 767px) {
  .section-page-content__content-area .alignright,
  .section-page-content__content-area .alignleft,
  .card-pillar__body .alignright,
  .card-pillar__body .alignleft,
  .section-landing-page__content .alignright,
  .section-landing-page__content .alignleft {
    float: none;
    display: block;
    margin: 0 auto var(--spacing-md) auto;
  }
}

/* --------------------------------------------------------------------------
   Content Tables — semantic <table> from the block editor / WYSIWYG fields.
   Scoped to content areas so it doesn't bleed into component markup.
   -------------------------------------------------------------------------- */

/* Table wrapper — horizontal scroll on overflow */
.section-page-content__content-area .table-scroll-wrapper,
.card-pillar__body .table-scroll-wrapper,
.section-landing-page__content .table-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 var(--spacing-md) 0;
}

.section-page-content__content-area table,
.card-pillar__body table,
.section-landing-page__content table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 0 var(--spacing-md) 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-body);
}

/* Header row */
.section-page-content__content-area th,
.card-pillar__body th,
.section-landing-page__content th {
  background: var(--color-primary-700);
  color: #ffffff;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  font-weight: var(--font-weight-heavy);
  text-align: left;
  padding: var(--spacing-12) var(--spacing-md);
  border-bottom: 2px solid var(--color-accent-500);
}

/* Body cells */
.section-page-content__content-area td,
.card-pillar__body td,
.section-landing-page__content td {
  padding: var(--spacing-12) var(--spacing-md);
  font-weight: var(--font-weight-regular);
}

/* Row borders */
.section-page-content__content-area tbody tr,
.card-pillar__body tbody tr,
.section-landing-page__content tbody tr {
  border-bottom: 1px solid var(--color-border-subtle);
}

.section-page-content__content-area tbody tr:last-child,
.card-pillar__body tbody tr:last-child,
.section-landing-page__content tbody tr:last-child {
  border-bottom: none;
}

/* Striped variant — add "is-style-stripes" class in block editor */
.section-page-content__content-area table.is-style-stripes tbody tr:nth-child(even),
.card-pillar__body table.is-style-stripes tbody tr:nth-child(even),
.section-landing-page__content table.is-style-stripes tbody tr:nth-child(even) {
  background: var(--color-neutral-50);
}

/* Reset WP default stripe background */
.section-page-content__content-area table.is-style-stripes tbody tr,
.card-pillar__body table.is-style-stripes tbody tr,
.section-landing-page__content table.is-style-stripes tbody tr {
  background: transparent;
}

.section-page-content__content-area table.is-style-stripes tbody tr:nth-child(even),
.card-pillar__body table.is-style-stripes tbody tr:nth-child(even),
.section-landing-page__content table.is-style-stripes tbody tr:nth-child(even) {
  background: var(--color-neutral-50);
}

/* Bordered variant — full cell borders */
.section-page-content__content-area table.table-bordered,
.card-pillar__body table.table-bordered,
.section-landing-page__content table.table-bordered {
  border: 1px solid var(--color-border-subtle);
}

.section-page-content__content-area table.table-bordered th,
.card-pillar__body table.table-bordered th,
.section-landing-page__content table.table-bordered th,
.section-page-content__content-area table.table-bordered td,
.card-pillar__body table.table-bordered td,
.section-landing-page__content table.table-bordered td {
  border: 1px solid var(--color-border-subtle);
}

.section-page-content__content-area table.table-bordered thead,
.card-pillar__body table.table-bordered thead,
.section-landing-page__content table.table-bordered thead {
  border-bottom: 2px solid var(--color-border-primary);
}

.section-page-content__content-area table.table-bordered tbody tr,
.card-pillar__body table.table-bordered tbody tr,
.section-landing-page__content table.table-bordered tbody tr {
  border-bottom: none;
}

/* Compact variant — tighter spacing */
.section-page-content__content-area table.table-compact th,
.card-pillar__body table.table-compact th,
.section-landing-page__content table.table-compact th {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 14px;
  line-height: 21px;
}

.section-page-content__content-area table.table-compact td,
.card-pillar__body table.table-compact td,
.section-landing-page__content table.table-compact td {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
}

/* Complex variant — supports multi-line cells with titles and meta */
.section-page-content__content-area table.table-complex td,
.card-pillar__body table.table-complex td,
.section-landing-page__content table.table-complex td {
  padding: var(--spacing-md);
  vertical-align: top;
}

.section-page-content__content-area table.table-complex td strong,
.card-pillar__body table.table-complex td strong,
.section-landing-page__content table.table-complex td strong {
  display: block;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.section-page-content__content-area table.table-complex td small,
.card-pillar__body table.table-complex td small,
.section-landing-page__content table.table-complex td small {
  display: block;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-neutral-400);
  margin-top: var(--spacing-xs);
}

/* Mobile: tighter padding */
@media (max-width: 767px) {
  .section-page-content__content-area th,
  .section-page-content__content-area td,
  .card-pillar__body th,
  .card-pillar__body td,
  .section-landing-page__content th,
  .section-landing-page__content td {
    padding: var(--spacing-sm) var(--spacing-12);
    font-size: var(--font-size-h6);
    line-height: var(--line-height-h6);
  }

  .section-page-content__content-area th,
  .card-pillar__body th,
  .section-landing-page__content th {
    font-size: 14px;
    line-height: 21px;
  }

  .section-page-content__content-area table.table-compact th,
  .card-pillar__body table.table-compact th,
  .section-landing-page__content table.table-compact th,
  .section-page-content__content-area table.table-compact td,
  .card-pillar__body table.table-compact td,
  .section-landing-page__content table.table-compact td {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }

  .section-page-content__content-area table.table-complex td,
  .card-pillar__body table.table-complex td,
  .section-landing-page__content table.table-complex td {
    padding: var(--spacing-sm) var(--spacing-12);
  }
}


/* ==========================================================================
   3. 2 COLUMN CONTACT
   Two-column CTA section with text content and image.
   ========================================================================== */

.section-2column-contact {
  padding: var(--spacing-sm) var(--spacing-3xl);
  display: flex;
  flex-direction: row;
  gap: var(--spacing-20);
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.section-2column-contact__column-group {
  background-color: var(--color-white);
  padding: var(--spacing-md) var(--spacing-3xl);
  display: flex;
  flex-direction: row;
  gap: var(--spacing-20);
  align-items: center;
  justify-content: flex-start;
  width: 1348px;
}

.section-2column-contact__left-column {
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
  padding: var(--spacing-40) var(--spacing-2xl) var(--spacing-3xl) var(--spacing-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 600px;
  box-shadow: var(--shadow-subtle);
}

.section-2column-contact__h2 {
  color: var(--color-text-heading);
  text-align: left;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  align-self: stretch;
}

.section-2column-contact__paragraph {
  color: var(--color-text-body);
  text-align: left;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-regular);
  align-self: stretch;
}

.section-2column-contact__btn {
  background-color: var(--color-btn-primary-default);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md) var(--spacing-80);
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.section-2column-contact__btn:hover {
  background-color: var(--color-btn-primary-hover);
}

.section-2column-contact__btn:active {
  background-color: var(--color-btn-primary-active);
}

.section-2column-contact__btn-label {
  color: var(--color-btn-primary-text);
  text-align: center;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-body);
  line-height: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.section-2column-contact__image {
  flex: 1;
  height: 900px;
  object-fit: cover;
}

/* 2 Column Contact - Responsive */

@media (min-width: 1920px) {
  .section-2column-contact {
    max-width: 1920px;
    margin: 0 auto;
  }
}

@media (min-width: 1150px) and (max-width: 1919px) {
  .section-2column-contact__column-group {
    width: 1349px;
  }

  .section-2column-contact__left-column {
    flex: 1;
    width: auto;
  }

  .section-2column-contact__image {
    flex-shrink: 0;
    width: 600px;
    height: 899px;
  }
}

@media (min-width: 768px) and (max-width: 1149px) {
  .section-2column-contact {
    background-color: var(--color-neutral-100);
    padding: var(--spacing-10) 0;
    justify-content: flex-start;
  }

  .section-2column-contact__column-group {
    width: 100%;
  }

  .section-2column-contact__left-column {
    flex: 1;
    min-width: 500px;
    width: auto;
  }

  .section-2column-contact__h2 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
  }

  .section-2column-contact__btn {
    padding: var(--spacing-sm) var(--spacing-3xl);
  }

  .section-2column-contact__image {
    height: 750px;
  }
}

@media (max-width: 767px) {
  .section-2column-contact {
    background-color: var(--color-neutral-100);
    background-image: none;
    padding: var(--spacing-10) 0;
    justify-content: flex-start;
    overflow: hidden;
  }

  .section-2column-contact__column-group {
    flex-direction: row;
    width: auto;
    padding: var(--spacing-sm);
    gap: var(--spacing-12);
  }

  .section-2column-contact__left-column {
    width: 280px;
    min-width: 280px;
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .section-2column-contact__h2 {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
  }

  .section-2column-contact__paragraph {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }

  .section-2column-contact__btn {
    padding: var(--spacing-sm) var(--spacing-xl);
  }

  .section-2column-contact__image {
    width: 500px;
    min-width: 500px;
    height: 600px;
    object-fit: cover;
    object-position: left center;
  }
}


/* ==========================================================================
   4. 2 COLUMN GRAPHIC
   Dual CTA section with Calendly scheduling and Contact page links.
   ========================================================================== */

.section-2column-graphic {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-xl);
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 var(--spacing-3xl);
  width: 100%;
  height: 760px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.section-2column-graphic__column {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--spacing-3xl);
  height: 100%;
}

.section-2column-graphic__column:last-child {
  justify-content: flex-end;
}

/* CTA Card (shared by 2-Column Graphic) */
.card-cta {
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
  padding: var(--spacing-3xl) var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  align-items: center;
  justify-content: flex-end;
  box-shadow: var(--shadow-subtle);
  width: 600px;
  max-width: 600px;
}

.card-cta__headline {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
}

.card-cta__h2 {
  color: var(--color-text-heading);
  text-align: center;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  align-self: stretch;
}

.card-cta__paragraph {
  color: var(--color-text-body);
  text-align: center;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-regular);
  align-self: stretch;
}

.card-cta__btn--secondary {
  background-color: var(--color-btn-secondary-default);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md) var(--spacing-80);
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.card-cta__btn--secondary:hover {
  background-color: var(--color-btn-secondary-hover);
}

.card-cta__btn--secondary:active {
  background-color: var(--color-btn-secondary-active);
}

.card-cta__btn--secondary .card-cta__btn-label {
  color: var(--color-btn-secondary-text);
}

.card-cta__btn--primary {
  background-color: var(--color-btn-primary-default);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md) var(--spacing-80);
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.card-cta__btn--primary:hover {
  background-color: var(--color-btn-primary-hover);
}

.card-cta__btn--primary:active {
  background-color: var(--color-btn-primary-active);
}

.card-cta__btn--primary .card-cta__btn-label {
  color: var(--color-btn-primary-text);
}

.card-cta__btn-label {
  text-align: center;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-body);
  line-height: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

/* 2 Column Graphic - Responsive */

@media (min-width: 1920px) {
  .section-2column-graphic {
    max-width: 1920px;
    min-width: 1920px;
    margin: 0 auto;
  }
}

@media (min-width: 1150px) and (max-width: 1919px) {
  .section-2column-graphic__column {
    max-height: 595px;
  }

  .card-cta {
    width: auto;
    flex: 1;
    max-width: 600px;
  }
}

@media (min-width: 768px) and (max-width: 1149px) {
  .section-2column-graphic {
    flex-direction: column;
    gap: var(--spacing-20);
    height: auto;
    padding: 0 var(--spacing-3xl);
  }

  .section-2column-graphic__column {
    align-self: stretch;
    height: auto;
    padding: var(--spacing-3xl);
    justify-content: flex-start;
  }

  /* Override :last-child right-alignment for stacked layout */
  .section-2column-graphic__column:last-child {
    justify-content: flex-start;
  }

  .card-cta {
    width: 376px;
    max-width: 376px;
    padding: var(--spacing-3xl) var(--spacing-xl);
  }
}

@media (max-width: 767px) {
  .section-2column-graphic {
    flex-direction: column;
    gap: var(--spacing-20);
    height: auto;
    padding: 0 var(--spacing-lg);
  }

  .section-2column-graphic__column {
    align-self: stretch;
    height: auto;
    padding: var(--spacing-3xl) var(--spacing-md);
    justify-content: flex-start;
  }

  /* Override :last-child right-alignment for stacked layout */
  .section-2column-graphic__column:last-child {
    justify-content: flex-start;
  }

  .card-cta {
    width: 320px;
    max-width: 320px;
    padding: var(--spacing-3xl) var(--spacing-xl);
  }

  .card-cta__h2 {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-body-lg);
  }

  .card-cta__btn--secondary,
  .card-cta__btn--primary {
    padding: var(--spacing-sm) var(--spacing-3xl);
  }
}


/* ==========================================================================
   5. CONTACT US PAGE
   Contact page section with HubSpot form embed.
   ========================================================================== */

.section-contact-us {
  padding: var(--spacing-3xl);
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  justify-content: flex-start;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.section-contact-us__container {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-10);
  align-items: flex-start;
  justify-content: flex-start;
  width: 1200px;
  max-width: 1200px;
}

.section-contact-us__card {
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-3xl) var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex: 1;
  box-shadow: var(--shadow-subtle);
}

.section-contact-us__headline-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
}

.section-contact-us__icon {
  width: 90px;
  height: 90px;
}

.section-contact-us__h3 {
  color: var(--color-text-heading);
  text-align: center;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  align-self: stretch;
}

.section-contact-us__paragraph {
  color: var(--color-text-body);
  text-align: left;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-regular);
  align-self: stretch;
}

.section-contact-us__form-container {
  background-color: var(--color-neutral-100);
  border-radius: var(--radius-sm);
  padding: var(--spacing-lg) 27px var(--spacing-xl) 27px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  align-items: flex-start;
  justify-content: flex-start;
  width: 600px;
  max-width: 600px;
  box-shadow: var(--shadow-subtle);
}

/* Contact Us Page - Responsive */

@media (min-width: 1920px) {
  .section-contact-us {
    max-width: 1920px;
    margin: 0 auto;
    padding-top: var(--spacing-3xl);
  }
}

@media (min-width: 1150px) and (max-width: 1919px) {
  .section-contact-us {
    padding-top: var(--spacing-3xl);
  }

  .section-contact-us__container {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1149px) {
  .section-contact-us {
    padding-top: var(--spacing-3xl);
  }

  .section-contact-us__container {
    width: 100%;
  }

  .section-contact-us__form-container {
    align-self: stretch;
    flex: 1;
    width: auto;
    max-width: none;
  }
}

@media (max-width: 767px) {
  .section-contact-us {
    padding: var(--spacing-xl);
  }

  .section-contact-us__container {
    flex-direction: column;
    width: 100%;
  }

  .section-contact-us__h3 {
    text-align: left;
  }

  .section-contact-us__form-container {
    width: 100%;
    max-width: none;
  }
}


/* ==========================================================================
   6. LANDING PAGE
   Landing page section with HubSpot resource gate form.
   ========================================================================== */

.section-landing-page {
  background-color: var(--color-neutral-100);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--spacing-3xl);
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  justify-content: flex-start;
}

.section-landing-page__container {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-10);
  align-items: flex-start;
  justify-content: flex-start;
  width: 1200px;
  max-width: 1200px;
}

.section-landing-page__card {
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-3xl) var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex: 1;
  box-shadow: var(--shadow-subtle);
}

.section-landing-page__headline-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
}

.section-landing-page__icon {
  width: 90px;
  height: 90px;
}

.section-landing-page__h3 {
  color: var(--color-text-heading);
  text-align: left;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  align-self: stretch;
}

.section-landing-page__content {
  color: var(--color-text-body);
  text-align: left;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-regular);
  align-self: stretch;
}

/* Read more toggle — hidden on desktop/tablet, visible on mobile */
.section-landing-page__read-more {
  display: none;
}

.section-landing-page__form-container {
  background-color: var(--color-neutral-100);
  border-radius: var(--radius-sm);
  padding: var(--spacing-lg) 27px var(--spacing-xl) 27px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  align-items: flex-start;
  justify-content: flex-start;
  width: 600px;
  max-width: 600px;
  box-shadow: var(--shadow-subtle);
}

/* Landing Page - Responsive */

@media (min-width: 1920px) {
  .section-landing-page {
    max-width: 1920px;
    margin: 0 auto;
    padding-top: var(--spacing-3xl);
  }
}

@media (min-width: 1150px) and (max-width: 1919px) {
  .section-landing-page {
    padding-top: var(--spacing-3xl);
  }

  .section-landing-page__container {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1149px) {
  .section-landing-page {
    padding-top: var(--spacing-3xl);
  }

  .section-landing-page__container {
    width: 100%;
  }

  .section-landing-page__form-container {
    align-self: stretch;
    flex: 1;
    width: auto;
    max-width: none;
  }
}

@media (max-width: 767px) {
  .section-landing-page {
    padding: var(--spacing-xl);
  }

  .section-landing-page__container {
    flex-direction: column;
    width: 100%;
  }

  .section-landing-page__form-container {
    order: -1;
    width: 100%;
    max-width: none;
  }

  /* Content collapse — ~150 words visible, rest hidden */
  .section-landing-page__content {
    max-height: 12em;
    overflow: hidden;
    position: relative;
  }

  .section-landing-page__content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3em;
    background: linear-gradient(transparent, var(--color-white));
    pointer-events: none;
  }

  .section-landing-page__content.is-expanded {
    max-height: none;
    overflow: visible;
  }

  .section-landing-page__content.is-expanded::after {
    display: none;
  }

  /* Read more button */
  .section-landing-page__read-more {
    display: inline-block;
    background: none;
    border: none;
    color: var(--color-accent-gold);
    font-family: var(--font-family-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    padding: var(--spacing-xs) 0;
    text-decoration: underline;
  }

  .section-landing-page__read-more:hover {
    color: var(--color-primary-navy);
  }

  .section-landing-page__read-more.is-hidden {
    display: none;
  }
}


/* ==========================================================================
   7. HUBSPOT FORM EMBED (Shared by Contact Us + Landing Page)
   ========================================================================== */

.hs-form-frame {
  width: 100%;
  min-height: 300px;
}

.hs-form-frame iframe {
  width: 100% !important;
}


/* ==========================================================================
   8. RESOURCE OFFER
   Featured resource/download offer section with cover image and CTA.
   ========================================================================== */

.section-resource-offer {
  padding: var(--spacing-sm) 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.section-resource-offer__content {
  background-color: var(--color-white);
  padding: var(--spacing-xl) var(--spacing-20);
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: flex-start;
  justify-content: flex-start;
  width: 1150px;
}

.section-resource-offer__image-column {
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  align-items: center;
  justify-content: flex-start;
  width: 610px;
  height: 790px;
}

.section-resource-offer__cover-image {
  align-self: stretch;
  flex: 1;
  object-fit: cover;
}

.section-resource-offer__right-column {
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
  padding: var(--spacing-40) var(--spacing-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  flex: 1;
  box-shadow: var(--shadow-subtle);
}

.section-resource-offer__h2 {
  color: var(--color-text-heading);
  text-align: left;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  align-self: stretch;
}

.section-resource-offer__paragraph {
  color: var(--color-text-body);
  text-align: left;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-regular);
  align-self: stretch;
}

.section-resource-offer__btn {
  background-color: var(--color-btn-primary-default);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md) var(--spacing-80);
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.section-resource-offer__btn:hover {
  background-color: var(--color-btn-primary-hover);
}

.section-resource-offer__btn:active {
  background-color: var(--color-btn-primary-active);
}

.section-resource-offer__btn-label {
  color: var(--color-btn-primary-text);
  text-align: center;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-body);
  line-height: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

/* Resource Offer - Responsive */

@media (min-width: 1920px) {
  .section-resource-offer {
    max-width: 1920px;
    margin: 0 auto;
  }
}

@media (min-width: 1150px) and (max-width: 1919px) {
  .section-resource-offer__image-column {
    padding: var(--spacing-lg) var(--spacing-xl);
    gap: 0;
    align-items: flex-start;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }

  .section-resource-offer__cover-image {
    flex-shrink: 0;
    height: 703px;
    aspect-ratio: 546 / 703;
    flex: unset;
  }

  .section-resource-offer__right-column {
    gap: var(--spacing-xl);
    border-radius: 0;
  }
}

@media (min-width: 768px) and (max-width: 1149px) {
  .section-resource-offer {
    background-color: var(--color-white);
    justify-content: center;
    padding: 0;
  }

  .section-resource-offer__content {
    padding: var(--spacing-xl);
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .section-resource-offer__image-column {
    padding: var(--spacing-xl) var(--spacing-sm);
    gap: var(--spacing-xs);
    width: 400px;
    height: 518px;
  }

  .section-resource-offer__cover-image {
    width: 352px;
    aspect-ratio: 352 / 454;
    align-self: unset;
  }

  .section-resource-offer__right-column {
    gap: var(--spacing-xl);
    max-width: 500px;
    border-radius: 0;
    align-self: unset;
  }

  .section-resource-offer__h2 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
  }

  .section-resource-offer__btn {
    padding: var(--spacing-sm) var(--spacing-3xl);
  }
}

@media (max-width: 767px) {
  .section-resource-offer {
    background-color: var(--color-neutral-100);
    background-image: none;
    gap: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
  }

  .section-resource-offer__content {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 100%;
    margin: 0 auto;
  }

  .section-resource-offer__image-column {
    display: none;
  }

  .section-resource-offer__right-column {
    padding: var(--spacing-40) var(--spacing-lg);
    gap: var(--spacing-xl);
    align-items: center;
    width: 100%;
    max-width: 500px;
  }

  .section-resource-offer__h2 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
  }

  .section-resource-offer__btn {
    padding: var(--spacing-sm) var(--spacing-3xl);
  }
}


/* ==========================================================================
   9. FAQ GROUP
   Accordion FAQ section with expandable question/answer cards.
   ========================================================================== */

.section-faq-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  background-color: var(--color-white);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.section-faq-group__container {
  padding: var(--spacing-lg) var(--spacing-3xl);
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  justify-content: flex-start;
  width: 1200px;
  max-width: 1200px;
}

.section-faq-group__items {
  background-color: var(--color-neutral-100);
  border-radius: var(--spacing-3xl);
  padding: var(--spacing-md) var(--spacing-80);
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
}

.card-faq {
  padding: var(--spacing-md) var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  border-bottom: 1px solid var(--color-neutral-200);
}

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

.card-faq__question {
  background-color: transparent;
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-sm);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  cursor: pointer;
  border: none;
  width: 100%;
  text-align: left;
  transition: background-color 0.2s ease;
}

.card-faq__question:hover {
  background-color: var(--color-accent-100);
  box-shadow: var(--shadow-subtle);
}

.card-faq__question:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.card-faq__question-text {
  color: var(--color-neutral-600);
  text-align: left;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  font-weight: var(--font-weight-heavy);
  flex: 1;
}

.card-faq__indicator {
  color: var(--color-neutral-600);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-heavy);
  transition: transform 0.3s ease;
  width: 30px;
  text-align: center;
}

.card-faq[data-expanded="true"] .card-faq__indicator {
  transform: rotate(90deg);
}

.card-faq__answer {
  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-md) var(--spacing-sm);
  color: var(--color-text-body);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.card-faq__answer p {
  margin: 0 0 var(--spacing-md) 0;
}

.card-faq__answer p:last-child {
  margin-bottom: 0;
}

.card-faq__answer[hidden] {
  display: none;
}

/* FAQ Group - Responsive */

@media (min-width: 1920px) {
  .section-faq-group {
    max-width: 1920px;
    margin: 0 auto;
  }
}

@media (min-width: 1150px) and (max-width: 1919px) {
  .section-faq-group__container {
    width: 100%;
  }

  .section-faq-group__items {
    padding: var(--spacing-md) 96px;
  }
}

@media (min-width: 768px) and (max-width: 1149px) {
  .section-faq-group__container {
    width: 100%;
  }

  .section-faq-group__items {
    border-radius: var(--spacing-2xl);
    padding: var(--spacing-md) var(--spacing-2xl);
  }

  .card-faq {
    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-sm);
  }

  .card-faq__question {
    padding: var(--spacing-sm) var(--spacing-sm);
  }
}

@media (max-width: 767px) {
  .section-faq-group__container {
    width: 100%;
    padding: var(--spacing-lg);
  }

  .section-faq-group__items {
    border-radius: var(--spacing-xl);
    padding: var(--spacing-md) var(--spacing-xl);
    min-width: 350px;
  }

  .card-faq {
    padding: var(--spacing-sm) var(--spacing-sm);
    min-width: 320px;
  }

  .card-faq__question-text {
    font-size: var(--font-size-body);
  }
}


/* ==========================================================================
   10. 404 SECTION
   Error page content with CTA buttons.
   ========================================================================== */

.section-404 {
  background-color: var(--color-neutral-100);
  padding: var(--spacing-3xl) var(--spacing-3xl) 128px var(--spacing-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
  align-items: flex-start;
  justify-content: flex-start;
}

.section-404__headline {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-10);
  align-items: center;
  justify-content: flex-start;
}

.section-404__h1 {
  color: var(--color-text-heading);
  text-align: left;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
}

.section-404__paragraph {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-10);
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
}

.section-404__paragraph-text {
  color: var(--color-text-body);
  text-align: left;
  font-family: var(--font-family-body);
  font-size: var(--font-size-lead);
  line-height: var(--line-height-lead);
  font-weight: var(--font-weight-semibold);
  flex: 1;
}

.section-404__cta-choices {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-3xl);
  align-items: flex-start;
  justify-content: flex-start;
}

.section-404__btn {
  background-color: var(--color-btn-secondary-default);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md) var(--spacing-80);
  display: flex;
  flex-direction: row;
  gap: var(--spacing-10);
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.section-404__btn:hover {
  background-color: var(--color-btn-secondary-hover);
}

.section-404__btn:active {
  background-color: var(--color-btn-secondary-active);
}

.section-404__btn-label {
  color: var(--color-btn-secondary-text);
  text-align: center;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-body);
  line-height: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

/* 404 Section - Responsive */

@media (min-width: 1920px) {
  .section-404 {
    max-width: 1920px;
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  .section-404 {
    align-items: center;
  }

  .section-404__headline {
    justify-content: center;
  }

  .section-404__paragraph {
    text-align: center;
  }

  .section-404__paragraph-text {
    text-align: center;
  }

  .section-404__cta-choices {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
  }

  .section-404__btn {
    width: 100%;
    max-width: 300px;
  }
}


/* ==========================================================================
   11. SITEMAP SECTION
   Sitemap navigation listing with grouped page links.
   ========================================================================== */

.section-sitemap {
  background-color: var(--color-white);
  padding: var(--spacing-3xl) var(--spacing-3xl) 128px 256px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xl);
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

.section-sitemap__page-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  align-items: flex-start;
  justify-content: flex-start;
}

.section-sitemap__headline {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-10);
  align-items: center;
  justify-content: flex-start;
}

.section-sitemap__h2 {
  color: var(--color-text-heading);
  text-align: left;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
}

.section-sitemap__link-list {
  list-style: disc;
  padding-left: var(--spacing-xl);
  margin: 0;
}

.section-sitemap__link-item {
  padding: var(--spacing-xs) 0;
}

.section-sitemap__link {
  color: var(--color-link-accent-default);
  text-align: left;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.section-sitemap__link:hover {
  color: var(--color-link-accent-hover);
}

.section-sitemap__link:active {
  color: var(--color-link-accent-active);
}

/* Sitemap Section - Responsive */

@media (min-width: 1920px) {
  .section-sitemap {
    max-width: 1920px;
    margin: 0 auto;
  }
}

@media (min-width: 768px) and (max-width: 1149px) {
  .section-sitemap {
    padding: var(--spacing-3xl) var(--spacing-3xl) 128px 128px;
  }
}

@media (max-width: 767px) {
  .section-sitemap {
    padding: var(--spacing-3xl);
  }
}


/* ==========================================================================
   12. BLOG GROUP
   Blog archive listing with post cards and pagination bar.
   ========================================================================== */

.blog-group {
  background: var(--color-neutral-100);
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
}

.blog-group__cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
}

/* Blog Card */
.card-blog {
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

.card-blog__top {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
}

.card-blog__title {
  color: var(--color-primary-700);
  text-align: left;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  align-self: stretch;
}

.card-blog__meta {
  color: var(--color-primary-700);
  text-align: left;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  align-self: stretch;
}

.card-blog__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
}

.card-blog__excerpt {
  text-align: left;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  align-self: stretch;
}

.card-blog__excerpt-text {
  color: var(--color-text-body);
}

.card-blog__read-more {
  color: var(--color-primary-500);
  cursor: pointer;
  transition: color 0.2s ease;
}

.card-blog__read-more:hover {
  color: var(--color-teal-500);
  text-decoration: underline;
}

.card-blog__read-more:active {
  color: var(--color-primary-900);
}

.card-blog__read-more:focus-visible {
  color: var(--color-primary-900);
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Blog Card States */
.card-blog:hover {
  background: var(--color-accent-50);
  box-shadow: var(--shadow-subtle);
  cursor: pointer;
}

.card-blog:hover .card-blog__title {
  color: var(--color-neutral-600);
}

.card-blog:hover .card-blog__meta {
  color: var(--color-text-body);
}

.card-blog:active,
.card-blog.state-active {
  background: var(--color-white);
  box-shadow: var(--shadow-subtle);
}

.card-blog.state-disabled {
  background: var(--color-neutral-100);
  cursor: not-allowed;
}

.card-blog.state-disabled .card-blog__title {
  color: var(--color-neutral-200);
}

.card-blog.state-disabled .card-blog__meta,
.card-blog.state-disabled .card-blog__excerpt {
  color: var(--color-neutral-300);
}

.card-blog.state-disabled .card-blog__read-more {
  color: var(--color-neutral-300);
  pointer-events: none;
  text-decoration: none;
}

/* Blog Group - Responsive */

@media (min-width: 1920px) {
  .blog-group {
    max-width: 1920px;
    margin: 0 auto;
  }

  .blog-group__cards {
    padding: var(--spacing-md) var(--spacing-3xl);
  }

  .card-blog {
    border-radius: var(--spacing-12);
    padding: var(--spacing-12) var(--spacing-md);
    gap: var(--spacing-md);
    max-width: 1920px;
  }

  .card-blog__title {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
  }

  .card-blog__meta {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }

  .card-blog__content {
    padding: 0 0 var(--spacing-20) 0;
  }

  .card-blog__excerpt {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
  }

  .pagination-bar {
    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-md) var(--spacing-lg);
  }

  .pagination-bar__group {
    padding: 0 var(--spacing-md);
  }
}

@media (min-width: 1150px) and (max-width: 1919px) {
  .blog-group__cards {
    padding: var(--spacing-md) var(--spacing-3xl);
  }

  .card-blog {
    border-radius: var(--spacing-12);
    padding: var(--spacing-12) var(--spacing-md);
    gap: var(--spacing-md);
    max-width: 1920px;
  }

  .card-blog__title {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
  }

  .card-blog__meta {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }

  .card-blog__content {
    padding: 0 0 var(--spacing-20) 0;
  }

  .card-blog__excerpt {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
  }

  .pagination-bar {
    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-md) var(--spacing-lg);
  }

  .pagination-bar__group {
    padding: 0 var(--spacing-md);
  }
}

@media (min-width: 768px) and (max-width: 1149px) {
  .blog-group__cards {
    padding: var(--spacing-md) var(--spacing-xl);
  }

  .card-blog {
    border-radius: var(--spacing-12);
    padding: var(--spacing-12) var(--spacing-md);
    gap: var(--spacing-12);
  }

  .card-blog__title {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
  }

  .card-blog__meta {
    font-size: var(--font-size-meta);
    line-height: var(--line-height-meta);
  }

  .card-blog__content {
    padding: 0 0 var(--spacing-md) 0;
  }

  .card-blog__excerpt {
    font-size: var(--font-size-h6);
    line-height: var(--line-height-h6);
  }

  .pagination-bar {
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md) var(--spacing-md);
  }

  .pagination-bar__group {
    padding: 0 var(--spacing-12);
  }

  .pagination-bar__arrow {
    width: 40px;
    height: 40px;
  }

  .pagination-bar__number,
  .pagination-bar__text {
    font-size: var(--font-size-h6);
    line-height: var(--line-height-h6);
  }
}

@media (max-width: 767px) {
  .blog-group__cards {
    padding: var(--spacing-12) var(--spacing-md);
  }

  .card-blog {
    border-radius: var(--spacing-sm);
    padding: var(--spacing-12);
    gap: var(--spacing-12);
  }

  .card-blog__title {
    font-size: var(--font-size-h6);
    line-height: var(--line-height-h6);
  }

  .card-blog__meta {
    font-size: var(--font-size-xs);
    line-height: 15px;
  }

  .card-blog__content {
    padding: 0 0 var(--spacing-12) 0;
  }

  .card-blog__excerpt {
    font-size: 14px;
    line-height: 21px;
  }

  .pagination-bar {
    padding: var(--spacing-sm) var(--spacing-12) var(--spacing-12) var(--spacing-12);
  }

  .pagination-bar__group {
    padding: 0 var(--spacing-sm);
    gap: var(--spacing-sm);
  }

  .pagination-bar__arrow {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-h6);
  }

  .pagination-bar__number,
  .pagination-bar__text {
    font-size: 14px;
    line-height: 21px;
  }
}


/* ==========================================================================
   13. PILLAR PAGE CONTENT
   Pillar page section with decorative icons and long-form content.
   ========================================================================== */

.pillar-content {
  background: var(--color-neutral-100);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  align-items: flex-start;
  justify-content: flex-start;
}

.pillar-content__headline {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  scroll-margin-top: 24px;
}

.pillar-content__headline-inner {
  background: var(--color-neutral-100);
  display: flex;
  flex-direction: row;
  gap: var(--spacing-10);
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
}

.pillar-content__h1 {
  color: var(--color-primary-700);
  text-align: left;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
}

.card-pillar {
  background: var(--color-neutral-100);
  display: flex;
  gap: var(--spacing-xl);
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  overflow: hidden;
}

/* Pillar page icon uses direct sprite background (custom sizes per breakpoint) */
.card-pillar__icon {
  flex-shrink: 0;
  background-image: url('../svg/decorative-icons/purposeful-sprite-symbolic.svg');
  background-repeat: no-repeat;
}

.card-pillar__content {
  display: flex;
  flex-direction: column;
  gap: 29px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
}

.card-pillar__headline {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-10);
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
}

.card-pillar__h2 {
  color: var(--color-primary-700);
  text-align: left;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
}

.card-pillar__paragraph {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-10);
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
}

.card-pillar__body {
  color: var(--color-black);
  text-align: left;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  flex: 1;
}

/* Pillar Page - 256px icons (DesktopPlus/Desktop) - scale = 256/90 = 2.844 */
.card-pillar__icon--256 {
  background-size: 1536px 4096px;
}

/* Pillar Page icon sprite positions — 256px scale (base / DesktopPlus fallback) */
/* Sprite grid: 6 cols × 4 rows. Col step = 256px, Row step = 256px.            */
/* Row 0: accelerate attract contact delight download efficiency                 */
/* Row 1: email engage exit expertise inbound momentum                           */
/* Row 2: news persona professional roi schedule strategy                        */
/* Row 3: unit value webinar                                                     */
.card-pillar__icon[data-icon="accelerate"][data-color="navy"]   { background-position: 0px 0px; }
.card-pillar__icon[data-icon="attract"][data-color="navy"]      { background-position: -256px 0px; }
.card-pillar__icon[data-icon="contact"][data-color="navy"]      { background-position: -512px 0px; }
.card-pillar__icon[data-icon="delight"][data-color="navy"]      { background-position: -768px 0px; }
.card-pillar__icon[data-icon="download"][data-color="navy"]     { background-position: -1024px 0px; }
.card-pillar__icon[data-icon="efficiency"][data-color="navy"]   { background-position: -1280px 0px; }
.card-pillar__icon[data-icon="email"][data-color="navy"]        { background-position: 0px -256px; }
.card-pillar__icon[data-icon="engage"][data-color="navy"]       { background-position: -256px -256px; }
.card-pillar__icon[data-icon="exit"][data-color="navy"]         { background-position: -512px -256px; }
.card-pillar__icon[data-icon="expertise"][data-color="navy"]    { background-position: -768px -256px; }
.card-pillar__icon[data-icon="inbound"][data-color="navy"]      { background-position: -1024px -256px; }
.card-pillar__icon[data-icon="momentum"][data-color="navy"]     { background-position: -1280px -256px; }
.card-pillar__icon[data-icon="news"][data-color="navy"]         { background-position: 0px -512px; }
.card-pillar__icon[data-icon="persona"][data-color="navy"]      { background-position: -256px -512px; }
.card-pillar__icon[data-icon="professional"][data-color="navy"] { background-position: -512px -512px; }
.card-pillar__icon[data-icon="roi"][data-color="navy"]          { background-position: -768px -512px; }
.card-pillar__icon[data-icon="schedule"][data-color="navy"]     { background-position: -1024px -512px; }
.card-pillar__icon[data-icon="strategy"][data-color="navy"]     { background-position: -1280px -512px; }
.card-pillar__icon[data-icon="unit"][data-color="navy"]         { background-position: 0px -768px; }
.card-pillar__icon[data-icon="value"][data-color="navy"]        { background-position: -256px -768px; }
.card-pillar__icon[data-icon="webinar"][data-color="navy"]      { background-position: -512px -768px; }

/* Pillar Page Content - Responsive */

@media (min-width: 1920px) {
  .pillar-content {
    max-width: 1920px;
    margin: 0 auto;
  }

  .pillar-content__headline {
    padding: var(--spacing-xl) var(--spacing-80) 0 var(--spacing-80);
  }

  .pillar-content__h1 {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
  }

  .card-pillar {
    padding: var(--spacing-md) var(--spacing-80) var(--spacing-2xl) var(--spacing-80);
    flex-direction: row;
    width: 100%;
  }

  .card-pillar__icon {
    width: 256px;
    height: 256px;
    background-size: 1536px 4096px;
  }

  .card-pillar__content {
    max-width: 1264px;
  }

  .card-pillar__h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }

  .card-pillar__body {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
  }
}

@media (min-width: 1150px) and (max-width: 1919px) {
  .pillar-content__headline {
    padding: var(--spacing-xl) var(--spacing-80) 0 var(--spacing-80);
  }

  .pillar-content__h1 {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
  }

  .card-pillar {
    padding: var(--spacing-md) var(--spacing-80) var(--spacing-2xl) var(--spacing-80);
    flex-direction: row;
  }

  .card-pillar__icon {
    width: 256px;
    height: 256px;
    background-size: 1536px 4096px;
  }

  .card-pillar__content {
    max-width: 1264px;
  }

  .card-pillar__h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }

  .card-pillar__body {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
  }

  /* Desktop icon sprite positions — 256px scale */
  .card-pillar__icon[data-icon="accelerate"][data-color="navy"]   { background-position: 0px 0px; }
  .card-pillar__icon[data-icon="attract"][data-color="navy"]      { background-position: -256px 0px; }
  .card-pillar__icon[data-icon="contact"][data-color="navy"]      { background-position: -512px 0px; }
  .card-pillar__icon[data-icon="delight"][data-color="navy"]      { background-position: -768px 0px; }
  .card-pillar__icon[data-icon="download"][data-color="navy"]     { background-position: -1024px 0px; }
  .card-pillar__icon[data-icon="efficiency"][data-color="navy"]   { background-position: -1280px 0px; }
  .card-pillar__icon[data-icon="email"][data-color="navy"]        { background-position: 0px -256px; }
  .card-pillar__icon[data-icon="engage"][data-color="navy"]       { background-position: -256px -256px; }
  .card-pillar__icon[data-icon="exit"][data-color="navy"]         { background-position: -512px -256px; }
  .card-pillar__icon[data-icon="expertise"][data-color="navy"]    { background-position: -768px -256px; }
  .card-pillar__icon[data-icon="inbound"][data-color="navy"]      { background-position: -1024px -256px; }
  .card-pillar__icon[data-icon="momentum"][data-color="navy"]     { background-position: -1280px -256px; }
  .card-pillar__icon[data-icon="news"][data-color="navy"]         { background-position: 0px -512px; }
  .card-pillar__icon[data-icon="persona"][data-color="navy"]      { background-position: -256px -512px; }
  .card-pillar__icon[data-icon="professional"][data-color="navy"] { background-position: -512px -512px; }
  .card-pillar__icon[data-icon="roi"][data-color="navy"]          { background-position: -768px -512px; }
  .card-pillar__icon[data-icon="schedule"][data-color="navy"]     { background-position: -1024px -512px; }
  .card-pillar__icon[data-icon="strategy"][data-color="navy"]     { background-position: -1280px -512px; }
  .card-pillar__icon[data-icon="unit"][data-color="navy"]         { background-position: 0px -768px; }
  .card-pillar__icon[data-icon="value"][data-color="navy"]        { background-position: -256px -768px; }
  .card-pillar__icon[data-icon="webinar"][data-color="navy"]      { background-position: -512px -768px; }
}

@media (min-width: 768px) and (max-width: 1149px) {
  .pillar-content__headline {
    padding: var(--spacing-xl) var(--spacing-xl) 0 var(--spacing-xl);
  }

  .pillar-content__h1 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }

  .card-pillar {
    padding: var(--spacing-md) var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
    flex-direction: row;
    gap: var(--spacing-lg);
  }

  .card-pillar__icon {
    width: 180px;
    height: 180px;
    background-size: 1080px 2880px;
  }

  .card-pillar__content {
    gap: var(--spacing-md);
  }

  .card-pillar__h2 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
  }

  .card-pillar__body {
    font-size: var(--font-size-h6);
    line-height: var(--line-height-h6);
  }

  /* Tablet icon sprite positions — 180px scale */
  .card-pillar__icon[data-icon="accelerate"][data-color="navy"]   { background-position: 0px 0px; }
  .card-pillar__icon[data-icon="attract"][data-color="navy"]      { background-position: -180px 0px; }
  .card-pillar__icon[data-icon="contact"][data-color="navy"]      { background-position: -360px 0px; }
  .card-pillar__icon[data-icon="delight"][data-color="navy"]      { background-position: -540px 0px; }
  .card-pillar__icon[data-icon="download"][data-color="navy"]     { background-position: -720px 0px; }
  .card-pillar__icon[data-icon="efficiency"][data-color="navy"]   { background-position: -900px 0px; }
  .card-pillar__icon[data-icon="email"][data-color="navy"]        { background-position: 0px -180px; }
  .card-pillar__icon[data-icon="engage"][data-color="navy"]       { background-position: -180px -180px; }
  .card-pillar__icon[data-icon="exit"][data-color="navy"]         { background-position: -360px -180px; }
  .card-pillar__icon[data-icon="expertise"][data-color="navy"]    { background-position: -540px -180px; }
  .card-pillar__icon[data-icon="inbound"][data-color="navy"]      { background-position: -720px -180px; }
  .card-pillar__icon[data-icon="momentum"][data-color="navy"]     { background-position: -900px -180px; }
  .card-pillar__icon[data-icon="news"][data-color="navy"]         { background-position: 0px -360px; }
  .card-pillar__icon[data-icon="persona"][data-color="navy"]      { background-position: -180px -360px; }
  .card-pillar__icon[data-icon="professional"][data-color="navy"] { background-position: -360px -360px; }
  .card-pillar__icon[data-icon="roi"][data-color="navy"]          { background-position: -540px -360px; }
  .card-pillar__icon[data-icon="schedule"][data-color="navy"]     { background-position: -720px -360px; }
  .card-pillar__icon[data-icon="strategy"][data-color="navy"]     { background-position: -900px -360px; }
  .card-pillar__icon[data-icon="unit"][data-color="navy"]         { background-position: 0px -540px; }
  .card-pillar__icon[data-icon="value"][data-color="navy"]        { background-position: -180px -540px; }
  .card-pillar__icon[data-icon="webinar"][data-color="navy"]      { background-position: -360px -540px; }
}

@media (max-width: 767px) {
  .pillar-content__headline {
    padding: var(--spacing-md) var(--spacing-md) 0 var(--spacing-md);
  }

  .pillar-content__h1 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
  }

  .card-pillar {
    padding: var(--spacing-md);
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
  }

  .card-pillar__icon {
    width: 120px;
    height: 120px;
    background-size: 720px 1920px;
  }

  .card-pillar__content {
    gap: var(--spacing-12);
    width: 100%;
  }

  .card-pillar__h2 {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
  }

  .card-pillar__body {
    font-size: var(--font-size-h6);
    line-height: var(--line-height-h6);
  }

  /* Mobile icon sprite positions — 120px scale */
  .card-pillar__icon[data-icon="accelerate"][data-color="navy"]   { background-position: 0px 0px; }
  .card-pillar__icon[data-icon="attract"][data-color="navy"]      { background-position: -120px 0px; }
  .card-pillar__icon[data-icon="contact"][data-color="navy"]      { background-position: -240px 0px; }
  .card-pillar__icon[data-icon="delight"][data-color="navy"]      { background-position: -360px 0px; }
  .card-pillar__icon[data-icon="download"][data-color="navy"]     { background-position: -480px 0px; }
  .card-pillar__icon[data-icon="efficiency"][data-color="navy"]   { background-position: -600px 0px; }
  .card-pillar__icon[data-icon="email"][data-color="navy"]        { background-position: 0px -120px; }
  .card-pillar__icon[data-icon="engage"][data-color="navy"]       { background-position: -120px -120px; }
  .card-pillar__icon[data-icon="exit"][data-color="navy"]         { background-position: -240px -120px; }
  .card-pillar__icon[data-icon="expertise"][data-color="navy"]    { background-position: -360px -120px; }
  .card-pillar__icon[data-icon="inbound"][data-color="navy"]      { background-position: -480px -120px; }
  .card-pillar__icon[data-icon="momentum"][data-color="navy"]     { background-position: -600px -120px; }
  .card-pillar__icon[data-icon="news"][data-color="navy"]         { background-position: 0px -240px; }
  .card-pillar__icon[data-icon="persona"][data-color="navy"]      { background-position: -120px -240px; }
  .card-pillar__icon[data-icon="professional"][data-color="navy"] { background-position: -240px -240px; }
  .card-pillar__icon[data-icon="roi"][data-color="navy"]          { background-position: -360px -240px; }
  .card-pillar__icon[data-icon="schedule"][data-color="navy"]     { background-position: -480px -240px; }
  .card-pillar__icon[data-icon="strategy"][data-color="navy"]     { background-position: -600px -240px; }
  .card-pillar__icon[data-icon="unit"][data-color="navy"]         { background-position: 0px -360px; }
  .card-pillar__icon[data-icon="value"][data-color="navy"]        { background-position: -120px -360px; }
  .card-pillar__icon[data-icon="webinar"][data-color="navy"]      { background-position: -240px -360px; }
}


/* ==========================================================================
   14. RESOURCES MATRIX
   Grid of resource cards with decorative icons.
   ========================================================================== */

.resources-matrix {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-white);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.resources-matrix__grid {
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  align-items: center;
  justify-content: flex-start;
}

.resources-matrix__alignment {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  align-items: flex-start;
  justify-content: flex-start;
}

.resources-matrix__row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-xl);
  align-items: center;
  justify-content: flex-start;
}

.card-resource {
  background: linear-gradient(to left, var(--color-primary-700), var(--color-primary-700));
  border-radius: var(--spacing-md);
  border: 4px solid var(--color-accent-500);
  padding: var(--spacing-2xl) var(--spacing-12) var(--spacing-2xl) var(--spacing-12);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-decoration: none;
}

.card-resource__header {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-12);
  align-items: center;
  justify-content: flex-start;
}

.card-resource__icon {
  flex-shrink: 0;
}

.card-resource__title {
  color: var(--color-white);
  text-align: left;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  flex: 1;
}

.card-resource__body {
  color: var(--color-white);
  text-align: center;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-regular);
}

.card-resource__button {
  background-color: var(--color-btn-secondary-default);
  border-radius: var(--radius-sm);
  padding: var(--spacing-12) var(--spacing-3xl);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.card-resource__button:hover {
  background-color: var(--color-btn-secondary-hover);
}

.card-resource__button:active {
  background-color: var(--color-btn-secondary-active);
}

.card-resource__button-label {
  color: var(--color-btn-secondary-text);
  text-align: center;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-body);
  line-height: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  text-decoration: none;
}

/* Resources Matrix - Responsive */

@media (min-width: 1920px) {
  .resources-matrix {
    max-width: 1920px;
    margin: 0 auto;
  }

  .resources-matrix__grid {
    width: 100%;
  }

  .resources-matrix__row {
    /* 4 cards: 4*350 + 3*32 = 1496px */
    max-width: 1496px;
  }

  .card-resource {
    width: 350px;
    height: 453px;
  }

  .card-resource__header {
    width: 286px;
    height: 90px;
  }

  .card-resource__body {
    width: 286px;
  }
}

@media (min-width: 1150px) and (max-width: 1919px) {
  .resources-matrix__grid {
    width: 100%;
  }

  .resources-matrix__row {
    /* 3 cards: 3*350 + 2*32 = 1114px */
    max-width: 1114px;
  }

  .card-resource {
    width: 350px;
    height: 453px;
  }

  .card-resource__header {
    width: 286px;
    height: 90px;
  }

  .card-resource__body {
    width: 286px;
  }
}

@media (min-width: 768px) and (max-width: 1149px) {
  .resources-matrix__grid {
    width: 100%;
  }

  .resources-matrix__row {
    /* 2 cards: 2*320 + 1*32 = 672px */
    max-width: 672px;
  }

  .card-resource {
    width: 320px;
    height: 420px;
  }

  .card-resource__header {
    width: 260px;
    height: 90px;
  }

  .card-resource__body {
    width: 260px;
    font-size: var(--font-size-h6);
    line-height: var(--line-height-h6);
  }

  .card-resource__title {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
  }
}

@media (max-width: 767px) {
  .resources-matrix__grid {
    width: 100%;
    padding: var(--spacing-md);
    gap: var(--spacing-md);
  }

  .resources-matrix__alignment {
    gap: var(--spacing-md);
    width: 100%;
  }

  .resources-matrix__row {
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
  }

  .card-resource {
    width: 100%;
    max-width: 350px;
    height: auto;
    min-height: 400px;
  }

  .card-resource__header {
    width: 100%;
    max-width: 286px;
    height: auto;
  }

  .card-resource__body {
    width: 100%;
    max-width: 286px;
    font-size: var(--font-size-h6);
    line-height: var(--line-height-h6);
  }

  .card-resource__title {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
  }

  .card-resource__button {
    padding: var(--spacing-12) var(--spacing-2xl);
  }
}
/* ==========================================================================
   Purposeful Media MVW2 - Template Base Styles

   DesktopPlus wrapper pattern, page content centering, responsive
   header/footer full-width wrappers, and logo sizing.

   Import order: variables.css → sprites.css → reset.css → atoms-master.css
                 → molecules-master.css → organisms-page-shell.css
                 → organisms-contextual.css → THIS FILE

   Created: February 4, 2026
   ========================================================================== */


/* ==========================================================================
   DesktopPlus Side Background

   At viewports wider than 1920px, the area beyond the content on either
   side is filled with a configurable background. Set --page-bg-desktopplus
   in templates or override per-page via inline style / ACF field.
   ========================================================================== */

:root {
  --page-bg-desktopplus: var(--color-neutral-100);
  --page-bg-desktopplus-image: url('../images/background-lines-bl-landscape.png');
  --page-bg-desktopplus-opacity: 1;
}

body {
  background-color: var(--page-bg-desktopplus);
}

/* DesktopPlus background image overlay via pseudo-element */
@media (min-width: 1920px) {
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--page-bg-desktopplus-image);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: var(--page-bg-desktopplus-opacity);
    z-index: -1;
    pointer-events: none;
  }
}


/* ==========================================================================
   Page Shell Wrappers

   Header and Footer use the wrapper pattern: outer element stretches
   full viewport width (background bleeds to edges), inner content is
   constrained to 1920px and centered.
   ========================================================================== */

.header-wrapper {
  background-color: var(--color-primary-700);
  width: 100%;
  position: relative;
}

.footer-wrapper {
  background-color: var(--color-primary-700);
  width: 100%;
}

.footer-wrapper--sub {
  background-color: var(--color-primary-900);
  width: 100%;
}


/* ==========================================================================
   Page Content Wrapper

   All contextual organisms sit inside <main class="page-content">.
   Content is constrained to 1920px and centered on DesktopPlus.
   ========================================================================== */

.page-content {
  max-width: 1920px;
  margin: 0 auto;
  width: 100%;
}


/* ==========================================================================
   Hero Carousel - Opaque Background

   The hero carousel's layer stack (gradient overlay, video at 0.33 opacity)
   is semi-transparent by design. A solid background prevents the
   DesktopPlus body background image from bleeding through.
   ========================================================================== */

.hero-carousel {
  background-color: var(--color-white);
}


/* ==========================================================================
   Responsive Logo

   Uses <picture> element in HTML. CSS ensures proper sizing at each
   breakpoint. Logo dimensions from Tier 1 exports:
   - DesktopPlus: 481 × 93px
   - Desktop: 460 × 89px
   - Tablet: 289 × 62px
   - Mobile: 125 × 62px
   ========================================================================== */

.header__logo-img {
  height: auto;
  display: block;
}

/* DesktopPlus */
@media (min-width: 1920px) {
  .header__logo-img {
    width: 481px;
  }
}

/* Desktop */
@media (min-width: 1150px) and (max-width: 1919px) {
  .header__logo-img {
    width: 460px;
  }
}

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

/* Mobile */
@media (max-width: 767px) {
  .header__logo-img {
    width: 125px;
  }
}