/* =====================================================================
   NEOBRUTALISM SKIN — overrides the base dark theme only.
   Zero markup changes. All rules are !important-guarded where needed
   to win over the ultra-specific existing styles in <style> block.
   To disable: remove the <link> tag in index.html <head>.
   ===================================================================== */

/* --- Fonts (Inter + JetBrains Mono) --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* Palette per brief */
  --nb-primary: #FDC800;    /* punchy yellow */
  --nb-secondary: #432DD7;  /* deep violet */
  --nb-success: #16A34A;
  --nb-warning: #D97706;
  --nb-danger: #DC2626;
  --nb-surface: #FBFBF9;    /* off-white */
  --nb-surface-2: #F0EEE8;  /* subtle card contrast */
  --nb-text: #1C293C;       /* deep navy-black */
  --nb-text-muted: #4A5567;
  --nb-line: #1C293C;       /* solid black borders */

  /* Overriding base tokens so downstream rules just work */
  --bg:  var(--nb-surface) !important;
  --bg2: var(--nb-surface-2) !important;
  --bg3: var(--nb-surface) !important;
  --bg4: var(--nb-surface-2) !important;
  --cream: var(--nb-text) !important;
  --gold: var(--nb-primary) !important;
  --gold2: var(--nb-secondary) !important;
  --muted: var(--nb-text-muted) !important;
  --muted2: var(--nb-text-muted) !important;
  --border: var(--nb-line) !important;
  --border2: var(--nb-line) !important;
  --text: var(--nb-text) !important;
}

/* --- Global reset for the new theme --- */
html, body {
  background: var(--nb-surface) !important;
  color: var(--nb-text) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  cursor: auto !important; /* kill the custom cursor for neobrutalism */
}
body::before { display: none !important; } /* remove noise texture */

/* Hide custom cursor elements */
.cursor, .cursor-ring { display: none !important; }
* { cursor: auto !important; }
a, button, .project-card, .next-project, .footer-link, .nav-btn { cursor: pointer !important; }

/* --- Typography scale (13/15/17/21/27/35) --- */
h1 {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(35px, 6vw, 72px) !important;
  font-weight: 900 !important;
  color: var(--nb-text) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.0 !important;
}
h1 em { font-style: normal !important; color: var(--nb-secondary) !important; }

h2 {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(27px, 4vw, 45px) !important;
  font-weight: 800 !important;
  color: var(--nb-text) !important;
  letter-spacing: -0.02em !important;
}
h2 em { font-style: normal !important; color: var(--nb-secondary) !important; }

h3 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  color: var(--nb-text) !important;
}

p { color: var(--nb-text) !important; font-size: 17px !important; line-height: 1.6 !important; }
p strong { color: var(--nb-text) !important; font-weight: 700 !important; }

/* Monospace bits */
.hero-eyebrow, .marquee-item, .section-label, .s-label,
.exp-year, .metric, .breadcrumb, .breadcrumb-btn, .meta-label,
.tools-title, .footer-h, .footer-bottom,
.nav-logo, .nav-btn, .btn-primary, .btn-secondary, .comp-name,
.stat-label, .impact-desc, .outcome-label, .big-stat-label,
.tool-item, .dl-icon-label, .next-label {
  font-family: 'JetBrains Mono', monospace !important;
}

/* --- Nav --- */
nav {
  background: var(--nb-surface) !important;
  border-bottom: 3px solid var(--nb-text) !important;
  backdrop-filter: none !important;
}
.nav-logo { color: var(--nb-text) !important; font-weight: 700 !important; }
.nav-btn { color: var(--nb-text) !important; font-weight: 600 !important; }
.nav-btn:hover { color: var(--nb-secondary) !important; }
.nav-btn::after { display: none !important; }
/* Higher specificity to beat base's .nav-cta{color:var(--gold)!important} */
nav .nav-cta, nav.nav .nav-cta {
  background: var(--nb-primary) !important;
  color: var(--nb-text) !important;
  border: 2px solid var(--nb-text) !important;
  box-shadow: 4px 4px 0 0 var(--nb-text) !important;
  transition: transform 0.1s, box-shadow 0.1s !important;
  font-weight: 700 !important;
}
nav .nav-cta:hover {
  background: var(--nb-primary) !important;
  color: var(--nb-text) !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 0 var(--nb-text) !important;
}
nav .nav-cta:active { transform: translate(2px, 2px) !important; box-shadow: 0 0 0 0 var(--nb-text) !important; }

