/*--------------------------------------------------------------
# IGDS Dark Theme
# Activated by data-theme="dark" on <html>.
# Loads after theme.css. Redefines the theme tokens, then
# neutralises the light values hardcoded throughout style.css.
#
# Elevation model (dark mode signals depth with LIGHT, not shadow):
#   L0 #050B14  page floor
#   L1 #0B1523  sections, raised bands
#   L2 #101D2E  cards, header, panels
#   L3 #16273B  hover / active surfaces
--------------------------------------------------------------*/

:root[data-theme="dark"] {
  --l0:           #050B14;
  --l1:           #0B1523;
  --l2:           #101D2E;
  --l3:           #16273B;

  --ink:          #050B14;
  --ink-soft:     #101D2E;
  --brand:        #17E0C8;
  --brand-dark:   #5CF2E0;   /* hover goes lighter on dark */
  --brand-deep:   #0A8C7E;   /* for fills behind light text */
  --brand-glow:   rgba(23, 224, 200, 0.24);
  --body:         #9FB2C8;
  --body-strong:  #C9D8E8;
  --heading:      #EEF4FA;
  --surface:      #101D2E;
  --surface-alt:  #0B1523;
  --line:         rgba(255, 255, 255, 0.08);
  --line-strong:  rgba(255, 255, 255, 0.14);
  --shadow-sm:    0 2px 10px rgba(0, 0, 0, 0.45);
  --shadow-md:    0 14px 38px rgba(0, 0, 0, 0.55);
  --shadow-lg:    0 28px 68px rgba(0, 0, 0, 0.68);

  color-scheme: dark;   /* native scrollbars, form controls, autofill */
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
:root[data-theme="dark"] body {
  background-color: var(--l0);
  color: var(--body);
}

/* A single, very soft brand aura behind the page top. Keeps the
   dark from reading as flat black without any visible banding. */
:root[data-theme="dark"] body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto 0;
  height: 70vh;
  background:
    radial-gradient(70% 55% at 18% 0%, rgba(23, 224, 200, 0.055) 0%, transparent 70%),
    radial-gradient(60% 50% at 88% 6%, rgba(60, 120, 220, 0.05) 0%, transparent 72%);
  pointer-events: none;
  /* Behind all content. At z-index:0 it painted OVER non-positioned
     elements such as the hero and hazed the imagery. */
  z-index: -1;
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6 { color: var(--heading); }

:root[data-theme="dark"] p,
:root[data-theme="dark"] li,
:root[data-theme="dark"] span { color: inherit; }

:root[data-theme="dark"] p { color: var(--body); }

:root[data-theme="dark"] ::selection {
  background: var(--brand);
  color: #04211D;
}

:root[data-theme="dark"] ::-webkit-scrollbar { width: 11px; height: 11px; }
:root[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--l0); }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #22344B;
  border-radius: 6px;
  border: 2px solid var(--l0);
}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #2E4460; }

/*--------------------------------------------------------------
# Header + navigation
--------------------------------------------------------------*/
:root[data-theme="dark"] #header {
  background: rgba(5, 11, 20, 0.72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Same mobile-menu fix as theme.css: no backdrop-filter below 992px */
@media (max-width: 991px) {
  :root[data-theme="dark"] #header,
  :root[data-theme="dark"] #header.is-scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--l0);
  }

  /* Swipeable link strip: edge fade matches the dark header */
  :root[data-theme="dark"] #navbar::after {
    background: linear-gradient(90deg, rgba(5, 11, 20, 0), var(--l0) 85%);
  }
}

:root[data-theme="dark"] #header .logo h1 a,
:root[data-theme="dark"] #header .logo h1 a:hover { color: var(--heading); }

