/* ═══════════════════════════════════════════════════════════════
   AMIN RIAZI
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --color-primary:      #1a1f36;
  --color-secondary:    #2d3748;
  --color-accent:       #f59e0b;
  --color-accent-dark:  #d97706;
  --color-accent-light: #fbbf24;
  
  --color-bg-primary:   #ffffff;
  --color-bg-secondary: #f8fafc;
  --color-bg-tertiary:  #f1f5f9;
  --color-bg-dark:      #0f172a;
  
  --color-text-primary:   #0f172a;
  --color-text-secondary: #475569;
  --color-text-tertiary:  #64748b;
  --color-text-inverse:   #ffffff;
  
  --color-border-light:   #e2e8f0;
  --color-border-medium:  #cbd5e1;
  
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', -apple-system, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', monospace;
  
  --text-xs:   0.64rem;
  --text-sm:   0.8rem;
  --text-base: 1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.563rem;
  --text-2xl:  1.953rem;
  --text-3xl:  2.441rem;
  --text-4xl:  3.052rem;
  --text-5xl:  3.815rem;
  --text-6xl:  4.768rem;
  
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  
  --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  
  --transition-base: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box !important;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  overflow-x: hidden !important;
}

body {
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  line-height: 1.6 !important;
  color: var(--color-text-primary) !important;
  background: var(--color-bg-primary) !important;
  font-weight: 400 !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   WORDPRESS OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
body .site,
body #page,
body #main,
body .wrapper,
body .site-content,
body #primary,
body #content,
body article,
body .entry-content,
body article.page {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-x: hidden !important;
}

body .entry-header,
body .entry-meta,
body .edit-link,
body .comments-area,
body #comments,
body article footer,
body .nav-single {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   ENHANCED HEADER
   ═══════════════════════════════════════════════════════════════ */
body .site-header {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
  border-top: none !important;
  width: 100% !important;
  transition: all var(--transition-smooth) !important;
}

body .site-header.scrolled {
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

body .site-header hgroup {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: var(--space-5) var(--space-8) !important;
  display: flex !important;
  align-items: baseline !important;
  gap: var(--space-3) !important;
}

body .site-header h1 {
  margin: 0 !important;
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

body .site-header h1 a {
  color: var(--color-text-primary) !important;
  font-family: var(--font-display) !important;
  text-decoration: none !important;
  transition: color var(--transition-base) !important;
}

body .site-header h1 a:hover {
  color: var(--color-accent) !important;
}

body .site-header h2 {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  color: var(--color-text-tertiary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

body .main-navigation {
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
}

body .main-navigation .wrapper {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 var(--space-8) var(--space-4) !important;
}

body .main-navigation ul {
  display: flex !important;
  gap: var(--space-2) !important;
  margin: 0 !important;
  list-style: none !important;
}

body .main-navigation li {
  margin: 0 !important;
}

body .main-navigation li a {
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: var(--color-text-secondary) !important;
  padding: var(--space-2) var(--space-4) !important;
  border-radius: var(--radius-md) !important;
  display: block !important;
  transition: all var(--transition-base) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  border-bottom: none !important;
  position: relative !important;
}

body .main-navigation li a::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 0 !important;
  height: 2px !important;
  background: var(--color-accent) !important;
  transform: translateX(-50%) !important;
  transition: width var(--transition-smooth) !important;
}

body .main-navigation li a:hover::after {
  width: 70% !important;
}

body .main-navigation li a:hover {
  color: var(--color-text-primary) !important;
}

body .main-navigation .current-menu-item > a,
body .main-navigation .current_page_item > a {
  background: var(--color-accent) !important;
  color: white !important;
  font-weight: 600 !important;
  border-bottom: none !important;
}

body .main-navigation .current-menu-item > a::after,
body .main-navigation .current_page_item > a::after {
  display: none !important;
}

body .menu-toggle {
  background: var(--color-accent) !important;
  color: white !important;
  border: 1px solid var(--color-accent-dark) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-3) var(--space-5) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all var(--transition-base) !important;
}

body .menu-toggle:hover {
  background: var(--color-accent-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
}

body .main-navigation ul.toggled-on,
body .main-navigation .nav-menu.toggled-on {
  display: flex !important;
  flex-direction: column !important;
  background: white !important;
  padding: var(--space-4) !important;
  margin-top: var(--space-2) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}

@media (max-width: 768px) {
  body .site-header hgroup {
    padding: var(--space-4) var(--space-5) !important;
    flex-wrap: wrap !important;
  }
  
  body .main-navigation .wrapper {
    padding: 0 var(--space-5) var(--space-3) !important;
  }
  
  body .main-navigation ul {
    display: none !important;
  }
  
  body .main-navigation ul.toggled-on {
    display: flex !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT CONTAINERS
   ═══════════════════════════════════════════════════════════════ */
.section {
  padding: var(--space-24) 0 !important;
  width: 100% !important;
  overflow-x: hidden !important;
  position: relative !important;
}

.section-lg {
  padding: var(--space-32) 0 !important;
  width: 100% !important;
  overflow-x: hidden !important;
  position: relative !important;
}

.container {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 var(--space-8) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.bg-white { background: var(--color-bg-primary) !important; }
.bg-gray { background: var(--color-bg-secondary) !important; }
.bg-dark { background: var(--color-bg-dark) !important; }

/* Decorative Pattern Background */
.bg-pattern {
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(245, 158, 11, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(245, 158, 11, 0.03) 0%, transparent 50%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 60px,
      rgba(245, 158, 11, 0.02) 60px,
      rgba(245, 158, 11, 0.02) 61px
    ) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ENHANCED HERO SECTION
   ═══════════════════════════════════════════════════════════════ */
.hero {
  position: relative !important;
  padding: var(--space-32) 0 var(--space-24) !important;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #2d3748 100%) !important;
  overflow: hidden !important;
  width: 100% !important;
}

/* Animated Gradient Overlay */
.hero::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: 
    radial-gradient(circle at 20% 50%, rgba(245, 158, 11, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(245, 158, 11, 0.1) 0%, transparent 50%) !important;
  pointer-events: none !important;
  animation: pulse 8s ease-in-out infinite !important;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* Decorative Floating Elements */
.hero::after {
  content: '' !important;
  position: absolute !important;
  width: 400px !important;
  height: 400px !important;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.1) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  top: -100px !important;
  right: -100px !important;
  animation: float 20s ease-in-out infinite !important;
  pointer-events: none !important;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(30px, -30px) rotate(120deg); }
  66% { transform: translate(-20px, 20px) rotate(240deg); }
}

.hero-content {
  position: relative !important;
  z-index: 1 !important;
}

.hero-grid {
  display: grid !important;
  grid-template-columns: 1.2fr 0.8fr !important;
  gap: var(--space-16) !important;
  align-items: center !important;
}

.hero-text {
  max-width: 700px !important;
}

.hero-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  color: var(--color-accent-light) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: var(--space-6) !important;
  background: rgba(245, 158, 11, 0.1) !important;
  padding: var(--space-2) var(--space-4) !important;
  border-radius: var(--radius-full) !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

.hero-eyebrow::before {
  content: '' !important;
  width: 8px !important;
  height: 8px !important;
  background: var(--color-accent) !important;
  border-radius: 50% !important;
  animation: glow 2s ease-in-out infinite !important;
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px var(--color-accent); }
  50% { box-shadow: 0 0 15px var(--color-accent); }
}

.hero h1 {
  color: white !important;
  font-size: var(--text-6xl) !important;
  line-height: 1.1 !important;
  margin-bottom: var(--space-6) !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.hero-subtitle {
  font-size: var(--text-lg) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  line-height: 1.7 !important;
  margin-bottom: var(--space-8) !important;
}

.hero-cta {
  display: flex !important;
  gap: var(--space-4) !important;
  flex-wrap: wrap !important;
}

.hero-image {
  position: relative !important;
  max-width: 100% !important;
}

.hero-image-wrapper {
  position: relative !important;
  border-radius: var(--radius-2xl) !important;
  overflow: hidden !important;
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1) !important;
  transform: rotate(2deg) !important;
  transition: transform var(--transition-slow) !important;
  max-width: 100% !important;
}

.hero-image-wrapper::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, transparent 100%) !important;
  z-index: 1 !important;
  opacity: 0 !important;
  transition: opacity var(--transition-smooth) !important;
}

.hero-image-wrapper:hover {
  transform: rotate(0deg) scale(1.02) !important;
}

.hero-image-wrapper:hover::before {
  opacity: 1 !important;
}

.hero-image-wrapper img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  max-width: 100% !important;
  position: relative !important;
  z-index: 0 !important;
}

.hero-image-accent {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  top: -20px !important;
  left: -20px !important;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%) !important;
  border-radius: var(--radius-2xl) !important;
  z-index: -1 !important;
  animation: accent-pulse 4s ease-in-out infinite !important;
}

@keyframes accent-pulse {
  0%, 100% { transform: translate(0, 0); opacity: 0.5; }
  50% { transform: translate(-5px, -5px); opacity: 0.7; }
}

@media (max-width: 1024px) {
  .hero {
    padding: var(--space-24) 0 var(--space-20) !important;
  }
  
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-12) !important;
  }
  
  .hero h1 {
    font-size: var(--text-5xl) !important;
  }
  
  .hero-image {
    max-width: 500px !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 768px) {
  .hero {
    padding: var(--space-20) 0 var(--space-16) !important;
  }
  
  .hero h1 {
    font-size: var(--text-4xl) !important;
  }
  
  .hero-subtitle {
    font-size: var(--text-base) !important;
  }
  
  .hero-cta {
    flex-direction: column !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ENHANCED BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  padding: var(--space-4) var(--space-6) !important;
  border-radius: var(--radius-lg) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: all var(--transition-base) !important;
  white-space: nowrap !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.2) !important;
  transform: translate(-50%, -50%) !important;
  transition: width 0.6s, height 0.6s !important;
}

