/* Light and Dark mode mappings and shims */

html[data-mode="dark"] .v2 {
  /* default tokens already define dark values in tokens.css */
}

/* Global anchor hover - no underline */
html[data-mode="dark"] .v2 a:hover { text-decoration: none; }

/* ==== DARK MODE THEME-SPECIFIC HERO BACKGROUNDS ==== */
/* Hero background - TECHNICAL THEME - use green */
body.v2[data-theme="tech"] .hero__bg {
  /* background: radial-gradient(38rem 38rem at 50% -10%, color-mix(in srgb, var(--accent-tech), transparent 73%), transparent 60%), radial-gradient(40rem 40rem at 85% 30%, color-mix(in srgb, var(--accent-tech), transparent 85%), transparent 55%), radial-gradient(40rem 18rem at 15% 55%, color-mix(in srgb, var(--accent-tech), transparent 85%), transparent 85%); */
}

/* Hero background - MARKETING THEME - use magenta/pink */
body.v2[data-theme="mktg"] .hero__bg {
  /* background: radial-gradient(38rem 38rem at 50% -10%, color-mix(in srgb, var(--accent-mktg), transparent 73%), transparent 60%), radial-gradient(40rem 40rem at 85% 30%, color-mix(in srgb, var(--accent-mktg), transparent 85%), transparent 55%), radial-gradient(40rem 18rem at 15% 55%, color-mix(in srgb, var(--accent-mktg), transparent 85%), transparent 85%); */
}

html[data-mode="light"] .v2 {
  /* Brand "Pale Pink" background and graphite text */
  /* --color-bg: #F7D6E0;   pale pink */
  --color-bg: #ffffff;
  --color-fg: #2C2F3A;   /* navel graphite */

  /* Brand accent colors for light mode */
  --accent-tech: var(--magenta);  /* magenta for light mode */
  --accent-mktg: var(--magenta);  /* magenta - RGB 196, 0, 122 */
  --accent-color: var(--magenta); /* magenta for light mode */
  --accent-ring: var(--magenta-50);
  --text-ink: #2C2F3A;

  /* Magenta color tokens - RGB 196, 0, 122 at various opacities */
  --magenta: #C4007A;
  --magenta-05: rgba(196, 0, 122, 0.05);
  --magenta-06: rgba(196, 0, 122, 0.06);
  --magenta-08: rgba(196, 0, 122, 0.08);
  --magenta-10: rgba(196, 0, 122, 0.1);
  --magenta-12: rgba(196, 0, 122, 0.12);
  --magenta-14: rgba(196, 0, 122, 0.14);
  --magenta-15: rgba(196, 0, 122, 0.15);
  --magenta-16: rgba(196, 0, 122, 0.16);
  --magenta-18: rgba(196, 0, 122, 0.18);
  --magenta-20: rgba(196, 0, 122, 0.2);
  --magenta-22: rgba(196, 0, 122, 0.22);
  --magenta-24: rgba(196, 0, 122, 0.24);
  --magenta-25: rgba(196, 0, 122, 0.25);
  --magenta-27: rgba(196, 0, 122, 0.27);
  --magenta-28: rgba(196, 0, 122, 0.28);
  --magenta-30: rgba(196, 0, 122, 0.3);
  --magenta-35: rgba(196, 0, 122, 0.35);
  --magenta-40: rgba(196, 0, 122, 0.4);
  --magenta-45: rgba(196, 0, 122, 0.45);
  --magenta-50: rgba(196, 0, 122, 0.5);
  --magenta-60: rgba(196, 0, 122, 0.6);
  --magenta-85: rgba(196, 0, 122, 0.85);

  /* Green color tokens for technical theme - RGB 4, 134, 65 (#048641) */
  --green: #048641;
  --green-08: rgba(4, 134, 65, 0.08);
  --green-10: rgba(4, 134, 65, 0.1);
  --green-15: rgba(4, 134, 65, 0.15);
  --green-16: rgba(4, 134, 65, 0.16);
  --green-30: rgba(4, 134, 65, 0.3);
  --green-40: rgba(4, 134, 65, 0.4);

  /* Theme-specific animation gradient variables (default to magenta) */
  --card-anim-solid: var(--magenta);
  --card-anim-fade: var(--magenta-30);

  /* Work page token overrides */
  --work-text: #2C2F3A;
  --work-text-dim: rgba(44,47,58,0.74);
  --work-hero-bg: radial-gradient(32rem 32rem at 55% -5%, rgba(196, 0, 122, 0.18), transparent 60%), radial-gradient(36rem 24rem at 20% 50%, rgba(196, 0, 122, 0.12), transparent 75%);
  --work-kicker-bg: transparent;
  --work-kicker-border: 1px solid transparent;
  --work-filter-border: var(--magenta-30);
  --work-filter-active-bg: var(--magenta-10);
  --work-filter-active-border: var(--magenta-45);
  --work-card-bg: #ffffff;
  --work-card-border: var(--magenta-35);
  --work-card-hover-bg: rgba(196, 0, 122, 0.08);
  --work-card-hover-border: var(--magenta-45);
  --work-arrow-color: var(--magenta);
  --work-cta-color: var(--magenta-60);

  /* Override inline :root variables for light mode */
  --accent: var(--magenta) !important;  /* magenta for light mode */
  --accent-soft: var(--magenta-12) !important;
  --accent-ring: var(--magenta-50) !important;
  --bg: #F7D6E0 !important;
  --fg: #2C2F3A !important;
  --fg-dim: rgba(44,47,58,0.78) !important;
  --card-bg: rgba(0,0,0,.03) !important;
  --card-border: rgba(0,0,0,.12) !important;

  /* Borders and surfaces flip to black-based translucency */
  --border-1: 1px solid rgba(0,0,0,.10);
}

/* Base surfaces that were hardcoded for dark */
html[data-mode="light"] .v2 .card { background: rgba(0,0,0,.03); }

/* Shared nav.css sets many dark gradients and white borders. These shims align them for light mode without rewriting every file. */

/* Light mode navbar - keep links white, only pink when active */
html[data-mode="light"] .v2 .nav-links a {
  color: #ffffff !important;
}

html[data-mode="light"] .v2 .nav-links a.active {
  color: var(--magenta) !important;
}

html[data-mode="light"] .v2 .nav-links a.active::after {
  background: var(--magenta) !important;
  box-shadow: 0 0 8px var(--magenta-50) !important;
}

html[data-mode="light"] .v2 .mobile-nav-links a.active {
  color: var(--magenta) !important;
  background: var(--magenta-10) !important;
  border-left-color: var(--magenta) !important;
}

/* Help card heading colors */
html[data-mode="light"] .v2 .help-card h3 {
  color: #048641;
}

html[data-mode="light"] .v2 .help-card.marketing h3 {
  color: var(--magenta);
}

/* ==== Light mode hardening ==== */
html[data-mode="light"] .v2 body {
  /* background: rgba(247, 214, 224, 0.5); */
  background: white;
  color: #2C2F3A;
}

