/* =========================================================
   ELEMENTOR COMPONENT BRIDGE
   Applies Designer Controls settings to Elementor elements
   Scoped to body.mg-design-system
   
   Version: 2025.12.05
   - Uses Elementor CSS variables for padding/gap compatibility
   - Designer Controls apply only to outer containers (.e-parent)
   - Inner containers (.e-child) start at padding: 0 and gap: 0
   - Elementor inline styles override defaults (no !important on defaults)
   - Utility classes (mg-gap-*) use !important to override Designer Controls
   - CSS Specificity: Elementor inline > Utility classes > Designer Controls > Defaults
   ========================================================= */

/* Default gap CSS variables - set to 1vw */
body.mg-design-system {
  --mg-gap-row: 1vw;
  --mg-gap-column: 1vw;
}

body.mg-design-system :where(.elementor-button, .elementor-button-wrapper .elementor-button) {
  padding: var(--mg-btn-py) var(--mg-btn-px);
  border-radius: var(--mg-btn-radius);
  box-shadow: var(--mg-shadow-sm, none);
  transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease;
  
  /* Default button colors (can be overridden by Elementor) */
  background-color: var(--e-global-color-accent);
  color: #ffffff;
  border: none;
}

@media (hover:hover){
  body.mg-design-system :where(.elementor-button:hover){
    transform: translateY(calc(var(--mg-btn-hover-raise, 0px) * -1));
    box-shadow: var(--mg-btn-shadow, none);
  }
}

/* Focus ring geometry only (color = currentColor or Elementor) */
body.mg-design-system :where(.elementor-button:focus-visible){
  outline: var(--mg-focus-ring-width, 2px) solid currentColor;
  outline-offset: var(--mg-focus-ring-offset, 2px);
}

/* Inputs */
body.mg-design-system :where(.elementor-form .elementor-field, .elementor-field-group .elementor-field, input.elementor-field){
  /* Let Elementor control padding and borders */
  border-radius: var(--mg-input-radius);
  box-shadow: var(--mg-shadow-sm, none);
}

body.mg-design-system :where(.elementor-form .elementor-field:focus){
  outline: var(--mg-focus-ring-width, 2px) solid currentColor;
  outline-offset: var(--mg-focus-ring-offset, 2px);
}

/* Cards (opt-in: add .mg-card to a Container or Section) */
body.mg-design-system :where(.mg-card){
  border-radius: var(--mg-card-radius);
  box-shadow: var(--mg-shadow-md);
  /* Let Elementor control padding and borders */
}

/* Override Elementor's DEFAULT shadow with Designer Controls shadows
   JavaScript will handle the detection and replacement automatically */

/* Gravity Forms - Apply Designer Controls border radius */
body.mg-design-system :where(.gform_wrapper input[type="text"], .gform_wrapper input[type="email"], .gform_wrapper input[type="tel"], .gform_wrapper input[type="url"], .gform_wrapper input[type="password"], .gform_wrapper input[type="number"], .gform_wrapper textarea, .gform_wrapper select){
  border-radius: var(--mg-radius-sm);
}

/* Gravity Forms - More specific selectors for select/dropdown fields */
body.mg-design-system .gform_wrapper select,
body.mg-design-system .gform_wrapper .gfield_select,
body.mg-design-system .gform_wrapper .ginput_container_select select {
  border-radius: var(--mg-radius-sm);
}

body.mg-design-system :where(.gform_wrapper .gform_button, .gform_wrapper input[type="submit"]){
  border-radius: var(--mg-btn-radius);
  padding: var(--mg-btn-py) var(--mg-btn-px);
}

/* Nav (Elementor Nav Menu widget) - Elementor controls all styling */

/* =========================
   CONTAINER PADDING CONTROL
   REMOVED: All forced padding defaults - Elementor now has full control
   Padding can only be added via:
   1. Elementor inline styles (highest priority - always wins)
   2. Utility classes (mg-padding-*, mg-section-*, etc.)
   3. Explicit Elementor settings in the editor
   ========================= */

/* REMOVED: Default vertical padding on top-level containers
   Elementor now controls all padding by default */

/* REMOVED: Default horizontal padding on boxed containers
   Elementor now controls all padding by default */

/* INNER CONTAINERS: Explicitly set to 0 padding by default
   Inner containers (.e-child) get NO padding from Designer Controls presets
   Padding can only be added via:
   1. Elementor inline styles (highest priority - always wins)
   2. Utility classes (mg-padding-*, mg-section-*, etc.)
   3. Explicit Elementor settings in the editor
   This prevents padding accumulation in nested layouts
   
   NOTE: We use CSS variables with 0 values, not direct padding: 0
   This allows Elementor's inline styles to override without !important */
body.mg-design-system .e-child:not([class*="mg-section-"]):not([class*="mg-padding-"]) {
  /* Reset CSS variables to 0 for inner containers without utility classes
     Elementor inline styles will override these if padding is set in editor */
  --container-default-padding-top: 0;
  --container-default-padding-bottom: 0;
  --container-default-padding-left: 0;
  --container-default-padding-right: 0;
  --e-con-padding-top: 0;
  --e-con-padding-bottom: 0;
  --e-con-padding-left: 0;
  --e-con-padding-right: 0;
}

/* =========================
   FULL-WIDTH LAYOUT UTILITIES
   For edge-to-edge designs with safe content areas
   ========================= */

/* 1. Remove horizontal padding from full-width containers
   NOTE: No !important - Elementor's inline styles will override */
body.mg-design-system .mg-full-width.elementor-element[data-element_type="container"] {
  --container-default-padding-left: 0px;
  --container-default-padding-right: 0px;
}

body.mg-design-system .mg-full-width.elementor-section > .elementor-container {
  padding-left: 0;
  padding-right: 0;
}

/* 2. Content-width utility - adds max-width only (no forced padding)
   Elementor controls all padding */
body.mg-design-system .mg-content-width {
  max-width: var(--mg-content-max-width, 1400px);
  margin-left: auto;
  margin-right: auto;
  /* REMOVED: Forced horizontal padding - Elementor now controls padding */
}

/* 3. REMOVED: Automatic padding on children of full-width containers
   Elementor now controls all padding */

/* =========================
   GAP CONTROL (Column & Row spacing)
   Apply default gaps between widgets and elements
   ========================= */

/* Set Elementor's internal gap variables as fallbacks
   NO !important - allows Elementor inline styles to override */
body.mg-design-system .elementor-element,
body.mg-design-system [data-element_type] {
  --widgets-spacing: var(--mg-gap-row, 1vw);
  --e-con-gap: var(--mg-gap-row, 1vw);
}

/* CRITICAL GAP FIX: Elementor's CSS uses gap: var(--row-gap) var(--column-gap) on .e-con-inner
   If Elementor only sets --gap (shorthand), gap won't work because CSS can't extract values from shorthand
   SOLUTION: Override Elementor's gap rule to use --gap directly if set, otherwise use --row-gap/--column-gap */
body.mg-design-system .e-con > .e-con-inner {
  gap: var(--gap, var(--row-gap, 0) var(--column-gap, 0));
}

/* Elementor columns (side-by-side elements)
   NO !important - allows Elementor inline styles to override */
body.mg-design-system .elementor-row {
  gap: var(--mg-gap-column, 1vw);
}

/* Apply to containers
   NO !important - allows Elementor inline styles to override */
body.mg-design-system :where(.elementor-container) {
  column-gap: var(--mg-gap-column);
}

/* Apply to widget wraps
   NO !important - allows Elementor inline styles to override */
body.mg-design-system :where(.elementor-widget-wrap) {
  row-gap: var(--mg-gap-row);
}

/* =========================
   SMART BORDER RADIUS SYSTEM
   Container-first approach with dynamic size measurement
   Optimized for Flexbox/Container-based layouts
   ========================= */

/* PRIMARY: Enable container queries on all containers and columns */
body.mg-design-system :where(
  .elementor-container,
  .elementor-column,
  .elementor-inner-section > .elementor-container,
  .elementor-widget-wrap
) {
  container-type: inline-size;
  overflow: hidden; /* Prevent child content from breaking radius */
}

/* BASE: Default radius for containers (will be overridden by size queries) */
body.mg-design-system :where(.elementor-container, .elementor-column, .elementor-widget-wrap) {
  border-radius: var(--mg-radius-md); /* Fallback for unsupported browsers */
}

/* DYNAMIC SIZING: Containers measured by actual width */

/* XS - Very small containers (≤250px) - Mobile cards, narrow sidebars */
@container (max-width: 250px) {
  body.mg-design-system :where(.elementor-container, .elementor-column, .elementor-widget-wrap) {
    border-radius: var(--mg-radius-xs);
  }
}

/* SM - Small containers (251px-500px) - Mobile columns, small cards */
@container (min-width: 251px) and (max-width: 500px) {
  body.mg-design-system :where(.elementor-container, .elementor-column, .elementor-widget-wrap) {
    border-radius: var(--mg-radius-sm);
  }
}

/* MD - Medium containers (501px-800px) - Tablet layouts, 2-col grids */
@container (min-width: 501px) and (max-width: 800px) {
  body.mg-design-system :where(.elementor-container, .elementor-column, .elementor-widget-wrap) {
    border-radius: var(--mg-radius-md);
  }
}

/* LG - Large containers (801px-1200px) - Desktop content, 1-col layouts */
@container (min-width: 801px) and (max-width: 1200px) {
  body.mg-design-system :where(.elementor-container, .elementor-column, .elementor-widget-wrap) {
    border-radius: var(--mg-radius-lg);
  }
}

/* XL - Extra large containers (>1200px) - Full-width sections, hero areas */
@container (min-width: 1201px) {
  body.mg-design-system :where(.elementor-container, .elementor-column, .elementor-widget-wrap) {
    border-radius: var(--mg-radius-xl);
  }
}

/* SECTIONS: Always XL (full-width) */
body.mg-design-system :where(.elementor-section) {
  border-radius: var(--mg-radius-xl);
  overflow: hidden;
}

/* SPECIFIC ELEMENTS: Fixed radius (not size-dependent) */
/* Buttons - always SM */
body.mg-design-system :where(.elementor-button) {
  border-radius: var(--mg-btn-radius); /* Already set earlier */
}

/* Inputs - always use input radius */
body.mg-design-system :where(.elementor-field, input.elementor-field) {
  border-radius: var(--mg-input-radius); /* Already set earlier */
}

/* Opt-in cards - use card radius */
body.mg-design-system :where(.mg-card) {
  border-radius: var(--mg-card-radius); /* Already set earlier */
}

/* =========================
   HARDENING TWEAKS
   ========================= */

/* 1) Better focus in High Contrast */
@media (forced-colors: active){
  body.mg-design-system :where(.elementor-button:focus-visible,
                       .elementor-form .elementor-field:focus-visible){
    outline-color: CanvasText;
  }
}

/* 2) Prefer :focus-visible for inputs (keep :focus for Safari) */
body.mg-design-system :where(.elementor-form .elementor-field:focus-visible){
  outline: var(--mg-focus-ring-width, 2px) solid currentColor;
  outline-offset: var(--mg-focus-ring-offset, 2px);
}

/* 3) Respect reduced motion + disabled state */
@media (prefers-reduced-motion: reduce){
  body.mg-design-system :where(.elementor-button){ transition: none; }
  body.mg-design-system :where(.elementor-button:hover){ transform: none; }
}
body.mg-design-system :where(.elementor-button[disabled], .elementor-button[aria-disabled="true"]){
  pointer-events: none;
  transform: none;
  box-shadow: var(--mg-btn-shadow, none);
  opacity: .7;
}

/* =========================
   CUSTOM STYLES
   Project-specific Elementor widget adjustments
   ========================= */

body.mg-design-system .elementor-widget-icon-box .elementor-icon-box-icon {
  padding-top: 15px !important;
}/**
 * MG Design System - Gap Utility Classes
 * 
 * T-shirt sized gap utilities that ALWAYS override Designer Controls
 * 
 * Available Classes:
 * - mg-gap-* or mg-row-gap-* = Control vertical spacing (row gaps)
 * - mg-col-gap-* = Control horizontal spacing (column gaps)
 * - mg-no-gap = Remove all gaps
 * - mg-no-padding = Remove all padding
 * 
 * Sizes: none, xxs, xs, s, m, l, xl, xxl
 * 
 * Usage: Add class to any Elementor container
 * Example: Add "mg-gap-s" for 12px row gap
 * 
 * @package MG_Leadbuilder_2025
 */

/* =========================
   UNIVERSAL GAP UTILITIES (Both row AND column gaps)
   Use mg-gap-* when you want the same spacing in both directions
   ========================= */

.mg-gap-none,
.mg-gap-none .e-con-inner {
  --row-gap: 0 !important;
  --column-gap: 0 !important;
  --widgets-spacing-row: 0 !important;
  --widgets-spacing-column: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
  gap: 0 !important;
}

.mg-gap-xxs,
.mg-gap-xxs .e-con-inner {
  --row-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  --column-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  --widgets-spacing-row: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  --widgets-spacing-column: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  row-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  column-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
}

.mg-gap-xs,
.mg-gap-xs .e-con-inner {
  --row-gap: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --column-gap: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --widgets-spacing-row: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --widgets-spacing-column: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  row-gap: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  column-gap: clamp(0.5rem, 0.75vw, 0.75rem) !important;
}

.mg-gap-s,
.mg-gap-s .e-con-inner {
  --row-gap: clamp(0.75rem, 1vw, 1rem) !important;
  --column-gap: clamp(0.75rem, 1vw, 1rem) !important;
  --widgets-spacing-row: clamp(0.75rem, 1vw, 1rem) !important;
  --widgets-spacing-column: clamp(0.75rem, 1vw, 1rem) !important;
  row-gap: clamp(0.75rem, 1vw, 1rem) !important;
  column-gap: clamp(0.75rem, 1vw, 1rem) !important;
}

.mg-gap-m,
.mg-gap-m .e-con-inner {
  --row-gap: clamp(1rem, 1.25vw, 1.25rem) !important;
  --column-gap: clamp(1rem, 1.25vw, 1.25rem) !important;
  --widgets-spacing-row: clamp(1rem, 1.25vw, 1.25rem) !important;
  --widgets-spacing-column: clamp(1rem, 1.25vw, 1.25rem) !important;
  row-gap: clamp(1rem, 1.25vw, 1.25rem) !important;
  column-gap: clamp(1rem, 1.25vw, 1.25rem) !important;
}