.btn:hover::before {
  width: 300px !important;
  height: 300px !important;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%) !important;
  color: white !important;
  box-shadow: 
    0 4px 6px -1px rgba(245, 158, 11, 0.3),
    0 2px 4px -1px rgba(245, 158, 11, 0.2) !important;
}

.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 
    0 20px 25px -5px rgba(245, 158, 11, 0.2),
    0 10px 10px -5px rgba(245, 158, 11, 0.15) !important;
  color: white !important;
}

.btn-secondary {
  background: var(--color-primary) !important;
  color: white !important;
  box-shadow: var(--shadow-md) !important;
}

.btn-secondary:hover {
  background: var(--color-secondary) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-xl) !important;
  color: white !important;
}

.btn-outline {
  background: transparent !important;
  color: white !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(10px) !important;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: white !important;
  color: white !important;
}

.btn-lg {
  padding: var(--space-5) var(--space-8) !important;
  font-size: var(--text-lg) !important;
}

.btn-icon {
  transition: transform var(--transition-base) !important;
  display: inline-block !important;
}

.btn:hover .btn-icon {
  transform: translateX(4px) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ENHANCED CARDS
   ═══════════════════════════════════════════════════════════════ */
.card {
  background: white !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-8) !important;
  transition: all var(--transition-smooth) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
}

.card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-light) 100%) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform var(--transition-smooth) !important;
}

.card:hover::before {
  transform: scaleX(1) !important;
}

.card:hover {
  border-color: var(--color-accent) !important;
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(245, 158, 11, 0.1) !important;
  transform: translateY(-8px) !important;
}

.card-badge {
  display: inline-block !important;
  padding: var(--space-2) var(--space-3) !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%) !important;
  color: var(--color-accent-dark) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: var(--space-4) !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

.card-icon {
  font-size: var(--text-4xl) !important;
  margin-bottom: var(--space-4) !important;
  line-height: 1 !important;
  display: inline-block !important;
  transition: transform var(--transition-smooth) !important;
}

.card:hover .card-icon {
  transform: scale(1.1) rotate(5deg) !important;
}

.card h3 {
  font-size: var(--text-xl) !important;
  margin-bottom: var(--space-3) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.card p {
  color: var(--color-text-secondary) !important;
  line-height: 1.7 !important;
  flex-grow: 1 !important;
  margin-bottom: var(--space-4) !important;
  font-size: var(--text-base) !important;
}

.card-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  color: var(--color-accent) !important;
  font-weight: 600 !important;
  font-size: var(--text-sm) !important;
  margin-top: auto !important;
  transition: all var(--transition-base) !important;
  text-decoration: none !important;
}

.card-link:hover {
  gap: var(--space-3) !important;
  color: var(--color-accent-dark) !important;
}

/* ═══════════════════════════════════════════════════════════════
   GRID LAYOUTS
   ═══════════════════════════════════════════════════════════════ */
.grid {
  display: grid !important;
  gap: var(--space-8) !important;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr) !important;
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr) !important;
}

@media (max-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr !important;
  }
  
  .grid {
    gap: var(--space-6) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADERS
   ═══════════════════════════════════════════════════════════════ */
.section-header {
  text-align: center !important;
  max-width: 800px !important;
  margin: 0 auto var(--space-16) !important;
  position: relative !important;
}

.section-eyebrow {
  display: inline-block !important;
  font-size: var(--text-sm) !important;
  font-weight: 700 !important;
  color: var(--color-accent) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  margin-bottom: var(--space-4) !important;
  position: relative !important;
  padding: 0 var(--space-4) !important;
}

.section-eyebrow::before,
.section-eyebrow::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  width: 40px !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--color-accent) 0%, transparent 100%) !important;
}

.section-eyebrow::before {
  right: 100% !important;
  margin-right: var(--space-2) !important;
}

.section-eyebrow::after {
  left: 100% !important;
  margin-left: var(--space-2) !important;
  transform: scaleX(-1) !important;
}

.section-header h2 {
  font-size: var(--text-4xl) !important;
  margin-bottom: var(--space-4) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

.section-header p {
  font-size: var(--text-lg) !important;
  color: var(--color-text-secondary) !important;
  line-height: 1.7 !important;
}

/* ═══════════════════════════════════════════════════════════════
   ENHANCED CTA SECTION
   ═══════════════════════════════════════════════════════════════ */
.cta-section {
  position: relative !important;
  padding: var(--space-24) 0 !important;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #2d3748 100%) !important;
  overflow: hidden !important;
  width: 100% !important;
}

.cta-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: 
    radial-gradient(circle at 70% 30%, rgba(245, 158, 11, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 30% 70%, rgba(245, 158, 11, 0.1) 0%, transparent 50%) !important;
  pointer-events: none !important;
  animation: pulse 8s ease-in-out infinite !important;
}

.cta-content {
  position: relative !important;
  text-align: center !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}

.cta-content h2 {
  color: white !important;
  font-size: var(--text-4xl) !important;
  margin-bottom: var(--space-6) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.cta-content p {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: var(--text-lg) !important;
  margin-bottom: var(--space-8) !important;
  line-height: 1.7 !important;
}

.cta-buttons {
  display: flex !important;
  gap: var(--space-4) !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
body #page {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

body #colophon,
body #colophon.site-footer {
  background: var(--color-bg-dark) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: var(--space-16) 0 var(--space-8) !important;
  box-sizing: border-box !important;
  position: relative !important;
}

body #colophon::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(245, 158, 11, 0.3) 50%, transparent 100%) !important;
}

.ar-footer-content {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 var(--space-8) var(--space-12) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.ar-footer-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr !important;
  gap: var(--space-12) !important;
}

.ar-footer-brand {
  font-family: var(--font-display) !important;
  font-size: var(--text-2xl) !important;
  color: white !important;
  margin-bottom: var(--space-4) !important;
  font-weight: 700 !important;
}

.ar-footer-desc {
  color: rgba(255, 255, 255, 0.6) !important;
  line-height: 1.7 !important;
  font-size: var(--text-sm) !important;
}

.ar-footer-heading {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 700 !important;
  color: white !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: var(--space-4) !important;
}

.ar-footer-links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ar-footer-links li {
  margin-bottom: var(--space-2) !important;
}

.ar-footer-links a {
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
  font-size: var(--text-sm) !important;
  transition: all var(--transition-base) !important;
  display: inline-block !important;
  position: relative !important;
}

.ar-footer-links a::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 0 !important;
  height: 1px !important;
  background: var(--color-accent-light) !important;
  transition: width var(--transition-base) !important;
}

.ar-footer-links a:hover {
  color: var(--color-accent-light) !important;
  transform: translateX(4px) !important;
}

.ar-footer-links a:hover::after {
  width: 100% !important;
}

body #colophon .site-info {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: var(--space-8) var(--space-8) 0 !important;
  text-align: center !important;
  font-size: var(--text-sm) !important;
  color: rgba(255, 255, 255, 0.5) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 1024px) {
  .ar-footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  
  .ar-footer-grid > div:first-child {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 768px) {
  .ar-footer-content {
    padding: 0 var(--space-5) var(--space-8) !important;
  }
  
  .ar-footer-grid {
    grid-template-columns: 1fr !important;
  }
  
  .ar-footer-grid > div:first-child {
    grid-column: auto !important;
  }
  
  body #colophon .site-info {
    padding: var(--space-6) var(--space-5) 0 !important;
  }
  
  .container,
  .container-narrow {
    padding: 0 var(--space-5) !important;
  }
  
  .section {
    padding: var(--space-16) 0 !important;
  }
  
  .section-lg {
    padding: var(--space-20) 0 !important;
  }
  
  .cta-section {
    padding: var(--space-16) 0 !important;
  }
  
  .cta-content h2 {
    font-size: var(--text-3xl) !important;
  }
  
  .cta-buttons {
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .cta-buttons .btn {
    width: 100% !important;
    max-width: 300px !important;
    justify-content: center !important;
  }
  
  .section-header h2 {
    font-size: var(--text-3xl) !important;
  }
  
  .section-header p {
    font-size: var(--text-base) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   UTILITIES & ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
.text-center {
  text-align: center !important;
}

.mt-auto {
  margin-top: auto !important;
}

.fade-in {
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: 
    opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.fade-in.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.delay-1 { transition-delay: 150ms !important; }
.delay-2 { transition-delay: 300ms !important; }
.delay-3 { transition-delay: 450ms !important; }

/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE - ADDITIONAL COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* Bio Box Component */
.bio-box {
  background: white !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-2xl) !important;
  padding: var(--space-12) !important;
  box-shadow: var(--shadow-lg) !important;
  position: relative !important;
  overflow: hidden !important;
}

.bio-box::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-light) 100%) !important;
}