/* Comprehensive text readability - ALL text elements dark in light mode */
html[data-mode="light"] .v2 p,
html[data-mode="light"] .v2 li,
html[data-mode="light"] .v2 span,
html[data-mode="light"] .v2 div,
html[data-mode="light"] .v2 label,
html[data-mode="light"] .v2 td,
html[data-mode="light"] .v2 th,
html[data-mode="light"] .v2 dt,
html[data-mode="light"] .v2 dd,
html[data-mode="light"] .v2 blockquote {
  color: #2C2F3A;
}

/* Brand accent mapping by audience */
html[data-mode="light"] .v2 [data-theme="tech"] {
  --accent: var(--magenta) !important;
  --accent-tech: var(--magenta) !important;
  --card-anim-solid: var(--green);
  --card-anim-fade: var(--green-30);
}
html[data-mode="light"] .v2 [data-theme="mktg"] {
  --accent: var(--magenta) !important;
  --accent-mktg: var(--magenta) !important;
  --card-anim-solid: var(--magenta);
  --card-anim-fade: var(--magenta-30);
}

/* Links and focus */
html[data-mode="light"] .v2 a { color: var(--accent); }
html[data-mode="light"] .v2 a:hover { text-decoration: none; }
html[data-mode="light"] .v2 :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Headings readable on pink */
html[data-mode="light"] .v2 h1,
html[data-mode="light"] .v2 h2,
html[data-mode="light"] .v2 h3,
html[data-mode="light"] .v2 h4,
html[data-mode="light"] .v2 h5,
html[data-mode="light"] .v2 h6 { color: #2C2F3A; }

/* Subheadings and text emphasis */
html[data-mode="light"] .v2 .subheading,
html[data-mode="light"] .v2 .accent-text { color: var(--magenta); }

/* Cards / panels / sections */
html[data-mode="light"] .v2 .card,
html[data-mode="light"] .v2 .panel,
html[data-mode="light"] .v2 .section-surface,
html[data-mode="light"] .v2 .get-card,
html[data-mode="light"] .v2 .use-case-card,
html[data-mode="light"] .v2 .case-study {
  /* background: linear-gradient(135deg, var(--magenta-16), rgba(255, 255, 255, 0.03)) !important; */
  background: white;
  border: 1px solid var(--magenta);
  border-radius: 8px;
  padding: 2.5rem 2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Get-grid h3s - magenta */
html[data-mode="light"] .v2 .get-grid h3 {
  color: var(--magenta);
}

html[data-mode="light"] .v2 .card:hover,
html[data-mode="light"] .v2 .panel:hover,
html[data-mode="light"] .v2 .section-surface:hover,
html[data-mode="light"] .v2 .get-card:hover,
html[data-mode="light"] .v2 .use-case-card:hover,
html[data-mode="light"] .v2 .case-study:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(44,47,58,0.15);
}

/* Forms */
html[data-mode="light"] .v2 input,
html[data-mode="light"] .v2 textarea,
html[data-mode="light"] .v2 select {
  background: #FFFFFF;
  color: #2C2F3A;
  border: 1px solid rgba(44,47,58,0.20);
  box-shadow: 0 2px 0 rgba(44,47,58,0.02) inset;
}
html[data-mode="light"] .v2 input::placeholder,
html[data-mode="light"] .v2 textarea::placeholder {
  color: #6c757d;
}
html[data-mode="light"] .v2 input:focus,
html[data-mode="light"] .v2 textarea:focus,
html[data-mode="light"] .v2 select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 70%);
}

/* Buttons */
html[data-mode="light"] .v2 .btn.primary,
html[data-mode="light"] .v2 button.primary {
  background: var(--accent);
  color: #FFFFFF;
  border: 1px solid color-mix(in srgb, var(--accent), #000 10%);
}
html[data-mode="light"] .v2 .btn.primary:hover,
html[data-mode="light"] .v2 button.primary:hover {
  filter: brightness(.95);
}

html[data-mode="light"] .v2 .cta-primary {
  background: var(--accent);
  color: black;
  border-color: transparent;
  box-shadow: 0 18px 45px var(--magenta-35);
}

/* Footer seam softener */
html[data-mode="light"] .v2 footer,
html[data-mode="light"] .v2 .site-footer {
  background: #2C2F3A;
  border-top: 1px solid rgba(44,47,58,0.10);
}

/* Footer content - pale pink text */
html[data-mode="light"] .v2 .footer-container,
html[data-mode="light"] .v2 .footer-container h1,
html[data-mode="light"] .v2 .footer-container h2,
html[data-mode="light"] .v2 .footer-container h3,
html[data-mode="light"] .v2 .footer-container h4,
html[data-mode="light"] .v2 .footer-container h5,
html[data-mode="light"] .v2 .footer-container h6,
html[data-mode="light"] .v2 .footer-container p,
html[data-mode="light"] .v2 .footer-container a,
html[data-mode="light"] .v2 .footer-container li,
html[data-mode="light"] .v2 .footer-container span {
  color: #F7D6E0 !important;
}

/* Hero kicker */
html[data-mode="light"] .v2 .hero__kicker,
html[data-mode="light"] .v2 .hero-kicker {
  color: var(--magenta) !important;
}

/* Hero kicker - technical context in light mode should be green */
html[data-mode="light"] .v2.technical-case .hero__kicker,
html[data-mode="light"] .v2.technical-case .hero-kicker,
html[data-mode="light"] body.v2.technical-case .hero__kicker,
html[data-mode="light"] body.v2.technical-case .hero-kicker,
html[data-mode="light"] body[data-theme="tech"].v2 .hero__kicker,
html[data-mode="light"] body[data-theme="tech"].v2 .hero-kicker {
  color: #048641 !important;
}

/* Hero subtitle */
html[data-mode="light"] .v2 .hero-subtitle {
  color: var(--magenta) !important;
}

/* Hero subtitle underline */
html[data-mode="light"] .v2 .hero-subtitle::after {
  background: color-mix(in srgb, var(--accent-mktg), transparent 65%);
  bottom: 0;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent-mktg), transparent 55%);
  content: "";
  height: 2px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 70px;
}

/* Hero background gradient - DEFAULT (uses green) */
html[data-mode="light"] .v2 .hero__bg {
  /* background: radial-gradient(38rem 38rem at 50% -10%, color-mix(in srgb, var(--green), transparent 73%), transparent 60%), radial-gradient(40rem 40rem at 85% 30%, color-mix(in srgb, var(--green), transparent 85%), transparent 55%), radial-gradient(40rem 18rem at 15% 55%, color-mix(in srgb, var(--green), transparent 85%), transparent 85%) !important; */
  filter: saturate(110%) !important;
  inset: -20% -10% !important;
  z-index: -2 !important;
}

/* Hero background - TECHNICAL THEME - keep green */
html[data-mode="light"] body.v2[data-theme="tech"] .hero__bg {
  /* background: radial-gradient(38rem 38rem at 50% -10%, color-mix(in srgb, var(--green), transparent 73%), transparent 60%), radial-gradient(40rem 40rem at 85% 30%, color-mix(in srgb, var(--green), transparent 85%), transparent 55%), radial-gradient(40rem 18rem at 15% 55%, color-mix(in srgb, var(--green), transparent 85%), transparent 85%) !important; */
}

