@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }

  html,
  body {
    background:
      radial-gradient(circle at 14% 6%, rgba(191, 86, 125, 0.2), transparent 28rem),
      radial-gradient(circle at 88% 20%, rgba(217, 176, 195, 0.14), transparent 24rem),
      linear-gradient(180deg, #120f14 0%, #1a1219 48%, #100d12 100%) !important;
    color: #f7eaf1 !important;
  }

  body :is(h1, h2, h3, h4, h5, h6, p, li, span, label, small, strong, em, blockquote, cite),
  .text-brand-primary,
  .prose,
  .prose :is(h1, h2, h3, h4, p, li, strong) {
    color: #f7eaf1 !important;
  }

  a,
  .hover\:text-brand-secondary:hover {
    color: #ffb3d2 !important;
  }

  a:hover {
    color: #ffe6f0 !important;
  }

  nav,
  nav[class*="bg-"],
  #mobile-menu,
  #mobile-menu[class*="bg-"] {
    background: rgba(22, 16, 24, 0.78) !important;
    border-color: rgba(255, 214, 231, 0.2) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42) !important;
  }

  nav {
    backdrop-filter: blur(18px) saturate(140%);
  }

  nav img[alt*="logo"] {
    filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(255, 179, 210, 0.28)) !important;
  }

  #menu-button {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 214, 231, 0.28) !important;
    color: #f7eaf1 !important;
  }

  main,
  main[class*="bg-"],
  section,
  section[class*="bg-"],
  .hero-section,
  .page-header-design {
    background-color: transparent !important;
  }

  .hero-section,
  .page-header-design {
    background:
      radial-gradient(circle at 8% 22%, rgba(240, 141, 182, 0.2), transparent 18rem),
      radial-gradient(circle at 86% 62%, rgba(115, 70, 82, 0.36), transparent 22rem),
      linear-gradient(135deg, rgba(30, 22, 32, 0.9), rgba(18, 15, 20, 0.88)) !important;
  }

  .hero-section::before,
  .hero-section::after,
  .page-header-design::after {
    opacity: 0.55 !important;
    filter: saturate(1.25) brightness(1.2);
  }

  .hero-solid-round {
    background-color: rgba(255, 179, 210, 0.13) !important;
    box-shadow: 0 0 60px rgba(255, 179, 210, 0.12);
  }

  img[src$="missionimage.svg"] {
    filter: brightness(1.28) contrast(1.08) saturate(1.12) drop-shadow(0 22px 38px rgba(255, 179, 210, 0.2)) !important;
    opacity: 1 !important;
  }

  article,
  .services-carousel-card,
  main .grid > div[class*="rounded"],
  main div[class*="rounded-xl"],
  main div[class*="rounded-2xl"],
  .prose,
  form,
  .bg-white,
  .bg-rose-50,
  [class*="bg-rose-50"] {
    background: linear-gradient(180deg, rgba(43, 33, 45, 0.96), rgba(31, 24, 34, 0.96)) !important;
    border-color: rgba(255, 214, 231, 0.18) !important;
    color: #f7eaf1 !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3) !important;
  }

  article:hover,
  main .grid > div[class*="rounded"]:hover,
  .services-carousel-card:hover {
    border-color: rgba(255, 179, 210, 0.48) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.44), 0 0 0 1px rgba(255, 179, 210, 0.12) !important;
  }

  .border-brand-primary,
  .border-rose-200,
  .border-white\/60 {
    border-color: rgba(255, 214, 231, 0.24) !important;
  }

  .bg-brand-primary,
  a.bg-brand-primary,
  button.bg-brand-primary {
    background: linear-gradient(135deg, #9a4f70, #c0628a) !important;
    color: #ffffff !important;
    border-color: rgba(255, 214, 231, 0.18) !important;
    box-shadow: 0 12px 28px rgba(191, 86, 125, 0.25) !important;
  }

  .bg-brand-primary:hover,
  a.bg-brand-primary:hover,
  button.bg-brand-primary:hover {
    background: linear-gradient(135deg, #b65d83, #df7aa6) !important;
    color: #ffffff !important;
  }

  a.border-brand-primary,
  button.border-brand-primary,
  .mobile-contact-cta {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffe6f0 !important;
    border-color: rgba(255, 179, 210, 0.52) !important;
  }

  a.border-brand-primary:hover,
  button.border-brand-primary:hover,
  .mobile-contact-cta:hover {
    background: rgba(255, 179, 210, 0.16) !important;
    color: #ffffff !important;
  }

  input,
  textarea,
  select {
    background: rgba(17, 13, 19, 0.86) !important;
    border-color: rgba(255, 214, 231, 0.22) !important;
    color: #f7eaf1 !important;
  }

  input::placeholder,
  textarea::placeholder {
    color: #d7b8c8 !important;
  }

  input:focus,
  textarea:focus,
  select:focus {
    border-color: #ffb3d2 !important;
    box-shadow: 0 0 0 3px rgba(255, 179, 210, 0.18) !important;
  }

  .services-carousel-dot {
    background-color: rgba(255, 214, 231, 0.35) !important;
  }

  .services-carousel-dot.is-active {
    background-color: #ffb3d2 !important;
  }

  .services-carousel-control {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 214, 231, 0.24) !important;
    color: #f7eaf1 !important;
  }

  .bg-rose-100,
  .bg-amber-100,
  .bg-emerald-100,
  .bg-blue-100,
  .bg-violet-100,
  [class*="bg-rose-100"],
  [class*="bg-amber-100"],
  [class*="bg-emerald-100"],
  [class*="bg-blue-100"],
  [class*="bg-violet-100"],
  .portfolio-after-status {
    background: rgba(255, 179, 210, 0.16) !important;
    border: 1px solid rgba(255, 179, 210, 0.25) !important;
    color: #ffe6f0 !important;
  }

  .portfolio-after-card,
  .portfolio-process-panel,
  .portfolio-after-note,
  .portfolio-after-row,
  .portfolio-after-metric,
  .portfolio-after-table table,
  .portfolio-after-table th,
  .portfolio-after-table td {
    background-color: rgba(17, 13, 19, 0.42) !important;
    border-color: rgba(255, 214, 231, 0.16) !important;
    color: #f7eaf1 !important;
  }

  .portfolio-after-dot {
    background-color: #ffb3d2 !important;
    box-shadow: 0 0 12px rgba(255, 179, 210, 0.35);
  }

  /* Portfolio case studies use many nested light utility panels. Keep the whole card stack dark. */
  body:has(main [aria-label="Portfolio Case Studies"]) main,
  main [aria-label="Portfolio Case Studies"],
  main [aria-label="Portfolio Summary"],
  main [aria-label="Portfolio Case Studies"] article,
  main [aria-label="Portfolio Case Studies"] .portfolio-case-grid > div,
  main [aria-label="Portfolio Case Studies"] .portfolio-process-card,
  main [aria-label="Portfolio Case Studies"] [class*="bg-white"],
  main [aria-label="Portfolio Case Studies"] [class*="bg-slate-"],
  main [aria-label="Portfolio Case Studies"] [class*="bg-rose-50"],
  main [aria-label="Portfolio Case Studies"] [class*="bg-emerald-50"],
  main [aria-label="Portfolio Summary"] [class*="bg-white"] {
    background: linear-gradient(180deg, #201821 0%, #171219 100%) !important;
    border-color: rgba(255, 214, 231, 0.18) !important;
    color: #f8edf3 !important;
  }

  main [aria-label="Portfolio Case Studies"] article {
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  }

  main [aria-label="Portfolio Case Studies"] .mb-5.rounded-xl,
  main [aria-label="Portfolio Case Studies"] .mb-4.rounded-xl,
  main [aria-label="Portfolio Case Studies"] .portfolio-after-card,
  main [aria-label="Portfolio Case Studies"] .portfolio-process-panel,
  main [aria-label="Portfolio Case Studies"] .portfolio-after-metric,
  main [aria-label="Portfolio Case Studies"] .portfolio-after-row,
  main [aria-label="Portfolio Case Studies"] .portfolio-after-note,
  main [aria-label="Portfolio Case Studies"] .portfolio-after-table table,
  main [aria-label="Portfolio Case Studies"] .overflow-hidden,
  main [aria-label="Portfolio Case Studies"] .rounded-lg {
    background: #120f14 !important;
    border-color: rgba(255, 214, 231, 0.16) !important;
    color: #f8edf3 !important;
    box-shadow: none !important;
  }

  main [aria-label="Portfolio Case Studies"] thead,
  main [aria-label="Portfolio Case Studies"] th,
  main [aria-label="Portfolio Case Studies"] td,
  main [aria-label="Portfolio Case Studies"] tr,
  main [aria-label="Portfolio Case Studies"] li,
  main [aria-label="Portfolio Case Studies"] p,
  main [aria-label="Portfolio Case Studies"] strong,
  main [aria-label="Portfolio Case Studies"] h3,
  main [aria-label="Portfolio Case Studies"] h4,
  main [aria-label="Portfolio Summary"] p,
  main [aria-label="Portfolio Summary"] strong,
  main [aria-label="Portfolio Summary"] h3 {
    color: #f8edf3 !important;
    border-color: rgba(255, 214, 231, 0.14) !important;
  }

  main [aria-label="Portfolio Case Studies"] th,
  main [aria-label="Portfolio Case Studies"] thead,
  main [aria-label="Portfolio Case Studies"] .portfolio-process-checklist li {
    background: #251b26 !important;
  }

  main [aria-label="Portfolio Case Studies"] .rounded-full,
  main [aria-label="Portfolio Case Studies"] .portfolio-after-status {
    background: rgba(255, 179, 210, 0.18) !important;
    border: 1px solid rgba(255, 179, 210, 0.32) !important;
    color: #ffeaf3 !important;
  }

  footer,
  footer.bg-brand-primary {
    background: linear-gradient(180deg, #211620 0%, #120d13 100%) !important;
    border-top: 1px solid rgba(255, 214, 231, 0.16);
  }

  footer:hover,
  footer:focus-within,
  footer *:hover,
  footer *:focus,
  footer *:focus-visible {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
  }

  footer:hover,
  footer:focus-within {
    background: linear-gradient(180deg, #211620 0%, #120d13 100%) !important;
  }

  footer :is(h1, h2, h3, h4, p, li, a, span),
  footer .text-white,
  footer .text-brand-light {
    color: #f7eaf1 !important;
  }

  footer a:hover {
    color: #ffffff !important;
  }

  .sr-only:focus,
  .focus\:bg-white:focus {
    background: #211620 !important;
    color: #ffffff !important;
  }
}