.mg-gap-l,
.mg-gap-l .e-con-inner {
  --row-gap: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  --column-gap: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  --widgets-spacing-row: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  --widgets-spacing-column: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  row-gap: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  column-gap: clamp(1.25rem, 1.5vw, 1.75rem) !important;
}

.mg-gap-xl,
.mg-gap-xl .e-con-inner {
  --row-gap: clamp(1.5rem, 2vw, 2.5rem) !important;
  --column-gap: clamp(1.5rem, 2vw, 2.5rem) !important;
  --widgets-spacing-row: clamp(1.5rem, 2vw, 2.5rem) !important;
  --widgets-spacing-column: clamp(1.5rem, 2vw, 2.5rem) !important;
  row-gap: clamp(1.5rem, 2vw, 2.5rem) !important;
  column-gap: clamp(1.5rem, 2vw, 2.5rem) !important;
}

.mg-gap-xxl,
.mg-gap-xxl .e-con-inner {
  --row-gap: clamp(2rem, 2.5vw, 3.5rem) !important;
  --column-gap: clamp(2rem, 2.5vw, 3.5rem) !important;
  --widgets-spacing-row: clamp(2rem, 2.5vw, 3.5rem) !important;
  --widgets-spacing-column: clamp(2rem, 2.5vw, 3.5rem) !important;
  row-gap: clamp(2rem, 2.5vw, 3.5rem) !important;
  column-gap: clamp(2rem, 2.5vw, 3.5rem) !important;
}

/* =========================
   ROW GAP UTILITIES (Vertical spacing ONLY)
   Use mg-row-gap-* when you want different row vs column spacing
   ========================= */

.mg-row-gap-none,
.mg-row-gap-none .e-con-inner {
  --row-gap: 0 !important;
  --widgets-spacing-row: 0 !important;
  row-gap: 0 !important;
}

.mg-row-gap-xxs,
.mg-row-gap-xxs .e-con-inner {
  --row-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  --widgets-spacing-row: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  row-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
}

.mg-row-gap-xs,
.mg-row-gap-xs .e-con-inner {
  --row-gap: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --widgets-spacing-row: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  row-gap: clamp(0.5rem, 0.75vw, 0.75rem) !important;
}

.mg-row-gap-s,
.mg-row-gap-s .e-con-inner {
  --row-gap: clamp(0.75rem, 1vw, 1rem) !important;
  --widgets-spacing-row: clamp(0.75rem, 1vw, 1rem) !important;
  row-gap: clamp(0.75rem, 1vw, 1rem) !important;
}

.mg-row-gap-m,
.mg-row-gap-m .e-con-inner {
  --row-gap: clamp(1rem, 1.25vw, 1.25rem) !important;
  --widgets-spacing-row: clamp(1rem, 1.25vw, 1.25rem) !important;
  row-gap: clamp(1rem, 1.25vw, 1.25rem) !important;
}

.mg-row-gap-l,
.mg-row-gap-l .e-con-inner {
  --row-gap: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  --widgets-spacing-row: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  row-gap: clamp(1.25rem, 1.5vw, 1.75rem) !important;
}

.mg-row-gap-xl,
.mg-row-gap-xl .e-con-inner {
  --row-gap: clamp(1.5rem, 2vw, 2.5rem) !important;
  --widgets-spacing-row: clamp(1.5rem, 2vw, 2.5rem) !important;
  row-gap: clamp(1.5rem, 2vw, 2.5rem) !important;
}

.mg-row-gap-xxl,
.mg-row-gap-xxl .e-con-inner {
  --row-gap: clamp(2rem, 2.5vw, 3.5rem) !important;
  --widgets-spacing-row: clamp(2rem, 2.5vw, 3.5rem) !important;
  row-gap: clamp(2rem, 2.5vw, 3.5rem) !important;
}

/* =========================
   COLUMN GAP UTILITIES (Horizontal spacing between columns)
   ========================= */

.mg-col-gap-none,
.mg-col-gap-none .e-con-inner {
  --column-gap: 0 !important;
  --widgets-spacing-column: 0 !important;
  column-gap: 0 !important;
}

.mg-col-gap-xxs,
.mg-col-gap-xxs .e-con-inner {
  --column-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  --widgets-spacing-column: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  column-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
}

.mg-col-gap-xs,
.mg-col-gap-xs .e-con-inner {
  --column-gap: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --widgets-spacing-column: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  column-gap: clamp(0.5rem, 0.75vw, 0.75rem) !important;
}

.mg-col-gap-s,
.mg-col-gap-s .e-con-inner {
  --column-gap: clamp(0.75rem, 1vw, 1rem) !important;  /* Fluid Small */
  --widgets-spacing-column: clamp(0.75rem, 1vw, 1rem) !important;
  column-gap: clamp(0.75rem, 1vw, 1rem) !important;
}

.mg-col-gap-m,
.mg-col-gap-m .e-con-inner {
  --column-gap: clamp(1rem, 1.25vw, 1.25rem) !important;
  --widgets-spacing-column: clamp(1rem, 1.25vw, 1.25rem) !important;
  column-gap: clamp(1rem, 1.25vw, 1.25rem) !important;
}

.mg-col-gap-l,
.mg-col-gap-l .e-con-inner {
  --column-gap: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  --widgets-spacing-column: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  column-gap: clamp(1.25rem, 1.5vw, 1.75rem) !important;
}

.mg-col-gap-xl,
.mg-col-gap-xl .e-con-inner {
  --column-gap: clamp(1.5rem, 2vw, 2.5rem) !important;
  --widgets-spacing-column: clamp(1.5rem, 2vw, 2.5rem) !important;
  column-gap: clamp(1.5rem, 2vw, 2.5rem) !important;
}

.mg-col-gap-xxl,
.mg-col-gap-xxl .e-con-inner {
  --column-gap: clamp(2rem, 2.5vw, 3.5rem) !important;
  --widgets-spacing-column: clamp(2rem, 2.5vw, 3.5rem) !important;
  column-gap: clamp(2rem, 2.5vw, 3.5rem) !important;
}

/* =========================
   SPECIAL UTILITIES
   ========================= */

/* Top Bar - minimal padding for compact headers/footers (all sides minimal) */
/* HIGH SPECIFICITY: Utility classes ALWAYS override Designer Controls */
/* 
 * Why so many properties?
 * - Elementor uses CSS variables that it reads via JavaScript
 * - --container-default-padding-* = Legacy container system
 * - --e-con-padding-* = Modern Flexbox container system (.e-con)
 * - padding = Direct CSS fallback (highest priority with !important)
 * 
 * We set all three to ensure compatibility across Elementor versions
 * and container types. The direct padding property ensures it works
 * even if Elementor's JS doesn't read the variables.
 */
body.mg-design-system .mg-top-bar,
body.mg-design-system .mg-top-bar.e-parent,
body.mg-design-system .mg-top-bar[data-element_type="container"] {
  /* Legacy container variables */
  --container-default-padding-top: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --container-default-padding-bottom: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --container-default-padding-left: clamp(1rem, 2vw, 2rem) !important;
  --container-default-padding-right: clamp(1rem, 2vw, 2rem) !important;
  
  /* Modern Flexbox container variables */
  --e-con-padding-top: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --e-con-padding-bottom: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --e-con-padding-left: clamp(1rem, 2vw, 2rem) !important;
  --e-con-padding-right: clamp(1rem, 2vw, 2rem) !important;
  
  /* Direct CSS fallback (ensures it works regardless of Elementor version) */
  padding: clamp(0.5rem, 0.75vw, 0.75rem) clamp(1rem, 2vw, 2rem) !important;
}

/* CRITICAL: Reset inner container padding to prevent double padding */
body.mg-design-system .mg-top-bar > .e-con-inner {
  padding: 0 !important;
}

/* =========================
   DIRECTIONAL PADDING UTILITIES (Top/Bottom/Left/Right)
   Use these for precise control over individual sides
   Designer manual inputs ALWAYS override these (no !important)
   Bigger jumps between sizes for more significant differences
   ========================= */

/* PADDING TOP - All Sizes */
body.mg-design-system .mg-padding-t-xxs { 
  --container-default-padding-top: clamp(0.5rem, 1vw, 0.75rem);
  --e-con-padding-top: clamp(0.5rem, 1vw, 0.75rem);
  padding-top: clamp(0.5rem, 1vw, 0.75rem); 
}
body.mg-design-system .mg-padding-t-xs { 
  --container-default-padding-top: clamp(1rem, 1.5vw, 1.5rem);
  --e-con-padding-top: clamp(1rem, 1.5vw, 1.5rem);
  padding-top: clamp(1rem, 1.5vw, 1.5rem); 
}
body.mg-design-system .mg-padding-t-s { 
  --container-default-padding-top: clamp(1.5rem, 2vw, 2rem);
  --e-con-padding-top: clamp(1.5rem, 2vw, 2rem);
  padding-top: clamp(1.5rem, 2vw, 2rem); 
}
body.mg-design-system .mg-padding-t-m { 
  --container-default-padding-top: clamp(2rem, 3vw, 3rem);
  --e-con-padding-top: clamp(2rem, 3vw, 3rem);
  padding-top: clamp(2rem, 3vw, 3rem); 
}
body.mg-design-system .mg-padding-t-l { 
  --container-default-padding-top: clamp(3rem, 4vw, 4rem);
  --e-con-padding-top: clamp(3rem, 4vw, 4rem);
  padding-top: clamp(3rem, 4vw, 4rem); 
}
body.mg-design-system .mg-padding-t-xl { 
  --container-default-padding-top: clamp(4rem, 5vw, 5rem);
  --e-con-padding-top: clamp(4rem, 5vw, 5rem);
  padding-top: clamp(4rem, 5vw, 5rem); 
}
body.mg-design-system .mg-padding-t-xxl { 
  --container-default-padding-top: clamp(5rem, 6vw, 6rem);
  --e-con-padding-top: clamp(5rem, 6vw, 6rem);
  padding-top: clamp(5rem, 6vw, 6rem); 
}
body.mg-design-system .mg-padding-t-none { 
  --container-default-padding-top: 0;
  --e-con-padding-top: 0;
  padding-top: 0; 
}

/* PADDING BOTTOM - All Sizes */
body.mg-design-system .mg-padding-b-xxs { 
  --container-default-padding-bottom: clamp(0.5rem, 1vw, 0.75rem);
  --e-con-padding-bottom: clamp(0.5rem, 1vw, 0.75rem);
  padding-bottom: clamp(0.5rem, 1vw, 0.75rem); 
}
body.mg-design-system .mg-padding-b-xs { 
  --container-default-padding-bottom: clamp(1rem, 1.5vw, 1.5rem);
  --e-con-padding-bottom: clamp(1rem, 1.5vw, 1.5rem);
  padding-bottom: clamp(1rem, 1.5vw, 1.5rem); 
}
body.mg-design-system .mg-padding-b-s { 
  --container-default-padding-bottom: clamp(1.5rem, 2vw, 2rem);
  --e-con-padding-bottom: clamp(1.5rem, 2vw, 2rem);
  padding-bottom: clamp(1.5rem, 2vw, 2rem); 
}
body.mg-design-system .mg-padding-b-m { 
  --container-default-padding-bottom: clamp(2rem, 3vw, 3rem);
  --e-con-padding-bottom: clamp(2rem, 3vw, 3rem);
  padding-bottom: clamp(2rem, 3vw, 3rem); 
}
body.mg-design-system .mg-padding-b-l { 
  --container-default-padding-bottom: clamp(3rem, 4vw, 4rem);
  --e-con-padding-bottom: clamp(3rem, 4vw, 4rem);
  padding-bottom: clamp(3rem, 4vw, 4rem); 
}
body.mg-design-system .mg-padding-b-xl { 
  --container-default-padding-bottom: clamp(4rem, 5vw, 5rem);
  --e-con-padding-bottom: clamp(4rem, 5vw, 5rem);
  padding-bottom: clamp(4rem, 5vw, 5rem); 
}
body.mg-design-system .mg-padding-b-xxl { 
  --container-default-padding-bottom: clamp(5rem, 6vw, 6rem);
  --e-con-padding-bottom: clamp(5rem, 6vw, 6rem);
  padding-bottom: clamp(5rem, 6vw, 6rem); 
}
body.mg-design-system .mg-padding-b-none { 
  --container-default-padding-bottom: 0;
  --e-con-padding-bottom: 0;
  padding-bottom: 0; 
}

/* PADDING LEFT - All Sizes */
body.mg-design-system .mg-padding-l-xxs { 
  --container-default-padding-left: clamp(0.5rem, 1vw, 0.75rem);
  --e-con-padding-left: clamp(0.5rem, 1vw, 0.75rem);
  padding-left: clamp(0.5rem, 1vw, 0.75rem); 
}
body.mg-design-system .mg-padding-l-xs { 
  --container-default-padding-left: clamp(1rem, 1.5vw, 1.5rem);
  --e-con-padding-left: clamp(1rem, 1.5vw, 1.5rem);
  padding-left: clamp(1rem, 1.5vw, 1.5rem); 
}
body.mg-design-system .mg-padding-l-s { 
  --container-default-padding-left: clamp(1.5rem, 2vw, 2rem);
  --e-con-padding-left: clamp(1.5rem, 2vw, 2rem);
  padding-left: clamp(1.5rem, 2vw, 2rem); 
}
body.mg-design-system .mg-padding-l-m { 
  --container-default-padding-left: clamp(2rem, 3vw, 3rem);
  --e-con-padding-left: clamp(2rem, 3vw, 3rem);
  padding-left: clamp(2rem, 3vw, 3rem); 
}
body.mg-design-system .mg-padding-l-l { 
  --container-default-padding-left: clamp(3rem, 4vw, 4rem);
  --e-con-padding-left: clamp(3rem, 4vw, 4rem);
  padding-left: clamp(3rem, 4vw, 4rem); 
}
body.mg-design-system .mg-padding-l-xl { 
  --container-default-padding-left: clamp(4rem, 5vw, 5rem);
  --e-con-padding-left: clamp(4rem, 5vw, 5rem);
  padding-left: clamp(4rem, 5vw, 5rem); 
}
body.mg-design-system .mg-padding-l-xxl { 
  --container-default-padding-left: clamp(5rem, 6vw, 6rem);
  --e-con-padding-left: clamp(5rem, 6vw, 6rem);
  padding-left: clamp(5rem, 6vw, 6rem); 
}
body.mg-design-system .mg-padding-l-none { 
  --container-default-padding-left: 0;
  --e-con-padding-left: 0;
  padding-left: 0; 
}

