/* =========================================================
   SISSEI DARK MODE THEME — GLOBAL
   ========================================================= */

   body.dark {
    color: #e2e8f0; /* soft Apple gray */
  }
  
  /* Background gradient */
  body.dark .sissei-bg {
    background: linear-gradient(
      180deg,
      #0f172a 0%,
      #1a2535 30%,
      #243447 55%,
      #1c2a38 100%
    );
  }
  
  
  /* =========================================================
     DARK MODE — TOGGLE BUTTON
     ========================================================= */
  
  .dark-toggle-icon .moon-icon {
    font-size: 1rem;
    color: #336699;
    cursor: pointer;
    opacity: 0.75;
    transition: color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
  }
  
  .dark-toggle-icon .moon-icon:hover {
    opacity: 1;
  }
  
  /* Text version of toggle */
  .dark-toggle {
    margin-right: 1rem;
    font-size: 0.85rem;
    color: #336699;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.25s ease, color 0.25s ease;
  }
  
  .dark-toggle:hover {
    opacity: 1;
    color: #28507a;
  }
  
  /* Dark mode active state */
  body.dark .dark-toggle {
    color: #c2a15a;
  }
  
  body.dark .dark-toggle:hover {
    color: #e5c98a;
  }
  
  
  /* =========================================================
     DARK MODE — TYPOGRAPHY
     ========================================================= */
  
  body.dark .hero-title {
    color: #f1f5f9;
    text-shadow:
      0px 4px 12px rgba(0,0,0,0.45),
      0px 8px 24px rgba(0,0,0,0.35),
      0px 12px 32px rgba(194,161,90,0.12);
  }
  
  
  /* =========================================================
     DARK MODE — LANGUAGE SWITCHER
     ========================================================= */
  
  body.dark .lang-switch span {
    color: #c2a15a;
    opacity: 1;
  }
  
  body.dark .lang-switch span:hover {
    color: #e5c98a;
  }
  
  
  /* =========================================================
     DARK MODE — BUTTONS
     ========================================================= */
  
  body.dark .btn {
    background: #1e293b;
    border-color: #c2a15a;
    color: #c2a15a;
  }
  
  body.dark .btn:hover {
    background: #334155;
  }
  
  body.dark .btn-secondary {
    background: transparent;
    border-color: #c2a15a;
    color: #c2a15a;
  }
  
  body.dark .btn-secondary:hover {
    background: #c2a15a;
    color: #0f172a;
  }
  
  
  /* =========================================================
     DARK MODE — EHS SECTIONS (Homepage)
     ========================================================= */
  
  body.dark .ehs-section {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(14px);
    border-color: rgba(194, 161, 90, 0.25);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  }
  
  body.dark .ehs-title,
  body.dark .feature h3 {
    color: #e5c98a;
  }
  
  body.dark .ehs-description,
  body.dark .feature p {
    color: #e5e7eb;
  }
  
  
  /* =========================================================
     DARK MODE — NAVIGATION
     ========================================================= */
  
  body.dark header {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(194,161,90,0.18);
  }
  
  body.dark .logo {
    color: #e5c98a;
  }
  
  body.dark .menu-btn,
  body.dark .close-menu {
    color: #e2e8f0;
    opacity: 0.85;
  }
  
  body.dark .menu-btn:hover,
  body.dark .close-menu:hover {
    opacity: 1;
  }
  
  /* Slide-out menu */
  body.dark .menu-panel {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(18px);
    border-left: 1px solid rgba(194,161,90,0.18);
    box-shadow: -10px 0 40px rgba(0,0,0,0.4);
  }
  
  body.dark .side-nav a {
    color: #e5c98a;
    opacity: 0.85;
  }
  
  body.dark .side-nav a:hover {
    opacity: 1;
    transform: translateX(4px);
  }
