/*
Theme Name: Jivamukti Template by Van Alva
Theme URI: https://vanalva.com
Description: Professional Divi child theme with centralized design system using CSS variables for Jivamukti studios
Author: Van Alva
Author URI: https://vanalva.com
Template: Divi
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jivamukti-template
*/

/* ============================================================================
   GOOGLE FONTS IMPORT
   ============================================================================ */
   @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

   /* ============================================================================
      DESIGN SYSTEM OVERVIEW
      ============================================================================
      
      This theme uses a Webflow-style class naming system for maximum reusability:
      
      1. BASE CLASSES: Component classes with underscore modifiers
         - container_full, button_primary, card_bordered
         - Use for structural components
      
      2. UTILITY CLASSES: Single-purpose modifiers with u- prefix
         - Typography: u-text-h1, u-text-h2, u-text-body
         - Colors: u-text-primary, u-bg-secondary, u-text-accent
         - Spacing: u-mt-lg, u-p-xl, u-gap-md
         - Layout: u-d-flex, u-text-center, u-rounded-full
         - Use to modify any element
      
      3. CSS VARIABLES: Centralized design tokens
         - Colors, spacing, typography, borders, shadows
         - All values controlled in :root
      
      COLOR SYSTEM:
      - Default: Text inherits from parent (no forced color in typography utilities)
      - Override: Use u-text-* utilities to set specific colors
      - Parent control: Set color on parent, children inherit automatically
      
      ============================================================================
      CSS VARIABLES
      All styles are centralized here. Changes cascade to Divi automatically.
      ============================================================================ */
   
   :root {
     /* -------------------------------------------------------------------------
        COLOR PALETTE
        Based on Jivamukti Hybrid TT design
        ------------------------------------------------------------------------- */
   
     /* Primary Colors - Exact match from design */
     --color-primary: #FF9662;           /* Warm orange-peach - Primary accent */
     --color-primary-light: #FFAD8F;     /* Lighter for hovers */
     --color-primary-dark: #FF7A40;      /* Deeper orange for active states */
   
     /* Background Colors */
     --color-bg-dark: #0A0F0E;           /* Near-black with hint of green - Main background */
     --color-secondary: #0A0F0E;         /* Same as bg-dark for compatibility */
     --color-secondary-light: #1a1f1e;   /* Slightly lighter */
     --color-secondary-dark: #050808;    /* Deeper black */
   
     /* Neutral Colors */
     --color-white: #FFFFFF;
     --color-light-gray: #F5F5F5;
     --color-medium-gray: #CCCCCC;
     --color-dark-gray: #666666;
     --color-grey: #C1C1C1;                /* Grey for light text */
   
     /* Text Colors */
     --color-text-white: #FFFFFF;        /* Pure white - Use sparingly via u-text-white */
     --color-text-primary: #C1C1C1;      /* Grey - Main text color */
     --color-text-secondary: #D3D3D3;    /* Muted light gray - Supporting copy */
     --color-text-muted: #999999;        /* Muted/disabled text */
     --color-text-dark: #1a1a1a;         /* Text on light backgrounds */
   
     /* Accent Colors */
     --color-accent-banner: #FF9662;     /* Top banner background */
     --color-accent-border: #FF9662;     /* Border accent color */
   
     /* State Colors */
     --color-success: #4CAF50;
     --color-warning: #FF9800;
     --color-error: #F44336;
     --color-info: #2196F3;
   
     /* -------------------------------------------------------------------------
        TYPOGRAPHY SYSTEM - Fluid Responsive Scaling
        Using clamp() for automatic scaling between viewport sizes
        ------------------------------------------------------------------------- */
   
     /* Font Families */
     --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   
     /* Fluid Font Sizes - Using clamp() for smooth scaling across all viewports */
     /* clamp(min, preferred, max) - scales fluidly between 320px and 1400px viewport */
     --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);       /* 12px → 14px */
     --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);         /* 14px → 16px */
     --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);         /* 16px → 18px */
     --font-size-md: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);        /* 18px → 20px */
     --font-size-lg: clamp(1.25rem, 1rem + 1.25vw, 1.5rem);           /* 20px → 24px */
     --font-size-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);             /* 24px → 32px */
     --font-size-2xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);              /* 32px → 48px */
     --font-size-3xl: clamp(2.25rem, 1.5rem + 3.75vw, 3.5rem);        /* 36px → 56px */
     --font-size-4xl: clamp(2.5rem, 1.5rem + 4.5vw, 4rem);            /* 40px → 64px */
     --font-size-hero: clamp(2.75rem, 1.5rem + 5.5vw, 5rem);          /* 44px → 80px */
   
     /* Line Heights */
     --line-height-tight: 1.2;
     --line-height-normal: 1.5;
     --line-height-relaxed: 1.75;
     --line-height-loose: 2;
   
     /* Font Weights */
     --font-weight-light: 300;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;
   
     /* Letter Spacing - Design System Tracking */
     --letter-spacing-tighter: -0.04em;     /* Extra tight for condensed text */
     --letter-spacing-tight: -0.025em;      /* Slight condensing */
     --letter-spacing-normal: 0;            /* Default tracking */
     --letter-spacing-base: 0.02em;         /* +20 - Body copy */
     --letter-spacing-wide: 0.025em;        /* +25 */
     --letter-spacing-wider: 0.05em;        /* +50 */
     --letter-spacing-100: 0.1em;           /* +100 - Button text */
     --letter-spacing-150: 0.15em;          /* +150 - Hero title & buttons */
     --letter-spacing-200: 0.2em;           /* +200 - Accent labels */
     --letter-spacing-250: 0.25em;          /* +250 - Sub-headers */
     --letter-spacing-widest: 0.3em;        /* +300 - Ultra wide */
   
     /* -------------------------------------------------------------------------
        TYPOGRAPHY COMPOSITE STYLES
        Complete text styles combining size, weight, line-height, letter-spacing
        Use these for consistent typographic hierarchy
        ------------------------------------------------------------------------- */
   
     /* Display Styles (for hero/large display text) */
     --style-display: var(--font-size-hero) / var(--line-height-tight) var(--font-heading);
     --style-display-weight: var(--font-weight-extrabold);
     --style-display-spacing: var(--letter-spacing-tighter);
   
     /* Heading Styles - H1 */
     --style-h1-size: var(--font-size-hero);
     --style-h1-weight: var(--font-weight-bold);
     --style-h1-line: var(--line-height-tight);
     --style-h1-spacing: var(--letter-spacing-tight);
   
     /* Heading Styles - H2 */
     --style-h2-size: var(--font-size-3xl);
     --style-h2-weight: var(--font-weight-normal);
     --style-h2-line: var(--line-height-tight);
     --style-h2-spacing: var(--letter-spacing-normal);
     --style-h2-color: var(--color-grey);
   
     /* Heading Styles - H3 */
     --style-h3-size: var(--font-size-3xl);
     --style-h3-weight: var(--font-weight-bold);
     --style-h3-line: var(--line-height-tight);
     --style-h3-spacing: var(--letter-spacing-tight);
   
     /* Heading Styles - H4 */
     --style-h4-size: var(--font-size-xl);
     --style-h4-weight: var(--font-weight-semibold);
     --style-h4-line: var(--line-height-normal);
     --style-h4-spacing: var(--letter-spacing-normal);
   
     /* Heading Styles - H5 */
     --style-h5-size: var(--font-size-lg);
     --style-h5-weight: var(--font-weight-medium);
     --style-h5-line: var(--line-height-normal);
     --style-h5-spacing: var(--letter-spacing-normal);
   
     /* Heading Styles - H6 */
     --style-h6-size: var(--font-size-md);
     --style-h6-weight: var(--font-weight-medium);
     --style-h6-line: var(--line-height-normal);
     --style-h6-spacing: var(--letter-spacing-normal);
   
     /* Body Text Styles */
     --style-body-size: var(--font-size-base);
     --style-body-weight: var(--font-weight-normal);
     --style-body-line: var(--line-height-normal);
     --style-body-spacing: var(--letter-spacing-normal);
   
     /* Paragraph Styles */
     --style-p-size: var(--font-size-base);
   
     /* -------------------------------------------------------------------------
        SPACING SYSTEM - Fluid Responsive Spacing
        Complete scale from xxs to xxl for maximum flexibility
        Using clamp() for automatic scaling across all screen sizes
        ------------------------------------------------------------------------- */
   
     /* Base Spacing Scale - Use these for margins, padding, gaps */
     --space-xxs: clamp(0.125rem, 0.1rem + 0.125vw, 0.25rem);          /* 2px - 4px */
     --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);              /* 4px - 8px */
     --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);                  /* 8px - 16px */
     --space-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);                    /* 16px - 24px */
     --space-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);                /* 24px - 40px */
     --space-xl: clamp(2rem, 1.5rem + 2.5vw, 4rem);                    /* 32px - 64px */
     --space-2xl: clamp(3rem, 2rem + 5vw, 6rem);                       /* 48px - 96px */
     --space-3xl: clamp(4rem, 3rem + 5vw, 8rem);                       /* 64px - 128px */
     --space-4xl: clamp(6rem, 4rem + 10vw, 12rem);                     /* 96px - 192px */
   
     /* Gutter System - Site-wide spacing */
     --gutter-main: clamp(1.5rem, 2vw + 1rem, 4rem);                   /* 24px - 64px */
     --gutter-sm: clamp(1rem, 1.5vw + 0.5rem, 2.5rem);                 /* 16px - 40px */
     --gutter-lg: clamp(2rem, 3vw + 1.5rem, 6rem);                     /* 32px - 96px */
   
     /* Section Spacing */
     --section-padding-y: clamp(3rem, 2rem + 5vw, 6rem);               /* 48px - 96px */
     --section-padding-x: var(--gutter-main);                          /* Use main gutter */
     --section-gap: clamp(2rem, 1.5rem + 2.5vw, 4rem);                 /* 32px - 64px */
   
     /* Container Widths */
     --container-sm: 640px;
     --container-md: 768px;
     --container-lg: 1024px;
     --container-xl: 1280px;
     --container-2xl: 1536px;
     --container-max: 1920px;
   
     /* Container Padding (inner gutters) */
     --container-padding: var(--gutter-main);
   
     /* -------------------------------------------------------------------------
        BORDER SYSTEM
        Comprehensive stroke and radius scales
        ------------------------------------------------------------------------- */
   
     /* Stroke Widths (Border Widths) - Complete scale */
     --stroke-none: 0;
     --stroke-thin: 1px;
     --stroke-md: 2px;
     --stroke-thick: 3px;
     --stroke-xl: 4px;
     --stroke-2xl: 6px;
     --stroke-3xl: 8px;
   
     /* Aliases for common usage */
     --border-width-thin: var(--stroke-thin);
     --border-width-medium: var(--stroke-md);
     --border-width-thick: var(--stroke-thick);
   
     /* Border Radius - Complete scale */
     --radius-none: 0;
     --radius-xxs: 0.125rem;   /* 2px */
     --radius-xs: 0.25rem;     /* 4px */
     --radius-sm: 0.375rem;    /* 6px */
     --radius-md: 0.5rem;      /* 8px */
     --radius-lg: 0.75rem;     /* 12px */
     --radius-xl: 1rem;        /* 16px */
     --radius-2xl: 1.5rem;     /* 24px */
     --radius-3xl: 2rem;       /* 32px */
     --radius-4xl: 2.5rem;     /* 40px */
     --radius-full: 9999px;    /* Fully rounded / pill */
     --radius-circle: 50%;     /* Perfect circle */
   
     /* Border Styles - Combinable */
     --border-primary: var(--stroke-md) solid var(--color-primary);
     --border-secondary: var(--stroke-thin) solid var(--color-medium-gray);
     --border-dashed: var(--stroke-md) dashed var(--color-primary);
     --border-white: var(--stroke-thin) solid var(--color-white);
   
     /* -------------------------------------------------------------------------
        SHADOWS & EFFECTS
        ------------------------------------------------------------------------- */
   
     /* Box Shadows */
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
     --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
   
     /* Transitions */
     --transition-fast: 150ms ease-in-out;
     --transition-base: 300ms ease-in-out;
     --transition-slow: 500ms ease-in-out;
   
     /* Z-Index Scale */
     --z-base: 1;
     --z-dropdown: 100;
     --z-sticky: 200;
     --z-fixed: 300;
     --z-modal-backdrop: 400;
     --z-modal: 500;
     --z-popover: 600;
     --z-tooltip: 700;
   }
   
   /* ============================================================================
      GLOBAL TYPOGRAPHY - HTML TAG MAPPING
      All HTML heading tags reference typography utility classes
      ============================================================================ */
   
   body {
     font-family: var(--font-primary);
     font-size: var(--style-body-size);
     line-height: var(--style-body-line);
     font-weight: var(--style-body-weight);
     letter-spacing: var(--style-body-spacing);
     color: var(--color-text-primary); /* Default white text for dark background */
     background-color: var(--color-secondary);
   }
   
   /* Display Style (largest, for hero text) */
   h1, .h1 {
     font-family: var(--font-heading) !important;
     font-size: var(--style-h1-size) !important;
     font-weight: var(--style-h1-weight)!important;
     line-height: var(--style-h1-line)!important;
     letter-spacing: var(--style-h1-spacing)!important;
     margin-bottom: var(--space-lg)!important;
   }
   
   /* Heading Styles */
   h2, .h2 {
     font-family: var(--font-heading)!important;
     font-size: var(--style-h2-size) !important;
     font-weight: var(--style-h2-weight)!important;
     line-height: var(--style-h2-line)!important;
     letter-spacing: var(--style-h2-spacing)!important;
     color: var(--style-h2-color)!important;
     margin-bottom: var(--space-md)!important;
   }
   
   h3, .h3 {
     font-family: var(--font-heading)!important;
     font-size: var(--style-h3-size) !important;
     font-weight: var(--style-h3-weight)!important;
     line-height: var(--style-h3-line)!important;
     letter-spacing: var(--style-h3-spacing)!important;
     margin-bottom: var(--space-md)!important;
   }
   
   h4, .h4 {
     font-family: var(--font-heading)!important;
     font-size: var(--style-h4-size) !important;
     font-weight: var(--style-h4-weight)!important;
     line-height: var(--style-h4-line)!important;
     letter-spacing: var(--style-h4-spacing)!important;
     margin-bottom: var(--space-sm)!important;
   }
   
   h5, .h5 {
     font-family: var(--font-heading)!important;
     font-size: var(--style-h5-size) !important;
     font-weight: var(--style-h5-weight)!important;
     line-height: var(--style-h5-line)!important;
     letter-spacing: var(--style-h5-spacing)!important;
     margin-bottom: var(--space-sm)!important;
   }
   
   h6, .h6 {
     font-family: var(--font-heading)!important;
     font-size: var(--style-h6-size) !important;
     font-weight: var(--style-h6-weight)!important;
     line-height: var(--style-h6-line)!important;
     letter-spacing: var(--style-h6-spacing)!important;
     margin-bottom: var(--space-sm)!important;
   }
   
   
   
   /* ============================================================================
      RESPONSIVE TYPOGRAPHY - Variable-Based Fluid Scaling
      CSS variables change at breakpoints, so all elements using them scale automatically
      ============================================================================ */
   
   /* Mobile (767px and below) - Scale down all font size variables and adjust layout */
   @media (max-width: 767px) {
     :root {
       --font-size-hero: clamp(1.5rem, 5vw, 2.5rem);    /* H1: scales from 1.5rem to 2.5rem */
       --font-size-3xl: clamp(1.25rem, 4vw, 2rem);      /* H2/H3: scales from 1.25rem to 2rem */
       --font-size-xl: clamp(1rem, 3vw, 1.5rem);        /* H4: scales from 1rem to 1.5rem */
       --font-size-lg: clamp(0.875rem, 2vw, 1.125rem);  /* H5: scales from 0.875rem to 1.125rem */
       --font-size-md: clamp(0.875rem, 2vw, 1rem);      /* H6: scales from 0.875rem to 1rem */
       --font-size-base: clamp(0.9375rem, 2vw, 1.0625rem); /* P: scales from 0.9375rem to 1.0625rem */
     }
   
     /* Multi-column collapse moved to 980px breakpoint below */

     /* Make fractional widths full-width on mobile */
     .u-w-1-3,
     .u-w-2-3,
     .u-w-1-4,
     .u-w-3-4,
     .u-w-50 {
       width: 100% !important;
     }
   
     /* Stack flex containers vertically on mobile */
     .u-d-flex,
     .u-flex-row,
     .et_pb_row {
       flex-direction: column !important;
     }
   
     /* Force flex columns to stack */
     .u-flex-column {
       flex-direction: column !important; /* Already column, but ensure it stays */
     }
   
     /* Reduce gaps on mobile */
     .u-gap-xl {
       gap: var(--space-md) !important;
     }
     .u-gap-lg {
       gap: var(--space-sm) !important;
     }
     .u-gap-md {
       gap: var(--space-xs) !important;
     }
   }


   /* ============================================================================
      NAMING CONVENTION
      ============================================================================
      BASE CLASSES: Use underscores for modifiers (component_variant)
        Examples: container_full, heading_hero, button_primary
   
      UTILITY CLASSES: Use u- prefix (u-utilityname)
        Examples: u-bg-primary, u-text-center, u-mt-lg, u-rounded-full
   
      This creates clear distinction between base components and utilities
      ============================================================================ */
   
   /* ============================================================================
      BASE COMPONENT CLASSES
      Reusable foundational classes for common elements
      ============================================================================ */
   
   /* Container System */
   .container {
     width: 100%;
     max-width: var(--container-xl);
     margin-left: auto;
     margin-right: auto;
     padding-left: var(--container-padding);
     padding-right: var(--container-padding);
   }
   
   
   .container_small {
     width: 100%;
     max-width: var(--container-md);
     margin-left: auto;
     margin-right: auto;
     padding-left: var(--container-padding);
     padding-right: var(--container-padding);
   }
   
   .container_large {
     width: 100%;
     max-width: var(--container-2xl);
     margin-left: auto;
     margin-right: auto;
     padding-left: var(--container-padding);
     padding-right: var(--container-padding);
   }
   
   .container_full {
     width: 100%;
     max-width: 100%;
     padding-left: var(--gutter-main);
     padding-right: var(--gutter-main);
   }
   
   /* Button Base Classes - Use with Divi buttons or standalone */
   .button {
     display: inline-block;
     font-family: var(--font-primary) !important;
     font-weight: var(--font-weight-semibold) !important;
     text-align: center !important;
     text-decoration: none !important;
     cursor: pointer !important;
     transition: all var(--transition-base) !important;
     border: none !important;
   }
   
   .button_primary {
     background-color: var(--color-primary) !important;
     color: var(--color-white) !important;
     padding: var(--space-md) var(--space-xl) !important;
     border-radius: var(--radius-full) !important;
     font-size: var(--font-size-base) !important;
     letter-spacing: var(--letter-spacing-wide) !important;
     text-transform: uppercase !important;
     box-shadow: var(--shadow-md) !important;
   }
   
   .button_primary:hover {
     background-color: var(--color-primary-light) !important;
     transform: translateY(-2px) !important;
     box-shadow: var(--shadow-lg) !important;
   }
   
   .button_secondary {
     background-color: transparent !important;
     color: var(--color-primary) !important;
     border: var(--stroke-md) solid var(--color-primary) !important;
     padding: var(--space-md) var(--space-xl) !important;
     border-radius: var(--radius-full) !important;
     font-size: var(--font-size-base) !important;
     letter-spacing: var(--letter-spacing-wide) !important;
     text-transform: uppercase !important;
     box-shadow: none !important;
   }
   
   .button_secondary:hover {
     background-color: var(--color-primary) !important;
     color: var(--color-white) !important;
     transform: translateY(-2px) !important;
     box-shadow: var(--shadow-md) !important;
   }
   
   .button_link {
     background-color: transparent !important;
     color: var(--color-primary) !important;
     border: none !important;
     padding: 0 !important;
     font-size: var(--font-size-base) !important;
     letter-spacing: var(--letter-spacing-wide) !important;
     text-transform: uppercase !important;
     text-decoration: none !important;
     border-bottom: 2px solid var(--color-primary) !important;
     padding-bottom: 4px !important;
     display: inline-block !important;
     transition: all 0.3s ease !important;
   }
   
   .button_link:hover {
     color: var(--color-primary-light) !important;
     border-bottom-color: var(--color-primary-light) !important;
   }
   
   /* Section Base Classes */
   .section {
     width: 100%;
     padding-top: var(--section-padding-y);
     padding-bottom: var(--section-padding-y);
   }
   
   .section_no-padding {
     padding: 0;
   }
   
   .section_compact {
     padding-top: var(--space-2xl);
     padding-bottom: var(--space-2xl);
   }
   
   /* Card Base Classes */
   .card {
     background-color: var(--color-white);
     border-radius: var(--radius-lg);
     padding: var(--space-lg);
     box-shadow: var(--shadow-md);
   }
   
   .card_bordered {
     border: var(--stroke-thin) solid var(--color-medium-gray);
   }
   
   /* ============================================================================
      UTILITY/MODIFIER CLASSES
      Composable single-purpose classes to modify base components
      All utilities use u- prefix for clear distinction from base classes
      ============================================================================ */
   
   /* Typography Style Utilities - Apply complete text styles to any element */
   .u-text-display {
     font-family: var(--font-heading) !important;
     font-size: var(--style-h1-size) !important;
     font-weight: var(--font-weight-extrabold) !important;
     line-height: var(--line-height-tight) !important;
     letter-spacing: var(--letter-spacing-tighter) !important;
   }
   
   .u-text-h1 {
     font-family: var(--font-heading) !important;
     font-size: var(--style-h1-size) !important;
     font-weight: var(--style-h1-weight) !important;
     line-height: var(--style-h1-line) !important;
     letter-spacing: var(--style-h1-spacing) !important;
   }
   
   .u-text-h2 {
     font-family: var(--font-heading) !important;
     font-size: var(--style-h2-size) !important;
     font-weight: var(--style-h2-weight) !important;
     line-height: var(--style-h2-line) !important;
     letter-spacing: var(--style-h2-spacing) !important;
   }
   
   .u-text-h3 {
     font-family: var(--font-heading) !important;
     font-size: var(--style-h3-size) !important;
     font-weight: var(--style-h3-weight) !important;
     line-height: var(--style-h3-line) !important;
     letter-spacing: var(--style-h3-spacing) !important;
   }
   
   .u-text-h4 {
     font-family: var(--font-heading) !important;
     font-size: var(--style-h4-size) !important;
     font-weight: var(--style-h4-weight) !important;
     line-height: var(--style-h4-line) !important;
     letter-spacing: var(--style-h4-spacing) !important;
   }
   
   .u-text-h5 {
     font-family: var(--font-heading) !important;
     font-size: var(--style-h5-size) !important;
     font-weight: var(--style-h5-weight) !important;
     line-height: var(--style-h5-line) !important;
     letter-spacing: var(--style-h5-spacing) !important;
   }
   
   .u-text-h6 {
     font-family: var(--font-heading) !important;
     font-size: var(--style-h6-size) !important;
     font-weight: var(--style-h6-weight) !important;
     line-height: var(--style-h6-line) !important;
     letter-spacing: var(--style-h6-spacing) !important;
   }
   
   .u-text-body {
     font-family: var(--font-primary) !important;
     font-size: var(--style-body-size) !important;
     font-weight: var(--style-body-weight) !important;
     line-height: var(--style-body-line) !important;
     letter-spacing: var(--style-body-spacing) !important;
   }
   
   /* Text Color Utilities */
   /* Brand Colors */
   .u-text-primary { color: var(--color-primary) !important; }
   .u-text-primary-light { color: var(--color-primary-light) !important; }
   .u-text-primary-dark { color: var(--color-primary-dark) !important; }
   .u-text-secondary { color: var(--color-secondary) !important; }
   .u-text-secondary-light { color: var(--color-secondary-light) !important; }
   .u-text-secondary-dark { color: var(--color-secondary-dark) !important; }
   
   /* Neutral Colors */
   .u-text-white { color: var(--color-text-white) !important; }
   .u-text-light-gray { color: var(--color-light-gray) !important; }
   .u-text-medium-gray { color: var(--color-medium-gray) !important; }
   .u-text-dark-gray { color: var(--color-dark-gray) !important; }
   
   /* Text-Specific Colors (for default text on dark/light backgrounds) */
   .u-text-default { color: var(--color-text-primary) !important; }
   .u-text-subtle { color: var(--color-text-secondary) !important; }
   .u-text-muted { color: var(--color-text-muted) !important; }
   .u-text-dark { color: var(--color-text-dark) !important; }
   
   /* Accent Colors */
   .u-text-accent { color: var(--color-accent-banner) !important; }
   .u-text-accent-border { color: var(--color-accent-border) !important; }
   
   /* State Colors */
   .u-text-success { color: var(--color-success) !important; }
   .u-text-warning { color: var(--color-warning) !important; }
   .u-text-error { color: var(--color-error) !important; }
   .u-text-info { color: var(--color-info) !important; }
   
   /* Background Color Utilities */
   /* Brand Colors */
   .u-bg-primary { background-color: var(--color-primary) !important; }
   .u-bg-primary-light { background-color: var(--color-primary-light) !important; }
   .u-bg-primary-dark { background-color: var(--color-primary-dark) !important; }
   .u-bg-secondary { background-color: var(--color-secondary) !important; }
   .u-bg-secondary-light { background-color: var(--color-secondary-light) !important; }
   .u-bg-secondary-dark { background-color: var(--color-secondary-dark) !important; }
   
   /* Neutral Colors */
   .u-bg-white { background-color: var(--color-white) !important; }
   .u-bg-light-gray { background-color: var(--color-light-gray) !important; }
   .u-bg-medium-gray { background-color: var(--color-medium-gray) !important; }
   .u-bg-dark-gray { background-color: var(--color-dark-gray) !important; }
   .u-bg-dark { background-color: var(--color-secondary-dark) !important; }
   .u-bg-transparent { background-color: transparent !important; }
   
   /* Accent Colors */
   .u-bg-accent { background-color: var(--color-accent-banner) !important; }
   .u-bg-accent-border { background-color: var(--color-accent-border) !important; }
   
   /* State Colors */
   .u-bg-success { background-color: var(--color-success) !important; }
   .u-bg-warning { background-color: var(--color-warning) !important; }
   .u-bg-error { background-color: var(--color-error) !important; }
   .u-bg-info { background-color: var(--color-info) !important; }
   
   /* Spacing Utilities - Margin */
   .u-m-0 { margin: 0 !important; }
   .u-m-auto { margin: auto !important; }
   .u-mt-0 { margin-top: 0 !important; }
   .u-mb-0 { margin-bottom: 0 !important; }
   .u-ml-0 { margin-left: 0 !important; }
   .u-mr-0 { margin-right: 0 !important; }
   
   /* Top Margin */
   .u-mt-xxs { margin-top: var(--space-xxs) !important; }
   .u-mt-xs { margin-top: var(--space-xs) !important; }
   .u-mt-sm { margin-top: var(--space-sm) !important; }
   .u-mt-md { margin-top: var(--space-md) !important; }
   .u-mt-lg { margin-top: var(--space-lg) !important; }
   .u-mt-xl { margin-top: var(--space-xl) !important; }
   .u-mt-2xl { margin-top: var(--space-2xl) !important; }
   .u-mt-3xl { margin-top: var(--space-3xl) !important; }
   
   /* Bottom Margin */
   .u-mb-xxs { margin-bottom: var(--space-xxs) !important; }
   .u-mb-xs { margin-bottom: var(--space-xs) !important; }
   .u-mb-sm { margin-bottom: var(--space-sm) !important; }
   .u-mb-md { margin-bottom: var(--space-md) !important; }
   .u-mb-lg { margin-bottom: var(--space-lg) !important; }
   .u-mb-xl { margin-bottom: var(--space-xl) !important; }
   .u-mb-2xl { margin-bottom: var(--space-2xl) !important; }
   .u-mb-3xl { margin-bottom: var(--space-3xl) !important; }
   
   /* Left Margin */
   .u-ml-xxs { margin-left: var(--space-xxs) !important; }
   .u-ml-xs { margin-left: var(--space-xs) !important; }
   .u-ml-sm { margin-left: var(--space-sm) !important; }
   .u-ml-md { margin-left: var(--space-md) !important; }
   .u-ml-lg { margin-left: var(--space-lg) !important; }
   .u-ml-xl { margin-left: var(--space-xl) !important; }
   .u-ml-2xl { margin-left: var(--space-2xl) !important; }
   .u-ml-auto { margin-left: auto !important; }
   
   /* Right Margin */
   .u-mr-xxs { margin-right: var(--space-xxs) !important; }
   .u-mr-xs { margin-right: var(--space-xs) !important; }
   .u-mr-sm { margin-right: var(--space-sm) !important; }
   .u-mr-md { margin-right: var(--space-md) !important; }
   .u-mr-lg { margin-right: var(--space-lg) !important; }
   .u-mr-xl { margin-right: var(--space-xl) !important; }
   .u-mr-2xl { margin-right: var(--space-2xl) !important; }
   .u-mr-auto { margin-right: auto !important; }
   
   /* All Sides Margin */
   .u-m-xxs { margin: var(--space-xxs) !important; }
   .u-m-xs { margin: var(--space-xs) !important; }
   .u-m-sm { margin: var(--space-sm) !important; }
   .u-m-md { margin: var(--space-md) !important; }
   .u-m-lg { margin: var(--space-lg) !important; }
   .u-m-xl { margin: var(--space-xl) !important; }
   .u-m-2xl { margin: var(--space-2xl) !important; }
   .u-m-auto { margin: auto !important; }
   
   /* Vertical Margin (my = margin-y) */
   .u-my-xxs { margin-top: var(--space-xxs) !important; margin-bottom: var(--space-xxs) !important; }
   .u-my-xs { margin-top: var(--space-xs) !important; margin-bottom: var(--space-xs) !important; }
   .u-my-sm { margin-top: var(--space-sm) !important; margin-bottom: var(--space-sm) !important; }
   .u-my-md { margin-top: var(--space-md) !important; margin-bottom: var(--space-md) !important; }
   .u-my-lg { margin-top: var(--space-lg) !important; margin-bottom: var(--space-lg) !important; }
   .u-my-xl { margin-top: var(--space-xl) !important; margin-bottom: var(--space-xl) !important; }
   .u-my-2xl { margin-top: var(--space-2xl) !important; margin-bottom: var(--space-2xl) !important; }
   
   /* Horizontal Margin (mx = margin-x) */
   .u-mx-xxs { margin-left: var(--space-xxs) !important; margin-right: var(--space-xxs) !important; }
   .u-mx-xs { margin-left: var(--space-xs) !important; margin-right: var(--space-xs) !important; }
   .u-mx-sm { margin-left: var(--space-sm) !important; margin-right: var(--space-sm) !important; }
   .u-mx-md { margin-left: var(--space-md) !important; margin-right: var(--space-md) !important; }
   .u-mx-lg { margin-left: var(--space-lg) !important; margin-right: var(--space-lg) !important; }
   .u-mx-xl { margin-left: var(--space-xl) !important; margin-right: var(--space-xl) !important; }
   .u-mx-2xl { margin-left: var(--space-2xl) !important; margin-right: var(--space-2xl) !important; }
   .u-mx-auto { margin-left: auto !important; margin-right: auto !important; }
   
   /* Spacing Utilities - Padding */
   .u-p-0 { padding: 0 !important; }
   .u-pt-0 { padding-top: 0 !important; }
   .u-pb-0 { padding-bottom: 0 !important; }
   .u-pl-0 { padding-left: 0 !important; }
   .u-pr-0 { padding-right: 0 !important; }
   
   .u-p-xxs { padding: var(--space-xxs) !important; }
   .u-p-xs { padding: var(--space-xs) !important; }
   .u-p-sm { padding: var(--space-sm) !important; }
   .u-p-md { padding: var(--space-md) !important; }
   .u-p-lg { padding: var(--space-lg) !important; }
   .u-p-xl { padding: var(--space-xl) !important; }
   .u-p-2xl { padding: var(--space-2xl) !important; }
   
   /* Top Padding */
   .u-pt-xxs { padding-top: var(--space-xxs) !important; }
   .u-pt-xs { padding-top: var(--space-xs) !important; }
   .u-pt-sm { padding-top: var(--space-sm) !important; }
   .u-pt-md { padding-top: var(--space-md) !important; }
   .u-pt-lg { padding-top: var(--space-lg) !important; }
   .u-pt-xl { padding-top: var(--space-xl) !important; }
   .u-pt-2xl { padding-top: var(--space-2xl) !important; }
   
   /* Bottom Padding */
   .u-pb-xxs { padding-bottom: var(--space-xxs) !important; }
   .u-pb-xs { padding-bottom: var(--space-xs) !important; }
   .u-pb-sm { padding-bottom: var(--space-sm) !important; }
   .u-pb-md { padding-bottom: var(--space-md) !important; }
   .u-pb-lg { padding-bottom: var(--space-lg) !important; }
   .u-pb-xl { padding-bottom: var(--space-xl) !important; }
   .u-pb-2xl { padding-bottom: var(--space-2xl) !important; }
   
   /* Left Padding */
   .u-pl-xxs { padding-left: var(--space-xxs) !important; }
   .u-pl-xs { padding-left: var(--space-xs) !important; }
   .u-pl-sm { padding-left: var(--space-sm) !important; }
   .u-pl-md { padding-left: var(--space-md) !important; }
   .u-pl-lg { padding-left: var(--space-lg) !important; }
   .u-pl-xl { padding-left: var(--space-xl) !important; }
   .u-pl-2xl { padding-left: var(--space-2xl) !important; }
   
   /* Right Padding */
   .u-pr-xxs { padding-right: var(--space-xxs) !important; }
   .u-pr-xs { padding-right: var(--space-xs) !important; }
   .u-pr-sm { padding-right: var(--space-sm) !important; }
   .u-pr-md { padding-right: var(--space-md) !important; }
   .u-pr-lg { padding-right: var(--space-lg) !important; }
   .u-pr-xl { padding-right: var(--space-xl) !important; }
   .u-pr-2xl { padding-right: var(--space-2xl) !important; }
   
   /* All Sides Padding */
   .u-p-xxs { padding: var(--space-xxs) !important; }
   .u-p-xs { padding: var(--space-xs) !important; }
   .u-p-sm { padding: var(--space-sm) !important; }
   .u-p-md { padding: var(--space-md) !important; }
   .u-p-lg { padding: var(--space-lg) !important; }
   .u-p-xl { padding: var(--space-xl) !important; }
   .u-p-2xl { padding: var(--space-2xl) !important; }
   
   /* Vertical padding utilities (py = padding-y) */
   .u-py-xxs { padding-top: var(--space-xxs) !important; padding-bottom: var(--space-xxs) !important; }
   .u-py-xs { padding-top: var(--space-xs) !important; padding-bottom: var(--space-xs) !important; }
   .u-py-sm { padding-top: var(--space-sm) !important; padding-bottom: var(--space-sm) !important; }
   .u-py-md { padding-top: var(--space-md) !important; padding-bottom: var(--space-md) !important; }
   .u-py-lg { padding-top: var(--space-lg) !important; padding-bottom: var(--space-lg) !important; }
   .u-py-xl { padding-top: var(--space-xl) !important; padding-bottom: var(--space-xl) !important; }
   .u-py-2xl { padding-top: var(--space-2xl) !important; padding-bottom: var(--space-2xl) !important; }
   
   /* Horizontal padding utilities (px = padding-x) */
   .u-px-xxs { padding-left: var(--space-xxs) !important; padding-right: var(--space-xxs) !important; }
   .u-px-xs { padding-left: var(--space-xs) !important; padding-right: var(--space-xs) !important; }
   .u-px-sm { padding-left: var(--space-sm) !important; padding-right: var(--space-sm) !important; }
   .u-px-md { padding-left: var(--space-md) !important; padding-right: var(--space-md) !important; }
   .u-px-lg { padding-left: var(--space-lg) !important; padding-right: var(--space-lg) !important; }
   .u-px-xl { padding-left: var(--space-xl) !important; padding-right: var(--space-xl) !important; }
   .u-px-2xl { padding-left: var(--space-2xl) !important; padding-right: var(--space-2xl) !important; }
   
   /* Gap Utilities (for flexbox/grid) */
   .u-gap-xs { gap: var(--space-xs) !important; }
   .u-gap-sm { gap: var(--space-sm) !important; }
   .u-gap-md { gap: var(--space-md) !important; }
   .u-gap-lg { gap: var(--space-lg) !important; }
   .u-gap-xl { gap: var(--space-xl) !important; }
   
   /* Border Utilities */
   .u-border { border: var(--stroke-thin) solid var(--color-medium-gray) !important; }
   .u-border-primary { border: var(--stroke-md) solid var(--color-primary) !important; }
   .u-border-white { border: var(--stroke-thin) solid var(--color-white) !important; }
   .u-border-none { border: none !important; }
   
   .u-border-top { border-top: var(--stroke-thin) solid var(--color-medium-gray) !important; }
   .u-border-bottom { border-bottom: var(--stroke-thin) solid var(--color-medium-gray) !important; }
   
   /* Border Style Utilities */
   .u-border-dashed {
     border: none !important;
     background-image:
       repeating-linear-gradient(0deg, var(--color-primary), var(--color-primary) 15px, transparent 15px, transparent 25px),
       repeating-linear-gradient(90deg, var(--color-primary), var(--color-primary) 15px, transparent 15px, transparent 25px),
       repeating-linear-gradient(180deg, var(--color-primary), var(--color-primary) 15px, transparent 15px, transparent 25px),
       repeating-linear-gradient(270deg, var(--color-primary), var(--color-primary) 15px, transparent 15px, transparent 25px) !important;
     background-size: 2px 100%, 100% 2px, 2px 100%, 100% 2px !important;
     background-position: 0 0, 0 0, 100% 0, 0 100% !important;
     background-repeat: no-repeat !important;
   }
   .u-border-dotted { border-style: dotted !important; }
   .u-border-solid { border-style: solid !important; }
   
   /* Border Radius Utilities */
   .u-rounded-none { border-radius: 0 !important; }
   .u-rounded-xs { border-radius: var(--radius-xs) !important; }
   .u-rounded-sm { border-radius: var(--radius-sm) !important; }
   .u-rounded-md { border-radius: var(--radius-md) !important; }
   .u-rounded-lg { border-radius: var(--radius-lg) !important; }
   .u-rounded-xl { border-radius: var(--radius-xl) !important; }
   .u-rounded-2xl { border-radius: var(--radius-2xl) !important; }
   .u-rounded-3xl { border-radius: var(--radius-3xl) !important; }
   .u-rounded-full { border-radius: var(--radius-full) !important; }
   .u-rounded-circle { border-radius: var(--radius-circle) !important; }
   
   /* Stroke Width Utilities */
   .u-stroke-thin { border-width: var(--stroke-thin) !important; }
   .u-stroke-md { border-width: var(--stroke-md) !important; }
   .u-stroke-thick { border-width: var(--stroke-thick) !important; }
   
   /* Display Utilities */
   .u-d-none { display: none !important; }
   .u-d-block { display: block !important; }
   .u-d-inline { display: inline !important; }
   .u-d-inline-block { display: inline-block !important; }
   .u-d-flex { display: flex !important; }
   
   /* Flexbox Utilities */
   .u-flex-row { flex-direction: row !important; }
   .u-flex-column { flex-direction: column !important; }
   .u-justify-start { justify-content: flex-start !important; }
   .u-justify-center { justify-content: center !important; }
   .u-justify-end { justify-content: flex-end !important; }
   .u-justify-between { justify-content: space-between !important; }
   .u-justify-around { justify-content: space-around !important; }
   .u-justify-evenly { justify-content: space-evenly !important; }
   .u-justify-stretch { justify-content: stretch !important; }
   .u-align-start { align-items: flex-start !important; }
   .u-align-center { align-items: center !important; }
   .u-align-end { align-items: flex-end !important; }
   .u-align-stretch { align-items: stretch !important; }
   .u-align-baseline { align-items: baseline !important; }
   
   .center-column,
   .et_pb_column.center-column {
       display: flex !important;
       flex-direction: column !important;
       justify-content: center !important;
       align-items: center;
   }
   
   .et_pb_column.vertical-center,
   .u-vertical-center.et_pb_column {
       justify-content: center !important;
       align-items: center;
   }
   
   .et_pb_column.u-vertical-center-start {
       justify-content: center !important;
       align-items: flex-start;
   }
   
   /* ============================================================================
      TEXT UTILITIES
      ============================================================================ */
   
   .u-text-left { text-align: left !important; }
   .u-text-center { text-align: center !important; }
   .u-text-right { text-align: right !important; }
   .u-text-justify { text-align: justify !important; }
   
   .u-text-uppercase { text-transform: uppercase !important; }
   .u-text-lowercase { text-transform: lowercase !important; }
   .u-text-capitalize { text-transform: capitalize !important; }
   .u-text-none { text-transform: none !important; }
   
   .u-underline { text-decoration: underline !important; }
   .u-no-underline { text-decoration: none !important; }
   .u-line-through { text-decoration: line-through !important; }
   .u-overline { text-decoration: overline !important; }
   
   .u-italic { font-style: italic !important; }
   .u-not-italic { font-style: normal !important; }
   
   .u-whitespace-normal { white-space: normal !important; }
   .u-whitespace-nowrap { white-space: nowrap !important; }
   .u-whitespace-pre { white-space: pre !important; }
   .u-whitespace-pre-wrap { white-space: pre-wrap !important; }
   .u-whitespace-pre-line { white-space: pre-line !important; }
   
   .u-truncate {
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
   }
   
   .u-break-normal { overflow-wrap: normal !important; word-break: normal !important; }
   .u-break-words { overflow-wrap: break-word !important; }
   .u-break-all { word-break: break-all !important; }
   
   .u-list-none { list-style-type: none !important; }
   .u-list-disc { list-style-type: disc !important; }
   .u-list-decimal { list-style-type: decimal !important; }
   .u-list-inside { list-style-position: inside !important; }
   .u-list-outside { list-style-position: outside !important; }
   
   .u-line-clamp-1,
   .u-line-clamp-2,
   .u-line-clamp-3,
   .u-line-clamp-4 {
       display: -webkit-box !important;
       -webkit-box-orient: vertical !important;
       overflow: hidden !important;
   }
   
   .u-line-clamp-1 { -webkit-line-clamp: 1 !important; }
   .u-line-clamp-2 { -webkit-line-clamp: 2 !important; }
   .u-line-clamp-3 { -webkit-line-clamp: 3 !important; }
   .u-line-clamp-4 { -webkit-line-clamp: 4 !important; }
   
   .u-text-shadow-none { text-shadow: none !important; }
   .u-text-shadow-sm { text-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; }
   .u-text-shadow { text-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06) !important; }
   .u-text-shadow-md { text-shadow: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06) !important; }
   .u-text-shadow-lg { text-shadow: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05) !important; }
   
   /* ============================================================================
      FONT UTILITIES
      ============================================================================ */
   
   .u-font-light { font-weight: var(--font-weight-light) !important; }
   .u-font-normal { font-weight: var(--font-weight-normal) !important; }
   .u-font-medium { font-weight: var(--font-weight-medium) !important; }
   .u-font-semibold { font-weight: var(--font-weight-semibold) !important; }
   .u-font-bold { font-weight: var(--font-weight-bold) !important; }
   .u-font-extrabold { font-weight: var(--font-weight-extrabold) !important; }
   
   .u-tracking-tighter { letter-spacing: var(--letter-spacing-tighter) !important; }
   .u-tracking-tight { letter-spacing: var(--letter-spacing-tight) !important; }
   .u-tracking-normal { letter-spacing: var(--letter-spacing-normal) !important; }
   .u-tracking-base { letter-spacing: var(--letter-spacing-base) !important; }
   .u-tracking-wide { letter-spacing: var(--letter-spacing-wide) !important; }
   .u-tracking-wider { letter-spacing: var(--letter-spacing-wider) !important; }
   .u-tracking-widest { letter-spacing: var(--letter-spacing-widest) !important; }
   
   /* ======================================================
      TRACKING UTILITIES — REBUILT FOR VAN ALVA SYSTEM
      Naming: u-tracking-[value]
      Values: from -5 (tight) to +10 (wide)
      ====================================================== */
   
   /* TIGHT LETTER SPACING */
   .u-tracking--5  { letter-spacing: -0.05em !important; }
   .u-tracking--4  { letter-spacing: -0.04em !important; }
   .u-tracking--3  { letter-spacing: -0.03em !important; }
   .u-tracking--2  { letter-spacing: -0.02em !important; }
   .u-tracking--1  { letter-spacing: -0.01em !important; }
   
   /* NORMAL */
   .u-tracking-0   { letter-spacing: 0 !important; }
   
   /* WIDE — STANDARD */
   .u-tracking-25  { letter-spacing: 0.025em !important; }
   .u-tracking-50  { letter-spacing: 0.05em !important; }
   .u-tracking-75  { letter-spacing: 0.075em !important; }
   .u-tracking-100 { letter-spacing: 0.1em !important; }
   
   /* EXTRA WIDE */
   .u-tracking-150 { letter-spacing: 0.15em !important; }
   .u-tracking-200 { letter-spacing: 0.2em !important; }
   .u-tracking-250 { letter-spacing: 0.25em !important; }
   .u-tracking-300 { letter-spacing: 0.3em !important; }
   
   /* ULTRA WIDE */
   .u-tracking-400 { letter-spacing: 0.4em !important; }
   .u-tracking-500 { letter-spacing: 0.5em !important; }
   .u-tracking-600 { letter-spacing: 0.6em !important; }
   
   /* EXTREMO — POR SI LO USAS EN HERO TITLES */
   .u-tracking-800 { letter-spacing: 0.8em !important; }
   .u-tracking-1000 { letter-spacing: 1em !important; }
   
   
   /* ============================================================================
      FONT SIZE UTILITIES
      ============================================================================ */
   
   .u-text-xs { font-size: var(--font-size-xs) !important; }
   .u-text-sm { font-size: var(--font-size-sm) !important; }
   .u-text-base { font-size: var(--font-size-base) !important; }
   .u-text-lg { font-size: var(--font-size-lg) !important; }
   .u-text-xl { font-size: var(--font-size-xl) !important; }
   .u-text-2xl { font-size: var(--font-size-2xl) !important; }
   .u-text-3xl { font-size: var(--font-size-3xl) !important; }
   .u-text-4xl { font-size: var(--font-size-4xl) !important; }
   
   .u-leading-none { line-height: 1 !important; }
   .u-leading-tight { line-height: 1.25 !important; }
   .u-leading-snug { line-height: 1.375 !important; }
   .u-leading-normal { line-height: normal !important; }
   .u-leading-relaxed { line-height: 1.625 !important; }
   .u-leading-loose { line-height: 2 !important; }
   
   /* ============================================================================
      WIDTH UTILITIES
      ============================================================================ */
   
   .u-w-full { width: 100% !important; }
   .u-w-auto { width: auto !important; }
   .u-w-50 { width: 50% !important; }
   .u-w-1-3 { width: 33.333333% !important; }
   .u-w-2-3 { width: 66.666667% !important; }
   .u-w-1-4 { width: 25% !important; }
   .u-w-3-4 { width: 75% !important; }

   /* ============================================================================
      RESPONSIVE WIDTH UTILITIES
      Use these to override default mobile behavior or set specific breakpoint widths
      ============================================================================ */

   /* Tablet widths (980px and below) */
   @media (max-width: 980px) {
     .u-w-tablet-full { width: 100% !important; }
     .u-w-tablet-50 { width: 50% !important; }
     .u-w-tablet-1-3 { width: 33.333333% !important; }
     .u-w-tablet-2-3 { width: 66.666667% !important; }
     .u-w-tablet-1-4 { width: 25% !important; }
     .u-w-tablet-3-4 { width: 75% !important; }
     .u-w-tablet-auto { width: auto !important; }
   }

   /* Mobile widths (767px and below) */
   @media (max-width: 767px) {
     .u-w-mobile-full { width: 100% !important; }
     .u-w-mobile-50 { width: 50% !important; }
     .u-w-mobile-1-3 { width: 33.333333% !important; }
     .u-w-mobile-2-3 { width: 66.666667% !important; }
     .u-w-mobile-1-4 { width: 25% !important; }
     .u-w-mobile-3-4 { width: 75% !important; }
     .u-w-mobile-auto { width: auto !important; }
   }

   .u-max-w-full { max-width: 100% !important; }
   .u-max-w-container { max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; }
   
   /* ============================================================================
      FULL-WIDTH BREAKOUT
      ============================================================================ */
   
   .u-full-width {
     width: 100vw !important;
     margin-left: calc(50% - 50vw) !important;
     margin-right: calc(50% - 50vw) !important;
     max-width: none !important;
     padding-left: 0 !important;
     padding-right: 0 !important;
   }
   
   .et_pb_section.u-full-width,
   .et_pb_row.u-full-width,
   .et_pb_column.u-full-width {
     width: 100vw !important;
     margin-left: calc(50% - 50vw) !important;
     margin-right: calc(50% - 50vw) !important;
     max-width: none !important;
   }
   
   /* ============================================================================
      HEIGHT UTILITIES
      ============================================================================ */
   
   .u-h-auto { height: auto !important; }
   .u-h-full { height: 100% !important; }
   .u-h-screen { height: 100vh !important; }
   
   .u-min-h-0 { min-height: 0 !important; }
   .u-min-h-full { min-height: 100% !important; }