/* PADDING RIGHT - All Sizes */
body.mg-design-system .mg-padding-r-xxs { 
  --container-default-padding-right: clamp(0.5rem, 1vw, 0.75rem);
  --e-con-padding-right: clamp(0.5rem, 1vw, 0.75rem);
  padding-right: clamp(0.5rem, 1vw, 0.75rem); 
}
body.mg-design-system .mg-padding-r-xs { 
  --container-default-padding-right: clamp(1rem, 1.5vw, 1.5rem);
  --e-con-padding-right: clamp(1rem, 1.5vw, 1.5rem);
  padding-right: clamp(1rem, 1.5vw, 1.5rem); 
}
body.mg-design-system .mg-padding-r-s { 
  --container-default-padding-right: clamp(1.5rem, 2vw, 2rem);
  --e-con-padding-right: clamp(1.5rem, 2vw, 2rem);
  padding-right: clamp(1.5rem, 2vw, 2rem); 
}
body.mg-design-system .mg-padding-r-m { 
  --container-default-padding-right: clamp(2rem, 3vw, 3rem);
  --e-con-padding-right: clamp(2rem, 3vw, 3rem);
  padding-right: clamp(2rem, 3vw, 3rem); 
}
body.mg-design-system .mg-padding-r-l { 
  --container-default-padding-right: clamp(3rem, 4vw, 4rem);
  --e-con-padding-right: clamp(3rem, 4vw, 4rem);
  padding-right: clamp(3rem, 4vw, 4rem); 
}
body.mg-design-system .mg-padding-r-xl { 
  --container-default-padding-right: clamp(4rem, 5vw, 5rem);
  --e-con-padding-right: clamp(4rem, 5vw, 5rem);
  padding-right: clamp(4rem, 5vw, 5rem); 
}
body.mg-design-system .mg-padding-r-xxl { 
  --container-default-padding-right: clamp(5rem, 6vw, 6rem);
  --e-con-padding-right: clamp(5rem, 6vw, 6rem);
  padding-right: clamp(5rem, 6vw, 6rem); 
}
body.mg-design-system .mg-padding-r-none { 
  --container-default-padding-right: 0;
  --e-con-padding-right: 0;
  padding-right: 0; 
}

/* PADDING Y-AXIS (Top + Bottom) - All Sizes */
body.mg-design-system .mg-padding-y-xxs { 
  --container-default-padding-top: clamp(0.5rem, 1vw, 0.75rem);
  --container-default-padding-bottom: clamp(0.5rem, 1vw, 0.75rem);
  --e-con-padding-top: clamp(0.5rem, 1vw, 0.75rem);
  --e-con-padding-bottom: clamp(0.5rem, 1vw, 0.75rem);
  padding-top: clamp(0.5rem, 1vw, 0.75rem); 
  padding-bottom: clamp(0.5rem, 1vw, 0.75rem); 
}
body.mg-design-system .mg-padding-y-xs { 
  --container-default-padding-top: clamp(1rem, 1.5vw, 1.5rem);
  --container-default-padding-bottom: clamp(1rem, 1.5vw, 1.5rem);
  --e-con-padding-top: clamp(1rem, 1.5vw, 1.5rem);
  --e-con-padding-bottom: clamp(1rem, 1.5vw, 1.5rem);
  padding-top: clamp(1rem, 1.5vw, 1.5rem); 
  padding-bottom: clamp(1rem, 1.5vw, 1.5rem); 
}
body.mg-design-system .mg-padding-y-s { 
  --container-default-padding-top: clamp(1.5rem, 2vw, 2rem);
  --container-default-padding-bottom: clamp(1.5rem, 2vw, 2rem);
  --e-con-padding-top: clamp(1.5rem, 2vw, 2rem);
  --e-con-padding-bottom: clamp(1.5rem, 2vw, 2rem);
  padding-top: clamp(1.5rem, 2vw, 2rem); 
  padding-bottom: clamp(1.5rem, 2vw, 2rem); 
}
body.mg-design-system .mg-padding-y-m { 
  --container-default-padding-top: clamp(2rem, 3vw, 3rem);
  --container-default-padding-bottom: clamp(2rem, 3vw, 3rem);
  --e-con-padding-top: clamp(2rem, 3vw, 3rem);
  --e-con-padding-bottom: clamp(2rem, 3vw, 3rem);
  padding-top: clamp(2rem, 3vw, 3rem); 
  padding-bottom: clamp(2rem, 3vw, 3rem); 
}
body.mg-design-system .mg-padding-y-l { 
  --container-default-padding-top: clamp(3rem, 4vw, 4rem);
  --container-default-padding-bottom: clamp(3rem, 4vw, 4rem);
  --e-con-padding-top: clamp(3rem, 4vw, 4rem);
  --e-con-padding-bottom: clamp(3rem, 4vw, 4rem);
  padding-top: clamp(3rem, 4vw, 4rem); 
  padding-bottom: clamp(3rem, 4vw, 4rem); 
}
body.mg-design-system .mg-padding-y-xl { 
  --container-default-padding-top: clamp(4rem, 5vw, 5rem);
  --container-default-padding-bottom: clamp(4rem, 5vw, 5rem);
  --e-con-padding-top: clamp(4rem, 5vw, 5rem);
  --e-con-padding-bottom: clamp(4rem, 5vw, 5rem);
  padding-top: clamp(4rem, 5vw, 5rem); 
  padding-bottom: clamp(4rem, 5vw, 5rem); 
}
body.mg-design-system .mg-padding-y-xxl { 
  --container-default-padding-top: clamp(5rem, 6vw, 6rem);
  --container-default-padding-bottom: clamp(5rem, 6vw, 6rem);
  --e-con-padding-top: clamp(5rem, 6vw, 6rem);
  --e-con-padding-bottom: clamp(5rem, 6vw, 6rem);
  padding-top: clamp(5rem, 6vw, 6rem); 
  padding-bottom: clamp(5rem, 6vw, 6rem); 
}
body.mg-design-system .mg-padding-y-none { 
  --container-default-padding-top: 0;
  --container-default-padding-bottom: 0;
  --e-con-padding-top: 0;
  --e-con-padding-bottom: 0;
  padding-top: 0; 
  padding-bottom: 0; 
}

/* PADDING X-AXIS (Left + Right) - All Sizes */
body.mg-design-system .mg-padding-x-xxs { 
  --container-default-padding-left: clamp(0.5rem, 1vw, 0.75rem);
  --container-default-padding-right: clamp(0.5rem, 1vw, 0.75rem);
  --e-con-padding-left: clamp(0.5rem, 1vw, 0.75rem);
  --e-con-padding-right: clamp(0.5rem, 1vw, 0.75rem);
  padding-left: clamp(0.5rem, 1vw, 0.75rem); 
  padding-right: clamp(0.5rem, 1vw, 0.75rem); 
}
body.mg-design-system .mg-padding-x-xs { 
  --container-default-padding-left: clamp(1rem, 1.5vw, 1.5rem);
  --container-default-padding-right: clamp(1rem, 1.5vw, 1.5rem);
  --e-con-padding-left: clamp(1rem, 1.5vw, 1.5rem);
  --e-con-padding-right: clamp(1rem, 1.5vw, 1.5rem);
  padding-left: clamp(1rem, 1.5vw, 1.5rem); 
  padding-right: clamp(1rem, 1.5vw, 1.5rem); 
}
body.mg-design-system .mg-padding-x-s { 
  --container-default-padding-left: clamp(1.5rem, 2vw, 2rem);
  --container-default-padding-right: clamp(1.5rem, 2vw, 2rem);
  --e-con-padding-left: clamp(1.5rem, 2vw, 2rem);
  --e-con-padding-right: clamp(1.5rem, 2vw, 2rem);
  padding-left: clamp(1.5rem, 2vw, 2rem); 
  padding-right: clamp(1.5rem, 2vw, 2rem); 
}
body.mg-design-system .mg-padding-x-m { 
  --container-default-padding-left: clamp(2rem, 3vw, 3rem);
  --container-default-padding-right: clamp(2rem, 3vw, 3rem);
  --e-con-padding-left: clamp(2rem, 3vw, 3rem);
  --e-con-padding-right: clamp(2rem, 3vw, 3rem);
  padding-left: clamp(2rem, 3vw, 3rem); 
  padding-right: clamp(2rem, 3vw, 3rem); 
}
body.mg-design-system .mg-padding-x-l { 
  --container-default-padding-left: clamp(3rem, 4vw, 4rem);
  --container-default-padding-right: clamp(3rem, 4vw, 4rem);
  --e-con-padding-left: clamp(3rem, 4vw, 4rem);
  --e-con-padding-right: clamp(3rem, 4vw, 4rem);
  padding-left: clamp(3rem, 4vw, 4rem); 
  padding-right: clamp(3rem, 4vw, 4rem); 
}
body.mg-design-system .mg-padding-x-xl { 
  --container-default-padding-left: clamp(4rem, 5vw, 5rem);
  --container-default-padding-right: clamp(4rem, 5vw, 5rem);
  --e-con-padding-left: clamp(4rem, 5vw, 5rem);
  --e-con-padding-right: clamp(4rem, 5vw, 5rem);
  padding-left: clamp(4rem, 5vw, 5rem); 
  padding-right: clamp(4rem, 5vw, 5rem); 
}
body.mg-design-system .mg-padding-x-xxl { 
  --container-default-padding-left: clamp(5rem, 6vw, 6rem);
  --container-default-padding-right: clamp(5rem, 6vw, 6rem);
  --e-con-padding-left: clamp(5rem, 6vw, 6rem);
  --e-con-padding-right: clamp(5rem, 6vw, 6rem);
  padding-left: clamp(5rem, 6vw, 6rem); 
  padding-right: clamp(5rem, 6vw, 6rem); 
}
body.mg-design-system .mg-padding-x-none { 
  --container-default-padding-left: 0;
  --container-default-padding-right: 0;
  --e-con-padding-left: 0;
  --e-con-padding-right: 0;
  padding-left: 0; 
  padding-right: 0; 
}

/* =========================
   SIMPLE RESET UTILITIES
   ========================= */

/* Remove ALL gaps (row + column) - simpler alternative to mg-gap-all-none */
.mg-no-gap {
  --row-gap: 0 !important;
  --column-gap: 0 !important;
  --widgets-spacing-row: 0 !important;
  --widgets-spacing-column: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
  gap: 0 !important;
}

/* Remove ALL padding from container */
/* See .mg-top-bar above for explanation of why we set all three property types */
body.mg-design-system .mg-no-padding,
body.mg-design-system .mg-no-padding.e-parent,
body.mg-design-system .mg-no-padding[data-element_type="container"] {
  /* Legacy container variables */
  --container-default-padding-top: 0 !important;
  --container-default-padding-bottom: 0 !important;
  --container-default-padding-left: 0 !important;
  --container-default-padding-right: 0 !important;
  
  /* Modern Flexbox container variables */
  --e-con-padding-top: 0 !important;
  --e-con-padding-bottom: 0 !important;
  --e-con-padding-left: 0 !important;
  --e-con-padding-right: 0 !important;
  
  /* Direct CSS fallback */
  padding: 0 !important;
}

/* Reset inner container padding for mg-no-padding */
body.mg-design-system .mg-no-padding > .e-con-inner {
  padding: 0 !important;
}

/* =========================
   USAGE EXAMPLES & SIZE SCALE
   ========================= */

/*
 * T-SHIRT SIZING: xxs, xs, s, m, l, xl, xxl
 * 
 * ===================================================
 * UTILITIES AVAILABLE:
 * ===================================================
 * 
 * GAP UTILITIES (for spacing between widgets/columns):
 * - mg-gap-* = Control both row AND column gaps (universal)
 * - mg-row-gap-* = Control vertical spacing ONLY (row gaps)
 * - mg-col-gap-* = Control horizontal spacing ONLY (column gaps)
 * - mg-no-gap = Remove all gaps
 * 
 * PADDING UTILITIES (for container padding):
 * - mg-padding-t-* = Control top padding only
 * - mg-padding-b-* = Control bottom padding only
 * - mg-padding-l-* = Control left padding only
 * - mg-padding-r-* = Control right padding only
 * - mg-padding-y-* = Control top AND bottom padding (vertical axis)
 * - mg-padding-x-* = Control left AND right padding (horizontal axis)
 * - mg-no-padding = Remove all padding
 * 
 * ===================================================
 * SIZE SCALES (Fluid/Responsive using clamp()):
 * ===================================================
 * 
 * GAP SIZES (spacing between elements):
 * xxs = 4-8px    | clamp(0.25rem, 0.5vw, 0.5rem)
 * xs  = 8-12px   | clamp(0.5rem, 0.75vw, 0.75rem)
 * s   = 12-16px  | clamp(0.75rem, 1vw, 1rem)
 * m   = 16-20px  | clamp(1rem, 1.25vw, 1.25rem)
 * l   = 20-28px  | clamp(1.25rem, 1.5vw, 1.75rem)
 * xl  = 24-40px  | clamp(1.5rem, 2vw, 2.5rem)
 * xxl = 32-56px  | clamp(2rem, 2.5vw, 3.5rem)
 * 
 * PADDING SIZES (container padding - bigger jumps):
 * xxs = 8-12px   | clamp(0.5rem, 1vw, 0.75rem)
 * xs  = 16-24px  | clamp(1rem, 1.5vw, 1.5rem)
 * s   = 24-32px  | clamp(1.5rem, 2vw, 2rem)
 * m   = 32-48px  | clamp(2rem, 3vw, 3rem)
 * l   = 48-64px  | clamp(3rem, 4vw, 4rem)
 * xl  = 64-80px  | clamp(4rem, 5vw, 5rem)
 * xxl = 80-96px  | clamp(5rem, 6vw, 6rem)
 * 
 * ===================================================
 * USAGE EXAMPLES:
 * ===================================================
 * 
 * Header with tight row spacing:
 * Add class: mg-gap-xs or mg-row-gap-xs
 * Result: Fluid 8-12px row gap (scales with viewport)
 * 
 * Control both row AND column gaps:
 * Add classes: mg-gap-s mg-col-gap-l
 * Result: Fluid 12-16px row gap, 20-28px column gap
 * 
 * Add top padding only:
 * Add class: mg-padding-t-m
 * Result: Fluid 32-48px top padding
 * 
 * Add vertical padding (top + bottom):
 * Add class: mg-padding-y-l
 * Result: Fluid 48-64px top and bottom padding
 * 
 * Add horizontal padding (left + right):
 * Add class: mg-padding-x-xl
 * Result: Fluid 64-80px left and right padding
 * 
 * Remove all gaps:
 * Add class: mg-no-gap
 * Result: 0px row and column gaps
 * 
 * Remove all padding:
 * Add class: mg-no-padding
 * Result: 0 padding on all sides
 * 
 * Compact top bar:
 * Add class: mg-top-bar
 * Result: Fluid 8-12px top/bottom, 16-32px left/right padding
 */

