/* ===========================================================
   Triveni Power - Light Mode
   Warm-white surfaces for content sections.
   Sections kept dark by design: hero (video carousel),
     positioning sticky video pane.
   Sections flipped: nav, positioning band, stats, industries,
     aftermarket, engineering, prediction, defence, proof,
     connect, footer.
   =========================================================== */

/* ============================================================
   DESIGN TOKENS - light section surface palette
     --lm-bg-0:  #FAFAF8  warmest near-white (connect)
     --lm-bg-1:  #F5F4F1  slightly warm off-white (proof, eng)
     --lm-bg-2:  #EFEEE9  warm parchment (accents / dividers)
     --lm-ink:   #231F20  near-black
     --lm-ink-0: rgba(35,31,32,0.78)  body text
     --lm-ink-1: rgba(35,31,32,0.55)  muted text
     --lm-line:  rgba(35,31,32,0.10)  border / hairline
   ============================================================ */


/* Positioning section keeps its dark cinematic treatment in both
   themes - video bg + dark gradient band reads identically in light
   mode, so no overrides here. */


/* ============================================================
   INDUSTRIES - Industries We Keep Running
   ============================================================ */

[data-theme="light"] .industries {
  background: #FFFFFF;
  color: #231F20;
}

[data-theme="light"] .industries__title {
  color: #231F20;
}

[data-theme="light"] .industries__title em {
  color: var(--accent);
}

[data-theme="light"] .industries__body {
  color: rgba(35, 31, 32, 0.8);
}

[data-theme="light"] .industries__stack {
  border-color: rgba(35,31,32,0.12);
  box-shadow: 0 2px 24px rgba(35,31,32,0.06), 0 1px 0 rgba(35,31,32,0.06);
}

[data-theme="light"] .industries__row {
  border-bottom-color: rgba(35,31,32,0.08);
}

[data-theme="light"] .industries__row-image {
  background: #F0EFE9;
}

/* Inactive industry images are dimmed to 0.55 in dark mode; over the pale
   light-mode background that reads as an ugly white wash. Show every image
   at full strength in light mode (active state still shown by the accordion). */
[data-theme="light"] .industries__row-image img {
  opacity: 1;
}


/* ============================================================
   ENGINEERING - the-engineering-inside
   ============================================================ */

[data-theme="light"] .engineering {
  background: #F5F4F1;
  color: #231F20;
  /* Reset local dark scope vars */
  --ink:       #231F20;
  --ink-80:    rgba(35,31,32,0.80);
  --ink-60:    rgba(35,31,32,0.58);
  --ink-40:    rgba(35,31,32,0.42);
  --ink-12:    rgba(35,31,32,0.14);
  --paper:     #F5F4F1;
  --accent:    #F58220;
}

/* Aurora - keep it visible on light bg with multiply blend + lower
   opacity so the orange/navy washes show as a tint, not a glow. */
[data-theme="light"] .engineering__aurora-layer {
  mix-blend-mode: multiply;
  opacity: 0.28;
  filter: blur(56px);
}

[data-theme="light"] .engineering__title {
  color: #231F20;
}

[data-theme="light"] .engineering__title em {
  color: var(--accent);
}

[data-theme="light"] .engineering__body {
  color: rgba(35, 31, 32, 0.8);
}

[data-theme="light"] .engineering__body strong {
  color: rgba(35, 31, 32, 0.8);
}

/* Cards are white with dark text - perfect for light bg.
   Lighten the heavy dark-mode shadow. */
[data-theme="light"] .engineering__card {
  box-shadow:
    0 1px 0 rgba(35,31,32,0.04) inset,
    0 10px 32px rgba(35,31,32,0.10),
    0 2px 8px rgba(35,31,32,0.06);
}

[data-theme="light"] .engineering__card:hover {
  box-shadow:
    0 1px 0 rgba(35,31,32,0.04) inset,
    0 18px 48px rgba(35,31,32,0.14),
    0 4px 12px rgba(35,31,32,0.08);
}


/* ============================================================
   PROOF - Proof, at Full Speed
   ============================================================ */

