/* MYASIA Custom Theme - Clean & Sophisticated White */
/* Minimalist elegance with the logo's charcoal gray accent */

:root {
  --bg-white: #FFFFFF;
  --bg-light: #FAFAFA;
  --bg-subtle: #F5F5F5;
  --primary-charcoal: #3D3D3D;
  --secondary-gray: #5A5A5A;
  --text-dark: #2D2D2D;
  --text-body: #4A4A4A;
  --text-muted: #888888;
  --border-light: #E8E8E8;
  --border-medium: #D0D0D0;
}

/* ===== BODY ===== */
body {
  background: var(--bg-white) !important;
  color: var(--text-dark) !important;
}

/* ===== HEADER ===== */
header,
header.bg-black\/80,
header.bg-transparent {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--border-light) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
}

/* Ensure body has padding for fixed header */
body {
  padding-top: 64px !important;
}

nav a,
nav span,
nav button {
  color: var(--text-body) !important;
}

nav a:hover,
nav button:hover {
  color: var(--primary-charcoal) !important;
}

/* Header logo - use image */
nav a.relative.group {
  display: flex !important;
  align-items: center !important;
}

nav a.relative.group span.absolute {
  display: none !important;
}

nav a span.text-xl.font-bold {
  font-size: 0 !important;
  display: block !important;
  width: 200px !important;
  height: 45px !important;
  background-image: url('/images/myasia_logo_yoko.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
}

/* Footer logo - use image */
footer a span.text-2xl.font-bold.gradient-text {
  font-size: 0 !important;
  display: block !important;
  width: 200px !important;
  height: 45px !important;
  background-image: url('/images/myasia_logo_yoko.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

/* ===== HERO SECTION ===== */
section.min-h-screen {
  background: linear-gradient(180deg, var(--bg-white) 0%, var(--bg-light) 100%) !important;
  min-height: 100vh !important;
}

section.min-h-screen > div.absolute.inset-0.bg-cover {
  opacity: 0.04 !important;
  filter: grayscale(100%) !important;
}

section.min-h-screen > div.absolute.inset-0.bg-gradient-to-br,
section.min-h-screen > div.absolute.inset-0[class*="from-slate"],
section.min-h-screen > div.absolute.inset-0[class*="bg-gradient"] {
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,250,250,0.92)) !important;
}

/* Hero decorative blurs - very subtle */
section.min-h-screen div.bg-cyan-500\/20,
section.min-h-screen div.bg-blue-500\/20,
section.min-h-screen div.bg-purple-500\/15 {
  background: rgba(61, 61, 61, 0.03) !important;
}

/* Grid pattern - minimal */
.grid-pattern {
  background-image: linear-gradient(rgba(61,61,61,0.02) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(61,61,61,0.02) 1px, transparent 1px) !important;
}

/* ===== GRADIENT TEXT - Charcoal ===== */
.gradient-text,
span.gradient-text {
  background: none !important;
  color: var(--primary-charcoal) !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

/* ===== TEXT COLORS ===== */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-dark) !important;
}

h1 span.text-white,
section.min-h-screen .text-white,
.text-white {
  color: var(--text-dark) !important;
}

p {
  color: var(--text-body) !important;
}

.text-gray-200,
.text-gray-300 {
  color: var(--text-body) !important;
}

.text-gray-400,
.text-gray-500 {
  color: var(--text-muted) !important;
}

.text-cyan-400 {
  color: var(--secondary-gray) !important;
}

/* ===== BUTTONS ===== */
/* Primary - Solid charcoal */
a.bg-gradient-to-r.from-cyan-500,
.bg-gradient-to-r.from-cyan-500.to-blue-500,
a.inline-flex.items-center.justify-center.gap-2.px-8.py-4.bg-gradient-to-r {
  background: var(--primary-charcoal) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(61, 61, 61, 0.15) !important;
  border: none !important;
}

a.bg-gradient-to-r.from-cyan-500:hover,
.bg-gradient-to-r.from-cyan-500.to-blue-500:hover {
  background: var(--secondary-gray) !important;
  box-shadow: 0 4px 15px rgba(61, 61, 61, 0.2) !important;
}

/* Secondary - Outlined */
a.bg-white\/10,
.bg-white\/10.border {
  background: transparent !important;
  border: 1px solid var(--border-medium) !important;
  color: var(--text-dark) !important;
}

a.bg-white\/10:hover,
.bg-white\/10:hover {
  background: var(--bg-subtle) !important;
  border-color: var(--primary-charcoal) !important;
}