/* =========================
   MG LEADBUILDER 2025 - TYPOGRAPHY UTILITIES
   Generated from typography tokens CSV
   ========================= */

/* Note: @layer order declared in main design system file */

/* =========================
   ALIAS SYSTEM
   ========================= */

/*
This file uses stable aliases (--mg-font-*-family) instead of direct Elementor variables.
Aliases are defined in the main design system file (:root) and provide:
- Stable references that don't change when Elementor IDs change
- Built-in fallbacks (Georgia for headlines, Arial for body text)
- Single point of maintenance for Elementor variable mappings

Example:
.mg-font-h1 { font-family: var(--mg-font-h1-family); }
Points to: var(--e-global-typography-8888fbc-font-family, "Georgia"), serif
*/

/* =========================
   FONT WEIGHT UTILITIES
   ========================= */

@layer utilities {
  /* Font Weight - mg- prefix only */
  .mg-light { font-weight: 300; }
  .mg-normal { font-weight: 400; }
  .mg-medium { font-weight: 500; }
  .mg-semibold { font-weight: 600; }
  .mg-bold { font-weight: 700; }
  .mg-extrabold { font-weight: 800; }
}

/* =========================
   ELEMENTOR OVERRIDE UTILITIES
   Force bold typography classes to work in Elementor
   ========================= */

@layer overrides {
  /* Ultra-specific selectors to override Elementor inline styles */
  .elementor-widget-text-editor .mg-font-body-bold,
  .elementor-widget-text-editor .mg-font-body-xs-bold,
  .elementor-widget-text-editor .mg-font-body-large-bold,
  .elementor-widget-text-editor .mg-font-body-xl-bold,
  .elementor-widget-text-editor .mg-font-body-small-bold,
  .elementor-widget-heading .mg-font-h1,
  .elementor-widget-heading .mg-font-h2,
  .elementor-widget-heading .mg-font-h3,
  .elementor-widget-heading .mg-font-h4,
  .elementor-widget-heading .mg-font-h5,
  .elementor-widget-heading .mg-font-h6 {
    font-weight: 700 !important;
  }
  
  /* H5 and H6 use 600 weight */
  .elementor-widget-heading .mg-font-h5,
  .elementor-widget-heading .mg-font-h6 {
    font-weight: 600 !important;
  }
}


/* =========================
   SYSTEM TYPOGRAPHY (ELEMENTOR GLOBAL)
   ========================= */

@layer utilities {
/* Default Heading - Elementor system typography - Primary */
.mg-font-default-heading {
  font-family: var(--mg-font-default-heading-family);
  font-size: var(--e-global-typography-primary-font-size, clamp(1.5rem, 2vw, 2rem));
  font-weight: var(--e-global-typography-primary-font-weight, var(--mg-font-default-heading-weight, 700));
  line-height: var(--e-global-typography-primary-line-height, 1.4);
  letter-spacing: var(--e-global-typography-primary-letter-spacing, -0.01em);
}

/* Default Subtitle - Elementor system typography - Secondary */
.mg-font-default-subtitle {
  font-family: var(--mg-font-default-subtitle-family);
  font-size: var(--e-global-typography-secondary-font-size, clamp(1.25rem, 1.5vw, 1.75rem));
  font-weight: var(--e-global-typography-secondary-font-weight, var(--mg-font-default-subtitle-weight, 600));
  line-height: var(--e-global-typography-secondary-line-height, 1.4);
  letter-spacing: var(--e-global-typography-secondary-letter-spacing, -0.01em);
}

/* Default Body - Elementor system typography - Text */
.mg-font-default-body {
  font-family: var(--mg-font-default-body-family);
  font-size: var(--e-global-typography-text-font-size, clamp(1rem, 1vw, 1.125rem));
  font-weight: var(--e-global-typography-text-font-weight, var(--mg-font-default-body-weight, 400));
  line-height: var(--e-global-typography-text-line-height, 1.6);
  letter-spacing: var(--e-global-typography-text-letter-spacing, normal);
}

/* Default Accent - Elementor system typography - Accent */
.mg-font-default-accent {
  font-family: var(--mg-font-default-accent-family);
  font-size: var(--e-global-typography-accent-font-size, clamp(0.875rem, 1vw, 1rem));
  font-weight: var(--e-global-typography-accent-font-weight, 500);
  line-height: var(--e-global-typography-accent-line-height, 1.5);
  letter-spacing: var(--e-global-typography-accent-letter-spacing, 0.02em);
}

/* =========================
   HEADING UTILITIES
   ========================= */

/* H1 - Semantic H1 */
.mg-font-h1,
.elementor-widget-heading .mg-font-h1,
.elementor-element .mg-font-h1 {
  font-family: var(--mg-font-h1-family);
  font-size: var(--mg-font-h1-size);
  font-weight: var(--mg-font-h1-weight, 700) !important;
  line-height: var(--mg-font-h1-line);
  letter-spacing: var(--mg-font-h1-track);
}

/* H2 - Semantic H2 */
.mg-font-h2,
.elementor-widget-heading .mg-font-h2,
.elementor-element .mg-font-h2 {
  font-family: var(--mg-font-h2-family);
  font-size: var(--mg-font-h2-size);
  font-weight: var(--mg-font-h2-weight, 700) !important;
  line-height: var(--mg-font-h2-line);
  letter-spacing: var(--mg-font-h2-track);
}

/* H3 - Semantic H3 */
.mg-font-h3,
.elementor-widget-heading .mg-font-h3,
.elementor-element .mg-font-h3 {
  font-family: var(--mg-font-h3-family);
  font-size: var(--mg-font-h3-size);
  font-weight: var(--mg-font-h3-weight, 700) !important;
  line-height: var(--mg-font-h3-line);
  letter-spacing: var(--mg-font-h3-track);
}

/* H4 - Semantic H4 */
.mg-font-h4,
.elementor-widget-heading .mg-font-h4,
.elementor-element .mg-font-h4 {
  font-family: var(--mg-font-h4-family);
  font-size: var(--mg-font-h4-size);
  font-weight: var(--mg-font-h4-weight, 700) !important;
  line-height: var(--mg-font-h4-line);
  letter-spacing: var(--mg-font-h4-track);
}

/* H5 - Semantic H5 */
.mg-font-h5,
.elementor-widget-heading .mg-font-h5,
.elementor-element .mg-font-h5 {
  font-family: var(--mg-font-h5-family);
  font-size: var(--mg-font-h5-size);
  font-weight: var(--mg-font-h5-weight, 600) !important;
  line-height: var(--mg-font-h5-line);
  letter-spacing: var(--mg-font-h5-track);
}

/* H6 - Semantic H6 */
.mg-font-h6,
.elementor-widget-heading .mg-font-h6,
.elementor-element .mg-font-h6 {
  font-family: var(--mg-font-h6-family);
  font-size: var(--mg-font-h6-size);
  font-weight: var(--mg-font-h6-weight, 600) !important;
  line-height: var(--mg-font-h6-line);
  letter-spacing: var(--mg-font-h6-track);
}

/* Hero Headline - Large homepage hero title */
.mg-font-hero-headline {
  font-family: var(--mg-font-hero-headline-family);
  font-size: var(--mg-font-hero-headline-size, clamp(2.25rem, 5vw, 3rem));
  font-weight: var(--mg-font-hero-headline-weight, 700);
  line-height: var(--mg-font-hero-headline-line, 1.2);
  letter-spacing: var(--mg-font-hero-headline-track, -0.02em);
}

/* Page Hero Headline - H1 on internal pages */
.mg-font-page-hero-headline {
  font-family: var(--mg-font-page-hero-headline-family);
  font-size: var(--mg-font-page-hero-headline-size, clamp(2rem, 3vw, 2.5rem));
  font-weight: var(--mg-font-page-hero-headline-weight, 700);
  line-height: var(--mg-font-page-hero-headline-line, 1.3);
  letter-spacing: var(--mg-font-page-hero-headline-track, -0.01em);
}

/* Section Headline - Headings for reusable layout sections */
.mg-font-section-headline {
  font-family: var(--mg-font-section-headline-family);
  font-size: var(--mg-font-section-headline-size, clamp(1.5rem, 2vw, 2rem));
  font-weight: var(--mg-font-section-headline-weight, 700);
  line-height: var(--mg-font-section-headline-line, 1.4);
  letter-spacing: var(--mg-font-section-headline-track, -0.01em);
}

/* XL Heading - Largest display headline */
.mg-font-xl-heading {
  font-family: var(--mg-font-xl-heading-family);
  font-size: var(--mg-font-xl-heading-size, clamp(2.5rem, 6vw, 3.5rem));
  font-weight: var(--mg-font-xl-heading-weight, 700);
  line-height: var(--mg-font-xl-heading-line, 1.2);
  letter-spacing: var(--mg-font-xl-heading-track, -0.03em);
}

/* =========================
   SUBTITLE UTILITIES
   ========================= */

/* Widget Heading - Headings inside feature widgets */
.mg-font-widget-heading {
  font-family: var(--mg-font-widget-heading-family);
  font-size: var(--mg-font-widget-heading-size, clamp(1.25rem, 1.2vw, 1.5rem));
  font-weight: var(--mg-font-widget-heading-weight, 700);
  line-height: var(--mg-font-widget-heading-line, 1.4);
  letter-spacing: var(--mg-font-widget-heading-track, -0.01em);
}

/* Hero Subtitle - Supporting tagline below hero */
.mg-font-hero-subtitle {
  font-family: var(--mg-font-hero-subtitle-family);
  font-size: var(--mg-font-hero-subtitle-size, clamp(1.25rem, 2vw, 1.5rem));
  font-weight: var(--mg-font-hero-subtitle-weight, 400);
  line-height: var(--mg-font-hero-subtitle-line, 1.6);
  letter-spacing: var(--mg-font-hero-subtitle-track, normal);
}

/* Page Intro Text - Descriptive text below page title */
.mg-font-page-intro-text {
  font-family: var(--mg-font-page-intro-text-family);
  font-size: var(--mg-font-page-intro-text-size, clamp(1rem, 1.5vw, 1.25rem));
  font-weight: var(--mg-font-page-intro-text-weight, 400);
  line-height: var(--mg-font-page-intro-text-line, 1.6);
  letter-spacing: var(--mg-font-page-intro-text-track, normal);
}

/* =========================
   BODY TEXT UTILITIES
   ========================= */

/* Body Text - Default paragraph text */
.mg-font-body {
  font-family: var(--mg-font-body-family);
  font-size: var(--mg-font-body-size);
  font-weight: var(--mg-font-body-weight);
  line-height: var(--mg-font-body-line);
  letter-spacing: var(--mg-font-body-track);
}

/* Body Text Bold - Strong body emphasis */
.mg-font-body-bold,
.elementor-widget-text-editor .mg-font-body-bold,
.elementor-element .mg-font-body-bold,
.elementor-widget-heading .mg-font-body-bold,
.elementor-widget-text-editor p.mg-font-body-bold,
.elementor-widget-text-editor div.mg-font-body-bold,
.elementor-widget-text-editor span.mg-font-body-bold,
.elementor-element p.mg-font-body-bold,
.elementor-element div.mg-font-body-bold,
.elementor-element span.mg-font-body-bold,
.elementor-widget-heading p.mg-font-body-bold,
.elementor-widget-heading div.mg-font-body-bold,
.elementor-widget-heading span.mg-font-body-bold {
  font-family: var(--mg-font-body-bold-family, Arial), Helvetica, sans-serif;
  font-size: var(--mg-font-body-bold-size, clamp(1rem, 1vw, 1.125rem));
  font-weight: var(--mg-font-body-bold-weight, 700) !important;
  line-height: var(--mg-font-body-bold-line, 1.6);
  letter-spacing: var(--mg-font-body-bold-track, normal);
}

/* Body Text Underlined - Underlined body text */
.mg-font-body-underlined {
  font-family: var(--mg-font-body-underlined-family);
  font-size: var(--mg-font-body-underlined-size, clamp(1rem, 1vw, 1.125rem));
  font-weight: var(--mg-font-body-underlined-weight, 400);
  line-height: var(--mg-font-body-underlined-line, 1.6);
  letter-spacing: var(--mg-font-body-underlined-track, 0);
  text-decoration: underline;
}

/* Body XS - Extra small body text */
.mg-font-body-xs {
  font-family: var(--mg-font-body-xs-family);
  font-size: var(--mg-font-body-xs-size, clamp(0.75rem, 0.9vw, 0.875rem));
  font-weight: var(--mg-font-body-xs-weight, 400);
  line-height: var(--mg-font-body-xs-line, 1.6);
  letter-spacing: var(--mg-font-body-xs-track, 0);
}

/* Body XS Bold - Extra small bold body text */
.mg-font-body-xs-bold,
.elementor-widget-text-editor .mg-font-body-xs-bold,
.elementor-element .mg-font-body-xs-bold,
.elementor-widget-heading .mg-font-body-xs-bold {
  font-family: var(--mg-font-body-xs-bold-family);
  font-size: var(--mg-font-body-xs-bold-size, clamp(0.75rem, 0.9vw, 0.875rem));
  font-weight: var(--mg-font-body-xs-bold-weight, 700) !important;
  line-height: var(--mg-font-body-xs-bold-line, 1.6);
  letter-spacing: var(--mg-font-body-xs-bold-track, 0);
}

/* Body XS Underlined - Extra small underlined body text */
.mg-font-body-xs-underlined {
  font-family: var(--mg-font-body-xs-underlined-family);
  font-size: var(--mg-font-body-xs-underlined-size, clamp(0.75rem, 0.9vw, 0.875rem));
  font-weight: var(--mg-font-body-xs-underlined-weight, 400);
  line-height: var(--mg-font-body-xs-underlined-line, 1.6);
  letter-spacing: var(--mg-font-body-xs-underlined-track, 0);
  text-decoration: underline;
}

/* Body Small - For captions, disclaimers */
.mg-font-body-small {
  font-family: var(--mg-font-body-small-family);
  font-size: var(--mg-font-body-small-size);
  font-weight: var(--mg-font-body-small-weight);
  line-height: var(--mg-font-body-small-line);
  letter-spacing: var(--mg-font-body-small-track);
}

/* Body Large - Slightly enlarged body text */
.mg-font-body-large {
  font-family: var(--mg-font-body-large-family);
  font-size: var(--mg-font-body-large-size);
  font-weight: var(--mg-font-body-large-weight);
  line-height: var(--mg-font-body-large-line);
  letter-spacing: var(--mg-font-body-large-track);
}

/* Body Large Bold - Large bold paragraph */
.mg-font-body-large-bold,
.elementor-widget-text-editor .mg-font-body-large-bold,
.elementor-element .mg-font-body-large-bold,
.elementor-widget-heading .mg-font-body-large-bold {
  font-family: var(--mg-font-body-large-bold-family);
  font-size: var(--mg-font-body-large-bold-size);
  font-weight: var(--mg-font-body-large-bold-weight, 700) !important;
  line-height: var(--mg-font-body-large-bold-line);
  letter-spacing: var(--mg-font-body-large-bold-track);
}

/* Body Large Underlined - Large underlined body */
.mg-font-body-large-underlined {
  font-family: var(--mg-font-body-large-underlined-family);
  font-size: var(--mg-font-body-large-underlined-size);
  font-weight: var(--mg-font-body-large-underlined-weight);
  line-height: var(--mg-font-body-large-underlined-line);
  letter-spacing: var(--mg-font-body-large-underlined-track);
  text-decoration: underline;
}

/* Body XL - Extra large body text for emphasis */
.mg-font-body-xl {
  font-family: var(--mg-font-body-xl-family);
  font-size: var(--mg-font-body-xl-size);
  font-weight: var(--mg-font-body-xl-weight);
  line-height: var(--mg-font-body-xl-line);
  letter-spacing: var(--mg-font-body-xl-track);
}

/* Body XL Bold - Extra large bold body text */
.mg-font-body-xl-bold {
  font-family: var(--mg-font-body-xl-bold-family);
  font-size: var(--mg-font-body-xl-bold-size);
  font-weight: var(--mg-font-body-xl-bold-weight, 700) !important;
  line-height: var(--mg-font-body-xl-bold-line);
  letter-spacing: var(--mg-font-body-xl-bold-track);
}

/* Body XL Underlined - Extra large underlined body text */
.mg-font-body-xl-underlined {
  font-family: var(--mg-font-body-xl-underlined-family);
  font-size: var(--mg-font-body-xl-underlined-size);
  font-weight: var(--mg-font-body-xl-underlined-weight);
  line-height: var(--mg-font-body-xl-underlined-line);
  letter-spacing: var(--mg-font-body-xl-underlined-track);
  text-decoration: underline;
}

/* Body Small - For captions, disclaimers */
.mg-font-body-small {
  font-family: var(--mg-font-body-small-family);
  font-size: var(--mg-font-body-small-size);
  font-weight: var(--mg-font-body-small-weight);
  line-height: var(--mg-font-body-small-line);
  letter-spacing: var(--mg-font-body-small-track);
}

/* Body Small Bold - Strong emphasis for small text */
.mg-font-body-small-bold {
  font-family: var(--mg-font-body-small-bold-family);
  font-size: var(--mg-font-body-small-bold-size);
  font-weight: var(--mg-font-body-small-bold-weight, 700) !important;
  line-height: var(--mg-font-body-small-bold-line);
  letter-spacing: var(--mg-font-body-small-bold-track);
}

/* Body Small Underlined - Underlined fine print */
.mg-font-body-small-underlined {
  font-family: var(--mg-font-body-small-underlined-family);
  font-size: var(--mg-font-body-small-underlined-size);
  font-weight: var(--mg-font-body-small-underlined-weight);
  line-height: var(--mg-font-body-small-underlined-line);
  letter-spacing: var(--mg-font-body-small-underlined-track);
  text-decoration: underline;
}

/* Body Text XL - Enlarged general content */
.mg-font-xl-body {
  font-family: var(--mg-font-xl-body-family);
  font-size: var(--mg-font-xl-body-size);
  font-weight: var(--mg-font-xl-body-weight);
  line-height: var(--mg-font-xl-body-line);
  letter-spacing: var(--mg-font-xl-body-track);
}

/* =========================
   ACCENT UTILITIES
   ========================= */

/* Uppercase Text - All caps text */
.mg-font-uppercase {
  font-family: var(--mg-font-uppercase-family);
  font-size: var(--mg-font-uppercase-size, clamp(1rem, 1vw, 1.125rem));
  font-weight: var(--mg-font-uppercase-weight, 500);
  line-height: var(--mg-font-uppercase-line, 1.4);
  letter-spacing: var(--mg-font-uppercase-track, 0.05em);
}

/* Navigation Text - Nav and menu links */
.mg-font-navigation {
  font-family: var(--mg-font-navigation-family);
  font-size: var(--mg-font-navigation-size, clamp(0.875rem, 1vw, 1rem));
  font-weight: var(--mg-font-navigation-weight, 500);
  line-height: var(--mg-font-navigation-line, 1.5);
  letter-spacing: var(--mg-font-navigation-track, 0.02em);
}

/* Button Text - Primary button font */
.mg-font-button {
  font-family: var(--mg-font-button-family);
  font-size: var(--mg-font-button-size, clamp(0.875rem, 1vw, 1rem));
  font-weight: var(--mg-font-button-weight, 700);
  line-height: var(--mg-font-button-line, 1.5);
  letter-spacing: var(--mg-font-button-track, 0.02em);
}

/* Button Text Large - Bigger button font */
.mg-font-button-large {
  font-family: var(--mg-font-button-large-family);
  font-size: var(--mg-font-button-large-size, clamp(1rem, 1vw, 1.125rem));
  font-weight: var(--mg-font-button-large-weight, 700);
  line-height: var(--mg-font-button-large-line, 1.5);
  letter-spacing: var(--mg-font-button-large-track, 0.02em);
}

  /* =========================
     NICE-TO-HAVE UTILITIES
     ========================= */
  
  /* Line-wrap helpers (progressive enhancement) */
  @supports (text-wrap: balance) {
    :where(.text-balance){ text-wrap: balance; }
  }
  @supports (text-wrap: pretty) {
    :where(.text-pretty){ text-wrap: pretty; }
  }

  /* Numeric formatting utilities */
  :where(.num-tabular){      font-variant-numeric: tabular-nums; }
  :where(.num-lining){       font-variant-numeric: lining-nums; }
  :where(.num-oldstyle){     font-variant-numeric: oldstyle-nums; }
  :where(.num-proportional){ font-variant-numeric: proportional-nums; }

  /* Monospace utility (paired with a token) */
  :where(.mg-font-mono){ font-family: var(--mg-font-mono-family, ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace); }

}