/* Hero background - MARKETING THEME - use magenta */
html[data-mode="light"] body.v2[data-theme="mktg"] .hero__bg {
  /* background: radial-gradient(38rem 38rem at 50% -10%, color-mix(in srgb, var(--magenta), transparent 73%), transparent 60%), radial-gradient(40rem 40rem at 85% 30%, color-mix(in srgb, var(--magenta), transparent 85%), transparent 55%), radial-gradient(40rem 18rem at 15% 55%, color-mix(in srgb, var(--magenta), transparent 85%), transparent 85%) !important; */
}


/* Section heading underline glow */
html[data-mode="light"] .v2 .section-heading h2::after {
  background: var(--accent-mktg);
  box-shadow: 0 0 12px var(--magenta-50);
}

/* Philosophy h2 underline glow */
html[data-mode="light"] .v2 .philosophy h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: var(--accent);
  margin: 1rem auto 0;
  box-shadow: 0 0 12px var(--magenta-50);
}

/* Process steps badge - DISABLED for service pages, they use .step-number instead */
/* This rule was creating duplicate circles in service-template.html */
/*
html[data-mode="light"] .v2 .process-step::before {
  content: attr(data-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #cd258c;
  border: 2px solid var(--accent-mktg);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: normal;
  z-index: 1;
  box-shadow: 0 0 15px var(--accent-mktg);
}
*/

/* Process timeline line */
html[data-mode="light"] .v2 .process-timeline::after {
  background: var(--magenta-15) !important;
}

/* Badge, icon, and accent color overrides */
html[data-mode="light"] .v2 .badge,
html[data-mode="light"] .v2 .tag,
html[data-mode="light"] .v2 .label,
html[data-mode="light"] .v2 .icon {
  color: var(--magenta) !important;
}

html[data-mode="light"] .v2 svg:not(.connection-svg):not(.card-border-svg) [stroke],
html[data-mode="light"] .v2 svg:not(.connection-svg):not(.card-border-svg) [fill]:not([fill="none"]) {
  stroke: var(--magenta) !important;
  fill: var(--magenta) !important;
}

/* Swarm chat toggle SVG colors - use filter to transform green to magenta */
html[data-mode="light"] .v2 .swarmChatToggle .icon img,
html[data-mode="light"] .v2 .swarmChatToggle--nav .icon img,
html[data-mode="light"] .v2 #icon > img {
  filter: url(#magentaTint) brightness(1.5) !important;
}

/* Swarm chat toggle text - magenta in light mode */
html[data-mode="light"] .v2 .swarmChatToggle .solutionText,
html[data-mode="light"] .v2 .swarmChatToggle--nav .solutionText,
html[data-mode="light"] .v2 #solutionText {
  color: #C400C4 !important;
  text-shadow: 0 0 10px rgba(196, 0, 196, 0.3) !important;
}

/* Swarm serviceMenuItems - keep dark mode colors in light mode */
html[data-mode="light"] .v2 .swarmChatToggle--nav .serviceMenuItems {
  background: rgba(10, 10, 10, 0.95) !important;
  border: 1px solid rgba(4, 134, 65, 0.3) !important;
}

html[data-mode="light"] .v2 .swarmChatToggle--nav .serviceMenuItem {
  color: white !important;
}

html[data-mode="light"] .v2 .swarmChatToggle--nav .serviceMenuItem:hover {
  background: rgba(4, 134, 65, 0.1) !important;
  color: #048641 !important;
}

html[data-mode="light"] .v2 .swarmChatToggle--nav .serviceMenuItem.active {
  color: #048641 !important;
}

/* CTA and button accent overrides */ 
html[data-mode="light"] .v2 .cta,
html[data-mode="light"] .v2 .btn-accent,
html[data-mode="light"] .v2 .accent-text {
  color: var(--magenta) !important;
}

/* Philosophy quote - magenta theme for light mode */
html[data-mode="light"] .v2 .philosophy-quote {
  border-left: 3px solid var(--accent);
  padding: 2rem;
  margin: 3rem 0;
  font-size: 1.45rem;
  font-style: italic;
  color: var(--fg);
    background: rgba(255,255,255,0) !important;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 20px 40px var(--magenta-12);
  position: relative;
  font-weight:bold;
}

html[data-mode="light"] .v2 .philosophy-quote::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--magenta);
  pointer-events: none;
}

/* Proof section boxes - base dark mode styles */
.v2 .proof-section {
  padding: 2rem;
  background: rgba(74, 222, 128, 0.05);
  border-left: 3px solid #4ade80;
  border-radius: 0 8px 8px 0;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
}

/* Proof section boxes - magenta theme for light mode */
html[data-mode="light"] .v2 .proof-section {
  background: rgba(255,255,255,0);
  border-left: 3px solid var(--accent);
  margin: 3rem 0;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 20px 40px var(--magenta-12);
  position: relative;
  padding: 2rem;
}

html[data-mode="light"] .v2 .proof-section::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--magenta);
  pointer-events: none;
}

html[data-mode="light"] .v2 .proof-section .quote {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: auto;
  margin-right: auto;
  color: #2C2F3A;
  font-weight: bold;
}

html[data-mode="light"] .v2 .proof-section h3 {
  color: var(--magenta);
  font-weight: bold;
}

/* Update all green rgba(74, 222, 128, 0.5) to magenta rgba(196,0,122, 0.5) in light mode */

/* Hero subtitle underline */
html[data-mode="light"] .v2 .hero-subtitle::after {
  box-shadow: 0 0 12px var(--magenta-50);
}

/* Section heading h2 underlines */
html[data-mode="light"] .v2 .section-heading h2::after {
  box-shadow: 0 0 12px var(--magenta-50);
}

/* Philosophy section h2 */
html[data-mode="light"] .v2 .philosophy h2::after {
  box-shadow: 0 0 12px var(--magenta-50);
}

/* Values section h2 */
html[data-mode="light"] .v2 .values h2::after {
  box-shadow: 0 0 12px var(--magenta-50);
}

/* Approach section h2 */
html[data-mode="light"] .v2 .approach h2::after {
  box-shadow: 0 0 12px var(--magenta-50);
}

/* Team section h2 */
html[data-mode="light"] .v2 .team h2::after {
  box-shadow: 0 0 12px var(--magenta-50);
}

/* CTA section h2 */
html[data-mode="light"] .v2 .cta-section h2::after {
  box-shadow: 0 0 12px var(--magenta-50);
}

/* CTA button hover effects */
html[data-mode="light"] .v2 .cta-primary {
  box-shadow: 0 18px 45px var(--magenta-35);
}

html[data-mode="light"] .v2 .cta-primary:hover {
  box-shadow: 0 24px 60px var(--magenta-45);
}

html[data-mode="light"] .v2 .cta-btn:hover {
  box-shadow: 0 24px 60px var(--magenta-45);
}

/* Mode toggle hover */
html[data-mode="light"] .v2 .mode-toggle-inline:hover {
  background: var(--magenta-10);
}

