/* =================================================================
     VISEON.IO - Optimized Custom CSS
     Version: 2.0
     Last Updated: 2025
     
     FIXES APPLIED:
     - @import moved to top (Issue #3)
     - Modern gradient syntax (Issue #4)
     - Reduced specificity where possible
     - Better organization and maintainability
     ================================================================= */
  
  /* =================================================================
     1. FONTS & TYPOGRAPHY (Must be first per CSS spec)
     ================================================================= */
  /* Previous font kept for rollback/reference:
  @import url('https://fonts.googleapis.com/css2?family=GFS+Didot&display=swap');
  * {
      font-family: 'GFS Didot', serif !important;
  }
  */
  
  @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');
  
  /* Font tokens */
  :root {
      --font-body: 'IBM Plex Sans', 'Segoe UI', Roboto, Arial, sans-serif;
      --font-heading: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Segoe UI', Roboto, Arial, sans-serif;
  }
  
  /* Body/UI typography */
  body,
  button,
  input,
  select,
  textarea,
  .wp-block-button__link,
  .wp-block-navigation-item a {
      font-family: var(--font-body) !important;
  }
  
  /* Heading typography */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .wp-block-heading,
  .wp-block-post-title,
  .wp-site-title,
  .wp-block-query-title {
      font-family: var(--font-heading) !important;
      letter-spacing: -0.01em;
  }
  
  /* =================================================================
           2. CSS CUSTOM PROPERTIES (VARIABLES)
           ================================================================= */
  :root {
      /* Layout */
      --wp--style--global--content-size: 1140px !important;
      --header-height: auto;
      /* Updated by JavaScript */
  
      /* Colors */
      --brand-orange: #f4711d;
      --brand-orange-light: #ff8c42;
      --brand-orange-dark: #e55a0d;
      --brand-dark: #1a1a1a;
      --brand-dark-alt: #2d2d2d;
      --text-primary: #202020;
      --text-secondary: #4a5568;
      --text-tertiary: #1a202c;
      --text-light: #ffffff;
      --text-gray: #666;
      --bg-light: #f7f8fa;
      --border-light: #e5e7eb;
      --border-dark: #333;
  
      /* Spacing */
      --spacing-xs: 8px;
      --spacing-sm: 16px;
      --spacing-md: 24px;
      --spacing-lg: 40px;
      --spacing-xl: 64px;
  
      /* Effects */
      --transition-fast: 0.2s ease;
      --transition-normal: 0.3s ease;
      --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.1);
      --shadow-md: 0 5px 20px rgba(0, 0, 0, 0.2);
      --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);
      --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.5);
  
      /* Border radius */
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 20px;
      --radius-full: 50px;
  }
  
  /* =================================================================
           3. STICKY HEADER - FULL WIDTH FIX
           NOTE: Header is inside .wp-site-blocks which constrains width.
           We use the "full-bleed" technique to break out on DESKTOP ONLY.
           Mobile uses simplified approach to prevent scroll issues.
           ================================================================= */
  
  /* DESKTOP: Ensure the main site wrapper doesn't constrain the header */
  @media (min-width: 782px) {
      .wp-site-blocks {
          overflow-x: clip !important;
      }
  }
  
  /* MOBILE: Allow normal overflow for scrolling */
@media (max-width: 781px) {
    .wp-site-blocks {
        overflow-x: hidden !important;
        overflow-x: clip !important;
        overflow-y: visible !important;
    }
  
      body {
          overflow-x: hidden !important;
          overflow-y: auto !important;
      }
  
      /* Remove any padding that could shift the mobile menu */
      .wp-site-blocks:has(.wp-block-navigation__responsive-container.is-menu-open) {
          padding-left: 0 !important;
          padding-right: 0 !important;
      }
  }
  
header.wp-block-template-part {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    background: #ffffff !important;
    transition: all var(--transition-normal) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0) !important;
}
  
  /* DESKTOP ONLY: Full-bleed technique */
  @media (min-width: 782px) {
      header.wp-block-template-part {
          width: 100vw !important;
          margin-left: calc(50% - 50vw) !important;
          margin-right: calc(50% - 50vw) !important;
          left: 0 !important;
          right: 0 !important;
      }
  }
  
  /* MOBILE: Simplified full-width approach */
  @media (max-width: 781px) {
      header.wp-block-template-part {
          width: 100% !important;
          left: 0 !important;
          right: 0 !important;
          margin-left: 0 !important;
          margin-right: 0 !important;
          position: sticky !important;
      }
  }
  
  /* Admin bar adjustments */
  .admin-bar header.wp-block-template-part {
      top: 32px !important;
  }
  
  @media screen and (max-width: 782px) {
      .admin-bar header.wp-block-template-part {
          top: 46px !important;
      }
  }

/* Remove default block-flow gap between header and first content block on template-plain pages */
.page-template-template-plain .wp-site-blocks > main.wp-block-group {
    margin-block-start: 0 !important;
}

.page-template-template-plain .wp-site-blocks > main.wp-block-group > .entry-content {
    margin-block-start: 0 !important;
}