/* =========================
   BASE SEMANTICS (Low specificity safety net)
   ========================= */

@layer base {
/* Lightweight semantic defaults - easy to override */
:where(h1) { 
  font-family: var(--mg-font-h1-family); 
  font-size: var(--mg-font-h1-size, clamp(1.75rem, 2.5vw, 2.25rem)); 
  font-weight: var(--mg-font-h1-weight, 700); 
  line-height: var(--mg-font-h1-line, 1.3); 
  letter-spacing: var(--mg-font-h1-track, -0.01em); 
}

:where(h2) { 
  font-family: var(--mg-font-h2-family); 
  font-size: var(--mg-font-h2-size, clamp(1.5rem, 2vw, 2rem)); 
  font-weight: var(--mg-font-h2-weight, 700); 
  line-height: var(--mg-font-h2-line, 1.4); 
  letter-spacing: var(--mg-font-h2-track, -0.01em); 
}

:where(h3) { 
  font-family: var(--mg-font-h3-family); 
  font-size: var(--mg-font-h3-size, clamp(1.25rem, 1.5vw, 1.75rem)); 
  font-weight: var(--mg-font-h3-weight, 700); 
  line-height: var(--mg-font-h3-line, 1.4); 
  letter-spacing: var(--mg-font-h3-track, -0.01em); 
}

:where(h4) { 
  font-family: var(--mg-font-h4-family); 
  font-size: var(--mg-font-h4-size, clamp(1.125rem, 1.2vw, 1.5rem)); 
  font-weight: var(--mg-font-h4-weight, 700); 
  line-height: var(--mg-font-h4-line, 1.5); 
  letter-spacing: var(--mg-font-h4-track, -0.01em); 
}

:where(h5) { 
  font-family: var(--mg-font-h5-family); 
  font-size: var(--mg-font-h5-size, clamp(1.125rem, 1vw, 1.375rem)); 
  font-weight: var(--mg-font-h5-weight, 700); 
  line-height: var(--mg-font-h5-line, 1.5); 
  letter-spacing: var(--mg-font-h5-track, -0.01em); 
}

:where(h6) { 
  font-family: var(--mg-font-h6-family); 
  font-size: var(--mg-font-h6-size, clamp(1rem, 1vw, 1.125rem)); 
  font-weight: var(--mg-font-h6-weight, 700); 
  line-height: var(--mg-font-h6-line, 1.5); 
  letter-spacing: var(--mg-font-h6-track, -0.01em); 
}
}

/* =========================
   ELEMENTOR USAGE PATTERN
   ========================= */

/*
ELEMENTOR INTEGRATION GUIDE:

1. In Elementor Site Settings → Typography, set widgets to "Default" where possible
2. On a widget, clear Typography controls (no inline styles)
3. Add mg-font-* classes in the widget's CSS Classes field
4. If a widget still outputs inline styles, remove them or use mg-font-inherit as escape hatch

EXAMPLE:
<div class="elementor-widget mg-font-h2 mg-font-body">
  <h2>This will use mg-font-h2</h2>
  <p>This will use mg-font-body</p>
</div>

TROUBLESHOOTING:
- If styles aren't applying, check for inline styles in Elementor
- Use mg-font-inherit to escape unwanted typography
- Base semantic styles (h1-h6) provide fallbacks but mg-font-* classes take precedence
*/

/* End typography utilities *//* =========================
   MG LEADBUILDER 2025 – FLUID SPACING SYSTEM
   New fluid gap and section padding system
   ========================= */

:root {
    /* Top and Bottom Padding All Containers - Percentage-based for container-relative */
    --section-xxl-padding-min: 8%; /* ~150px @ 1920px */
    --section-xxl-padding-max: 10%; /* ~192px @ 1920px */ 
  
    --section-xl-padding-min: 6%; /* ~115px @ 1920px */
    --section-xl-padding-max: 7.5%; /* ~144px @ 1920px */
  
    --section-l-padding-min: 5%; /* ~96px @ 1920px */
    --section-l-padding-max: 6%; /* ~115px @ 1920px */
  
    --section-m-padding-min: 4%; /* ~77px @ 1920px */
    --section-m-padding-max: 5%; /* ~96px @ 1920px */
  
    --section-s-padding-min: 3%; /* ~58px @ 1920px */
    --section-s-padding-max: 3.5%; /* ~67px @ 1920px */
  
    --section-xs-padding-min: 2%; /* ~38px @ 1920px */
    --section-xs-padding-max: 2.5%; /* ~48px @ 1920px */
  
    --section-xxs-padding-min: 1.5%; /* ~29px @ 1920px */
    --section-xxs-padding-max: 2%; /* ~38px @ 1920px */

    /* Hero Sections Height Variable */
    --section-hero-height: 100vh; /* 100% the screen height */
  
    /* Offset Padding for Overlay Headers */
    --section-offset-header: 80px; /* Adjust to the overlay header's negative margin */

    /* Width For Narrow Sections*/
    --section-narrow: 62.5rem; /* 1000px */
    --section-narrow-xs: 45rem; /* 720px */
}

/* ---- Section/Container Padding - Fluid Variants ---- */
/* Designer Controls spacing presets - NO !important to allow Elementor inline styles to override */
/* Section padding applies to TOP and BOTTOM only - side padding handled by container/Elementor controls */
/* CRITICAL: Only apply to OUTER containers - NOT .e-child (inner/nested containers) */
body.mg-design-system .mg-section-xxl:not(.e-child) {
    --container-default-padding-top: clamp(8%, 1.087vw + 9.13rem, 10%);
    --container-default-padding-bottom: clamp(8%, 1.087vw + 9.13rem, 10%);
    --e-con-padding-top: clamp(8%, 1.087vw + 9.13rem, 10%);
    --e-con-padding-bottom: clamp(8%, 1.087vw + 9.13rem, 10%);
    padding-top: clamp(8%, 1.087vw + 9.13rem, 10%);
    padding-bottom: clamp(8%, 1.087vw + 9.13rem, 10%);
}

body.mg-design-system .mg-section-xl:not(.e-child) {
    --container-default-padding-top: clamp(6%, 1.087vw + 6.63rem, 7.5%);
    --container-default-padding-bottom: clamp(6%, 1.087vw + 6.63rem, 7.5%);
    --e-con-padding-top: clamp(6%, 1.087vw + 6.63rem, 7.5%);
    --e-con-padding-bottom: clamp(6%, 1.087vw + 6.63rem, 7.5%);
    padding-top: clamp(6%, 1.087vw + 6.63rem, 7.5%);
    padding-bottom: clamp(6%, 1.087vw + 6.63rem, 7.5%);
}

body.mg-design-system .mg-section-l:not(.e-child) {
    --container-default-padding-top: clamp(5%, 1.087vw + 5.38rem, 6%);
    --container-default-padding-bottom: clamp(5%, 1.087vw + 5.38rem, 6%);
    --e-con-padding-top: clamp(5%, 1.087vw + 5.38rem, 6%);
    --e-con-padding-bottom: clamp(5%, 1.087vw + 5.38rem, 6%);
    padding-top: clamp(5%, 1.087vw + 5.38rem, 6%);
    padding-bottom: clamp(5%, 1.087vw + 5.38rem, 6%);
}