/* ===== COMPREHENSIVE LIGHT MODE GREEN-TO-MAGENTA OVERRIDES ===== */
/* Convert ALL green rgba(74, 222, 128, X) to magenta rgba(196, 0, 122, X) with SAME opacity */

/* CSS Variables */
html[data-mode="light"] .v2 {
  --accent-soft: var(--magenta-12) !important;
  --accent-ring: var(--magenta-35) !important;
  --ring: var(--magenta-40) !important;
  --glow: var(--magenta-12) !important;
  --accent-surface-strong: var(--magenta-20) !important;
  --accent-surface-soft: var(--magenta-10) !important;
  --accent-surface-border: var(--magenta-30) !important;
}

/* Hero backgrounds */
html[data-mode="light"] .v2 .hero-bg,
html[data-mode="light"] .v2 .hero {
  /* background: radial-gradient(38rem 38rem at 50% -10%, var(--magenta-27), #0000 60%),
              radial-gradient(40rem 40rem at 85% 30%, var(--magenta-15), transparent 55%),
              radial-gradient(40rem 18rem at 15% 55%, var(--magenta-15), transparent 85%) !important; */
}

/* Hero title glow */
html[data-mode="light"] .v2 .hero-title::after {
  box-shadow: 0 0 12px var(--magenta-45) !important;
}

/* Philosophy section */
html[data-mode="light"] .v2 .philosophy::before {
  background: radial-gradient(16rem 10rem at 20% 20%, var(--magenta-22), transparent 65%) !important;
}

html[data-mode="light"] .v2 .philosophy-quote {
    background: rgba(255,255,255,0) !important;
  box-shadow: 0 20px 40px var(--magenta-12) !important;
}

html[data-mode="light"] .v2 .philosophy-quote::before {
  border-left: 3px solid var(--magenta) !important;
}

/* Value cards and icons */
html[data-mode="light"] .v2 .values::before {
  background: radial-gradient(18rem 12rem at 70% 30%, var(--magenta-20), transparent 70%) !important;
}

html[data-mode="light"] .v2 .value-card {
  box-shadow: 0 2px 20px var(--magenta-08) !important;
}

html[data-mode="light"] .v2 .value-card::before {
  background: radial-gradient(14rem 12rem at 50% 0%, var(--magenta-12), transparent 70%) !important;
}

html[data-mode="light"] .v2 .value-icon {
  background: var(--magenta-18) !important;
  box-shadow: 0 0 0 4px var(--magenta-08), 0 10px 30px var(--magenta-15) !important;
}

html[data-mode="light"] .v2 .value-icon svg {
  stroke: #C4007A !important;
  fill: none;
}

html[data-mode="light"] .v2 .value-icon svg[fill="currentColor"] {
  fill: #C4007A !important;
  stroke: none !important;
}

/* Approach section */
html[data-mode="light"] .v2 .approach-grid::before {
  /* background: linear-gradient(135deg, var(--magenta-14), rgba(255, 255, 255, 0.02)) !important; */
}

html[data-mode="light"] .v2 .approach-grid {
  box-shadow: 0 32px 80px var(--magenta-12) !important;
}

html[data-mode="light"] .v2 .approach-item::before {
  /* background: radial-gradient(20rem 14rem at 80% 30%, var(--magenta-25), transparent 70%) !important; */
}

html[data-mode="light"] .v2 .approach-item {
  /* background: var(--magenta-12) !important; */
  box-shadow: 0 18px 40px var(--magenta-12) !important;
}

html[data-mode="light"] .v2 .approach-icon {
  /* background: var(--magenta-18) !important; */
  box-shadow: 0 0 0 4px var(--magenta-08), 0 12px 24px var(--magenta-18) !important;
}

/* Team section */
html[data-mode="light"] .v2 .team-container {
  box-shadow: 0 28px 60px var(--magenta-08) !important;
}

html[data-mode="light"] .v2 .team::before {
  background: radial-gradient(22rem 14rem at 50% 20%, var(--magenta-20), transparent 70%) !important;
}

html[data-mode="light"] .v2 .team-card {
  background: var(--magenta-12) !important;
  box-shadow: 0 14px 32px var(--magenta-12) !important;
}

html[data-mode="light"] .v2 .expertise-item {
  background: white;
}

/* CTA section */
html[data-mode="light"] .v2:not([data-theme="tech"]) .cta-section {
  /* background: linear-gradient(135deg, var(--magenta-16), rgba(255, 255, 255, 0.03)) !important; */
  background: white;
  border-color: var(--magenta-50) !important;
  box-shadow: 0 32px 80px var(--magenta-14) !important;
}

html[data-mode="light"] .v2 .cta-section::before {
  /* background: radial-gradient(28rem 20rem at 50% 50%, var(--magenta-20), transparent 70%) !important; */

/* Force technical CTAs to green, including secondary buttons */
html[data-mode="light"] .v2[data-theme="tech"] .cta-secondary {
  background: transparent !important;
  border-color: rgba(4, 134, 65, 0.30) !important;
  box-shadow: none !important;
  color: #2C2F3A;
}

html[data-mode="light"] .v2[data-theme="tech"] .cta-secondary:hover {

/* Technical theme CTA primary button - green bg and shadow */
html[data-mode="light"] .v2[data-theme="tech"] .cta-primary {
  background: #048641 !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 18px 45px rgba(4, 134, 65, 0.35) !important;
}

html[data-mode="light"] .v2[data-theme="tech"] .cta-primary:hover {
  background: #037534 !important;
  box-shadow: 0 24px 60px rgba(4, 134, 65, 0.45) !important;
}

  background: rgba(4, 134, 65, 0.10) !important;
  border-color: #048641 !important;
}

  background: white;
}

/* Technical theme CTA section - green border and shadow */
html[data-mode="light"] [data-theme="tech"] .cta-section {
  background: white;
  border: 1px solid #048641 !important;
  box-shadow: 0 32px 80px rgba(4, 134, 65, 0.14) !important;
}

/* Technical journey specific */
html[data-mode="light"] .v2 .tech-scroll-indicator::before {
  background: linear-gradient(180deg, var(--magenta), var(--magenta-30)) !important;
}

html[data-mode="light"] .v2 .tech-scroll-indicator::after {
  background: linear-gradient(90deg, var(--magenta), var(--magenta-30)) !important;
}

html[data-mode="light"] .v2 .tech-card {
  border: 1px solid var(--magenta-20) !important;
}

html[data-mode="light"] .v2 .tech-card:hover {
  background: var(--magenta-08) !important;
  border-color: var(--magenta-40) !important;
}

html[data-mode="light"] .v2 .tech-section {
  border-top: 1px solid var(--magenta-15) !important;
}

html[data-mode="light"] .v2 .tech-badge {
  background: var(--magenta-12) !important;
  border: 1px solid var(--magenta-30) !important;
}

html[data-mode="light"] .v2 .tech-badge:hover {
  background: var(--magenta-25) !important;
  box-shadow: 0 0 0 1px var(--magenta-45) !important;
}