[data-theme="light"] .proof {
  background: #eaeaea;
  color: #231F20;
  /* Reset local dark scope vars */
  --ink:       #231F20;
  --ink-80:    rgba(35,31,32,0.80);
  --ink-60:    rgba(35,31,32,0.58);
  --ink-40:    rgba(35,31,32,0.42);
  --accent:    #F58220;
}

/* WebGL canvas renders warm dark glow - hide on light bg */
[data-theme="light"] .proof__liquid {
  display: none;
}

/* Remove the dark vignette overlay */
[data-theme="light"] .proof::after {
  background: none;
}

[data-theme="light"] .proof__title {
  color: #231F20;
}

[data-theme="light"] .proof__title em {
  color: var(--accent);
  -webkit-text-fill-color: unset;
}

[data-theme="light"] .proof__body {
  color: rgba(35, 31, 32, 0.8);
}

[data-theme="light"] .proof__body strong {
  color: rgba(35, 31, 32, 0.8);
}

/* .proof__nav-btn light-mode override moved to css/buttons.css. */

/* Cards are already white + dark text - just soften the shadow */
[data-theme="light"] .proof__card {
  box-shadow:
    0 2px 0 rgba(35,31,32,0.04),
    0 8px 24px rgba(35,31,32,0.08),
    0 1px 4px rgba(35,31,32,0.05);
}

/* Card CTA - border already uses #231F20, perfect on light */


/* ============================================================
   CONNECT - Let's Start the Conversation
   ============================================================ */

[data-theme="light"] .connect {
  background: #FAFAF8;
  color: #231F20;
  /* Reset local dark scope vars */
  --ink:       #231F20;
  --ink-80:    rgba(35,31,32,0.80);
  --ink-60:    rgba(35,31,32,0.58);
  --ink-40:    rgba(35,31,32,0.42);
  --accent:    #F58220;
}

/* WebGL canvas renders dark glow - hide on light bg */
[data-theme="light"] .connect__liquid {
  display: none;
}

/* Remove dark vignette */
[data-theme="light"] .connect::after {
  background: none;
}

[data-theme="light"] .connect__title {
  color: #231F20;
}

[data-theme="light"] .connect__title em {
  color: var(--accent);
  -webkit-text-fill-color: unset;
}

[data-theme="light"] .connect__body {
  color: rgba(35, 31, 32, 0.8);
}

/* Glass CTAs - restyle for light background.
   Keep the frosted-glass feel but on a warm-white surface. */
/* .connect__cta light-mode rules moved to css/buttons.css.
   Icon color override stays here as it's a child, not the cta itself. */
[data-theme="light"] .connect__cta-icon {
  color: rgba(35, 31, 32, 0.8);
}

/* Tone down the orange glow on white bg */
[data-theme="light"] .connect__visual-glow {
  background: radial-gradient(circle at 55% 50%, rgba(245,130,32,0.28) 0%, rgba(245,130,32,0) 62%);
  opacity: 0.7;
}

/* The 'T' mark keeps its orange drop-shadow; lighten slightly */
[data-theme="light"] .connect__mark {
  filter:
    drop-shadow(0 16px 40px rgba(245,130,32,0.30))
    drop-shadow(0 4px 10px rgba(35,31,32,0.18));
}

[data-theme="light"] .connect.is-tracking .connect__mark {
  filter:
    drop-shadow(0 24px 60px rgba(245,130,32,0.42))
    drop-shadow(0 8px 16px rgba(35,31,32,0.22));
}


/* ============================================================
   PREDICTION - From Precision to Prediction
   ============================================================ */

[data-theme="light"] .prediction {
  background: #eaeaea;
  color: #231F20;
  --ink:       #231F20;
  --ink-80:    rgba(35,31,32,0.80);
  --ink-60:    rgba(35,31,32,0.58);
  --ink-40:    rgba(35,31,32,0.42);
  --accent:    #F58220;
}

/* Hide the Three.js beam canvas and its dark base */
[data-theme="light"] .prediction__bg {
  background: #eaeaea;
}

[data-theme="light"] .prediction__beams-canvas {
  display: none;
}

/* Remove the dark tint overlay */
[data-theme="light"] .prediction__tint {
  background: none;
}

[data-theme="light"] .prediction__title {
  color: #231F20;
}

