.wlc-gates-shell{
    /* ==========================================
       COLORS
       ========================================== */

    /* Primary Brand */
    --color-primary: #047cec;           /* Main blue - homepage CTAs, links */
    --color-primary-dark: #0366c7;      /* Blue hover state */
    --color-primary-light: #3d96f0;     /* Blue highlights */

    /* CTA Red (Landing Pages ONLY) */
    --color-cta-red: #e50000;           /* Landing page CTAs - NOT homepage! */
    --color-cta-red-dark: #cc0000;      /* Red hover state */

    /* Top Bar - CRITICAL: This is DARK, not blue! */
    --color-topbar: #202020;            /* Dark gray - verified from live site */

    /* Text */
    --color-text-body: #6d6d6d;         /* Paragraphs, body copy */
    --color-text-heading: #202020;       /* Headlines, titles */
    --color-text-light: #ffffff;         /* On dark backgrounds */
    --color-text-muted: #999999;         /* Secondary, captions */

    /* Backgrounds */
    --color-bg-white: #ffffff;           /* Cards, content areas */
    --color-bg-light: #f8f8f8;          /* Page background, sections */
    --color-bg-dark: #1a1a1a;           /* Footer, dark sections */
    --color-bg-overlay: rgba(0,0,0,0.7); /* Image overlays */

    /* On-dark controls (contact path chooser, design counsel 2026-10-12, chip R4T) */
    --color-keyline-on-dark: #8a8a8a;   /* Tile and control keylines on dark strips (5.0:1 on --color-bg-dark) */
    --color-focus-on-dark: #8ec5f8;     /* Focus ring on dark grounds (9.5:1 on --color-bg-dark) */

    /* Accents */
    --color-accent-green: #10b981;      /* Success states */
    --color-accent-orange: #ff6600;     /* Warnings (use sparingly) */

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

    /* Font Families */
    --font-heading: 'Teko', 'Trebuchet MS', Helvetica, sans-serif;
    --font-body: 'Titillium Web', 'Trebuchet MS', Helvetica, sans-serif;

    /* Font Sizes */
    --font-size-xs: 14px;
    --font-size-sm: 16px;
    --font-size-base: 18px;
    --font-size-lg: 20px;
    --font-size-xl: 26px;               /* H3 */
    --font-size-2xl: 28px;
    --font-size-3xl: 36px;              /* H2 */
    --font-size-4xl: 38px;              /* H1 */
    --font-size-5xl: 48px;

    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line Heights */
    --line-height-tight: 1.1;           /* Headings */
    --line-height-normal: 1.44;         /* Body (26px at 18px) */
    --line-height-relaxed: 1.6;         /* Long-form content */

    /* ==========================================
       SPACING
       ========================================== */

    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-2xl: 64px;
    --spacing-3xl: 80px;

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

    --max-width: 1170px;                /* matches live site container; verified 2026-01-28 */
    --max-width-narrow: 800px;
    --max-width-content: 700px;
    --container-padding: 15px;          /* WPBakery default */

    /* ==========================================
       BORDERS & EFFECTS
       ========================================== */

    --border-radius: 0px;               /* Square corners (brand style) */
    --border-radius-sm: 4px;            /* Subtle rounding when needed */
    --border-radius-md: 8px;            /* Cards, inputs */

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);

    /* ==========================================
       TRANSITIONS
       ========================================== */

    --transition-fast: 0.1s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ==========================================
       Z-INDEX SCALE
       ========================================== */

    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 300;
    --z-tooltip: 400;

    /* ==========================================
       BUTTON SPECIFICS
       ========================================== */

    /* Red CTA (Landing Pages) */
    --btn-red-bg: #e50000;
    --btn-red-bg-hover: #cb1d1d;
    --btn-red-shadow-hover: #7c1212;
    --btn-red-padding: 16px 25px 14px;
    --btn-red-font-size: 20px;
    --btn-red-font-weight: 500;

    /* Blue CTA (Homepage/Footer) - use --color-primary; legacy --btn-blue-bg removed per S048 */
    --btn-blue-bg-hover: #0366c7;
    --btn-blue-padding: 10px 35px 8px;
    --btn-blue-font-size: 20px;
    --btn-blue-font-weight: 400;

    /* Cyan CTA (Product Pages - Quote) */
    --btn-cyan-bg: #0088cc;
    --btn-cyan-bg-hover: #006699;
    --btn-cyan-padding: 16px 25px 14px;

    /* Gray Secondary */
    --btn-gray-bg: #777777;
    --btn-gray-bg-hover: #666666;
    --btn-gray-padding: 14px 20px;

    /* ==========================================
       FORM TOKENS
       ========================================== */

    --form-input-height: 48px;
    --form-input-padding: 12px 16px;
    --form-input-border: 1px solid #cccccc;
    --form-input-border-focus: 1px solid var(--color-primary);
    --form-input-radius: 0px;
    --form-input-bg: #ffffff;
    --form-input-font-size: 16px;
    --form-input-color: #333333;
    --form-input-placeholder: #999999;

    --form-label-font-size: 14px;
    --form-label-font-weight: 600;
    --form-label-color: #202020;
    --form-label-spacing: 8px;

    --form-error-color: #e50000;
    --form-group-spacing: 24px;

    /* ==========================================
       CAROUSEL TIMING
       ========================================== */

    --carousel-hero-delay: 9000ms;
    --carousel-hero-transition: 300ms;
    --carousel-testimonial-delay: 4500ms;
    --carousel-testimonial-transition: 800ms;
    --carousel-logo-delay: 500ms;
    --carousel-logo-transition: 1200ms;

    /* ==========================================
       ADDITIONAL COLORS
       ========================================== */

    /* Light gray for logo section background */
    --color-bg-logo-section: #eeeeee;

    /* Link hover */
    --color-link-hover: #23527c;

    /* Dropdown hover background */
    --color-dropdown-hover-bg: #f5f5f5;

    /* ==========================================
       SEMANTIC (DVX-launch surface only)
       ========================================== */
    --surface-card: var(--color-bg-white);
    --text-body: var(--color-text-body);        /* alias #6d6d6d */
    --border-default: 1px solid #cccccc;
    --focus-ring: 0 0 0 2px var(--color-primary);
    --dvx-accent: #047cec;                      /* same as primary; separate token for DVX badge scope */
}

/* ==========================================
   GOOGLE FONTS IMPORT
   ========================================== */
/* Add this to your <head>:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Teko:wght@500;600;700&family=Titillium+Web:wght@400;600;700&display=swap" rel="stylesheet">
*/