html[data-mode="light"] .v2 .gradient-border {
  background: linear-gradient(180deg, var(--magenta-10) 0%, transparent 100%) !important;
}

html[data-mode="light"] .v2 .tech-icon {
  background: var(--magenta-08) !important;
  border-color: var(--magenta-40) !important;
}

html[data-mode="light"] .v2 .service-badge {
  background: var(--magenta-10) !important;
  border: 1px solid var(--magenta-30) !important;
}

html[data-mode="light"] .v2 .phase-card {
  border: 1px solid var(--magenta-20) !important;
}

html[data-mode="light"] .v2 .phase-card:hover {
  background: var(--magenta-08) !important;
  border-color: var(--magenta-40) !important;
}

html[data-mode="light"] .v2 .phase-number {
  background: var(--magenta-20) !important;
}

html[data-mode="light"] .v2 .shimmer-wrapper {
  background: linear-gradient(135deg, var(--magenta-10) 0%, var(--magenta-05) 100%) !important;
}

html[data-mode="light"] .v2 .shimmer {
  background: linear-gradient(45deg, transparent 30%, var(--magenta-10) 50%, transparent 70%) !important;
}

html[data-mode="light"] .v2 .capability-badge {
  background: var(--magenta-10) !important;
  border: 1px solid var(--magenta-20) !important;
}

html[data-mode="light"] .v2 .deliverable-item {
  border: 1px solid var(--magenta-25) !important;
  background: linear-gradient(135deg, var(--magenta-06), rgba(255, 255, 255, 0.02)) !important;
}

html[data-mode="light"] .v2 .outcome-card {
  border: 1px solid var(--magenta-50) !important;
}

html[data-mode="light"] .v2 .outcome-metric {
  color: var(--magenta-50) !important;
}

html[data-mode="light"] .v2 .metric-card:hover {
  background: var(--magenta-08) !important;
  border-color: var(--magenta-40) !important;
  box-shadow: 0 10px 40px var(--magenta-10) !important;
}

html[data-mode="light"] .v2 .tech-stack-item:hover {
  background: var(--magenta-20) !important;
}

html[data-mode="light"] .v2 .challenge-item {
  background: var(--magenta-10) !important;
  border: 1px solid var(--magenta-20) !important;
}

html[data-mode="light"] .v2 .solution-highlight {
  background: var(--magenta-05) !important;
}

/* Journey page cards */
html[data-mode="light"] .v2 .journey-card:hover {
  background: var(--magenta-08) !important;
  border-color: var(--magenta-40) !important;
}

html[data-mode="light"] .v2 .journey-icon {
  background: var(--magenta-10) !important;
  border: 1px solid var(--magenta-30) !important;
}

/* Use case cards */
html[data-mode="light"] .v2 .use-case-card:hover {
  background: white;
  border-color: var(--magenta-40);
  box-shadow: 0 10px 40px var(--magenta-10);
}

html[data-mode="light"] .v2 .tag {
  background: var(--magenta-20) !important;
}

/* Work page */
html[data-mode="light"] .v2 .metric-highlight {
  background: var(--magenta-15) !important;
}

html[data-mode="light"] .v2 .year-label {
  color: var(--magenta-85) !important;
}

/* Services page */
html[data-mode="light"] .v2 .service-cta {
  background: var(--magenta-35) !important;
  box-shadow: 0 0 12px var(--magenta-45) !important;
}

/* Legal pages */
html[data-mode="light"] .v2 .legal-section {
  background: var(--magenta-05) !important;
}

/* Case study cards */
html[data-mode="light"] .v2 .impact-card:hover {
  background: var(--magenta-10) !important;
  border-color: var(--magenta-35) !important;
  box-shadow: 0 12px 32px var(--magenta-16) !important;
}

html[data-mode="light"] .v2 .impact-card.primary {
  background: var(--magenta-15) !important;
  border-color: var(--magenta-50) !important;
  box-shadow: 0 16px 48px var(--magenta-24) !important;
}

/* Timeline beads */
html[data-mode="light"] .v2 .timeline-path {
  stroke: var(--magenta-15) !important;
}

html[data-mode="light"] .v2 .timeline-bead {
  fill: var(--magenta-60) !important;
}

/* Info boxes */
html[data-mode="light"] .v2 .info-box {
  background: var(--magenta-05) !important;
  border: 1px solid var(--magenta-20) !important;
}

html[data-mode="light"] .v2 .info-box:hover {
  background: var(--magenta-15) !important;
  border: 1px solid var(--magenta-30) !important;
}

/* Testimonial highlights */
html[data-mode="light"] .v2 .testimonial-card {
  background: linear-gradient(135deg, var(--magenta-08) 0%, var(--magenta-06) 100%) !important;
  border: 1px solid var(--magenta-20) !important;
}

html[data-mode="light"] .v2 .testimonial-card:hover {
  border-color: var(--magenta-40) !important;
  background: linear-gradient(135deg, var(--magenta-12) 0%, var(--magenta-08) 100%) !important;
  box-shadow: 0 8px 32px var(--magenta-15) !important;
}

html[data-mode="light"] .v2 .quote-mark {
  background: linear-gradient(135deg, var(--magenta-20) 0%, var(--magenta-15) 100%) !important;
}

/* ===== ADDITIONAL INLINE STYLE OVERRIDES FOR SPECIFIC HTML FILES ===== */

/* About.html specific overrides */
html[data-mode="light"] .v2 .philosophy {
  /* box-shadow: 0 28px 60px rgba(196, 0, 122, 0.08) !important; */
}

html[data-mode="light"] .v2 .values {
  /* box-shadow: 0 28px 60px rgba(196, 0, 122, 0.08) !important; */
}

 html[data-mode="light"] .v2 .value-card::after {
 /* background: radial-gradient(14rem 12rem at 50% 0%, var(--magenta-12), transparent 70%) !important; */
  border: 1px solid var(--accent-ring);
  border-radius: 8px;
}

html[data-mode="light"] .v2 :is(blockquote, .pull-quote, .quote, .testimonial) {

	font-weight: var(--font-weight-bold);
}

html[data-mode="light"] .v2 .value-card:hover {
  border-color: var(--magenta-35) !important;
  box-shadow: 0 24px 50px var(--magenta-12) !important;
}

html[data-mode="light"] .v2 .approach {
  background: white !important;
  box-shadow: 0 32px 80px var(--magenta-12) !important;
}

html[data-mode="light"] .v2 .approach::before {
  background: radial-gradient(20rem 14rem at 80% 30%, var(--magenta-25), transparent 70%) !important;
}

html[data-mode="light"] .v2 .approach-list li:hover {
  background: var(--magenta-12) !important;
  box-shadow: 0 18px 40px var(--magenta-12) !important;
  border-color: var(--magenta-35) !important;
}

html[data-mode="light"] .v2 .approach-number {
  background: var(--magenta) !important;
  border-color: var(--magenta-35) !important;
  box-shadow: 0 0 0 4px var(--magenta-08), 0 12px 24px var(--magenta-18) !important;
  color:white;
}