[data-theme="light"] .prediction__title em {
  color: var(--accent);
}

[data-theme="light"] .prediction__body {
  color: rgba(35, 31, 32, 0.8);
}

[data-theme="light"] .prediction__body strong {
  color: rgba(35, 31, 32, 0.8);
}

/* CTA label (text beside the arrow circle) */
[data-theme="light"] .prediction__cta {
  color: #231F20;
}

/* Circular arrow button */
[data-theme="light"] .prediction__cta-circle {
  background: #231F20;
  color: #FFFFFF;
}

/* Slider nav arrows → dark style */
[data-theme="light"] .prediction__cards-nav button {
  border-color: rgba(35,31,32,0.22);
  background: rgba(35,31,32,0.06);
  color: #231F20;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

[data-theme="light"] .prediction__cards-nav button:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}

/* Section label above cards */
[data-theme="light"] .prediction__cards-label {
  color: rgba(35, 31, 32, 0.58);
}

/* Slider dots */
[data-theme="light"] .prediction__dot {
  background: rgba(35,31,32,0.22);
}

[data-theme="light"] .prediction__dot:hover {
  background: rgba(35,31,32,0.50);
}

[data-theme="light"] .prediction__dot[aria-current="true"],
[data-theme="light"] .prediction__dot.is-active {
  background: var(--accent);
}

/* Cards have full background images + dark gradient overlay -
   they render fine on any section bg, no changes needed. */


/* ============================================================
   NAV - desktop header (.nav) + mobile (.mnav)
   The toggle lives in the nav itself, so this must flip.
   ============================================================ */

/* Desktop nav: dark glass → light glass */
[data-theme="light"] .nav {
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(35, 31, 32, 0.08);
  box-shadow: 0 8px 30px rgba(35, 31, 32, 0.08);
  color: #231F20;
}

/* Utility bar dividers + muted text */
[data-theme="light"] .nav__utility {
  border-bottom-color: rgba(35, 31, 32, 0.08);
  color: rgba(35, 31, 32, 0.58);
}
[data-theme="light"] .util-row,
[data-theme="light"] .nav__utility-right button,
[data-theme="light"] .nav__utility-right a {
  color: rgba(35, 31, 32, 0.58);
}
[data-theme="light"] .util-row a:hover,
[data-theme="light"] .nav__utility-right button:hover,
[data-theme="light"] .nav__utility-right a:hover {
  color: #231F20;
  background: rgba(35, 31, 32, 0.05);
}
[data-theme="light"] .util-sep {
  background: rgba(35, 31, 32, 0.16);
}

/* Logo + links */
[data-theme="light"] .nav__logo svg,
[data-theme="light"] .nav__logo img {
  color: #231F20;
}
[data-theme="light"] .nav__link {
  color: rgba(35, 31, 32, 0.8);
}
[data-theme="light"] .nav__link:hover,
[data-theme="light"] .nav__link:focus-visible {
  color: var(--accent);
}
[data-theme="light"] .nav__link[aria-expanded="true"] {
  color: #231F20;
}

/* Icon buttons (search, theme toggle) */
[data-theme="light"] .icon-btn {
  color: rgba(35, 31, 32, 0.8);
}
[data-theme="light"] .icon-btn:hover {
  background: rgba(35, 31, 32, 0.06);
  color: #231F20;
}

/* Menu button - already uses tokens, just ensure the border is visible */
[data-theme="light"] .nav__menu-btn {
  border-color: rgba(35, 31, 32, 0.18);
  color: #231F20;
}
[data-theme="light"] .nav__menu-btn:hover {
  background: #231F20;
  color: #FFFFFF;
  border-color: #231F20;
}

/* Shimmer CTA "Catalogue" - orange outline works on both themes,
   no override needed. */

/* Mobile nav (.mnav) already uses --paper/--ink tokens so it adapts
   automatically. Keep the menu pill explicit for clarity. */
[data-theme="light"] .mnav {
  background: #FFFFFF;
  color: #231F20;
}
[data-theme="light"] .mnav__icon {
  color: rgba(35, 31, 32, 0.8);
}