body.mg-design-system .mg-section-m:not(.e-child) {
    --container-default-padding-top: clamp(3rem, 4vw, 5rem);
    --container-default-padding-bottom: clamp(3rem, 4vw, 5rem);
    --e-con-padding-top: clamp(3rem, 4vw, 5rem);
    --e-con-padding-bottom: clamp(3rem, 4vw, 5rem);
    padding-top: clamp(3rem, 4vw, 5rem);
    padding-bottom: clamp(3rem, 4vw, 5rem);
}

body.mg-design-system .mg-section-s:not(.e-child) {
    --container-default-padding-top: clamp(2.5rem, 3vw, 3.75rem);
    --container-default-padding-bottom: clamp(2.5rem, 3vw, 3.75rem);
    --e-con-padding-top: clamp(2.5rem, 3vw, 3.75rem);
    --e-con-padding-bottom: clamp(2.5rem, 3vw, 3.75rem);
    padding-top: clamp(2.5rem, 3vw, 3.75rem);
    padding-bottom: clamp(2.5rem, 3vw, 3.75rem);
}

body.mg-design-system .mg-section-xs:not(.e-child) {
    --container-default-padding-top: clamp(1.5rem, 2vw, 2.5rem);
    --container-default-padding-bottom: clamp(1.5rem, 2vw, 2.5rem);
    --e-con-padding-top: clamp(1.5rem, 2vw, 2.5rem);
    --e-con-padding-bottom: clamp(1.5rem, 2vw, 2.5rem);
    padding-top: clamp(1.5rem, 2vw, 2.5rem);
    padding-bottom: clamp(1.5rem, 2vw, 2.5rem);
}

body.mg-design-system :where(.mg-section-xxs:not(.e-child), .mg-section-xxs.e-con:not(.e-child), .mg-section-xxs.e-parent:not(.e-child)) {
    --container-default-padding-top: clamp(0.5rem, 1vw, 1rem);
    --container-default-padding-bottom: clamp(0.5rem, 1vw, 1rem);
    --e-con-padding-top: clamp(0.5rem, 1vw, 1rem);
    --e-con-padding-bottom: clamp(0.5rem, 1vw, 1rem);
    padding-top: clamp(0.5rem, 1vw, 1rem);
    padding-bottom: clamp(0.5rem, 1vw, 1rem);
}

/* Full Viewport Height Sections */
.mg-section-100vh {
    min-height: var(--section-hero-height) !important;
}

.mg-section-100vh .e-con-inner {
    justify-content: center !important;
}

/* ---- HEADER UTILITIES ---- */

/* Standard Header: XXS padding with no bottom padding (for nav at bottom edge) */
/* CRITICAL: Only apply to OUTER containers - NOT .e-child (inner/nested containers) */
body.mg-design-system :where(.mg-header-std:not(.e-child), .mg-header-std.e-con:not(.e-child), .mg-header-std.e-parent:not(.e-child)) {
    --container-default-padding-top: clamp(0.5rem, 1vw, 1rem);
    --container-default-padding-bottom: 0;
    --e-con-padding-top: clamp(0.5rem, 1vw, 1rem);
    --e-con-padding-bottom: 0;
    padding-top: clamp(0.5rem, 1vw, 1rem);
    padding-bottom: 0;
    /* Side padding handled by Designer Controls (--mg-container-padding-horizontal) */
}

/* Apply XXS gap to standard header */
body.mg-design-system .mg-header-std,
body.mg-design-system .mg-header-std .e-con-inner {
    --row-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
    --column-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
    --widgets-spacing-row: clamp(0.25rem, 0.5vw, 0.5rem) !important;
    --widgets-spacing-column: clamp(0.25rem, 0.5vw, 0.5rem) !important;
    row-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
    column-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
}

/* Asymmetric Edge-to-Edge Layouts */

/* ---- EDGE LEFT (flush left) ---- */

/* Content bleeds to left edge (50/50 default), right side aligns with boxed layouts */
body.mg-design-system :where(.mg-edge-left, .mg-edge-left.e-con, .mg-edge-left.e-parent) {
    /* No vertical padding - edge-to-edge vertically too */
    --container-default-padding-top: 0px !important;
    --container-default-padding-bottom: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    
    /* Left side: 0 padding, right side: align with boxed content */
    --container-default-padding-left: 0px !important;
    /* Calculate right padding: (50vw - content-width/2) + base padding */
    /* This makes the right column align with boxed content */
    --container-default-padding-right: calc((50vw - var(--mg-content-max-width) / 2) + var(--mg-container-padding-horizontal)) !important;
    padding-left: 0 !important;
    padding-right: calc((50vw - var(--mg-content-max-width) / 2) + var(--mg-container-padding-horizontal)) !important;
    
    /* No gap - content containers handle their own spacing */
    --column-gap: 0 !important;
    column-gap: 0 !important;
}

/* Left column in mg-edge-left should be 50vw (50/50) */
body.mg-design-system .mg-edge-left > .e-child:first-child,
body.mg-design-system .mg-edge-left > .elementor-element:first-child {
    width: 50vw !important;
    max-width: 50vw !important;
    flex: 0 0 50vw !important;
}

/* 60/40 variant - left column 60vw (edge), right 40vw (content aligns with boxed) */
body.mg-design-system :where(.mg-edge-left-60, .mg-edge-left-60.e-con, .mg-edge-left-60.e-parent) {
    --container-default-padding-top: 0px !important;
    --container-default-padding-bottom: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    
    /* No padding on parent - children handle their own padding */
    --container-default-padding-left: 0px !important;
    --container-default-padding-right: 0px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    
    /* No gap - content containers handle their own spacing */
    --column-gap: 0 !important;
    column-gap: 0 !important;
    
    /* Built-in equal height behavior */
    display: flex !important;
    align-items: stretch !important;
}

/* Left column: 60vw edge-to-edge (typically image/media) */
body.mg-design-system .mg-edge-left-60 > .e-child:first-child,
body.mg-design-system .mg-edge-left-60 > .elementor-element:first-child {
    width: 60vw !important;
    max-width: 60vw !important;
    flex: 0 0 60vw !important;
    padding: 0 !important; /* No padding - true edge-to-edge */
    display: flex !important;
    flex-direction: column !important;
}

