/* ============================================================
   HVRDC Electric — Design System v2
   Professional Red Corporate Theme
   ============================================================ */

/* 1. FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* 2. DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand */
  --red:        #C0392B;   /* Primary — professional crimson */
  --red-dark:   #9B2D22;   /* Hover / pressed */
  --red-tint:   #FEF2F1;   /* Very light red background */
  --red-mid:    #FDDEDD;   /* Medium red tint */

  /* Neutrals */
  --charcoal:   #1A2234;   /* Dark sections, page heroes */
  --charcoal-2: #243044;   /* Gradient end */
  --ink:        #1F2937;   /* Primary heading text */
  --body:       #374151;   /* Body text */
  --muted:      #6B7280;   /* Secondary / captions */
  --subtle:     #9CA3AF;   /* Placeholder, meta */

  /* Surfaces */
  --bg:         #FAFAFA;   /* Page background */
  --surface:    #FFFFFF;   /* Cards, inputs */
  --surface-alt:#F4F6F8;   /* Alternating section bg */

  /* Borders */
  --border:     #E5E7EB;
  --border-md:  #D1D5DB;

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:  0 2px 8px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
  --shadow:     0 4px 20px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
  --shadow-lg:  0 16px 48px rgba(0,0,0,.10), 0 6px 18px rgba(0,0,0,.06);
  --shadow-red: 0 4px 18px rgba(192,57,43,.30);

  /* Border radii */
  --r-sm: 6px;
  --r:    10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Layout */
  --max:    1180px;
  --header: 80px;
}

/* 3. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + 24px);
  overflow-x: clip;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--bg);
  color: var(--body);
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid rgba(192,57,43,.45);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* 4. LAYOUT UTILITIES
   ============================================================ */
.container {
  width: min(var(--max), calc(100% - 40px));
  margin-inline: auto;
}

.section {
  padding: clamp(72px, 8vw, 104px) 0;
}

.section-last { padding-top: 0; }

.section-soft { background: var(--surface-alt); }

.section-tint { background: var(--red-tint); }

/* Global heading case */
h1, h2, h3, h4, h5, h6,
.section-title { text-transform: uppercase; }

/* Eyebrow label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--red);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  flex: 0 0 auto;
  border-radius: 99px;
  background: var(--red);
}

/* 5. TYPOGRAPHY
   ============================================================ */
.section-title {
  max-width: 960px;
  margin: 14px 0 20px;
  color: var(--ink);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.section-lead {
  max-width: 760px;
  margin: 0 0 32px;
  color: var(--muted);
  font-size: clamp(.97rem, 1.4vw, 1.1rem);
  line-height: 1.7;
}

/* 6. NAVIGATION
   ============================================================ */

/* Top bar */
.topbar {
  background: var(--charcoal);
  color: #B0BCCE;
  font-size: .82rem;
}
.topbar-inner {
  min-height: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.topbar-inner > div { display: flex; gap: 20px; }
.topbar a:hover { color: #fff; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: box-shadow .2s;
}
.site-header.scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
}
.nav-wrap {
  height: var(--header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.brand-shield { width: 36px; height: 46px; object-fit: contain; }
.brand-word   { width: 140px; height: auto; }

/* Nav links */
.nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}
.nav > a,
.dropdown-trigger > a,
.dropdown-trigger > button {
  border: 0;
  background: transparent;
  padding: 10px 11px;
  border-radius: var(--r);
  color: var(--ink);
  font-size: .87rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.nav > a:hover,
.dropdown-trigger > a:hover,
.dropdown-trigger > button:hover,
.nav [aria-current="page"] {
  background: var(--red-tint);
  color: var(--red);
}

/* CTA button in nav */
.nav-cta {
  background: var(--red) !important;
  color: #fff !important;
  padding-inline: 18px !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-red);
  transition: background .15s, transform .15s, box-shadow .15s !important;
}
.nav-cta:hover {
  background: var(--red-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(192,57,43,.35) !important;
}

/* Dropdown */
.dropdown            { position: relative; }
.dropdown-trigger    { display: flex; align-items: center; }
.dropdown-trigger > a { border-radius: var(--r) 0 0 var(--r); }
.dropdown-trigger > button { padding-inline: 8px; border-radius: 0 var(--r) var(--r) 0; }
.dropdown-trigger > button span { display: block; transition: transform .2s; }
.dropdown.open .dropdown-trigger > button span { transform: rotate(180deg); }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(340px, 88vw);
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .18s, visibility .18s, transform .18s;
}
.dropdown:focus-within .dropdown-menu,
.dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-menu a {
  display: block;
  padding: 10px 13px;
  border-radius: var(--r);
  color: var(--body);
  font-size: .87rem;
  font-weight: 500;
  transition: background .12s, color .12s;
}
.dropdown-menu a:hover,
.dropdown-menu a[aria-current="page"] {
  background: var(--red-tint);
  color: var(--red);
}
.dropdown.current .dropdown-trigger > a {
  background: var(--red-tint);
  color: var(--red);
}

/* Hamburger */
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  position: relative;
  z-index: 1002;
  cursor: pointer;
  transition: background .15s;
}
.menu-toggle:hover { background: var(--red-tint); }
.menu-toggle span {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  border-radius: 99px;
  background: var(--ink);
  transition: .25s;
}
.menu-toggle span:nth-child(1) { top: 13px; }
.menu-toggle span:nth-child(2) { top: 21px; }
.menu-toggle span:nth-child(3) { top: 29px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(26,34,52,.55);
  opacity: 0;
  visibility: hidden;
  transition: .25s;
}
.nav-overlay.open { opacity: 1; visibility: visible; }

/* 7. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: var(--r);
  font-size: .94rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primary */
.btn-primary {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: var(--shadow-red);
}
.btn-primary:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
  box-shadow: 0 6px 22px rgba(192,57,43,.40);
}