.bio-box p {
  margin: 0 !important;
}

@media (max-width: 768px) {
  .bio-box {
    padding: var(--space-8) !important;
  }
  
  .bio-box p {
    font-size: 1rem !important;
  }
}

/* Topics Grid */
.topics-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-3) !important;
  justify-content: center !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
}

/* Topic Pills */
.topic-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: var(--space-3) var(--space-5) !important;
  background: white !important;
  border: 2px solid var(--color-border-light) !important;
  border-radius: var(--radius-full) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  transition: all var(--transition-base) !important;
  cursor: default !important;
  position: relative !important;
  overflow: hidden !important;
}

.topic-pill::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.1), transparent) !important;
  transition: left 0.6s !important;
}

.topic-pill:hover {
  border-color: var(--color-accent) !important;
  color: var(--color-accent-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}

.topic-pill:hover::before {
  left: 100% !important;
}

@media (max-width: 768px) {
  .topics-grid {
    gap: var(--space-2) !important;
  }
  
  .topic-pill {
    padding: var(--space-2) var(--space-4) !important;
    font-size: var(--text-xs) !important;
  }
}

/* Container Narrow */
.container-narrow {
  max-width: 1024px !important;
  margin: 0 auto !important;
  padding: 0 var(--space-8) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .container-narrow {
    padding: 0 var(--space-5) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RESEARCH PAGE - ADDITIONAL COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* Approach Cards */
.approach-card {
  background: white !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-10) !important;
  transition: all var(--transition-smooth) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.approach-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-light) 100%) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform var(--transition-smooth) !important;
}

.approach-card:hover::before {
  transform: scaleX(1) !important;
}

.approach-card:hover {
  border-color: var(--color-accent) !important;
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(245, 158, 11, 0.1) !important;
  transform: translateY(-6px) !important;
}

.approach-icon {
  width: 80px !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%) !important;
  border-radius: var(--radius-xl) !important;
  margin-bottom: var(--space-6) !important;
  color: var(--color-accent) !important;
  transition: all var(--transition-smooth) !important;
}

.approach-card:hover .approach-icon {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%) !important;
  color: white !important;
  transform: scale(1.1) rotate(5deg) !important;
}

.approach-card h3 {
  font-size: var(--text-xl) !important;
  margin-bottom: var(--space-4) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.approach-card p {
  color: var(--color-text-secondary) !important;
  line-height: 1.7 !important;
  font-size: var(--text-base) !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .approach-card {
    padding: var(--space-8) !important;
  }
  
  .approach-icon {
    width: 64px !important;
    height: 64px !important;
  }
}

/* Research Areas */
.research-areas {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-6) !important;
}

.research-area-item {
  display: flex !important;
  gap: var(--space-5) !important;
  align-items: flex-start !important;
  padding: var(--space-6) !important;
  background: white !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-lg) !important;
  transition: all var(--transition-base) !important;
}

.research-area-item:hover {
  border-color: var(--color-accent) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateX(8px) !important;
}

.research-area-icon {
  font-size: var(--text-4xl) !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  transition: transform var(--transition-smooth) !important;
}

.research-area-item:hover .research-area-icon {
  transform: scale(1.1) rotate(-5deg) !important;
}

.research-area-content h3 {
  font-size: var(--text-lg) !important;
  font-weight: 700 !important;
  color: var(--color-text-primary) !important;
  margin-bottom: var(--space-2) !important;
  font-family: var(--font-body) !important;
}

.research-area-content p {
  color: var(--color-text-secondary) !important;
  line-height: 1.7 !important;
  font-size: var(--text-base) !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .research-area-item {
    flex-direction: column !important;
    gap: var(--space-3) !important;
    padding: var(--space-5) !important;
  }
  
  .research-area-item:hover {
    transform: translateX(0) translateY(-4px) !important;
  }
  
  .research-area-icon {
    font-size: var(--text-3xl) !important;
  }
}

/* Project Cards */
.project-card {
  background: white !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-10) !important;
  transition: all var(--transition-smooth) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
}

.project-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 4px !important;
  height: 100% !important;
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%) !important;
  transform: scaleY(0) !important;
  transform-origin: top !important;
  transition: transform var(--transition-smooth) !important;
}

.project-card:hover::before {
  transform: scaleY(1) !important;
}

.project-card:hover {
  border-color: var(--color-accent) !important;
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-6px) !important;
}

.project-number {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%) !important;
  border: 2px solid rgba(245, 158, 11, 0.2) !important;
  border-radius: var(--radius-lg) !important;
  font-size: var(--text-2xl) !important;
  font-weight: 700 !important;
  color: var(--color-accent) !important;
  font-family: var(--font-display) !important;
  margin-bottom: var(--space-5) !important;
  transition: all var(--transition-smooth) !important;
}

.project-card:hover .project-number {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%) !important;
  color: white !important;
  border-color: var(--color-accent) !important;
  transform: scale(1.1) !important;
}

.project-card h3 {
  font-size: var(--text-xl) !important;
  margin-bottom: var(--space-4) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.project-card p {
  color: var(--color-text-secondary) !important;
  line-height: 1.7 !important;
  font-size: var(--text-base) !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .project-card {
    padding: var(--space-8) !important;
  }
  
  .project-number {
    width: 48px !important;
    height: 48px !important;
    font-size: var(--text-xl) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PUBLICATIONS PAGE - ADDITIONAL COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* Publication Year Block */
.pub-year-block {
  position: relative !important;
  margin-bottom: var(--space-16) !important;
}

.pub-year-block:last-child {
  margin-bottom: 0 !important;
}

/* Year Marker */
.pub-year-marker {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: var(--text-3xl) !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  color: var(--color-text-primary) !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%) !important;
  border: 2px solid rgba(245, 158, 11, 0.2) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-4) var(--space-8) !important;
  margin-bottom: var(--space-8) !important;
  position: relative !important;
  overflow: hidden !important;
}

.pub-year-marker::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.15), transparent) !important;
  animation: shimmer 3s ease-in-out infinite !important;
}

@keyframes shimmer {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

@media (max-width: 768px) {
  .pub-year-marker {
    font-size: var(--text-2xl) !important;
    padding: var(--space-3) var(--space-6) !important;
  }
}

/* Publication Entry */
.pub-entry {
  background: white !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-8) !important;
  margin-bottom: var(--space-6) !important;
  transition: all var(--transition-smooth) !important;
  position: relative !important;
  overflow: hidden !important;
}

.pub-entry:last-child {
  margin-bottom: 0 !important;
}

.pub-entry::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 4px !important;
  height: 100% !important;
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%) !important;
  transform: scaleY(0) !important;
  transform-origin: top !important;
  transition: transform var(--transition-smooth) !important;
}

.pub-entry:hover::before {
  transform: scaleY(1) !important;
}

.pub-entry:hover {
  border-color: var(--color-accent) !important;
  box-shadow: var(--shadow-xl) !important;
  transform: translateX(4px) !important;
}

@media (max-width: 768px) {
  .pub-entry {
    padding: var(--space-6) !important;
  }
  
  .pub-entry:hover {
    transform: translateX(0) translateY(-2px) !important;
  }
}

/* Publication Tags */
.pub-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-2) !important;
  margin-bottom: var(--space-4) !important;
}

.pub-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: var(--space-1) var(--space-3) !important;
  border-radius: var(--radius-full) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: all var(--transition-base) !important;
}

.pub-tag.tag-ai {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%) !important;
  color: var(--color-accent-dark) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.pub-tag.tag-eng {
  background: linear-gradient(135deg, rgba(26, 31, 54, 0.1) 0%, rgba(26, 31, 54, 0.05) 100%) !important;
  color: var(--color-primary) !important;
  border: 1px solid rgba(26, 31, 54, 0.2) !important;
}

.pub-entry:hover .pub-tag.tag-ai {
  background: var(--color-accent) !important;
  color: white !important;
  border-color: var(--color-accent) !important;
}

