.elementor-kit-2885{--e-global-color-vamtam_accent_1:#F7F7F7;--e-global-color-vamtam_accent_2:#090402;--e-global-color-vamtam_accent_3:#F52001;--e-global-color-vamtam_accent_4:#000000B3;--e-global-color-vamtam_accent_5:#FFFFFF;--e-global-color-vamtam_accent_6:#000000;--e-global-color-vamtam_accent_7:#00000033;--e-global-color-vamtam_accent_8:#FFFFFF4D;--e-global-color-vamtam_sticky_header_bg_color:#FFFFFF;--e-global-typography-vamtam_primary_font-font-family:"DM Sans";--e-global-typography-vamtam_primary_font-font-size:15px;--e-global-typography-vamtam_primary_font-font-weight:400;--e-global-typography-vamtam_primary_font-text-transform:none;--e-global-typography-vamtam_primary_font-font-style:normal;--e-global-typography-vamtam_primary_font-text-decoration:none;--e-global-typography-vamtam_primary_font-line-height:1.5em;--e-global-typography-vamtam_h1-font-family:"Urbanist";--e-global-typography-vamtam_h1-font-size:60px;--e-global-typography-vamtam_h1-font-weight:500;--e-global-typography-vamtam_h1-text-transform:none;--e-global-typography-vamtam_h1-font-style:normal;--e-global-typography-vamtam_h1-text-decoration:none;--e-global-typography-vamtam_h1-line-height:1.1em;--e-global-typography-vamtam_h2-font-family:"Urbanist";--e-global-typography-vamtam_h2-font-size:40px;--e-global-typography-vamtam_h2-font-weight:500;--e-global-typography-vamtam_h2-text-transform:none;--e-global-typography-vamtam_h2-font-style:normal;--e-global-typography-vamtam_h2-text-decoration:none;--e-global-typography-vamtam_h2-line-height:1.35em;--e-global-typography-vamtam_h3-font-family:"Urbanist";--e-global-typography-vamtam_h3-font-size:32px;--e-global-typography-vamtam_h3-font-weight:400;--e-global-typography-vamtam_h3-text-transform:none;--e-global-typography-vamtam_h3-font-style:normal;--e-global-typography-vamtam_h3-text-decoration:none;--e-global-typography-vamtam_h3-line-height:1.25em;--e-global-typography-vamtam_h4-font-family:"Urbanist";--e-global-typography-vamtam_h4-font-size:24px;--e-global-typography-vamtam_h4-font-weight:500;--e-global-typography-vamtam_h4-text-transform:none;--e-global-typography-vamtam_h4-line-height:1.3em;--e-global-typography-vamtam_h5-font-family:"Urbanist";--e-global-typography-vamtam_h5-font-size:20px;--e-global-typography-vamtam_h5-font-weight:500;--e-global-typography-vamtam_h5-text-transform:none;--e-global-typography-vamtam_h5-font-style:normal;--e-global-typography-vamtam_h5-text-decoration:none;--e-global-typography-vamtam_h5-line-height:1.3em;--e-global-typography-vamtam_h6-font-family:"Urbanist";--e-global-typography-vamtam_h6-font-size:12px;--e-global-typography-vamtam_h6-font-weight:500;--e-global-typography-vamtam_h6-text-transform:uppercase;--e-global-typography-vamtam_h6-font-style:normal;--e-global-typography-vamtam_h6-text-decoration:none;--e-global-typography-vamtam_h6-line-height:1.3em;}.elementor-kit-2885 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-2885{--e-global-typography-vamtam_h1-font-size:34px;--e-global-typography-vamtam_h2-font-size:29px;--e-global-typography-vamtam_h3-font-size:24px;--e-global-typography-vamtam_h4-font-size:20px;--e-global-typography-vamtam_h5-font-size:18px;--e-global-typography-vamtam_h6-font-size:12px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-2885{--e-global-typography-vamtam_primary_font-font-size:16px;--e-global-typography-vamtam_primary_font-line-height:1.5em;--e-global-typography-vamtam_h1-font-size:26px;--e-global-typography-vamtam_h2-font-size:23px;--e-global-typography-vamtam_h2-line-height:1.2em;--e-global-typography-vamtam_h3-font-size:21px;--e-global-typography-vamtam_h4-font-size:19px;--e-global-typography-vamtam_h6-line-height:1em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */<!-- SOOF GLOBAL CONFIG (FONTS, VARS, MODAL) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Outfit:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">

<div id="soof-global-scope">
<style>
/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL VARIABLES & UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --soof-navy: #050b14;
  --soof-navy-light: #0f1c30;
  --soof-accent-blue: #3b82f6;
  --soof-accent-cyan: #06b6d4;
  --soof-accent-orange: #f97316;
  --soof-text-white: #ffffff;
  --soof-text-body: #94a3b8;
  --soof-text-muted: #64748b;
  
  --soof-glass-bg: rgba(255, 255, 255, 0.03);
  --soof-glass-border: rgba(255, 255, 255, 0.08);
  
  --soof-font-serif: 'DM Serif Display', serif;
  --soof-font-sans: 'Outfit', sans-serif;
  --soof-font-mono: 'Space Mono', monospace;
  
  --soof-radius-md: 16px;
  --soof-radius-lg: 24px;
}