/* Outline */
.btn-outline {
  background: var(--surface);
  border-color: var(--red);
  color: var(--red);
}
.btn-outline:hover {
  background: var(--red-tint);
}

/* Light (on dark backgrounds) */
.btn-light {
  background: #fff;
  border-color: #fff;
  color: var(--charcoal);
}
.btn-light:hover {
  background: rgba(255,255,255,.88);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}

/* 8. HOME HERO
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}
.hero::before {
  content: '';
  position: absolute;
  right: -12%;
  bottom: -40%;
  width: 70%;
  height: 95%;
  background: linear-gradient(135deg, var(--red-tint), var(--red-mid));
  clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%);
  opacity: .6;
}
.hero-grid {
  min-height: min(700px, calc(100vh - var(--header) - 36px));
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(390px, .94fr);
  align-items: center;
  gap: clamp(32px, 4vw, 56px);
  padding: clamp(56px, 7vw, 80px) 0;
}
.hero-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}
.hero h1 {
  margin: 16px 0 18px;
  color: var(--ink);
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.hero-sub {
  max-width: 700px;
  margin: 0 0 14px;
  color: var(--red);
  font-weight: 600;
  font-size: clamp(.97rem, 1.6vw, 1.2rem);
}
.hero-copy > p:not(.hero-sub) {
  max-width: 660px;
  color: var(--muted);
  font-size: clamp(.97rem, 1.4vw, 1.08rem);
}
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* Hero image */
.hero-media {
  position: relative;
  min-height: clamp(420px, 44vw, 540px);
}
.hero-frame {
  position: absolute;
  inset: 10px 0 0;
  clip-path: polygon(22% 0, 100% 0, 100% 88%, 83% 100%, 22% 100%, 0 50%);
  background: var(--red-dark);
  padding: 10px;
  filter: drop-shadow(0 24px 40px rgba(26,34,52,.22));
}
.hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inherit;
}
.hero-badge {
  position: absolute;
  left: -5px;
  bottom: 24px;
  max-width: 230px;
  padding: 18px 22px;
  background: var(--charcoal);
  color: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.hero-badge strong {
  display: block;
  color: #FBCFCA;
  font-size: 2rem;
  line-height: 1;
}
.hero-badge span {
  display: block;
  margin-top: 5px;
  font-size: .88rem;
  color: #B0BCCE;
}

/* 9. METRICS BAND
   ============================================================ */
.metrics-band {
  background: var(--charcoal);
  color: #fff;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.metric {
  padding: 32px 24px;
  border-right: 1px solid rgba(255,255,255,.12);
}
.metric:last-child { border: 0; }
.metric strong {
  display: block;
  color: #FBCFCA;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 800;
  line-height: 1.05;
}
.metric span {
  display: block;
  margin-top: 6px;
  color: #8FA0B6;
  font-size: .84rem;
  line-height: 1.4;
}

/* 10. DIVISION CARDS
   ============================================================ */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.division-card {
  min-width: 0;
  position: relative;
  overflow: hidden;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.division-card::after {
  content: '';
  position: absolute;
  right: -48px;
  bottom: -52px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--red-tint);
  transition: transform .4s;
}
.division-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-md);
}
.division-card:hover::after {
  transform: scale(1.3);
}

.icon-box {
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--red);
  color: #fff;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.division-card h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}
.division-card p {
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.55;
}
.division-card > span {
  display: inline-block;
  margin-top: 10px;
  color: var(--red);
  font-size: .88rem;
  font-weight: 600;
}

/* 11. SPLIT LAYOUT
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(36px, 5vw, 64px);
}
.split > * { min-width: 0; }

.image-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.image-card img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  transition: transform .5s;
}
.image-card:hover img { transform: scale(1.03); }
.image-card::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 2px solid rgba(255,255,255,.55);
  border-radius: 18px;
  pointer-events: none;
}
.partnership-image img { object-position: center; }

/* Infographic */
.infographic {
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
}
.infographic img { width: 100%; border-radius: var(--r-lg); }
.infographic.portrait { max-width: 580px; margin-inline: auto; }

/* 12. MINI GRID
   ============================================================ */
.mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 26px;
}
.mini-grid > div {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color .15s;
}
.mini-grid > div:hover { border-color: var(--red); }
.mini-grid b {
  display: block;
  color: var(--ink);
  font-size: .97rem;
  font-weight: 700;
}
.mini-grid span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: .87rem;
  line-height: 1.45;
}

/* 13. FEATURE LISTS
   ============================================================ */