:root[data-theme="dark"] #navbar a,
:root[data-theme="dark"] #navbar a:focus,
:root[data-theme="dark"] .navbar a,
:root[data-theme="dark"] .navbar a:focus { color: #CBDAEA; }

:root[data-theme="dark"] #navbar a:hover,
:root[data-theme="dark"] #navbar .active,
:root[data-theme="dark"] #navbar li:hover > a,
:root[data-theme="dark"] .navbar .active { color: var(--brand); }

:root[data-theme="dark"] .navbar .dropdown ul,
:root[data-theme="dark"] .navbar-mobile .dropdown ul {
  background: var(--l2);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

:root[data-theme="dark"] .navbar .dropdown ul a { color: #BCCCDF; }

:root[data-theme="dark"] .navbar .dropdown ul a:hover,
:root[data-theme="dark"] .navbar .dropdown ul li:hover > a {
  color: var(--brand);
  background: rgba(255, 255, 255, 0.04);
}

:root[data-theme="dark"] .navbar-mobile,
:root[data-theme="dark"] .navbar-mobile::before { background: rgba(3, 7, 13, 0.96); }

:root[data-theme="dark"] .navbar-mobile ul {
  background: var(--l2);
  border: 1px solid var(--line-strong);
}

:root[data-theme="dark"] .mobile-nav-toggle { color: var(--heading); }

/*--------------------------------------------------------------
# Sections + rhythm
--------------------------------------------------------------*/
/* background-color, NOT the `background` shorthand — the shorthand
   also resets background-image and wipes the banner photography. */
:root[data-theme="dark"] section { background-color: transparent; }

:root[data-theme="dark"] .section-bg,
:root[data-theme="dark"] section.section-bg,
:root[data-theme="dark"] #products.section-bg {
  background-color: var(--l1);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

:root[data-theme="dark"] .section-title p.sub-heading { color: var(--heading); }
:root[data-theme="dark"] .section-title h2 { color: var(--brand); }

:root[data-theme="dark"] .about p,
:root[data-theme="dark"] .about h4 { color: var(--body); }

/* Breadcrumbs on inner pages */
:root[data-theme="dark"] .breadcrumbs {
  background-color: var(--l1);
  border-bottom: 1px solid var(--line);
}

:root[data-theme="dark"] .breadcrumbs h2,
:root[data-theme="dark"] .breadcrumbs ol,
:root[data-theme="dark"] .breadcrumbs ol li,
:root[data-theme="dark"] .breadcrumbs ol a { color: var(--body-strong); }

:root[data-theme="dark"] .team { background-color: transparent; }

/* Banner scrim only — the image itself is never blended, so it
   renders at full fidelity in both themes (see theme.css §Page banners). */
:root[data-theme="dark"] .about-sec-wrap::before,
:root[data-theme="dark"] .services-sec-wrap::before,
:root[data-theme="dark"] .pes-sec-wrap::before,
:root[data-theme="dark"] .products-sec-wrap::before,
:root[data-theme="dark"] .medical-sec-wrap::before,
:root[data-theme="dark"] .industry-sec-wrap::before,
:root[data-theme="dark"] .mts-sec-wrap::before,
:root[data-theme="dark"] .mhd-sec-wrap::before,
:root[data-theme="dark"] .esg-sec-wrap::before,
:root[data-theme="dark"] .agri-sec-wrap::before,
:root[data-theme="dark"] .contact-sec-wrap::before {
  content: none;
}

/* Hero scrim — deeper, so imagery reads as moody rather than washed */
:root[data-theme="dark"] .clients-slider .swiper-wrapper .swiper-slide:after {
  background: linear-gradient(
    100deg,
    rgba(5, 11, 20, 0.88) 0%,
    rgba(5, 11, 20, 0.58) 42%,
    rgba(5, 11, 20, 0.22) 100%
  );
}

:root[data-theme="dark"] #hero p { color: #B6C7DA; }

/*--------------------------------------------------------------
# Cards + tiles
--------------------------------------------------------------*/
:root[data-theme="dark"] #products .card {
  /* Subtle top-lit gradient — reads as a physical surface */
  background: linear-gradient(165deg, var(--l3) 0%, var(--l2) 58%);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}

/* The signature dark-mode moment: teal edge-glow on hover */
:root[data-theme="dark"] #products .card:hover {
  border-color: rgba(23, 224, 200, 0.40);
  box-shadow:
    0 24px 52px rgba(0, 0, 0, 0.66),
    0 0 0 1px rgba(23, 224, 200, 0.20),
    0 0 34px -6px rgba(23, 224, 200, 0.28);
}

:root[data-theme="dark"] .services .grid figure {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--line);
}