/* Right column (40%): Content aligns with boxed layout right edge */
body.mg-design-system .mg-edge-left-60 > .e-child:nth-child(2),
body.mg-design-system .mg-edge-left-60 > .elementor-element:nth-child(2) {
    /* Calculate padding to align right edge with boxed content */
    /* Right padding = space from viewport edge to content edge */
    --mg-40-right-padding: calc((100vw - var(--mg-content-max-width)) / 2);
    
    /* Left padding: keep content away from the gap */
    padding-left: clamp(1.5rem, 3vw, 3rem) !important;
    /* Right padding: align with boxed content boundary */
    padding-right: max(var(--mg-40-right-padding), var(--mg-container-padding-horizontal)) !important;
    
    /* Built-in equal height behavior */
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

/* ---- EDGE RIGHT (flush right) ---- */

/* Content bleeds to right edge (50/50 default), left side aligns with boxed layouts */
body.mg-design-system :where(.mg-edge-right, .mg-edge-right.e-con, .mg-edge-right.e-parent) {
    /* No vertical padding - edge-to-edge vertically too */
    --container-default-padding-top: 0px !important;
    --container-default-padding-bottom: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    
    /* Right side: 0 padding, left side: align with boxed content */
    /* Calculate left padding: (50vw - content-width/2) + base padding */
    --container-default-padding-left: calc((50vw - var(--mg-content-max-width) / 2) + var(--mg-container-padding-horizontal)) !important;
    --container-default-padding-right: 0px !important;
    padding-left: calc((50vw - var(--mg-content-max-width) / 2) + var(--mg-container-padding-horizontal)) !important;
    padding-right: 0 !important;
    
    /* No gap - content containers handle their own spacing */
    --column-gap: 0 !important;
    column-gap: 0 !important;
}

/* Right column in mg-edge-right should be 50vw (50/50) */
body.mg-design-system .mg-edge-right > .e-child:last-child,
body.mg-design-system .mg-edge-right > .elementor-element:last-child {
    width: 50vw !important;
    max-width: 50vw !important;
    flex: 0 0 50vw !important;
}

/* 40/60 variant - left 40vw (content aligns with boxed), right column 60vw (edge) */
body.mg-design-system :where(.mg-edge-right-60, .mg-edge-right-60.e-con, .mg-edge-right-60.e-parent) {
    --container-default-padding-top: 0px !important;
    --container-default-padding-bottom: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    
    /* No padding on parent - children handle their own padding */
    --container-default-padding-left: 0px !important;
    --container-default-padding-right: 0px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    
    /* No gap - content containers handle their own spacing */
    --column-gap: 0 !important;
    column-gap: 0 !important;
    
    /* Built-in equal height behavior */
    display: flex !important;
    align-items: stretch !important;
}

/* Right column: 60vw edge-to-edge (typically image/media) */
body.mg-design-system .mg-edge-right-60 > .e-child:last-child,
body.mg-design-system .mg-edge-right-60 > .elementor-element:last-child {
    width: 60vw !important;
    max-width: 60vw !important;
    flex: 0 0 60vw !important;
    padding: 0 !important; /* No padding - true edge-to-edge */
    display: flex !important;
    flex-direction: column !important;
}

/* Left column (40%): Content aligns with boxed layout left edge */
body.mg-design-system .mg-edge-right-60 > .e-child:first-child,
body.mg-design-system .mg-edge-right-60 > .elementor-element:first-child,
body.mg-design-system .mg-edge-right-60.e-con > .e-con:first-child,
body.mg-design-system .mg-edge-right-60.e-parent > .e-con:first-child,
body.mg-design-system [data-element_type="container"].mg-edge-right-60 > [data-element_type="container"]:first-child {
    /* Calculate padding to align left edge with boxed content */
    /* Left padding = space from viewport edge to content edge */
    --mg-40-left-padding: calc((100vw - var(--mg-content-max-width, 1400px)) / 2);
    
    /* Left padding: align with boxed content boundary - FORCE with min fallback */
    padding-left: max(var(--mg-40-left-padding), clamp(1rem, 2vw, 1.5rem)) !important;
    /* Right padding: keep content away from the gap */
    padding-right: clamp(1.5rem, 3vw, 3rem) !important;
    
    /* Override any padding utility classes that might be applied */
    padding-inline-start: max(var(--mg-40-left-padding), clamp(1rem, 2vw, 1.5rem)) !important;
    padding-inline-end: clamp(1.5rem, 3vw, 3rem) !important;
    
    /* Built-in equal height behavior */
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

/* ---- RESPONSIVE: Stack on Tablet ---- */
@media (max-width: 1024px) {
    
    /* Stack all edge variants */
    body.mg-design-system :where(
        .mg-edge-left, .mg-edge-left.e-con, .mg-edge-left.e-parent,
        .mg-edge-left-60, .mg-edge-left-60.e-con, .mg-edge-left-60.e-parent,
        .mg-edge-right, .mg-edge-right.e-con, .mg-edge-right.e-parent,
        .mg-edge-right-60, .mg-edge-right-60.e-con, .mg-edge-right-60.e-parent
    ) {
        flex-direction: column !important;
        --container-default-padding-left: 0px !important;
        --container-default-padding-right: 0px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        --column-gap: 0 !important;
        column-gap: 0 !important;
        --row-gap: 0 !important;
        row-gap: 0 !important;
        /* Remove min-height so content determines height */
        min-height: auto !important;
    }
    
    /* All columns go full width by default */
    body.mg-design-system .mg-edge-left > .e-child,
    body.mg-design-system .mg-edge-left > .elementor-element,
    body.mg-design-system .mg-edge-left-60 > .e-child,
    body.mg-design-system .mg-edge-left-60 > .elementor-element,
    body.mg-design-system .mg-edge-right > .e-child,
    body.mg-design-system .mg-edge-right > .elementor-element,
    body.mg-design-system .mg-edge-right-60 > .e-child,
    body.mg-design-system .mg-edge-right-60 > .elementor-element {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    /* EDGE-LEFT variants: First child (flush left) stays edge-to-edge */
    body.mg-design-system .mg-edge-left > .e-child:first-child,
    body.mg-design-system .mg-edge-left > .elementor-element:first-child,
    body.mg-design-system .mg-edge-left-60 > .e-child:first-child,
    body.mg-design-system .mg-edge-left-60 > .elementor-element:first-child {
        width: 100vw !important;
        max-width: 100vw !important;
        flex: 0 0 100vw !important;
        padding: 0 !important; /* No padding on edge column */
    }
    
    /* EDGE-LEFT variants: Second child (content) gets normal padding */
    body.mg-design-system .mg-edge-left > .e-child:nth-child(2),
    body.mg-design-system .mg-edge-left > .elementor-element:nth-child(2),
    body.mg-design-system .mg-edge-left-60 > .e-child:nth-child(2),
    body.mg-design-system .mg-edge-left-60 > .elementor-element:nth-child(2) {
        padding-left: var(--mg-container-padding-horizontal) !important;
        padding-right: var(--mg-container-padding-horizontal) !important;
    }
    
    /* EDGE-RIGHT variants: Last child (flush right) stays edge-to-edge */
    body.mg-design-system .mg-edge-right > .e-child:last-child,
    body.mg-design-system .mg-edge-right > .elementor-element:last-child,
    body.mg-design-system .mg-edge-right-60 > .e-child:last-child,
    body.mg-design-system .mg-edge-right-60 > .elementor-element:last-child {
        width: 100vw !important;
        max-width: 100vw !important;
        flex: 0 0 100vw !important;
        padding: 0 !important; /* No padding on edge column */
    }
    
    /* EDGE-RIGHT variants: First child (content) gets normal padding */
    body.mg-design-system .mg-edge-right > .e-child:first-child,
    body.mg-design-system .mg-edge-right > .elementor-element:first-child,
    body.mg-design-system .mg-edge-right-60 > .e-child:first-child,
    body.mg-design-system .mg-edge-right-60 > .elementor-element:first-child {
        padding-left: var(--mg-container-padding-horizontal) !important;
        padding-right: var(--mg-container-padding-horizontal) !important;
    }
    
    /* For edge-right variants, reverse order so right column (edge) appears on top */
    body.mg-design-system :where(
        .mg-edge-right, .mg-edge-right.e-con, .mg-edge-right.e-parent,
        .mg-edge-right-60, .mg-edge-right-60.e-con, .mg-edge-right-60.e-parent
    ) {
        flex-direction: column-reverse !important;
    }
}

/* Full Width Sections - No Side Padding */
.mg-section-full div {
    max-width: 100% !important;
}

/* Narrow Sections */
.mg-section-narrow .e-con-inner {
    max-width: var(--section-narrow) !important;
}

.mg-section-narrow-xs .e-con-inner {
    max-width: var(--section-narrow-xs) !important;
}

/* Offset Padding for Overlay Headers */
.mg-section-offset {
    padding-top: calc(var(--section-offset-header) + var(--section-xxl-padding-min));
}


/* =========================
   EQUAL HEIGHT UTILITY
   Forces all child columns to match the tallest column's height
   Perfect for image + content layouts where image should match content height
   ========================= */

body.mg-design-system .mg-equal-height {
    /* Use flexbox for natural height behavior */
    display: flex !important;
    align-items: stretch !important; /* Stretch children to match tallest */
}

/* Ensure all direct children participate in equal height */
body.mg-design-system .mg-equal-height > .e-child,
body.mg-design-system .mg-equal-height > .elementor-element {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important; /* Equal width, natural height */
}

/* Simple: Just make images fill their container width */
body.mg-design-system .mg-equal-height img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* That's it! Let flexbox handle the rest naturally */

/* Responsive: Stack on mobile but maintain equal height within each column */
@media (max-width: 1024px) {
    body.mg-design-system .mg-equal-height {
        flex-direction: column !important; /* Stack columns on mobile */
        display: flex !important;
    }
    
    /* Each column still maintains equal height of its own content */
    body.mg-design-system .mg-equal-height > .e-child,
    body.mg-design-system .mg-equal-height > .elementor-element {
        height: auto !important; /* Let content determine height on mobile */
        flex: none !important;
    }
}

/* End fluid spacing system *//* =========================
   COLOR CSS VARIABLES
   Auto-generated from ColorSync module
   Last updated: 2026-02-10 15:38:31
   ========================= */

:root {

  /* =========================
     BASE BRAND COLORS
     ========================= */

  --mg-color-primary: var(--e-global-color-primary, var(--mg-color-primary-fallback));
  --mg-color-secondary: var(--e-global-color-secondary, var(--mg-color-secondary-fallback));
  --mg-color-accent: var(--e-global-color-accent, var(--mg-color-accent-fallback));
  --mg-color-text: var(--e-global-color-text, var(--mg-color-text-fallback));

  /* neutral variants */
  --mg-color-neutral-white: #ffffff;
  --mg-color-neutral-50: #e8e8e8;
  --mg-color-neutral-100: #d1d1d1;
  --mg-color-neutral-200: #bababa;
  --mg-color-neutral-300: #a3a3a3;
  --mg-color-neutral-400: #8c8c8c;
  --mg-color-neutral-500: #737373;
  --mg-color-neutral-600: #5c5c5c;
  --mg-color-neutral-700: #454545;
  --mg-color-neutral-800: #2e2e2e;
  --mg-color-neutral-900: #171717;
  --mg-color-neutral-black: #000000;

  /* primary variants */
  --mg-color-primary-lightest: #c9e4ff;
  --mg-color-primary-lighter: #72b8fe;
  --mg-color-primary-light: #1b8dfe;
  --mg-color-primary-dark: #014b96;
  --mg-color-primary-darker: #01366c;
  --mg-color-primary-darkest: #002141;
  --mg-on-primary: #ffffff;

  /* secondary variants */
  --mg-color-secondary-lightest: #feced0;
  --mg-color-secondary-lighter: #fd878b;
  --mg-color-secondary-light: #fc4147;
  --mg-color-secondary-dark: #b80309;
  --mg-color-secondary-darker: #7f0206;
  --mg-color-secondary-darkest: #450103;
  --mg-on-secondary: #ffffff;

  /* accent variants */
  --mg-color-accent-lightest: #fff9cf;
  --mg-color-accent-lighter: #ffef8a;
  --mg-color-accent-light: #ffe645;
  --mg-color-accent-dark: #c2a800;
  --mg-color-accent-darker: #857300;
  --mg-color-accent-darkest: #473e00;
  --mg-on-accent: #000000;

  /* text variants */
  --mg-on-text: #ffffff;

  /* =========================
     NEUTRAL COLORS
     ========================= */

  --mg-neutral-white: #ffffff;
  --mg-color-neutral-white: #ffffff;
  --mg-neutral-50: #e8e8e8;
  --mg-color-neutral-50: #e8e8e8;
  --mg-neutral-100: #d1d1d1;
  --mg-color-neutral-100: #d1d1d1;
  --mg-neutral-200: #bababa;
  --mg-color-neutral-200: #bababa;
  --mg-neutral-300: #a3a3a3;
  --mg-color-neutral-300: #a3a3a3;
  --mg-neutral-400: #8c8c8c;
  --mg-color-neutral-400: #8c8c8c;
  --mg-neutral-500: #737373;
  --mg-color-neutral-500: #737373;
  --mg-neutral-600: #5c5c5c;
  --mg-color-neutral-600: #5c5c5c;
  --mg-neutral-700: #454545;
  --mg-color-neutral-700: #454545;
  --mg-neutral-800: #2e2e2e;
  --mg-color-neutral-800: #2e2e2e;
  --mg-neutral-900: #171717;
  --mg-color-neutral-900: #171717;
  --mg-neutral-black: #000000;
  --mg-color-neutral-black: #000000;

  /* Text color */
  --mg-color-text: #1f2937;
  --mg-color-border: var(--mg-neutral-300);

}

/* =========================
   COLOR UTILITY CLASSES
   Auto-generated from ColorSync module
   Brand: mg
   ========================= */

/* primary utilities */
body.mg-design-system :where(.mg-text-primary){ color: var(--mg-color-primary); }
body.mg-design-system :where(.mg-bg-primary){ background-color: var(--mg-color-primary); }

/* primary variants */
body.mg-design-system :where(.mg-text-primary-lightest){ color: var(--mg-color-primary-lightest); }
body.mg-design-system :where(.mg-bg-primary-lightest){ background-color: var(--mg-color-primary-lightest); }
body.mg-design-system :where(.mg-text-primary-lighter){ color: var(--mg-color-primary-lighter); }
body.mg-design-system :where(.mg-bg-primary-lighter){ background-color: var(--mg-color-primary-lighter); }
body.mg-design-system :where(.mg-text-primary-light){ color: var(--mg-color-primary-light); }
body.mg-design-system :where(.mg-bg-primary-light){ background-color: var(--mg-color-primary-light); }
body.mg-design-system :where(.mg-text-primary-dark){ color: var(--mg-color-primary-dark); }
body.mg-design-system :where(.mg-bg-primary-dark){ background-color: var(--mg-color-primary-dark); }
body.mg-design-system :where(.mg-text-primary-darker){ color: var(--mg-color-primary-darker); }
body.mg-design-system :where(.mg-bg-primary-darker){ background-color: var(--mg-color-primary-darker); }
body.mg-design-system :where(.mg-text-primary-darkest){ color: var(--mg-color-primary-darkest); }
body.mg-design-system :where(.mg-bg-primary-darkest){ background-color: var(--mg-color-primary-darkest); }

/* secondary utilities */
body.mg-design-system :where(.mg-text-secondary){ color: var(--mg-color-secondary); }
body.mg-design-system :where(.mg-bg-secondary){ background-color: var(--mg-color-secondary); }

/* secondary variants */
body.mg-design-system :where(.mg-text-secondary-lightest){ color: var(--mg-color-secondary-lightest); }
body.mg-design-system :where(.mg-bg-secondary-lightest){ background-color: var(--mg-color-secondary-lightest); }
body.mg-design-system :where(.mg-text-secondary-lighter){ color: var(--mg-color-secondary-lighter); }
body.mg-design-system :where(.mg-bg-secondary-lighter){ background-color: var(--mg-color-secondary-lighter); }
body.mg-design-system :where(.mg-text-secondary-light){ color: var(--mg-color-secondary-light); }
body.mg-design-system :where(.mg-bg-secondary-light){ background-color: var(--mg-color-secondary-light); }
body.mg-design-system :where(.mg-text-secondary-dark){ color: var(--mg-color-secondary-dark); }
body.mg-design-system :where(.mg-bg-secondary-dark){ background-color: var(--mg-color-secondary-dark); }
body.mg-design-system :where(.mg-text-secondary-darker){ color: var(--mg-color-secondary-darker); }
body.mg-design-system :where(.mg-bg-secondary-darker){ background-color: var(--mg-color-secondary-darker); }
body.mg-design-system :where(.mg-text-secondary-darkest){ color: var(--mg-color-secondary-darkest); }
body.mg-design-system :where(.mg-bg-secondary-darkest){ background-color: var(--mg-color-secondary-darkest); }

/* accent utilities */
body.mg-design-system :where(.mg-text-accent){ color: var(--mg-color-accent); }
body.mg-design-system :where(.mg-bg-accent){ background-color: var(--mg-color-accent); }

/* accent variants */
body.mg-design-system :where(.mg-text-accent-lightest){ color: var(--mg-color-accent-lightest); }
body.mg-design-system :where(.mg-bg-accent-lightest){ background-color: var(--mg-color-accent-lightest); }
body.mg-design-system :where(.mg-text-accent-lighter){ color: var(--mg-color-accent-lighter); }
body.mg-design-system :where(.mg-bg-accent-lighter){ background-color: var(--mg-color-accent-lighter); }
body.mg-design-system :where(.mg-text-accent-light){ color: var(--mg-color-accent-light); }
body.mg-design-system :where(.mg-bg-accent-light){ background-color: var(--mg-color-accent-light); }
body.mg-design-system :where(.mg-text-accent-dark){ color: var(--mg-color-accent-dark); }
body.mg-design-system :where(.mg-bg-accent-dark){ background-color: var(--mg-color-accent-dark); }
body.mg-design-system :where(.mg-text-accent-darker){ color: var(--mg-color-accent-darker); }
body.mg-design-system :where(.mg-bg-accent-darker){ background-color: var(--mg-color-accent-darker); }
body.mg-design-system :where(.mg-text-accent-darkest){ color: var(--mg-color-accent-darkest); }
body.mg-design-system :where(.mg-bg-accent-darkest){ background-color: var(--mg-color-accent-darkest); }

/* Text color utilities */
body.mg-design-system :where(.mg-text-default){ color: var(--mg-color-text); }

/* Neutral color utilities */
body.mg-design-system :where(.mg-text-white){ color: var(--mg-neutral-white); }
body.mg-design-system :where(.mg-bg-white){ background-color: var(--mg-neutral-white); }
body.mg-design-system :where(.mg-text-black){ color: var(--mg-neutral-black); }
body.mg-design-system :where(.mg-bg-black){ background-color: var(--mg-neutral-black); }

body.mg-design-system :where(.mg-text-neutral-50){ color: var(--mg-neutral-50); }
body.mg-design-system :where(.mg-bg-neutral-50){ background-color: var(--mg-neutral-50); }
body.mg-design-system :where(.mg-text-neutral-100){ color: var(--mg-neutral-100); }
body.mg-design-system :where(.mg-bg-neutral-100){ background-color: var(--mg-neutral-100); }
body.mg-design-system :where(.mg-text-neutral-200){ color: var(--mg-neutral-200); }
body.mg-design-system :where(.mg-bg-neutral-200){ background-color: var(--mg-neutral-200); }
body.mg-design-system :where(.mg-text-neutral-300){ color: var(--mg-neutral-300); }
body.mg-design-system :where(.mg-bg-neutral-300){ background-color: var(--mg-neutral-300); }
body.mg-design-system :where(.mg-text-neutral-400){ color: var(--mg-neutral-400); }
body.mg-design-system :where(.mg-bg-neutral-400){ background-color: var(--mg-neutral-400); }
body.mg-design-system :where(.mg-text-neutral-500){ color: var(--mg-neutral-500); }
body.mg-design-system :where(.mg-bg-neutral-500){ background-color: var(--mg-neutral-500); }
body.mg-design-system :where(.mg-text-neutral-600){ color: var(--mg-neutral-600); }
body.mg-design-system :where(.mg-bg-neutral-600){ background-color: var(--mg-neutral-600); }
body.mg-design-system :where(.mg-text-neutral-700){ color: var(--mg-neutral-700); }
body.mg-design-system :where(.mg-bg-neutral-700){ background-color: var(--mg-neutral-700); }
body.mg-design-system :where(.mg-text-neutral-800){ color: var(--mg-neutral-800); }
body.mg-design-system :where(.mg-bg-neutral-800){ background-color: var(--mg-neutral-800); }
body.mg-design-system :where(.mg-text-neutral-900){ color: var(--mg-neutral-900); }
body.mg-design-system :where(.mg-bg-neutral-900){ background-color: var(--mg-neutral-900); }

/* ======================================
   MG LEADBUILDER 2025 – SIMPLIFIED UTILITIES
   Keep-only: shadow, radius, and essential a11y
   Elementor handles layout/structure, spacing is in spacing tab
   
   NAMING CONVENTION: All classes use mg- prefix for proper namespacing
   All classes match the Design System Wiki documentation
   ====================================== */

@layer utilities {

  /* ---- Shadow Effects ---- */
  :where(.mg-shadow-sm){ box-shadow: var(--mg-shadow-sm, 0 1px 2px rgba(0,0,0,.05)); }
  :where(.mg-shadow-md){ box-shadow: var(--mg-shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)); }
  :where(.mg-shadow-lg){ box-shadow: var(--mg-shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)); }
  :where(.mg-shadow-xl){ box-shadow: var(--mg-shadow-xl, 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04)); }

  /* ---- Border Radius (responsive) ---- */
  :where(.mg-radius-sm){ border-radius: clamp(0.1875rem, 0.3vw, 0.25rem); }
  :where(.mg-radius-md){ border-radius: clamp(0.375rem, 0.5vw, 0.5rem); }
  :where(.mg-radius-lg){ border-radius: clamp(0.625rem, 0.8vw, 0.75rem); }
  :where(.mg-radius-xl){ border-radius: clamp(0.875rem, 1vw, 1rem); }

}
/* End simplified utilities */