.pub-entry:hover .pub-tag.tag-eng {
  background: var(--color-primary) !important;
  color: white !important;
  border-color: var(--color-primary) !important;
}

@media (max-width: 768px) {
  .pub-tag {
    font-size: 0.65rem !important;
    padding: var(--space-1) var(--space-2) !important;
  }
}

/* Publication Title */
.pub-title {
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  line-height: 1.4 !important;
  margin-bottom: var(--space-3) !important;
}

.pub-title a {
  color: var(--color-text-primary) !important;
  text-decoration: none !important;
  transition: color var(--transition-base) !important;
  background-image: linear-gradient(var(--color-accent), var(--color-accent)) !important;
  background-repeat: no-repeat !important;
  background-position: 0 100% !important;
  background-size: 0 2px !important;
  transition: background-size var(--transition-smooth), color var(--transition-base) !important;
}

.pub-title a:hover {
  color: var(--color-accent) !important;
  background-size: 100% 2px !important;
}

@media (max-width: 768px) {
  .pub-title {
    font-size: var(--text-lg) !important;
  }
}

/* Publication Description */
.pub-desc {
  color: var(--color-text-secondary) !important;
  line-height: 1.7 !important;
  font-size: var(--text-base) !important;
  margin-bottom: var(--space-4) !important;
}

@media (max-width: 768px) {
  .pub-desc {
    font-size: var(--text-sm) !important;
  }
}

/* Publication Metadata */
.pub-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-4) !important;
  align-items: center !important;
  font-size: var(--text-sm) !important;
  color: var(--color-text-tertiary) !important;
  padding-top: var(--space-4) !important;
  border-top: 1px solid var(--color-border-light) !important;
}

.pub-journal {
  font-weight: 700 !important;
  color: var(--color-accent) !important;
  font-style: italic !important;
}

.pub-details {
  color: var(--color-text-tertiary) !important;
}

.pub-authors {
  color: var(--color-text-tertiary) !important;
}

.pub-meta span:not(:last-child)::after {
  content: '·' !important;
  margin-left: var(--space-4) !important;
  color: var(--color-border-medium) !important;
}

@media (max-width: 768px) {
  .pub-meta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-2) !important;
    font-size: var(--text-xs) !important;
  }
  
  .pub-meta span:not(:last-child)::after {
    display: none !important;
  }
}

/* Scholar Box */
.scholar-box {
  background: white !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-2xl) !important;
  padding: var(--space-12) !important;
  box-shadow: var(--shadow-lg) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-8) !important;
  position: relative !important;
  overflow: hidden !important;
}

.scholar-box::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-light) 50%, var(--color-accent) 100%) !important;
  background-size: 200% 100% !important;
  animation: gradient-shift 3s ease infinite !important;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.scholar-content h2 {
  font-size: var(--text-3xl) !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  color: var(--color-text-primary) !important;
  margin-bottom: var(--space-4) !important;
}

.scholar-content p {
  font-size: var(--text-lg) !important;
  color: var(--color-text-secondary) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

.scholar-buttons {
  display: flex !important;
  gap: var(--space-4) !important;
  flex-wrap: wrap !important;
}

@media (max-width: 768px) {
  .scholar-box {
    padding: var(--space-8) !important;
    gap: var(--space-6) !important;
  }
  
  .scholar-content h2 {
    font-size: var(--text-2xl) !important;
  }
  
  .scholar-content p {
    font-size: var(--text-base) !important;
  }
  
  .scholar-buttons {
    flex-direction: column !important;
  }
  
  .scholar-buttons .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TEACHING PAGE - ADDITIONAL COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* Teaching Stats in Hero */
.teaching-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--space-4) !important;
}

.stat-card {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-6) !important;
  text-align: center !important;
  transition: all var(--transition-smooth) !important;
}

.stat-card:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-4px) !important;
}

.stat-number {
  font-size: var(--text-5xl) !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  color: white !important;
  line-height: 1 !important;
  margin-bottom: var(--space-2) !important;
  background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.stat-label {
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

@media (max-width: 768px) {
  .teaching-stats {
    grid-template-columns: 1fr !important;
    gap: var(--space-3) !important;
  }
  
  .stat-card {
    padding: var(--space-4) !important;
  }
  
  .stat-number {
    font-size: var(--text-4xl) !important;
  }
}

/* Course Cards */
.course-card {
  background: white !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-8) !important;
  transition: all var(--transition-smooth) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
}

.course-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-light) 100%) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform var(--transition-smooth) !important;
}

.course-card:hover::before {
  transform: scaleX(1) !important;
}

.course-card:hover {
  border-color: var(--color-accent) !important;
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-6px) !important;
}

/* Featured Course Card (AI/ML) */
.course-featured {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.03) 0%, rgba(245, 158, 11, 0.01) 100%) !important;
  border: 2px solid rgba(245, 158, 11, 0.2) !important;
}

.course-featured:hover {
  border-color: var(--color-accent) !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(245, 158, 11, 0.02) 100%) !important;
}

/* Course Badge */
.course-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: var(--radius-lg) !important;
  font-size: var(--text-lg) !important;
  font-weight: 700 !important;
  font-family: var(--font-mono) !important;
  margin-bottom: var(--space-4) !important;
  transition: all var(--transition-smooth) !important;
}

.badge-ai {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%) !important;
  color: var(--color-accent-dark) !important;
  border: 2px solid rgba(245, 158, 11, 0.3) !important;
}

.badge-eng {
  background: linear-gradient(135deg, rgba(26, 31, 54, 0.1) 0%, rgba(26, 31, 54, 0.05) 100%) !important;
  color: var(--color-primary) !important;
  border: 2px solid rgba(26, 31, 54, 0.2) !important;
}

.course-card:hover .badge-ai {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%) !important;
  color: white !important;
  border-color: var(--color-accent) !important;
  transform: scale(1.1) rotate(5deg) !important;
}

.course-card:hover .badge-eng {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important;
  color: white !important;
  border-color: var(--color-primary) !important;
  transform: scale(1.1) rotate(-5deg) !important;
}

.course-card h3 {
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  color: var(--color-text-primary) !important;
  margin-bottom: var(--space-3) !important;
  line-height: 1.3 !important;
}

.course-card p {
  color: var(--color-text-secondary) !important;
  line-height: 1.7 !important;
  font-size: var(--text-base) !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .course-card {
    padding: var(--space-6) !important;
  }
  
  .course-badge {
    width: 48px !important;
    height: 48px !important;
    font-size: var(--text-base) !important;
  }
}

/* Course List (Undergraduate) */
.course-list {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-4) !important;
}

.course-list-item {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-4) !important;
  background: white !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-5) var(--space-6) !important;
  transition: all var(--transition-base) !important;
}

.course-list-item:hover {
  border-color: var(--color-accent) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateX(8px) !important;
}

.course-list-icon {
  font-size: var(--text-3xl) !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  transition: transform var(--transition-smooth) !important;
}

.course-list-item:hover .course-list-icon {
  transform: scale(1.2) rotate(-10deg) !important;
}

.course-list-item h3 {
  font-size: var(--text-lg) !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
  font-family: var(--font-body) !important;
}

@media (max-width: 768px) {
  .course-list-item {
    padding: var(--space-4) var(--space-5) !important;
  }
  
  .course-list-item:hover {
    transform: translateX(0) translateY(-4px) !important;
  }
  
  .course-list-icon {
    font-size: var(--text-2xl) !important;
  }
  
  .course-list-item h3 {
    font-size: var(--text-base) !important;
  }
}

/* Bridge Section */
.bridge-section {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-12) !important;
}

.bridge-header {
  max-width: 900px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.bridge-header h2 {
  font-size: var(--text-4xl) !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  color: var(--color-text-primary) !important;
  margin-bottom: var(--space-4) !important;
}

.bridge-header p {
  font-size: var(--text-lg) !important;
  color: var(--color-text-secondary) !important;
  line-height: 1.7 !important;
  margin-bottom: var(--space-4) !important;
}

.bridge-header p:last-child {
  margin-bottom: 0 !important;
}

.bridge-items {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-6) !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.bridge-item {
  display: flex !important;
  gap: var(--space-5) !important;
  align-items: flex-start !important;
  background: white !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-8) !important;
  transition: all var(--transition-smooth) !important;
  position: relative !important;
  overflow: hidden !important;
}

.bridge-item::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 4px !important;
  height: 100% !important;
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%) !important;
  transform: scaleY(0) !important;
  transform-origin: top !important;
  transition: transform var(--transition-smooth) !important;
}

.bridge-item:hover::before {
  transform: scaleY(1) !important;
}

.bridge-item:hover {
  border-color: var(--color-accent) !important;
  box-shadow: var(--shadow-lg) !important;
  transform: translateX(8px) !important;
}