:root[data-theme="dark"] .services .grid figure:hover {
  border-color: rgba(23, 224, 200, 0.28);
}

/*--------------------------------------------------------------
# Content page components
--------------------------------------------------------------*/
:root[data-theme="dark"] .stat-tile {
  background: var(--l1);
  border-color: var(--line);
  border-left-color: var(--brand);
}

:root[data-theme="dark"] .trust-strip .stat-tile {
  background: var(--l2);
  border-color: var(--line-strong);
  /* border-color above is a shorthand and resets all four sides,
     so the teal edge has to be restored after it. */
  border-left-color: var(--brand);
  box-shadow: var(--shadow-md);
}

:root[data-theme="dark"] .post-card {
  background: var(--l2);
  border-color: var(--line-strong);
}

:root[data-theme="dark"] .post-card:hover {
  border-color: rgba(23, 224, 200, 0.35);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.6);
}

:root[data-theme="dark"] .post-tag { background: rgba(23, 224, 200, 0.12); }

:root[data-theme="dark"] .post-meta-row { border-top-color: var(--line); }

:root[data-theme="dark"] .case-card {
  background: var(--l2);
  border-color: var(--line-strong);
}

:root[data-theme="dark"] .case-card:hover {
  border-color: rgba(23, 224, 200, 0.35);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.6);
}

:root[data-theme="dark"] .case-facts { border-top-color: var(--line); }

:root[data-theme="dark"] .case-card em { color: #E0B34A; }

/* Lighter amber so the services headings stay legible on dark */
:root[data-theme="dark"] .pes-home-sec .title,
:root[data-theme="dark"] .pes-home-sec .title a { color: #E0B34A; }

:root[data-theme="dark"] .pes-home-sec .title a:hover { color: #F0C866; }

/* Contact page */
:root[data-theme="dark"] .contact-tile,
:root[data-theme="dark"] .contact-form-card {
  background: var(--l2);
  border-color: var(--line-strong);
}

:root[data-theme="dark"] .contact-tile:hover {
  border-color: rgba(23, 224, 200, 0.35);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.6);
}

:root[data-theme="dark"] .contact-icon { background: rgba(23, 224, 200, 0.12); }

:root[data-theme="dark"] .contact-form-card input,
:root[data-theme="dark"] .contact-form-card textarea {
  background: var(--l0);
  border-color: var(--line-strong);
}

:root[data-theme="dark"] .contact-form-card input:focus,
:root[data-theme="dark"] .contact-form-card textarea:focus {
  background: var(--l0);
  border-color: var(--brand);
}

:root[data-theme="dark"] .contact-form-card button { color: #04211D; }

:root[data-theme="dark"] .hours-list li { border-bottom-color: var(--line); }

:root[data-theme="dark"] .contact-social a {
  background: var(--l1);
  border-color: var(--line-strong);
  color: var(--body-strong);
}

:root[data-theme="dark"] .contact-social a:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #04211D;
}

/* Maps are light by default; dim slightly so it does not glare */
:root[data-theme="dark"] .map-section iframe {
  filter: grayscale(30%) brightness(0.86) contrast(1.05);
}

:root[data-theme="dark"] .map-section:hover iframe {
  filter: grayscale(0%) brightness(0.94);
}

:root[data-theme="dark"] .capability-card,
:root[data-theme="dark"] .engage-card {
  background: var(--l2);
  border-color: var(--line-strong);
}

:root[data-theme="dark"] .capability-card:hover,
:root[data-theme="dark"] .engage-card:hover {
  border-color: rgba(23, 224, 200, 0.35);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.6);
}

/* Capability list items read in brand teal, matching the linked
   cards, so every "What we build" tile looks the same. */
:root[data-theme="dark"] .capability-card ul li { color: var(--brand); }

:root[data-theme="dark"] .capability-card ul li::after { background: var(--brand); }

:root[data-theme="dark"] .standard-list li { border-bottom-color: var(--line); }

/* Section divider — brighter teal with a soft glow on dark */
/* Service detail pages: left-anchored, fading to the right */
:root[data-theme="dark"] main.product-eng-services .portfolio-details .section-title::after {
  background: linear-gradient(90deg,
    rgba(23, 224, 200, 0.80) 0%,
    rgba(23, 224, 200, 0.20) 55%,
    transparent 100%);
  box-shadow: 0 0 10px rgba(23, 224, 200, 0.30);
}

:root[data-theme="dark"] main.service .section-title::after,
:root[data-theme="dark"] main.product-eng-services .section-title::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(23, 224, 200, 0.20) 20%,
    rgba(23, 224, 200, 0.80) 50%,
    rgba(23, 224, 200, 0.20) 80%,
    transparent 100%);
  box-shadow: 0 0 10px rgba(23, 224, 200, 0.35);
}