/* =========================================================
   DARK MODE — HERO SECTION
   ========================================================= */

   body.dark .hero {
    color: #e2e8f0; /* soft Apple gray */
  }
  
  body.dark .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      circle at 50% 20%,
      rgba(194,161,90,0.08),
      transparent 70%
    );
    pointer-events: none;
    z-index: -1;
  }
  
  body.dark .hero-title {
    color: #e5c98a; /* Hermès gold */
    text-shadow:
      0px 4px 12px rgba(0,0,0,0.45),
      0px 8px 24px rgba(0,0,0,0.35),
      0px 12px 32px rgba(194,161,90,0.12);
  }
  
  /* Decorative underline */
  body.dark .hero-title::after {
    content: "";
    display: block;
    width: 120px;
    height: 2px;
    margin: 0.01rem auto 0 auto;
    background: linear-gradient(
      90deg,
      rgba(194,161,90,0) 0%,
      rgba(194,161,90,0.6) 50%,
      rgba(194,161,90,0) 100%
    );
  }

  body.dark .hero-tagline {
    color: #e5c98a;
    text-shadow:
      0px 4px 12px rgba(0,0,0,0.35),
      0px 8px 24px rgba(0,0,0,0.25);
  }
  
  body.dark .hero-tagline-long {
    color: #cbd5e1;
    opacity: 0.9;
  }
  
  
  body.dark .hero-subtitle {
    color: #cbd5e1; /* muted Apple gray */
  }
  
  /* Hero buttons */
  body.dark .hero-buttons .btn {
    background: #1e293b;
    border-color: #c2a15a;
    color: #c2a15a;
  }
  
  body.dark .hero-buttons .btn:hover {
    background: #334155;
  }
  
  body.dark .hero-buttons .btn-secondary {
    background: transparent;
    border-color: #c2a15a;
    color: #c2a15a;
  }
  
  body.dark .hero-buttons .btn-secondary:hover {
    background: #c2a15a;
    color: #0f172a;
  }
  
  /* =========================================================
     DARK MODE — GLOBAL SECTIONS
     ========================================================= */
  
  body.dark section {
    color: #e2e8f0;
  }
  
  body.dark section::before {
    background: radial-gradient(
      circle,
      rgba(194,161,90,0.10),
      rgba(0,0,0,0) 70%
    );
  }
  
  /* Section headers */
  body.dark .section-header h2 {
    color: #e5c98a;
  }
  
  body.dark .section-header p {
    color: #cbd5e1;
  }
  
  
  
  /* =========================================================
     DARK MODE — CARDS
     ========================================================= */
  
  body.dark .card {
    background: rgba(15,23,42,0.55);
    border: 1px solid rgba(194,161,90,0.18);
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
    backdrop-filter: blur(14px);
  }
  
  body.dark .card h3 {
    color: #e5c98a;
  }
  
  body.dark .card p {
    color: #e2e8f0;
  }
  
  body.dark .card:hover {
    box-shadow: 0 30px 60px rgba(0,0,0,0.45);
  }
  
  
  
  /* =========================================================
     DARK MODE — CONTACT BOX
     ========================================================= */
  
  body.dark .contact-box {
    background: rgba(15,23,42,0.55);
    border: 1px solid rgba(194,161,90,0.18);
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
    backdrop-filter: blur(14px);
  }
  
  body.dark .contact-box input,
  body.dark .contact-box textarea {
    background: rgba(15,23,42,0.35);
    border: 1px solid rgba(194,161,90,0.25);
    color: #e2e8f0;
  }
  
  body.dark .contact-box input::placeholder,
  body.dark .contact-box textarea::placeholder {
    color: #94a3b8;
  }
  
  
  
  /* =========================================================
     DARK MODE — BUTTONS (GLOBAL)
     ========================================================= */
  
  body.dark .btn {
    background: #1e293b;
    border-color: #c2a15a;
    color: #c2a15a;
  }
  
  body.dark .btn:hover {
    background: #334155;
  }
  
  body.dark .btn-secondary {
    background: transparent;
    border-color: #c2a15a;
    color: #c2a15a;
  }
  
  body.dark .btn-secondary:hover {
    background: #c2a15a;
    color: #0f172a;
  }
  
  
  
  /* =========================================================
     DARK MODE — SCROLL PROGRESS BAR
     ========================================================= */
  
  body.dark .scroll-progress {
    background: #e5c98a;
  }
  
  
  
  /* =========================================================
     DARK MODE — FOOTER
     ========================================================= */
  
  body.dark footer {
    color: #94a3b8;
  }

  body.dark .footer-glossary-box {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(229, 201, 138, 0.25);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    color: #cbd5e1;
  }
  
  body.dark .footer-glossary-box h3 {
    color: #e5c98a; /* your Hermès gold */
  }
  
  
  
  
  /* =========================================================
     DARK MODE — NAV RIGHT CLUSTER
     ========================================================= */
  
  body.dark .nav-right {
    gap: 0.5rem;
  }
  
  /* Language switcher */
  body.dark .lang-switch span {
    color: #e5c98a;
    opacity: 0.85;
  }
  
  body.dark .lang-switch span:hover {
    opacity: 1;
    color: #f0d9a5;
  }
  
  body.dark .lang-switch button {
    color: #e5c98a;
    opacity: 0.85;
  }
  
  body.dark .lang-switch button:hover {
    opacity: 1;
    color: #f0d9a5;
  }
  
  /* Underline animation */
  body.dark .lang-switch span {
    position: relative;
  }
  
  body.dark .lang-switch span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0%;
    height: 1px;
    background: #e5c98a;
    transition: width 0.25s ease;
  }
  
  body.dark .lang-switch span:hover::after {
    width: 100%;
  }
  
  /* Dark mode toggle icon */
  body.dark .dark-toggle-icon .moon-icon {
    color: #e5c98a;
    opacity: 0.9;
  }
  
  body.dark .dark-toggle-icon .moon-icon:hover {
    color: #f0d9a5;
  }

   /* =========================================================
     DARK MODE — ABOUT/WHAT WE DO/WHY CHOOSE US PAGE
     ========================================================= */

     body.dark .about-title {
      color: #e5c98a !important;
    }
    
    body.dark .about-subtitle {
      color: #cbd5e1;
      opacity: 0.9;
    }

    body.dark .about-title::after {
      display: none !important;
    }