.bridge-icon {
  font-size: var(--text-5xl) !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  transition: transform var(--transition-smooth) !important;
}

.bridge-item:hover .bridge-icon {
  transform: scale(1.15) rotate(-5deg) !important;
}

.bridge-content h3 {
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  font-family: var(--font-body) !important;
  color: var(--color-text-primary) !important;
  margin-bottom: var(--space-2) !important;
}

.bridge-content p {
  color: var(--color-text-secondary) !important;
  line-height: 1.7 !important;
  font-size: var(--text-base) !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .bridge-header h2 {
    font-size: var(--text-3xl) !important;
  }
  
  .bridge-header p {
    font-size: var(--text-base) !important;
  }
  
  .bridge-item {
    flex-direction: column !important;
    gap: var(--space-4) !important;
    padding: var(--space-6) !important;
  }
  
  .bridge-item:hover {
    transform: translateX(0) translateY(-4px) !important;
  }
  
  .bridge-icon {
    font-size: var(--text-4xl) !important;
  }
  
  .bridge-content h3 {
    font-size: var(--text-lg) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ENGAGEMENTS PAGE - ADDITIONAL COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* Numbered Items Section */
.numbered-items {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-8) !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
}

.numbered-item {
  display: flex !important;
  gap: var(--space-6) !important;
  align-items: flex-start !important;
  background: white !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-10) !important;
  transition: all var(--transition-smooth) !important;
  position: relative !important;
  overflow: hidden !important;
}

.numbered-item::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 4px !important;
  height: 100% !important;
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%) !important;
  transform: scaleY(0) !important;
  transform-origin: top !important;
  transition: transform var(--transition-smooth) !important;
}

.numbered-item:hover::before {
  transform: scaleY(1) !important;
}

.numbered-item:hover {
  border-color: var(--color-accent) !important;
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  transform: translateX(8px) !important;
}

/* Numbered Badge */
.numbered-badge {
  flex-shrink: 0 !important;
  width: 80px !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%) !important;
  border: 3px solid rgba(245, 158, 11, 0.2) !important;
  border-radius: var(--radius-xl) !important;
  font-size: var(--text-3xl) !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  color: var(--color-accent) !important;
  transition: all var(--transition-smooth) !important;
}

.numbered-item:hover .numbered-badge {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%) !important;
  border-color: var(--color-accent) !important;
  color: white !important;
  transform: scale(1.1) rotate(5deg) !important;
}

.numbered-content h3 {
  font-size: var(--text-2xl) !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  color: var(--color-text-primary) !important;
  margin-bottom: var(--space-3) !important;
  line-height: 1.3 !important;
}

.numbered-content p {
  color: var(--color-text-secondary) !important;
  line-height: 1.7 !important;
  font-size: var(--text-lg) !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .numbered-items {
    gap: var(--space-6) !important;
  }
  
  .numbered-item {
    flex-direction: column !important;
    padding: var(--space-8) !important;
    gap: var(--space-4) !important;
  }
  
  .numbered-item:hover {
    transform: translateX(0) translateY(-4px) !important;
  }
  
  .numbered-badge {
    width: 64px !important;
    height: 64px !important;
    font-size: var(--text-2xl) !important;
  }
  
  .numbered-content h3 {
    font-size: var(--text-xl) !important;
  }
  
  .numbered-content p {
    font-size: var(--text-base) !important;
  }
}

/* Engagement Cards */
.engagement-card {
  background: white !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-10) !important;
  transition: all var(--transition-smooth) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
}

.engagement-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-light) 100%) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform var(--transition-smooth) !important;
}

.engagement-card:hover::before {
  transform: scaleX(1) !important;
}

.engagement-card:hover {
  border-color: var(--color-accent) !important;
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(245, 158, 11, 0.1) !important;
  transform: translateY(-8px) !important;
}

/* Engagement Number */
.engagement-number {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 64px !important;
  height: 64px !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%) !important;
  border: 2px solid rgba(245, 158, 11, 0.2) !important;
  border-radius: var(--radius-lg) !important;
  font-size: var(--text-2xl) !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  color: var(--color-accent) !important;
  margin-bottom: var(--space-5) !important;
  transition: all var(--transition-smooth) !important;
}

.engagement-card:hover .engagement-number {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%) !important;
  border-color: var(--color-accent) !important;
  color: white !important;
  transform: scale(1.15) rotate(-5deg) !important;
}

.engagement-card h3 {
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  color: var(--color-text-primary) !important;
  margin-bottom: var(--space-4) !important;
  line-height: 1.3 !important;
}

.engagement-card p {
  color: var(--color-text-secondary) !important;
  line-height: 1.7 !important;
  font-size: var(--text-base) !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .engagement-card {
    padding: var(--space-8) !important;
  }
  
  .engagement-number {
    width: 56px !important;
    height: 56px !important;
    font-size: var(--text-xl) !important;
  }
  
  .engagement-card h3 {
    font-size: var(--text-lg) !important;
  }
}

/* Hero CTA in Center */
.hero-cta {
  margin-top: var(--space-8) !important;
  display: flex !important;
  justify-content: center !important;
  gap: var(--space-4) !important;
  flex-wrap: wrap !important;
}

@media (max-width: 768px) {
  .hero-cta {
    margin-top: var(--space-6) !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .hero-cta .btn {
    width: 100% !important;
    max-width: 300px !important;
    justify-content: center !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TALKS & WORKSHOPS PAGE - ADDITIONAL COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* Hero Meta Badges */
.hero-meta {
  display: flex !important;
  gap: var(--space-6) !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin-top: var(--space-8) !important;
}

.hero-meta span {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  padding: var(--space-3) var(--space-5) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--radius-full) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  transition: all var(--transition-base) !important;
}

.hero-meta span:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px) !important;
}

@media (max-width: 768px) {
  .hero-meta {
    gap: var(--space-3) !important;
    margin-top: var(--space-6) !important;
  }
  
  .hero-meta span {
    font-size: var(--text-xs) !important;
    padding: var(--space-2) var(--space-4) !important;
  }
}

/* Topics Section (Dark Background) */
.topics-section {
  position: relative !important;
  padding: var(--space-32) 0 !important;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #2d3748 100%) !important;
  overflow: hidden !important;
  width: 100% !important;
}

.topics-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: 
    radial-gradient(circle at 70% 30%, rgba(245, 158, 11, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 30% 70%, rgba(245, 158, 11, 0.1) 0%, transparent 50%) !important;
  pointer-events: none !important;
  animation: pulse 8s ease-in-out infinite !important;
}

.topics-section .container {
  position: relative !important;
  z-index: 1 !important;
}

/* Force white text in dark topics section */
.topics-section .section-header {
  text-align: center !important;
}

.topics-section .section-header .section-eyebrow {
  color: var(--color-accent-light) !important;
}

.topics-section .section-header h2 {
  color: white !important;
  margin-bottom: var(--space-6) !important;
}

.topics-section .section-header p {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: var(--text-lg) !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 768px) {
  .topics-section {
    padding: var(--space-20) 0 !important;
  }
}

/* Topic Cards */
.topic-card {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-10) !important;
  transition: all var(--transition-smooth) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
}

.topic-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-light) 100%) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform var(--transition-smooth) !important;
}

.topic-card:hover::before {
  transform: scaleX(1) !important;
}

.topic-card:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.3),
    0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
  transform: translateY(-8px) !important;
}

/* Topic Number */
.topic-number {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 64px !important;
  height: 64px !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%) !important;
  border: 2px solid rgba(245, 158, 11, 0.4) !important;
  border-radius: var(--radius-lg) !important;
  font-size: var(--text-2xl) !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  color: var(--color-accent-light) !important;
  margin-bottom: var(--space-5) !important;
  transition: all var(--transition-smooth) !important;
}

.topic-card:hover .topic-number {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%) !important;
  border-color: var(--color-accent) !important;
  color: white !important;
  transform: scale(1.15) rotate(-5deg) !important;
}

.topic-card h3 {
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  color: white !important;
  margin-bottom: var(--space-4) !important;
  line-height: 1.3 !important;
}

.topic-card p {
  color: rgba(255, 255, 255, 0.85) !important;
  line-height: 1.7 !important;
  font-size: var(--text-base) !important;
  margin-bottom: var(--space-5) !important;
  flex-grow: 1 !important;
}

/* Topic Audience */
.topic-audience {
  padding-top: var(--space-4) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  font-size: var(--text-sm) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-style: italic !important;
}

@media (max-width: 768px) {
  .topic-card {
    padding: var(--space-8) !important;
  }
  
  .topic-number {
    width: 56px !important;
    height: 56px !important;
    font-size: var(--text-xl) !important;
  }
  
  .topic-card h3 {
    font-size: var(--text-lg) !important;
  }
  
  .topic-audience {
    font-size: var(--text-xs) !important;
  }
}