/* ---- List Bullet Styles ---- */
/* Accent-colored circular bullet points */
/* Scoped outside @layer for proper specificity - removed :where() for higher specificity */
body.mg-design-system .mg-list-bullet-accent,
body.mg-design-system ul.mg-list-bullet-accent,
body.mg-design-system ol.mg-list-bullet-accent,
body.mg-design-system .mg-list-bullet-list-accent,
body.mg-design-system ul.mg-list-bullet-list-accent,
body.mg-design-system ol.mg-list-bullet-list-accent {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

body.mg-design-system .mg-list-bullet-accent li,
body.mg-design-system ul.mg-list-bullet-accent li,
body.mg-design-system ol.mg-list-bullet-accent li,
body.mg-design-system .mg-list-bullet-list-accent li,
body.mg-design-system ul.mg-list-bullet-list-accent li,
body.mg-design-system ol.mg-list-bullet-list-accent li {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  position: relative !important;
  padding-left: 1.5em !important;
  margin-left: 0 !important;
}

/* Hide the default ::marker pseudo-element completely */
body.mg-design-system .mg-list-bullet-accent li::marker,
body.mg-design-system ul.mg-list-bullet-accent li::marker,
body.mg-design-system ol.mg-list-bullet-accent li::marker,
body.mg-design-system .mg-list-bullet-list-accent li::marker,
body.mg-design-system ul.mg-list-bullet-list-accent li::marker,
body.mg-design-system ol.mg-list-bullet-list-accent li::marker {
  content: '' !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  font-size: 0 !important;
}

/* Add custom accent-colored bullet with ::before */
/* Use Elementor's global accent color first, then fallback to design system accent */
body.mg-design-system .mg-list-bullet-accent li::before,
body.mg-design-system ul.mg-list-bullet-accent li::before,
body.mg-design-system ol.mg-list-bullet-accent li::before,
body.mg-design-system .mg-list-bullet-list-accent li::before,
body.mg-design-system ul.mg-list-bullet-list-accent li::before,
body.mg-design-system ol.mg-list-bullet-list-accent li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.5em !important;
  width: 0.5em !important;
  height: 0.5em !important;
  background-color: var(--e-global-color-accent, var(--mg-color-accent)) !important;
  border-radius: 50% !important;
  display: inline-block !important;
  margin-right: 0.5em !important;
}/* =========================
   MG LEADBUILDER 2025 – VISUAL UTILITIES
   Advanced CSS effects that Elementor doesn't provide
   ========================= */

/* =========================
   BLEND MODES
   Mix elements with backgrounds in creative ways
   ========================= */

body.mg-design-system .mg-blend-multiply {
    mix-blend-mode: multiply !important;
}

body.mg-design-system .mg-blend-screen {
    mix-blend-mode: screen !important;
}

body.mg-design-system .mg-blend-overlay {
    mix-blend-mode: overlay !important;
}

body.mg-design-system .mg-blend-darken {
    mix-blend-mode: darken !important;
}

body.mg-design-system .mg-blend-lighten {
    mix-blend-mode: lighten !important;
}

body.mg-design-system .mg-blend-color-dodge {
    mix-blend-mode: color-dodge !important;
}

body.mg-design-system .mg-blend-color-burn {
    mix-blend-mode: color-burn !important;
}

body.mg-design-system .mg-blend-soft-light {
    mix-blend-mode: soft-light !important;
}

body.mg-design-system .mg-blend-difference {
    mix-blend-mode: difference !important;
}

/* =========================
   CLIP PATH
   Create custom shapes and angled edges
   ========================= */

/* Diagonal cuts */
body.mg-design-system .mg-clip-diagonal-tl {
    clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%) !important;
}

body.mg-design-system .mg-clip-diagonal-tr {
    clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%) !important;
}

body.mg-design-system .mg-clip-diagonal-bl {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 95%) !important;
}

body.mg-design-system .mg-clip-diagonal-br {
    clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%) !important;
}

/* Angled sections */
body.mg-design-system .mg-clip-angle-top {
    clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%) !important;
}

body.mg-design-system .mg-clip-angle-bottom {
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%) !important;
}

body.mg-design-system .mg-clip-angle-both {
    clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%) !important;
}

/* Corner notches */
body.mg-design-system .mg-clip-notch-tl {
    clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 5%) !important;
}

body.mg-design-system .mg-clip-notch-tr {
    clip-path: polygon(0 0, 95% 0, 100% 5%, 100% 100%, 0 100%) !important;
}

body.mg-design-system .mg-clip-notch-bl {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%, 0 95%) !important;
}

body.mg-design-system .mg-clip-notch-br {
    clip-path: polygon(0 0, 100% 0, 100% 95%, 95% 100%, 0 100%) !important;
}

/* Chevron/Arrow shapes */
body.mg-design-system .mg-clip-chevron-right {
    clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%) !important;
}

body.mg-design-system .mg-clip-chevron-left {
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 15% 100%, 0 50%) !important;
}

/* Pentagon */
body.mg-design-system .mg-clip-pentagon {
    clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%) !important;
}

/* Hexagon */
body.mg-design-system .mg-clip-hexagon {
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%) !important;
}

/* Circle */
body.mg-design-system .mg-clip-circle {
    clip-path: circle(50% at 50% 50%) !important;
}

/* =========================
   BACKDROP FILTERS
   Frosted glass and blur effects
   ========================= */

/* Frosted glass effect */
body.mg-design-system .mg-backdrop-blur {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

body.mg-design-system .mg-backdrop-blur-light {
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

body.mg-design-system .mg-backdrop-blur-heavy {
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* Brightness adjustments */
body.mg-design-system .mg-backdrop-brighten {
    backdrop-filter: brightness(1.2) !important;
    -webkit-backdrop-filter: brightness(1.2) !important;
}

body.mg-design-system .mg-backdrop-darken {
    backdrop-filter: brightness(0.8) !important;
    -webkit-backdrop-filter: brightness(0.8) !important;
}

/* Combined effects for glass morphism */
body.mg-design-system .mg-backdrop-glass {
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.mg-design-system .mg-backdrop-glass-dark {
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Contrast */
body.mg-design-system .mg-backdrop-contrast {
    backdrop-filter: contrast(1.5) !important;
    -webkit-backdrop-filter: contrast(1.5) !important;
}

/* Grayscale */
body.mg-design-system .mg-backdrop-grayscale {
    backdrop-filter: grayscale(100%) !important;
    -webkit-backdrop-filter: grayscale(100%) !important;
}

/* Sepia */
body.mg-design-system .mg-backdrop-sepia {
    backdrop-filter: sepia(100%) !important;
    -webkit-backdrop-filter: sepia(100%) !important;
}

/* =========================
   Z-INDEX MANAGEMENT
   Consistent layering system
   ========================= */

body.mg-design-system .mg-z-back {
    z-index: -1 !important;
    position: relative !important;
}

body.mg-design-system .mg-z-base {
    z-index: 0 !important;
    position: relative !important;
}

body.mg-design-system .mg-z-content {
    z-index: 10 !important;
    position: relative !important;
}

body.mg-design-system .mg-z-dropdown {
    z-index: 100 !important;
    position: relative !important;
}

body.mg-design-system .mg-z-sticky {
    z-index: 200 !important;
    position: relative !important;
}

body.mg-design-system .mg-z-overlay {
    z-index: 500 !important;
    position: relative !important;
}

body.mg-design-system .mg-z-modal {
    z-index: 1000 !important;
    position: relative !important;
}

body.mg-design-system .mg-z-toast {
    z-index: 2000 !important;
    position: relative !important;
}

/* =========================
   TRANSPARENT SCROLLING HEADER
   Header that starts transparent and becomes blurred/glossy on scroll
   ========================= */

/* Initial transparent state */
body.mg-design-system .mg-header-transparent {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 200 !important;
    background-color: transparent !important;
    transition: all 0.3s ease !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid transparent !important;
}

/* Scrolled state - applied via JavaScript */
body.mg-design-system .mg-header-transparent.mg-header-scrolled {
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

/* Dark variant for dark backgrounds */
body.mg-design-system .mg-header-transparent.mg-header-dark.mg-header-scrolled {
    background-color: rgba(0, 0, 0, 0.75) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Ensure content doesn't hide behind fixed header - add this class to body or first section */
body.mg-design-system .mg-has-transparent-header,
body.mg-design-system .mg-header-spacer {
    padding-top: 80px !important; /* Adjust based on your header height */
}

@media (max-width: 768px) {
    body.mg-design-system .mg-has-transparent-header,
    body.mg-design-system .mg-header-spacer {
        padding-top: 60px !important; /* Smaller on mobile */
    }
}

/* End visual utilities */

.ha-flip-box-container:after{display:block;visibility:hidden;clear:both;height:0;content:" ";font-size:0}.ha-flip-box-container .ha-flip-box-inner{position:relative;z-index:1;margin:0;padding:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.ha-flip-box-container .ha-flip-box-inner:hover .ha-flip-box-back{z-index:1}.ha-flip-box-container .ha-flip-box-inner:hover .ha-flip-box-front{z-index:-1}.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-inner-wrapper{position:relative;-webkit-transform:translateZ(0);-webkit-perspective:1000px;perspective:1000px}.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-back,.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-front{top:0;right:0;left:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-ms-flex-align:center;height:250px;background-position:center;background-clip:padding-box;background-size:cover;background-repeat:no-repeat;text-align:center;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px}.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-front{background-color:transparent;position:relative;bottom:0;z-index:10;padding:30px;border:1px solid #ddd;border-radius:.3rem}.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-back:before,.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-front:before{position:absolute;top:0;left:0;z-index:-9;width:100%;height:100%;background-color:transparent;content:""}.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-back{position:absolute;z-index:-1;padding:46px;border-radius:.3rem;background-color:#562dd4;color:#fff}.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-back-inner,.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-front-inner{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%}.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-back-inner .ha-text,.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-front-inner .ha-text{text-align:center}.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-back-inner .ha-text p,.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-front-inner .ha-text p{margin-top:10px;margin-bottom:0}.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-front-inner .ha-flip-icon.icon{padding:20px;border-radius:50%;background-color:#f1f4f8;color:#242424}.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-front-inner .ha-flip-icon{display:inline-block;margin-bottom:20px;text-align:center;font-size:28px}.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-front-inner .ha-flip-icon i,.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-front-inner .ha-flip-icon svg{display:block;width:1em;height:1em}.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-front-inner .ha-flip-icon i{position:relative}.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-back-inner .ha-flip-icon i:before,.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-front-inner .ha-flip-icon i:before{position:absolute;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-back-inner .ha-flip-icon img,.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-front-inner .ha-flip-icon img{width:60px;height:60px;vertical-align:middle}.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-front-inner .ha-flip-box-heading{margin:0;font-weight:700;font-size:20px}.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-front-inner p{margin-bottom:0;font-size:16px}.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-back-inner .ha-flip-box-heading-back{margin:0;color:#fff;font-size:18px}.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-back-inner .ha-flip-icon{display:inline-block;margin-bottom:20px;text-align:center;font-size:20px}.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-back-inner .ha-flip-icon i,.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-back-inner .ha-flip-icon svg{display:block;width:1em;height:1em}.ha-flip-box-container .ha-flip-box-inner .ha-flip-box-back-inner .ha-flip-icon i{position:relative;color:#fff}.ha-flip-box-container .ha-flip-box-back .ha-flip-btn{display:inline-block;margin-top:1rem;padding:.8rem 2.5rem;border-radius:4px;background-color:#fff;color:#562dd4;text-decoration:none;text-transform:uppercase;font-size:12px;-webkit-transition:all .3s;transition:all .3s}.ha-flip-box-container .ha-flip-box-back .ha-flip-btn:hover{background-color:#fff;color:#562dd4}.ha-flip-box-container .ha-flip-box-inner.ha-flip-right .ha-flip-box-front,.ha-flip-box-container .ha-flip-box-inner.ha-flip-right.flip .ha-flip-box-back{-webkit-transform:rotateY(0);transform:rotateY(0)}.ha-flip-box-container .ha-flip-box-inner.ha-flip-right .ha-flip-box-back{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}.ha-flip-box-container .ha-flip-box-inner.ha-flip-right.flip .ha-flip-box-front{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.ha-flip-box-container .ha-flip-box-inner.ha-flip-up .ha-flip-box-front,.ha-flip-box-container .ha-flip-box-inner.ha-flip-up.flip .ha-flip-box-back{-webkit-transform:rotateX(0);transform:rotateX(0)}.ha-flip-box-container .ha-flip-box-inner.ha-flip-up .ha-flip-box-back{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg)}.ha-flip-box-container .ha-flip-box-inner.ha-flip-up.flip .ha-flip-box-front{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}.ha-flip-box-container .ha-flip-box-inner.ha-flip-left .ha-flip-box-front,.ha-flip-box-container .ha-flip-box-inner.ha-flip-left.flip .ha-flip-box-back{-webkit-transform:rotateY(0);transform:rotateY(0)}.ha-flip-box-container .ha-flip-box-inner.ha-flip-left .ha-flip-box-back{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.ha-flip-box-container .ha-flip-box-inner.ha-flip-left.flip .ha-flip-box-front{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}.ha-flip-box-container .ha-flip-box-inner.ha-flip-down .ha-flip-box-front,.ha-flip-box-container .ha-flip-box-inner.ha-flip-down.flip .ha-flip-box-back{-webkit-transform:rotateX(0);transform:rotateX(0)}.ha-flip-box-container .ha-flip-box-inner.ha-flip-down .ha-flip-box-back{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}.ha-flip-box-container .ha-flip-box-inner.ha-flip-down.flip .ha-flip-box-front{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg)}.ha-flip-box-container.ha-flip-effect-classic .ha-flip-box-back,.ha-flip-box-container.ha-flip-effect-classic .ha-flip-box-front{-webkit-transition:-webkit-transform .6s cubic-bezier(.2,.85,.4,1.275);transition:transform .6s cubic-bezier(.2,.85,.4,1.275);transition:transform .6s cubic-bezier(.2,.85,.4,1.275),-webkit-transform .6s cubic-bezier(.2,.85,.4,1.275)}.ha-flip-box-container.ha-flip-effect-3d .ha-flip-box-inner-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.ha-flip-box-container.ha-flip-effect-3d .ha-flip-box-back,.ha-flip-box-container.ha-flip-effect-3d .ha-flip-box-front{-webkit-transition:-webkit-transform .75s ease-in-out;transition:transform .75s ease-in-out;transition:transform .75s ease-in-out,-webkit-transform .75s ease-in-out;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.ha-flip-box-container.ha-flip-effect-3d .ha-flip-box-back-inner,.ha-flip-box-container.ha-flip-effect-3d .ha-flip-box-front-inner{-webkit-transform:translateZ(50px) scale(.9);transform:translateZ(50px) scale(.9)}