/* --- Hero --- */
.hero-bg, .hero-grid { display: none !important; }
.hero-photo-frame {
  border: 3px solid var(--nb-text) !important;
  box-shadow: 8px 8px 0 0 var(--nb-text) !important;
  background: var(--nb-primary) !important;
}
.hero-photo-frame::before { display: none !important; }
.hero-photo-frame img { filter: none !important; }
.hero-photo-label {
  background: var(--nb-text) !important;
  color: var(--nb-primary) !important;
  padding: 6px 10px !important;
  font-weight: 700 !important;
}
.hero-photo-decoration { display: none !important; }
.hero-eyebrow { color: var(--nb-secondary) !important; font-weight: 700 !important; }
.hero-eyebrow::before { background: var(--nb-secondary) !important; height: 3px !important; }
.hero-sub { color: var(--nb-text) !important; }
.stat-row { border-top: 3px solid var(--nb-text) !important; }
.stat-num { color: var(--nb-secondary) !important; font-family: 'Inter', sans-serif !important; font-weight: 900 !important; }
.stat-label { color: var(--nb-text) !important; }

/* Buttons */
.btn-primary {
  background: var(--nb-primary) !important;
  color: var(--nb-text) !important;
  border: 3px solid var(--nb-text) !important;
  box-shadow: 6px 6px 0 0 var(--nb-text) !important;
  font-weight: 700 !important;
  transition: transform 0.1s, box-shadow 0.1s !important;
}
.btn-primary:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 8px 8px 0 0 var(--nb-text) !important;
  background: var(--nb-primary) !important;
}
.btn-primary:active { transform: translate(3px, 3px) !important; box-shadow: 0 0 0 0 var(--nb-text) !important; }

.btn-secondary {
  background: var(--nb-surface) !important;
  color: var(--nb-text) !important;
  border: 3px solid var(--nb-text) !important;
  padding: 12px 24px !important;
  box-shadow: 6px 6px 0 0 var(--nb-secondary) !important;
  font-weight: 700 !important;
  transition: transform 0.1s, box-shadow 0.1s !important;
}
.btn-secondary:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 8px 8px 0 0 var(--nb-secondary) !important;
  color: var(--nb-secondary) !important;
}

/* Section labels */
.section-label, .s-label {
  color: var(--nb-text) !important;
  background: var(--nb-primary) !important;
  display: inline-flex !important;
  padding: 4px 10px !important;
  border: 2px solid var(--nb-text) !important;
  font-weight: 700 !important;
}
.section-label::before, .s-label::before { display: none !important; }
.section-desc { color: var(--nb-text) !important; }

/* Marquee band */
.marquee-section {
  background: var(--nb-secondary) !important;
  border-top: 3px solid var(--nb-text) !important;
  border-bottom: 3px solid var(--nb-text) !important;
}
.marquee-item { color: var(--nb-surface) !important; font-weight: 600 !important; }
.marquee-dot { color: var(--nb-primary) !important; }