/* ============================================================
   STATS - By the Numbers
   Replace ether canvas + dark vignette with a warm-paper bg.
   ============================================================ */

[data-theme="light"] .stats {
  /* Soft warm aurora - orange + amber blooms on a parchment paper. */
  background:
    radial-gradient(circle at 18% 22%, rgba(245, 130, 32, 0.18) 0%, rgba(245, 130, 32, 0) 45%),
    radial-gradient(circle at 82% 78%, rgba(255, 194, 14, 0.16) 0%, rgba(255, 194, 14, 0) 50%),
    radial-gradient(circle at 70% 30%, rgba(23, 71, 158, 0.10) 0%, rgba(23, 71, 158, 0) 55%),
    #F5F4F1;
  color: #231F20;
}

/* Hide WebGL liquid-ether canvas - dark-glow effect, replaced by
   the radial-gradient aurora on the .stats background above. */
[data-theme="light"] .stats__liquid {
  display: none;
}

/* Remove dark vignette */
[data-theme="light"] .stats::after {
  background: none;
}

[data-theme="light"] .stats__headline {
  color: #231F20;
}
[data-theme="light"] .stats__headline em {
  color: var(--accent);
}

[data-theme="light"] .stats__grid {
  border-top-color: rgba(35, 31, 32, 0.12);
  border-bottom-color: rgba(35, 31, 32, 0.12);
}
[data-theme="light"] .stats__cell {
  border-bottom-color: rgba(35, 31, 32, 0.10);
}
@media (min-width: 768px) {
  [data-theme="light"] .stats__cell {
    border-right-color: rgba(35, 31, 32, 0.10);
  }
}
@media (min-width: 1024px) {
  [data-theme="light"] .stats__cell:nth-child(2n) {
    border-right-color: rgba(35, 31, 32, 0.10);
  }
}

/* Number separators (×, /, etc.) */
[data-theme="light"] .stats__sep {
  color: rgba(35, 31, 32, 0.42);
}

/* Products intro stats - sits on the dark .au-overview band even in
   light mode, so keep it transparent + borderless and white text. */
[data-theme="light"] .pr-stats {
  background: none;
  color: inherit;
}
[data-theme="light"] .pr-stats::after { background: none; }
[data-theme="light"] .pr-stats__grid {
  border-top-color: transparent;
  border-bottom-color: transparent;
}
[data-theme="light"] .pr-stats .stats__cell {
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
}
/* Labels stay white on the dark band */
[data-theme="light"] .pr-stats .stats__label {
  color: rgba(255, 255, 255, 0.72);
}
[data-theme="light"] .pr-stats .stats__label b {
  color: #FFFFFF;
}

/* Outcome labels */
[data-theme="light"] .stats__label {
  color: rgba(35, 31, 32, 0.8);
}
[data-theme="light"] .stats__label b {
  color: #231F20;
}


/* ============================================================
   AFTERMARKET - Any Brand. Any Make. Anywhere.
   Keep the video; swap the heavy dark tint for a light warm wash
   so the cards still pop and the intro text stays readable.
   ============================================================ */

[data-theme="light"] .aftermarket {
  background: #EFEEE9;
  color: #231F20;
}

/* Lighten the dark tint over the video - warm parchment wash that
   keeps the footage visible but softens contrast for dark text. */
[data-theme="light"] .aftermarket__tint {
  background: linear-gradient(90deg,
    rgba(239, 238, 233, 0.88) 0%,
    rgba(239, 238, 233, 0.72) 38%,
    rgba(239, 238, 233, 0.55) 70%,
    rgba(239, 238, 233, 0.78) 100%);
}

[data-theme="light"] .aftermarket__title {
  color: #231F20;
  text-shadow: none;
}
[data-theme="light"] .aftermarket__title em {
  color: var(--accent);
}
[data-theme="light"] .aftermarket__body,
[data-theme="light"] .aftermarket__body strong {
  color: rgba(35, 31, 32, 0.8);
}

/* Carousel side arrows - flip to dark-outline style */
[data-theme="light"] .aftermarket__nav {
  border-color: rgba(35, 31, 32, 0.22);
  background: rgba(35, 31, 32, 0.04);
  color: #231F20;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
[data-theme="light"] .aftermarket__nav:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}

