/* ═════════════════════════════════════════════════════════════════════════════
   theme.css — shared chrome (nav, H1) + light-mode layer + theme toggle.

   Loaded on EVERY page, in both themes. Ungated rules below (H1, site-nav, mega
   menu) are the dark authored look. Everything light-specific is gated behind
   `html[data-theme="light"]`, so dark mode renders exactly as authored.

   HOW THE LIGHT-MODE OVERRIDES WORK
   ---------------------------------
   All colour on this site is authored inline, so light rules match the RENDERED
   inline style string and win with `!important`. React re-serialises inline styles
   before they reach the DOM, so the values below are the *normalised* forms
   (`#fff` → `rgb(255, 255, 255)`, `rgba(255,255,255,.85)` → `rgba(255, 255, 255, 0.85)`).
   Matching the authored text instead would silently never match — see CLAUDE.md.

   Property matching is anchored (`[style^="color:"]` / `[style*="; color:"]`) so a
   `color:` rule cannot accidentally match `background-color:` or `border-color:`,
   which share the substring.

   Text inside a `[data-surface="dark"]` element stays white. theme.js stamps that
   attribute on the surfaces that remain dark under light mode (purple brand cards,
   black glass buttons, photo heroes, the footer). Those rules carry one more
   compound than the blanket rules, so they win on specificity.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── Shared page base (was duplicated in every page <style>) ───────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  font-family: 'DM Sans', sans-serif;
  background: #0a0a0a;
  color: #fff;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
button { font-family: 'DM Sans', sans-serif; cursor: pointer; }
input::placeholder { color: #FFFFFF; }

.wr-word { display: inline-block; white-space: pre; }
.wr-char { display: inline-block; will-change: transform, filter, opacity; }
@keyframes scroll-arrow-bob {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(3px); }
}
.scroll-arrow-bob { animation: scroll-arrow-bob 1.6s ease-in-out infinite; }
.brand-arrow {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url('uploads/arrow-brand.svg') center / contain no-repeat;
  mask: url('uploads/arrow-brand.svg') center / contain no-repeat;
  vertical-align: middle;
  flex-shrink: 0;
}
.orb-layer {
  position: absolute;
  inset: 0;
  filter: blur(52px) saturate(1.1) hue-rotate(38deg);
  opacity: 0.55;
  pointer-events: none;
}
.sr-el { will-change: opacity, transform; }

/* Nav / footer side padding taper (shared; was copied per page) */
@media (min-width: 1000px) and (max-width: 1199px) {
  #nav-inner, nav .container-fluid {
    padding: 0 40px !important;
    --bs-gutter-x: 80px !important;
  }
}
@media (min-width: 769px) and (max-width: 999px) {
  #nav-inner, nav .container-fluid {
    padding: 0 24px !important;
    --bs-gutter-x: 48px !important;
  }
  #nav-links { gap: 14px !important; }
}
@media (min-width: 769px) and (max-width: 1199px) {
  #footer-left { padding: 60px 40px 60px 80px !important; }
}
@media (max-width: 768px) {
  #nav-inner { padding: 0 24px !important; }
  .orb-layer { display: none !important; }
}

/* ── Type scale (single source of truth) ─────────────────────────────────────
   Size/weight/line-height live here as CSS variables. Dark colours are the
   authored defaults below; light mode recolours via html[data-theme="light"].
   Photo heroes / purple cards keep white type via [data-surface="dark"].
   Layout-only props (margin, max-width, position) may stay inline. */
:root {
  --t-h1: 2.5rem;
  --t-h2: 2.2rem;
  --t-h3: 1.5rem;
  --t-body: 15px;            /* hero lede + section p + card body */
  --t-cta: 15px;
  --t-nav-mega: 18px;        /* mega menu column titles */
  --t-nav-mega-title: 26px;  /* mega menu section title */
  --t-nav-mega-num: 13px;    /* mega menu column numerals */
  --t-search: 14px;          /* nav search field + result titles */
  --t-prog-eyebrow: 12px;    /* programs slider event eyebrow */
  --t-stat: 2.15rem;
  --t-stat-label: 15px;
  --t-eyebrow: 11px;
  --t-pill: 13px;
  --t-toc-label: 10px;
  --t-cue: 11px;
  --t-card-title: 1.5rem;
  --w-display: 300;
  --w-body: 400;
  --w-label: 500;
  --w-card-title: 500;
  --lh-display: 1.18;
  --lh-body: 1.65;
  --c-heading: #fff;
  --c-body: rgba(255, 255, 255, 0.85);
  --c-eyebrow: #54C8E8;
  --c-cue: #fff;
  --c-card-body: rgba(210, 190, 230, 0.72);
  --c-stat: #54C8E8;
  --c-stat-label: rgba(255, 255, 255, 0.72);
  --c-toc-label: #fff;
  --c-toc-link: #fff;
  --c-bc: rgba(255, 255, 255, 0.55);
  --c-bc-current: rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
  :root {
    --t-h1: 2rem;
    --t-h2: 1.75rem;
    --t-h3: 1rem;
    --t-card-title: 1.2rem;
    --t-stat: 1.85rem;
  }
}

@media (min-width: 1921px) {
  :root {
    --t-body: 18px;          /* body / lede / card body only */
  }
}

/* Surfaces that stay dark under light mode (photo heroes, purple cards, footer) */
html[data-theme="light"] [data-surface="dark"] {
  --c-heading: #fff;
  --c-body: rgba(255, 255, 255, 0.85);
  --c-eyebrow: #54C8E8;
  --c-cue: #fff;
  --c-card-body: rgba(210, 190, 230, 0.72);
  --c-stat: #54C8E8;
  --c-stat-label: rgba(255, 255, 255, 0.72);
  --c-toc-label: #fff;
  --c-toc-link: #fff;
  --c-bc: rgba(255, 255, 255, 0.55);
  --c-bc-current: rgba(255, 255, 255, 0.9);
}

h1 {
  font-size: var(--t-h1) !important;
  font-weight: var(--w-display) !important;
  line-height: var(--lh-display) !important;
  color: var(--c-heading) !important;
  margin: 0 0 22px !important;
}

h2 {
  font-size: var(--t-h2) !important;
  font-weight: var(--w-display) !important;
  line-height: var(--lh-display) !important;
  color: var(--c-heading) !important;
  margin: 0 0 22px !important;
}

#footer-right h2 {
  text-align: right;
}

h3 {
  font-size: var(--t-h3) !important;
  font-weight: var(--w-display) !important;
  line-height: 1.2 !important;
  color: var(--c-heading) !important;
  margin: 0 0 14px !important;
}

/* Accordion row titles sit beside small numerals in a flex row — the global
   h3 bottom margin throws that vertical centering off. */
#pt-acc h3,
.faq-list h3 {
  margin: 0 !important;
}

/* Body / hero lede / card body — one shared --t-body token */
.hero p,
section p,
.accent-card p,
.sub-card p {
  font-size: var(--t-body) !important;
  font-weight: var(--w-body) !important;
  line-height: var(--lh-body) !important;
  color: var(--c-body) !important;
}

.accent-card p,
.sub-card p {
  color: var(--c-card-body) !important;
}

/* Legal + news article lists — same body token as section p */
#legal-inner li,
#legal-inner .legal-p,
#art-inner > ul li,
#art-inner .news-body ul li,
#art-inner .news-body p {
  font-size: var(--t-body) !important;
  font-weight: var(--w-body) !important;
  color: var(--c-body) !important;
}
#legal-inner li {
  line-height: 1.85;
  margin-bottom: 10px;
}
#art-inner > ul li,
#art-inner .news-body ul li {
  line-height: 1.85;
  margin-bottom: 14px;
}
#art-inner > ul li:last-child,
#art-inner .news-body ul li:last-child { margin-bottom: 0; }
#legal-inner ul {
  margin: 0 0 26px 24px;
  list-style: disc;
}
#art-inner > ul,
#art-inner .news-body ul {
  margin: 0 0 26px;
  padding: 0 0 0 1.15em;
  list-style: disc;
}
#legal-inner .legal-p,
#art-inner .news-body p {
  line-height: 1.85;
  margin-bottom: 26px;
}
#art-inner .news-body p:last-child {
  margin-bottom: 0;
}

.accent-card h3 {
  font-size: var(--t-card-title) !important;
  font-weight: var(--w-card-title) !important;
  color: var(--c-heading) !important;
  margin-bottom: 12px !important;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-eyebrow) !important;
  font-weight: var(--w-label) !important;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--c-eyebrow) !important;
  margin-bottom: 22px;
}
.eyebrow img {
  height: 1em;
  width: auto;
  display: block;
}

.scroll-cue {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-cue) !important;
  font-weight: var(--w-body) !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-cue) !important;
}

.stat-num {
  font-size: var(--t-stat) !important;
  font-weight: var(--w-display) !important;
  color: var(--c-stat) !important;
  line-height: 1.1;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.stat-label,
section p.stat-label {
  font-size: var(--t-body) !important;
  font-weight: var(--w-body) !important;
  color: var(--c-stat-label) !important;
  line-height: 1.45 !important;
}

.home-impact-label {
  max-width: 220px;
}

.pill {
  font-size: var(--t-pill) !important;
  font-weight: var(--w-body) !important;
  line-height: 1.4;
}

.page-toc-label {
  font-size: var(--t-toc-label) !important;
  font-weight: var(--w-label) !important;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--c-toc-label) !important;
  margin-bottom: 18px;
}

.page-toc a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--t-body) !important;
  font-weight: var(--w-body) !important;
  color: var(--c-toc-link) !important;
  transition: color 0.2s ease;
}
.page-toc a span {
  color: inherit;
  font-size: inherit;
}

.bc-item {
  font-size: var(--t-eyebrow) !important;
  font-weight: var(--w-body) !important;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-bc) !important;
  transition: color 0.25s ease;
}
.bc-item:hover { color: var(--c-heading) !important; }
.bc-current {
  font-size: var(--t-eyebrow) !important;
  font-weight: var(--w-body) !important;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-bc-current) !important;
}

/* Section gutters: 150px is a 1920 value. At 1401–1440 taper to 60px; at ≤1400
   taper to 50px. Leave each container's vertical padding alone. min-width 769
   keeps the phone 24px gutters untouched. #accordion-inner is full-bleed from
   ≤1199 (see index.php). #legal-inner uses 150px as TOP padding with 20px
   sides — don't widen it. Upcoming Event slides are not .pg-pad — match them. */