/* --- Project cards --- */
.projects-grid { gap: 24px !important; }
.project-card {
  border: 3px solid var(--nb-text) !important;
  background: var(--nb-primary) !important;
  box-shadow: 10px 10px 0 0 var(--nb-text) !important;
  aspect-ratio: 16/10 !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
}
.project-card:first-child { background: var(--nb-secondary) !important; }
.project-card:nth-child(2) { background: var(--nb-primary) !important; }
.project-card:nth-child(3) { background: #FFE55A !important; }
.project-card:nth-child(4) { background: var(--nb-secondary) !important; }
.project-card:nth-child(5) { background: #FF7A6B !important; }
.project-card:hover {
  transform: translate(-4px, -4px) !important;
  box-shadow: 14px 14px 0 0 var(--nb-text) !important;
}
.project-img { filter: none !important; opacity: 0.85 !important; }
.project-card:hover .project-img { filter: none !important; opacity: 1 !important; transform: none !important; }
.project-overlay {
  background: linear-gradient(to top, rgba(28,41,60,0.85) 0%, rgba(28,41,60,0.2) 60%, transparent 100%) !important;
}
.project-number { color: var(--nb-primary) !important; font-family: 'JetBrains Mono', monospace !important; font-weight: 700 !important; }
.project-tag { color: var(--nb-primary) !important; font-weight: 700 !important; }
.project-tag::before { background: var(--nb-primary) !important; height: 3px !important; }
.project-title { color: #fff !important; font-family: 'Inter', sans-serif !important; font-weight: 900 !important; }
.project-desc { color: rgba(255,255,255,0.9) !important; }
.metric { color: var(--nb-primary) !important; font-weight: 700 !important; }
.metric span { color: rgba(255,255,255,0.8) !important; }
.project-arrow {
  border: 2px solid var(--nb-primary) !important;
  color: var(--nb-primary) !important;
  background: transparent !important;
}
.project-card:hover .project-arrow { background: var(--nb-primary) !important; color: var(--nb-text) !important; }

/* --- About + tools --- */
.about-text p { color: var(--nb-text) !important; }
.experience-item { border-bottom: 2px solid var(--nb-text) !important; padding: 20px 0 !important; }
.exp-company { color: var(--nb-text) !important; font-weight: 700 !important; }
.exp-role { color: var(--nb-text-muted) !important; }
.exp-year { color: var(--nb-secondary) !important; font-weight: 700 !important; }
.tools-title { color: var(--nb-text) !important; font-weight: 700 !important; }
.tool-item {
  border: 2px solid var(--nb-text) !important;
  color: var(--nb-text) !important;
  background: var(--nb-surface) !important;
  font-weight: 600 !important;
  box-shadow: 3px 3px 0 0 var(--nb-text) !important;
}
.tool-item:hover {
  background: var(--nb-primary) !important;
  color: var(--nb-text) !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0 0 var(--nb-text) !important;
}

/* --- Contact band --- */
.contact-band {
  background: var(--nb-primary) !important;
  border-top: 3px solid var(--nb-text) !important;
  border-bottom: 3px solid var(--nb-text) !important;
}
.contact-band::before { display: none !important; }
.contact-band h2 { color: var(--nb-text) !important; }
.contact-band p { color: var(--nb-text) !important; }
.contact-email { color: var(--nb-secondary) !important; font-style: normal !important; font-family: 'Inter', sans-serif !important; font-weight: 900 !important; border-bottom: 3px solid var(--nb-text) !important; }

/* --- Footer --- */
footer {
  background: var(--nb-text) !important;
  color: var(--nb-surface) !important;
  border-top: 3px solid var(--nb-text) !important;
}
.footer-logo { color: var(--nb-primary) !important; font-family: 'Inter', sans-serif !important; font-weight: 900 !important; font-style: normal !important; }
.footer-tagline { color: rgba(251,251,249,0.75) !important; }
.footer-h { color: var(--nb-primary) !important; }
.footer-link { color: var(--nb-surface) !important; font-weight: 500 !important; }
.footer-link:hover { color: var(--nb-primary) !important; }
.footer-bottom { color: rgba(251,251,249,0.6) !important; border-top: 2px solid rgba(251,251,249,0.15) !important; }

/* --- Case study hero --- */
.case-hero {
  background: var(--nb-secondary) !important;
  border-bottom: 3px solid var(--nb-text) !important;
}
.hero-bg-img { filter: none !important; opacity: 0.35 !important; }
.hero-vignette { background: linear-gradient(to top, rgba(67,45,215,0.85) 0%, rgba(67,45,215,0.4) 50%, transparent 100%) !important; }
.case-title { color: var(--nb-surface) !important; font-family: 'Inter', sans-serif !important; font-weight: 900 !important; }
.case-title em { color: var(--nb-primary) !important; font-style: normal !important; }
.breadcrumb { color: rgba(251,251,249,0.7) !important; }
.breadcrumb-btn { color: var(--nb-primary) !important; font-weight: 700 !important; }
.hero-meta { border-top: 2px solid rgba(251,251,249,0.3) !important; }
.meta-label { color: var(--nb-primary) !important; font-weight: 700 !important; }
.meta-value { color: var(--nb-surface) !important; font-weight: 600 !important; }

/* --- Impact/challenge/comp/pillar/mechanic cards (case studies) --- */
.impact-grid, .comp-grid, .challenge-grid, .pillars, .mechanics, .feedback-grid, .big-stat-row, .outcome-stats {
  gap: 24px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
}
.impact-card, .comp-card, .challenge-item, .pillar, .mechanic, .feedback-item, .big-stat, .outcome-stat {
  background: var(--nb-surface) !important;
  border: 3px solid var(--nb-text) !important;
  box-shadow: 6px 6px 0 0 var(--nb-text) !important;
  border-radius: 0 !important;
}
.impact-card:hover, .comp-card:hover, .challenge-item:hover, .pillar:hover, .mechanic:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 0 var(--nb-text) !important;
  transition: transform 0.1s, box-shadow 0.1s !important;
}
.impact-card::before, .pillar::after { display: none !important; }
.impact-num, .outcome-num, .big-stat-num { color: var(--nb-secondary) !important; font-family: 'Inter', sans-serif !important; font-weight: 900 !important; }
.impact-desc, .outcome-label, .big-stat-label, .impact-label { color: var(--nb-text) !important; }
.comp-name { color: var(--nb-secondary) !important; border-bottom: 2px solid var(--nb-text) !important; font-weight: 700 !important; }
.comp-issue p, .challenge-item p, .pillar p, .mechanic p, .feedback-item p { color: var(--nb-text) !important; }
.challenge-num, .pillar-num { color: var(--nb-secondary) !important; font-weight: 900 !important; font-family: 'Inter', sans-serif !important; }
.comp-bullet { background: var(--nb-text) !important; }

/* Outcome band */
.outcome-band {
  background: var(--nb-primary) !important;
  border-top: 3px solid var(--nb-text) !important;
  border-bottom: 3px solid var(--nb-text) !important;
}
.outcome-band .s-label { background: var(--nb-text) !important; color: var(--nb-primary) !important; border-color: var(--nb-text) !important; }
.outcome-band h2, .outcome-band p { color: var(--nb-text) !important; }

/* Next project */
.next-project { border-top: 3px solid var(--nb-text) !important; background: var(--nb-surface) !important; }
.next-project:hover { background: var(--nb-primary) !important; }
.next-title { color: var(--nb-text) !important; font-family: 'Inter', sans-serif !important; font-weight: 900 !important; }
.next-label { color: var(--nb-text-muted) !important; }
.next-arrow { color: var(--nb-secondary) !important; }

/* Overview body */
.overview-body { color: var(--nb-text) !important; font-size: 21px !important; }
.overview-body a { color: var(--nb-secondary) !important; font-weight: 700 !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; }

/* Alt bg strips inside case studies */
.alt-bg { background: var(--nb-surface-2) !important; border-color: var(--nb-text) !important; }

/* Divider lines */
.divider { border-top: 2px solid var(--nb-text) !important; }

/* Philosophy quote */
.philosophy-quote { color: var(--nb-text) !important; font-family: 'Inter', sans-serif !important; font-style: normal !important; font-weight: 700 !important; }
.philosophy-quote span { color: var(--nb-secondary) !important; }

/* Namma Gunndi phone frames */
.ng-phone {
  background: var(--nb-text) !important;
  border: 3px solid var(--nb-text) !important;
  box-shadow: 6px 6px 0 0 var(--nb-primary) !important;
  border-radius: 12px !important;
}
.ng-phone::before { background: var(--nb-primary) !important; }
.ng-phone-caption { color: var(--nb-text) !important; font-weight: 700 !important; }
.ng-phone-caption span { color: var(--nb-secondary) !important; }
.ng-svg-icon {
  background: var(--nb-primary) !important;
  border: 2px solid var(--nb-text) !important;
  color: var(--nb-text) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 0 var(--nb-text) !important;
}

/* Design/icon rails inside case studies */
.dl-icon-inner {
  background: var(--nb-surface) !important;
  border: 2px solid var(--nb-text) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 0 var(--nb-text) !important;
}
.dl-icon-card:hover .dl-icon-inner {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 0 var(--nb-secondary) !important;
}
.dl-icon-label { color: var(--nb-text) !important; font-weight: 700 !important; }

/* Image wrappers */
.img-wrap { border: 2px solid var(--nb-text) !important; background: var(--nb-surface) !important; }
.two-up img, .design-visual img { border: 2px solid var(--nb-text) !important; }

/* Fix fade-up default color on light bg */
.fade-up { }

/* --- Carousel captions inside case studies (fc-label = fidelity carousel) ---
   These sit half over dark phone images and half over the light neobrutalism bg,
   so we give them a solid off-white plate with a border so they're always readable. */
.fc-label, .fc-outer .fc-label {
  opacity: 1 !important;
  background: var(--nb-surface) !important;
  border: 2px solid var(--nb-text) !important;
  box-shadow: 4px 4px 0 0 var(--nb-text) !important;
  padding: 14px 18px !important;
  border-radius: 0 !important;
}
.fc-label-num { color: var(--nb-secondary) !important; opacity: 1 !important; font-family: 'JetBrains Mono', monospace !important; font-weight: 700 !important; }
.fc-label-title { color: var(--nb-text) !important; font-family: 'Inter', sans-serif !important; font-weight: 800 !important; opacity: 1 !important; }
.fc-label-desc { color: var(--nb-text) !important; opacity: 1 !important; }
/* Prev/next slider buttons on carousels */
.fc-nav, .fcp, .fcn, [id*="fcPrev"], [id*="fcNext"] {
  background: var(--nb-surface) !important;
  border: 2px solid var(--nb-text) !important;
  color: var(--nb-text) !important;
  box-shadow: 3px 3px 0 0 var(--nb-text) !important;
}
.fcd, .fc-dot { background: var(--nb-text) !important; opacity: 0.25 !important; }
.fcd-on, .fc-dot.active { background: var(--nb-primary) !important; opacity: 1 !important; }

/* --- All monoline SVG icons inside case studies — switch stroke from gold to dark navy --- */
.mechanic svg,
.mechanic-icon svg,
.pillar svg,
.impact-card svg,
.challenge-item svg,
.feedback-item svg,
.dl-icon-inner svg {
  stroke: var(--nb-text) !important;
  color: var(--nb-text) !important;
}
.mechanic-icon { color: var(--nb-text) !important; }
.mechanic-icon svg path,
.mechanic-icon svg circle,
.mechanic-icon svg rect,
.mechanic-icon svg line,
.mechanic-icon svg polyline {
  stroke: var(--nb-text) !important;
}
/* Namma Gunndi's own gold-tinted icon squares — keep the yellow bg but darken the stroke */
.ng-svg-icon { color: var(--nb-text) !important; }
.ng-svg-icon svg { stroke: var(--nb-text) !important; }

/* --- UNIFIED ICON TREATMENT ---
   Apply the neobrutalist yellow-square-with-black-border-and-hard-shadow style
   to every icon holder across case studies so all match Namma Gunndi's ng-svg-icon.
   Applies to: Creator Battle / Mission Moj / AIP mechanic cards, feedback items,
   AIP circular impact icons.  PNG illustration icons (.impact-icon) stay untouched. */
.mechanic-icon,
.feedback-icon,
.aip-impact-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  padding: 8px !important;
  background: var(--nb-primary) !important;
  border: 2px solid var(--nb-text) !important;
  box-shadow: 4px 4px 0 0 var(--nb-text) !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--nb-text) !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
  margin-top: 4px !important;
}
.mechanic-icon svg,
.feedback-icon svg,
.aip-impact-icon svg {
  width: 100% !important;
  height: 100% !important;
  stroke: var(--nb-text) !important;
  fill: none !important;
  color: var(--nb-text) !important;
  stroke-width: 1.75 !important;
}
.mechanic-icon svg *,
.feedback-icon svg *,
.aip-impact-icon svg * {
  stroke: var(--nb-text) !important;
}