/* Stack ghosts behind active card - make them visible on the
   light section by tinting + softer shadow */
[data-theme="light"] .aftermarket__stack::before,
[data-theme="light"] .aftermarket__stack::after {
  background: rgba(35, 31, 32, 0.06);
  box-shadow: 0 12px 28px rgba(35, 31, 32, 0.10);
}

/* Active card - soften the heavy drop shadow */
[data-theme="light"] .aftermarket__card {
  box-shadow:
    0 1px 0 rgba(35, 31, 32, 0.04) inset,
    0 18px 44px rgba(35, 31, 32, 0.16),
    0 4px 12px rgba(35, 31, 32, 0.08);
}


/* ============================================================
   DEFENCE - engineered-for-the-forces-that-protect
   Keep the naval image (it carries the message), but swap the
   heavy dark tint for a light warm wash. Restyle the glass cards
   and CTA for the lighter backdrop.
   ============================================================ */

/* Defence section now ships with a white side-vignette base in both
   themes (see defence.css) - no per-theme overrides needed. */


/* ============================================================
   FOOTER
   Flip to warm-paper. Tone down the orange halo so it doesn't
   blow out against a light surface.
   ============================================================ */

[data-theme="light"] .footer {
  background: #F5F4F1;
  color: rgba(35, 31, 32, 0.8);
  border-top-color: rgba(35, 31, 32, 0.08);
}

/* Top hairline - keep the orange accent but at lower intensity */
[data-theme="light"] .footer::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(245, 130, 32, 0.55) 50%,
    transparent 100%
  );
}

/* Soften the radial glow so it reads as accent, not glare */
[data-theme="light"] .footer__glow {
  opacity: 0.32;
  background: radial-gradient(
    ellipse at center,
    rgba(245, 130, 32, 0.30) 0%,
    rgba(245, 130, 32, 0.14) 28%,
    rgba(245, 130, 32, 0.05) 50%,
    rgba(245, 130, 32, 0.00) 70%
  );
}

[data-theme="light"] .footer__logo {
  color: #231F20;
}
[data-theme="light"] .footer__tagline {
  color: #231F20;
}
[data-theme="light"] .footer__copy {
  color: rgba(35, 31, 32, 0.8);
}
[data-theme="light"] .footer__address {
  color: rgba(35, 31, 32, 0.58);
}

[data-theme="light"] .footer__top {
  border-bottom-color: rgba(35, 31, 32, 0.10);
}

/* Column titles stay orange - they already work on both bgs. */

[data-theme="light"] .footer__list a {
  color: rgba(35, 31, 32, 0.8);
}
[data-theme="light"] .footer__list a:hover {
  color: #231F20;
}

[data-theme="light"] .footer__legal {
  color: rgba(35, 31, 32, 0.58);
}
[data-theme="light"] .footer__legal-links a {
  color: rgba(35, 31, 32, 0.58);
}
[data-theme="light"] .footer__legal-links a:hover {
  color: var(--accent);
}

[data-theme="light"] .footer__social a {
  border-color: rgba(35, 31, 32, 0.18);
  background: rgba(35, 31, 32, 0.03);
  color: rgba(35, 31, 32, 0.8);
}
[data-theme="light"] .footer__social a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}


/* ============================================================
   GLASS CTAs (hero__btn) used on flipped sections
   The hero__btn dark-glass treatment vanishes on light bg.
   On the stats + aftermarket CTAs, flip to solid dark pill -
   gives the strongest call-to-action contrast.
   Scoped via parent so the actual hero carousel stays untouched.
   ============================================================ */

[data-theme="light"] .stats .hero__btn,
[data-theme="light"] .aftermarket .hero__btn {
  color: #FFFFFF;
  background: #231F20;
  border: 1px solid #231F20;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 6px 18px rgba(35, 31, 32, 0.18);
  text-shadow: none;
}
[data-theme="light"] .stats .hero__btn::before,
[data-theme="light"] .aftermarket .hero__btn::before {
  display: none;
}
[data-theme="light"] .stats .hero__btn:hover,
[data-theme="light"] .aftermarket .hero__btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 10px 28px rgba(245, 130, 32, 0.30);
}