@media (min-width: 1401px) and (max-width: 1440px) {
  html .pg-pad:not(#legal-inner) {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  html #programs-slider .prog-slider-shell {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  html #footer-left { padding-left: 60px !important; }
  html #footer-right-inner { padding-right: 60px !important; }
  html [style*="left: max(150px"]:not([style*="margin-left: max(150px"]):not([style*="padding-left: max(150px"]),
  html [style*="left:max(150px"]:not([style*="margin-left:max(150px"]):not([style*="padding-left:max(150px"]) {
    left: 60px !important;
  }
  html [style*="right: max(150px"],
  html [style*="right:max(150px"] {
    right: 60px !important;
  }
  /* About “Why Partner with KUEC?” uses margin-left, not .pg-pad / left. */
  html #partner-card {
    margin-left: 60px !important;
  }
}
@media (min-width: 769px) and (max-width: 1400px) {
  html .pg-pad:not(#legal-inner) {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
  html #programs-slider .prog-slider-shell {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
  html #footer-left { padding-left: 50px !important; }
  html #footer-right-inner { padding-right: 50px !important; }
  /* Heroes that pin copy with left/right: max(150px, calc(50vw - 810px)) instead
     of .pg-pad (About title + scroll cue, and the same pattern on other pages). */
  html [style*="left: max(150px"]:not([style*="margin-left: max(150px"]):not([style*="padding-left: max(150px"]),
  html [style*="left:max(150px"]:not([style*="margin-left:max(150px"]):not([style*="padding-left:max(150px"]) {
    left: 50px !important;
  }
  html [style*="right: max(150px"],
  html [style*="right:max(150px"] {
    right: 50px !important;
  }
  html #partner-card {
    margin-left: 50px !important;
  }
}

/* ── Site navbar ───────────────────────────────────────────────────────────── */
nav.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: 58px;
  background: #0a0a0a;
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] nav.site-nav {
  background: #0a0a0a !important;
}

#nav-inner {
  max-width: 1920px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 150px;
}

.nav-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-brand-link {
  display: inline-flex;
  align-items: center;
  padding-bottom: 2px;
}

.nav-logo {
  height: 44px;
  width: auto;
  display: block;
}
.nav-logo-light { display: none; }
html[data-theme="light"] .nav-logo-dark { display: none; }
html[data-theme="light"] .nav-logo-light { display: block; }

#nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}

#nav-links .nav-link {
  font-size: var(--t-body);
  font-weight: var(--w-body);
  color: rgba(255, 255, 255, 0.85);
}

#nav-links .nav-link.nav-active {
  color: #74c6e4;
}

#nav-links .nav-dd > .nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Hero "What's on this page" items (labels + numbers) */
[id$="-toc"] > a,
[id$="-toc"] > a span,
#cp-hero-card a,
#cp-hero-card a span {
  font-size: var(--t-body) !important;
  font-weight: var(--w-body) !important;
}

.nav-dd-arrow {
  width: 9px;
  height: auto;
  display: block;
}
/* Active Core Pillars caret — match nav-active label color per theme. */
.nav-link.nav-active .nav-dd-arrow {
  filter: brightness(0) saturate(100%) invert(81%) sepia(5%) saturate(3065%) hue-rotate(151deg) brightness(0.84) contrast(1.06);
}

#nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* Purple plate cards. */
.p-card,
.prog-card {
  overflow: hidden;
  border-radius: 15px;
}

/* ── Accent service cards ────────────────────────────────────────────────────
   Shared across Research & Advisory, IP Resources, leasing, TRL, investment,
   and COE service grids. Dark: purple gradient + lavender body. Light: white
   plate, 5px left accent border, icon tint matching the border cycle. */
.accent-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  overflow: hidden;
  border-radius: 15px;
  text-align: left;
  background: linear-gradient(45deg, rgba(105, 20, 132, 1) 20%, rgba(32, 19, 117, 1) 54%, rgba(0, 0, 0, 1) 89%) !important;
}

/* Shared 15px radius on glass / wash / form cards used across inner pages. */
.who-vm-card,
.pillar-list,
.why-card,
.inv-res-card,
.inv-eco-card,
.d-card,
.ip-outcome-card,
.ip-success-card,
#form-card,
#inq-guide,
#contact-form {
  border-radius: 15px;
  overflow: hidden;
}

/* Home Innovation Programs slider — full-bleed section fill + 2-col slides (copy | image).
   Dark fill matches `.accent-card`; light mode is a plain white section (no border). */
#programs-slider {
  position: relative;
  overflow: hidden;
  background: linear-gradient(45deg, rgba(105, 20, 132, 1) 20%, rgba(32, 19, 117, 1) 54%, rgba(0, 0, 0, 1) 89%);
}
#programs-slider .prog-slider-shell {
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  padding: 72px max(150px, calc((100% - 1620px) / 2));
  height: auto;
  min-height: 560px;
  background: transparent;
  overflow: hidden;
}
#programs-slider [data-prog-content] {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 64px 56px 72px 0;
  min-width: 0;
  z-index: 1;
  overflow: visible;
}
#programs-slider .prog-content-viewport {
  overflow-x: clip;
  overflow-y: visible;
  width: 100%;
  min-width: 0;
}
#programs-track {
  display: flex;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
#programs-slider .prog-content-panel {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
#programs-slider .prog-content-panel .btn-gradient {
  flex-shrink: 0;
  margin-bottom: 4px;
}
#programs-slider .prog-event-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
#programs-slider .prog-event-actions .btn-gradient,
#programs-slider .prog-showcase-btn,
#programs-slider .prog-cal-btn {
  flex-shrink: 0;
  margin-bottom: 0;
}
#programs-slider .prog-cal {
  position: relative;
  flex-shrink: 0;
  z-index: 6;
}
#programs-slider .prog-cal-btn {
  gap: 8px;
  padding-right: 20px;
}
#programs-slider .prog-cal-caret {
  display: block;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
#programs-slider .prog-cal-btn[aria-expanded="true"] .prog-cal-caret {
  transform: rotate(180deg);
}
#programs-slider .prog-cal-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  min-width: 220px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 12px;
  background: rgba(14, 10, 28, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
}
#programs-slider .prog-cal-menu[hidden] {
  display: none !important;
}
#programs-slider .prog-cal-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  cursor: pointer;
  line-height: 1.3;
  white-space: nowrap;
  box-sizing: border-box;
}
#programs-slider .prog-cal-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}
#programs-slider .prog-cal-option:hover,
#programs-slider .prog-cal-option:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}
#programs-slider .prog-showcase-body {
  max-width: 520px;
  margin: 16px 0 0;
  padding: 16px 18px;
  box-sizing: border-box;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.92) !important;
}
#programs-slider .prog-showcase-body[hidden] {
  display: none !important;
}
#programs-slider .prog-event-head {
  margin-bottom: 28px;
  width: 100%;
}
#programs-slider .prog-event-head-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  text-align: left;
}
#programs-slider .prog-event-eyebrow {
  display: inline-block;
  font-size: var(--t-prog-eyebrow);
  font-weight: var(--w-label);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--c-eyebrow);
  margin-bottom: 14px;
}
#programs-slider .prog-event-head-copy h2 {
  max-width: 560px;
  margin: 0 !important;
}
#programs-slider .prog-event-head-countdown {
  display: flex;
  align-items: start;
  justify-content: flex-start;
  width: 100%;
  margin-top: 16px;
}
#programs-slider .prog-countdown-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
#programs-slider .prog-event-date {
  font-size: var(--t-body) !important;
  font-weight: var(--w-body) !important;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.88) !important;
  margin: 10px 0 0 !important;
}
#programs-slider .prog-countdown {
  display: flex;
  gap: 0;
  margin-bottom: 0;
  justify-content: flex-start;
  border-radius: 12px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 42%, rgba(255, 255, 255, 0) 100%),
    rgba(8, 10, 18, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
#programs-slider .prog-countdown-unit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 14px 12px 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
#programs-slider .prog-countdown-unit:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  pointer-events: none;
}
#programs-slider .prog-countdown-val {
  font-size: 1.55rem;
  font-weight: 200;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  text-shadow: 0 0 18px rgba(84, 200, 232, 0.28);
}
#programs-slider .prog-countdown-lbl {
  margin-top: 7px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: rgba(84, 200, 232, 0.88);
}
#programs-slider .prog-countdown-ended {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 14px 18px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
#programs-slider .prog-slide-media {
  position: relative;
  min-height: 560px;
  min-width: 0;
  overflow: hidden;
  align-self: stretch;
}
#programs-media-track {
  position: absolute;
  inset: 0;
  display: flex;
  height: 100%;
  align-items: stretch;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
#programs-slider .prog-media-panel {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
}
#programs-slider .prog-slide-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  display: block;
}
#programs-slider .prog-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.3);
  transition: background 0.2s;
}
#programs-slider .prog-dot.is-active {
  background: #fff;
}
#prog-arrows {
  display: none;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  flex-shrink: 0;
}
#prog-arrow-prev,
#prog-arrow-next {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(145deg, #ffffff66, #ffffff00);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
#prog-dots {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  gap: 7px;
  z-index: 10;
}
#programs-slider.has-multi #prog-arrows,
#programs-slider.has-multi #prog-dots {
  display: flex;
}

html[data-theme="light"] #programs-slider {
  background: radial-gradient(1400px 900px at 50% 20%, #ffffff 0%, #ddd 44%, rgba(242, 242, 245, 0) 80%) !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-theme="light"] #programs-slider [data-prog-content] h2 {
  color: var(--lt-text) !important;
}
html[data-theme="light"] #programs-slider .prog-event-eyebrow {
  color: #0055b8 !important;
}
html[data-theme="light"] #programs-slider [data-prog-content] p {
  color: var(--lt-text-2) !important;
}
html[data-theme="light"] #programs-slider .prog-showcase-btn,
html[data-theme="light"] #programs-slider .prog-cal-btn {
  background: rgba(0, 0, 0, 0.7) !important;
  color: #fff !important;
}
html[data-theme="light"] #programs-slider .prog-cal-menu {
  background: #fff !important;
  border: 1px solid var(--lt-line) !important;
  box-shadow: 0 12px 32px rgba(18, 24, 38, 0.12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="light"] #programs-slider .prog-cal-option {
  color: var(--lt-text) !important;
}
html[data-theme="light"] #programs-slider .prog-cal-icon [fill="#fff"] {
  fill: #fff !important;
}
html[data-theme="light"] #programs-slider .prog-cal-option:hover,
html[data-theme="light"] #programs-slider .prog-cal-option:focus-visible {
  background: rgba(18, 24, 38, 0.06) !important;
}
html[data-theme="light"] #programs-slider [data-prog-content] .prog-showcase-body {
  background: rgba(18, 24, 38, 0.045) !important;
  border: 1px solid var(--lt-line-2) !important;
  color: var(--lt-text-2) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="light"] #programs-slider .prog-event-date {
  color: var(--lt-text) !important;
}
html[data-theme="light"] #programs-slider .prog-countdown {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 100%),
    var(--lt-bg-2) !important;
  border-color: var(--lt-line) !important;
  box-shadow: 0 10px 24px rgba(18, 24, 38, 0.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="light"] #programs-slider .prog-countdown-unit:not(:last-child)::after {
  background: linear-gradient(to bottom, rgba(16, 16, 20, 0), rgba(16, 16, 20, 0.12), rgba(16, 16, 20, 0)) !important;
}
html[data-theme="light"] #programs-slider .prog-countdown-val {
  color: var(--lt-text) !important;
  text-shadow: none !important;
}
html[data-theme="light"] #programs-slider .prog-countdown-lbl {
  color: var(--lt-accent) !important;
}
html[data-theme="light"] #programs-slider .prog-countdown-ended {
  color: var(--lt-text-2) !important;
  background: rgba(16, 16, 20, 0.04) !important;
  border-color: var(--lt-line) !important;
}
html[data-theme="light"] #programs-slider .prog-dot {
  background: rgba(16, 16, 20, 0.25);
}
html[data-theme="light"] #programs-slider .prog-dot.is-active {
  background: var(--lt-text);
}
html[data-theme="light"] #prog-arrow-prev,
html[data-theme="light"] #prog-arrow-next {
  background: linear-gradient(145deg, rgba(16, 16, 20, 0.12), rgba(16, 16, 20, 0.02)) !important;
  box-shadow: none !important;
}
html[data-theme="light"] #prog-arrow-prev svg path,
html[data-theme="light"] #prog-arrow-next svg path {
  stroke: var(--lt-text) !important;
}