/* Restore full-width section backgrounds for block pages (pricing/discover/articles). */
main.wp-block-group.is-layout-constrained > .entry-content.is-layout-flow > .alignfull {
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/* Remove default 24px flow gap before the first full-width section in template-plain. */
.page-template-template-plain main.wp-block-group.is-layout-constrained > .entry-content.is-layout-flow > .alignfull:first-child {
    margin-block-start: 0 !important;
}

/* Rules article: first visible block is .rules-hero, but a leading <style> node can add a phantom 24px gap */
.page-template-template-plain .viseon-rules-page.is-layout-constrained > .rules-hero {
    margin-block-start: 0 !important;
}
  
  header.wp-block-template-part .wp-block-group.alignwide {
      max-width: var(--wp--style--global--content-size) !important;
      margin-left: auto !important;
      margin-right: auto !important;
      width: 100% !important;
      padding-left: 20px !important;
      padding-right: 20px !important;
  }
  
  /* MOBILE: Remove padding to eliminate borders/gaps */
  @media (max-width: 781px) {
      header.wp-block-template-part .wp-block-group.alignwide {
          padding-left: 12px !important;
          padding-right: 12px !important;
      }
  }
  
  
  
  /* Override inline padding from WordPress blocks */
  .wp-block-group[style*="padding-top:16px"] {
      padding-top: var(--spacing-xs) !important;
      padding-bottom: var(--spacing-xs) !important;
  }
  
  /* =================================================================
           4. SCROLL PROGRESS BAR - REMOVED
           ================================================================= */
  /* Progress bar removed per user request */
  
  /* =================================================================
           5. HEADER NAVIGATION
           ================================================================= */
  
  .wp-block-navigation-item a {
      color: var(--text-primary) !important;
      text-decoration: none !important;
      padding: var(--spacing-xs) 0 !important;
      transition: color var(--transition-normal) !important;
      position: relative !important;
  }
  
  .wp-block-navigation-item a:hover {
      color: var(--brand-orange) !important;
  }
  
  /* Animated underline on hover */
  .wp-block-navigation-item a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 2px;
      background: var(--brand-orange);
      transition: width var(--transition-normal);
      transform: translateX(-50%);
  }
  
  .wp-block-navigation-item a:hover::after {
      width: 80%;
  }
  
  /* Ask icon hover effects */
  header.wp-block-template-part figure.wp-block-image a {
      position: relative !important;
      display: inline-block !important;
      padding: var(--spacing-xs) 0 !important;
      transition: transform var(--transition-normal) !important;
  }
  
  header.wp-block-template-part figure.wp-block-image a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 2px;
      background: var(--brand-orange);
      transition: width var(--transition-normal);
      transform: translateX(-50%);
  }
  
  header.wp-block-template-part figure.wp-block-image a:hover::after {
      width: 80%;
  }
  
  header.wp-block-template-part figure.wp-block-image a:hover {
      transform: translateY(-2px) !important;
  }
  
  /* Fix Ask icon size */
  header.wp-block-template-part figure.wp-block-image img {
      width: 36px !important;
      height: auto !important;
      min-width: 36px !important;
  }
  
  /* Make Ask icon bigger on mobile */
  @media (max-width: 781px) {
      header.wp-block-template-part figure.wp-block-image img {
          width: 48px !important;
          min-width: 48px !important;
      }
  
      /* Add more space around it on mobile */
      header.wp-block-template-part figure.wp-block-image {
          padding: 8px !important;
      }
  
      /* Make logo match Ask button size on mobile */
      .wp-block-site-logo img {
          width: 48px !important;
          height: auto !important;
          max-width: 48px !important;
      }
  }
  
  /* Dropdown styling */
  .wp-block-navigation__submenu-container {
      background: var(--text-light) !important;
      border-radius: var(--radius-sm) !important;
      padding: var(--spacing-xs) 0 !important;
      box-shadow: var(--shadow-md) !important;
      z-index: 999999 !important;
  }
  
  .wp-block-navigation__submenu-container .wp-block-navigation-item a {
      color: var(--text-primary) !important;
      padding: 10px 20px !important;
  }
  
  .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover {
      background: rgba(244, 113, 29, 0.2) !important;
      color: var(--brand-orange) !important;
  }
  
  /* Remove underline from dropdown items */
  .wp-block-navigation__submenu-container .wp-block-navigation-item a::after {
      display: none !important;
  }
  
  /* Active menu item */
  .current-menu-item>a {
      color: var(--brand-orange) !important;
  }
  
  /* Mobile menu centering */
  @media (max-width: 781px) {
  
      .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
      .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
          align-items: center !important;
          text-align: center !important;
      }
  }
  
  /* =================================================================
           5B. MOBILE MENU FULL-PAGE OVERLAY FIX
           ================================================================= */
  @media (max-width: 781px) {
  
      /* Full-page overlay when menu is open */
      .wp-block-navigation__responsive-container.is-menu-open {
          position: fixed !important;
          top: 0 !important;
          left: 0 !important;
          right: 0 !important;
          bottom: 0 !important;
          width: 100vw !important;
          height: 100vh !important;
          max-height: 100vh !important;
          max-width: 100vw !important;
          z-index: 100000 !important;
          background: rgba(255, 255, 255, 0.98) !important;
          backdrop-filter: blur(10px) !important;
          overflow-y: auto !important;
          overflow-x: hidden !important;
          -webkit-overflow-scrolling: touch !important;
          margin: 0 !important;
          padding: 80px 20px 120px 20px !important;
          transform: none !important;
      }
  
      /* Adjust for admin bar if present */
      .admin-bar .wp-block-navigation__responsive-container.is-menu-open {
          top: 46px !important;
          height: calc(100vh - 46px) !important;
      }
  
      /* Menu content container */
      .wp-block-navigation__responsive-container-content {
          position: relative !important;
          width: 100% !important;
          max-width: 100% !important;
          padding: 0 !important;
          margin: 0 !important;
      }
  
      /* Close button positioning - Minimal & Elegant */
      .wp-block-navigation__responsive-container-close {
          position: fixed !important;
          top: 15px !important;
          right: 15px !important;
          z-index: 100001 !important;
          background: rgba(0, 0, 0, 0.05) !important;
          color: var(--text-primary) !important;
          border-radius: 50% !important;
          width: 44px !important;
          height: 44px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          box-shadow: none !important;
          transition: all var(--transition-fast) !important;
          opacity: 0.7 !important;
      }
  
      .wp-block-navigation__responsive-container-close:hover {
          background: rgba(0, 0, 0, 0.1) !important;
          opacity: 1 !important;
          transform: scale(1.05) !important;
      }
  
      .admin-bar .wp-block-navigation__responsive-container-close {
          top: 56px !important;
      }
  
      /* Menu items styling - IMPROVED UX */
      .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
          gap: 8px !important;
          padding: 0 !important;
          margin: 0 0 40px 0 !important;
          width: 100% !important;
          max-width: 100% !important;
      }
  
      .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
          margin: 0 !important;
          padding: 0 !important;
          border-bottom: none !important;
          width: 100% !important;
          list-style: none !important;
      }
  
      .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
          display: block !important;
          padding: 18px 24px !important;
          font-size: 1.125rem !important;
          font-weight: 500 !important;
          color: var(--text-primary) !important;
          text-align: center !important;
          text-decoration: none !important;
          width: 100% !important;
          box-sizing: border-box !important;
          border-radius: 12px !important;
          transition: all 0.2s ease !important;
      }
  
      .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover {
          background: rgba(244, 113, 29, 0.08) !important;
          color: var(--brand-orange) !important;
          transform: translateX(4px) !important;
      }
  
      /* Active/current menu item */
      .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item a {
          background: rgba(244, 113, 29, 0.12) !important;
          color: var(--brand-orange) !important;
          font-weight: 600 !important;
      }
  
      /* Social icons in mobile menu */
      .wp-block-navigation__responsive-container.is-menu-open .wp-block-social-links,
      .wp-block-navigation__responsive-container.is-menu-open .wp-social-link {
          margin-bottom: 40px !important;
          padding-bottom: 40px !important;
      }
  
      .wp-block-navigation__responsive-container.is-menu-open .wp-block-social-links {
          display: flex !important;
          justify-content: center !important;
          gap: 16px !important;
          padding: 32px 0 !important;
      }
  
      /* Ensure social icons are visible above mobile browser UI */
      .wp-block-navigation__responsive-container-content>*:last-child {
          padding-bottom: 60px !important;
      }
  
      /* Prevent body scroll when mobile menu is open */
      body:has(.wp-block-navigation__responsive-container.is-menu-open) {
          overflow: hidden !important;
          position: fixed !important;
          width: 100% !important;
      }
  
      /* Hamburger button styling - Minimal & Elegant */
      .wp-block-navigation__responsive-container-open {
          background: transparent !important;
          border: none !important;
          color: var(--text-primary) !important;
          padding: 8px !important;
          border-radius: 4px !important;
          transition: all var(--transition-fast) !important;
          opacity: 0.7 !important;
      }
  
      .wp-block-navigation__responsive-container-open:hover {
          background: rgba(0, 0, 0, 0.05) !important;
          color: var(--text-primary) !important;
          opacity: 1 !important;
      }
  
      /* Hamburger icon lines - subtle styling */
      .wp-block-navigation__responsive-container-open svg {
          width: 24px !important;
          height: 24px !important;
          stroke-width: 2px !important;
      }
  }
  
  /* =================================================================
           6. PAGE TITLE SECTIONS
           ================================================================= */
  body.page.page-template-default:not(.parent-pageid-358) main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:first-child {
      background: var(--bg-light) !important;
      padding: 70px var(--spacing-lg) var(--spacing-lg) !important;
      
      position: relative !important;
      border-bottom: 1px solid var(--border-light) !important;
  }
  
  /* Top orange accent line */
  body.page.page-template-default:not(.parent-pageid-358) main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:first-child::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: var(--brand-orange);
  }
  
  /* Page title styling */
  body.page.page-template-default:not(.parent-pageid-358) main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:first-child h1.wp-block-post-title {
      position: relative;
      z-index: 1;
      font-size: clamp(2rem, 5vw, 3rem) !important;
      line-height: 1.3 !important;
      margin-bottom: 0 !important;
      color: var(--text-tertiary) !important;
  }
  
  /* Second container (subheading/intro) */
  body.page.page-template-default:not(.parent-pageid-358) main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:nth-child(2) {
      background: var(--bg-light) !important;
      padding: var(--spacing-lg) var(--spacing-lg) 60px !important;
      margin: 0 0 60px 0 !important;
      position: relative !important;
      border-bottom: 1px solid var(--border-light) !important;
  }
  
  /* Bottom orange accent */
  body.page.page-template-default:not(.parent-pageid-358) main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:nth-child(2)::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: var(--brand-orange);
      z-index: 10;
  }
  
  body.page.page-template-default:not(.parent-pageid-358) main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:nth-child(2)>* {
      position: relative;
      z-index: 1;
  }
  
  body.page.page-template-default:not(.parent-pageid-358) main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:nth-child(2) h2 {
      font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
      line-height: 1.3 !important;
      margin-bottom: var(--spacing-md) !important;
      color: var(--brand-orange) !important;
  }
  
  body.page.page-template-default:not(.parent-pageid-358) main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:nth-child(2) p {
      font-size: 1.1rem !important;
      line-height: 1.7 !important;
      color: var(--text-secondary) !important;
  }
  
  /* Don't apply to pages with hero sections */
  body.page.page-template-default:not(.parent-pageid-358) .wp-block-cover~main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:first-child,
  body.page.page-template-default:not(.parent-pageid-358) .wp-block-cover~main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:nth-child(2) {
      background: transparent !important;
      border: none !important;
      padding: revert !important;
  }
  
  body.page.page-template-default:not(.parent-pageid-358) .wp-block-cover~main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:first-child::before,
  body.page.page-template-default:not(.parent-pageid-358) .wp-block-cover~main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:nth-child(2)::before,
  body.page.page-template-default:not(.parent-pageid-358) .wp-block-cover~main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:first-child::after,
  body.page.page-template-default:not(.parent-pageid-358) .wp-block-cover~main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:nth-child(2)::after {
      display: none !important;
  }
  
  /* Mobile responsive */
  @media (max-width: 768px) {
      body.page.page-template-default:not(.parent-pageid-358) main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:first-child {
          padding: 50px 30px 30px !important;
      }
  
      body.page.page-template-default:not(.parent-pageid-358) main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:nth-child(2) {
          padding: 30px 30px 50px !important;
          margin: 0 0 var(--spacing-lg) 0 !important;
      }
  }

  /* =================================================================
           6A. DEFAULT SINGLE POST ARTICLE STYLE
           ================================================================= */
  body.single-post main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:first-child {
      background: #070a14 !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      margin-left: calc(50% - 50vw) !important;
      margin-right: calc(50% - 50vw) !important;
      padding: 86px 24px 58px !important;
      border: none !important;
      position: relative !important;
  }

  body.single-post main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:first-child::before,
  body.single-post main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:first-child::after {
      display: none !important;
      content: none !important;
  }

  body.single-post main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:first-child .wp-block-group.alignwide {
      max-width: 1032px !important;
      margin-left: auto !important;
      margin-right: auto !important;
  }

  body.single-post main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:first-child h1.wp-block-post-title {
      color: var(--brand-orange) !important;
      font-size: clamp(2.2rem, 5.8vw, 4.4rem) !important;
      line-height: 1.06 !important;
      letter-spacing: -0.02em !important;
      text-align: left !important;
      margin: 0 0 18px 0 !important;
  }

  body.single-post main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:first-child .wp-block-group.is-layout-flex {
      justify-content: flex-start !important;
      gap: 18px !important;
      margin: 0 !important;
      padding-top: 12px !important;
      border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
  }

  body.single-post main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:first-child .wp-block-post-date,
  body.single-post main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:first-child .wp-block-post-terms {
      color: rgba(255, 255, 255, 0.72) !important;
      font-size: 0.95rem !important;
  }

  body.single-post main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:first-child .wp-block-post-terms a {
      color: #fff4ea !important;
      background: rgba(244, 113, 29, 0.2) !important;
      border: 1px solid rgba(244, 113, 29, 0.45) !important;
      border-radius: 999px !important;
      padding: 5px 12px !important;
      text-decoration: none !important;
  }

  body.single-post main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:nth-child(2) {
      background: #ffffff !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      margin-left: calc(50% - 50vw) !important;
      margin-right: calc(50% - 50vw) !important;
      padding: 64px 24px 84px !important;
      border: none !important;
  }

  body.single-post main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:nth-child(2)::before,
  body.single-post main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:nth-child(2)::after {
      display: none !important;
      content: none !important;
  }

  body.single-post main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:nth-child(2)>.entry-content {
      max-width: 1080px !important;
      margin-left: auto !important;
      margin-right: auto !important;
  }

  body.single-post main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:nth-child(2)>.entry-content>:where(:not(.alignfull)) {
      max-width: 1032px !important;
      margin-left: auto !important;
      margin-right: auto !important;
  }

  body.single-post .entry-content p {
      color: #2f3a4b !important;
      font-size: 1.04rem !important;
      line-height: 1.78 !important;
  }

  body.single-post .entry-content h2.wp-block-heading {
      color: #1f2735 !important;
      margin-top: 3.4rem !important;
      margin-bottom: 1.4rem !important;
      padding-bottom: 0 !important;
      border-bottom: none !important;
      font-weight: 800 !important;
      line-height: 1.2 !important;
  }

  body.single-post .entry-content h3.wp-block-heading {
      color: #253044 !important;
      margin-top: 2.4rem !important;
      margin-bottom: 0.95rem !important;
      font-weight: 700 !important;
  }

  @media (max-width: 781px) {
      body.single-post main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:first-child {
          padding: 58px 16px 40px !important;
          margin-left: 0 !important;
          margin-right: 0 !important;
      }

      body.single-post main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:nth-child(2) {
          padding: 42px 16px 60px !important;
          margin-left: 0 !important;
          margin-right: 0 !important;
      }

      body.single-post main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:first-child h1.wp-block-post-title {
          font-size: clamp(1.85rem, 8vw, 2.8rem) !important;
      }
  }

  /* Article pages under /articles/ should match the same premium post look. */
  body.page.page-template-default.page-child.parent-pageid-358 main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:first-child {
      background: #070a14 !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      margin-left: calc(50% - 50vw) !important;
      margin-right: calc(50% - 50vw) !important;
      padding: 86px 24px 58px !important;
      border: none !important;
      position: relative !important;
  }

  body.page.page-template-default.page-child.parent-pageid-358 main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:first-child::before,
  body.page.page-template-default.page-child.parent-pageid-358 main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:first-child::after {
      display: none !important;
      content: none !important;
  }

  body.page.page-template-default.page-child.parent-pageid-358 main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:first-child h1.wp-block-post-title {
      color: var(--brand-orange) !important;
      font-size: clamp(2.2rem, 5.8vw, 4.4rem) !important;
      line-height: 1.06 !important;
      letter-spacing: -0.02em !important;
      margin: 0 !important;
      text-align: left !important;
      max-width: none !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      width: 100% !important;
  }

  body.page.page-template-default.page-child.parent-pageid-358 main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:nth-child(2) {
      background: #ffffff !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      margin-left: calc(50% - 50vw) !important;
      margin-right: calc(50% - 50vw) !important;
      padding: 64px 24px 84px !important;
      border: none !important;
  }

  body.page.page-template-default.page-child.parent-pageid-358 main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:nth-child(2)::before,
  body.page.page-template-default.page-child.parent-pageid-358 main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:nth-child(2)::after {
      display: none !important;
      content: none !important;
  }

  body.page.page-template-default.page-child.parent-pageid-358 .wp-block-post-content {
      max-width: 1032px !important;
      margin-left: auto !important;
      margin-right: auto !important;
  }

  body.page.page-template-default.page-child.parent-pageid-358 .wp-block-post-content>:where(:not(.alignfull)) {
      max-width: 1032px !important;
      margin-left: auto !important;
      margin-right: auto !important;
  }

  body.page.page-template-default.page-child.parent-pageid-358 .wp-block-post-content>h2.wp-block-heading {
      border-bottom: none !important;
      padding-bottom: 0 !important;
      margin-top: 3.4rem !important;
      margin-bottom: 1.4rem !important;
      color: #1f2735 !important;
      font-weight: 800 !important;
      text-align: left !important;
      line-height: 1.2 !important;
  }

  body.page.page-template-default.page-child.parent-pageid-358 .wp-block-post-content>h3.wp-block-heading {
      color: #253044 !important;
      margin-top: 2.4rem !important;
      margin-bottom: 0.95rem !important;
      font-weight: 700 !important;
      text-align: left !important;
  }

  body.page.page-template-default.page-child.parent-pageid-358 .wp-block-post-content>p {
      color: #2f3a4b !important;
      line-height: 1.78 !important;
      font-size: 1.04rem !important;
      text-align: left !important;
  }

  body.page.page-template-default.page-child.parent-pageid-358 .wp-block-post-content>.has-text-align-center {
      text-align: left !important;
  }

  @media (max-width: 781px) {
      body.page.page-template-default.page-child.parent-pageid-358 main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:first-child {
          padding: 58px 16px 40px !important;
          margin-left: 0 !important;
          margin-right: 0 !important;
      }

      body.page.page-template-default.page-child.parent-pageid-358 main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:nth-child(2) {
          padding: 42px 16px 60px !important;
          margin-left: 0 !important;
          margin-right: 0 !important;
      }
  }

  /* Harden article-page heading consistency across nested blocks. */
  body.page.page-template-default.page-child.parent-pageid-358 .entry-content h2.wp-block-heading {
      border-bottom: none !important;
      padding-bottom: 0 !important;
      text-align: left !important;
  }

  body.single-post .viseon-article-eyebrow-row,
  body.page.page-template-default.page-child.parent-pageid-358 .viseon-article-eyebrow-row {
      align-items: center !important;
      gap: 8px !important;
      margin: 0 0 18px 0 !important;
  }

  body.single-post .viseon-article-eyebrow-label,
  body.single-post .viseon-article-eyebrow-date,
  body.page.page-template-default.page-child.parent-pageid-358 .viseon-article-eyebrow-label,
  body.page.page-template-default.page-child.parent-pageid-358 .viseon-article-eyebrow-date {
      margin: 0 !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      letter-spacing: 0.14em !important;
      text-transform: uppercase !important;
      color: rgba(244, 113, 29, 0.95) !important;
  }

  body.single-post .viseon-article-hero-meta-row,
  body.page.page-template-default.page-child.parent-pageid-358 .viseon-article-hero-meta-row {
      align-items: center !important;
      gap: 8px !important;
      margin: 24px 0 0 0 !important;
      padding-top: 18px !important;
      border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
  }

  body.single-post .viseon-article-hero-meta-date,
  body.single-post .viseon-article-hero-meta-text,
  body.page.page-template-default.page-child.parent-pageid-358 .viseon-article-hero-meta-date,
  body.page.page-template-default.page-child.parent-pageid-358 .viseon-article-hero-meta-text {
      margin: 0 !important;
      font-size: 0.9rem !important;
      color: rgba(255, 255, 255, 0.76) !important;
  }

  body.single-post .viseon-article-hero-meta-terms,
  body.page.page-template-default.page-child.parent-pageid-358 .viseon-article-hero-meta-terms {
      margin: 0 !important;
  }

  body.single-post .viseon-article-hero-meta-terms a,
  body.page.page-template-default.page-child.parent-pageid-358 .viseon-article-hero-meta-terms a {
      color: #fff4ea !important;
      background: rgba(244, 113, 29, 0.2) !important;
      border: 1px solid rgba(244, 113, 29, 0.45) !important;
      border-radius: 999px !important;
      padding: 5px 12px !important;
      text-decoration: none !important;
      font-size: 0.82rem !important;
  }

  body.page.page-template-default:not(.parent-pageid-358) .viseon-article-eyebrow-row,
  body.page.page-template-default:not(.parent-pageid-358) .viseon-article-hero-meta-row {
      display: none !important;
  }

  body.page.page-template-default:not(.parent-pageid-358) .viseon-article-hero-shell h1.wp-block-post-title {
      text-align: center !important;
  }

  /* Keep template-plain rules hero readable and aligned to brand palette. */
  .page-template-template-plain .viseon-rules-page {
      --accent: #f4711d !important;
      --accent-deep: #f4711d !important;
      --accent-glow: rgba(244, 113, 29, 0.14) !important;
  }

  .page-template-template-plain .viseon-rules-page .rules-eyebrow,
  .page-template-template-plain .viseon-rules-page .rules-stat-number {
      color: #f4711d !important;
  }

  .page-template-template-plain .viseon-rules-page .rules-hero-sub,
  .page-template-template-plain .viseon-rules-page .rules-stat-text,
  .page-template-template-plain .viseon-rules-page .rules-meta {
      color: rgba(255, 255, 255, 0.78) !important;
  }
  
  /* =================================================================
           7. FEATURED ARTICLES SECTION - CLEAN & SIMPLE
           ================================================================= */
  
  /* "Featured Articles" heading */
  h2.wp-block-heading:has(+ hr.wp-block-separator) {
      color: var(--brand-dark-alt) !important;
      font-size: 2rem !important;
      margin-top: 0 !important;
      margin-bottom: 20px !important;
      font-weight: 700 !important;
  }
  
  /* Article titles */
  h3.wp-block-heading a {
      color: var(--brand-dark-alt) !important;
      text-decoration: none !important;
      transition: color var(--transition-fast) !important;
      display: inline-block !important;
  }
  
  h3.wp-block-heading a:hover {
      color: var(--brand-orange) !important;
  }
  
  /* Article descriptions */
  h3.wp-block-heading+p {
      color: var(--text-secondary) !important;
      line-height: 1.6 !important;
      margin-bottom: var(--spacing-lg) !important;
  }
  
  /* Subtle divider between articles */
  h3.wp-block-heading+p::after {
      content: '';
      display: block;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, var(--border-light) 100%, transparent 100%);
      margin-top: var(--spacing-lg);
  }
  
  /* Remove divider from last article */
  main.wp-block-group p:last-of-type::after {
      display: none;
  }
  
  /* =================================================================
           8. CONTENT STYLING
           ================================================================= */
  main.wp-block-group {
      background: var(--text-light) !important;
  }
  
  
  
  /* Lists */
  .wp-block-list li {
      margin-bottom: 0.75rem !important;
      line-height: 1.6 !important;
      color: var(--text-secondary) !important;
  }
  
  .wp-block-list li::marker {
      color: var(--brand-orange) !important;
  }
  
  /* Headings */
  h2.wp-block-heading {
      color: var(--brand-dark-alt) !important;
      margin-top: 4rem !important;
      margin-bottom: 1.5rem !important;
      padding-bottom: 0.5rem !important;
      border-bottom: 2px solid var(--brand-orange) !important;
      font-weight: 700 !important;
  }
  
  h3.wp-block-heading {
      color: var(--text-secondary) !important;
      margin-top: 2.5rem !important;
      margin-bottom: 1rem !important;
      font-weight: 600 !important;
  }
  
  h4.wp-block-heading {
      color: var(--text-secondary) !important;
      margin-top: 2rem !important;
      margin-bottom: 0.75rem !important;
      font-weight: 600 !important;
  }
  
  /* Links */
  .entry-content a:not(.wp-block-button__link) {
      color: var(--brand-orange) !important;
      text-decoration: underline !important;
      font-weight: 500 !important;
      transition: color var(--transition-fast) !important;
  }
  
  .entry-content a:not(.wp-block-button__link):hover {
      color: var(--brand-orange-dark) !important;
  }
  
  /* Spacing fixes */
  .entry-header {
      margin-bottom: 0 !important;
  }
  
  .entry-content>*:first-child {
      margin-top: 0 !important;
  }
  
  .has-large-font-size:first-child {
      margin-top: 0.5rem !important;
      margin-bottom: 2.5rem !important;
  }
  
  .has-large-font-size+.wp-block-separator {
      margin-top: 2rem !important;
  }
  
  /* =================================================================
           9. SERVICE CARDS
           ================================================================= */
  .has-ti-bg-alt-background-color .wp-block-columns .wp-block-column {
      background: var(--text-light) !important;
      border-radius: var(--radius-lg) !important;
      padding: var(--spacing-lg) 32px !important;
      box-shadow: var(--shadow-lg) !important;
      transition: all var(--transition-normal) !important;
      position: relative !important;
      overflow: hidden !important;
      margin-bottom: 0 !important;
  }
  
  /* Top accent line */
  .has-ti-bg-alt-background-color .wp-block-columns .wp-block-column::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--brand-orange) 0%, var(--brand-orange-light) 100%);
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  
  /* Hover effect */
  .has-ti-bg-alt-background-color .wp-block-columns .wp-block-column:hover {
      transform: translateY(-5px) !important;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12) !important;
  }
  
  /* Card spacing */
  .has-ti-bg-alt-background-color .wp-block-columns {
      gap: 32px !important;
  }
  
  /* Orange icon circles */
  .has-ti-bg-alt-background-color .wp-block-group[style*="#f4711d"] {
      background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-light) 100%) !important;
      box-shadow: 0 6px 20px rgba(244, 113, 29, 0.25) !important;
      border: none !important;
      margin-bottom: var(--spacing-md) !important;
  }
  
  /* Card text */
  .has-ti-bg-alt-background-color .wp-block-column .wp-block-heading {
      margin-top: var(--spacing-sm) !important;
      margin-bottom: 12px !important;
      font-weight: 600 !important;
  }
  
  .has-ti-bg-alt-background-color .wp-block-column p {
      color: var(--text-gray) !important;
      line-height: 1.6 !important;
      margin-bottom: 0 !important;
  }
  
  .has-ti-bg-alt-background-color .wp-block-column>.wp-block-group:first-child {
      background: transparent !important;
      padding: 0 !important;
  }
  
  /* Icon circle hover effect */
  .wp-block-group[style*="#f4711d"][style*="border-radius:100px"] {
      background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-light) 100%) !important;
      box-shadow: 0 6px 20px rgba(244, 113, 29, 0.3);
      transition: all var(--transition-normal);
  }
  
  .wp-block-group[style*="#f4711d"][style*="border-radius:100px"]:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 25px rgba(244, 113, 29, 0.4);
  }
  
  /* =================================================================
           10. BUTTONS
           ================================================================= */
  .wp-block-button__link {
      border-radius: var(--radius-full) !important;
      padding: var(--spacing-sm) 32px !important;
      font-weight: 600 !important;
      transition: all var(--transition-normal) !important;
      text-decoration: none !important;
  }
  
  .wp-block-button:not(.is-style-outline) .wp-block-button__link {
      background: var(--brand-orange) !important;
      color: var(--text-light) !important;
      box-shadow: 0 4px 15px rgba(244, 113, 29, 0.3);
  }
  
  .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
      background: var(--brand-orange-dark) !important;
      transform: translateY(-2px);
      box-shadow: 0 6px 50px rgba(244, 113, 29, 0.4);
  }
  
  /* =================================================================
           11. TESTIMONIALS
           ================================================================= */
  .wp-block-group[style*="#f4711d"] {
      background: var(--brand-dark-alt) !important;
      color: var(--text-light) !important;
  }
  
  .wp-block-group[style*="#f4711d"] .wp-block-columns .wp-block-column .wp-block-group {
      background: rgba(255, 255, 255, 0.08) !important;
      border-left: 4px solid var(--brand-orange);
      border-radius: var(--radius-md);
      padding: var(--spacing-md);
      backdrop-filter: blur(10px);
      transition: all var(--transition-normal);
  }
  
  .wp-block-group[style*="#f4711d"] .wp-block-columns .wp-block-column .wp-block-group:hover {
      background: rgba(255, 255, 255, 0.12) !important;
      transform: translateY(-3px);
  }
  
  /* =================================================================
           12. HERO SECTION
           ================================================================= */
  .wp-block-cover {
      position: relative;
  }
  
  .wp-block-cover::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(26, 26, 26, 0.8) 0%, rgba(45, 45, 45, 0.8) 50%);
  }
  
  .wp-block-cover__inner-container {
      position: relative;
      z-index: 2;
  }
  
  /* Hero title gradient - MODERN SYNTAX (fixes deprecated warning) */
  h1.wp-block-heading {
      background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-light) 100%);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
  }
  
  /* =================================================================
           13. FOOTER
           ================================================================= */
  .site-footer {
      background-color: var(--brand-dark) !important;
      padding: var(--spacing-lg) 0 20px 0 !important;
  }
  
  /* Footer text */
  .site-footer,
  .site-footer p,
  .site-footer span {
      color: var(--text-light) !important;
  }
  
  /* Footer headings */
  .site-footer h1,
  .site-footer h2,
  .site-footer h3,
  .site-footer h4,
  .site-footer h5,
  .site-footer h6 {
      color: var(--text-light) !important;
      margin-bottom: 20px !important;
  }
  
  /* Footer navigation links - consolidated */
  .site-footer .wp-block-navigation-item a,
  .site-footer .wp-block-navigation-item__content,
  .site-footer .wp-block-navigation-link,
  .site-footer .has-small-font-size a,
  .has-ti-fg-alt-color .wp-block-navigation-item a,
  .has-ti-bg-inv-background-color .wp-block-navigation-item a {
      color: var(--text-light) !important;
      text-decoration: none !important;
      transition: color var(--transition-normal) !important;
  }
  
  .site-footer .wp-block-navigation-item>a:hover {
      color: var(--brand-orange) !important;
  }
  
  /* Footer dropdown styling */
  .site-footer .wp-block-navigation__submenu-container {
      background: var(--text-light) !important;
      border-radius: var(--radius-sm) !important;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
      padding: var(--spacing-xs) 0 !important;
  }
  
  .site-footer .wp-block-navigation__submenu-container a,
  .site-footer .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
  .site-footer .wp-block-navigation__submenu-container .wp-block-navigation-link,
  .site-footer .wp-block-navigation__submenu-container span {
      color: var(--text-primary) !important;
      padding: var(--spacing-xs) var(--spacing-sm) !important;
      display: block !important;
  }
  
  .site-footer .wp-block-navigation__submenu-container a:hover {
      color: var(--brand-orange) !important;
      background: rgba(244, 113, 29, 0.1) !important;
  }
  
  /* Prevent orange styling in footer separators */
  footer hr.wp-block-separator {
      background: var(--border-dark) !important;
      max-width: 100% !important;
  }
  
  /* Copyright section */
  .site-footer .wp-block-group:last-child {
      border-top: 1px solid var(--border-dark) !important;
      margin-top: 30px !important;
      padding-top: 20px !important;
  }
  
  .site-footer .wp-block-group:last-child p {
      color: #9a9a9a !important;
      font-size: 0.9rem !important;
  }
  
  /* Social media icons */
  .site-footer .wp-social-link {
      color: var(--text-light) !important;
  }
  
  .site-footer .wp-social-link:hover {
      color: var(--brand-orange) !important;
  }
  
  /* Footer links */
  .site-footer a[href*="differentia"] {
      color: var(--brand-orange) !important;
      text-decoration: none !important;
  }
  
  .site-footer a[href*="differentia"]:hover {
      text-decoration: underline !important;
  }
  
  /* Footer columns */
  .site-footer .wp-block-columns {
      gap: var(--spacing-lg) !important;
  }
  
  .site-footer .wp-block-column {
      margin-bottom: 30px !important;
  }
  
  /* Mobile footer */
  @media (max-width: 768px) {
      .site-footer .wp-block-columns {
          flex-direction: column !important;
      }
  
      .site-footer .wp-block-column {
          margin-bottom: 20px !important;
      }
  
      .site-footer {
          padding: 30px 20px 15px 20px !important;
      }
  }
  
  /* =================================================================
           14. MODAL STYLES (WPFORMS) — Premium Redesign
           ================================================================= */
  .viseon-modal-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 999998;
      opacity: 0;
      transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

	/* Fix for 24px top gap on modal caused by WP flow layout */
