/*
 Theme Name: Epic Origin
 Theme URI: https://epicorigin.com
 Author: Epic Origin
 Description: Premium Video Editing Agency — Design-exact WordPress theme
 Version: 2.0.0
 Requires at least: 6.0
 Tested up to: 6.7
 Requires PHP: 7.4
 Text Domain: epic-origin
*/

/* ============================================================
   EPIC ORIGIN — COMPLETE BRAND DESIGN SYSTEM
   Display: Mango Grotesque | Body: HK Grotesk Wide
   Gold: #D6AD58 | Navy: #061C28 | Ivory: #F5F1E7 | Cream: #FBF9F4
   ============================================================ */

:root {
  --color-primary-gold: #D6AD58;
  --color-light-gold: #E8CB86;
  --color-champagne: #F3DFA8;
  --color-deep-gold: #B88D3D;
  --color-gold-glow: rgba(214,173,88,0.15);
  --color-deep-navy: #061C28;
  --color-secondary-navy: #0A2633;
  --color-navy-card: #0E3142;
  --color-warm-ivory: #F5F1E7;
  --color-soft-cream: #FBF9F4;
  --color-pure-white: #FFFFFF;
  --color-charcoal: #171A1C;
  --color-muted-grey: #687077;
  --color-warm-border: #DDD8CC;
  --font-display: 'Mango Grotesque', 'Anton', 'Bebas Neue', 'Impact', sans-serif;
  --font-body: 'HK Grotesk Wide', 'Plus Jakarta Sans', 'Space Grotesk', -apple-system, sans-serif;
  --container-max: 1280px;
  --header-height: 80px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --transition-fast: 0.2s cubic-bezier(0.16,1,0.3,1);
  --transition-smooth: 0.35s cubic-bezier(0.16,1,0.3,1);
}

*, *::before, *::after { box-sizing: border-box; max-width: 100%; }

html, body {
  width: 100%; max-width: 100vw; overflow-x: hidden !important;
  scroll-behavior: smooth; background-color: var(--color-soft-cream);
  color: var(--color-charcoal); font-family: var(--font-body);
  -webkit-font-smoothing: antialiased; min-height: 100vh; line-height: 1.5;
}