@media (min-width: 1000px) and (max-width: 1199px) {
  #programs-slider .prog-slider-shell { padding: 56px 40px; }
  #programs-slider [data-prog-content] { padding: 48px 40px 56px 0; }
}
@media (min-width: 769px) and (max-width: 999px) {
  #programs-slider .prog-slider-shell { padding: 48px 24px; min-height: 420px; }
  #programs-slider [data-prog-content] { padding: 40px 28px 48px 0; }
}
@media (max-width: 768px) {
  #programs-slider { height: auto !important; }
  #programs-slider .prog-slider-shell { grid-template-columns: 1fr !important; padding: 28px 24px 50px !important; height: auto !important; min-height: 0 !important; }
  #programs-slider .prog-slide-media { display: none !important; }
  #programs-slider.has-multi #prog-arrows { display: flex !important; }
  #prog-dots { position: static !important; justify-content: center !important; padding: 18px 0 28px !important; transform: none !important; left: auto !important; }
  #programs-slider [data-prog-content] { padding: 25px 0px 0 !important; text-align: left !important; }
  #programs-slider .prog-event-head { margin-bottom: 22px !important; }
  #programs-slider .prog-event-head-countdown { margin-top: 14px !important; }
  #programs-slider .prog-event-head-copy h2 { font-size: 1.35rem !important; max-width: none !important; line-height: 1.2 !important; margin: 0 !important; }
  #programs-slider .prog-countdown-wrap { align-items: stretch !important; width: 100%; }
  #programs-slider .prog-event-head-countdown .prog-countdown {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100%;
  }
  #programs-slider .prog-countdown-unit {
    min-width: 0 !important;
    width: 100%;
    padding: 12px 8px 10px !important;
  }
  #programs-slider .prog-countdown-unit:nth-child(odd)::after { display: none !important; }
  #programs-slider .prog-countdown-unit:nth-child(-n+2)::before {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 0;
    height: 1px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
  }
  #programs-slider .prog-countdown-val { font-size: 1.2rem !important; }
  #programs-slider .prog-countdown-lbl { font-size: 8px !important; letter-spacing: 1px !important; }
  #programs-slider [data-prog-content] p { max-width: none !important; margin-bottom: 20px !important; }
  #programs-slider [data-prog-content] .prog-showcase-body {
    max-width: none !important;
    margin-top: 16px !important;
    margin-bottom: 0 !important;
  }
  #programs-slider [data-prog-content] .btn-gradient { align-self: flex-start !important; }
  #programs-slider .prog-event-actions { align-self: flex-start !important; }
}
.accent-card h3 {
  margin-bottom: 12px !important;
}

/* Subsidiaries / EIR card link CTAs — white in dark mode, accent in light */
#subs-cards .subs-card-cta,
#subs-cards .eir-cta {
  color: #fff !important;
  font-size: var(--t-body);
  font-weight: var(--w-body);
}
html[data-theme="light"] #subs-cards .subs-card-cta,
html[data-theme="light"] #subs-cards .eir-cta {
  color: var(--lt-accent) !important;
}

html[data-theme="light"] .accent-card {
  background: #fff !important;
  box-shadow: none !important;
  border-left: 5px solid transparent;
}
html[data-theme="light"] .accent-card:nth-child(4n+1) { border-left-color: #0055b8; }
html[data-theme="light"] .accent-card:nth-child(4n+2) { border-left-color: #b83e54; }
html[data-theme="light"] .accent-card:nth-child(4n+3) { border-left-color: #74c6e4; }
html[data-theme="light"] .accent-card:nth-child(4n+4) { border-left-color: #8b66c6; }
html[data-theme="light"] .accent-card h3 { color: var(--lt-text) !important; }
html[data-theme="light"] .accent-card p { color: var(--lt-text-2) !important; }
html[data-theme="light"] .accent-card:nth-child(4n+1) > img {
  filter: brightness(0) saturate(100%) invert(78%) sepia(53%) saturate(1067%) hue-rotate(162deg) brightness(0.36) contrast(1.33) !important;
  opacity: 1 !important;
}
html[data-theme="light"] .accent-card:nth-child(4n+2) > img {
  filter: brightness(0) saturate(100%) invert(37%) sepia(25%) saturate(2935%) hue-rotate(320deg) brightness(0.92) contrast(0.9) !important;
  opacity: 1 !important;
}
html[data-theme="light"] .accent-card:nth-child(4n+3) > img {
  filter: brightness(0) saturate(100%) invert(98%) sepia(20%) saturate(725%) hue-rotate(149deg) brightness(0.72) contrast(0.93) !important;
  opacity: 1 !important;
}
html[data-theme="light"] .accent-card:nth-child(4n+4) > img {
  filter: brightness(0) saturate(100%) invert(30%) sepia(5%) saturate(7422%) hue-rotate(219deg) brightness(1.45) contrast(0.64) !important;
  opacity: 1 !important;
}

/* ── Unified CTA pills ───────────────────────────────────────────────────────
   Three variants site-wide. Layout-only props (margin, align-self, width) may
   stay inline on the element. Visual chrome lives here. */
.btn-gradient,
.btn-solid,
.btn-white,
#nav-cta,
.m-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 28px;
  border-radius: 100px;
  border: 0;
  font-size: var(--t-cta);
  font-weight: var(--w-body);
  letter-spacing: 0.2px;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.25s ease;
  box-sizing: border-box;
  font-family: inherit;
}

/* Solid brand CTA */
.btn-gradient {
  color: #fff;
  background: #b83e54 !important;
}
.btn-gradient.btn-glass {
  background: rgba(184, 62, 84, 0.75) !important;
  border-bottom: 1px solid #db788abf !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-gradient:hover { filter: brightness(1.15); }

/* Solid brand CTA */
.btn-solid {
  color: #fff;
  background-color: #b866c6;
}
.btn-solid:hover { filter: brightness(1.3); }

/* News & Insights dates — same size/format on home, listing, and articles */
.news-date {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-body);
  font-weight: var(--w-body);
  letter-spacing: 0.15px;
  line-height: 1.2;
  text-transform: none;
  color: #54C8E8;
  margin-bottom: 14px;
}
.news-date .brand-arrow { color: inherit; }
.news-date--hero { margin-bottom: 22px; }
html[data-theme="light"] .news-date { color: #0055b8 !important; }

/* Nav Contact Us CTA */
#nav-cta,
.m-nav-cta,
#nav-cta:visited,
.m-nav-cta:visited {
  color: #fff;
  background-color: #0055b8;
}
#nav-cta:hover,
.m-nav-cta:hover { filter: brightness(1.15); }

/* White solid */
.btn-white {
  color: #0a0a0a;
  background: #fff;
}
.btn-white:hover { filter: brightness(0.9); }

#mobile-menu .m-nav-cta {
  margin-top: 12px;
  width: 100%;
  font-weight: 400;
}

/* Vanilla (React-free) mobile menu — open/close via .is-open */
#mobile-menu {
  position: fixed;
  top: 58px;
  left: 0;
  right: 0;
  z-index: 199;
  display: none;
  flex-direction: column;
  padding: 14px 22px 22px;
  background: rgba(14, 14, 16, 0.94);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateY(-130%);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
#mobile-menu.is-open {
  transform: translateY(0);
}

/* Vanilla footer scroll-in */
.footer-head {
  font-size: 2.9rem;
  font-weight: 400;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 44px;
  text-align: right;
}
.footer-sr {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer-sr-desc {
  font-size: var(--t-body);
  font-weight: var(--w-body);
  color: #ffffff;
  line-height: var(--lh-body);
  max-width: 300px;
  margin-bottom: 46px;
  transition-delay: 0.22s;
}
.footer-sr-links {
  margin-bottom: 48px;
  transition-delay: 0.36s;
}
.footer-sr-contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 30px;
  transition-delay: 0.5s;
}
.footer-sr-social {
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition-delay: 0.62s;
}
#footer-section.footer-in .footer-sr {
  opacity: 1;
  transform: translateY(0);
}
#footer-section.footer-in-instant .footer-sr {
  transition: none;
}

/* Footer newsletter — CF7 shortcode matches the static email row */
.footer-newsletter-cf7 .wpcf7,
.footer-newsletter-cf7 .wpcf7-form {
  margin: 0;
}
.footer-newsletter-cf7 .wpcf7-form > p {
  margin: 0;
}
.footer-newsletter-cf7 .footer-email-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.footer-newsletter-cf7 .wpcf7-form-control-wrap {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}
.footer-newsletter-cf7 .footer-nl-input,
.footer-newsletter-cf7 input.wpcf7-form-control.wpcf7-email {
  width: 100%;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: var(--t-body, 1rem) !important;
  line-height: 1.4 !important;
  padding: 0 !important;
  margin: 0 !important;
  appearance: none;
  -webkit-appearance: none;
}
.footer-newsletter-cf7 .footer-nl-input::placeholder,
.footer-newsletter-cf7 input.wpcf7-form-control.wpcf7-email::placeholder {
  color: rgba(255, 255, 255, 0.55);
  opacity: 1;
}
.footer-newsletter-cf7 .wpcf7-submit.btn-gradient {
  flex-shrink: 0;
}
.footer-newsletter-cf7 .wpcf7-spinner {
  position: absolute;
  margin: 0;
}
.footer-newsletter-cf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 8px;
  font-size: 0.85rem;
  color: #ffb4c0;
}
.footer-newsletter-cf7 .wpcf7-response-output {
  margin: 12px 0 0;
  padding: 0;
  border: 0;
  font-size: 0.9rem;
  color: #fff;
  text-align: right;
}
.footer-newsletter-cf7 .wpcf7-form.invalid .wpcf7-response-output,
.footer-newsletter-cf7 .wpcf7-form.failed .wpcf7-response-output,
.footer-newsletter-cf7 .wpcf7-form.aborted .wpcf7-response-output {
  color: #ffb4c0;
}
.footer-newsletter-cf7 .wpcf7-form.sent .wpcf7-response-output {
  color: #b8f5c8;
}