.viseon-modal-overlay {
    margin-block-start: 0 !important;
}
  .viseon-modal-overlay.active {
      display: block;
      opacity: 1;
  }
  
  .viseon-modal {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, calc(-50% + 24px));
      width: 90%;
      max-width: 560px;
      max-height: 90vh;
      background: linear-gradient(160deg, #1e1e2e 0%, #15151f 100%);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 24px;
      box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5), 0 0 100px rgba(244, 113, 29, 0.06);
      z-index: 999999;
      opacity: 0;
      transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
          transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
      overflow: hidden;
  }
  
  .viseon-modal.active {
      display: block;
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
  }
  
  /* Decorative radial glow behind header */
  .viseon-modal::before {
      content: '';
      position: absolute;
      top: -60px;
      left: 50%;
      transform: translateX(-50%);
      width: 400px;
      height: 200px;
      border-radius: 50%;
      background: radial-gradient(ellipse, rgba(244, 113, 29, 0.15) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
  }
  
  .viseon-modal-header {
      padding: 32px 32px 20px;
      position: relative;
      z-index: 1;
      background: transparent;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  
  .viseon-modal-header h2 {
      color: #ffffff !important;
      font-size: 1.6rem !important;
      font-weight: 800 !important;
      margin: 0 !important;
      padding: 0 !important;
      border: none !important;
      letter-spacing: -0.02em;
      line-height: 1.3;
  }
  
  .viseon-modal-close {
      position: absolute;
      top: 24px;
      right: 24px;
      width: 36px;
      height: 36px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      color: #9ca3af;
      font-size: 20px;
      line-height: 1;
      padding: 0;
      z-index: 2;
  }
  
  .viseon-modal-close:hover {
      background: rgba(255, 255, 255, 0.12);
      color: #ffffff;
      transform: rotate(90deg);
      border-color: rgba(255, 255, 255, 0.2);
  }
  
  .viseon-modal-body {
      padding: 28px 32px 32px;
      overflow-y: auto;
      max-height: calc(90vh - 100px);
      position: relative;
      z-index: 1;
  }
  
  .viseon-modal-body p {
      color: #d1d5db !important;
      font-size: 1rem !important;
      line-height: 1.6 !important;
      margin-bottom: 1.25rem !important;
  }
  
  .viseon-modal-form-container {
      margin-top: 4px;
  }
  
  /* Modal trigger button */
  .viseon-modal-trigger {
      background: linear-gradient(135deg, #f4711d 0%, #ff9a56 100%) !important;
      color: #ffffff !important;
      border: none !important;
      border-radius: 999px !important;
      padding: 16px 32px !important;
      font-size: 1.05rem !important;
      font-weight: 700 !important;
      cursor: pointer !important;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
      box-shadow: 0 6px 24px rgba(244, 113, 29, 0.35) !important;
      display: inline-block !important;
      text-align: center !important;
      text-decoration: none !important;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
      letter-spacing: -0.01em;
  }
  
  .viseon-modal-trigger:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 10px 32px rgba(244, 113, 29, 0.45) !important;
      background: linear-gradient(135deg, #e0650f 0%, #f4711d 100%) !important;
  }
  
  /* Prevent body scroll when modal open */
  body.modal-open {
      overflow: hidden !important;
      position: fixed !important;
      width: 100% !important;
  }
  
  /* Mobile modal adjustments */
  @media (max-width: 768px) {
      .viseon-modal {
          width: 95%;
          max-width: 100%;
          border-radius: 20px;
      }
  
      .viseon-modal-header {
          padding: 24px 24px 16px;
      }
  
      .viseon-modal-header h2 {
          font-size: 1.35rem !important;
      }
  
      .viseon-modal-body {
          padding: 20px 24px 28px;
      }
  
      .viseon-modal-close {
          width: 32px;
          height: 32px;
          top: 20px;
          right: 20px;
          font-size: 18px;
      }
  
      .viseon-modal-trigger {
          padding: 14px 28px !important;
          font-size: 1rem !important;
      }
  }
  
  /* =================================================================
           15. WPFORMS OVERRIDES
           ================================================================= */
  .wpforms-confirmation-container,
  .wpforms-confirmation-container-full,
  #popmake-487 .wpforms-confirmation-container {
      background: transparent !important;
      border: none !important;
      padding: 0 !important;
  }
  
  .wpforms-confirmation-scroll {
      background: transparent !important;
  }
  
  /* =================================================================
           15B. POPUP MAKER + WPFORMS MOBILE FIX (POPUP #407)
           =================================================================
           ULTRA-SPECIFIC targeting to override Popup Maker inline styles
           ================================================================= */
  
  /* Mobile: Fix Popup Maker responsiveness */
  @media (max-width: 768px) {
  
      /* TARGET SPECIFIC POPUP: #pum-407 */
      #pum-407.pum-container,
      #pum-407.pum-container.pum-theme-396,
      #pum-407.pum-container.pum-theme-lightbox {
          padding: 20px 15px !important;
          width: 95% !important;
          max-width: 95% !important;
          margin-left: -47.5% !important;
          box-sizing: border-box !important;
      }
  
      /* Popup title - smaller on mobile */
      #pum-407 .pum-title {
          font-size: 1.5rem !important;
          line-height: 1.3 !important;
          margin-bottom: 15px !important;
      }
  
      /* Popup content - better spacing */
      #pum-407 .pum-content {
          font-size: 0.938rem !important;
          line-height: 1.5 !important;
      }
  
      /* Close button - touch-friendly */
      #pum-407 .pum-content+.pum-close {
          height: 36px !important;
          width: 36px !important;
          font-size: 24px !important;
          line-height: 32px !important;
          right: 8px !important;
          top: 8px !important;
      }
  
      /* WPForms inside THIS popup - mobile optimized */
      #pum-407 .wpforms-container {
          padding: 0 !important;
      }
  
      #pum-407 .wpforms-form .wpforms-field {
          margin-bottom: 15px !important;
      }
  
      #pum-407 .wpforms-form label.wpforms-field-label {
          font-size: 0.938rem !important;
          margin-bottom: 6px !important;
          display: block !important;
      }
  
      #pum-407 .wpforms-form input[type="text"],
      #pum-407 .wpforms-form input[type="email"],
      #pum-407 .wpforms-form input[type="tel"],
      #pum-407 .wpforms-form input[type="url"],
      #pum-407 .wpforms-form input[type="number"],
      #pum-407 .wpforms-form textarea,
      #pum-407 .wpforms-form select {
          width: 100% !important;
          max-width: 100% !important;
          padding: 12px !important;
          font-size: 16px !important;
          line-height: 1.5 !important;
          border-radius: 6px !important;
          box-sizing: border-box !important;
          margin: 0 !important;
      }
  
      #pum-407 .wpforms-form textarea {
          min-height: 100px !important;
          resize: vertical !important;
      }
  
      #pum-407 .wpforms-form button[type="submit"],
      #pum-407 .wpforms-form .wpforms-submit,
      #pum-407 .wpforms-form .wpforms-submit-container button {
          width: 100% !important;
          max-width: 100% !important;
          padding: 14px 20px !important;
          font-size: 1.063rem !important;
          margin: 10px 0 0 0 !important;
          box-sizing: border-box !important;
          display: block !important;
      }
  
      /* Fix WPForms description text */
      #pum-407 .wpforms-form .wpforms-field-description,
      #pum-407 .wpforms-form .wpforms-field-sublabel {
          font-size: 0.813rem !important;
          margin-top: 5px !important;
          line-height: 1.4 !important;
      }
  
      /* Fix checkbox/radio fields */
      #pum-407 .wpforms-form .wpforms-field-checkbox ul,
      #pum-407 .wpforms-form .wpforms-field-radio ul {
          margin: 0 !important;
          padding: 0 !important;
      }
  
      #pum-407 .wpforms-form .wpforms-field-checkbox ul li,
      #pum-407 .wpforms-form .wpforms-field-radio ul li {
          margin: 10px 0 !important;
          list-style: none !important;
      }
  
      #pum-407 .wpforms-form .wpforms-field-checkbox label,
      #pum-407 .wpforms-form .wpforms-field-radio label {
          font-size: 0.938rem !important;
          padding-left: 8px !important;
          display: inline-block !important;
      }
  
      /* Scrollable content if form is long */
      #pum-407.pum-scrollable .pum-content {
          max-height: 75vh !important;
          overflow-y: auto !important;
          overflow-x: hidden !important;
          -webkit-overflow-scrolling: touch !important;
      }
  
      /* Fix field container widths */
      #pum-407 .wpforms-form .wpforms-field-container {
          max-width: 100% !important;
      }
  
      #pum-407 .wpforms-form .wpforms-one-half,
      #pum-407 .wpforms-form .wpforms-one-third,
      #pum-407 .wpforms-form .wpforms-two-thirds {
          width: 100% !important;
          float: none !important;
          margin-left: 0 !important;
          margin-right: 0 !important;
      }
  }
  
  /* Extra small screens (< 480px) */
  @media (max-width: 480px) {
  
      #pum-407.pum-container,
      #pum-407.pum-container.pum-theme-396,
      #pum-407.pum-container.pum-theme-lightbox {
          padding: 15px 12px !important;
          width: 96% !important;
          margin-left: -48% !important;
      }
  
      #pum-407 .pum-title {
          font-size: 1.25rem !important;
          line-height: 1.2 !important;
      }
  
      #pum-407 .wpforms-form input[type="text"],
      #pum-407 .wpforms-form input[type="email"],
      #pum-407 .wpforms-form input[type="tel"],
      #pum-407 .wpforms-form input[type="url"],
      #pum-407 .wpforms-form input[type="number"],
      #pum-407 .wpforms-form textarea,
      #pum-407 .wpforms-form select {
          padding: 10px !important;
          font-size: 16px !important;
      }
  
      #pum-407 .wpforms-form button[type="submit"] {
          padding: 12px 16px !important;
          font-size: 1rem !important;
      }
  }
  
  /* =================================================================
           15C. CUSTOM MODAL SYSTEM - MOBILE ENHANCED
           =================================================================
           Instructions: See implementation guide below
           ================================================================= */
  
  /* WPForms Styling Inside Modal - Fix black on black issue */
  .viseon-modal .wpforms-container {
      background: transparent !important;
  }
  
  .viseon-modal .wpforms-form {
      background: transparent !important;
  }
  
  /* Form field labels - WHITE text */
  .viseon-modal .wpforms-form label.wpforms-field-label,
  .viseon-modal .wpforms-form .wpforms-field-label {
      color: #ffffff !important;
      font-weight: 600 !important;
      margin-bottom: 8px !important;
      font-size: 0.938rem !important;
  }
  
  /* Form field sublabels and descriptions */
  .viseon-modal .wpforms-form .wpforms-field-sublabel,
  .viseon-modal .wpforms-form .wpforms-field-description {
      color: #e2e8f0 !important;
      font-size: 0.813rem !important;
  }
  
  /* Input fields — dark translucent bg with rounded corners */
  .viseon-modal .wpforms-form input[type="text"],
  .viseon-modal .wpforms-form input[type="email"],
  .viseon-modal .wpforms-form input[type="tel"],
  .viseon-modal .wpforms-form input[type="url"],
  .viseon-modal .wpforms-form input[type="number"],
  .viseon-modal .wpforms-form input[type="date"],
  .viseon-modal .wpforms-form textarea,
  .viseon-modal .wpforms-form select {
      background: rgba(255, 255, 255, 0.06) !important;
      color: #f3f4f6 !important;
      border: 1px solid rgba(255, 255, 255, 0.12) !important;
      border-radius: 12px !important;
      padding: 14px 16px !important;
      font-size: 0.938rem !important;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
  }
  
  /* Input focus state */
  .viseon-modal .wpforms-form input:focus,
  .viseon-modal .wpforms-form textarea:focus,
  .viseon-modal .wpforms-form select:focus {
      border-color: rgba(244, 113, 29, 0.6) !important;
      outline: none !important;
      box-shadow: 0 0 0 3px rgba(244, 113, 29, 0.1) !important;
      background: rgba(255, 255, 255, 0.08) !important;
  }
  
  /* Placeholder text */
  .viseon-modal .wpforms-form input::placeholder,
  .viseon-modal .wpforms-form textarea::placeholder {
      color: #6b7280 !important;
      opacity: 1 !important;
  }
  
  /* Submit button — full-width pill with glow */
  .viseon-modal .wpforms-form button[type="submit"],
  .viseon-modal .wpforms-form .wpforms-submit,
  .viseon-modal .wpforms-form .wpforms-submit-container button {
      background: linear-gradient(135deg, #f4711d 0%, #ff9a56 100%) !important;
      color: #ffffff !important;
      border: none !important;
      border-radius: 999px !important;
      padding: 16px 32px !important;
      font-size: 1.05rem !important;
      font-weight: 700 !important;
      cursor: pointer !important;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
      box-shadow: 0 6px 24px rgba(244, 113, 29, 0.3) !important;
      text-transform: none !important;
      width: 100% !important;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
      letter-spacing: -0.01em;
  }
  
  .viseon-modal .wpforms-form .wpforms-submit-container {
      text-align: center !important;
      padding-top: 8px !important;
  }
  
  .viseon-modal .wpforms-form button[type="submit"]:hover,
  .viseon-modal .wpforms-form .wpforms-submit:hover {
      background: linear-gradient(135deg, #e0650f 0%, #f4711d 100%) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 10px 32px rgba(244, 113, 29, 0.45) !important;
  }
  
  /* Checkbox and Radio labels */
  .viseon-modal .wpforms-form .wpforms-field-checkbox label,
  .viseon-modal .wpforms-form .wpforms-field-radio label {
      color: #e2e8f0 !important;
      font-weight: 400 !important;
  }
  
  /* Required field indicator */
  .viseon-modal .wpforms-form .wpforms-required-label {
      color: #fca5a5 !important;
  }
  
  /* Error messages */
  .viseon-modal .wpforms-form .wpforms-error {
      color: #fca5a5 !important;
      background: rgba(252, 165, 165, 0.1) !important;
      border-color: #fca5a5 !important;
  }
  
  /* Success message */
  .viseon-modal .wpforms-confirmation-container-full {
      background: rgba(16, 185, 129, 0.08) !important;
      border: 1px solid rgba(16, 185, 129, 0.3) !important;
      color: #d1fae5 !important;
      padding: 24px !important;
      border-radius: 16px !important;
      text-align: center !important;
  }
  
  /* Field containers */
  .viseon-modal .wpforms-form .wpforms-field {
      margin-bottom: 18px !important;
  }
  
  /* Additional mobile fixes for .viseon-modal */
  @media (max-width: 768px) {
  
      /* Fix modal centering - compensate for right-side gap */
      .viseon-modal {
          width: 95% !important;
          max-width: 95% !important;
          max-height: 85vh !important;
          left: 50% !important;
          right: auto !important;
          margin-left: 0 !important;
          margin-right: 0 !important;
      }
  
      /* Ensure transform is correct on open */
      .viseon-modal.active {
          transform: translate(-50%, -50%) scale(1) !important;
      }
  
      /* Lock body scroll and prevent width issues */
      body:has(.viseon-modal.active) {
          overflow: hidden !important;
          position: fixed !important;
          width: 100% !important;
      }
  
      .viseon-modal-header {
          padding: 20px 15px 15px !important;
      }
  
      .viseon-modal-header h2 {
          font-size: 1.4rem !important;
      }
  
      .viseon-modal-body {
          padding: 20px 15px !important;
          max-height: calc(85vh - 100px) !important;
      }
  
      .viseon-modal-close {
          top: 15px !important;
          right: 15px !important;
          width: 36px !important;
          height: 36px !important;
          font-size: 22px !important;
      }
  
      /* WPForms inside custom modal */
      .viseon-modal .wpforms-form input[type="text"],
      .viseon-modal .wpforms-form input[type="email"],
      .viseon-modal .wpforms-form input[type="tel"],
      .viseon-modal .wpforms-form textarea,
      .viseon-modal .wpforms-form select {
          width: 100% !important;
          padding: 12px !important;
          font-size: 16px !important;
          box-sizing: border-box !important;
      }
  
      .viseon-modal .wpforms-form button[type="submit"] {
          width: 100% !important;
          padding: 14px 20px !important;
          font-size: 1rem !important;
          box-sizing: border-box !important;
      }
  
      .viseon-modal .wpforms-form .wpforms-one-half,
      .viseon-modal .wpforms-form .wpforms-one-third,
      .viseon-modal .wpforms-form .wpforms-two-thirds {
          width: 100% !important;
          float: none !important;
          margin: 0 0 15px 0 !important;
          padding-left: 0 !important;
          padding-right: 0 !important;
      }
  
      /* Fix WPForms field row alignment */
      .viseon-modal .wpforms-form .wpforms-field-row-block {
          margin-left: 0 !important;
          margin-right: 0 !important;
          padding-left: 0 !important;
          padding-right: 0 !important;
      }
  }
  
  @media (max-width: 480px) {
      .viseon-modal {
          width: 98% !important;
      }
  
      .viseon-modal-header h2 {
          font-size: 1.2rem !important;
      }
  
      .viseon-modal-body {
          padding: 15px 12px !important;
      }
  }
  
  /* =================================================================
           16. UTILITY CLASSES & ACCESSIBILITY
           ================================================================= */
  html {
      scroll-behavior: smooth;
  }
  
  .screen-reader-text {
      clip: rect(1px, 1px, 1px, 1px);
      clip-path: inset(50%);
      position: absolute !important;
      height: 1px;
      width: 1px;
      overflow: hidden;
      word-wrap: normal !important;
  }
  
  /* Skip to content link for keyboard navigation */
  .skip-link:focus {
      clip: auto;
      clip-path: none;
      height: auto;
      width: auto;
      display: block;
      background: var(--brand-orange);
      color: var(--text-light);
      padding: 15px 23px 14px;
      text-decoration: none;
      z-index: 100000;
  }
  
  /* =================================================================
           17. MOBILE RESPONSIVE ADJUSTMENTS
           ================================================================= */
  @media (max-width: 768px) {
      :root {
          --spacing-lg: 32px;
          --spacing-xl: 48px;
      }
  
      /* Remove all side padding/borders for full-width mobile */
      .wp-site-blocks {
          padding-left: 0 ;
          padding-right: 0 ;
      }
  
      /* Main content area - minimal padding */
      main.wp-block-group {
          padding-left: 0 !important;
          padding-right: 0 !important;
      }
  
      /* Content sections - reduce padding significantly */
      .wp-block-group.alignfull.is-layout-constrained {
          padding-left: 16px !important;
          padding-right: 16px !important;
      }
  
      .wp-block-columns {
          flex-direction: column;
      }
  
      .wp-block-column {
          margin-bottom: var(--spacing-md);
      }
  
      h1.wp-block-heading {
          font-size: 2rem !important;
      }
  
      h3.wp-block-heading {
          font-size: 1.4rem !important;
      }
  
      .entry-header {
          padding: var(--spacing-lg) 16px 35px !important;
          margin: 0 0 35px 0 !important;
      }
  
      .entry-content {
          padding: 0 16px !important;
      }
  
      /* Override page title sections mobile padding */
      body.page main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:first-child {
          padding: 50px 16px 30px !important;
      }
  
      body.page main.wp-block-group>.wp-block-group.alignfull.is-layout-constrained:nth-child(2) {
          padding: 30px 16px 50px !important;
      }
  
      /* Full-width elements should have minimal padding */
      .alignfull {
          margin-left: 0 !important;
          margin-right: 0 !important;
      }
  }
  
  /* =================================================================
           18. PERFORMANCE OPTIMIZATIONS
           ================================================================= */
  
  /* Reduce motion for users who prefer it */
  @media (prefers-reduced-motion: reduce) {
  
      *,
      *::before,
      *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
          scroll-behavior: auto !important;
      }
  }
  
  /* GPU acceleration for smooth animations */
  .wp-block-navigation-item a,
  .wp-block-button__link,
  .viseon-modal-trigger,
  header.wp-block-template-part {
      will-change: transform;
  }
  
  /* =================================================================
           HOMEPAGE - DISCOVER/DESIGN/DEPLOY ICON CARDS (Top 3 Cards Section)
           ================================================================= */
  
  /* Target only the top section with gray background - NOT testimonials */
  .has-ti-bg-alt-background-color>.wp-block-columns .wp-block-group[style*="background-color:#f4711d"] {
      border-radius: 12px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 70px !important;
      height: 70px !important;
      padding: 0 !important;
      overflow: hidden !important;
  }
  
  /* Style the figure wrapper inside orange square */
  .has-ti-bg-alt-background-color>.wp-block-columns .wp-block-group[style*="background-color:#f4711d"] .wp-block-image {
      margin: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 100% !important;
      height: 100% !important;
  }
  
  /* Image styling for top cards only */
  .has-ti-bg-alt-background-color>.wp-block-columns .wp-block-group[style*="background-color:#f4711d"] .wp-block-image img {
      width: 50px !important;
      height: 50px !important;
      border-radius: 6px !important;
      border: 2px solid #ffffff !important;
      padding: 2px !important;
      background: #ffffff !important;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
      object-fit: contain !important;
  }
  
  /* Hover effect for top icon cards */
  .has-ti-bg-alt-background-color>.wp-block-columns .wp-block-group[style*="background-color:#f4711d"]:hover {
      transform: scale(1.05) !important;
      transition: transform 0.3s ease !important;
      box-shadow: 0 4px 12px rgba(244, 113, 29, 0.3) !important;
  }
  
  /* Mobile responsive for top cards */
  @media (max-width: 768px) {
      .has-ti-bg-alt-background-color>.wp-block-columns .wp-block-group[style*="background-color:#f4711d"] {
          width: 70px !important;
          height: 70px !important;
      }
  
      .has-ti-bg-alt-background-color>.wp-block-columns .wp-block-group[style*="background-color:#f4711d"] .wp-block-image img {
          width: 40px !important;
          height: 40px !important;
      }
  }
  
  /* =================================================================
           TESTIMONIALS SECTION - CARD STYLING
           ================================================================= */
  
  /* Style the testimonial cards on the orange background - ONLY in #testimonials section */
  #testimonials .wp-block-column .wp-block-group {
      background: #ffffff !important;
      padding: 32px 24px !important;
      border-radius: 12px !important;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
      transition: transform 0.3s ease, box-shadow 0.3s ease !important;
      height: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 16px !important;
  }
  
  /* Hover effect for testimonial cards */
  #testimonials .wp-block-column .wp-block-group:hover {
      transform: translateY(-4px) !important;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25) !important;
  }
  
  /* Style testimonial images - keep them as is, with rounded corners */
  #testimonials .wp-block-image {
      margin: 0 0 16px 0 !important;
  }
  
  #testimonials .wp-block-image img {
      width: auto !important;
      height: 80px !important;
      max-width: 160px !important;
      object-fit: contain !important;
      border-radius: 8px !important;
      border: 3px solid var(--brand-orange) !important;
      background: #ffffff !important;
      padding: 4px !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Testimonial text styling */
  #testimonials .wp-block-group p {
      color: var(--text-primary) !important;
      line-height: 1.6 !important;
      margin: 0 0 12px 0 !important;
  }
  
  /* Author attribution styling */
  #testimonials .wp-block-group p.has-small-font-size {
      color: var(--text-secondary) !important;
      font-style: italic !important;
      margin-top: auto !important;
      margin-bottom: 0 !important;
  }
  
  /* Equal height columns in testimonials */
  #testimonials .wp-block-columns {
      align-items: stretch !important;
  }
  
  #testimonials .wp-block-column {
      display: flex !important;
  }
  
  /* Mobile responsive adjustments for testimonials */
  @media (max-width: 768px) {
      #testimonials .wp-block-column .wp-block-group {
          padding: 24px 20px !important;
      }
  
      #testimonials .wp-block-image img {
          width: 60px !important;
      }
  }
  
  /* =================================================================
           DISCOVER/DESIGN/DEPLOY CARDS - ENHANCED INTERACTIONS
           ================================================================= */
  
  /* Add hover lift effect to card columns */
  .has-ti-bg-alt-background-color .wp-block-column {
      transition: transform 0.3s ease !important;
  }
  
  .has-ti-bg-alt-background-color .wp-block-column:hover {
      transform: translateY(-4px) !important;
  }
  
  /* Enhanced heading styling */
  .has-ti-bg-alt-background-color h3 {
      font-size: 1.5rem !important;
      font-weight: 700 !important;
      margin-bottom: 16px !important;
      margin-top: 24px !important;
      color: var(--text-primary) !important;
  }
  
  /* Better paragraph styling */
  .has-ti-bg-alt-background-color p {
      font-size: 1rem !important;
      line-height: 1.7 !important;
      color: var(--text-secondary) !important;
  }
  
  /* =================================================================
           "SUCCESS IS A TEAM EFFORT" HEADER FIX - Multiple Selectors
           ================================================================= */
  
  /* Target h2 with orange inline color on any dark background */
  h2.wp-block-heading.has-text-color.has-text-align-center[style*="color:#f4711d"],
  h2.wp-block-heading[style*="color:#f4711d"],
  .wp-block-group h2[style*="color:#f4711d"] {
      color: #ffffff !important;
      font-size: 2.5rem !important;
      font-weight: 700 !important;
      text-shadow: 0 2px 12px rgba(244, 113, 29, 0.6) !important;
      margin-bottom: 40px !important;
  }
  
  /* Additional targeting for dark sections specifically */
  .wp-block-group[style*="background:linear-gradient"] h2,
  .wp-block-group[style*="background-color:#"] h2.has-text-color {
      color: #ffffff !important;
  }
  
  
  .post-password-form input[type="submit"] {
      margin-top: 8px;
      background-color: #f4711d !important;
  }



  
  
  /* iOS-specific fixes for white bar when keyboard appears */