/* --- Case-study-specific small label / badge / number overrides ---
   Many case studies use "gold" as text color for tiny labels that were
   readable on dark bg but disappear on the light neobrutalism surface.
   Remap them explicitly to dark navy or violet for contrast. */

/* AI Interview Prep */
.aip-outcome-label { color: var(--nb-secondary) !important; font-weight: 700 !important; }
.aip-outcome-row--win .aip-outcome-label { color: var(--nb-secondary) !important; }
/* Accordion caption panels — DO NOT touch background on .aip-acc-panel (it holds
   the phone screenshot as inline background-image). Give the caption text a clean
   off-white plate at the BOTTOM only, so the phone stays visible above it. */
.aip-acc-panel {
  border: 2px solid var(--nb-text) !important;
  box-shadow: 4px 4px 0 0 var(--nb-text) !important;
  border-radius: 0 !important;
}
.aip-acc-content {
  background: var(--nb-surface) !important;
  border-top: 2px solid var(--nb-text) !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 14px 18px !important;
}
.aip-acc-content h3, .aip-acc-content p, .aip-acc-panel h3, .aip-acc-panel p {
  color: var(--nb-text) !important;
  text-shadow: none !important;
}
.aip-acc-content h3, .aip-acc-panel h3 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
}

/* Research participant pull-quote — dark navy, heavier weight, kill any gold override */
.aip-quote, .aip-quote *, .aip-quote p, .aip-quote p em, .aip-quote p strong {
  color: var(--nb-text) !important;
  -webkit-text-fill-color: var(--nb-text) !important;
  opacity: 1 !important;
}
.aip-quote p {
  font-weight: 500 !important;
  font-family: 'Playfair Display', serif !important;
}
.aip-quote {
  background: var(--nb-surface) !important;
  border-left: 6px solid var(--nb-secondary) !important;
  padding: 20px 24px 20px 44px !important;
  position: relative !important;
}
/* Decorative giant quote character — hide entirely; the violet border already carries the "quote" affordance */
.aip-quote-mark { display: none !important; }
.aip-quote p, .aip-quote cite { position: relative !important; z-index: 1 !important; }
.aip-quote cite, .aip-quote .aip-quote-cite {
  color: var(--nb-text) !important;
  opacity: 0.7 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 600 !important;
}
.aip-badge {
  color: var(--nb-text) !important;
  background: var(--nb-primary) !important;
  border: 2px solid var(--nb-text) !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
}
/* WORKED badge — light green to match success semantic (matches BACKFIRED being light red) */
.aip-badge-win {
  color: #14532D !important;
  background: #DCFCE7 !important;
  border: 2px solid var(--nb-text) !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
}
.aip-compare-label, .aip-compare-label--before, .aip-compare-label--after {
  background: var(--nb-text) !important;
  color: var(--nb-surface) !important;
  border: 2px solid var(--nb-text) !important;
  font-weight: 700 !important;
}
.aip-impact-num { color: var(--nb-secondary) !important; font-family: 'Inter', sans-serif !important; font-weight: 900 !important; }
.aip-impact-label { color: var(--nb-text) !important; }
.aip-experiment-title, .aip-experiment h3 { color: var(--nb-text) !important; }