@media (max-width: 768px) {
  .footer-newsletter-cf7 .footer-email-box,
  #footer-right-inner .footer-email-box {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .footer-newsletter-cf7 .wpcf7-submit.btn-gradient,
  #footer-right-inner .footer-email-box .btn-gradient {
    align-self: flex-start;
  }
  .footer-newsletter-cf7 .wpcf7-response-output {
    text-align: left;
  }
}

#nav-burger {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  color: #fff;
}
#nav-burger .nav-burger-icon { display: block; }
#nav-burger .nav-burger-close { display: none; }
#nav-burger.is-open .nav-burger-open { display: none; }
#nav-burger.is-open .nav-burger-close { display: block; }

/* Mega menu */
.nav-dd { position: relative; display: flex; align-items: center; }
.nav-dd > a .nav-dd-arrow { transition: transform 0.25s ease; }
.nav-dd:hover > a .nav-dd-arrow { transform: rotate(180deg); }
.nav-dd::after { content: ''; position: absolute; left: -12px; right: -12px; top: 100%; height: 22px; }

.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: width 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-link:hover::after { width: 22px; }
.nav-dd:hover > .nav-link::after { width: 22px; }
.nav-active::after {
  width: 22px;
  background: #74c6e4;
  animation: navUnderlineIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.nav-link.nav-active::after {
  background: #74c6e4;
}
@keyframes navUnderlineIn { from { width: 0; } to { width: 22px; } }

.nav-dd-menu {
  position: fixed;
  top: 58px;
  left: 0;
  right: 0;
  z-index: 199;
  background: rgba(4, 4, 6, 0.96);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.nav-dd:hover .nav-dd-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-mega-inner { max-width: 1120px; margin: 0 auto; padding: 60px 40px 72px; }
.nav-mega-title {
  font-size: var(--t-nav-mega-title);
  font-weight: var(--w-body);
  color: #fff;
  letter-spacing: 0.3px;
  margin-bottom: 22px;
}
.nav-mega-divider { height: 1px; background: rgba(255, 255, 255, 0.16); margin-bottom: 42px; }
.nav-mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px; }
.nav-mega-num {
  font-size: var(--t-nav-mega-num);
  font-weight: var(--w-body);
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 14px;
}
.nav-mega-h {
  display: block;
  font-size: var(--t-nav-mega);
  font-weight: var(--w-body);
  color: #54C8E8 !important;
  line-height: 1.3;
  margin-bottom: 24px;
  transition: color 0.2s ease;
}
.nav-mega-h:hover { color: rgba(84, 200, 232, 0.75) !important; }
#mobile-menu .m-dd-h:not(.sub-active) { color: #54C8E8 !important; }
.nav-mega-sub {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: var(--t-body);
  font-weight: var(--w-body);
  color: rgba(255, 255, 255, 0.88);
  padding: 9px 0;
  transition: color 0.2s ease;
}
.nav-mega-sub::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.nav-mega-sub:hover,
.nav-mega-sub.sub-active { color: #74c6e4; }

/* Mobile menu items (panel open/close style stays JS-driven on #mobile-menu) */
#mobile-menu > a {
  padding: 11px 0;
  font-size: var(--t-body);
  font-weight: var(--w-body);
  color: rgba(255, 255, 255, 0.92);
}
#mobile-menu > a.m-nav-active,
#mobile-menu summary.m-nav-active,
#mobile-menu .m-dd-h.sub-active,
#mobile-menu .m-dd-sub.sub-active {
  color: #74c6e4;
}
#mobile-menu summary.m-nav-active .m-dd-arrow {
  filter: brightness(0) saturate(100%) invert(81%) sepia(5%) saturate(3065%) hue-rotate(151deg) brightness(0.84) contrast(1.06);
}

/* ── Palette ──────────────────────────────────────────────────────────────── */
html[data-theme="light"] {
  --lt-bg:        #f2f2f5;
  --lt-bg-2:      #ffffff;
  --lt-text:      #101014;
  --lt-text-2:    rgba(16, 16, 20, 0.72);
  --lt-text-3:    rgba(16, 16, 20, 0.55);
  --lt-line:      rgba(16, 16, 20, 0.13);
  --lt-line-2:    rgba(16, 16, 20, 0.22);
  --lt-accent:    #0055b8;
  --lt-glass:     rgba(255, 255, 255, 0.72);
  --lt-plate:     rgba(16, 16, 20, 0.045);
  /* Type colour tokens (override dark defaults from :root) */
  --c-heading: var(--lt-text);
  --c-body: var(--lt-text-2);
  --c-eyebrow: var(--lt-accent);
  --c-cue: var(--lt-text);
  --c-card-body: var(--lt-text-2);
  --c-stat: var(--lt-accent);
  --c-stat-label: var(--lt-text-2);
  --c-toc-label: var(--lt-text);
  --c-toc-link: var(--lt-text);
  --c-bc: var(--lt-text-3);
  --c-bc-current: var(--lt-text);
}

/* ═══ THE TOGGLE BUTTON ══════════════════════════════════════════════════════
   Ungated — this is the button's own look in BOTH themes. It reuses the nav's
   glass-button language (100px pill, blurred translucent fill, soft white glow)
   rather than introducing a new control style.

   It lives in `#nav-right` (toggle + Contact Us + burger), immediately left of the
   CTA on desktop and immediately left of the burger on mobile/tablet. That wrapper
   exists so the navbar keeps exactly THREE flex children under
   `justify-content: space-between` — adding the toggle as a fourth top-level child
   would spread the items apart instead of pinning it beside the CTA. Spacing comes
   from the wrapper's `gap`, hence no margin here.                              */
.theme-toggle {
  width: 34px; height: 34px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.07);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, filter 0.25s ease;
}
.theme-toggle:hover { filter: brightness(1.35); }
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle .tt-sun  { display: none; }
.theme-toggle .tt-moon { display: block; }

html[data-theme="light"] .theme-toggle {
  border-color: var(--lt-line-2);
  background: rgba(16, 16, 20, 0.05);
  box-shadow: 0 0 10px rgba(16, 16, 20, 0.06);
}
html[data-theme="light"] .theme-toggle:hover { background: rgba(16, 16, 20, 0.1); filter: none; }
html[data-theme="light"] .theme-toggle .tt-sun  { display: block; }
html[data-theme="light"] .theme-toggle .tt-moon { display: none; }

/* The icon strokes follow the theme. `currentColor` in the SVG picks this up. */
.theme-toggle { color: #fff; }
html[data-theme="light"] .theme-toggle { color: var(--lt-text); }

/* ═══ NAV SEARCH (desktop) ═══════════════════════════════════════════════════
   Same glass control language as `.theme-toggle`, placed immediately before it.
   Hidden on phone/tablet where the burger menu is used. */
.nav-search {
  position: relative;
  flex-shrink: 0;
}
.nav-search-btn {
  width: 34px; height: 34px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.07);
  cursor: pointer;
  color: #fff;
  transition: background 0.25s ease, border-color 0.25s ease, filter 0.25s ease;
}
.nav-search-btn:hover { filter: brightness(1.35); }
.nav-search-btn svg { width: 16px; height: 16px; display: block; }
.nav-search.is-open .nav-search-btn {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
}
html[data-theme="light"] .nav-search-btn {
  border-color: var(--lt-line-2);
  background: rgba(16, 16, 20, 0.05);
  box-shadow: 0 0 10px rgba(16, 16, 20, 0.06);
  color: var(--lt-text);
}
html[data-theme="light"] .nav-search-btn:hover { background: rgba(16, 16, 20, 0.1); filter: none; }
html[data-theme="light"] .nav-search.is-open .nav-search-btn {
  background: rgba(16, 16, 20, 0.1);
  border-color: rgba(16, 16, 20, 0.35);
}