.u-min-h-halfscreen { min-height: 50vh !important; }
.u-min-h-2-3screen { min-height: 75vh !important; }
   .u-min-h-screen { min-height: 100vh !important; }
   
   .u-max-h-full { max-height: 100% !important; }
   
   /* ============================================================================
      FLEX UTILITIES
      ============================================================================ */
   
   .u-flex-grow { flex-grow: 1 !important; }
   .u-flex-grow-0 { flex-grow: 0 !important; }
   .u-flex-shrink { flex-shrink: 1 !important; }
   .u-flex-shrink-0 { flex-shrink: 0 !important; }
   .u-flex-basis-auto { flex-basis: auto !important; }
   .u-flex-basis-0 { flex-basis: 0 !important; }
   
   .u-flex-wrap { flex-wrap: wrap !important; }
   .u-flex-nowrap { flex-wrap: nowrap !important; }
   
   .u-self-auto { align-self: auto !important; }
   .u-self-start { align-self: flex-start !important; }
   .u-self-end { align-self: flex-end !important; }
   .u-self-center { align-self: center !important; }
   .u-self-stretch { align-self: stretch !important; }
   
   /* ============================================================
      DIVI GRID — RESPONSIVE
      ============================================================ */
   
   /* BASE GRID (Desktop default = 4 columns) */
   .et_pb_row.u-d-grid {
     display: grid !important;
     width: 100% !important;
     max-width: 100% !important;
     margin: 0 !important;
     padding: 0 !important;
   
     grid-template-columns: repeat(4, 1fr) !important;
     gap: 32px !important;
   
     /* Kill Divi flex bullshit */
     flex-wrap: unset !important;
     flex-direction: unset !important;
   }
   
   /* KILL DIVI FLOAT / WIDTHS / MARGINS */
   .et_pb_row.u-d-grid .et_pb_column {
     float: none !important;
     width: auto !important;
     max-width: none !important;
     margin: 0 !important;
     display: block !important;
   
     /* Your card padding */
     padding: 24px !important;
     box-sizing: border-box !important;
   }
   
   /* RESTORE IMAGE BEHAVIOR */
   .et_pb_row.u-d-grid .et_pb_image img,
   .et_pb_row.u-d-grid .et_pb_image,
   .et_pb_row.u-d-grid .et_pb_image span {
     width: 100% !important;
     height: auto !important;
     margin: 0 !important;
     padding: 0 !important;
     display: block !important;
   }
   
   /* ===========================================
      HARD BREAKPOINTS
      =========================================== */
   
   /* 3 columns — large laptops */
   @media (max-width: 1400px) {
     .et_pb_row.u-d-grid {
       grid-template-columns: repeat(3, 1fr) !important;
     }
   }
   
   /* 2 columns — tablets landscape */
   @media (max-width: 980px) {
     .et_pb_row.u-d-grid {
       grid-template-columns: repeat(2, 1fr) !important;
     }
   }
   
   /* 1 column — tablets portrait + phones */
   @media (max-width: 600px) {
     .et_pb_row.u-d-grid {
       grid-template-columns: repeat(1, 1fr) !important;
     }
   }
   
   /* ============================================================
      FIX LEFT/RIGHT GHOST SPACE FOR THIS SECTION
      ============================================================ */
   .et_pb_section_5 .et_pb_row.u-d-grid {
     padding-left: 0 !important;
     padding-right: 0 !important;
     margin-left: 0 !important;
     margin-right: 0 !important;
   }
   
   
   /* ============================================================================
      MULTI-COLUMN TEXT
      ============================================================================ */
   
   .u-columns-1 { column-count: 1 !important; }
   .u-columns-2 { column-count: 2 !important; }
   .u-columns-3 { column-count: 3 !important; }
   .u-columns-4 { column-count: 4 !important; }
   
   .u-column-gap-xs { column-gap: var(--space-xs) !important; }
   .u-column-gap-sm { column-gap: var(--space-sm) !important; }
   .u-column-gap-md { column-gap: var(--space-md) !important; }
   .u-column-gap-lg { column-gap: var(--space-lg) !important; }
   .u-column-gap-xl { column-gap: var(--space-xl) !important; }

   /* Tablet and below - collapse columns to single column */
   @media (max-width: 980px) {
     .u-columns-2,
     .u-columns-3,
     .u-columns-4 {
       column-count: 1 !important;
     }
   }

   /* ============================================================================
      POSITION / OVERFLOW / FIT / BACKGROUND / ALIGN / CURSOR / TRANSITION / VISIBILITY
      ============================================================================ */
   
   .u-position-static { position: static !important; }
   .u-position-relative { position: relative !important; }
   .u-position-absolute { position: absolute !important; }
   .u-position-fixed { position: fixed !important; }
   .u-position-sticky { position: sticky !important; }
   
   .u-overflow-auto { overflow: auto !important; }
   .u-overflow-hidden { overflow: hidden !important; }
   .u-overflow-visible { overflow: visible !important; }
   .u-overflow-scroll { overflow: scroll !important; }
   .u-overflow-x-auto { overflow-x: auto !important; }
   .u-overflow-y-auto { overflow-y: auto !important; }
   
   .u-object-contain { object-fit: contain !important; }
   .u-object-cover { object-fit: cover !important; }
   .u-object-fill { object-fit: fill !important; }
   .u-object-none { object-fit: none !important; }
   .u-object-scale-down { object-fit: scale-down !important; }
   
   .u-object-center { object-position: center !important; }
   .u-object-top { object-position: top !important; }
   .u-object-bottom { object-position: bottom !important; }
   .u-object-left { object-position: left !important; }
   .u-object-right { object-position: right !important; }
   
   .u-bg-center { background-position: center !important; }
   .u-bg-top { background-position: top !important; }
   .u-bg-bottom { background-position: bottom !important; }
   .u-bg-left { background-position: left !important; }
   .u-bg-right { background-position: right !important; }
   
   .u-bg-cover { background-size: cover !important; }
   .u-bg-contain { background-size: contain !important; }
   .u-bg-auto { background-size: auto !important; }
   .u-bg-full { background-size: 100% 100% !important; }
   
   .u-bg-no-repeat { background-repeat: no-repeat !important; }
   .u-bg-repeat { background-repeat: repeat !important; }
   
   .u-vertical-align-top { vertical-align: top !important; }
   .u-vertical-align-middle { vertical-align: middle !important; }
   .u-vertical-align-bottom { vertical-align: bottom !important; }
   
   .u-cursor-auto { cursor: auto !important; }
   .u-cursor-default { cursor: default !important; }
   .u-cursor-pointer { cursor: pointer !important; }
   
   .u-select-none { user-select: none !important; }
   .u-select-text { user-select: text !important; }
   
   .u-transition-none { transition: none !important; }
   .u-transition-all { transition: all var(--transition-base) !important; }
   
   .u-visible { visibility: visible !important; }
   .u-invisible { visibility: hidden !important; }
   
   
   /* ============================================================================
      DIVI OVERRIDES - Make Divi use our design system
      ============================================================================ */
   
   /* Override Divi default section/row spacing */
   /* Sections and rows have NO default padding - use utility classes */
   .et_pb_section {
     margin: 0 !important;
     background-color: transparent !important;
   }
   
   .et_pb_row {
     width: 100% !important;
     max-width: 100% !important;
     padding: 0 !important;
     margin: 0 !important;
   }
   
   /* Apply container_full to main content wrapper */
   #main-content {
     width: 100%;
     max-width: 100%;
     padding-left: var(--gutter-main);
     padding-right: var(--gutter-main);
   }
   
   /* Override Divi links */
   a {
     color: var(--color-primary);
     transition: color var(--transition-base);
   }
   
   a:hover {
     color: var(--color-primary-light);
   }
   
   /* Override Divi module spacing */
   .et_pb_module {
     margin-bottom: var(--space-lg) !important;
   }
   
   
   
   /* ============================================================================
      BUTTON SYSTEM - Connect Divi native buttons to our design system
      All native Divi buttons automatically get our base .button styles
      ============================================================================ */
   
   /* Native Divi buttons get base button styles automatically */
   .et_pb_button,
   .et_pb_button_module_wrapper .et_pb_button,
   button.et_pb_button,
   a.et_pb_button {
     /* Apply base button class styles to native Divi buttons */
     display: inline-block !important;
     font-family: var(--font-primary) !important;
     font-weight: var(--font-weight-semibold) !important;
     text-align: center !important;
     text-decoration: none !important;
     cursor: pointer !important;
     transition: all var(--transition-base) !important;
     border: none !important;
     
     /* Default to primary button style */
     background-color: var(--color-primary) !important;
     color: var(--color-white) !important;
     padding: var(--space-md) var(--space-xl) !important;
     border-radius: var(--radius-full) !important;
     font-size: var(--font-size-base) !important;
     letter-spacing: var(--letter-spacing-wide) !important;
     text-transform: uppercase !important;
     box-shadow: var(--shadow-md) !important;
   }
   
   .et_pb_button:hover,
   .et_pb_button_module_wrapper .et_pb_button:hover,
   button.et_pb_button:hover,
   a.et_pb_button:hover {
     background-color: var(--color-primary-light) !important;
     transform: translateY(-2px) !important;
     box-shadow: var(--shadow-lg) !important;
   }
   
   .et_pb_button:active,
   .et_pb_button_module_wrapper .et_pb_button:active,
   button.et_pb_button:active,
   a.et_pb_button:active {
     background-color: var(--color-primary-dark) !important;
     transform: translateY(0) !important;
     box-shadow: var(--shadow-sm) !important;
   }
   
   /* Secondary button styles - triggered by .button_secondary or .btn-secondary classes on Divi buttons */
   .et_pb_button.button_secondary,
   .et_pb_button.btn-secondary,
   button.et_pb_button.button_secondary,
   a.et_pb_button.button_secondary {
     background-color: transparent !important;
     color: var(--color-primary) !important;
     border: var(--stroke-md) solid var(--color-primary) !important;
     box-shadow: none !important;
   }
   
   .et_pb_button.button_secondary:hover,
   .et_pb_button.btn-secondary:hover,
   button.et_pb_button.button_secondary:hover,
   a.et_pb_button.button_secondary:hover {
     background-color: var(--color-primary) !important;
     color: var(--color-white) !important;
   }
   
   /* Link-style button - triggered by .button_link class on Divi buttons */
   .et_pb_button.button_link,
   button.et_pb_button.button_link,
   a.et_pb_button.button_link {
     background-color: transparent !important;
     color: var(--color-primary) !important;
     border: none !important;
     border-bottom: 2px solid var(--color-primary) !important;
     border-radius: 0 !important;
     padding: 0 0 4px 0 !important;
     box-shadow: none !important;
     text-transform: uppercase !important;
     letter-spacing: var(--letter-spacing-wide) !important;
   }
   
   .et_pb_button.button_link:hover,
   button.et_pb_button.button_link:hover,
   a.et_pb_button.button_link:hover {
     background-color: transparent !important;
     color: var(--color-primary-light) !important;
     border-bottom-color: var(--color-primary-light) !important;
   }
   
   /* Header/Shop button styles */
   .header-shop-button,
   .et_pb_menu .et_pb_button {
     background-color: var(--color-primary) !important;
     color: var(--color-white) !important;
     border-radius: var(--radius-full) !important;
     padding: var(--space-sm) var(--space-lg) !important;
     font-weight: var(--font-weight-semibold) !important;
     text-transform: uppercase !important;
     letter-spacing: var(--letter-spacing-wide) !important;
     transition: all var(--transition-base) !important;
   }
   
   .header-shop-button:hover,
   .et_pb_menu .et_pb_button:hover {
     background-color: var(--color-primary-light) !important;
     transform: scale(1.05) !important;
   }
   
   /* ============================================================================
      DIVI MODULE CLEANUP - Remove default styles from native modules
      Clear all default Divi styling so our utility classes take control
      ============================================================================ */
   
   /* NOTE: These cleanup styles only apply when you want to completely reset a module */
   /* Apply selectively or use utility classes to override as needed */
   
   /* Clean up button module wrapper */
   .et_pb_button_module_wrapper.et_pb_module_no_margin {
     margin: 0 !important;
   }
   
   /* Clean up image modules when needed */
   .et_pb_image.et_pb_module_no_margin,
   .et_pb_image_wrap.et_pb_module_no_margin {
     margin: 0 !important;
   }
   
   /* Clean up text modules when needed */
   .et_pb_text.et_pb_module_no_margin,
   .et_pb_text_inner.et_pb_module_no_margin {
     padding: 0 !important;
     margin: 0 !important;
   }
   
   /* ============================================================================
      SECTION-SPECIFIC CLASSES
      Classes for specific sections that need unique styling beyond utilities
      ============================================================================ */
   
   /* Hero Date Underline */
   .hero-date {
     position: relative !important;
     display: inline-block !important;
   }
   
   .hero-date::after {
     content: '' !important;
     position: absolute !important;
     bottom: -4px !important;
     left: 0 !important;
     width: 100% !important;
     height: 2px !important;
     background-color: var(--color-white) !important;
   }
   
   /* Background Overlay Helper */
   .hero-overlay {
     position: relative !important;
   }
   
   .hero-overlay::before {
     content: '' !important;
     position: absolute !important;
     top: 0 !important;
     left: 0 !important;
     width: 100% !important;
     height: 100% !important;
     background: rgba(10, 15, 14, 0.4) !important;
     z-index: 1 !important;
   }
   
   .hero-overlay > * {
     position: relative !important;
     z-index: 2 !important;
   }