/* Tag/badge */
.rounded-full.bg-white\/10 {
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border-light) !important;
}

/* ===== STATS SECTION ===== */
section.bg-slate-800\/50 {
  background: var(--bg-subtle) !important;
  border-top: 1px solid var(--border-light) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

/* ===== GLASS CARDS ===== */
.glass-card {
  background: var(--bg-white) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  backdrop-filter: none !important;
}

.glass-card:hover {
  border-color: var(--border-medium) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
}

.glass-card h3,
.glass-card .text-xl {
  color: var(--text-dark) !important;
}

.glass-card p {
  color: var(--text-body) !important;
}

/* ===== SECTIONS ===== */
section.py-24,
section.py-20 {
  background: var(--bg-white) !important;
}

/* Alternate section backgrounds for rhythm */
section#services {
  background: var(--bg-light) !important;
}

section#company {
  background: var(--bg-white) !important;
}

/* Decorative blurs */
div.bg-cyan-500\/20,
div.bg-blue-500\/20,
div.bg-purple-500\/15,
div.bg-cyan-500\/10,
div.bg-blue-500\/10,
div.bg-purple-500\/10 {
  background: rgba(61, 61, 61, 0.02) !important;
}

/* ===== ICONS ===== */
.bg-gradient-to-br.from-cyan-500.to-blue-500,
.bg-gradient-to-br.from-cyan-500,
div.rounded-full.bg-gradient-to-br,
div.inline-flex.items-center.justify-center.rounded-full.bg-gradient-to-br {
  background: var(--primary-charcoal) !important;
}

.bg-gradient-to-r.from-cyan-500.to-blue-500.flex.items-center.justify-center {
  background: var(--primary-charcoal) !important;
}

/* Service icons */
.from-emerald-500.to-green-500,
.from-amber-600.to-yellow-700,
.from-emerald-400.to-teal-500,
.from-orange-500.to-red-500,
.from-slate-500.to-slate-700 {
  background: var(--primary-charcoal) !important;
}

/* Service image containers */
.bg-slate-800 {
  background: var(--bg-subtle) !important;
}

/* ===== FOOTER ===== */
footer,
footer.bg-black {
  background: var(--bg-subtle) !important;
  border-top: 1px solid var(--border-light) !important;
}

footer .gradient-text {
  background: none !important;
  color: var(--primary-charcoal) !important;
}

footer p,
footer a,
footer h4 {
  color: var(--text-body) !important;
}

footer .text-white {
  color: var(--text-dark) !important;
}

footer .text-gray-400,
footer .text-gray-500 {
  color: var(--text-muted) !important;
}

footer a:hover {
  color: var(--primary-charcoal) !important;
}

footer > div.absolute.bg-gradient-to-r {
  background: linear-gradient(to right, transparent, var(--border-medium), transparent) !important;
}

/* ===== CTA SECTION ===== */
section.py-24.overflow-hidden,
section.py-24.relative.overflow-hidden {
  background: var(--bg-light) !important;
}

section.py-24.overflow-hidden > div.absolute.inset-0.bg-cover {
  opacity: 0.03 !important;
  filter: grayscale(100%) !important;
}

section.py-24.overflow-hidden > div.absolute.inset-0.bg-gradient-to-r {
  background: linear-gradient(to right, rgba(250,250,250,0.97), rgba(245,245,245,0.95)) !important;
}

section.py-24.relative.overflow-hidden h2 {
  color: var(--text-dark) !important;
}

section.py-24.relative.overflow-hidden p {
  color: var(--text-body) !important;
}

section.py-24.relative.overflow-hidden a.bg-gradient-to-r {
  background: var(--primary-charcoal) !important;
  color: #FFFFFF !important;
}