.nav-search-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(360px, calc(100vw - 48px));
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(4, 4, 6, 0.96);
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
  z-index: 220;
}
.nav-search-panel[hidden] { display: none !important; }
.nav-search-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.nav-search-input {
  width: 100%;
  box-sizing: border-box;
  height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: var(--t-search);
  font-weight: var(--w-body);
  outline: none;
}
.nav-search-input::placeholder { color: rgba(255, 255, 255, 0.45); }
.nav-search-input:focus {
  border-color: rgba(84, 200, 232, 0.55);
  background: rgba(255, 255, 255, 0.09);
}
.nav-search-results {
  margin-top: 10px;
  max-height: 320px;
  overflow-y: auto;
}
.nav-search-results[hidden] { display: none !important; }
.nav-search-item {
  display: block;
  padding: 11px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #fff;
  transition: background 0.2s ease;
}
.nav-search-item:hover,
.nav-search-item.is-active {
  background: rgba(255, 255, 255, 0.08);
}
.nav-search-item-title {
  display: block;
  font-size: var(--t-search);
  font-weight: var(--w-body);
  line-height: 1.35;
}
.nav-search-item-meta {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.nav-search-empty {
  padding: 14px 12px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
}

html[data-theme="light"] .nav-search-panel {
  background: rgba(255, 255, 255, 0.96);
  border-color: var(--lt-line-2);
  box-shadow: 0 24px 48px rgba(16, 16, 20, 0.12);
}
html[data-theme="light"] .nav-search-input {
  background: var(--lt-bg-2);
  border-color: var(--lt-line-2);
  color: var(--lt-text);
}
html[data-theme="light"] .nav-search-input::placeholder { color: var(--lt-text-3); }
html[data-theme="light"] .nav-search-input:focus {
  border-color: #0055b8;
  background: #fff;
}
html[data-theme="light"] .nav-search-item { color: var(--lt-text); }
html[data-theme="light"] .nav-search-item:hover,
html[data-theme="light"] .nav-search-item.is-active {
  background: rgba(16, 16, 20, 0.05);
}
html[data-theme="light"] .nav-search-item-meta,
html[data-theme="light"] .nav-search-empty {
  color: var(--lt-text-3);
}

@media (max-width: 768px) {
  .nav-search { display: none !important; }
}

/* ── The dropdown's theme row (legacy; hidden while toggle lives in the navbar) ──
   Kept for markup compatibility. Same control — it carries `.theme-toggle` so the
   icon-swap rules above still apply, and theme.js binds on the class — but restyled
   from a 34px icon pill into a full-width menu row matching the nav links beside it.
   It has no `id`: #theme-toggle belongs to the navbar button and IDs must stay unique.

   Ungated base styling, exactly like `.theme-toggle`'s own above: this is the row's
   appearance in BOTH themes, not a dark-mode change. These tie the light rules above
   on specificity (0,2,1), so they must stay AFTER them to win on order.          */
.m-theme-toggle {
  width: auto; height: auto; margin: 4px 0 0; padding: 11px 0;
  justify-content: flex-start; gap: 10px;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
}
.m-theme-toggle:hover { filter: none; background: none; }
.m-theme-toggle svg { width: 18px; height: 18px; }
/* The label names the theme you'd switch TO, so it pairs with the icon. */
.tt-txt { display: none; }
.m-theme-toggle .tt-txt-dark { display: inline; }
html[data-theme="light"] .m-theme-toggle {
  border: 0; background: none; box-shadow: none; color: var(--lt-text);
}
html[data-theme="light"] .m-theme-toggle:hover { background: none; filter: none; }
html[data-theme="light"] .m-theme-toggle .tt-txt-dark { display: none; }
html[data-theme="light"] .m-theme-toggle .tt-txt-light { display: inline; }

/* Nothing below this line applies unless light mode is on. */

/* ═══ PAGE CANVAS ════════════════════════════════════════════════════════════ */
html[data-theme="light"] body {
  background-color: var(--lt-bg) !important;
  background-image: radial-gradient(1400px 900px at 50% 20%,
    #ffffff 0%, #ededf1 44%, rgba(242, 242, 245, 0) 80%) !important;
  color: var(--lt-text) !important;
}

/* Opaque near-black section plates become the light canvas. These are page-level
   surfaces (not cards), so they flip rather than staying dark. */
html[data-theme="light"] [style*="background: rgb(10, 10, 10)"],
html[data-theme="light"] [style*="background-color: rgb(10, 10, 10)"],
html[data-theme="light"] [style*="background: rgb(17, 17, 17)"],
html[data-theme="light"] [style*="background-color: rgb(17, 17, 17)"],
html[data-theme="light"] [style*="background: rgb(26, 26, 26)"],
html[data-theme="light"] [style*="background-color: rgb(26, 26, 26)"],
html[data-theme="light"] [style*="background: rgb(5, 6, 15)"],
html[data-theme="light"] [style*="background: rgb(0, 0, 0)"],
/* Vanilla pages keep authored hex (no React rgb() re-serialise).
   Bound with `;` / end-of-attr so translucent `#00000033` glass panels are skipped. */
html[data-theme="light"] [style*="background:#0a0a0a"],
html[data-theme="light"] [style*="background: #0a0a0a"],
html[data-theme="light"] [style*="background:#0A0A0A"],
html[data-theme="light"] [style*="background: #0A0A0A"],
html[data-theme="light"] [style*="background-color:#0a0a0a"],
html[data-theme="light"] [style*="background-color: #0a0a0a"],
html[data-theme="light"] [style*="background:#111;"],
html[data-theme="light"] [style*="background: #111;"],
html[data-theme="light"] [style*="background:#111111"],
html[data-theme="light"] [style*="background: #111111"],
html[data-theme="light"] [style*="background:#1a1a1a"],
html[data-theme="light"] [style*="background: #1a1a1a"],
html[data-theme="light"] [style*="background:#000;"],
html[data-theme="light"] [style*="background: #000;"],
html[data-theme="light"] [style$="background:#000"],
html[data-theme="light"] [style$="background: #000"],
html[data-theme="light"] [style*="background:#000000;"],
html[data-theme="light"] [style*="background: #000000;"],
html[data-theme="light"] [style$="background:#000000"],
html[data-theme="light"] [style$="background: #000000"] {
  background-color: var(--lt-bg) !important;
  background-image: none !important;
}

/* ═══ TEXT ═══════════════════════════════════════════════════════════════════
   Anchored so these can never match background-color / border-color.          */
html[data-theme="light"] [style^="color: rgb(255, 255, 255)"],
html[data-theme="light"] [style*="; color: rgb(255, 255, 255)"] {
  color: var(--lt-text) !important;
}
html[data-theme="light"] [style^="color: rgba(255, 255, 255"],
html[data-theme="light"] [style*="; color: rgba(255, 255, 255"] {
  color: var(--lt-text-2) !important;
}
/* The faintest white tiers (≤0.6) are captions / meta — keep them a tier lighter. */
html[data-theme="light"] [style^="color: rgba(255, 255, 255, 0.4"],
html[data-theme="light"] [style*="; color: rgba(255, 255, 255, 0.4"],
html[data-theme="light"] [style^="color: rgba(255, 255, 255, 0.45"],
html[data-theme="light"] [style*="; color: rgba(255, 255, 255, 0.45"],
html[data-theme="light"] [style^="color: rgba(255, 255, 255, 0.5"],
html[data-theme="light"] [style*="; color: rgba(255, 255, 255, 0.5"],
html[data-theme="light"] [style^="color: rgba(255, 255, 255, 0.55"],
html[data-theme="light"] [style*="; color: rgba(255, 255, 255, 0.55"],
html[data-theme="light"] [style^="color: rgba(255, 255, 255, 0.6"],
html[data-theme="light"] [style*="; color: rgba(255, 255, 255, 0.6"] {
  color: var(--lt-text-3) !important;
}

/* Vanilla pages keep authored hex (no React rgb() re-serialise). Mirror the
   rgb() flips above so light mode still turns white copy to ink. */
html[data-theme="light"] [style^="color:#fff"],
html[data-theme="light"] [style^="color: #fff"],
html[data-theme="light"] [style*="; color:#fff"],
html[data-theme="light"] [style*="; color: #fff"],
html[data-theme="light"] [style^="color:#FFF"],
html[data-theme="light"] [style^="color: #FFF"],
html[data-theme="light"] [style*="; color:#FFF"],
html[data-theme="light"] [style*="; color: #FFF"],
html[data-theme="light"] [style^="color:#ffffff"],
html[data-theme="light"] [style^="color: #ffffff"],
html[data-theme="light"] [style*="; color:#ffffff"],
html[data-theme="light"] [style*="; color: #ffffff"],
html[data-theme="light"] [style^="color:#FFFFFF"],
html[data-theme="light"] [style^="color: #FFFFFF"],
html[data-theme="light"] [style*="; color:#FFFFFF"],
html[data-theme="light"] [style*="; color: #FFFFFF"] {
  color: var(--lt-text) !important;
}
html[data-theme="light"] [style^="color:rgba(255,255,255"],
html[data-theme="light"] [style^="color: rgba(255,255,255"],
html[data-theme="light"] [style*="; color:rgba(255,255,255"],
html[data-theme="light"] [style*="; color: rgba(255,255,255"] {
  color: var(--lt-text-2) !important;
}
html[data-theme="light"] [style^="color:rgba(255,255,255,0.4"],
html[data-theme="light"] [style*="; color:rgba(255,255,255,0.4"],
html[data-theme="light"] [style^="color:rgba(255,255,255,0.45"],
html[data-theme="light"] [style*="; color:rgba(255,255,255,0.45"],
html[data-theme="light"] [style^="color:rgba(255,255,255,0.5"],
html[data-theme="light"] [style*="; color:rgba(255,255,255,0.5"],
html[data-theme="light"] [style^="color:rgba(255,255,255,0.55"],
html[data-theme="light"] [style*="; color:rgba(255,255,255,0.55"],
html[data-theme="light"] [style^="color:rgba(255,255,255,0.6"],
html[data-theme="light"] [style*="; color:rgba(255,255,255,0.6"] {
  color: var(--lt-text-3) !important;
}


/* The brand cyan is unreadable on white — darken it, keeping the hue. */
html[data-theme="light"] [style*="color: rgb(84, 200, 232)"],
html[data-theme="light"] [style*="color: rgb(138, 217, 240)"] {
  color: var(--lt-accent) !important;
}
html[data-theme="light"] [style*="color: rgb(108, 159, 251)"] { color: #3053c8 !important; }
html[data-theme="light"] [style*="color:#54C8E8"],
html[data-theme="light"] [style*="color: #54C8E8"],
html[data-theme="light"] [style*="color:#54c8e8"],
html[data-theme="light"] [style*="color: #54c8e8"],
html[data-theme="light"] [style*="color:#8ad9f0"],
html[data-theme="light"] [style*="color: #8ad9f0"] {
  color: var(--lt-accent) !important;
}

/* ═══ SURFACES THAT STAY DARK ════════════════════════════════════════════════
   Stamped by theme.js. One compound deeper than the blanket rules above, so the
   white text inside them survives.                                            */
/* Text with NO inline colour of its own inherits from `body`, which is now dark ink —
   so a heading over a photo hero goes near-invisible. The scrub reveal engine's
   headings are exactly this case: `data-word-reveal` splits them into `.wr-char`
   spans carrying only font properties, deliberately inheriting their section's
   colour. Re-asserting white on the dark surface itself fixes every such element in
   one rule; descendants that DO carry an inline colour are unaffected (an inline
   style always beats an inherited value) and are handled by the rules below. */
html[data-theme="light"] [data-surface="dark"] { color: #fff !important; }

html[data-theme="light"] [data-surface="dark"][style^="color: rgb(255, 255, 255)"],
html[data-theme="light"] [data-surface="dark"][style*="; color: rgb(255, 255, 255)"],
html[data-theme="light"] [data-surface="dark"] [style^="color: rgb(255, 255, 255)"],
html[data-theme="light"] [data-surface="dark"] [style*="; color: rgb(255, 255, 255)"],
html[data-theme="light"] [data-surface="dark"][style^="color:#fff"],
html[data-theme="light"] [data-surface="dark"][style^="color: #fff"],
html[data-theme="light"] [data-surface="dark"][style*="; color:#fff"],
html[data-theme="light"] [data-surface="dark"][style*="; color: #fff"],
html[data-theme="light"] [data-surface="dark"][style^="color:#FFF"],
html[data-theme="light"] [data-surface="dark"][style*="; color:#FFF"],
html[data-theme="light"] [data-surface="dark"][style^="color:#ffffff"],
html[data-theme="light"] [data-surface="dark"][style*="; color:#ffffff"],
html[data-theme="light"] [data-surface="dark"][style^="color:#FFFFFF"],
html[data-theme="light"] [data-surface="dark"][style*="; color:#FFFFFF"],
html[data-theme="light"] [data-surface="dark"] [style^="color:#fff"],
html[data-theme="light"] [data-surface="dark"] [style^="color: #fff"],
html[data-theme="light"] [data-surface="dark"] [style*="; color:#fff"],
html[data-theme="light"] [data-surface="dark"] [style*="; color: #fff"],
html[data-theme="light"] [data-surface="dark"] [style^="color:#FFF"],
html[data-theme="light"] [data-surface="dark"] [style*="; color:#FFF"],
html[data-theme="light"] [data-surface="dark"] [style^="color:#ffffff"],
html[data-theme="light"] [data-surface="dark"] [style*="; color:#ffffff"],
html[data-theme="light"] [data-surface="dark"] [style^="color:#FFFFFF"],
html[data-theme="light"] [data-surface="dark"] [style*="; color:#FFFFFF"] {
  color: #fff !important;
}
html[data-theme="light"] [data-surface="dark"][style^="color: rgba(255, 255, 255"],
html[data-theme="light"] [data-surface="dark"][style*="; color: rgba(255, 255, 255"],
html[data-theme="light"] [data-surface="dark"] [style^="color: rgba(255, 255, 255"],
html[data-theme="light"] [data-surface="dark"] [style*="; color: rgba(255, 255, 255"],
html[data-theme="light"] [data-surface="dark"][style^="color:rgba(255,255,255"],
html[data-theme="light"] [data-surface="dark"][style*="; color:rgba(255,255,255"],
html[data-theme="light"] [data-surface="dark"] [style^="color:rgba(255,255,255"],
html[data-theme="light"] [data-surface="dark"] [style*="; color:rgba(255,255,255"] {
  color: rgba(255, 255, 255, 0.88) !important;
}
html[data-theme="light"] [data-surface="dark"] [style*="color: rgb(84, 200, 232)"],
html[data-theme="light"] [data-surface="dark"][style*="color: rgb(84, 200, 232)"],
html[data-theme="light"] [data-surface="dark"] [style*="color:#54C8E8"],
html[data-theme="light"] [data-surface="dark"] [style*="color: #54C8E8"],
html[data-theme="light"] [data-surface="dark"] [style*="color:#54c8e8"],
html[data-theme="light"] [data-surface="dark"][style*="color:#54C8E8"],
html[data-theme="light"] [data-surface="dark"][style*="color:#54c8e8"] {
  color: #54c8e8 !important;
}
/* …and their hairlines, glass fills and icons stay as authored. */
html[data-theme="light"] [data-surface="dark"][style*="solid rgba(255, 255, 255"],
html[data-theme="light"] [data-surface="dark"] [style*="solid rgba(255, 255, 255"] {
  border-color: rgba(255, 255, 255, 0.3) !important;
}
html[data-theme="light"] [data-surface="dark"] [style*="background: rgba(255, 255, 255"],
html[data-theme="light"] [data-surface="dark"] [style*="background-color: rgba(255, 255, 255"] {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
/* Hero / dark-surface CTAs keep the same brand fill in light mode. */
html[data-theme="light"] [data-surface="dark"] .btn-gradient,
html[data-theme="light"] [data-surface="dark"] [style*="linear-gradient(145deg, rgba(255, 255, 255, 0.4"] {
  background: #b83e54 !important;
  border: 0 !important;
  color: #fff !important;
}
html[data-theme="light"] [data-surface="dark"] .btn-gradient.btn-glass {
  background: rgba(184, 62, 84, 0.75) !important;
  border-bottom: 1px solid #db788abf !important;
}

/* ═══ GLASS FILLS & HAIRLINES ════════════════════════════════════════════════
   White-on-dark glass reads as nothing on a light canvas — invert it to a soft
   dark tint so the panel is still legible as a distinct surface.               */
html[data-theme="light"] [style^="background: rgba(255, 255, 255"],
html[data-theme="light"] [style*="; background: rgba(255, 255, 255"],
html[data-theme="light"] [style^="background-color: rgba(255, 255, 255"],
html[data-theme="light"] [style*="; background-color: rgba(255, 255, 255"] {
  background-color: var(--lt-plate) !important;
}
html[data-theme="light"] [style*="solid rgba(255, 255, 255"] {
  border-color: var(--lt-line-2) !important;
}
html[data-theme="light"] [style*="border-color: rgba(255, 255, 255"] {
  border-color: var(--lt-line-2) !important;
}
/* Divider rules are drawn as 1px-tall filled divs, not borders. */
html[data-theme="light"] [style*="background: rgba(255, 255, 255, 0.1"][style*="height: 1px"],
html[data-theme="light"] [style*="background: rgba(255, 255, 255, 0.2"][style*="height: 1px"] {
  background-color: var(--lt-line) !important;
}

/* ═══ NAVBAR ═════════════════════════════════════════════════════════════════
   Target `nav.site-nav` (shared header). Nearly opaque, unlike the dark theme's
   0.16 glass: the nav floats over photo heroes that stay dark in light mode, and
   dark nav text over one is unreadable. */
html[data-theme="light"] nav.site-nav {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid var(--lt-line) !important;
}

/* H1 typography lives in site.css (white on dark). On the light canvas, ink flips
   unless the heading sits on a stamped dark surface (photo heroes, etc.). */
html[data-theme="light"] h1 { color: var(--lt-text) !important; }
html[data-theme="light"] [data-surface="dark"] h1 { color: #fff !important; }
html[data-theme="light"] h2 { color: var(--lt-text) !important; }
html[data-theme="light"] [data-surface="dark"] h2 { color: #fff !important; }
html[data-theme="light"] h3 { color: var(--lt-text) !important; }
html[data-theme="light"] [data-surface="dark"] h3 { color: #fff !important; }
html[data-theme="light"] .nav-link { color: var(--lt-text-2) !important; }
html[data-theme="light"] .nav-link:hover { color: var(--lt-text) !important; }
html[data-theme="light"] .nav-active { color: #b83e54 !important; }
html[data-theme="light"] .nav-link::after { background: var(--lt-text) !important; }
html[data-theme="light"] .nav-link.nav-active::after { background: #b83e54 !important; }

/* Dark-mode wordmark is white; light mode swaps to logo-w.png (see .nav-logo-light).
   Do not invert the light asset — it is already authored for the light nav. */
html[data-theme="light"] #mobile-menu img[src*="logo"]:not(.nav-logo) {
  filter: invert(1) brightness(0.12);
}

/* Mega menu + mobile menu are dark panels by design; keep them dark so the nav
   reads as one component, but soften the drop shadow for the light canvas. */
html[data-theme="light"] .nav-dd-menu {
  background: rgba(255, 255, 255, 0.97) !important;
  border-bottom: 1px solid var(--lt-line) !important;
  box-shadow: 0 24px 48px rgba(16, 16, 20, 0.14) !important;
}
html[data-theme="light"] .nav-mega-title { color: var(--lt-text) !important; }
html[data-theme="light"] .nav-mega-h { color: #0055b8 !important; }
html[data-theme="light"] .nav-mega-h:hover { color: rgba(0, 85, 184, 0.75) !important; }
html[data-theme="light"] #mobile-menu .m-dd-h:not(.sub-active) { color: #0055b8 !important; }
html[data-theme="light"] .nav-mega-num { color: var(--lt-text-3) !important; }
html[data-theme="light"] .nav-mega-divider { background: var(--lt-line) !important; }
html[data-theme="light"] .nav-mega-sub { color: var(--lt-text-2) !important; }
html[data-theme="light"] .nav-mega-sub:hover { color: var(--lt-text) !important; }
html[data-theme="light"] .nav-mega-sub.sub-active { color: #b83e54 !important; }
/* The dropdown caret is white artwork (invert it); the burger is a stroked SVG,
   so it just takes a new stroke colour. */
html[data-theme="light"] .nav-dd-arrow { filter: invert(1) brightness(0.15); }
html[data-theme="light"] .nav-link.nav-active .nav-dd-arrow {
  filter: brightness(0) saturate(100%) invert(19%) sepia(96%) saturate(5884%) hue-rotate(301deg) brightness(0.85) contrast(0.9) !important;
}
html[data-theme="light"] #nav-burger { color: var(--lt-text) !important; }
html[data-theme="light"] #nav-burger svg { stroke: currentColor !important; }

html[data-theme="light"] #mobile-menu {
  background: rgba(255, 255, 255, 0.97) !important;
  border-bottom: 1px solid var(--lt-line) !important;
}
html[data-theme="light"] #mobile-menu a,
html[data-theme="light"] #mobile-menu summary { color: var(--lt-text) !important; }
html[data-theme="light"] #mobile-menu > a.m-nav-active,
html[data-theme="light"] #mobile-menu summary.m-nav-active,
html[data-theme="light"] #mobile-menu .m-dd-h.sub-active,
html[data-theme="light"] #mobile-menu .m-dd-sub.sub-active {
  color: #b83e54 !important;
}
html[data-theme="light"] #mobile-menu summary.m-nav-active .m-dd-arrow {
  filter: brightness(0) saturate(100%) invert(19%) sepia(96%) saturate(5884%) hue-rotate(301deg) brightness(0.85) contrast(0.9) !important;
}
html[data-theme="light"] .m-dd-num { color: var(--lt-text-3) !important; }
html[data-theme="light"] .m-dd-sub { color: var(--lt-text-2) !important; }
html[data-theme="light"] .m-dd-sub.sub-active { color: #b83e54 !important; }
html[data-theme="light"] .m-dd-arrow { filter: invert(1) brightness(0.15); }

/* ═══ BUTTONS ════════════════════════════════════════════════════════════════
   Solid CTAs use the brand purple fill in light mode too. Black glass plates
   (cards, panels) keep their authored dark fill via the rgba attribute match —
   exclude .btn-solid so theme.js's glass stamp can't re-black the CTA. */
html[data-theme="light"] [style*="background-color: rgba(0, 0, 0, 0.7)"]:not(.btn-solid),
html[data-theme="light"] [style*="background: rgba(0, 0, 0, 0.7)"]:not(.btn-solid) {
  color: #fff !important;
  background-color: rgba(0, 0, 0, 0.7) !important;
}
html[data-theme="light"] .btn-solid {
  color: #fff !important;
  background: #b866c6 !important;
  background-color: #b866c6 !important;
}
html[data-theme="light"] #nav-cta,
html[data-theme="light"] .m-nav-cta,
html[data-theme="light"] #mobile-menu .m-nav-cta {
  color: #fff !important;
  background-color: #0055b8 !important;
}

/* Gradient CTAs use the brand solid fill on the light canvas too. */
html[data-theme="light"] .btn-gradient,
html[data-theme="light"] [style*="linear-gradient(145deg, rgba(255, 255, 255, 0.4)"],
html[data-theme="light"] [style*="linear-gradient(145deg, rgba(255, 255, 255, 0.4"] {
  background: #b83e54 !important;
  border: 0 !important;
  color: #fff !important;
}
html[data-theme="light"] .btn-gradient.btn-glass {
  background: rgba(184, 62, 84, 0.75) !important;
  border-bottom: 1px solid #db788abf !important;
}

html[data-theme="light"] .btn-white {
  background: #fff !important;
  color: #0a0a0a !important;
}

/* Portfolio / carousel circular arrow buttons — white glass vanishes on the light
   canvas; give them a solid plate and dark chevrons. */
html[data-theme="light"] .carousel-nav-btn {
  background: var(--lt-bg-2) !important;
  border: 1px solid var(--lt-line-2) !important;
  box-shadow: 0 4px 14px rgba(16, 16, 20, 0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="light"] .carousel-nav-btn svg [stroke="#fff"],
html[data-theme="light"] .carousel-nav-btn svg path {
  stroke: var(--lt-text) !important;
}
html[data-theme="light"] .carousel-nav-btn:hover {
  background: #f2f2f5 !important;
}

/* ═══ FORMS ══════════════════════════════════════════════════════════════════ */
/* `background-COLOR`, never the `background` shorthand. The shorthand also resets
   background-image / -repeat / -position to their initial values, and because this rule
   carries `!important` it beat the authored (non-important) `select.ff` rule that paints
   the dropdown caret — so the caret came back via the `!important` background-image rule
   below but with `repeat` / `0% 0%` instead of `no-repeat` / `right 18px center`, tiling
   the little triangle across the whole select as a black chequered block. Setting only
   the colour leaves the authored image/repeat/position rules to apply normally. */
html[data-theme="light"] .ff {
  background-color: rgba(16, 16, 20, 0.03) !important;
  border-color: var(--lt-line-2) !important;
  color: var(--lt-text) !important;
}
html[data-theme="light"] .ff:focus { border-color: rgba(16, 16, 20, 0.45) !important; }
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: var(--lt-text-3) !important; }
html[data-theme="light"] select.ff { color: var(--lt-text-2) !important; }
html[data-theme="light"] select.ff {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M0.5 0.5h9L5 5.5z' fill='%23101014' fill-opacity='0.7'/%3E%3C/svg%3E") !important;
}
html[data-theme="light"] option { color: var(--lt-text) !important; }

/* ── Fields on a surface that stays dark ──
   The rules above are right for a form on the light canvas, but the application/contact
   forms sit inside the purple brand card (`#form-card`), which stays dark in light mode.
   There the light treatment turns the fields into near-invisible dark-on-purple boxes with
   black text. Restore the authored dark-mode glass: translucent white fill, white hairline,
   white text and caret. One compound deeper than the blanket rules, so it wins on
   specificity regardless of source order. */
html[data-theme="light"] [data-surface="dark"] .ff {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
}
html[data-theme="light"] [data-surface="dark"] .ff:focus { border-color: rgba(255, 255, 255, 0.5) !important; }
html[data-theme="light"] [data-surface="dark"] select.ff { color: rgba(255, 255, 255, 0.7) !important; }
html[data-theme="light"] [data-surface="dark"] select.ff {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M0.5 0.5h9L5 5.5z' fill='%23ffffff' fill-opacity='0.7'/%3E%3C/svg%3E") !important;
}
/* The dropdown's own popup is painted by the OS on a light menu background in light mode,
   so its options need dark ink even though the select sits on a dark card. */
html[data-theme="light"] [data-surface="dark"] option { color: var(--lt-text) !important; }
/* Placeholders on a dark surface (form fields above, and the footer's "Enter your email
   address" on its dark photographic plate) keep the authored translucent white. */
html[data-theme="light"] [data-surface="dark"] input::placeholder,
html[data-theme="light"] [data-surface="dark"] textarea::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ═══ WHITE-INK ICONS ════════════════════════════════════════════════════════
   These SVGs are single-colour white artwork, so on a light surface they vanish.
   Inverted to near-black — but NOT when they sit on a surface that stays dark. */
html[data-theme="light"] img[src*="arrow-brand.svg"],
html[data-theme="light"] img[src*="scroll-arrow.svg"],
html[data-theme="light"] img[src*="social-"],
html[data-theme="light"] img[src*="Frame"],
html[data-theme="light"] img[src*="phone-icon"],
html[data-theme="light"] img[src*="-icon"],
html[data-theme="light"] img[src*="-icons"] {
  filter: invert(1) brightness(0.16);
}
html[data-theme="light"] [data-surface="dark"] img { filter: none !important; }
/* Cyan/blue brand arrows are coloured artwork — theme.js swaps the src between
   arrow-brand-cyan.svg (dark) and arrow-brand-blue.svg (light). No filter. */
html[data-theme="light"] img[src*="arrow-brand-cyan.svg"],
html[data-theme="light"] img[src*="arrow-brand-blue.svg"] {
  filter: none !important;
}
/* Inline (not img-tag) white SVGs — small arrow/chevron glyphs authored directly as
   `<svg><path stroke="#fff">` — used across ~18 pages. `stroke`/`fill` are SVG
   presentation attributes, not part of the `style` string, so the [style*=…] matching
   used for inline CSS colours can't reach them; a plain attribute selector can, and
   (unlike `style`) these are literal authored text with no React re-serialisation to
   worry about. Same "keep it white on a surface that stays dark" carve-out as icons. */
html[data-theme="light"] svg [stroke="#fff"],
html[data-theme="light"] svg[stroke="#fff"] {
  stroke: var(--lt-text) !important;
}
html[data-theme="light"] svg [fill="#fff"],
html[data-theme="light"] svg[fill="#fff"] {
  fill: var(--lt-text) !important;
}
html[data-theme="light"] [data-surface="dark"] svg [stroke="#fff"],
html[data-theme="light"] [data-surface="dark"] svg[stroke="#fff"] {
  stroke: #fff !important;
}
html[data-theme="light"] [data-surface="dark"] svg [fill="#fff"],
html[data-theme="light"] [data-surface="dark"] svg[fill="#fff"] {
  fill: #fff !important;
}

/* ═══ DECORATIVE GLOWS & THE WEBGL ORB ═══════════════════════════════════════
   The violet orb is the site's signature and stays, but at full strength it
   overwhelms a light canvas — it was measured against a near-black backdrop.
   Damping opacity keeps it as a tint rather than a bruise.                     */
html[data-theme="light"] .orb-layer { opacity: 0.3 !important; filter: blur(64px) saturate(0.9) hue-rotate(38deg) !important; }
/* `data-glow` is stamped by theme.js on every decorative violet radial fill —
   structurally, not by colour. An earlier version of this rule enumerated rgba bases
   (`rgba(150`, `rgba(96`, `rgba(140`) and silently missed `.cp-glow`, `.coe-glow` and
   `#ip-hero-glow`, each of which uses a different base and each of which had to be
   found by eye on a different page. */
html[data-theme="light"] [data-glow="1"] { opacity: 0.4 !important; }

/* ═══ FAQ (shared across pillar / program pages) ═════════════════════════════
   Canonical dark look matches the homepage router tile: translucent dark plate,
   subtle diagonal wash, and soft border. Light mode flips to light plates with
   dark ink (same treatment as homepage .subs-card). */
#faq-section {
  background: #0a0a0a;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
#faq-inner {
  max-width: 1920px;
  margin: 0 auto;
  padding: 96px 150px 120px;
  display: grid;
  grid-template-columns: 175px 1fr;
  gap: 80px;
  align-items: start;
}
.faq-list {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(to bottom right, rgba(64,64,64,0) 0%, rgba(64,64,64,0.35) 50%, rgba(64,64,64,0) 100%), rgba(20,20,24,0.65);
  backdrop-filter: blur(36px);
  -webkit-backdrop-filter: blur(36px);
  border-radius: 15px;
  overflow: hidden;
}
.faq-answer {
  font-size: 13px;
  font-weight: 400;
  color: #fff;
  line-height: 1.7;
  margin: 14px 0 0 44px;
}

/* Vanilla FAQ accordion (partials/faq-section.php when $vanillaPage) */
.faq-list .faq-item {
  padding: 26px 34px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  cursor: pointer;
  background: transparent;
  transition: background 0.3s ease;
}
.faq-list .faq-item:last-child { border-bottom: none; }
.faq-list .faq-item.is-open {
  background: rgba(255, 255, 255, 0.02);
  cursor: default;
}
.faq-list .faq-item-head {
  display: flex;
  align-items: center;
  gap: 20px;
}
.faq-list .faq-num {
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  flex-shrink: 0;
  width: 24px;
}
.faq-list .faq-q {
  flex: 1;
  font-size: 22px;
  font-weight: 200;
  color: #fff;
  line-height: 1.3;
  margin: 0;
}
.faq-list .faq-chev {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transform: rotate(0deg);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-list .faq-item.is-open .faq-chev { transform: rotate(180deg); }
.faq-list .faq-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
.faq-list .faq-item.is-open .faq-body {
  max-height: 420px;
  opacity: 1;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease 0.1s;
}
@media (max-width: 768px) {
  .faq-list .faq-item { padding: 22px 20px; }
  .faq-list .faq-q { font-size: 17px; }
}

/* Vanilla multi-open accordion (#pt-acc) */
#pt-acc[data-accordion="multi"] > [data-acc-item] {
  padding: 24px 0;
  border-bottom: 1px solid #6F6F6F;
  cursor: pointer;
}
#pt-acc[data-accordion="multi"] .acc-head {
  display: flex;
  align-items: center;
  gap: 22px;
}
#pt-acc[data-accordion="multi"] .acc-num {
  font-size: 11px;
  font-weight: 400;
  color: #fff;
  flex-shrink: 0;
  width: 20px;
}
#pt-acc[data-accordion="multi"] .acc-title {
  flex: 1;
  font-size: 28px;
  font-weight: 200;
  color: #fff;
  line-height: 1.3;
  margin: 0;
}
#pt-acc[data-accordion="multi"] .acc-chev {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#pt-acc[data-accordion="multi"] [data-acc-item].is-open .acc-chev { transform: rotate(180deg); }
#pt-acc[data-accordion="multi"] .acc-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
#pt-acc[data-accordion="multi"] [data-acc-item].is-open .acc-body {
  max-height: 160px;
  opacity: 1;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease 0.1s;
}
#pt-acc[data-accordion="multi"] .acc-body p {
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  line-height: 1.7;
  max-width: 500px;
  margin: 12px 44px 0 42px;
}
@media (max-width: 768px) {
  #pt-acc[data-accordion="multi"] > [data-acc-item] { padding: 22px 0; }
  #pt-acc[data-accordion="multi"] .acc-title { font-size: 20px; }
}

html[data-theme="light"] #faq-section {
  background: var(--lt-bg) !important;
  border-top-color: var(--lt-line) !important;
}
html[data-theme="light"] #faq-section .faq-list {
  background: var(--lt-bg-2) !important;
  background-image: none !important;
  border: 0 !important;
}
html[data-theme="light"] #faq-section .faq-list h3,
html[data-theme="light"] #faq-section .faq-list [style^="color: rgb(255, 255, 255)"],
html[data-theme="light"] #faq-section .faq-list [style*="; color: rgb(255, 255, 255)"] {
  color: var(--lt-text) !important;
}
html[data-theme="light"] #faq-section .faq-list .faq-answer,
html[data-theme="light"] #faq-section .faq-list p {
  color: var(--lt-text-2) !important;
}
html[data-theme="light"] #faq-section .faq-list [style*="border-bottom"] {
  border-bottom-color: var(--lt-line) !important;
}
html[data-theme="light"] #faq-section .faq-list [style*="background: rgba(255, 255, 255, 0.02)"] {
  background: rgba(16, 16, 20, 0.04) !important;
}
html[data-theme="light"] #faq-section .faq-list img[src*="scroll-arrow"] {
  filter: invert(1) brightness(0.15);
}
html[data-theme="light"] #faq-section .faq-item {
  border-bottom-color: var(--lt-line) !important;
}
html[data-theme="light"] #faq-section .faq-item.is-open {
  background: rgba(16, 16, 20, 0.03) !important;
}
html[data-theme="light"] #faq-section .faq-num,
html[data-theme="light"] #faq-section .faq-q {
  color: var(--lt-text) !important;
}
html[data-theme="light"] #faq-section .faq-answer {
  color: var(--lt-text-2) !important;
}