/* Product shots are usually rendered on white, so the plate stays
   light in dark mode rather than showing as a floating rectangle. */
:root[data-theme="dark"] .card-media,
:root[data-theme="dark"] .card-thumbs a,
:root[data-theme="dark"] .media-item {
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--line-strong);
}

:root[data-theme="dark"] .media-item:hover { border-color: var(--brand); }

/* Clinical images are shot on white, so the plate stays light */
:root[data-theme="dark"] .image-row a {
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--line-strong);
}

:root[data-theme="dark"] .image-row a:hover { border-color: var(--brand); }

/* Product range pages */
:root[data-theme="dark"] .product-jump a {
  background: var(--l2);
  border-color: var(--line-strong);
  color: var(--body-strong);
}

:root[data-theme="dark"] .product-jump a:hover {
  color: var(--brand);
  border-color: var(--brand);
}

:root[data-theme="dark"] .gallery-main,
:root[data-theme="dark"] .gallery-thumbs a {
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--line-strong);
}

:root[data-theme="dark"] .spec-title { border-bottom-color: var(--line); }

:root[data-theme="dark"] .range-card {
  background: var(--l2);
  border-color: var(--line-strong);
}

:root[data-theme="dark"] .range-card:hover {
  border-color: rgba(23, 224, 200, 0.35);
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.66);
}

/* Product photos are shot on white, so the media plate stays light */
:root[data-theme="dark"] .range-media {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: var(--line-strong);
}

:root[data-theme="dark"] .range-facts,
:root[data-theme="dark"] .range-facts li { border-color: var(--line); }

:root[data-theme="dark"] .card-thumbs a:hover { border-color: var(--brand); }

/* Heading rule stays in dark, where it reads as a subtle structure
   cue rather than a stray hairline. Light theme drops it. */