/* Format Cards */
.format-card {
  background: white !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-10) !important;
  transition: all var(--transition-smooth) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
}

.format-card::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 4px !important;
  height: 100% !important;
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%) !important;
  transform: scaleY(0) !important;
  transform-origin: top !important;
  transition: transform var(--transition-smooth) !important;
}

.format-card:hover::before {
  transform: scaleY(1) !important;
}

.format-card:hover {
  border-color: var(--color-accent) !important;
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-6px) !important;
}

/* Format Time Badge */
.format-time {
  display: inline-flex !important;
  align-items: center !important;
  padding: var(--space-2) var(--space-4) !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%) !important;
  color: var(--color-accent-dark) !important;
  font-size: var(--text-sm) !important;
  font-weight: 700 !important;
  font-family: var(--font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: var(--radius-full) !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
  margin-bottom: var(--space-5) !important;
  transition: all var(--transition-smooth) !important;
  align-self: flex-start !important;
}

.format-card:hover .format-time {
  background: var(--color-accent) !important;
  color: white !important;
  border-color: var(--color-accent) !important;
  transform: translateX(4px) !important;
}

.format-card h3 {
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  color: var(--color-text-primary) !important;
  margin-bottom: var(--space-4) !important;
  line-height: 1.3 !important;
}

.format-card p {
  color: var(--color-text-secondary) !important;
  line-height: 1.7 !important;
  font-size: var(--text-base) !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .format-card {
    padding: var(--space-8) !important;
  }
  
  .format-time {
    font-size: var(--text-xs) !important;
  }
  
  .format-card h3 {
    font-size: var(--text-lg) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT PAGE - ADDITIONAL COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* Info Strip Section */
.info-strip {
  background: white !important;
  border-top: 1px solid var(--color-border-light) !important;
  border-bottom: 1px solid var(--color-border-light) !important;
  padding: var(--space-8) 0 !important;
}

.info-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--space-6) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.info-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: var(--space-3) !important;
  padding: var(--space-4) !important;
  transition: all var(--transition-base) !important;
}

.info-item:hover {
  transform: translateY(-2px) !important;
}

.info-icon {
  font-size: var(--text-4xl) !important;
  line-height: 1 !important;
}

.info-item span:last-child {
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  color: var(--color-text-secondary) !important;
}

@media (max-width: 1024px) {
  .info-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-4) !important;
  }
}

@media (max-width: 768px) {
  .info-strip {
    padding: var(--space-6) 0 !important;
  }
  
  .info-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-3) !important;
  }
  
  .info-item {
    flex-direction: row !important;
    justify-content: center !important;
    padding: var(--space-3) !important;
  }
  
  .info-icon {
    font-size: var(--text-2xl) !important;
  }
  
  .info-item span:last-child {
    font-size: var(--text-xs) !important;
  }
}

/* Form Card */
.form-card {
  background: white !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-2xl) !important;
  padding: var(--space-12) !important;
  box-shadow: var(--shadow-lg) !important;
  position: relative !important;
  overflow: hidden !important;
}

.form-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-light) 50%, var(--color-accent) 100%) !important;
  background-size: 200% 100% !important;
  animation: gradient-shift 3s ease infinite !important;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.form-card h2 {
  font-size: var(--text-3xl) !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  color: var(--color-text-primary) !important;
  margin-bottom: var(--space-4) !important;
  line-height: 1.2 !important;
}

.form-card p {
  font-size: var(--text-lg) !important;
  color: var(--color-text-secondary) !important;
  line-height: 1.7 !important;
  margin-bottom: var(--space-8) !important;
}

@media (max-width: 768px) {
  .form-card {
    padding: var(--space-8) !important;
  }
  
  .form-card h2 {
    font-size: var(--text-2xl) !important;
  }
  
  .form-card p {
    font-size: var(--text-base) !important;
  }
}

/* Profile Grid */
.profile-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--space-6) !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}

.profile-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: var(--space-3) !important;
  background: white !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-8) !important;
  text-decoration: none !important;
  transition: all var(--transition-smooth) !important;
  position: relative !important;
  overflow: hidden !important;
}

.profile-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-light) 100%) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform var(--transition-smooth) !important;
}

.profile-card:hover::before {
  transform: scaleX(1) !important;
}

.profile-card:hover {
  border-color: var(--color-accent) !important;
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-8px) !important;
}

/* Profile Icon */
.profile-icon {
  width: 80px !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: var(--text-5xl) !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%) !important;
  border-radius: var(--radius-full) !important;
  transition: all var(--transition-smooth) !important;
}

.profile-card:hover .profile-icon {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%) !important;
  transform: scale(1.1) rotate(10deg) !important;
}

/* Profile Name */
.profile-name {
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  color: var(--color-text-primary) !important;
  transition: color var(--transition-base) !important;
}

.profile-card:hover .profile-name {
  color: var(--color-accent) !important;
}

/* Profile Handle */
.profile-handle {
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: var(--color-text-tertiary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

@media (max-width: 768px) {
  .profile-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-4) !important;
  }
  
  .profile-card {
    padding: var(--space-6) !important;
  }
  
  .profile-icon {
    width: 64px !important;
    height: 64px !important;
    font-size: var(--text-4xl) !important;
  }
  
  .profile-name {
    font-size: var(--text-lg) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE - GLOBAL EXPERIENCE BANNER
   ═══════════════════════════════════════════════════════════════ */

/* Global Experience Banner */
.global-experience-banner {
  display: grid !important;
  grid-template-columns: repeat(3, auto) 1fr !important;
  gap: var(--space-8) !important;
  align-items: center !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(245, 158, 11, 0.02) 100%) !important;
  border: 2px solid rgba(245, 158, 11, 0.2) !important;
  border-radius: var(--radius-2xl) !important;
  padding: var(--space-10) !important;
  position: relative !important;
  overflow: hidden !important;
}

.global-experience-banner::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-light) 50%, var(--color-accent) 100%) !important;
  background-size: 200% 100% !important;
  animation: gradient-shift 3s ease infinite !important;
}

.global-stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: var(--space-4) !important;
}

.global-stat-number {
  font-size: var(--text-6xl) !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  line-height: 1 !important;
  margin-bottom: var(--space-2) !important;
}