/* Vanilla #pt-acc multi accordion light mode */
html[data-theme="light"] #pt-acc[data-accordion="multi"] {
  border-top-color: var(--lt-line) !important;
}
html[data-theme="light"] #pt-acc[data-accordion="multi"] > [data-acc-item] {
  border-bottom-color: var(--lt-line) !important;
}
html[data-theme="light"] #pt-acc[data-accordion="multi"] .acc-num,
html[data-theme="light"] #pt-acc[data-accordion="multi"] .acc-title,
html[data-theme="light"] #pt-acc[data-accordion="multi"] .acc-body p {
  color: var(--lt-text) !important;
}
html[data-theme="light"] #pt-acc[data-accordion="multi"] .acc-body p {
  color: var(--lt-text-2) !important;
}

/* ═══ FOOTER ═════════════════════════════════════════════════════════════════
   Light mode swaps the dark photographic plate + frost for dedicated light
   artwork (`f-li.jpg` / `f-li-frost.jpg`). theme.js lists #footer-section in
   NEVER_DARK so copy flips to ink over the light plates. */
html[data-theme="light"] #footer-section {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.32)),
    url('uploads/f-li.jpg') !important;
}
html[data-theme="light"] #footer-frost {
  background:
    linear-gradient(rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.32)),
    url('uploads/f-li-frost.jpg') left center / cover no-repeat !important;
  border-right-color: var(--lt-line) !important;
  opacity: 0.78 !important;
}
html[data-theme="light"] #footer-grid {
  border-top: 1px solid var(--lt-line) !important;
}
html[data-theme="light"] #footer-section h2 {
  color: var(--lt-text) !important;
}
html[data-theme="light"] #footer-section .footer-head {
  color: var(--lt-text) !important;
}
html[data-theme="light"] #footer-section .footer-sr-desc {
  color: var(--lt-text-2) !important;
}
/* Vanilla footer keeps authored hex/rgba whites (no React rgb() re-serialise).
   Flip body copy, labels, links, and the subscribe blurb to ink over light plates. */