/* Hungry Game / Mission Moj / Creator Battle fidelity numbers & row titles */
.fid-tag, .fid-num, .wfr-num, .wfr-tag, [class*="-num"]:not(.impact-num):not(.outcome-num):not(.big-stat-num):not(.aip-impact-num):not(.stat-num) {
  color: var(--nb-secondary) !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  background: var(--nb-primary) !important;
  padding: 2px 8px !important;
  border: 2px solid var(--nb-text) !important;
  display: inline-block !important;
}
.fid-label-wrap .fid-tag { color: var(--nb-text) !important; }
.fid-title, .wfr-title { color: var(--nb-text) !important; font-weight: 700 !important; }
.fidelity-showcase .fid-row, .fidelity-showcase .fid-title, .fidelity-showcase .fid-num {
  color: var(--nb-text) !important;
  opacity: 1 !important;
}

/* Any "chip"/pill status label that used gold-on-transparent — force dark plate */
.status-pill, .chip, .pill, .tag-chip, .win-tag, .lose-tag {
  color: var(--nb-text) !important;
  background: var(--nb-primary) !important;
  border: 2px solid var(--nb-text) !important;
  font-weight: 700 !important;
}

/* Marquees inside case studies with gold text on light bg */
.dg-marquee-wrap, .cb-marquee, [class*="marquee"]:not(.marquee-section) {
  color: var(--nb-surface) !important;
}
.dg-marquee-wrap .marquee-item, [class*="marquee-item"] { color: inherit !important; }