.global-stat-label {
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  color: var(--color-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.global-description {
  padding-left: var(--space-8) !important;
  border-left: 2px solid rgba(245, 158, 11, 0.3) !important;
}

.global-description p {
  font-size: var(--text-base) !important;
  line-height: 1.7 !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
}

.global-description strong {
  color: var(--color-accent-dark) !important;
  font-weight: 700 !important;
}

@media (max-width: 1024px) {
  .global-experience-banner {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--space-6) !important;
  }
  
  .global-description {
    grid-column: 1 / -1 !important;
    padding-left: 0 !important;
    padding-top: var(--space-6) !important;
    border-left: none !important;
    border-top: 2px solid rgba(245, 158, 11, 0.3) !important;
  }
}

@media (max-width: 768px) {
  .global-experience-banner {
    grid-template-columns: 1fr !important;
    padding: var(--space-8) !important;
    gap: var(--space-4) !important;
  }
  
  .global-stat {
    padding: var(--space-3) !important;
  }
  
  .global-stat-number {
    font-size: var(--text-5xl) !important;
  }
  
  .global-stat-label {
    font-size: var(--text-xs) !important;
  }
  
  .global-description {
    padding-top: var(--space-4) !important;
  }
  
  .global-description p {
    font-size: var(--text-sm) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   INSIGHTS PAGE — Landing + Category Archives
   ═══════════════════════════════════════════════════════════════ */

/* --- Hero --- */
.ar-insight-hero {
  background: linear-gradient(135deg, var(--ar-ink) 0%, #1a3352 100%) !important;
  padding: 80px 0 56px !important;
  text-align: center !important;
}
.ar-insight-hero h1 {
  color: #ffffff !important;
  font-family: var(--ar-serif, 'DM Serif Display', Georgia, serif) !important;
}
.ar-insight-hero-sub {
  font-family: var(--ar-body, 'Outfit', sans-serif) !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,0.55) !important;
  max-width: 560px !important;
  margin: 12px auto 0 !important;
}

/* --- Section cards grid --- */
.ar-insight-cards {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 20px !important;
  max-width: 740px !important;
  margin: 16px auto 0 !important;
}

/* --- Individual card (whole card is an <a> tag) --- */
body a.ar-insight-card,
.entry-content a.ar-insight-card {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  background: var(--ar-white) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 16px !important;
  padding: 32px 28px !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
  cursor: pointer !important;
}
body a.ar-insight-card:hover,
.entry-content a.ar-insight-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.08) !important;
  border-color: rgba(196,166,97,0.3) !important;
  text-decoration: none !important;
}
.ar-insight-card-icon {
  font-size: 2.2rem !important;
  flex-shrink: 0 !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 14px !important;
  background: var(--ar-ink) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ar-insight-card-body {
  flex: 1 !important;
  min-width: 0 !important;
}
body a.ar-insight-card h3,
.entry-content a.ar-insight-card h3 {
  font-family: var(--ar-body, 'Outfit', sans-serif) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--ar-ink, #192a44) !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.3 !important;
}
body a.ar-insight-card:hover h3,
.entry-content a.ar-insight-card:hover h3 {
  color: var(--ar-accent, #c4a661) !important;
}
body a.ar-insight-card p,
.entry-content a.ar-insight-card p {
  font-family: var(--ar-body, 'Outfit', sans-serif) !important;
  font-size: 0.86rem !important;
  line-height: 1.68 !important;
  color: var(--ar-text, #4a5568) !important;
  margin: 0 !important;
}
.ar-insight-card-count {
  display: inline-block !important;
  font-family: var(--ar-mono, 'JetBrains Mono', monospace) !important;
  font-size: 0.68rem !important;
  color: var(--ar-accent) !important;
  margin-top: 10px !important;
}
.ar-insight-card-arrow {
  flex-shrink: 0 !important;
  color: rgba(0,0,0,0.15) !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}
body a.ar-insight-card:hover .ar-insight-card-arrow,
.entry-content a.ar-insight-card:hover .ar-insight-card-arrow {
  color: var(--ar-accent) !important;
  transform: translateX(4px) !important;
}

/* --- "Why" paragraph --- */
.ar-insight-why {
  font-family: var(--ar-body, 'Outfit', sans-serif) !important;
  font-size: 0.96rem !important;
  line-height: 1.78 !important;
  color: var(--ar-text) !important;
  text-align: center !important;
  max-width: 620px !important;
  margin: 0 auto !important;
}

@media (max-width: 600px) {
  body a.ar-insight-card,
  .entry-content a.ar-insight-card {
    flex-direction: column !important;
    text-align: center !important;
    gap: 16px !important;
  }
  .ar-insight-card-arrow { display: none !important; }
}

/* --- Category Archive header --- */
.ar-archive-header {
  background: linear-gradient(135deg, var(--ar-ink) 0%, #1a3352 100%) !important;
  padding: 72px 0 52px !important;
  text-align: center !important;
}
.ar-archive-header h1 {
  font-family: var(--ar-serif, 'DM Serif Display', Georgia, serif) !important;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem) !important;
  color: #ffffff !important;
  font-weight: 400 !important;
  margin: 0 0 10px 0 !important;
}
.ar-archive-header p {
  font-family: var(--ar-body, 'Outfit', sans-serif) !important;
  font-size: 0.96rem !important;
  color: rgba(255,255,255,0.5) !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  line-height: 1.65 !important;
}
.ar-archive-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--ar-body, 'Outfit', sans-serif) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--ar-accent) !important;
  text-decoration: none !important;
  margin-bottom: 16px !important;
}
.ar-archive-back:hover { text-decoration: underline !important; }

/* --- Post cards in archive --- */
.ar-archive-posts {
  max-width: 740px !important;
  margin: 0 auto !important;
  padding: 48px 20px 64px !important;
}
.ar-archive-post {
  display: block !important;
  background: var(--ar-white) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 14px !important;
  padding: 28px 26px !important;
  margin-bottom: 16px !important;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.ar-archive-post:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.06) !important;
}
.ar-archive-post-date {
  font-family: var(--ar-mono, 'JetBrains Mono', monospace) !important;
  font-size: 0.68rem !important;
  color: var(--ar-accent) !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}
.ar-archive-post h2 {
  font-family: var(--ar-body, 'Outfit', sans-serif) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--ar-ink) !important;
  margin: 6px 0 8px 0 !important;
  line-height: 1.35 !important;
}
.ar-archive-post p {
  font-family: var(--ar-body, 'Outfit', sans-serif) !important;
  font-size: 0.86rem !important;
  color: var(--ar-text) !important;
  line-height: 1.68 !important;
  margin: 0 !important;
}
.ar-archive-post .ar-card-link {
  margin-top: 10px !important;
  display: inline-block !important;
}

/* --- Single post styling --- */
.single .entry-content {
  max-width: 720px !important;
  margin: 0 auto !important;
}
.single .entry-content p {
  font-family: var(--ar-body, 'Outfit', sans-serif) !important;
  font-size: 0.96rem !important;
  line-height: 1.82 !important;
  color: var(--ar-text) !important;
}
.single .entry-content h2,
.single .entry-content h3 {
  font-family: var(--ar-body, 'Outfit', sans-serif) !important;
  color: var(--ar-ink) !important;
  margin-top: 32px !important;
}

/* ═══════════════════════════════════════════════════════════════
   INSIGHTS PAGE — Minimal additions
   ═══════════════════════════════════════════════════════════════ */

/* Card as clickable link */
a.card.card-link {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  cursor: pointer !important;
}
a.card.card-link:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.08) !important;
  text-decoration: none !important;
}
a.card.card-link h3 {
  transition: color 0.2s ease !important;
}
a.card.card-link:hover h3 {
  color: var(--color-accent, #c4a661) !important;
}
a.card.card-link p {
  color: var(--color-text-secondary) !important;
}

/* Article count label */
.insight-card-meta {
  display: inline-block !important;
  font-size: 0.75rem !important;
  color: var(--color-accent, #c4a661) !important;
  margin-top: 12px !important;
  font-weight: 600 !important;
}

/* "Read Articles →" link text */
.btn-text-link {
  display: inline-block !important;
  margin-top: 14px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--color-accent, #c4a661) !important;
  transition: transform 0.2s ease !important;
}
a.card.card-link:hover .btn-text-link {
  transform: translateX(4px) !important;
}

/* ═══════════════════════════════════════════════════════════════
   INSIGHTS — Archive & Single Post Fixes
   ═══════════════════════════════════════════════════════════════ */

/* --- Archive: full-width hero fix --- */
.insight-archive-hero {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  padding: 64px 20px 52px !important;
  background: linear-gradient(135deg, #192a44 0%, #1a3352 100%) !important;
  text-align: center !important;
  margin-top: -24px !important;
  margin-bottom: 40px !important;
  box-sizing: border-box !important;
}

/* --- Archive: center content, kill sidebar --- */
body.archive section#primary,
body.archive #primary.site-content,
body.archive div#primary {
  max-width: 780px !important;
  margin: 0 auto !important;
  float: none !important;
  width: 100% !important;
}
body.archive section#secondary,
body.archive #secondary.widget-area,
body.archive div#secondary {
  display: none !important;
}

/* --- Archive: post cards --- */
body.archive #content article.hentry {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 14px !important;
  padding: 28px 26px !important;
  margin-bottom: 20px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
body.archive #content article.hentry:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.06) !important;
}

/* --- Archive: show post titles --- */
body.archive #content article.hentry .entry-header h1.entry-title {
  font-size: 1.2rem !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.35 !important;
  display: block !important;
  visibility: visible !important;
}
body.archive #content article.hentry .entry-header h1.entry-title a {
  color: #192a44 !important;
  text-decoration: none !important;
}
body.archive #content article.hentry .entry-header h1.entry-title a:hover {
  color: #c4a661 !important;
}

/* --- Archive: content text --- */
body.archive #content article.hentry .entry-content p {
  font-size: 0.88rem !important;
  line-height: 1.7 !important;
  color: #4a5568 !important;
  margin: 0 !important;
}

/* --- Archive: hide clutter --- */
body.archive #content article.hentry .comments-link,
body.archive #content article.hentry footer.entry-meta,
body.archive #content article.hentry .edit-link {
  display: none !important;
}

/* --- Single Insight: center, kill sidebar --- */
body.single #primary.site-content,
body.single section#primary,
body.single div#primary {
  max-width: 780px !important;
  margin: 0 auto !important;
  float: none !important;
  width: 100% !important;
  padding: 0 20px !important;
}
body.single section#secondary,
body.single #secondary.widget-area,
body.single div#secondary {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   INSIGHTS — Title & Hero Width Fixes
   ═══════════════════════════════════════════════════════════════ */

/* Force post titles visible on archive */
body.archive #content .hentry .entry-header,
body.archive #content .hentry .entry-header h1,
body.archive #content .hentry .entry-header h1.entry-title,
body.archive #content .hentry .entry-header h1.entry-title a,
body.archive #content .hentry header.entry-header {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  position: static !important;
}
body.archive #content .hentry .entry-header h1.entry-title {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.35 !important;
  padding: 0 !important;
}
body.archive #content .hentry .entry-header h1.entry-title a {
  color: #192a44 !important;
  text-decoration: none !important;
}
body.archive #content .hentry .entry-header h1.entry-title a:hover {
  color: #c4a661 !important;
}

/* Force hero full-width — break out of ALL parent containers */
.insight-archive-hero {
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  width: 100vw !important;
  box-sizing: border-box !important;
}