html[data-theme="light"] #footer-section .footer-sr-contact,
html[data-theme="light"] #footer-section .footer-sr-social,
html[data-theme="light"] #footer-section .footer-sr-contact div,
html[data-theme="light"] #footer-section .footer-sr-contact span,
html[data-theme="light"] #footer-section .footer-sr-contact a,
html[data-theme="light"] #footer-section .footer-sr-social span,
html[data-theme="light"] #footer-section .footer-sr-social a,
html[data-theme="light"] #footer-section #footer-right-inner > div > p {
  color: var(--lt-text) !important;
}
html[data-theme="light"] #footer-section .footer-sr-contact [style*="color:#fff"],
html[data-theme="light"] #footer-section .footer-sr-contact [style*="color: #fff"],
html[data-theme="light"] #footer-section .footer-sr-contact [style*="color:#FFF"],
html[data-theme="light"] #footer-section .footer-sr-contact [style*="color:#FFFFFF"],
html[data-theme="light"] #footer-section .footer-sr-contact [style*="color: #FFFFFF"],
html[data-theme="light"] #footer-section .footer-sr-social [style*="color:#fff"],
html[data-theme="light"] #footer-section .footer-sr-social [style*="color: #fff"],
html[data-theme="light"] #footer-section .footer-sr-social [style*="color:#FFF"],
html[data-theme="light"] #footer-section .footer-sr-social [style*="color:#FFFFFF"],
html[data-theme="light"] #footer-section .footer-sr-social [style*="color: #FFFFFF"],
html[data-theme="light"] #footer-section .footer-sr-social [style*="color:rgba(255,255,255"],
html[data-theme="light"] #footer-section .footer-sr-social [style*="color: rgba(255, 255, 255"],
html[data-theme="light"] #footer-section #footer-right-inner [style*="color:rgba(255,255,255"],
html[data-theme="light"] #footer-section #footer-right-inner [style*="color: rgba(255, 255, 255"],
html[data-theme="light"] #footer-section #footer-right-inner [style*="color:#ffffff"],
html[data-theme="light"] #footer-section #footer-right-inner [style*="color: #ffffff"] {
  color: var(--lt-text) !important;
}
html[data-theme="light"] #footer-section .footer-sr-social [style*="color:rgba(255,255,255,0.4)"],
html[data-theme="light"] #footer-section .footer-sr-social [style*="color: rgba(255, 255, 255, 0.4)"] {
  color: var(--lt-text-3) !important;
}
html[data-theme="light"] #footer-section input:not([type="submit"]):not([type="button"]) {
  color: var(--lt-text) !important;
}
html[data-theme="light"] #footer-section input::placeholder {
  color: var(--lt-text-3) !important;
}
html[data-theme="light"] #footer-section .footer-email-box {
  border-bottom-color: var(--lt-line-2) !important;
}
html[data-theme="light"] #footer-section .footer-newsletter-cf7 .footer-nl-input,
html[data-theme="light"] #footer-section .footer-newsletter-cf7 input.wpcf7-form-control.wpcf7-email {
  color: var(--lt-text) !important;
}
html[data-theme="light"] #footer-section .footer-newsletter-cf7 .footer-nl-input::placeholder,
html[data-theme="light"] #footer-section .footer-newsletter-cf7 input.wpcf7-form-control.wpcf7-email::placeholder {
  color: var(--lt-text-3) !important;
}
html[data-theme="light"] #footer-section .footer-newsletter-cf7 .wpcf7-submit.btn-gradient,
html[data-theme="light"] #footer-section .footer-email-box .btn-gradient {
  color: #fff !important;
}
html[data-theme="light"] #footer-section .footer-newsletter-cf7 .wpcf7-response-output {
  color: var(--lt-text) !important;
}
html[data-theme="light"] #footer-section .footer-newsletter-cf7 .wpcf7-not-valid-tip,
html[data-theme="light"] #footer-section .footer-newsletter-cf7 .wpcf7-form.invalid .wpcf7-response-output,
html[data-theme="light"] #footer-section .footer-newsletter-cf7 .wpcf7-form.failed .wpcf7-response-output {
  color: #b83e54 !important;
}
html[data-theme="light"] #footer-section .footer-newsletter-cf7 .wpcf7-form.sent .wpcf7-response-output {
  color: #1a7a3c !important;
}
/* Location / hours / copyright glyphs use stroke="rgba(255,255,255,…)" attrs
   that the generic #fff stroke flip doesn't catch. */