:root[data-theme="dark"] .medical-page .block-title {
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

:root[data-theme="dark"] .cta-band {
  background: var(--l1);
  border-color: var(--line-strong);
}

:root[data-theme="dark"] .sidebar-card {
  background: var(--l2);
  border-color: var(--line-strong);
}

:root[data-theme="dark"] .sidebar-card h5 { border-bottom-color: var(--line); }

:root[data-theme="dark"] .figure-frame {
  background: var(--l1);
  border-color: var(--line-strong);
}

:root[data-theme="dark"] .sidebar-form input,
:root[data-theme="dark"] .sidebar-form textarea {
  background: var(--l0);
  border-color: var(--line-strong);
}

:root[data-theme="dark"] .sidebar-form button { color: #04211D; }

/* These logos are JPGs with baked-in light backgrounds, so the tile
   stays a light card in dark mode — the logos sit on the ground they
   were designed for, and the marks stay unaltered. */
:root[data-theme="dark"] .partner-item {
  background: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.16);
}

:root[data-theme="dark"] .partner-item:hover {
  border-color: rgba(23, 224, 200, 0.5);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}

:root[data-theme="dark"] .partner-name { color: var(--body-strong); }

:root[data-theme="dark"] .partner-item:hover .partner-name { color: var(--brand); }

:root[data-theme="dark"] .services .icon-box,
:root[data-theme="dark"] .box {
  background: var(--l2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

/*--------------------------------------------------------------
# Forms
# style.css sets a global `form { background:#ffffff }` (line 1756)
# plus white panels — all neutralised here.
--------------------------------------------------------------*/
:root[data-theme="dark"] form,
:root[data-theme="dark"] .contact .info,
:root[data-theme="dark"] .contact .php-email-form,
:root[data-theme="dark"] .php-email-form,
:root[data-theme="dark"] .contact-info,
:root[data-theme="dark"] #footer .footer-newsletter form {
  background: var(--l2);
  color: var(--body);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

/* Full-width teal keylines removed in dark — hairlines carry the
   separation instead. Light theme keeps them. */
:root[data-theme="dark"] .contact .info,
:root[data-theme="dark"] .contact .php-email-form {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

:root[data-theme="dark"] #hero {
  border-bottom: 1px solid var(--line);
}

/* Contact page: template orange keylines (style.css §contact form,
   inside a min-width:750px block) replaced with hairlines. */
:root[data-theme="dark"] .contact-section {
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

:root[data-theme="dark"] .contact-section form,
:root[data-theme="dark"] form {
  border-top: 1px solid var(--line);
}

:root[data-theme="dark"] .contact-info {
  background: var(--l1);
  color: var(--body);
}

/* The tinted icon circles beside address / phone / email */
:root[data-theme="dark"] .contact .info i {
  background: rgba(23, 224, 200, 0.12);
  color: var(--brand);
}

:root[data-theme="dark"] .contact .info h4 { color: var(--heading); }
:root[data-theme="dark"] .contact .info p  { color: var(--body); }

:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .form-control {
  background: var(--l0);
  border: 1px solid var(--line-strong);
  color: var(--heading);
  border-radius: 8px;
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: #64798F; }

:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] .form-control:focus {
  background: var(--l0);
  border-color: var(--brand);
  color: var(--heading);
  box-shadow: 0 0 0 3px var(--brand-glow);
  outline: none;
}

/* Chrome's yellow autofill wash would break the theme */
:root[data-theme="dark"] input:-webkit-autofill,
:root[data-theme="dark"] textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--heading);
  -webkit-box-shadow: 0 0 0 40px var(--l0) inset;
  caret-color: var(--heading);
}

:root[data-theme="dark"] .contact .php-email-form .loading,
:root[data-theme="dark"] .php-email-form .loading {
  background: var(--l2);
  color: var(--body);
}

:root[data-theme="dark"] .error,
:root[data-theme="dark"] .php-email-form .error-message {
  background: rgba(220, 60, 80, 0.14);
  border: 1px solid rgba(220, 60, 80, 0.34);
  color: #FF9AA8;
  border-radius: 8px;
}

:root[data-theme="dark"] .success,
:root[data-theme="dark"] .php-email-form .sent-message {
  background: rgba(23, 224, 200, 0.12);
  border: 1px solid rgba(23, 224, 200, 0.32);
  color: var(--brand);
  border-radius: 8px;
}

/*--------------------------------------------------------------
# Buttons — teal fill needs dark text for contrast
--------------------------------------------------------------*/
:root[data-theme="dark"] .btn-get-started,
:root[data-theme="dark"] .navbar .getstarted {
  background: var(--brand);
  color: #04211D;
  box-shadow: 0 4px 18px rgba(23, 224, 200, 0.22);
}

:root[data-theme="dark"] .btn-get-started:hover,
:root[data-theme="dark"] .navbar .getstarted:hover {
  background: var(--brand-dark);
  color: #04211D;
  box-shadow: 0 10px 30px rgba(23, 224, 200, 0.34);
}

:root[data-theme="dark"] a { color: var(--brand); }
:root[data-theme="dark"] a:hover { color: var(--brand-dark); }

:root[data-theme="dark"] section ul li:before { background: var(--brand); }

/*--------------------------------------------------------------
# Footer — the page floor, darkest surface
--------------------------------------------------------------*/
:root[data-theme="dark"] #footer,
:root[data-theme="dark"] #footer .footer-top {
  background: #03070D;
}

:root[data-theme="dark"] #footer .footer-top {
  border-top: 1px solid var(--line);
  box-shadow: none;
}