@supports (-webkit-touch-callout: none) {

    /* Keep native flow but prevent side bleed */
    html,
    body {
        height: auto !important;
        min-height: 100% !important;
        position: static !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background-color: #ffffff !important;
    }

    textarea,
    select {
        font-size: 16px !important;
    }

    form {
        margin-bottom: 50px !important;
    }
}


  
  /* =================================================================
           END OF CUSTOM CSS
           ================================================================= */
  /* =================================================================
           TESTIMONIALS CAROUSEL
           ================================================================= */
  
  /* Carousel Container - Target the testimonials section */
  #testimonials .wp-block-columns {
      display: flex !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      scroll-behavior: smooth !important;
      scroll-snap-type: x mandatory !important;
      -webkit-overflow-scrolling: touch !important;
      gap: 24px !important;
      padding: 20px 10px 40px 10px !important;
      margin: 0 -10px !important;
  
      /* Hide scrollbar but keep functionality */
      scrollbar-width: none !important;
      -ms-overflow-style: none !important;
  }
  
  #testimonials .wp-block-columns::-webkit-scrollbar {
      display: none !important;
  }
  
  /* Individual Testimonial Cards */
  #testimonials .wp-block-column {
      flex: 0 0 calc(33.333% - 16px) !important;
      min-width: 320px !important;
      max-width: 420px !important;
      scroll-snap-align: start !important;
      background: #ffffff !important;
      border-radius: 12px !important;
      padding: 28px 24px !important;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
      transition: all 0.3s ease !important;
      position: relative !important;
      overflow: hidden !important;
      border-left: 4px solid #f4711d !important;
  }
  
  #testimonials .wp-block-column::before {
      display: none !important;
  }
  
  #testimonials .wp-block-column:hover {
      transform: translateY(-4px) !important;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18) !important;
  }
  
  /* Inner group styling - clean, no decorative elements */
  #testimonials .wp-block-column .wp-block-group {
      background: transparent !important;
      position: relative;
  }
  
  /* Company logos */
  #testimonials .wp-block-column figure.wp-block-image {
      margin-bottom: 20px !important;
  }
  
  #testimonials .wp-block-column figure.wp-block-image img {
      max-height: 80px !important;
      width: auto !important;
      object-fit: contain !important;
      border-radius: 12px !important;
      transition: transform 0.3s ease !important;
  }
  
  #testimonials .wp-block-column:hover figure.wp-block-image img {
      transform: scale(1.05) !important;
  }
  
  /* Testimonial text */
  #testimonials .wp-block-column p {
      color: #333 !important;
      font-size: 1rem !important;
      line-height: 1.7 !important;
      margin-bottom: 16px !important;
      position: relative;
      z-index: 1;
  }
  
  #testimonials .wp-block-column p.has-small-font-size {
      color: #f4711d !important;
      font-size: 0.9rem !important;
      font-weight: 600 !important;
      margin-top: 20px !important;
      padding-top: 16px !important;
      border-top: 1px solid rgba(244, 113, 29, 0.2) !important;
  }
  
  #testimonials .wp-block-column p.has-small-font-size a {
      color: #f4711d !important;
      text-decoration: none !important;
      transition: color 0.3s ease !important;
  }
  
  #testimonials .wp-block-column p.has-small-font-size a:hover {
      color: #e55a0d !important;
      text-decoration: underline !important;
  }
  
  /* Carousel Navigation Container */
  #testimonials .wp-block-group.alignwide {
      position: relative !important;
  }
  
  /* Navigation Arrows */
  .testimonial-carousel-nav {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 16px;
      margin-top: 32px;
      padding: 0 20px;
  }
  
  .testimonial-nav-btn {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
      border: 2px solid rgba(255, 255, 255, 0.3);
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
  }
  
  .testimonial-nav-btn:hover {
      background: rgba(255, 255, 255, 0.25);
      border-color: white;
      transform: scale(1.1);
  }
  
  .testimonial-nav-btn:active {
      transform: scale(0.95);
  }
  
  .testimonial-nav-btn svg {
      width: 24px;
      height: 24px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
  }
  
  /* Pagination Dots */
  .testimonial-dots {
      display: flex;
      gap: 10px;
      align-items: center;
  }
  
  .testimonial-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      padding: 0;
  }
  
  .testimonial-dot:hover {
      background: rgba(255, 255, 255, 0.5);
      transform: scale(1.2);
  }
  
  .testimonial-dot.active {
      background: white;
      transform: scale(1.3);
      box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
  }
  
  /* Mobile Responsive */
  @media (max-width: 1024px) {
      #testimonials .wp-block-column {
          flex: 0 0 calc(50% - 12px) !important;
          min-width: 300px !important;
      }
  }
  
  @media (max-width: 768px) {
      #testimonials .wp-block-column {
          flex: 0 0 calc(100% - 20px) !important;
          min-width: 280px !important;
          max-width: 100% !important;
          margin: 0 auto !important;
      }
  
      #testimonials .wp-block-columns {
          gap: 16px !important;
          padding: 16px 20px 50px 20px !important;
      }
  
      .testimonial-carousel-nav {
          margin-top: 24px;
      }
  
      .testimonial-nav-btn {
          width: 44px;
          height: 44px;
      }
  }
  
  /* Touch feedback for mobile */
  @media (hover: none) {
      #testimonials .wp-block-column:active {
          transform: scale(0.98) !important;
      }
  }
  
  /* =================================================================
           MOBILE CAROUSEL FIX - One card at a time
           ================================================================= */
  
  @media (max-width: 768px) {
  
      /* Force horizontal carousel on mobile - ONE CARD AT A TIME */
      #testimonials .wp-block-columns {
          display: flex !important;
          flex-direction: row !important;
          flex-wrap: nowrap !important;
          overflow-x: auto !important;
          overflow-y: hidden !important;
          scroll-snap-type: x mandatory !important;
          -webkit-overflow-scrolling: touch !important;
          gap: 0 !important;
          padding: 20px 0 60px 0 !important;
          margin: 0 !important;
      }
  
      #testimonials .wp-block-column {
          flex: 0 0 calc(100vw - 48px) !important;
          width: calc(100vw - 48px) !important;
          min-width: calc(100vw - 48px) !important;
          max-width: calc(100vw - 48px) !important;
          margin: 0 24px !important;
          scroll-snap-align: center !important;
          scroll-snap-stop: always !important;
      }
  
      /* First card needs left margin */
      #testimonials .wp-block-column:first-child {
          margin-left: 24px !important;
      }
  
      /* Last card needs right margin */
      #testimonials .wp-block-column:last-child {
          margin-right: 24px !important;
      }
  }