html[data-mode="light"] .v2 .team {
  /* box-shadow: 0 28px 60px rgba(196, 0, 122, 0.08) !important; */
}

html[data-mode="light"] .v2 .expertise-item {
  background: white;
  border-color: var(--magenta-35) !important;
 box-shadow: 0 4px 12px var(--magenta-12) !important;
}

html[data-mode="light"] .v2 .expertise-item:hover {
  box-shadow: 0 4px 12px var(--magenta-12) !important;
}

html[data-mode="light"] .v2:not([data-theme="tech"]) .cta-section:not([data-theme="tech"]):not(:has([data-theme="tech"])) {
  /* background: linear-gradient(135deg, var(--magenta-16), rgba(255, 255, 255, 0.03)) !important; */
  background: white;
  border-color: var(--magenta-50) !important;
  /* box-shadow: 0 32px 80px var(--magenta-14) !important; */
  box-shadow: 0 8px 16px var(--magenta-14) !important;
}

html[data-mode="light"] .v2 .cta-section::before {
  /* background: radial-gradient(22rem 14rem at 50% 20%, var(--magenta-28), transparent 70%) !important; */
  background: white;
}

html[data-mode="light"] .v2:not([data-theme="tech"]) .cta-secondary {
  background: var(--magenta-10) !important;
  border-color: var(--magenta-35) !important;
  box-shadow: 0 12px 32px var(--magenta-16) !important;
}

html[data-mode="light"] .v2:not([data-theme="tech"]) .cta-secondary:hover {
  background: var(--magenta-20) !important;
  border-color: var(--magenta) !important;
  box-shadow: 0 18px 36px var(--magenta-22) !important;
}

/* Contact.html specific overrides */
html[data-mode="light"] .v2 .help-card {
  background: white;
  border: 1px solid var(--magenta-35) !important;
  box-shadow: 0 16px 36px var(--magenta-12);

/* Final guardrails: force all CTA hover effects to green on technical pages (any mode) */
.v2[data-theme="tech"] .cta-btn:hover,
.v2[data-theme="tech"] .cta-primary:hover {
  box-shadow: 0 24px 60px rgba(4, 134, 65, 0.45) !important;
}

.v2[data-theme="tech"] .cta-secondary:hover {
  box-shadow: 0 18px 36px rgba(4, 134, 65, 0.30) !important;
}

/* Technical CTA heading accent (no magenta underline/glow) */
html[data-mode="light"] .v2[data-theme="tech"] .cta-section h2::after {

/* Extra-specific hover override to beat any broad rules */
html[data-mode="light"] .v2[data-theme="tech"] .cta-btn:hover,
html[data-mode="light"] .v2[data-theme="tech"] .cta-primary:hover {
  box-shadow: 0 24px 60px rgba(4, 134, 65, 0.45) !important;
}

/* Ensure CTA section pseudo background stays neutral on tech */
html[data-mode="light"] .v2[data-theme="tech"] .cta-section::before {
  background: white !important;
}

  background: #048641 !important;
  box-shadow: 0 0 12px rgba(4, 134, 65, 0.45) !important;
}

}

html[data-mode="light"] .v2 .contact-form {
  background: white;
  border: 1px solid var(--magenta-35);
  box-shadow: 0 18px 40px var(--magenta-12);
}

html[data-mode="light"] .v2 .radio-label {
  background: white;
  border: 1px solid var(--magenta-20);
  box-shadow: 0 6px 18px var(--magenta-10);
}

html[data-mode="light"] .v2 .radio-label:hover {
  border-color: var(--magenta-40);
  box-shadow: 0 8px 22px var(--magenta-12);
}

html[data-mode="light"] .v2 .radio-label[data-role="technical"] input:checked + .radio-button::after {
  background-color: var(--green);
}

html[data-mode="light"] .v2 .radio-label[data-role="technical"] input:checked + .radio-button {
  border-color: var(--green);
}

html[data-mode="light"] .v2 .radio-label[data-role="marketing"] input:checked + .radio-button::after {
  background-color: var(--magenta);
}

html[data-mode="light"] .v2 .radio-label[data-role="marketing"] input:checked + .radio-button {
  border-color: var(--magenta);
}

html[data-mode="light"] .v2 .info-section {
  background: white;
  border: 1px solid var(--magenta-35);
  box-shadow: 0 12px 32px var(--magenta-10);
}

/* Process.html specific overrides */
html[data-mode="light"] .v2 .process-step::before {
  background: #cd258c !important;
  border-color: var(--magenta) !important;
  box-shadow: 0 0 15px var(--magenta-35) !important;
}

html[data-mode="light"] .v2 .proof-section {
  background: rgba(255,255,255,0) !important;
  border-left-color: var(--accent) !important;
  box-shadow: 0 20px 40px var(--magenta-12) !important;
}

/* Services.html specific overrides (case studies) */
html[data-mode="light"] .v2 .case-study.cto-ceo {
  border-color: var(--magenta-20) !important;
}

html[data-mode="light"] .v2 .case-study.cto-ceo:hover {
  background: var(--magenta-08) !important;
  border-color: var(--magenta-40) !important;
}

html[data-mode="light"] .v2 .case-study.cto-ceo .case-study-tag {
  background: var(--magenta-15) !important;
  color: var(--magenta) !important;
}

html[data-mode="light"] .v2 .case-study.cto-ceo .result-item::before {
  color: var(--green) !important;
}

html[data-mode="light"] .v2 .case-study.cto-ceo .case-study-cta {
  color: var(--magenta-85) !important;
}

html[data-mode="light"] .v2 .case-study.cto-ceo:hover .case-study-cta {
  color: var(--magenta) !important;
}

html[data-mode="light"] .v2 .case-study-container {
max-width:1080px !important;
}

/* Client quote */
html[data-mode="light"] .v2 .client-quote {
  background: var(--magenta-05) !important;
  border-left: 3px solid var(--magenta) !important;
}

/* Work.html & technical-journey.html - already covered by comprehensive overrides above */

/* Work.html filter buttons */
html[data-mode="light"] .v2 .filter-btn {
  background: transparent !important;
  border: 1px solid var(--magenta-40) !important;
  color: var(--magenta) !important;
  font-weight: bold;
}

html[data-mode="light"] .v2 .filter-btn:hover,
html[data-mode="light"] .v2 .filter-btn.active {
  background: var(--magenta-15) !important;
  border-color: var(--magenta-60) !important;
  color: var(--magenta) !important;
}

/* Index.html hero section */
html[data-mode="light"] .v2 .hero h1,
html[data-mode="light"] .v2 .hero #heroTitle,
html[data-mode="light"] .v2 .hero .brand,
html[data-mode="light"] .v2 .hero .scramble {
  color: #2C2F3A !important;
  margin-top: 0 !important;
}

html[data-mode="light"] .v2 .hero .tagline,
html[data-mode="light"] .v2 .hero h2.tagline {
  color: var(--magenta) !important;
}