html[data-theme="light"] #footer-section svg [stroke*="255"] {
  stroke: var(--lt-text-3) !important;
}

/* ═══ MISC SHARED COMPONENTS ═════════════════════════════════════════════════ */
/* The "Looking for the Right Partnership Model?" banner's left half, shared verbatim by
   research-advisory / intellectual-property / advanced-facilities-leasing /
   prototyping-trl-bridge — hence a shared rule rather than four page-level copies. It is
   excluded from dark-surface classification in theme.js (see NEVER_DARK there); this
   flips its dark base to the light radial canvas. Its inline-white copy flips to ink
   automatically once the section is off data-surface. `#partner-right` is a genuine
   purple brand card and stays dark. */
html[data-theme="light"] #partner-left {
  background: radial-gradient(1400px 900px at 50% 20%, #ffffff 0%, #ededf1 44%, rgba(242, 242, 245, 0) 80%) !important;
}

html[data-theme="light"] .aud-pill { border-color: var(--lt-line-2) !important; }
html[data-theme="light"] .aud-pill span { color: var(--lt-text) !important; }
html[data-theme="light"] .aud-pill img { filter: invert(1) brightness(0.16); }
html[data-theme="light"] .prognav-track { background: var(--lt-line) !important; }
html[data-theme="light"] .prognav-fill { background: #0055b8 !important; }
html[data-theme="light"] .prognav-marker { border-bottom-color: var(--lt-line-2) !important; }

/* Science & Technology Park Key Outcomes cards — light plate + dark ink, matching
   homepage subsidiary carousel cards. */
html[data-theme="light"] #sci-programs .prog-card {
  background: var(--lt-bg-2) !important;
}
html[data-theme="light"] #sci-programs .prog-card h3 {
  color: var(--lt-text) !important;
}
html[data-theme="light"] #sci-programs .prog-card .prog-outcome {
  color: var(--lt-text) !important;
}
html[data-theme="light"] #sci-programs .prog-card [style*="color: rgb(84, 200, 232)"] {
  color: var(--lt-accent) !important;
}

/* `.inv-res-card` — wash plate cards flip to light + ink (COE Finance/IT, Investment
   resource/collab). `.d-card` / `.cp-purplecard` stay dark. */
html[data-theme="light"] .inv-res-card {
  background: var(--lt-bg-2) !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}
html[data-theme="light"] .inv-res-card h3 {
  color: var(--lt-text) !important;
}
html[data-theme="light"] .inv-res-card p,
html[data-theme="light"] .inv-res-card [style*="color: rgb(255, 255, 255)"],
html[data-theme="light"] .inv-res-card [style*="color: rgba(255, 255, 255"] {
  color: var(--lt-text-2) !important;
}
html[data-theme="light"] .inv-res-card > img {
  filter: invert(1) brightness(0.15);
}
html[data-theme="light"] .inv-res-card a,
html[data-theme="light"] .inv-res-card [style*="color: rgb(84, 200, 232)"] {
  color: var(--lt-accent) !important;
}

/* Licensing download cards (IP + Commercialization) — light plate + dark ink. */
html[data-theme="light"] .ip-dl-card {
  background: var(--lt-bg-2) !important;
  background-color: var(--lt-bg-2) !important;
  border-color: var(--lt-line) !important;
  box-shadow: none !important;
}
html[data-theme="light"] .ip-dl-card h3 {
  color: var(--lt-text) !important;
}
html[data-theme="light"] .ip-dl-card span,
html[data-theme="light"] .ip-dl-card p,
html[data-theme="light"] .ip-dl-card [style*="color: rgb(255, 255, 255)"],
html[data-theme="light"] .ip-dl-card [style^="color: rgb(255, 255, 255)"] {
  color: var(--lt-text-2) !important;
}
html[data-theme="light"] .ip-dl-card a,
html[data-theme="light"] .ip-dl-card [style*="color: rgb(84, 200, 232)"] {
  color: var(--lt-accent) !important;
}

/* `.d-card` / `.cp-purplecard` deliberately STAY dark (theme.js lists them in
   ALWAYS_DARK). They are cards, not canvas: on a light page they read as deliberate
   dark plates, exactly like the black CTA pill and the purple brand cards. */
html[data-theme="light"] .d-card,
html[data-theme="light"] .cp-purplecard { box-shadow: 0 10px 30px rgba(16, 16, 20, 0.1); }

/* Thin dark glass (stamped by theme.js) — a ~50%-alpha near-black fill composites
   to a washed mid-grey over the light canvas, so the card loses its edge and its
   white label drops to ~2.9:1. Deepen it into a real dark card. `.d-card` carries
   its fill from a CSS class, so the inline-style parser cannot see it and it is
   listed here explicitly. */
html[data-theme="light"] [data-glass="1"]:not(.btn-solid):not(.blog-card):not(.blog-featured):not(.rel-card),
html[data-theme="light"] .d-card {
  background-color: rgba(23, 23, 27, 0.92) !important;
  box-shadow: 0 10px 30px rgba(16, 16, 20, 0.12);
}

/* Scrollbar + selection, so the chrome matches the canvas. */
html[data-theme="light"] ::selection { background: rgba(11, 126, 163, 0.18); color: var(--lt-text); }
html[data-theme="light"] { color-scheme: light; }