.feature-list {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}
.feature {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.feature i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r);
  background: var(--red-tint);
  color: var(--red);
  font-style: normal;
  font-size: .85rem;
  font-weight: 800;
  border: 1px solid var(--red-mid);
}
.feature h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}
.feature p {
  margin: 0;
  color: var(--muted);
  font-size: .93rem;
  line-height: 1.55;
}

/* 14. TAG ROW
   ============================================================ */
.tag-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 28px;
}
.tag-row span {
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  font-size: .84rem;
  font-weight: 500;
}

/* 15. GRIDS
   ============================================================ */
.grid-2, .grid-3 { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 16. PANELS
   ============================================================ */
.panel {
  min-width: 0;
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: box-shadow .2s, transform .2s;
}
.panel:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.panel h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}
.panel p    { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.55; }
.panel li   { margin: 6px 0; color: var(--muted); font-size: .93rem; }
.panel .number {
  display: block;
  margin-bottom: 12px;
  color: var(--red);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
}

/* Dark panel variant (inside .dark-section) */
.panel.green {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
}
.panel.green h3 { color: #fff; }
.panel.green p, .panel.green li { color: #B0BCCE; }

.clean-list { margin: 0; padding-left: 18px; }
.clean-list li { margin: 6px 0; color: var(--muted); }

/* 17. DARK SECTION
   ============================================================ */
.dark-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(125deg, var(--charcoal), var(--charcoal-2));
  color: #fff;
}
.dark-section::after {
  content: '';
  position: absolute;
  right: -120px;
  top: -160px;
  width: 420px;
  height: 420px;
  border-radius: 46% 54% 66% 34%;
  background: rgba(192,57,43,.12);
}
.dark-section > .container { position: relative; z-index: 1; }
.dark-section .section-title { color: #fff; }
.dark-section .eyebrow       { color: #FBCFCA; }
.dark-section .eyebrow::before { background: #FBCFCA; }
.dark-section .section-lead  { color: #8FA0B6; }

/* 18. IMPACT GRID
   ============================================================ */
.impact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: stretch;
}
.impact-grid > * { min-width: 0; }

.impact-box {
  padding: 32px;
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.impact-box h3 { color: var(--ink); font-size: 1.3rem; font-weight: 700; }
.impact-box .big {
  margin: 10px 0;
  color: var(--red);
  font-size: clamp(2.4rem, 4.5vw, 4.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}
.kicker {
  color: var(--red);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.milestone { align-self: stretch; }

/* 19. STEPS
   ============================================================ */
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.step {
  counter-increment: step;
  min-width: 0;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: box-shadow .2s, transform .2s;
}
.step:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.step::before {
  content: "0" counter(step);
  color: var(--red);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  opacity: .45;
}
.step h3 { margin: 10px 0 6px; color: var(--ink); font-weight: 700; }
.step p  { margin: 0; color: var(--muted); font-size: .91rem; line-height: 1.5; }

.step.dark {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
}
.step.dark h3 { color: #fff; }
.step.dark p  { color: #8FA0B6; }
.step.dark::before { color: #FBCFCA; opacity: .6; }

/* 20. PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 8vw, 100px) 0;
  background: linear-gradient(120deg, var(--charcoal) 0%, var(--charcoal-2) 100%);
  color: #fff;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to right, #000, transparent);
}
.page-hero::after {
  content: '';
  position: absolute;
  right: -120px;
  top: -80px;
  width: 480px;
  height: 340px;
  background: rgba(192,57,43,.18);
  clip-path: polygon(20% 0, 100% 0, 76% 100%, 0 100%);
}
.page-hero-grid { position: relative; z-index: 1; }

.page-hero.with-media .page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  align-items: center;
  gap: 40px;
}

/* Breadcrumbs */
.breadcrumbs {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 20px;
  color: #7A8FA8;
  font-size: .82rem;
  font-weight: 500;
}
.breadcrumbs a {
  color: #FBCFCA;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s;
}
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs span { opacity: .5; }

.page-hero h1 {
  max-width: 960px;
  margin: 0;
  color: #fff;
  font-size: clamp(2.2rem, 5.5vw, 4.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.page-hero p {
  max-width: 760px;
  margin: 20px 0 0;
  color: #8FA0B6;
  font-size: clamp(.97rem, 1.45vw, 1.1rem);
  line-height: 1.65;
}

.page-hero-media {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  border: 6px solid rgba(255,255,255,.12);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.page-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 21. TREE LAYOUT
   ============================================================ */
.tree-layout {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
}
.tree-copy { position: sticky; top: calc(var(--header) + 28px); }

.tree-stage {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 16px;
  margin: 14px 0;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: box-shadow .2s;
}
.tree-stage:hover { box-shadow: var(--shadow-sm); }

.stage-mark {
  display: grid;
  place-items: center;
  min-height: 68px;
  border-radius: var(--r);
  background: var(--red-tint);
  color: var(--red);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-align: center;
  text-transform: uppercase;
  border: 1px solid var(--red-mid);
}
.tree-stage h3 { margin: 0 0 4px; color: var(--ink); font-weight: 700; }
.tree-stage p  { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }

/* 22. TABLE
   ============================================================ */
.table-wrap {
  max-width: 100%;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}
table     { width: 100%; min-width: 820px; border-collapse: collapse; }
th {
  padding: 16px 18px;
  background: var(--charcoal);
  color: #fff;
  text-align: left;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
td {
  padding: 18px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--body);
  font-size: .93rem;
}
tr:last-child td  { border-bottom: 0; }
tr:hover td       { background: var(--red-tint); }
td:first-child  { width: 20%; color: var(--ink);  font-weight: 700; }
td:last-child   { width: 24%; color: var(--red);  font-weight: 600; }
td ul { margin: 0; padding-left: 18px; color: var(--muted); }
td li { margin: 4px 0; }

/* 23. LOGO WALL
   ============================================================ */
.logo-wall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.logo-wall.partners { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.logo-chip {
  min-width: 0;
  min-height: 90px;
  padding: 16px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: .88rem;
  font-weight: 600;
  text-align: center;
  overflow-wrap: anywhere;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.logo-chip:hover {
  border-color: var(--red);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

/* 24. TEAM GRID
   ============================================================ */
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.team-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: box-shadow .2s, transform .2s;
}
.team-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--red), #E8786D);
}
.team-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.avatar {
  width: 68px;
  height: 68px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red-tint);
  color: var(--red);
  font-size: 1.5rem;
  font-weight: 800;
  border: 2px solid var(--red-mid);
}
.team-card h3 { margin: 0; color: var(--ink); font-size: 1rem; font-weight: 700; line-height: 1.3; }
.team-card p  { margin: 4px 0 0; color: var(--muted); font-size: .88rem; }

/* 25. CONTACT
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr);
  gap: 28px;
  align-items: start;
}
.contact-card {
  padding: 36px;
  background: var(--charcoal);
  color: #fff;
  border-radius: var(--r-xl);
}
.contact-card h2 { margin-top: 0; color: #fff; font-weight: 800; }
.contact-card p  { color: #8FA0B6; }

.contact-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  margin: 20px 0;
}
.contact-item i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r);
  background: rgba(255,255,255,.1);
  font-style: normal;
  font-size: 1rem;
}
.contact-item small {
  display: block;
  color: #7A8FA8;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.contact-card a {
  color: #FBCFCA;
  overflow-wrap: anywhere;
}
.contact-card a:hover { color: #fff; }

/* 26. FORMS
   ============================================================ */
.form-card {
  padding: 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}
.form-card h2 { margin-top: 0; color: var(--ink); font-weight: 800; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.field.full { grid-column: 1 / -1; }

.field label {
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  background: var(--bg);
  border: 1.5px solid var(--border-md);
  border-radius: var(--r);
  color: var(--ink);
  font-size: .94rem;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--subtle); }
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--red);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(192,57,43,.12);
}
.field input:invalid:not(:placeholder-shown),
.field textarea:invalid:not(:placeholder-shown) {
  border-color: #DC2626;
  box-shadow: 0 0 0 3px rgba(220,38,38,.1);
}
.field textarea { min-height: 148px; resize: vertical; }
.field select   { cursor: pointer; appearance: auto; }

/* 27. CTA STRIP
   ============================================================ */
.cta-strip {
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 5vw, 52px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: linear-gradient(110deg, var(--red-dark), var(--red));
  color: #fff;
  border-radius: var(--r-xl);
}
.cta-strip::after {
  content: '';
  position: absolute;
  right: -70px;
  top: -120px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
}
.cta-strip > div,
.cta-strip .btn { position: relative; z-index: 1; }
.cta-strip h2 {
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(1.6rem, 3.2vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.cta-strip p  { margin: 0; color: rgba(255,255,255,.75); font-size: .97rem; }
.cta-strip .btn { flex: 0 0 auto; white-space: nowrap; }

/* 28. PAGE SWITCHER
   ============================================================ */
.page-switcher-section { padding: 0 0 clamp(28px, 4vw, 52px); }

.page-switcher {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
}
.page-switcher a {
  min-width: 0;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.page-switcher a:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--border-md);
}
.page-switcher a:last-child { justify-content: flex-end; text-align: right; }
.page-switcher .all-pages   { justify-content: center; background: var(--charcoal); color: #fff; }
.page-switcher .all-pages:hover { border-color: var(--charcoal); }

.page-switcher small {
  display: block;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.page-switcher strong {
  display: block;
  color: var(--ink);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.25;
}
.page-switcher .all-pages strong { color: #fff; }
.page-switcher .arrow { flex: 0 0 auto; color: var(--red); font-size: 1.15rem; font-weight: 700; }
.page-switcher .all-pages .arrow { color: #FBCFCA; }

/* 29. FOOTER
   ============================================================ */
.site-footer {
  margin-top: clamp(60px, 7vw, 88px);
  background: var(--charcoal);
  color: #8FA0B6;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(120px, .7fr) minmax(120px, .7fr) minmax(200px, 1fr);
  gap: 40px;
  padding: 68px 0 44px;
}
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.footer-grid h4 {
  margin: 0 0 16px;
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.footer-grid a {
  display: block;
  margin: 8px 0;
  color: #8FA0B6;
  font-size: .9rem;
  transition: color .15s;
}
.footer-grid a:hover { color: #fff; }
.footer-grid p { color: #8FA0B6; font-size: .9rem; line-height: 1.6; }

/* Social links */
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.footer-social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #8FA0B6;
  margin: 0;
  transition: background .15s, color .15s;
}
.footer-social a:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.footer-social svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Footer bottom bar */
.footer-bottom {
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .82rem;
  color: #4E617A;
}
.footer-bottom-links {
  display: flex;
  align-items: center;
  gap: 20px;
}
.footer-bottom-links a {
  color: #4E617A;
  transition: color .15s;
}
.footer-bottom-links a:hover { color: #8FA0B6; }

/* 30. BACK TO TOP
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 500;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-red);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .25s, transform .25s, background .15s;
  pointer-events: none;
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover { background: var(--red-dark); }
.back-to-top svg { width: 20px; height: 20px; }

/* Disclaimer */
.disclaimer {
  max-width: 880px;
  margin: 28px 0 0;
  padding: 14px 18px;
  border-left: 3px solid rgba(192,57,43,.4);
  background: rgba(255,255,255,.06);
  color: #8FA0B6;
  font-size: .86rem;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* 31. ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.reveal.reveal-init {
  opacity: 0;
  transform: translateY(22px);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Stagger children */
.reveal-stagger > * {
  transition-property: opacity, transform;
  transition-duration: .6s;
  transition-timing-function: cubic-bezier(.22,1,.36,1);
}

/* 32. RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  :root { --header: 76px; }
  .topbar { display: none; }
  .menu-toggle { display: block; }

  /* Mobile nav drawer */
  .nav {
    position: absolute;
    top: 100%;
    right: 0;
    height: calc(100vh - var(--header));
    height: calc(100dvh - var(--header));
    z-index: 1001;
    width: min(88vw, 400px);
    padding: 20px 18px 32px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    overflow-y: auto;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: -20px 20px 50px rgba(26,34,52,.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s, visibility .22s;
  }
  .nav.open { opacity: 1; visibility: visible; pointer-events: auto; }

  .nav > a,
  .dropdown-trigger > a,
  .dropdown-trigger > button {
    width: 100%;
    padding: 13px 14px;
    text-align: left;
    white-space: normal;
  }
  .dropdown-trigger > a { flex: 1; }
  .dropdown-trigger > button { width: 48px; text-align: center; }

  .dropdown-menu {
    position: static;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    padding: 0 0 0 14px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: max-height .3s, padding .3s;
  }
  .dropdown:focus-within .dropdown-menu { max-height: 0; padding-top: 0; padding-bottom: 0; }
  .dropdown.open .dropdown-menu { max-height: 600px; padding-top: 5px; padding-bottom: 8px; }
  .dropdown-menu a { border-left: 2px solid var(--border-md); border-radius: 0 var(--r) var(--r) 0; }

  /* Layout adjustments */
  .hero-grid    { grid-template-columns: minmax(0, 1fr) minmax(340px, .85fr); }
  .cards        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric:nth-child(3)        { border-right: 0; }
  .metric:nth-child(n+4)      { border-top: 1px solid rgba(255,255,255,.12); }
  .grid-3       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-wall,
  .logo-wall.partners { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tree-layout  { grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr); }
}

@media (max-width: 820px) {
  .container { width: min(var(--max), calc(100% - 32px)); }

  .hero-grid,
  .split,
  .impact-grid,
  .contact-grid,
  .tree-layout,
  .page-hero.with-media .page-hero-grid { grid-template-columns: 1fr; }

  .hero-grid    { min-height: auto; padding-top: 52px; }
  .hero-media   { min-height: 460px; }
  .page-hero-media { min-height: 320px; }
  .tree-copy    { position: static; }
  .education-preview .infographic { order: 2; }
  .image-card img { min-height: 340px; }

  .cta-strip {
    align-items: flex-start;
    flex-direction: column;
  }
  .cta-strip .btn { white-space: normal; }

  .page-switcher { grid-template-columns: 1fr 1fr; }
  .page-switcher .all-pages { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 640px) {
  :root { --header: 68px; }
  .container { width: min(var(--max), calc(100% - 24px)); }

  .brand-word   { width: 110px; }
  .brand-shield { width: 30px; height: 40px; }
  .menu-toggle  { width: 42px; height: 42px; }
  .nav          { width: min(94vw, 380px); }

  .section { padding: 64px 0; }
  .section-last { padding-top: 0; }

  .section-title { letter-spacing: -.01em; }
  .eyebrow { font-size: .68rem; }

  /* Hero */
  .hero-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    padding: 44px 0 52px;
  }
  .hero h1    { font-size: clamp(2.4rem, 12vw, 3rem); }
  .hero-actions  { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .hero-media { min-height: 340px; }
  .hero-frame { clip-path: polygon(14% 0, 100% 0, 100% 88%, 80% 100%, 14% 100%, 0 50%); }
  .hero-badge { left: 9px; bottom: 6px; max-width: 185px; padding: 13px 16px; }
  .hero-badge strong { font-size: 1.55rem; }

  /* Metrics */
  .metrics { grid-template-columns: 1fr; }
  .metric   { padding: 22px 18px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .metric:nth-child(n+4) { border-top: 0; }
  .metric:last-child { border-bottom: 0; }

  /* Grids → single column */
  .cards, .grid-2, .grid-3, .steps, .team-grid,
  .logo-wall, .logo-wall.partners, .footer-grid,
  .form-grid, .mini-grid { grid-template-columns: 1fr; }

  /* Padding reductions */
  .division-card, .panel, .step, .team-card { padding: 22px; }
  .image-card { border-radius: var(--r-lg); }
  .image-card img { min-height: 280px; }

  /* Page hero */
  .page-hero { padding: 56px 0; }
  .page-hero h1 { font-size: clamp(1.9rem, 9.5vw, 2.6rem); }
  .page-hero-media { min-height: 240px; }

  /* Tree stage */
  .tree-stage { grid-template-columns: 1fr; }
  .stage-mark { min-height: auto; padding: 10px; }

  /* Contact & forms */
  .contact-card, .form-card { padding: 24px; border-radius: var(--r-lg); }
  .impact-box               { padding: 24px; border-radius: var(--r-lg); }
  .contact-item { grid-template-columns: 38px minmax(0, 1fr); }
  .contact-item i { width: 38px; height: 38px; }
  .field.full .btn { width: 100%; }

  /* CTA */
  .cta-strip { padding: 28px 22px; border-radius: var(--r-lg); }
  .cta-strip .btn { width: 100%; }

  /* Page switcher */
  .page-switcher { grid-template-columns: 1fr; }
  .page-switcher .all-pages { grid-column: auto; grid-row: auto; order: 3; }
  .page-switcher a:last-child { justify-content: flex-start; text-align: left; }

  /* Footer */
  .footer-grid { gap: 28px; padding: 48px 0 36px; }
  .footer-bottom { flex-direction: column; gap: 12px; }
  .footer-bottom-links { flex-wrap: wrap; gap: 14px; }

  /* Back to top */
  .back-to-top { bottom: 20px; right: 20px; }

  /* Table → cards on mobile */
  .table-wrap { overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
  .table-wrap table,
  .table-wrap thead,
  .table-wrap tbody,
  .table-wrap tr,
  .table-wrap th,
  .table-wrap td   { display: block; width: 100%; min-width: 0; }
  .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .table-wrap tbody { display: grid; gap: 16px; }
  .table-wrap tr    { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
  .table-wrap td    { width: 100%; padding: 16px 18px; border-bottom: 1px solid var(--border); }
  .table-wrap td:last-child { border-bottom: 0; }
  .table-wrap td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 5px;
    color: var(--red);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
  }
  .table-wrap td:first-child,
  .table-wrap td:last-child { width: 100%; }
  tr:hover td { background: var(--surface); }
}

@media (max-width: 380px) {
  .brand-word   { width: 98px; }
  .brand-shield { width: 28px; }
  .hero h1      { font-size: 2.5rem; }
  .page-hero h1 { font-size: 2.2rem; }
  .btn          { padding-inline: 16px; }
}

/* 32a. EV EDUCATION TREE ANIMATION
   ============================================================ */
.ev-tree-section { background: linear-gradient(180deg,#f0f9f0 0%,#fafafa 100%); overflow: hidden; }
.ev-tree-head { text-align: center; max-width: 680px; margin: 0 auto 48px; }

/* Stage — matches SVG 900:820 aspect ratio */
.tree-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 900 / 820;
  max-width: 1000px;
  margin: 0 auto;
}

/* SVG fills the stage */
.tree-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ── Tree paths (stroke-animated) ───────────── */
.tp {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
}
/* Roots — main & secondary */
.rp  { stroke: #5a3012; stroke-width: 9; }
.rp2 { stroke: #5a3012; stroke-width: 5; }
/* Main branches */
.bp  { stroke: #6b4522; stroke-width: 15; }
/* Sub-branches */
.sp  { stroke: #7d5a3c; stroke-width: 8; }
/* Twigs */
.twp { stroke: #9a7455; stroke-width: 4; }

/* ── Trunk layers (inside clip-path group) ───── */
/* All trunk paths have NO dasharray — they're revealed by clip-path */
.tkp { fill: none; stroke-linecap: round; }
.tkp-shadow { stroke: #120700; stroke-width: 50; }
.tkp-main   { stroke: url(#tGrad); stroke-width: 40; }
.tkp-hi     { stroke: #d4a060; stroke-width: 9; opacity: .38; }
/* Bark crack lines */
.bk { fill: none; stroke: #1a0900; stroke-width: 1.8; stroke-linecap: round; opacity: .55; }

/* ── Trunk reveal — clip-path grows upward ────── */
.trunk-reveal-rect { transition: none; }
.tree-stage.is-growing .trunk-reveal-rect {
  animation: trunkUp 1.35s 0.68s cubic-bezier(.25,.46,.45,.94) forwards;
}
@keyframes trunkUp {
  from { y: 762; height: 4;   }
  to   { y: 392; height: 378; }
}

/* Animation trigger — class added by JS on scroll */
.tree-stage.is-growing .tp {
  animation: drawBranch var(--dr,1s) var(--dl,0s) cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes drawBranch {
  to { stroke-dashoffset: 0; }
}

/* Ground shadow fade in */
.ground-sh { opacity: 0; }
.tree-stage.is-growing .ground-sh { animation: gsFade .8s .5s forwards; }
@keyframes gsFade { to { opacity: .18; } }

/* ── Leaf clusters ──────────────────────────── */
.lc {
  opacity: 0;
  transform-origin: center;
  transform: scale(0);
}
.tree-stage.is-growing .lc {
  animation: leafPop .52s var(--cd,4s) cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes leafPop {
  to { opacity: 1; transform: scale(1); }
}
/* 5 realistic green tones: dark interior → bright edge */
.lc1 { fill: #1b5e20; } /* deep forest    */
.lc2 { fill: #2e7d32; } /* dark green     */
.lc3 { fill: #388e3c; } /* medium green   */
.lc4 { fill: #56a85a; } /* bright leaf    */
.lc5 { fill: #33691e; } /* olive-green    */

/* ── Career leaf nodes (absolutely positioned) */
.leaf-node {
  position: absolute;
  left: var(--lx);
  top:  var(--ly);
  transform: translate(-50%, -50%);
  background: #fff;
  border: 2px solid #2e7d32;
  color: #1b5e20;
  font-size: .6rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  padding: 5px 7px;
  border-radius: 50px;
  white-space: nowrap;
  opacity: 0;
  box-shadow: 0 2px 8px rgba(46,125,50,.2);
  z-index: 4;
}
.tree-stage.is-growing .leaf-node {
  animation: leafFade .4s calc(var(--cd, 4.0s)) forwards;
}
/* stagger leaf nodes */
.leaf-node:nth-child(1)  { --cd:3.9s }
.leaf-node:nth-child(2)  { --cd:3.95s }
.leaf-node:nth-child(3)  { --cd:4.0s }
.leaf-node:nth-child(4)  { --cd:4.05s }
.leaf-node:nth-child(5)  { --cd:4.1s }
.leaf-node:nth-child(6)  { --cd:4.05s }
.leaf-node:nth-child(7)  { --cd:4.0s }
.leaf-node:nth-child(8)  { --cd:3.95s }
.leaf-node:nth-child(9)  { --cd:3.9s }
.leaf-node:nth-child(10) { --cd:4.15s }
.leaf-node:nth-child(11) { --cd:4.15s }
.leaf-node:nth-child(12) { --cd:4.2s }

@keyframes leafFade {
  from { opacity:0; transform: translate(-50%,-50%) scale(.6); }
  to   { opacity:1; transform: translate(-50%,-50%) scale(1); }
}

/* ── Branch info boxes ─────────────────────── */
.branch-box {
  position: absolute;
  background: rgba(255,255,255,.96);
  border: 1.5px solid #c8e6c9;
  border-left: 4px solid #2e7d32;
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-size: .65rem;
  line-height: 1.5;
  color: var(--body);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  z-index: 5;
  max-width: 165px;
}
.branch-box ul { margin: 6px 0 0; padding-left: 13px; }
.branch-box li { margin-bottom: 2px; }
.bb-label { font-weight: 700; color: var(--ink); font-size: .68rem; margin-bottom: 4px; }

.bb-l { left: 0.5%;  top: 39%; }
.bb-c { left: 50%;   top: 57%; transform: translateX(-50%); max-width: 200px; }
.bb-r { right: 0.5%; top: 39%; }

.tree-stage.is-growing .branch-box { animation: boxFade .5s 3.6s forwards; }
.tree-stage.is-growing .bb-c       { animation: boxFade .5s 3.7s forwards; }

/* ── Trunk & Roots boxes ───────────────────── */
.trunk-box, .roots-box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.96);
  border: 1.5px solid #d7ccc8;
  border-left: 4px solid #5C3317;
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: .65rem;
  color: var(--body);
  text-align: center;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  z-index: 5;
}
.trunk-box strong, .roots-box strong { color: #5C3317; }
.trunk-box p, .roots-box p { margin: 4px 0 0; font-size: .6rem; white-space: normal; max-width: 260px; }
.trunk-box { top: 64%; }
.roots-box { top: 87%; }

.tree-stage.is-growing .trunk-box  { animation: boxFade .5s 2.0s forwards; }
.tree-stage.is-growing .roots-box  { animation: boxFade .5s 0.5s forwards; }

@keyframes boxFade {
  from { opacity:0; transform: translateX(-50%) translateY(6px); }
  to   { opacity:1; transform: translateX(-50%) translateY(0); }
}
/* bb-l / bb-r don't need translateX correction */
.tree-stage.is-growing .bb-l { animation: boxFadeL .5s 3.6s forwards; }
.tree-stage.is-growing .bb-r { animation: boxFadeR .5s 3.6s forwards; }
@keyframes boxFadeL {
  from { opacity:0; transform: translateX(-8px); }
  to   { opacity:1; transform: translateX(0); }
}
@keyframes boxFadeR {
  from { opacity:0; transform: translateX(8px); }
  to   { opacity:1; transform: translateX(0); }
}

.ev-tree-cta { text-align: center; margin-top: 40px; }

/* Mobile — show simplified stacked version below 700px */
@media (max-width: 700px) {
  .tree-stage { aspect-ratio: auto; min-height: 340px; }
  .branch-box { font-size: .6rem; max-width: 130px; padding: 8px 10px; }
  .bb-l, .bb-r { top: 43%; }
  .trunk-box, .roots-box { font-size: .58rem; white-space: normal; width: 80%; }
  .leaf-node { font-size: .5rem; padding: 3px 5px; }
}

/* 32b. COLLABORATION SLIDESHOW
   ============================================================ */
.collab-section { background: #fff; }

.collab-header { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.collab-header .section-title { margin-bottom: 14px; }
.collab-header .section-lead { color: var(--body); }

/* Tabs */
.collab-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.collab-tab {
  padding: 10px 22px;
  border: 2px solid var(--border-md);
  border-radius: 40px;
  background: transparent;
  color: var(--body);
  font-family: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s;
}
.collab-tab:hover { border-color: var(--red); color: var(--red); }
.collab-tab.active { background: var(--red); border-color: var(--red); color: #fff; }

/* Slider shell */
.collab-slider-wrap {
  position: relative;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 260px;
}
.collab-slider { position: relative; width: 100%; }

/* Slides */
.collab-slide {
  display: none;
  padding: 40px 56px;
  animation: slideFadeIn .4s ease;
}
.collab-slide.active { display: block; }

@keyframes slideFadeIn {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Logo grids */
.logo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

.logo-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px 20px;
  min-width: 140px;
  max-width: 180px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .2s, transform .2s;
  text-align: center;
}
.logo-tile:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.logo-tile span {
  font-size: .7rem;
  color: var(--muted);
  line-height: 1.35;
  text-align: center;
}
.logo-tile.customer { min-width: 120px; max-width: 150px; padding: 14px 16px; }

/* Individual logo symbols — styled text representations */
.logo-symbol {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -.02em;
  white-space: nowrap;
}

/* Affiliations */
.istart      { color: #005f87; font-size: 1.15rem; }
.dpiit       { color: #1a4f99; font-size: .95rem; letter-spacing: .04em; }
.slpi        { color: #0070ba; font-size: 1.05rem; letter-spacing: .06em; }
.startupindia{ color: #ff6600; font-size: .85rem; }
.rajasthan   { color: #8B2252; font-size: 1.3rem; }

/* Partners */
.quantumev   { color: #000; font-size: .82rem; border: 2px solid #000; border-radius: 50px; padding: 4px 10px; }
.ne-logo     { color: #2e7d32; font-size: 1.4rem; border: 3px solid #2e7d32; border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.natbat      { color: #2e7d32; font-size: .72rem; text-align: center; line-height: 1.3; }
.iota        { color: #1a1a1a; font-size: 1.3rem; letter-spacing: .08em; }
.erex        { color: #222; font-size: 1rem; letter-spacing: .08em; }
.vgu         { color: #8B1A1A; font-size: 1.1rem; letter-spacing: .06em; }
.skit        { color: #8B1A1A; font-size: 1.05rem; letter-spacing: .1em; }
.shivnadar   { color: #1a2234; font-size: .75rem; text-align: center; line-height: 1.4; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* Customers */
.blinkit     { color: #1c1c1c; font-size: 1.15rem; }
.swiggy      { color: #fc8019; font-size: .78rem; text-align: center; line-height: 1.3; }
.zepto       { color: #6d1ccf; font-size: 1.15rem; }
.dunzo       { color: #00c37b; font-size: 1rem; letter-spacing: .06em; }
.zomato      { color: #e23744; font-size: 1.1rem; }
.jiomart     { color: #0062bd; font-size: .92rem; }
.flipkart    { color: #2874f0; font-size: 1rem; }
.amazon      { color: #ff9900; font-size: 1rem; letter-spacing: -.01em; }
.porter      { color: #fff; background: #4a2b8c; border-radius: var(--r-sm); padding: 5px 12px; font-size: .9rem; letter-spacing: .08em; }
.rapido      { color: #1c1c1c; background: #ffe700; border-radius: 30px; padding: 4px 12px; font-size: .9rem; }

/* Arrows */
.collab-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--border-md);
  background: #fff;
  color: var(--ink);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: all .2s;
}
.collab-arrow:hover { background: var(--red); border-color: var(--red); color: #fff; }
.collab-prev { left: 12px; }
.collab-next { right: 12px; }

/* Dots */
.collab-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.collab-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border-md);
  cursor: pointer;
  transition: all .25s;
}
.collab-dot.active { background: var(--red); width: 24px; border-radius: 4px; }

.collab-cta { text-align: center; margin-top: 32px; }

/* Real logo images inside tiles */
.logo-img {
  width: auto;
  height: 52px;
  max-width: 130px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.logo-brand-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  min-height: 52px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-family: inherit;
  text-align: center;
  line-height: 1.2;
}

/* ── Partnerships page full logo grids ──────────────────── */
.collab-page-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 44px;
}
.collab-page-header .section-title { margin-bottom: 12px; }

.logo-grid-page {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}
.customer-grid-page {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.logo-tile-page {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 24px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .2s, transform .2s;
}
.logo-tile-page:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.logo-tile-page h4 {
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}
.logo-tile-page p {
  font-size: .75rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}
.logo-img-page {
  width: auto;
  height: 60px;
  max-width: 140px;
  object-fit: contain;
  display: block;
}

/* Mobile */
@media (max-width: 600px) {
  .collab-slide { padding: 28px 48px; }
  .logo-tile { min-width: 110px; padding: 14px 12px; }
  .logo-tile.customer { min-width: 95px; }
  .collab-tab { font-size: .78rem; padding: 8px 14px; }
  .logo-grid-page { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
}

/* 33. ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal.reveal-init { opacity: 1; transform: none; }
}