/* Home aftermarket CTA: orange in light mode, matching the
   "Engineering Inside" CTA (standard .hero__btn--accent light
   treatment). Overrides the dark-pill rule above for this CTA only -
   the stats CTA keeps its dark pill, and dark mode is untouched. */
[data-theme="light"] .aftermarket .hero__btn--primary.aftermarket__cta {
  color: #FFFFFF;
  background:
    linear-gradient(180deg,
      rgba(247, 162, 92, 0.80) 0%,
      rgba(245, 130, 32, 0.77) 55%,
      rgba(218, 111, 18, 0.80) 100%);
  border-color: rgba(218, 111, 18, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 10px 28px rgba(218, 111, 18, 0.22);
}
[data-theme="light"] .aftermarket .hero__btn--primary.aftermarket__cta:hover {
  background:
    linear-gradient(180deg,
      rgba(250, 179, 120, 0.95) 0%,
      rgba(245, 143,  51, 0.92) 55%,
      rgba(197, 102,  20, 0.95) 100%);
  border-color: rgba(218, 111, 18, 0.45);
}


/* ============================================================
   REDUCED MOTION - no transition overrides needed;
   existing reduced-motion rules still apply.
   ============================================================ */


/* ============================================================
   ABOUT PAGE - light-mode overrides
   Sections kept dark (cinematic, image- or video-driven):
     · .au-hero        - banner image
     · .au-overview    - full-bleed background image + gradient band
     · .ms-section     - milestones sticky-scroll with image backgrounds
     · .mfg            - manufacturing sticky video
   Sections flipped to warm-paper surfaces:
     · .mv-section     (Vision & Mission)
     · .pp-section     (Purpose & Priorities)
     · .leadership
     · .gp             (Global Presence)
     · .aw-section     (Awards & Recognition)
     · .cert-section   (Certifications)
   ============================================================ */

/* ── Vision & Mission ─────────────────────────────────────── */
[data-theme="light"] .mv-section {
  background:
    radial-gradient(circle at 18% 22%, rgba(245, 130, 32, 0.16) 0%, rgba(245, 130, 32, 0) 45%),
    radial-gradient(circle at 82% 78%, rgba(255, 194, 14, 0.14) 0%, rgba(255, 194, 14, 0) 50%),
    #F5F4F1;
  color: #231F20;
}
[data-theme="light"] .mv-liquid       { display: none; }
[data-theme="light"] .mv-liquid-tint  { display: none; }
[data-theme="light"] .mv-title        { color: #231F20; }
[data-theme="light"] .mv-title em     { color: var(--accent); }
[data-theme="light"] .mv-statements::before {
  background: rgba(35, 31, 32, 0.12);
}
[data-theme="light"] .mv-statement__label { color: var(--accent); }
[data-theme="light"] .mv-statement__text  { color: rgba(35, 31, 32, 0.8); }

/* ── Purpose & Priorities ─────────────────────────────────── */
[data-theme="light"] .pp-section {
  background: #EFEEE9;
}
[data-theme="light"] .pp-aurora-layer--a { opacity: 0.35; }
[data-theme="light"] .pp-aurora-layer--b { opacity: 0.30; }
[data-theme="light"] .pp-section__title    { color: #231F20; }
[data-theme="light"] .pp-section__title em { color: var(--accent); }
[data-theme="light"] .pp-tab        { color: rgba(35, 31, 32, 0.58); }
[data-theme="light"] .pp-tab::before { background: rgba(35, 31, 32, 0.15); }
[data-theme="light"] .pp-tab:hover  { color: rgba(35, 31, 32, 0.8); }
[data-theme="light"] .pp-tab.is-active { color: var(--accent); }
/* Panels are image cards - keep the dark caption overlay so titles
   stay legible against photography in both themes. */

/* ── Milestones (sticky-scroll) - kept dark in both themes;
       images, tinted background, white year nav read identically. */

/* ── Leadership Team ──────────────────────────────────────── */
[data-theme="light"] .leadership {
  background: #FAFAF8;
}
[data-theme="light"] .ld-aurora-layer--a { opacity: 0.30; }
[data-theme="light"] .ld-aurora-layer--b { opacity: 0.25; }
[data-theme="light"] .leadership__title    { color: #231F20; }
[data-theme="light"] .leadership__title em { color: var(--accent); }
[data-theme="light"] .ld-tab {
  color: rgba(35, 31, 32, 0.58);
  border-color: rgba(35, 31, 32, 0.16);
}
[data-theme="light"] .ld-tab.is-active {
  color: #231F20;
  border-color: var(--accent);
  background: rgba(245, 130, 32, 0.10);
}
[data-theme="light"] .ld-tab:hover:not(.is-active) {
  color: rgba(35, 31, 32, 0.8);
  border-color: rgba(35, 31, 32, 0.32);
}
[data-theme="light"] .leadership__role { color: rgba(35, 31, 32, 0.58); }
/* .leadership__name keeps orange (--accent); already readable on white */
/* Footnote text is white-on-dark by default; flip to a readable ink on
   the light section (a touch darker than the roles since it's small print). */
[data-theme="light"] .ld-foot { color: rgba(35, 31, 32, 0.72); }

/* ── Manufacturing & Infrastructure (sticky video) - kept dark;
       the video + black band read the same in both themes. */

/* ── Global Presence ──────────────────────────────────────── */
/* Global Presence keeps its dark globe backdrop in BOTH themes, so it must
   not pick up the light-mode paper background / dark text (which left the
   title + lede nearly invisible over the globe). Title, lede and accordion
   stay light via their base rules. */
/* Invert the dark world map to a soft gray-on-paper rendering */
[data-theme="light"] .gp__map-img  {
  opacity: 1;
  filter: invert(1) brightness(0.92) contrast(0.95) saturate(0);
}
/* Pins: dark plus on white circle to read on paper */
[data-theme="light"] .gp__pin {
  background: #FFFFFF;
  border-color: rgba(35, 31, 32, 0.55);
  animation-name: gpPinPulseLight;
}
[data-theme="light"] .gp__pin::before,
[data-theme="light"] .gp__pin::after {
  background: #231F20;
}
[data-theme="light"] .gp__pin:hover {
  background: rgba(245, 130, 32, 0.18);
  border-color: var(--accent);
}
/* Active pin in light mode - filled orange with white plus */
[data-theme="light"] .gp__pin.is-active {
  background: var(--accent);
  border-color: var(--accent);
  animation-name: gpPinPulseActive;
}
[data-theme="light"] .gp__pin.is-active::before,
[data-theme="light"] .gp__pin.is-active::after {
  background: #FFFFFF;
}
@keyframes gpPinPulseLight {
  0%, 100% { box-shadow: 0 0 0 0   rgba(35, 31, 32, 0.10); }
  50%       { box-shadow: 0 0 0 10px rgba(35, 31, 32, 0.00); }
}
/* Popover on light surface: white card with dark text */
[data-theme="light"] .gp__pop {
  background: #FFFFFF;
  border-color: rgba(35, 31, 32, 0.14);
  box-shadow: 0 12px 32px rgba(35, 31, 32, 0.14);
}
[data-theme="light"] .gp__pop::after {
  background: #FFFFFF;
  border-color: rgba(35, 31, 32, 0.14);
}
[data-theme="light"] .gp__pop-title { color: var(--accent); }
[data-theme="light"] .gp__pop-text  { color: rgba(35, 31, 32, 0.8); }

/* ── Awards & Recognition ─────────────────────────────────── */
[data-theme="light"] .aw-section {
  background:
    radial-gradient(circle at 18% 22%, rgba(245, 130, 32, 0.16) 0%, rgba(245, 130, 32, 0) 45%),
    radial-gradient(circle at 82% 78%, rgba(255, 194, 14, 0.14) 0%, rgba(255, 194, 14, 0) 50%),
    #FAFAF8;
}
[data-theme="light"] .aw-liquid       { display: none; }
[data-theme="light"] .aw-liquid-tint  { display: none; }
[data-theme="light"] .aw-title        { color: #231F20; }
[data-theme="light"] .aw-title__accent { color: var(--accent); }
[data-theme="light"] .aw-tab {
  color: rgba(35, 31, 32, 0.58);
  border-color: rgba(35, 31, 32, 0.18);
}
[data-theme="light"] .aw-tab:hover {
  color: #231F20;
  border-color: rgba(35, 31, 32, 0.40);
}
[data-theme="light"] .aw-tab.is-active {
  color: #FFFFFF;
  background: var(--accent);
  border-color: var(--accent);
}
/* Leaf-image cards: the laurel art is a WHITE silhouette, so on warm
   paper it vanishes. Recolour it to a dark grey (brightness(0) makes it
   a solid black silhouette; invert() lifts that to grey) so the leaves
   frame the award text with presence instead of reading as white. */
[data-theme="light"] .aw-card__img-wrap img {
  opacity: 1;
  filter: brightness(0) invert(0.22);
}
[data-theme="light"] .aw-card__label {
  color: #231F20;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* ── Certifications ───────────────────────────────────────── */
[data-theme="light"] .cert-section {
  background: #FAFAF8;
}
[data-theme="light"] .cert-lightrays { display: none; }
[data-theme="light"] .cert-title { color: #231F20; }
/* .cert-nav-btn light-mode override moved to css/buttons.css. */
[data-theme="light"] .cert-progress-seg { background: rgba(35, 31, 32, 0.20); }
[data-theme="light"] .cert-progress-seg.is-active { background: var(--accent); }
/* Cards are already white - soften their drop shadow on warm paper. */
[data-theme="light"] .cert-card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(35, 31, 32, 0.06);
}
/* "View More" glass button - flip to a solid pill on light bg */
[data-theme="light"] .cert-view-more {
  background: #231F20;
  color: #FFFFFF;
  border-color: #231F20;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .cert-view-more:hover {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 10px 28px rgba(245, 130, 32, 0.30);
}

/* ── About-hero CTA: glass pill stays the glass treatment because
       the hero is dark in both themes. No override needed. */

/* ── Breadcrumb stays light-on-dark over the dark hero. No change. */

/* =============================================================
   PRODUCTS PAGE - light-mode overrides
   Hero + intro stay cinematic dark. Catalog flips to warm paper.
   ============================================================= */
[data-theme="light"] .pr-catalog {
  background: #FAFAF8;
}
[data-theme="light"] .pr-catalog__title { color: #231F20; }
[data-theme="light"] .pr-catalog__sub   { color: rgba(35, 31, 32, 0.58); }

/* Filter bar */
[data-theme="light"] .pr-filters {
  background: #FFFFFF;
  border-color: rgba(35, 31, 32, 0.08);
}
[data-theme="light"] .pr-filters__label { color: rgba(35, 31, 32, 0.58); }
[data-theme="light"] .pr-filters__meta  { border-top-color: rgba(35, 31, 32, 0.06); }
[data-theme="light"] .pr-filters__count { color: rgba(35, 31, 32, 0.58); }
[data-theme="light"] .pr-filters__clear:hover { color: #C56614; }

[data-theme="light"] .pr-chip {
  color: rgba(35, 31, 32, 0.8);
  border-color: rgba(35, 31, 32, 0.16);
}
[data-theme="light"] .pr-chip:hover {
  color: #231F20;
  border-color: rgba(35, 31, 32, 0.35);
}
/* .is-active keeps the accent fill */

/* Grid empty state */
[data-theme="light"] .pr-grid__empty { color: rgba(35, 31, 32, 0.58); }

/* Card */
[data-theme="light"] .pr-card {
  background: #FFFFFF;
  border-color: rgba(35, 31, 32, 0.08);
}
[data-theme="light"] .pr-card:hover {
  border-color: rgba(35, 31, 32, 0.18);
  box-shadow: 0 10px 32px rgba(35, 31, 32, 0.06);
}
[data-theme="light"] .pr-card__name  { color: #231F20; }
[data-theme="light"] .pr-card__intro { color: rgba(35, 31, 32, 0.8); }
[data-theme="light"] .pr-card__tag {
  color: rgba(35, 31, 32, 0.58);
  background: rgba(35, 31, 32, 0.05);
}

/* About footnote (under Awards + Certifications) */
[data-theme="light"] .about-footnote { color: rgba(35, 31, 32, 0.58); }