/* =========================================================
   DARK MODE — FAQ PAGE
   ========================================================= */

   body.dark .faq-title {
    color: #e5c98a !important; /* Hermès gold */
    text-shadow:
      0px 4px 12px rgba(0,0,0,0.45),
      0px 8px 24px rgba(0,0,0,0.35),
      0px 12px 32px rgba(194,161,90,0.12);
  }
  
  body.dark .faq-subtitle {
    color: #e2e8f0; /* soft Apple gray */
    opacity: 0.9;
  }
  
  body.dark .faq-title::after {
    display: none !important;
  }
  
  /* =========================================================
   DARK MODE — Hybrid Old Money Glass Accordion (Gold Text Fix)
   ========================================================= */

body.dark .faq-item {
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(194,161,90,0.18);
  border-left: 4px solid rgba(194,161,90,0.35);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}

/* Hover */
body.dark .faq-item:hover {
  background: rgba(15,23,42,0.65);
  box-shadow: 0 22px 50px rgba(0,0,0,0.45);
}

/* OPEN STATE — soft gold glow */
body.dark .faq-item.open {
  background: rgba(15,23,42,0.75);
  box-shadow:
    0 30px 60px rgba(0,0,0,0.55),
    0 0 22px rgba(194,161,90,0.35);
  border-left: 4px solid var(--accent);
}

/* CLOSED QUESTION — soft white */
body.dark .faq-question {
  color: #f1f5f9; /* soft, readable white */
}

/* OPEN QUESTION — luxury gold */
body.dark .faq-item.open .faq-question {
  color: #e5c98a; /* elegant gold pop */
}

/* ARROW — keep gold */
body.dark .faq-arrow {
  color: var(--accent);
  opacity: 0.7;
}

/* ANSWER — soft gray */
body.dark .faq-answer {
  color: #cbd5e1;
  opacity: 0.9;
}

/* Divider — gold */
body.dark .faq-divider {
  color: #e5c98a;
}

body.dark .faq-divider::after {
  background: var(--accent);
  opacity: 0.35;
}

/* =========================================================
   DARK MODE — COMPARE SUMMARY
   ========================================================= */


body.dark .compare-card {
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(229,201,138,0.25);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}

/* Dark mode hover glow (gold border only, no center glow) */
body.dark .compare-card:hover {
  border-color: rgba(229, 202, 138, 0.28);
  box-shadow: 0 12px 30px rgba(94, 85, 64, 0.25);
  background: rgba(15,23,42,0.55);
}

/* Titles + labels gold */
body.dark .compare-card-title,
body.dark .compare-label {
  color: #e5c98a;
}

/* Underline gold */
body.dark .compare-card-title::after {
  background: #e5c98a;
}

/* Text */
body.dark .compare-card-content p {
  color: #cbd5e1;
  border-bottom: 1px solid rgba(229,201,138,0.18);
}

/* Title */
body.dark .compare-summary-title {
  color: #e5c98a;
}

body.dark .compare-summary-description {
  color: #cbd5e1;
}


/* -------------------------------------------------------
  DARK MODE — GLOSSARY
------------------------------------------------------- */

body.dark .glossary-category {
  color: #e5c98a;
}