/* WordPress admin bar offset */
.admin-bar #eo-header { top: 32px; }
@media (max-width: 782px) { .admin-bar #eo-header { top: 46px; } }

/* Container */
.container {
  width: 100%; max-width: var(--container-max);
  margin-left: auto; margin-right: auto;
  padding-left: 1.25rem; padding-right: 1.25rem;
}
@media (min-width: 640px) { .container { padding-left: 1.5rem; padding-right: 1.5rem; } }

/* Tailwind-compatible utilities used in theme */
.mx-auto { margin-left: auto; margin-right: auto; }
.flex { display: flex; }
.hidden { display: none !important; }
.grid { display: grid; }
.block { display: block; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-row { flex-direction: row; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.uppercase { text-transform: uppercase; }
.italic { font-style: italic; }
.shrink-0 { flex-shrink: 0; }
.pointer-events-none { pointer-events: none; }
.cursor-pointer { cursor: pointer; }
.cursor-ew-resize { cursor: ew-resize; }
.select-none { user-select: none; }
.transition-all { transition: all var(--transition-fast); }
.transition-colors { transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast); }
.transition-transform { transition: transform var(--transition-fast); }
.rounded-full { border-radius: 9999px; }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-md { border-radius: var(--radius-md); }
.rounded { border-radius: var(--radius-sm); }
.rounded-xl { border-radius: 20px; }
.shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.shadow-lg { box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.shadow-xl { box-shadow: 0 20px 40px rgba(0,0,0,0.25); }
.shadow-2xl { box-shadow: 0 25px 50px rgba(0,0,0,0.3); }

/* Typography */
h1, h2 {
  font-family: var(--font-display) !important;
  text-transform: uppercase; letter-spacing: 0.02em;
  line-height: 0.92; font-weight: 800;
}
h3, h4, .sub-headline {
  font-family: var(--font-body) !important;
  text-transform: uppercase; letter-spacing: 0.05em;
  line-height: 1.25; font-weight: 800;
}
h1 { font-size: clamp(3.2rem,14vw,5.5rem); line-height: 0.90; }
h2 { font-size: clamp(1.75rem,5vw,3.2rem); line-height: 1.05; }
h3 { font-size: clamp(1.15rem,2.5vw,1.6rem); }

img, video { max-width: 100%; height: auto; object-fit: cover; }
header img { max-height: 48px; width: auto; object-fit: contain; }

h1,h2,h3,h4,p,span,a,button { overflow-wrap: break-word; word-wrap: break-word; }

/* Color utilities */
.text-white { color: #fff !important; }
.text-slate-200 { color: #e2e8f0; }
.text-slate-300 { color: #cbd5e1; }
.text-slate-400 { color: #94a3b8; }
.text-slate-500 { color: #64748b; }
.text-slate-600 { color: #475569; }
.text-slate-700 { color: #334155; }
.text-slate-800 { color: #1e293b; }
.text-red-400 { color: #f87171; }
.bg-black { background-color: #000; }
.bg-white { background-color: #fff; }

/* Tailwind inline class map */
.bg-\[\#061C28\] { background-color: #061C28 !important; }
.bg-\[\#0A2633\] { background-color: #0A2633 !important; }
.bg-\[\#0E3142\] { background-color: #0E3142 !important; }
.text-\[\#D6AD58\] { color: #D6AD58 !important; }
.text-\[\#E8CB86\] { color: #E8CB86 !important; }
.text-\[\#F3DFA8\] { color: #F3DFA8 !important; }
.text-\[\#B88D3D\] { color: #B88D3D !important; }
.text-\[\#061C28\] { color: #061C28 !important; }
.text-\[\#171A1C\] { color: #171A1C !important; }
.border-\[\#D6AD58\] { border-color: #D6AD58 !important; }
.border-\[\#DDD8CC\] { border-color: #DDD8CC !important; }

/* Spacing system */
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.pt-16 { padding-top: 4rem; } .pb-8 { padding-bottom: 2rem; }
.pt-8 { padding-top: 2rem; } .pb-12 { padding-bottom: 3rem; }
.pt-4 { padding-top: 1rem; } .pb-5 { padding-bottom: 1.25rem; }
.pt-2 { padding-top: 0.5rem; } .pt-1 { padding-top: 0.25rem; }
.pt-6 { padding-top: 1.5rem; } .pt-3 { padding-top: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; }
.p-3 { padding: 0.75rem; } .p-3\.5 { padding: 0.875rem; }
.p-4\.5 { padding: 1.125rem; }
.mb-12 { margin-bottom: 3rem; } .mb-10 { margin-bottom: 2.5rem; }
.mb-4 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 0.75rem; }
.mb-2 { margin-bottom: 0.5rem; } .mb-1 { margin-bottom: 0.25rem; }
.mt-4 { margin-top: 1rem; } .mt-2 { margin-top: 0.5rem; }
.mt-8 { margin-top: 2rem; } .mt-10 { margin-top: 2.5rem; }
.mt-1 { margin-top: 0.25rem; } .mt-14 { margin-top: 3.5rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.ml-0\.5 { margin-left: 0.125rem; } .ml-1 { margin-left: 0.25rem; }

/* Gap */
.gap-1 { gap: 0.25rem; } .gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; } .gap-2\.5 { gap: 0.625rem; }
.gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; } .gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }

/* Space */
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-2\.5 > * + * { margin-top: 0.625rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-1\.5 > * + * { margin-top: 0.375rem; }
.space-x-4 > * + * { margin-left: 1rem; }

/* Grid */
.grid-cols-1 { grid-template-columns: repeat(1,minmax(0,1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.col-span-5 { grid-column: span 5/span 5; }
.col-span-7 { grid-column: span 7/span 7; }
.col-span-4 { grid-column: span 4/span 4; }
.col-span-8 { grid-column: span 8/span 8; }
.col-span-6 { grid-column: span 6/span 6; }

/* Width/Height */
.w-3 { width: 0.75rem; } .w-3\.5 { width: 0.875rem; }
.w-4 { width: 1rem; } .w-4\.5 { width: 1.125rem; }
.w-5 { width: 1.25rem; } .w-6 { width: 1.5rem; }
.w-8 { width: 2rem; } .w-9 { width: 2.25rem; }
.w-10 { width: 2.5rem; } .w-12 { width: 3rem; }
.w-14 { width: 3.5rem; } .w-16 { width: 4rem; }
.w-auto { width: auto; }
.h-3 { height: 0.75rem; } .h-3\.5 { height: 0.875rem; }
.h-4 { height: 1rem; } .h-4\.5 { height: 1.125rem; }
.h-5 { height: 1.25rem; } .h-6 { height: 1.5rem; }
.h-8 { height: 2rem; } .h-9 { height: 2.25rem; }
.h-10 { height: 2.5rem; } .h-12 { height: 3rem; }
.h-14 { height: 3.5rem; } .h-16 { height: 4rem; }
.h-48 { height: 12rem; } .h-64 { height: 16rem; }

/* Max width */
.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-none { max-width: none; }

/* Border */
.border { border: 1px solid; }
.border-t { border-top: 1px solid; }
.border-b { border-bottom: 1px solid; }
.border-r-2 { border-right: 2px solid; }
.border-l { border-left: 1px solid; }
.border-l-2 { border-left: 2px solid; }
.border-white/10 { border-color: rgba(255,255,255,0.1); }
.border-white/20 { border-color: rgba(255,255,255,0.2); }
.border-red-500/20 { border-color: rgba(239,68,68,0.2); }
.border-slate-100 { border-color: #f1f5f9; }
.border-transparent { border-color: transparent; }

/* Opacity */
.opacity-0 { opacity: 0; }
.opacity-80 { opacity: 0.8; }
.opacity-20 { opacity: 0.2; }

/* Text sizes */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-6xl { font-size: 3.75rem; line-height: 1; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }

/* Font weight */
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* Leading */
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
.leading-\[0\.90\] { line-height: 0.90; }

/* Tracking */
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.tracking-tight { letter-spacing: -0.025em; }

/* Position */
.top-0 { top: 0; } .bottom-0 { bottom: 0; }
.left-0 { left: 0; } .right-0 { right: 0; }
.top-4 { top: 1rem; } .top-3 { top: 0.75rem; }
.bottom-6 { bottom: 1.5rem; } .bottom-3 { bottom: 0.75rem; }
.left-4 { left: 1rem; } .left-6 { left: 1.5rem; }
.right-4 { right: 1rem; } .right-3 { right: 0.75rem; }
.top-full { top: 100%; }

/* Z-index */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }

/* Aspect ratio */
.aspect-video { aspect-ratio: 16/9; }

/* Backdrop */
.backdrop-blur-md { backdrop-filter: blur(12px); }
.backdrop-blur-sm { backdrop-filter: blur(4px); }

/* Min height */
.min-h-screen { min-height: 100vh; }
.min-h-\[85vh\] { min-height: 85vh; }

/* Filter */
.grayscale { filter: grayscale(100%); }
.contrast-75 { filter: contrast(0.75); }
.brightness-90 { filter: brightness(0.9); }
.filter { filter: none; }

/* Scale */
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:scale-110 { transform: scale(1.1); }
.group:hover .group-hover\:bg-black\/20 { background-color: rgba(0,0,0,0.2); }
.group:hover .group-hover\:text-\[\#B88D3D\] { color: #B88D3D; }
.group:hover .group-hover\:shadow-xl { box-shadow: 0 20px 40px rgba(0,0,0,0.25); }

/* Translate */
.translate-x-1 { transform: translateX(0.25rem); }
.rotate-90 { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }

/* Gradients */
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); }
.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }

/* Blur */
.blur-3xl { filter: blur(64px); }
.blur-\[120px\] { filter: blur(120px); }
.blur-\[100px\] { filter: blur(100px); }

/* Animation */
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.animate-fade-in { animation: fadeIn 0.4s ease both; }

/* ─── Component Classes ─── */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem; font-family: var(--font-body) !important;
  font-size: 0.85rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 0.8rem 1.6rem;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; transition: all var(--transition-fast);
  white-space: nowrap; text-decoration: none;
}
.btn-primary-gold {
  background-color: var(--color-primary-gold); color: var(--color-deep-navy) !important;
  border-color: var(--color-primary-gold);
  box-shadow: 0 4px 14px rgba(214,173,88,0.25);
}
.btn-primary-gold:hover {
  background-color: var(--color-light-gold); border-color: var(--color-light-gold);
  box-shadow: 0 6px 20px rgba(214,173,88,0.4);
}
.btn-gold-outline {
  background-color: transparent; color: var(--color-primary-gold) !important;
  border-color: var(--color-primary-gold);
}
.btn-gold-outline:hover {
  background-color: var(--color-primary-gold); color: var(--color-deep-navy) !important;
}
.btn-sm { padding: 0.5rem 1.1rem; font-size: 0.75rem; }
.btn-lg { padding: 1rem 2.2rem; font-size: 0.95rem; }

/* Badges */
.badge-gold {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background-color: var(--color-gold-glow); color: var(--color-deep-gold);
  border: 1px solid var(--color-primary-gold);
  padding: 0.3rem 0.75rem; border-radius: var(--radius-full);
  font-size: 0.725rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.badge-spec {
  background-color: #E2E8F0; color: #475569; border: 1px solid #CBD5E1;
  font-size: 0.675rem; padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm); font-weight: 700; letter-spacing: 0.05em;
  display: inline-block;
}

/* Section Colors */
.section-ivory { background-color: var(--color-warm-ivory); }
.section-soft-cream { background-color: var(--color-soft-cream); }

/* Card Lift */
.card-lift { transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.3s cubic-bezier(0.16,1,0.3,1); }
@media (min-width: 768px) {
  .card-lift:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(6,28,40,0.12); border-color: var(--color-primary-gold) !important; }
}

/* Forms */
.form-group { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.form-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-charcoal); display: block; }
.form-input, .form-select, .form-textarea {
  font-family: var(--font-body) !important; font-size: 0.9rem;
  padding: 0.75rem 0.9rem; border: 1px solid var(--color-warm-border);
  border-radius: var(--radius-sm); background-color: #fff;
  color: var(--color-charcoal); transition: border-color var(--transition-fast);
  width: 100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--color-primary-gold);
  box-shadow: 0 0 0 3px var(--color-gold-glow);
}

/* Modals */
.modal-overlay {
  position: fixed; inset: 0; background-color: rgba(6,28,40,0.85);
  backdrop-filter: blur(8px); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.modal-content {
  background-color: var(--color-soft-cream); border: 1px solid var(--color-primary-gold);
  border-radius: var(--radius-md); width: 100%; max-width: 640px;
  max-height: 90vh; overflow-y: auto; padding: 2rem; position: relative;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.modal-close {
  position: absolute; top: 1rem; right: 1rem; background: none; border: none;
  color: var(--color-charcoal); cursor: pointer; padding: 0.4rem;
  border-radius: var(--radius-full); font-size: 1.25rem; line-height: 1;
}
.modal-close:hover { background-color: var(--color-warm-border); }

/* ─── Header ─── */
#eo-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
  transition: all 0.3s ease; background-color: rgba(6,28,40,0.85);
  backdrop-filter: blur(4px); border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 1rem 0;
}
#eo-header.scrolled {
  background-color: rgba(6,28,40,0.97); backdrop-filter: blur(12px);
  border-bottom-color: rgba(214,173,88,0.2); padding: 0.625rem 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
#eo-header .container { display: flex; align-items: center; justify-content: space-between; }

/* Nav */
#eo-desktop-nav { display: none; }
#eo-mobile-menu { display: none; }
#eo-desktop-actions { display: none; }

@media (min-width: 1024px) {
  #eo-desktop-nav { display: flex; align-items: center; gap: 1.75rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
  #eo-desktop-nav a, #eo-desktop-nav button { color: #e2e8f0; text-decoration: none; transition: color 0.2s; background: none; border: none; cursor: pointer; font-size: inherit; font-weight: inherit; text-transform: inherit; letter-spacing: inherit; padding: 0.5rem 0; display: flex; align-items: center; gap: 0.25rem; }
  #eo-desktop-nav a:hover, #eo-desktop-nav button:hover { color: #D6AD58; }
  #eo-desktop-nav a.active { color: #D6AD58; }
  #eo-desktop-actions { display: flex; align-items: center; gap: 0.75rem; }
  #eo-hamburger { display: none !important; }
}

/* Services Dropdown */
#eo-services-dropdown {
  position: absolute; top: 100%; left: 0; min-width: 340px;
  background-color: #0A2633; border: 1px solid rgba(214,173,88,0.4);
  border-radius: var(--radius-md); box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  padding: 0.75rem 0.5rem; margin-top: 0; z-index: 9999;
  display: none;
}
#eo-services-dropdown a {
  display: block; padding: 0.5rem 0.75rem; border-radius: 4px;
  font-size: 0.875rem; font-weight: 600; color: #e2e8f0;
  text-decoration: none; transition: all 0.15s; white-space: nowrap;
  text-transform: none !important; letter-spacing: normal !important;
}
#eo-services-dropdown a:hover { background-color: rgba(214,173,88,0.2); color: #F3DFA8; }
.eo-dropdown-label {
  font-size: 10px; text-transform: uppercase; font-weight: 800;
  color: #D6AD58; padding: 0.375rem 0.75rem; letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 0.25rem;
}
.eo-dropdown-divider {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin: 0.375rem 0; padding-top: 0.375rem;
}
.eo-dropdown-ai-link {
  display: flex !important; align-items: center; gap: 0.5rem;
  color: #D6AD58 !important; font-weight: 800 !important;
}

#eo-services-nav-item { position: relative; }

/* Mobile menu */
#eo-mobile-menu {
  background-color: #061C28; border-bottom: 1px solid rgba(214,173,88,0.3);
  padding: 1.25rem; max-height: 85vh; overflow-y: auto; animation: fadeIn 0.3s ease;
}
#eo-mobile-menu a { color: #e2e8f0; text-decoration: none; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.25rem 0; display: block; transition: color 0.2s; }
#eo-mobile-menu a:hover { color: #D6AD58; }

/* ─── Showreel ─── */
#eo-showreel-container {
  position: relative; background: #000; aspect-ratio: 16/9;
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(214,173,88,0.4);
  box-shadow: 0 25px 50px rgba(0,0,0,0.5); max-height: 600px;
  cursor: pointer;
}
#eo-showreel-container video { width: 100%; height: 100%; object-fit: cover; }
#eo-showreel-play-btn {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(6,28,40,0.6); transition: background 0.3s;
}
#eo-showreel-play-btn:hover { background: rgba(6,28,40,0.4); }
#eo-showreel-play-btn.hidden { display: none !important; }
.eo-play-circle {
  width: 5rem; height: 5rem; border-radius: 9999px;
  background-color: #D6AD58; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 0 rgba(214,173,88,0.4);
  animation: pulse-gold 2s infinite;
}
@keyframes pulse-gold {
  0% { box-shadow: 0 0 0 0 rgba(214,173,88,0.4); }
  70% { box-shadow: 0 0 0 20px rgba(214,173,88,0); }
  100% { box-shadow: 0 0 0 0 rgba(214,173,88,0); }
}

/* ─── Before/After Slider ─── */
#eo-before-after { position: relative; }
#eo-slider-handle {
  position: absolute; top: 0; bottom: 0; width: 4px; background: #D6AD58;
  box-shadow: 0 0 15px #D6AD58; display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
#eo-slider-btn {
  width: 2.25rem; height: 2.25rem; border-radius: 9999px; background-color: #D6AD58;
  color: #061C28; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5); border: 2px solid white;
  pointer-events: all; cursor: ew-resize;
}

/* ─── Responsive ─── */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sm\:flex-row { flex-direction: row; }
  .sm\:text-left { text-align: left; }
  .sm\:text-xl { font-size: 1.25rem; }
  .sm\:text-6xl { font-size: 3.75rem; }
  .sm\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
  .sm\:items-start { align-items: flex-start; }
  .sm\:justify-start { justify-content: flex-start; }
  .sm\:mx-0 { margin-left: 0; margin-right: 0; }
  .sm\:h-10 { height: 2.5rem; }
  .sm\:h-12 { height: 3rem; }
  .sm\:min-w-\[340px\] { min-width: 340px; }
  .sm\:w-auto { width: auto; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (min-width: 768px) {
  .md\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .md\:text-5xl { font-size: 3rem; line-height: 1; }
  .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .md\:text-lg { font-size: 1.125rem; }
  .md\:text-base { font-size: 1rem; }
  .md\:text-xl { font-size: 1.25rem; }
  .md\:text-2xl { font-size: 1.5rem; }
  .md\:flex-row { flex-direction: row; }
  .md\:items-end { align-items: flex-end; }
  .md\:p-10 { padding: 2.5rem; }
  .md\:col-span-2 { grid-column: span 2; }
  .md\:text-6xl { font-size: 3.75rem; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12,minmax(0,1fr)); }
  .lg\:grid { display: grid; }
  .lg\:hidden { display: none !important; }
  .lg\:flex { display: flex !important; }
  .lg\:col-span-2 { grid-column: span 2; }
  .lg\:col-span-4 { grid-column: span 4; }
  .lg\:col-span-5 { grid-column: span 5; }
  .lg\:col-span-6 { grid-column: span 6; }
  .lg\:col-span-7 { grid-column: span 7; }
  .lg\:col-span-8 { grid-column: span 8; }
  .lg\:col-span-12 { grid-column: span 12; }
  .lg\:text-6xl { font-size: 3.75rem; }
  .lg\:text-7xl { font-size: 4.5rem; }
  .lg\:col-span-9 { grid-column: span 9; }
}

/* WordPress default overrides */
.wp-block { max-width: 100%; }
#page, #content, .site-content { background: transparent; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font-family: inherit; }


/* === CUSTOM GRID SYSTEM === */

/* ============================================================
   EPIC ORIGIN — DESIGN-EXACT GRID & CARD SYSTEM
   Forces Elementor Native Widgets into exact 3-col & 4-col layout
   ============================================================ */

/* Container Boxed Centering */
.e-con-boxed > .e-con-inner,
.elementor-element.e-con-boxed > .e-con-inner {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  width: 100% !important;
}

/* 01. Hero Section */
.elementor-element-eo_sec_hero {
  min-height: 80vh !important;
  display: flex !important;
  align-items: center !important;
}
.elementor-element-eo_hero_inner {
  max-width: 850px !important;
}
.elementor-element-eo_hero_h1 h1 {
  font-family: 'Mango Grotesque', 'Anton', 'Bebas Neue', 'Impact', sans-serif !important;
  font-size: clamp(44px, 7vw, 76px) !important;
  line-height: 0.90 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

/* 02. Philosophy Section */
.elementor-element-eo_philo_inner > .e-con-inner,
.elementor-element-eo_philo_inner {
  display: grid !important;
  grid-template-columns: 1.6fr 1fr !important;
  gap: 40px !important;
  align-items: center !important;
}
.elementor-element-eo_philo_right_card {
  box-shadow: 0 16px 32px rgba(6, 28, 40, 0.4) !important;
}

/* 03. Services Grid: 3 columns */
.elementor-element-eo_serv_grid > .e-con-inner,
.elementor-element-eo_serv_grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
}
.elementor-element-eo_serv_grid .e-con-child,
.elementor-element-eo_serv_grid > .e-con {
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.elementor-element-eo_serv_grid > .e-con:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 32px rgba(6,28,40,0.10) !important;
  border-color: #D6AD58 !important;
}

/* 04. Video Showreel */
.elementor-element-eo_reel_video {
  max-width: 900px !important;
  width: 100% !important;
  margin: 0 auto !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid rgba(214, 173, 88, 0.4) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6) !important;
}

/* 05. Portfolio Grid: 3 columns */
.elementor-element-eo_port_grid > .e-con-inner,
.elementor-element-eo_port_grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
}
.elementor-element-eo_port_grid .e-con-child,
.elementor-element-eo_port_grid > .e-con {
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.elementor-element-eo_port_grid > .e-con:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 32px rgba(6,28,40,0.12) !important;
}
.elementor-element-eo_port_grid img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
}

/* 06. Before / After: 2 columns */
.elementor-element-eo_ba_cards > .e-con-inner,
.elementor-element-eo_ba_cards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 28px !important;
  width: 100% !important;
}
.elementor-element-eo_ba_cards .e-con-child,
.elementor-element-eo_ba_cards > .e-con {
  width: 100% !important;
  max-width: 100% !important;
}
.elementor-element-eo_ba_cards img {
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
}

/* 07. Editing Breakdown: 3 columns */
.elementor-element-eo_bd_grid > .e-con-inner,
.elementor-element-eo_bd_grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
}
.elementor-element-eo_bd_grid .e-con-child,
.elementor-element-eo_bd_grid > .e-con {
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
}

/* 08. AI Video Cards: 3 columns */
.elementor-element-eo_ai_cards > .e-con-inner,
.elementor-element-eo_ai_cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
}
.elementor-element-eo_ai_cards .e-con-child,
.elementor-element-eo_ai_cards > .e-con {
  width: 100% !important;
  max-width: 100% !important;
}

/* 09. Industries Grid: 3 columns */
.elementor-element-eo_ind_grid > .e-con-inner,
.elementor-element-eo_ind_grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
}
.elementor-element-eo_ind_grid .e-con-child,
.elementor-element-eo_ind_grid > .e-con {
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
  transition: transform 0.3s ease, border-color 0.3s ease !important;
}
.elementor-element-eo_ind_grid > .e-con:hover {
  transform: translateY(-4px) !important;
  border-color: #D6AD58 !important;
}

/* 10. Differentiator (We Don't Edit Blind): 4 columns */
.elementor-element-eo_diff_grid > .e-con-inner,
.elementor-element-eo_diff_grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
}
.elementor-element-eo_diff_grid .e-con-child,
.elementor-element-eo_diff_grid > .e-con {
  width: 100% !important;
  max-width: 100% !important;
}

/* 11. Editorial Philosophy: 3 columns */
.elementor-element-eo_ed_pillars > .e-con-inner,
.elementor-element-eo_ed_pillars {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
}
.elementor-element-eo_ed_pillars .e-con-child,
.elementor-element-eo_ed_pillars > .e-con {
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
}
.elementor-element-eo_ed_banner {
  box-shadow: 0 20px 40px rgba(6, 28, 40, 0.4) !important;
}

/* 12. What's Included: 4 columns */
.elementor-element-eo_inc_grid > .e-con-inner,
.elementor-element-eo_inc_grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
}
.elementor-element-eo_inc_grid .e-con-child,
.elementor-element-eo_inc_grid > .e-con {
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
}

/* 13. Workflow: 3 columns */
.elementor-element-eo_proc_grid > .e-con-inner,
.elementor-element-eo_proc_grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
}
.elementor-element-eo_proc_grid .e-con-child,
.elementor-element-eo_proc_grid > .e-con {
  width: 100% !important;
  max-width: 100% !important;
}

/* 14. Standards: 2 columns */
.elementor-element-eo_std_inner > .e-con-inner,
.elementor-element-eo_std_inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px !important;
  align-items: flex-start !important;
  width: 100% !important;
}
.elementor-element-eo_std_checks_grid > .e-con-inner,
.elementor-element-eo_std_checks_grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  width: 100% !important;
}
.elementor-element-eo_std_checks_grid > .e-con {
  width: 100% !important;
  max-width: 100% !important;
}

/* 15. FAQ Accordion Styling */
.elementor-element-eo_faq_acc .elementor-accordion {
  max-width: 850px !important;
  margin: 0 auto !important;
}
.elementor-element-eo_faq_acc .elementor-accordion-item {
  border: 1px solid #DDD8CC !important;
  border-radius: 6px !important;
  margin-bottom: 12px !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
}
.elementor-element-eo_faq_acc .elementor-tab-title {
  padding: 18px 20px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  color: #061C28 !important;
}
.elementor-element-eo_faq_acc .elementor-tab-title.elementor-active {
  color: #B88D3D !important;
  border-bottom: 1px solid #F1F5F9 !important;
}
.elementor-element-eo_faq_acc .elementor-tab-content {
  padding: 18px 20px !important;
  background: #FBF9F4 !important;
}

/* 16. Footer 4-Column Grid */
.elementor-element-eo_ftr_main > .e-con-inner,
.elementor-element-eo_ftr_main {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1.2fr 1.2fr !important;
  gap: 36px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  width: 100% !important;
}
.elementor-element-eo_ftr_main .e-con-child,
.elementor-element-eo_ftr_main > .e-con {
  width: 100% !important;
  max-width: 100% !important;
}

/* Contact form max width */
.elementor-element-eo_cta_inner {
  max-width: 700px !important;
  margin: 0 auto !important;
}
.elementor-element-eo_cta_form .wpforms-form {
  background: #0A2633 !important;
  padding: 32px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(214, 173, 88, 0.3) !important;
}
.elementor-element-eo_cta_form label {
  color: #F5F1E7 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.elementor-element-eo_cta_form input,
.elementor-element-eo_cta_form textarea,
.elementor-element-eo_cta_form select {
  background: #061C28 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  border-radius: 4px !important;
  padding: 12px 16px !important;
}
.elementor-element-eo_cta_form button[type="submit"] {
  background: #D6AD58 !important;
  color: #061C28 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  padding: 14px 28px !important;
  border: none !important;
  width: 100% !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}
.elementor-element-eo_cta_form button[type="submit"]:hover {
  background: #E8CB86 !important;
}

/* ============================================================
   RESPONSIVE MEDIA QUERIES
   ============================================================ */
@media (max-width: 1024px) {
  .elementor-element-eo_serv_grid,
  .elementor-element-eo_serv_grid > .e-con-inner,
  .elementor-element-eo_port_grid,
  .elementor-element-eo_port_grid > .e-con-inner,
  .elementor-element-eo_bd_grid,
  .elementor-element-eo_bd_grid > .e-con-inner,
  .elementor-element-eo_ai_cards,
  .elementor-element-eo_ai_cards > .e-con-inner,
  .elementor-element-eo_ind_grid,
  .elementor-element-eo_ind_grid > .e-con-inner,
  .elementor-element-eo_proc_grid,
  .elementor-element-eo_proc_grid > .e-con-inner,
  .elementor-element-eo_ed_pillars,
  .elementor-element-eo_ed_pillars > .e-con-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .elementor-element-eo_diff_grid,
  .elementor-element-eo_diff_grid > .e-con-inner,
  .elementor-element-eo_inc_grid,
  .elementor-element-eo_inc_grid > .e-con-inner,
  .elementor-element-eo_ftr_main,
  .elementor-element-eo_ftr_main > .e-con-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .elementor-element-eo_philo_inner,
  .elementor-element-eo_philo_inner > .e-con-inner,
  .elementor-element-eo_std_inner,
  .elementor-element-eo_std_inner > .e-con-inner {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .elementor-element-eo_serv_grid,
  .elementor-element-eo_serv_grid > .e-con-inner,
  .elementor-element-eo_port_grid,
  .elementor-element-eo_port_grid > .e-con-inner,
  .elementor-element-eo_bd_grid,
  .elementor-element-eo_bd_grid > .e-con-inner,
  .elementor-element-eo_ai_cards,
  .elementor-element-eo_ai_cards > .e-con-inner,
  .elementor-element-eo_ind_grid,
  .elementor-element-eo_ind_grid > .e-con-inner,
  .elementor-element-eo_diff_grid,
  .elementor-element-eo_diff_grid > .e-con-inner,
  .elementor-element-eo_ed_pillars,
  .elementor-element-eo_ed_pillars > .e-con-inner,
  .elementor-element-eo_inc_grid,
  .elementor-element-eo_inc_grid > .e-con-inner,
  .elementor-element-eo_proc_grid,
  .elementor-element-eo_proc_grid > .e-con-inner,
  .elementor-element-eo_ba_cards,
  .elementor-element-eo_ba_cards > .e-con-inner,
  .elementor-element-eo_std_checks_grid,
  .elementor-element-eo_std_checks_grid > .e-con-inner,
  .elementor-element-eo_ftr_main,
  .elementor-element-eo_ftr_main > .e-con-inner {
    grid-template-columns: 1fr !important;
  }
}