/* Base Reset for Soof Sections */
.soof-section-wrapper {
  font-family: var(--soof-font-sans);
  background-color: var(--soof-navy);
  color: var(--soof-text-body);
  line-height: 1.6;
  font-size: 16px;
  width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.soof-section-wrapper * { box-sizing: border-box; }

/* Global Utilities */
.soof-container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; position: relative; }
.soof-section { padding: clamp(4rem, 8vw, 8rem) 0; position: relative; }

.soof-eyebrow {
  font-family: var(--soof-font-mono); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.15em; color: var(--soof-accent-cyan); margin-bottom: 1rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.soof-eyebrow::before { content: ''; width: 20px; height: 1px; background: currentColor; }

/* Buttons */
.soof-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 2rem; border-radius: 100px; font-weight: 600; font-size: 1rem;
  cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; 
  border: none; text-decoration: none; line-height: 1;
}
.soof-btn:focus-visible { outline: 2px solid var(--soof-accent-cyan); outline-offset: 2px; }

.soof-btn-primary {
  background: linear-gradient(135deg, var(--soof-accent-orange) 0%, #ea580c 100%);
  color: white; box-shadow: 0 10px 30px -10px rgba(249, 115, 22, 0.5);
}
.soof-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 15px 35px -10px rgba(249, 115, 22, 0.6); }

.soof-btn-secondary {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: white;
  backdrop-filter: blur(10px);
}
.soof-btn-secondary:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }

/* Video Modal Styles */
.soof-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
  backdrop-filter: blur(5px);
}
.soof-modal-overlay.active { opacity: 1; pointer-events: all; }

.soof-modal-content {
  width: 90%; max-width: 900px; aspect-ratio: 16/9;
  background: black; border-radius: var(--soof-radius-md);
  position: relative; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.soof-close-modal {
  position: absolute; top: -40px; right: 0; color: white; background: none; border: none;
  font-size: 2rem; cursor: pointer; opacity: 0.8;
}
.soof-close-modal:hover { opacity: 1; }
</style>

<!-- SHARED VIDEO MODAL -->
<div class="soof-modal-overlay" id="soofGlobalModal" aria-hidden="true">
  <div style="position:relative; width:90%; max-width:900px;">
    <button class="soof-close-modal" onclick="closeSoofModal()" aria-label="Close Video">&times;</button>
    <div class="soof-modal-content">
      <iframe id="soofVideoFrame" style="width:100%; height:100%; border:none;" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>
  </div>
</div>

<script>
  // Global Modal Logic
  function openSoofVideo(videoId) {
    const modal = document.getElementById('soofGlobalModal');
    const iframe = document.getElementById('soofVideoFrame');
    if(modal && iframe) {
      // Use YouTube embed format
      iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0`;
      modal.classList.add('active');
      modal.setAttribute('aria-hidden', 'false');
    }
  }

  function closeSoofModal() {
    const modal = document.getElementById('soofGlobalModal');
    const iframe = document.getElementById('soofVideoFrame');
    if(modal && iframe) {
      modal.classList.remove('active');
      modal.setAttribute('aria-hidden', 'true');
      iframe.src = ''; // Stop video
    }
  }

  // Close on Escape key
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') closeSoofModal();
  });

  // Close on backdrop click
  document.getElementById('soofGlobalModal').addEventListener('click', (e) => {
    if (e.target === document.getElementById('soofGlobalModal')) closeSoofModal();
  });
</script>
</div>/* End custom CSS */