/* ===== ANIMATED GRADIENT ===== */
.animated-gradient {
  background: linear-gradient(-45deg, #FAFAFA, #F5F5F5, #FAFAFA, #F0F0F0) !important;
}

/* Force all page header backgrounds to white */
section.relative.overflow-hidden,
section.relative.py-16.overflow-hidden,
section.relative.py-24.overflow-hidden,
.pt-20 > section:first-child {
  background: var(--bg-white) !important;
}

.pt-20 > section:first-child > div.absolute {
  background: transparent !important;
  opacity: 0 !important;
}

/* ===== NEWS/ARTICLE ===== */
.bg-white\/10.text-gray-300 {
  background: var(--bg-subtle) !important;
  color: var(--text-body) !important;
  border: 1px solid var(--border-light) !important;
}

/* ===== TIMELINE ===== */
.ring-black {
  --tw-ring-color: var(--bg-white) !important;
}

.bg-gradient-to-b.from-blue-500 {
  background: linear-gradient(to bottom, var(--primary-charcoal), var(--secondary-gray), var(--primary-charcoal)) !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar-track {
  background: var(--bg-light) !important;
}

::-webkit-scrollbar-thumb {
  background: var(--border-medium) !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted) !important;
}

/* ===== MOBILE MENU ===== */
.md\:hidden.overflow-hidden,
div.md\:hidden {
  background: #FFFFFF !important;
}

/* Hamburger menu button - visible on mobile */
header button.md\:hidden,
nav button.md\:hidden {
  color: var(--text-dark) !important;
}

header button.md\:hidden svg,
nav button.md\:hidden svg {
  color: var(--text-dark) !important;
}

/* Mobile menu - ensure it's below header */
header + div.md\:hidden,
header ~ div.md\:hidden {
  background: #FFFFFF !important;
  border-top: 1px solid var(--border-light) !important;
}

/* Mobile menu items - ensure visibility */
div.md\:hidden a,
div.md\:hidden nav a,
div.md\:hidden button {
  color: var(--text-dark) !important;
  font-weight: 500 !important;
}

/* Active nav item - high contrast */
.bg-white\/10.rounded-lg,
nav a.bg-white\/10,
div.md\:hidden .bg-white\/10,
div.md\:hidden a.bg-white\/10,
a.bg-white\/10.rounded-lg {
  background: var(--primary-charcoal) !important;
  color: #FFFFFF !important;
}

.bg-white\/10.rounded-lg span,
nav a.bg-white\/10 span,
div.md\:hidden .bg-white\/10 span,
div.md\:hidden a.bg-white\/10,
a.bg-white\/10.rounded-lg span {
  color: #FFFFFF !important;
}

/* ===== SHADOWS ===== */
.shadow-lg.shadow-cyan-500\/25,
.shadow-cyan-500\/25 {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}

.glow {
  box-shadow: none !important;
}

/* ===== BORDERS ===== */
.border-white\/10,
.border-white\/20,
.border-white\/30 {
  border-color: var(--border-light) !important;
}

/* ===== SERVICE DESCRIPTIONS ===== */
.text-lg.text-cyan-400 {
  color: var(--secondary-gray) !important;
}

.text-gray-300.leading-relaxed,
.leading-relaxed {
  color: var(--text-body) !important;
}

/* Links in content */
article a,
.glass-card a {
  color: var(--primary-charcoal) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

article a:hover,
.glass-card a:hover {
  color: var(--secondary-gray) !important;
}

/* Article buttons - ensure white text on dark bg */
article a.inline-flex,
article a.rounded-full,
.glass-card a.inline-flex,
.glass-card a.rounded-full {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

article a.inline-flex:hover,
.glass-card a.inline-flex:hover {
  color: #FFFFFF !important;
}

/* ===== PAGE HEADERS ===== */
section.relative.py-24.overflow-hidden > div.absolute.animated-gradient {
  opacity: 1 !important;
}

/* ===== TYPOGRAPHY - Line height and spacing ===== */
body {
  line-height: 1.8 !important;
}

p {
  line-height: 1.9 !important;
  margin-bottom: 1rem !important;
}

h1 {
  line-height: 1.3 !important;
}

h2 {
  line-height: 1.4 !important;
  margin-bottom: 1rem !important;
}

h3, h4, h5, h6 {
  line-height: 1.5 !important;
}

/* Article/Privacy content spacing */
article p,
.glass-card p {
  margin-bottom: 0.75rem !important;
}

article h2 {
  margin-top: 1.5rem !important;
  margin-bottom: 0.5rem !important;
}

article ul, article ol {
  margin-bottom: 0.75rem !important;
  line-height: 1.8 !important;
}

article li {
  margin-bottom: 0.25rem !important;
}

/* Privacy policy specific - reduce section spacing */
.glass-card article h2,
.glass-card h2,
.glass-card section h2 {
  margin-top: 0.75rem !important;
  margin-bottom: 0.25rem !important;
}

/* Privacy policy sections spacing */
.glass-card .space-y-10 > * + *,
.glass-card div.space-y-10 > section + section {
  margin-top: 1rem !important;
}

.glass-card article p:last-of-type,
.glass-card p:last-of-type {
  margin-bottom: 0 !important;
}

/* Reduce excessive spacing between sections */
.space-y-10 > * + * {
  margin-top: 1rem !important;
}

.space-y-8 > * + * {
  margin-top: 0.75rem !important;
}

.space-y-6 > * + * {
  margin-top: 0.5rem !important;
}

.mb-8 {
  margin-bottom: 1.5rem !important;
}

.mb-6 {
  margin-bottom: 1rem !important;
}

/* Reduce spacing on subpages (About, News, Privacy, etc.) */
.pt-20 section.relative.py-24.overflow-hidden,
.pt-20 section.relative.py-24.md\:py-32.overflow-hidden {
  padding-top: 3rem !important;
  padding-bottom: 2rem !important;
}

.pt-20 section.py-20 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.pt-20 section.py-12 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

/* Reduce all section spacing on inner pages */
.pt-20 ~ section,
.pt-20 section {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

/* Page header sections */
.pt-20 > section:first-child {
  padding-top: 2rem !important;
  padding-bottom: 1.5rem !important;
}

/* ===== LOGO IMAGE INVERT FIX ===== */
/* Akabuy logo - don't invert on light background */
img[style*="invert"] {
  filter: none !important;
}

/* ===== HIDE SERVICE ICON BADGES ===== */
/* Remove the icon badges in bottom-left of service images */
.aspect-video .absolute.bottom-4.left-4,
div.relative.overflow-hidden.rounded-2xl.aspect-video > div.absolute.bottom-4 {
  display: none !important;
}

/* Icons - white icon on charcoal background */
.bg-gradient-to-br svg,
div.rounded-full.bg-gradient-to-br svg,
div.inline-flex.items-center.justify-center.rounded-full svg {
  color: #FFFFFF !important;
}

/* Company info icons - lighter style */
div.w-10.h-10.rounded-lg {
  background: var(--bg-subtle) !important;
}

div.w-10.h-10.rounded-lg svg {
  color: var(--primary-charcoal) !important;
}

/* ALL BUTTONS - ensure visibility */
/* Primary buttons with gradient or solid background */
a.inline-flex.items-center.justify-center,
a.group.inline-flex,
button.inline-flex,
a.rounded-full.inline-flex,
a.inline-flex.gap-2,
a[class*="rounded-full"][class*="px-"],
a[class*="bg-gradient"],
a[class*="bg-white/10"] {
  background: var(--primary-charcoal) !important;
  color: #FFFFFF !important;
}

a.inline-flex.items-center.justify-center:hover,
a.group.inline-flex:hover,
a.rounded-full.inline-flex:hover,
a[class*="rounded-full"][class*="px-"]:hover,
a[class*="bg-gradient"]:hover {
  background: var(--secondary-gray) !important;
  color: #FFFFFF !important;
}

/* Button icons */
a.inline-flex svg,
a.group.inline-flex svg,
a.rounded-full svg,
a[class*="bg-gradient"] svg {
  color: #FFFFFF !important;
}

/* Secondary/outline buttons */
a.border.rounded-full,
a[class*="border"][class*="rounded"] {
  background: transparent !important;
  border: 2px solid var(--primary-charcoal) !important;
  color: var(--primary-charcoal) !important;
}

a.border.rounded-full:hover,
a[class*="border"][class*="rounded"]:hover {
  background: var(--primary-charcoal) !important;
  color: #FFFFFF !important;
}

/* Override ALL gradient buttons in articles (orange, green, slate, etc.) */
a[class*="from-orange"],
a[class*="from-emerald"],
a[class*="from-slate"],
a[class*="from-teal"],
a[class*="from-green"],
a[class*="from-red"],
a[class*="from-blue"],
a[class*="from-cyan"],
article a[class*="rounded-full"],
.glass-card a[class*="rounded-full"] {
  background: var(--primary-charcoal) !important;
  color: #FFFFFF !important;
}

a[class*="from-orange"]:hover,
a[class*="from-emerald"]:hover,
a[class*="from-slate"]:hover,
a[class*="from-teal"]:hover {
  background: var(--secondary-gray) !important;
}

/* Media page service cards - fix dark bg with unreadable text */
a.block.p-6.rounded-xl,
a.block.rounded-xl,
a[class*="bg-gradient"][class*="block"],
div.space-y-4 > a {
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border-light) !important;
}

a.block.p-6.rounded-xl h3,
a.block.p-6.rounded-xl p,
a.block.rounded-xl h3,
a.block.rounded-xl p,
div.space-y-4 > a h3,
div.space-y-4 > a p {
  color: var(--text-dark) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
}

a.block.p-6.rounded-xl:hover,
a.block.rounded-xl:hover,
div.space-y-4 > a:hover {
  background: var(--bg-light) !important;
  border-color: var(--border-medium) !important;
}

/* Service list items on media page */
.glass-card a.block,
.glass-card div > a.block {
  background: var(--bg-subtle) !important;
  color: var(--text-dark) !important;
}

.glass-card a.block span,
.glass-card a.block p {
  color: var(--text-body) !important;
}

/* ===== MOBILE STYLES ===== */
@media (max-width: 767px) {
  /* ----- HEADER FIX ----- */
  /* Header container */
  header {
    padding: 0.5rem 1rem !important;
    height: auto !important;
    min-height: 56px !important;
  }

  /* Header inner flex container */
  header > div,
  header > nav,
  header nav,
  header nav > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  /* Logo on left */
  header nav > a:first-child,
  nav a.relative.group {
    flex-shrink: 0 !important;
  }

  /* Hamburger menu on right */
  header nav > button,
  nav > button.md\\:hidden {
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  /* Logo - smaller on mobile */
  nav a span.text-xl.font-bold,
  header a span.text-xl.font-bold {
    width: 140px !important;
    height: 35px !important;
    background-size: contain !important;
  }

  /* Hide desktop nav items on mobile */
  header nav > div.hidden.md\:flex,
  nav > div.hidden.md\:flex {
    display: none !important;
  }

  /* Hamburger menu button - ensure visibility */
  header button.md\:hidden,
  nav button.md\:hidden,
  button[class*="md:hidden"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0.5rem !important;
    color: var(--text-dark) !important;
    background: transparent !important;
    border: none !important;
    flex-shrink: 0 !important;
  }

  /* ----- MOBILE MENU ----- */
  /* Mobile menu dropdown */
  div.md\:hidden[class*="overflow"],
  header + div.md\:hidden,
  header ~ div.md\:hidden {
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    background: #FFFFFF !important;
    border-top: 1px solid var(--border-light) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    z-index: 49 !important;
    padding: 1rem !important;
  }

  /* Mobile menu items */
  div.md\:hidden a,
  div.md\:hidden nav a {
    display: block !important;
    padding: 0.75rem 1rem !important;
    margin: 0.25rem 0 !important;
    border-radius: 8px !important;
    color: var(--text-dark) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
  }

  div.md\:hidden a:hover {
    background: var(--bg-subtle) !important;
  }

  /* Active menu item */
  div.md\:hidden a.bg-white\/10,
  div.md\:hidden .bg-white\/10 {
    background: var(--primary-charcoal) !important;
    color: #FFFFFF !important;
  }

  /* ----- CONTENT SPACING ----- */
  /* Body padding for fixed header */
  body {
    padding-top: 56px !important;
  }

  /* Section padding on mobile */
  section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Hero text sizing */
  section.min-h-screen h1 {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }

  section.min-h-screen p {
    font-size: 0.95rem !important;
  }

  /* ----- BUTTONS ON MOBILE ----- */
  /* Full width buttons on mobile */
  section a.inline-flex,
  section a[class*="rounded-full"][class*="px-"] {
    width: 100% !important;
    max-width: 300px !important;
    justify-content: center !important;
    padding: 0.875rem 1.5rem !important;
    font-size: 0.9rem !important;
  }

  /* Button spacing */
  a.inline-flex.items-center.justify-center.gap-2,
  a.inline-flex.items-center.gap-2 {
    margin-top: 1rem !important;
  }

  /* ----- EMAIL BOX ON MOBILE ----- */
  div.bg-white.rounded-2xl,
  div.bg-white.rounded-xl {
    padding: 1rem !important;
  }

  div.bg-white.rounded-2xl > div,
  div.bg-white.rounded-xl > div {
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.75rem !important;
  }

  /* Email icon centering on mobile */
  div.w-12.h-12,
  div.w-10.h-10 {
    margin: 0 auto !important;
  }

  /* ----- HIDE ICONS IN SERVICE LIST ----- */
  .space-y-4 > a svg,
  .glass-card .space-y-4 a svg {
    display: none !important;
  }

  .space-y-4 > a > div:first-child {
    flex: 1 !important;
    max-width: 100% !important;
  }

  /* ----- FOOTER ON MOBILE ----- */
  footer {
    padding: 2rem 1rem !important;
  }

  footer .grid {
    gap: 1.5rem !important;
  }

  /* Footer logo */
  footer a span.text-2xl.font-bold.gradient-text {
    width: 150px !important;
    height: 38px !important;
  }
}

/* ===== FIX: Text contrast on sections ===== */
/* Ensure all text is readable - force light backgrounds */
section,
div[class*="bg-slate"],
div[class*="bg-gray"],
div[class*="bg-black"] {
  background-color: var(--bg-white) !important;
}

/* Remove all dark overlays on all pages */
section > div.absolute.inset-0.animated-gradient,
section > div.absolute.inset-0.grid-pattern,
section > div.absolute.inset-0[class*="bg-gradient"],
section > div.absolute.inset-0[class*="from-slate"],
section > div.absolute.inset-0[class*="via-blue"] {
  background: transparent !important;
  opacity: 0.03 !important;
}

/* Dark text on all sections */
section h2,
section h3,
section h4,
section p,
section span,
section a:not([class*="rounded-full"]):not([class*="inline-flex"]) {
  color: var(--text-dark) !important;
}

/* ===== FIX: Button spacing - more margin above buttons ===== */
/* Add spacing before buttons in content sections */
a.inline-flex.items-center.justify-center.gap-2,
a.inline-flex.items-center.gap-2,
a[class*="rounded-full"][class*="px-"][class*="py-"],
.glass-card a.inline-flex,
article a.inline-flex {
  margin-top: 1.5rem !important;
}

/* Specific fix for brand asset and press contact sections */
section a[href*="mailto"],
section a[download],
a[class*="gap-2"][class*="rounded-full"] {
  margin-top: 1.25rem !important;
}

/* ===== FIX: Email contact box styling ===== */
/* Center align email icon and text properly */
div.flex.items-center.gap-4,
div.flex.items-center.gap-3 {
  align-items: center !important;
  justify-content: center !important;
}

/* Email box - icon alignment fix */
div.rounded-2xl > div.flex,
div.rounded-xl > div.flex,
div[class*="rounded"] > div.flex.items-center,
div.flex.items-start.gap-4,
.glass-card div.flex.items-start {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 1rem !important;
}

/* Email icon container - center vertically */
div.w-12.h-12,
div.w-10.h-10,
div[class*="rounded-full"][class*="flex"][class*="items-center"][class*="justify-center"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Email section specific styling */
div.bg-white.rounded-2xl,
div.bg-white.rounded-xl,
div[class*="rounded-2xl"][class*="shadow"],
div[class*="rounded-xl"][class*="shadow"] {
  background: var(--bg-white) !important;
  border: 1px solid var(--border-light) !important;
  padding: 1.5rem !important;
}

/* Email text alignment */
div.bg-white.rounded-2xl > div,
div.bg-white.rounded-xl > div {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

/* Icon inside email box - ensure centering */
div.bg-white.rounded-2xl svg,
div.bg-white.rounded-xl svg,
div[class*="rounded-2xl"] div[class*="rounded-full"] svg {
  display: block !important;
  margin: auto !important;
}

/* ===== FIX: Contact section layout ===== */
/* Press/Media contact section improvements */
section div.text-center a[href*="mailto"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  margin-top: 1.5rem !important;
}

/* Email button icon centering */
a[href*="mailto"] svg {
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* ===== FIX: Subpage header backgrounds ===== */
section.relative.overflow-hidden,
section.relative.py-16.overflow-hidden,
section.relative.py-24.overflow-hidden,
.pt-20 > section:first-child {
  background: #FFFFFF !important;
}

.pt-20 > section:first-child > div.absolute {
  background: transparent !important;
  opacity: 0 !important;
}

/* Remove all dark overlays on all pages */
section > div.absolute.inset-0.animated-gradient,
section > div.absolute.inset-0.grid-pattern,
section > div.absolute.inset-0[class*="bg-gradient"],
section > div.absolute.inset-0[class*="from-slate"],
section > div.absolute.inset-0[class*="via-blue"] {
  background: transparent !important;
  opacity: 0 !important;
}

/* ===== FORCE FIX: All dark backgrounds ===== */
.animated-gradient,
div.animated-gradient,
div.absolute.inset-0.animated-gradient,
[class*="animated-gradient"] {
  background: #FFFFFF !important;
  opacity: 1 !important;
}

.grid-pattern,
div.grid-pattern,
div.absolute.inset-0.grid-pattern,
[class*="grid-pattern"] {
  background-image: none !important;
  background: transparent !important;
}

div.absolute.inset-0 {
  background: transparent !important;
}

.pt-20 section.relative {
  background: #FFFFFF !important;
}