/* Index.html home page background - light mode magenta version */
html[data-mode="light"].v2 body[data-page="home"]:not(.swarm-mode)::before {
  background:
    radial-gradient(1300px 900px at 70% 20%, var(--magenta-30), transparent 60%),
    radial-gradient(1100px 800px at 25% 85%, var(--magenta-20), transparent 65%),
    radial-gradient(900px 900px at 50% 50%, var(--magenta-18), transparent 70%),
    linear-gradient(180deg, rgba(247, 214, 224, 0.45), rgba(247, 214, 224, 0.75));
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity .6s ease;
  z-index: -1;
}

/* Swarm mode CSS variables override for light mode */
html[data-mode="light"] body.swarm-mode {
  --page-bg: radial-gradient(circle at top, #ffffff, #F7D6E0 55%);
  --hero-bg: linear-gradient(180deg, rgba(247, 214, 224, 0.65), rgba(255, 255, 255, 0.95));
}

/* Kaleidoscope dot-label buttons - light mode overrides */
html[data-mode="light"] .dot-label {
  background: rgba(247, 214, 224, 0.9);
  color: #2C2F3A;
  border: 1px solid var(--magenta-30);
  box-shadow: 0 4px 12px var(--magenta-20);
  backdrop-filter: blur(12px);
}

html[data-mode="light"] .dot-label:hover {
  background: rgba(247, 214, 224, 1);
  border-color: var(--magenta-50);
  box-shadow: 0 6px 20px var(--magenta-35);
}

/* Marketing-journey.html specific overrides */
html[data-mode="light"] .v2 .card-title {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.3;
  color: var(--magenta);
  margin-bottom: 1rem;
}

/* Technical-journey.html - card titles should be green */
html[data-mode="light"] .v2[data-theme="tech"] .card-title,
html[data-mode="light"] body.v2[data-theme="tech"] .card-title,
html[data-mode="light"] [data-theme="tech"] .v2 .card-title {
  color: #048641;
}

/* Key deliverables headings - theme-specific colors */
html[data-mode="light"] .v2[data-theme="tech"] .key-deliverables h3,
html[data-mode="light"] body.v2[data-theme="tech"] .key-deliverables h3,
html[data-mode="light"] [data-theme="tech"] .v2 .key-deliverables h3 {
  color: #048641 !important;
}

html[data-mode="light"] .v2[data-theme="mktg"] .key-deliverables h3,
html[data-mode="light"] body.v2[data-theme="mktg"] .key-deliverables h3,
html[data-mode="light"] [data-theme="mktg"] .v2 .key-deliverables h3 {
  color: #c4007a !important;
}

/* Case tags - theme-specific colors for light mode */
html[data-mode="light"] .v2[data-theme="tech"] .case-tag,
html[data-mode="light"] body.v2[data-theme="tech"] .case-tag,
html[data-mode="light"] [data-theme="tech"] .v2 .case-tag {
  background: var(--green-15);
  color: var(--green);
}

html[data-mode="light"] .v2[data-theme="mktg"] .case-tag,
html[data-mode="light"] body.v2[data-theme="mktg"] .case-tag,
html[data-mode="light"] [data-theme="mktg"] .v2 .case-tag {
  background: var(--magenta-15);
  color: #c4007a;
}

html[data-mode="light"] .v2 .service-card p {
  flex-grow: 1;
  margin-bottom: 1.25rem;
  color: black;
  font-size: 1.25rem;
}

html[data-mode="light"] .v2 .section-title {
  text-align: center;
  font-size: 2rem;
  font-weight: normal;
  letter-spacing: 3px;
  color: black;
  margin: 0;
  line-height: 1.2;
}

/* h3 headings - theme-specific colors */
html[data-mode="light"] .v2[data-theme="tech"] h3,
html[data-mode="light"] body.v2[data-theme="tech"] h3,
html[data-mode="light"] [data-theme="tech"] .v2 h3 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: #048641;
  margin-bottom: 1rem;
}

html[data-mode="light"] .v2[data-theme="mktg"] h3,
html[data-mode="light"] body.v2[data-theme="mktg"] h3,
html[data-mode="light"] [data-theme="mktg"] .v2 h3 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--magenta);
  margin-bottom: 1rem;
}

/* Fallback for h3 without theme */
html[data-mode="light"] .v2 h3 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 3px;

  margin-bottom: 1rem;
}


html[data-mode="light"] .v2 .case-content .card-title {
  font-size: 3rem;
}

html[data-mode="light"] body.v2[data-theme="mktg"] .sub-label {
  color: var(--magenta) !important;
}

html[data-mode="light"] body.v2[data-theme="tech"] .sub-label {
  color: #048641 !important;
}

html[data-mode="light"] body.v2[data-theme="mktg"] .benefit-icon,
html[data-mode="light"] body.v2[data-theme="mktg"] .metric-value {
  color: var(--magenta) !important;
}

html[data-mode="light"] body.v2[data-theme="tech"] .benefit-icon,
html[data-mode="light"] body.v2[data-theme="tech"] .metric-value {
  color: #048641 !important;
}

html[data-mode="light"] .v2 .footer-section.footer-brand h3 {
  font-weight: lighter;
  font-size: 2.5rem;
}

/* p.ai-text - marketing theme only for magenta color */
html[data-mode="light"] .v2[data-theme="mktg"] p.ai-text,
html[data-mode="light"] [data-theme="mktg"] .v2 p.ai-text,
html[data-mode="light"] body.v2[data-theme="mktg"] p.ai-text {
  margin-left: 0;
  max-width: 100%;
  color: var(--magenta);
}

html[data-mode="light"] .v2[data-theme="tech"] p.ai-text,
html[data-mode="light"] [data-theme="tech"] .v2 p.ai-text,
html[data-mode="light"] body.v2[data-theme="tech"] p.ai-text {
  margin-left: 0;
  max-width: 100%;
  color: var(--green);
}

/* Work.html use-case cards light mode refinements */
html[data-mode="light"] .v2 .use-case-card,
html[data-mode="light"] .v2 .case-study {
  background: #ffffff;
  border: 1px solid var(--magenta-35);
  box-shadow: 0 16px 36px var(--magenta-12);
  color: #2C2F3A;
}

html[data-mode="light"] .v2 .use-case-card:hover,
html[data-mode="light"] .v2 .case-study:hover {
  border-color: var(--magenta-45);
  box-shadow: 0 22px 48px var(--magenta-18);
}

html[data-mode="light"] .v2 .use-case-card h3,
html[data-mode="light"] .v2 .case-study h3 {
  color: var(--magenta);
}

html[data-mode="light"] .v2 .use-case-card p,
html[data-mode="light"] .v2 .case-study p {
  color: #2C2F3A;
}

html[data-mode="light"] .v2 .result-item, {
  color: #2C2F3A;
  padding: .5rem 0 !important;
}

html[data-mode="dark"] .v2 .result-item {
  padding: 1rem !important;
}

html[data-mode="light"] .v2 .result-item::before {
  color: var(--magenta);
}

html[data-mode="light"] .v2 .case-study-results {
  border-top: 1px solid var(--magenta-20);
}