/* Hide mobile menu button on desktop */
@media (min-width: 783px) {
  body .menu-toggle {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   INSIGHTS PAGE SPACING FIXES
   ═══════════════════════════════════════════════════════════════ */

/* Fix hero section spacing on Insights page */
body.page .hero {
  padding: var(--space-16) 0 var(--space-12) !important;
}

body.page .hero h1 {
  font-size: var(--text-4xl) !important;
  margin-bottom: var(--space-4) !important;
}

body.page .hero-subtitle {
  margin-bottom: 0 !important;
}

/* Reduce section padding on pages with insights grid */
body.page .section-lg {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

/* Tighten up sections near insight filters */
.insight-filter-bar {
  margin-bottom: 1.5rem !important;
}

/* Filter Bar */
.insight-filter-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.5rem;
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.filter-label {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 0.95rem;
}

.filter-buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex: 1;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--color-text-secondary);
  background: white;
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
}

.filter-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.filter-btn.active {
  background: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.filter-icon {
  font-size: 1.1rem;
  line-height: 1;
}

/* Insights Grid */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 2rem;
  margin-top: 0 !important;
}

/* Insight Card */
.insight-card {
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-smooth);
  opacity: 1;
}

.insight-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-accent-light);
}

.insight-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 1.75rem;
}

.insight-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

/* Topic Badge */
.insight-topic-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-md);
  border: 1px solid;
  transition: all var(--transition-base);
}

.insight-card:hover .insight-topic-badge {
  transform: scale(1.05);
}

.topic-icon {
  font-size: 0.95rem;
  line-height: 1;
}

/* Date */
.insight-date {
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
  font-weight: 500;
}

/* Card Title */
.insight-card-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-primary);
  font-family: var(--font-display);
  line-height: 1.3;
  margin-bottom: 0.875rem;
  transition: color var(--transition-base);
}

.insight-card:hover .insight-card-title {
  color: var(--color-accent);
}

/* Card Excerpt */
.insight-card-excerpt {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin-bottom: 1.25rem;
}

/* Card Footer */
.insight-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border-light);
}

.read-more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-accent);
  transition: gap var(--transition-base);
}

.insight-card:hover .read-more-link {
  gap: 0.75rem;
}

.read-more-link .arrow {
  transition: transform var(--transition-base);
}

.insight-card:hover .read-more-link .arrow {
  transform: translateX(4px);
}

/* Responsive Design */
@media (max-width: 768px) {
  .page-id-289 .hero {
    padding: var(--space-12) 0 var(--space-8) !important;
  }
  
  .page-id-289 .hero h1 {
    font-size: var(--text-3xl) !important;
  }
  
  .insight-filter-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .filter-buttons {
    width: 100%;
  }
  
  .filter-btn {
    flex: 1;
    justify-content: center;
    min-width: 0;
  }
  
  .insights-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .insight-card-title {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .filter-btn {
    width: 100%;
    justify-content: flex-start;
  }
  
  .insight-card-link {
    padding: 1.25rem;
  }
  
  .insight-card-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Animation for filtered cards */
.insight-card {
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════
   END OF INSIGHTS REDESIGN CSS
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   MOBILE MENU FIX - Add this to ar-custom.css
   ═══════════════════════════════════════════════════════════════ */

/* Make sure mobile menu toggle button works */
.menu-toggle {
  display: none !important;
  cursor: pointer !important;
}

/* Show menu button on mobile */
@media screen and (max-width: 782px) {
  .menu-toggle {
    display: block !important;
    background: var(--color-accent) !important;
    color: white !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
  }
  
  .menu-toggle:hover {
    background: var(--color-accent-dark) !important;
  }
  
  /* Hide menu by default on mobile */
  .main-navigation .nav-menu {
    display: none !important;
  }
  
  /* Show menu when toggled */
  .main-navigation .nav-menu.toggled-on {
    display: block !important;
    background: white !important;
    padding: 1rem !important;
    border: 1px solid #e2e8f0 !important;
    margin-top: 1rem !important;
    border-radius: 8px !important;
  }
  
  .main-navigation .nav-menu.toggled-on li {
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }
  
  .main-navigation .nav-menu.toggled-on li:last-child {
    border-bottom: none !important;
  }
  
  .main-navigation .nav-menu.toggled-on a {
    display: block !important;
    padding: 0.75rem !important;
  }
}

/* Hide menu button on desktop */
@media screen and (min-width: 783px) {
  .menu-toggle {
    display: none !important;
  }
  
  .main-navigation .nav-menu {
    display: flex !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   END MOBILE MENU FIX
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   INSIGHTS FILTER - MOBILE FIX
   Add this to your ar-custom.css (or replace existing filter CSS)
   ═══════════════════════════════════════════════════════════════ */

/* Filter Bar - Base Styles */
.insight-filter-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.5rem;
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.filter-label {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 0.95rem;
  width: 100%; /* Forces label to its own line on mobile */
  margin-bottom: 0.5rem;
}

.filter-buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex: 1;
  width: 100%; /* Full width on mobile */
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--color-text-secondary);
  background: white;
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.filter-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.filter-btn.active {
  background: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.filter-icon {
  font-size: 1.1rem;
  line-height: 1;
}

/* MOBILE OPTIMIZATION */
@media (max-width: 768px) {
  .insight-filter-bar {
    padding: 1rem;
    gap: 1rem;
  }
  
  .filter-label {
    font-size: 0.875rem;
    width: 100%;
    text-align: left;
    margin-bottom: 0.75rem;
  }
  
  .filter-buttons {
    width: 100%;
    gap: 0.5rem;
  }
  
  .filter-btn {
    flex: 1 1 calc(50% - 0.25rem); /* 2 buttons per row */
    min-width: 0;
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    justify-content: center;
  }
  
  /* First button (All Articles) takes full width */
  .filter-btn:first-child {
    flex: 1 1 100%;
  }
}

/* VERY SMALL MOBILE */
@media (max-width: 480px) {
  .insight-filter-bar {
    padding: 0.875rem;
  }
  
  .filter-label {
    font-size: 0.8rem;
  }
  
  .filter-btn {
    flex: 1 1 100%; /* Stack all buttons vertically */
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
  }
  
  .filter-icon {
    font-size: 1rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   END INSIGHTS FILTER MOBILE FIX
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   SINGLE POST - CATEGORY BADGE
   Add this to your ar-custom.css (REPLACE the previous single post CSS)
   ═══════════════════════════════════════════════════════════════ */

/* Single post layout - matches template-fullwidth-custom structure */
body.single #primary.site-content {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

body.single #content {
  padding: 3rem 2rem !important;
}

body.single article {
  max-width: 100% !important;
}

/* Category badge and date */
.insight-single-meta {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  margin-bottom: 1.5rem !important;
  flex-wrap: wrap !important;
}

.insight-category-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: 8px !important;
  border: 1px solid !important;
  text-decoration: none !important;
  transition: all var(--transition-base) !important;
}

.insight-category-badge:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

.insight-category-badge .badge-icon {
  font-size: 1rem !important;
  line-height: 1 !important;
}

.post-date {
  font-size: 0.875rem !important;
  color: var(--color-text-tertiary) !important;
  font-weight: 500 !important;
}

/* Post title */
body.single .entry-title {
  font-family: var(--font-display) !important;
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  line-height: 1.2 !important;
  margin-bottom: 2rem !important;
  margin-top: 0 !important;
}

/* Post content */
body.single .entry-content {
  font-size: 1.1rem !important;
  line-height: 1.8 !important;
  color: var(--color-text-primary) !important;
  margin-bottom: 3rem !important;
}

body.single .entry-content p {
  margin-bottom: 1.5rem !important;
}

body.single .entry-content h2 {
  font-size: 2rem !important;
  font-weight: 700 !important;
  margin-top: 2.5rem !important;
  margin-bottom: 1rem !important;
}

body.single .entry-content h3 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin-top: 2rem !important;
  margin-bottom: 0.875rem !important;
}

/* Previous/Next navigation */
body.single .nav-single {
  display: flex !important;
  justify-content: space-between !important;
  padding: 2rem 0 !important;
  border-top: 2px solid var(--color-border-light) !important;
  margin-top: 2rem !important;
}

body.single .nav-single a {
  color: var(--color-accent) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

body.single .nav-single a:hover {
  color: var(--color-accent-dark) !important;
}

body.single .nav-previous {
  text-align: left !important;
}

body.single .nav-next {
  text-align: right !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
  body.single #content {
    padding: 2rem 1rem !important;
  }
  
  body.single .entry-title {
    font-size: 2rem !important;
  }
  
  body.single .entry-content {
    font-size: 1rem !important;
  }
  
  .insight-single-meta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }
  
  body.single .nav-single {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  body.single .nav-next {
    text-align: left !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   END SINGLE POST STYLING
   ═══════════════════════════════════════════════════════════════ */