/* Any bare span/small with only Space Mono + gold color inheritance */
.section .container span[class*="label"],
.section .container div[class*="label"]:not(.aip-outcome-label):not(.fc-label):not(.fc-label-title):not(.fc-label-desc):not(.fc-label-num):not(.section-label):not(.s-label):not(.meta-label):not(.impact-label):not(.stat-label):not(.big-stat-label):not(.outcome-label):not(.dl-icon-label) {
  color: var(--nb-text) !important;
}

/* --- Impact-row icons ---
   AI Interview Prep uses monoline SVG icons — force stroke to dark navy.
   Other case studies (Hungry Game / Mission Moj / Creator Battle) use full-color
   PNG illustrations — leave those alone so they stay colorful. */
.aip-impact-icon {
  color: var(--nb-text) !important;
}
.aip-impact-icon svg, .aip-impact-stat > svg { stroke: var(--nb-text) !important; color: var(--nb-text) !important; }
.aip-impact-icon svg *, .aip-impact-stat > svg * { stroke: var(--nb-text) !important; fill: none !important; }
.aip-impact-stat p { color: var(--nb-text) !important; }
/* Explicitly DO NOT filter .impact-icon PNGs — those are colorful illustrations */
.impact-icon { filter: none !important; }
/* AIP "Numbers that tell the story" impact icons are wrapped in .aip-icon-frame
   so the yellow-square style lives on the frame (unfiltered), and the img inside
   gets brightness(0) to render its gold strokes as dark navy on top. */
.aip-icon-frame {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  background: var(--nb-primary) !important;
  border: 2px solid var(--nb-text) !important;
  box-shadow: 4px 4px 0 0 var(--nb-text) !important;
  border-radius: 0 !important;
  margin: 0 auto 20px !important;
  padding: 6px !important;
  box-sizing: content-box !important;
}
.aip-icon-frame .impact-icon {
  width: 100% !important;
  height: 100% !important;
  filter: brightness(0) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* The "4x" style label that sits where the icon would be — dark navy on light */
.aip-impact-stat .aip-impact-label,
.aip-impact-row .aip-impact-label { color: var(--nb-text) !important; font-weight: 700 !important; }

/* Mobile refinements */
@media (max-width: 900px) {
  .project-card { box-shadow: 6px 6px 0 0 var(--nb-text) !important; }
  .project-card:hover { transform: translate(-2px,-2px) !important; box-shadow: 8px 8px 0 0 var(--nb-text) !important; }
}