:root[data-theme="dark"] #footer .footer-top .social-links a {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--line-strong);
}

:root[data-theme="dark"] #footer .footer-top .social-links a:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #04211D;
}

:root[data-theme="dark"] .back-to-top {
  background: var(--brand) !important;
  color: #04211D;
}

:root[data-theme="dark"] .back-to-top i { color: #04211D; }

/*--------------------------------------------------------------
# Theme toggle button
--------------------------------------------------------------*/
.igds-theme-toggle {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line, #E3EAF2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  color: var(--heading, #0A1A2F);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(10, 26, 47, 0.14);
  transition: background-color 0.25s ease, border-color 0.25s ease,
              color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.igds-theme-toggle:hover {
  color: var(--brand, #00B3A4);
  border-color: var(--brand, #00B3A4);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(10, 26, 47, 0.20);
}

.igds-theme-toggle:focus-visible {
  outline: 2px solid var(--brand, #00B3A4);
  outline-offset: 2px;
}

.igds-theme-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.igds-theme-toggle:hover svg { transform: rotate(-20deg); }

.igds-theme-toggle .igds-icon-sun { display: none; }

:root[data-theme="dark"] .igds-theme-toggle .igds-icon-sun  { display: block; }
:root[data-theme="dark"] .igds-theme-toggle .igds-icon-moon { display: none; }

:root[data-theme="dark"] .igds-theme-toggle {
  background: rgba(16, 29, 46, 0.86);
  border-color: var(--line-strong);
  color: var(--heading);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
}

:root[data-theme="dark"] .igds-theme-toggle:hover {
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65);
}

@media (max-width: 575px) {
  .igds-theme-toggle {
    left: 16px;
    bottom: 16px;
    width: 42px;
    height: 42px;
  }
}

/*--------------------------------------------------------------
# Assistant widget
--------------------------------------------------------------*/
:root[data-theme="dark"] .igds-panel {
  background: var(--l2);
  border: 1px solid var(--line-strong);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.75);
}

:root[data-theme="dark"] .igds-header { background: #03070D; }

:root[data-theme="dark"] .igds-header .igds-avatar { color: #04211D; }

:root[data-theme="dark"] .igds-log { background: var(--l1); }

:root[data-theme="dark"] .igds-log::-webkit-scrollbar-thumb { background: #22344B; }

:root[data-theme="dark"] .igds-msg-bot {
  background: var(--l2);
  color: var(--body-strong);
  border: 1px solid var(--line);
  box-shadow: none;
}

:root[data-theme="dark"] .igds-msg-bot a { color: var(--brand); }

:root[data-theme="dark"] .igds-msg-user { color: #04211D; }

:root[data-theme="dark"] .igds-chips { background: var(--l1); }

:root[data-theme="dark"] .igds-chip {
  background: var(--l2);
  border-color: rgba(23, 224, 200, 0.26);
  color: var(--brand);
}

:root[data-theme="dark"] .igds-chip:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #04211D;
}

:root[data-theme="dark"] .igds-form {
  background: var(--l2);
  border-top-color: var(--line);
}

:root[data-theme="dark"] .igds-form input {
  background: var(--l0);
  border-color: var(--line-strong);
}

:root[data-theme="dark"] .igds-form button { color: #04211D; }

:root[data-theme="dark"] .igds-footnote {
  background: var(--l2);
  color: #64798F;
}

:root[data-theme="dark"] .igds-launcher {
  color: #04211D;
  box-shadow: 0 8px 28px rgba(23, 224, 200, 0.32);
}

/*==============================================================
# REFINEMENT LAYER
# Depth, texture and light. Dark interfaces have no paper to
# fall back on, so the surface itself has to carry the craft.
==============================================================*/

/*--------------------------------------------------------------
# 1. Film grain
# A flat dark field bands visibly on 8-bit displays and reads as
# dead. A trace of noise breaks the gradient steps and gives the
# whole page a subtle physical texture.
--------------------------------------------------------------*/
:root[data-theme="dark"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/*--------------------------------------------------------------
# 2. Scroll progress
--------------------------------------------------------------*/
.igds-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  z-index: 100001;
  background: linear-gradient(90deg, #00B3A4, #38D9C8, #6EE7DA);
  transition: width 0.08s linear;
  pointer-events: none;
}

:root[data-theme="dark"] .igds-progress {
  background: linear-gradient(90deg, #0E9C8C, #17E0C8, #7BF5E6);
  box-shadow: 0 0 14px rgba(23, 224, 200, 0.65);
}

/*--------------------------------------------------------------
# 3. Header gains weight on scroll
--------------------------------------------------------------*/
#header { transition: background-color 0.35s ease, box-shadow 0.35s ease, height 0.35s ease; }

:root[data-theme="dark"] #header.is-scrolled {
  background: rgba(5, 11, 20, 0.90);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.05);
}

/*--------------------------------------------------------------
# 4. Gradient display type
# Section headlines pick up a faint vertical gradient — bright at
# the cap line, settling toward the baseline. Reads as lit rather
# than painted.
--------------------------------------------------------------*/
:root[data-theme="dark"] .section-title p.sub-heading,
:root[data-theme="dark"] .cta-band h3 {
  background: linear-gradient(175deg, #FFFFFF 0%, #C7D6E6 62%, #9FB2C8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* The stat figures get the brand gradient — they are the numbers
   people are meant to remember. */
:root[data-theme="dark"] .stat-figure {
  background: linear-gradient(160deg, #FFFFFF 0%, #7BF5E6 55%, #17E0C8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*--------------------------------------------------------------
# 5. Surface craft — top-edge highlight
# Real objects catch light on their upper edge. A single 1px
# gradient hairline does more for perceived quality than any
# amount of shadow.
--------------------------------------------------------------*/
:root[data-theme="dark"] .capability-card,
:root[data-theme="dark"] .engage-card,
:root[data-theme="dark"] .post-card,
:root[data-theme="dark"] .sidebar-card,
:root[data-theme="dark"] .stat-tile,
:root[data-theme="dark"] .cta-band,
:root[data-theme="dark"] .partner-item {
  position: relative;
  overflow: hidden;
}

:root[data-theme="dark"] .capability-card::before,
:root[data-theme="dark"] .engage-card::before,
:root[data-theme="dark"] .post-card::before,
:root[data-theme="dark"] .sidebar-card::before,
:root[data-theme="dark"] .cta-band::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.22) 30%,
    rgba(23, 224, 200, 0.40) 50%,
    rgba(255, 255, 255, 0.22) 70%,
    transparent);
  opacity: 0.7;
  transition: opacity 0.35s ease, left 0.45s ease, right 0.45s ease;
  pointer-events: none;
  z-index: 3;
}

/* On hover the highlight runs the full width — as though the
   light source moved onto the card. */
:root[data-theme="dark"] .capability-card:hover::before,
:root[data-theme="dark"] .engage-card:hover::before,
:root[data-theme="dark"] .post-card:hover::before,
:root[data-theme="dark"] .sidebar-card:hover::before {
  opacity: 1;
  left: 0;
  right: 0;
}

/*--------------------------------------------------------------
# 6. Cursor spotlight
# A soft teal pool follows the pointer inside each card. The
# custom properties are written by ui-enhance.js; with no JS the
# rule simply never activates.
--------------------------------------------------------------*/
:root[data-theme="dark"] .capability-card::after,
:root[data-theme="dark"] .engage-card::after,
:root[data-theme="dark"] .post-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(
    340px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(23, 224, 200, 0.13),
    transparent 62%
  );
  z-index: 1;
}

:root[data-theme="dark"] .capability-card:hover::after,
:root[data-theme="dark"] .engage-card:hover::after,
:root[data-theme="dark"] .post-card:hover::after { opacity: 1; }

/* Keep content above both overlays */
:root[data-theme="dark"] .capability-card > *,
:root[data-theme="dark"] .engage-card > *,
:root[data-theme="dark"] .post-card > * { position: relative; z-index: 2; }

/*--------------------------------------------------------------
# 7. Numerals as watermark
# The step numbers become large ghosted figures in the corner —
# structure you feel before you read it.
--------------------------------------------------------------*/
:root[data-theme="dark"] .engage-card .engage-step {
  position: relative;
  z-index: 2;
}

:root[data-theme="dark"] .engage-card {
  isolation: isolate;
}

/*--------------------------------------------------------------
# 8. Buttons with depth
--------------------------------------------------------------*/
:root[data-theme="dark"] .btn-get-started {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #17E0C8 0%, #0FB5A4 100%);
  color: #04211D;
  box-shadow:
    0 4px 18px rgba(23, 224, 200, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Sheen sweep on hover */
:root[data-theme="dark"] .btn-get-started::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transition: left 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-theme="dark"] .btn-get-started:hover::after { left: 130%; }

:root[data-theme="dark"] .btn-get-started:hover {
  background: linear-gradient(135deg, #5CF2E0 0%, #17E0C8 100%);
  box-shadow:
    0 12px 32px rgba(23, 224, 200, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/*--------------------------------------------------------------
# 9. Section glow anchors
# Each alternating band carries a faint brand bloom at its upper
# edge, so scrolling feels like passing through pools of light.
--------------------------------------------------------------*/
:root[data-theme="dark"] .section-bg {
  position: relative;
  overflow: hidden;
}

:root[data-theme="dark"] .section-bg::before {
  content: '';
  position: absolute;
  top: -140px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 320px;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(23, 224, 200, 0.075) 0%,
    transparent 68%);
}

/*--------------------------------------------------------------
# 10. Accent rule under section titles
--------------------------------------------------------------*/
:root[data-theme="dark"] .section-title p.sub-heading::after {
  background: linear-gradient(90deg, #17E0C8, rgba(23, 224, 200, 0.15));
  box-shadow: 0 0 12px rgba(23, 224, 200, 0.55);
  height: 3px;
}

/*--------------------------------------------------------------
# 11. Standards list — quiet ledger styling
--------------------------------------------------------------*/
:root[data-theme="dark"] .standard-list li {
  padding-left: 14px;
  border-left: 2px solid transparent;
  transition: border-left-color 0.3s ease, padding-left 0.3s ease, background-color 0.3s ease;
}

:root[data-theme="dark"] .standard-list li:hover {
  border-left-color: var(--brand);
  padding-left: 20px;
  background: rgba(23, 224, 200, 0.04);
}

/*--------------------------------------------------------------
# 12. Focus visibility — accessibility, done properly
--------------------------------------------------------------*/
:root[data-theme="dark"] a:focus-visible,
:root[data-theme="dark"] button:focus-visible,
:root[data-theme="dark"] input:focus-visible,
:root[data-theme="dark"] textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/*--------------------------------------------------------------
# 13. Honour reduced motion across the whole refinement layer
--------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="dark"] .btn-get-started::after,
  :root[data-theme="dark"] .capability-card::after,
  :root[data-theme="dark"] .engage-card::after,
  :root[data-theme="dark"] .post-card::after { transition: none; }

  .igds-progress { transition: none; }
}

/*--------------------------------------------------------------
# Cross-fade while switching (not on initial load)
--------------------------------------------------------------*/
body.igds-theme-switching,
body.igds-theme-switching #header,
body.igds-theme-switching section,
body.igds-theme-switching .card,
body.igds-theme-switching .igds-panel,
body.igds-theme-switching #footer {
  transition: background-color 0.38s ease, color 0.38s ease, border-color 0.38s ease;
}

@media (prefers-reduced-motion: reduce) {
  body.igds-theme-switching,
  body.igds-theme-switching * { transition: none !important; }
}

/* Mobile link strip scrollbar: faint on dark, teal while dragging */
@media (max-width: 991px) {
  :root[data-theme="dark"] #navbar > ul { scrollbar-color: rgba(255, 255, 255, 0.20) transparent; }
  :root[data-theme="dark"] #navbar > ul::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.20); }
  :root[data-theme="dark"] #navbar > ul::-webkit-scrollbar-thumb:active { background: var(--brand); }
}