/* use-case-tag - theme-specific colors for light mode */
html[data-mode="light"] .v2[data-theme="tech"] .use-case-tag,
html[data-mode="light"] body.v2[data-theme="tech"] .use-case-tag,
html[data-mode="light"] [data-theme="tech"] .v2 .use-case-tag,
html[data-mode="light"] .v2[data-theme="tech"] .case-study .use-case-tag,
html[data-mode="light"] body.v2[data-theme="tech"] .case-study .use-case-tag,
html[data-mode="light"] [data-theme="tech"] .v2 .case-study .use-case-tag {
  background: var(--green-15);
  color: var(--green);
}

html[data-mode="light"] .v2[data-theme="mktg"] .use-case-tag,
html[data-mode="light"] body.v2[data-theme="mktg"] .use-case-tag,
html[data-mode="light"] [data-theme="mktg"] .v2 .use-case-tag,
html[data-mode="light"] .v2[data-theme="mktg"] .case-study .use-case-tag,
html[data-mode="light"] body.v2[data-theme="mktg"] .case-study .use-case-tag,
html[data-mode="light"] [data-theme="mktg"] .v2 .case-study .use-case-tag {
  background: var(--magenta-12);
  color: var(--magenta);
}

html[data-mode="light"] .v2 .use-case-card .case-study-cta,
html[data-mode="light"] .v2 .case-study .case-study-cta {
  color: var(--magenta-70);
}

html[data-mode="light"] .v2 .use-case-card:hover .case-study-cta,
html[data-mode="light"] .v2 .case-study:hover .case-study-cta {
  color: var(--magenta);
}

html[data-mode="light"] .v2 .filters,
html[data-mode="light"] .v2 .case-studies {
  max-width: 1080px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Card headings - theme colored based on data-theme */
html[data-mode="light"] .v2 .use-case-card[data-theme="tech"] h3 {
  color: #048641;
}

html[data-mode="light"] .v2 .use-case-card[data-theme="mktg"] h3 {
  color: var(--magenta);
}

/* Card body text - black */
html[data-mode="light"] .v2 .use-case-card p {
  color: black;
}

/* Result items - theme colored */
html[data-mode="light"] .v2 .use-case-card[data-theme="tech"] .result-item {
  color: #048641;
}

html[data-mode="light"] .v2 .use-case-card[data-theme="mktg"] .result-item {
  color: var(--magenta);
}

/* Result item arrows - theme colored */
html[data-mode="light"] .v2 .use-case-card[data-theme="tech"] .result-item::before {
  color: var(--green);
}

html[data-mode="light"] .v2 .use-case-card[data-theme="mktg"] .result-item::before {
  color: var(--magenta);
}

/* Case study CTA - theme colored */
html[data-mode="light"] .v2 .use-case-card[data-theme="tech"] .case-study-cta {
  color: #048641;
}

html[data-mode="light"] .v2 .use-case-card[data-theme="mktg"] .case-study-cta {
  color: var(--magenta);
}

/* Use case tag - theme colored */
html[data-mode="light"] .v2 .use-case-card[data-theme="tech"] .use-case-tag {
  color: var(--green);
  background: var(--green-15);
}

html[data-mode="light"] .v2 .use-case-card[data-theme="mktg"] .use-case-tag {
  color: var(--magenta);
  background: var(--magenta-15);
}

/* Technical cards - green accented surfaces */
html[data-mode="light"] .v2 .use-case-card[data-theme="tech"],
html[data-mode="light"] .v2 .case-study[data-theme="tech"] {
  border: 1px solid var(--green);
  box-shadow: 0 16px 36px rgba(34, 197, 94, 0.16) !important;
}

html[data-mode="light"] .v2 .use-case-card[data-theme="tech"]:hover,
html[data-mode="light"] .v2 .case-study[data-theme="tech"]:hover {
  border-color: var(--green-40) !important;
  box-shadow: 0 22px 48px rgba(34, 197, 94, 0.22) !important;
}

/* Marketing cards - magenta accented surfaces */
html[data-mode="light"] .v2 .use-case-card[data-theme="mktg"] {
  border: 1px solid var(--magenta);
}

html[data-mode="light"] .v2 .use-case-card[data-theme="mktg"]:hover {
  border-color: var(--magenta-40) !important;
  box-shadow: 0 22px 48px var(--magenta-18) !important;
}

/* Work.html hero kicker - marketing theme gets magenta, tech stays green (already defined above) */
html[data-mode="light"] body[data-theme="mktg"].v2 .hero__kicker,
html[data-mode="light"] .v2[data-theme="mktg"] .hero__kicker,
html[data-mode="light"] [data-theme="mktg"] .v2 .hero__kicker {
  color: var(--magenta) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.v2 .hero__inner {
	max-width: 1080px;
}

.case-study-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 6rem 2rem 2rem; /* Extra top padding for fixed navbar */
}

/* Unified card animations - uses theme-specific variables */
html[data-mode="light"] .v2 .use-case-card[data-theme]::before,
html[data-mode="light"] .v2 .module-card[data-theme]::before,
html[data-mode="light"] .v2 .phrase-case-card[data-theme]::before,
html[data-mode="light"] .v2 .service-card[data-theme]::before {
  background: linear-gradient(180deg, var(--card-anim-solid), var(--card-anim-fade)) !important;
}

html[data-mode="light"] .v2 .use-case-card[data-theme]::after,
html[data-mode="light"] .v2 .module-card[data-theme]::after,
html[data-mode="light"] .v2 .phrase-case-card[data-theme]::after,
html[data-mode="light"] .v2 .service-card[data-theme]::after {
  background: linear-gradient(90deg, var(--card-anim-solid), var(--card-anim-fade)) !important;
}

/* ===== SERVICE-TEMPLATE.HTML LIGHT MODE OVERRIDES ===== */

/* Perfect For arrows - theme-specific colors in light mode */
html[data-mode="light"] body.v2[data-theme="mktg"] .sidebar-card li::before {
  color: var(--magenta) !important;
}

html[data-mode="light"] body.v2[data-theme="tech"] .sidebar-card li::before {
  color: #048641 !important;
}

/* Process step circles - theme-specific colors in light mode */
html[data-mode="light"] body.v2[data-theme="mktg"] .step-number {
  border-color: var(--magenta) !important;
  color: var(--magenta) !important;
}

html[data-mode="light"] body.v2[data-theme="tech"] .step-number {
  border-color: #048641 !important;
  color: #048641 !important;
}

/* Features cards - theme-specific accent colors */
html[data-mode="light"] body.v2[data-theme="mktg"] .feature-card h3 {
  color: var(--magenta) !important;
}

html[data-mode="light"] body.v2[data-theme="tech"] .feature-card h3 {
  color: #048641 !important;
}

/* Phrase case tags - white background in light mode */
html[data-mode="light"] .v2 .phrase-case-tag {
  background: #ffffff !important;
}

/* Code blocks - Dracula-inspired dark theme (even in light mode) */
html[data-mode="light"] .v2 pre,
html[data-mode="light"] .v2 code {
  background: #282a36 !important;
  color: #f8f8f2 !important;
  border: 1px solid #44475a !important;
  border-radius: 8px !important;
  padding: 1.5rem !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}