/* ============================================================
   SAM GROUP — 2026 Premium Design System
   Dark · Glass · Gradient · Modern AI-Inspired
   ============================================================ */

/* 1. VARIABLES & RESET
   ============================================================ */
:root {
  /* Brand */
  --primary:        #e31e25;
  --primary-dark:   #b91c1c;
  --primary-light:  rgba(227,30,37,.1);
  --secondary:      #04a0e0;
  --secondary-dark: #0284c7;
  --secondary-light:rgba(4,160,224,.1);

  /* Dark palette */
  --dark-900:  #020814;
  --dark-800:  #060d1c;
  --dark-700:  #0a1528;
  --dark-600:  #0f1f38;
  --dark-500:  #162545;
  --navy:      #0a1628;
  --navy-mid:  #162035;

  /* Light palette */
  --white:     #ffffff;
  --off-white: #f8fafc;
  --gray-50:   #f9fafb;
  --gray-100:  #f1f5f9;
  --gray-200:  #e2e8f0;
  --gray-300:  #cbd5e1;
  --gray-500:  #64748b;
  --gray-700:  #334155;
  --gray-900:  #0f172a;

  --text-dark:    #1a202c;
  --text-mid:     #4a5568;
  --text-light:   #718096;
  --text-primary:   #1a1a2e;
  --text-secondary: #4a5568;
  --text-muted:     #718096;

  /* Glass */
  --glass-white:  rgba(255,255,255,.06);
  --glass-border: rgba(255,255,255,.1);
  --glass-bg:     rgba(255,255,255,.04);

  /* Complementary accent */
  --complementary:       #570a10;
  --complementary-dark:  #3d0709;
  --complementary-mid:   #7a1018;
  --complementary-light: rgba(87,10,16,.12);
  --shadow-glow-deep:    0 8px 32px rgba(87,10,16,.55);

  /* Gradients */
  --grad-brand:   linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  --grad-dark:    linear-gradient(180deg, var(--dark-800) 0%, var(--dark-900) 100%);
  --grad-rich:    linear-gradient(135deg, var(--complementary) 0%, var(--primary) 45%, var(--secondary) 100%);
  --grad-deep:    linear-gradient(135deg, var(--complementary) 0%, var(--primary) 100%);

  /* Category colors */
  --cat-mobility:    #e31e25;
  --cat-realestate:  #4f46e5;
  --cat-energy:      #f59e0b;
  --cat-hospitality: #04a0e0;
  --cat-food:        #10b981;
  --cat-events:      #8b5cf6;
  --cat-education:   #0d9488;
  --cat-engineering: #64748b;
  --cat-business:    #475569;

  /* Fonts */
  --font-heading: 'Montserrat', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Shadows */
  --shadow-xs:  0 1px 3px rgba(0,0,0,.08);
  --shadow-sm:  0 2px 10px rgba(0,0,0,.1);
  --shadow-md:  0 4px 20px rgba(0,0,0,.12);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.16);
  --shadow-xl:  0 20px 60px rgba(0,0,0,.2);
  --shadow-glow-red:  0 8px 32px rgba(227,30,37,.4);
  --shadow-glow-blue: 0 8px 32px rgba(4,160,224,.3);

  /* Shape */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* Motion */
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --ease-out:  cubic-bezier(0, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --duration:  .3s;
  --duration-slow: .6s;

  /* Layout */
  --header-height: 94px;
  --topbar-height: 0px;
  --container:     1280px;
  --gutter:        clamp(1.25rem, 4vw, 2rem);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a  { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select { font: inherit; }

/* 2. TYPOGRAPHY
   ============================================================ */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-dark);
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.65rem); }
h4 { font-size: 1.15rem; }
p  { color: var(--text-mid); font-size: 1rem; line-height: 1.8; }

.lead { font-size: clamp(1rem, 2vw, 1.15rem); color: var(--text-mid); line-height: 1.85; }

/* Gradient text */
.text-gradient {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-alt {
  background: linear-gradient(135deg, #ff5f6d, #04a0e0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Section labels */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--primary);
  margin-bottom: 1rem;
}
.section-label::before {
  content: '';
  width: 20px; height: 2px;
  background: var(--grad-brand);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.section-label.light { color: rgba(255,255,255,.6); }
.section-label.light::before { background: var(--grad-brand); }

.section-title { margin-bottom: .75rem; }
.section-sub {
  max-width: 580px;
  color: var(--text-mid);
  font-size: 1.05rem;
  margin-bottom: 3rem;
}
.section-sub.light { color: rgba(255,255,255,.6); }

/* 3. LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { padding: 6rem 0; }
.section-bg   { background: var(--gray-50); }
.section-dark {
  background: var(--dark-800);
  color: var(--white);
}
.section-dark h2, .section-dark h3, .section-dark h4 { color: var(--white); }
.section-dark p { color: rgba(255,255,255,.65); }
.section-dark .section-label { color: rgba(255,255,255,.5); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.text-center  { text-align: center; }
.text-center .section-sub   { margin-left: auto; margin-right: auto; }
.text-center .section-label { justify-content: center; }

/* 4. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.85rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .02em;
  transition: all var(--duration) var(--ease);
  white-space: nowrap;
  position: relative;
}

/* Gradient CTA — the hero button */
.btn-gradient {
  background: var(--grad-brand);
  color: var(--white);
  box-shadow: 0 4px 24px rgba(227,30,37,.35);
}
.btn-gradient:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 36px rgba(227,30,37,.5);
  filter: brightness(1.08);
}

/* Glass button */
.btn-glass {
  background: rgba(255,255,255,.08);
  color: var(--white);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-glass:hover {
  background: rgba(255,255,255,.14);
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.3);
}

/* Primary solid */
.btn-primary {
  background: var(--primary);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-red);
}

/* Secondary */
.btn-secondary {
  background: var(--secondary);
  color: var(--white);
}
.btn-secondary:hover {
  background: var(--secondary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-blue);
}

/* Outline white (for dark backgrounds) */
.btn-outline {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,.4);
}
.btn-outline:hover {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}

/* Outline dark */
.btn-outline-dark {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
}
.btn-outline-dark:hover {
  background: var(--primary);
  color: var(--white);
}

/* White */
.btn-white {
  background: var(--white);
  color: var(--primary);
  font-weight: 700;
}
.btn-white:hover {
  background: var(--gray-100);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
}

.btn-lg  { padding: 1rem 2.4rem; font-size: 1rem; }
.btn-sm  { padding: .55rem 1.25rem; font-size: .82rem; }
.btn i   { font-size: .88em; }

/* 5. HEADER & NAV
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
}


.topbar-info {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: .78rem;
  color: rgba(255,255,255,.55);
}
.topbar-info a { color: rgba(255,255,255,.55); transition: color var(--duration); }
.topbar-info a:hover { color: var(--white); }
.topbar-info i { color: var(--secondary); margin-right: .3rem; }
.topbar-location { color: rgba(255,255,255,.45); }
.topbar-social {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.topbar-social a {
  width: 24px; height: 24px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.5);
  font-size: .7rem;
  transition: all var(--duration);
}
.topbar-social a:hover {
  background: var(--primary);
  color: var(--white);
  transform: scale(1.15);
}

/* ── Main navbar ── */
.navbar {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  height: var(--header-height);
  border-bottom: 1px solid rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  transition: height .35s ease, box-shadow .35s ease, background .35s ease, border-color .35s ease;
}
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* ── Logo ── */
.navbar-brand { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo-img  { height: 40px; width: auto; display: block; transition: height .35s ease, filter var(--duration); }
.footer-logo-img { height: 36px; width: auto; display: block; }

/* Fallback text logo */
.logo-text-wrap { display: flex; flex-direction: column; line-height: 1; }
.logo-name {
  font-family: var(--font-heading);
  font-size: 1.5rem; font-weight: 800;
  color: var(--navy); letter-spacing: .03em;
}
.logo-tag {
  font-family: var(--font-heading);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .2em; color: var(--primary); text-transform: uppercase;
}

/* ── Nav menu ── */
.nav-menu {
  display: flex;
  align-items: center;
  gap: .15rem;
}
.nav-item { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: .3rem;
  padding: .5rem .9rem;
  font-family: var(--font-heading);
  font-size: .86rem;
  font-weight: 600;
  color: var(--gray-700);
  border-radius: var(--radius-sm);
  transition: all var(--duration);
}
.nav-link i { font-size: .68em; transition: transform var(--duration); }
.nav-link:hover, .nav-link.active {
  color: var(--primary);
  background: var(--primary-light);
}
.nav-item:hover .nav-link i { transform: rotate(180deg); }

/* ── Nav wrapper ── */
.nav-wrapper {
  display: flex;
  align-items: center;
  gap: .25rem;
}

/* ── Nav CTA ── */
.nav-cta-item { margin-left: .6rem; }
.nav-cta { flex-shrink: 0; }

/* ── Mobile toggle ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: .55rem;
  margin-left: auto;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  transition: background var(--duration);
}
.nav-toggle:hover { background: var(--gray-100); }
.mobile-nav-header { display: none; }
.nav-backdrop { display: none; }
.toggle-bar {
  display: block;
  width: 22px; height: 2px;
  background: var(--gray-700);
  border-radius: var(--radius-full);
  transition: all var(--duration);
}

/* ── MEGA MENU ── */
.navbar { position: relative; }
.nav-item.has-dropdown { position: static; }

.mega-menu {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  width: 100%;
  background: var(--white);
  border-top: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 20px 60px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.05);
  padding: 2rem 0 1.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  z-index: 500;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
/* Gradient top border via pseudo */
.mega-menu::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-brand);
}
.nav-item.has-dropdown:hover .mega-menu,
.nav-item.has-dropdown:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .35rem;
  margin-bottom: 1.25rem;
}
.mega-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .9rem 1rem;
  border-radius: var(--radius-md);
  color: var(--text-dark);
  transition: all var(--duration);
}
.mega-item:hover {
  background: var(--gray-50);
  transform: translateX(4px);
}
.mega-icon {
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
}
.mega-text { display: flex; flex-direction: column; gap: .1rem; }
.mega-text strong {
  font-family: var(--font-heading);
  font-size: .855rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
}
.mega-text small { font-size: .73rem; color: var(--text-light); line-height: 1; }
.mega-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--gray-100);
  padding-top: 1rem;
}
.mega-count { font-size: .8rem; color: var(--text-light); display: flex; align-items: center; gap: .4rem; }
.mega-count i { color: var(--primary); }
.mega-view-all {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-heading);
  font-size: .84rem;
  font-weight: 700;
  color: var(--primary);
  transition: gap var(--duration);
}
.mega-view-all:hover { gap: .75rem; }

.site-header.scrolled .navbar {
  height: 72px;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
}
.site-header.scrolled .nav-logo-img {
  height: 40px;
}

/* Home page - always white navbar, light theme only */
body[data-page="home"] .site-header .navbar {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(0,0,0,.08);
  box-shadow: 0 2px 20px rgba(0,0,0,.06);
}
body[data-page="home"] .site-header .nav-link { color: var(--dark-900); }
body[data-page="home"] .site-header .nav-link:hover { color: var(--primary); background: rgba(0,0,0,.04); }
body[data-page="home"] .site-header .toggle-bar { background: var(--dark-900); }

/* Page offset for fixed header */
.page-offset { padding-top: calc(var(--header-height) + var(--topbar-height)); }

/* 6. FOOTER
   ============================================================ */
.site-footer {
  background-color: #06091a;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.032) 0px,
      rgba(255,255,255,.032) 1px,
      transparent 1px,
      transparent 64px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,.032) 0px,
      rgba(255,255,255,.032) 1px,
      transparent 1px,
      transparent 64px
    );
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-brand);
}
.footer-main {
  padding: 5rem 0 3.5rem;
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 3rem;
}
.footer-brand p {
  color: rgba(255,255,255,.5);
  font-size: .875rem;
  line-height: 1.8;
  margin: 1.25rem 0 1.5rem;
}
.footer-logo { margin-bottom: .5rem; }
.footer-logo-img { height: 36px; width: auto; display: block; }
.footer-social {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}
.footer-social a {
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.5);
  font-size: .8rem;
  transition: all var(--duration);
}
.footer-social a:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow-red);
}
.footer-col h5 {
  font-family: var(--font-heading);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  margin-bottom: 1.5rem;
}
.footer-links { display: flex; flex-direction: column; gap: .7rem; }
.footer-links a {
  font-size: .875rem;
  color: rgba(255,255,255,.55);
  transition: all var(--duration);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.footer-links a::before {
  content: '';
  width: 0; height: 1px;
  background: var(--grad-brand);
  transition: width var(--duration);
}
.footer-links a:hover { color: var(--white); padding-left: 4px; }
.footer-links a:hover::before { width: 10px; }
.footer-contact-item {
  display: flex;
  gap: .85rem;
  margin-bottom: 1rem;
  align-items: flex-start;
}
.footer-contact-item i {
  color: var(--secondary);
  margin-top: .15rem;
  flex-shrink: 0;
  font-size: .9rem;
  width: 16px;
}
.footer-contact-item span {
  font-size: .855rem;
  color: rgba(255,255,255,.55);
  line-height: 1.65;
}
.footer-contact-item a { color: rgba(255,255,255,.55); transition: color var(--duration); }
.footer-contact-item a:hover { color: var(--white); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1.5rem 0;
  background: #03050f;
  background-image: none;
}
.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-bottom p { font-size: .82rem; color: rgba(255,255,255,.3); }
.footer-bottom-links { display: flex; gap: 1.5rem; }
.footer-bottom-links a {
  font-size: .8rem;
  color: rgba(255,255,255,.3);
  transition: color var(--duration);
}
.footer-bottom-links a:hover { color: rgba(255,255,255,.75); }

/* 7. PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  background: var(--dark-800);
  padding: 5.5rem 0 4.5rem;
  position: relative;
  overflow: hidden;
}
.page-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .22;
  z-index: 0;
  transition: opacity var(--duration);
}
.page-hero:has(.page-hero-img-overlay) .page-hero-img { opacity: .45; }
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 15% 50%, rgba(227,30,37,.14) 0%, transparent 55%),
    radial-gradient(ellipse 50% 70% at 85% 20%, rgba(4,160,224,.1) 0%, transparent 50%);
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.page-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
}
.page-hero h1 { color: var(--white); }
.page-hero p {
  color: rgba(255,255,255,.6);
  font-size: 1.1rem;
  max-width: 560px;
  margin: 1rem auto 0;
}
.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-bottom: 1.25rem;
  font-size: .82rem;
}
.breadcrumb a { color: rgba(255,255,255,.45); transition: color var(--duration); }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb span { color: rgba(255,255,255,.25); }
.breadcrumb .current { color: var(--primary); font-weight: 600; }

/* 8. HOME — HERO (FULL REDESIGN)
   ============================================================ */
.hero {
  min-height: 100vh;
  background: var(--dark-900);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
}

/* Animated gradient mesh */
.hero-mesh {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 90% 70% at 10% 50%, rgba(227,30,37,.18) 0%, transparent 55%),
    radial-gradient(ellipse 80% 80% at 85% 20%, rgba(4,160,224,.15) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 60% 90%, rgba(4,160,224,.08) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 40% 10%, rgba(227,30,37,.06) 0%, transparent 50%);
  animation: meshPulse 8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes meshPulse {
  0%   { opacity: 1; }
  100% { opacity: .65; }
}

/* Dot grid */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  opacity: .4;
}

/* Hero background media (image / video) */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(2,8,20,.9) 0%,
    rgba(2,8,20,.62) 40%,
    rgba(2,8,20,.88) 100%);
  z-index: 1;
}
.hero-bg-img,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .28;
}

/* Floating paper kite decorations */
.hero-kites {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.kite {
  position: absolute;
  opacity: .12;
  filter: brightness(2) saturate(1.5);
}
.kite-1 {
  width: clamp(160px, 20vw, 300px);
  top: -5%;
  right: 5%;
  animation: kiteFloat 10s ease-in-out infinite;
  animation-delay: 0s;
}
.kite-2 {
  width: clamp(100px, 12vw, 180px);
  bottom: 10%;
  right: 20%;
  animation: kiteFloat 13s ease-in-out infinite;
  animation-delay: -3s;
  opacity: .07;
}
.kite-3 {
  width: clamp(60px, 8vw, 120px);
  top: 30%;
  left: 3%;
  animation: kiteFloat 9s ease-in-out infinite;
  animation-delay: -6s;
  opacity: .08;
}
.kite-4 {
  width: clamp(200px, 28vw, 420px);
  top: 50%;
  right: 0%;
  transform: translateY(-50%);
  opacity: .055;
  animation: kiteFloat 15s ease-in-out infinite;
  animation-delay: -2s;
}
@keyframes kiteFloat {
  0%   { transform: translateY(0) rotate(0deg); }
  33%  { transform: translateY(-18px) rotate(4deg); }
  66%  { transform: translateY(-8px) rotate(-2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
.kite-4 {
  animation-name: kiteFloat4;
}
@keyframes kiteFloat4 {
  0%   { transform: translateY(-50%) rotate(0deg); }
  33%  { transform: translateY(calc(-50% - 18px)) rotate(4deg); }
  66%  { transform: translateY(calc(-50% - 8px)) rotate(-2deg); }
  100% { transform: translateY(-50%) rotate(0deg); }
}

/* Hero main content area */
.hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--header-height) + var(--topbar-height) + 4rem);
  padding-bottom: 8rem;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: rgba(4,160,224,.12);
  border: 1px solid rgba(4,160,224,.25);
  color: #5acbf5;
  padding: .45rem 1.1rem;
  border-radius: var(--radius-full);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
}
.eyebrow-dot {
  width: 7px; height: 7px;
  background: var(--secondary);
  border-radius: var(--radius-full);
  box-shadow: 0 0 8px var(--secondary);
  animation: dotPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.8); }
}

/* ── Hero reveal animation ── */
@keyframes heroLineUp {
  from { opacity: 0; transform: translateY(60px); clip-path: inset(100% 0 0 0); }
  to   { opacity: 1; transform: translateY(0);    clip-path: inset(0% 0 0 0); }
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-h1-ready { overflow: visible; }
.hero-h1-ready > *:not(br) {
  display: inline;
  opacity: 0;
  animation: heroLineUp .9s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-item-reveal {
  opacity: 0;
  animation: heroFadeUp .8s cubic-bezier(.16,1,.3,1) forwards;
}

.hero-content {
  max-width: 820px;
}
.hero h1 {
  color: var(--white);
  font-size: clamp(3rem, 7.5vw, 7.5rem);
  font-weight: 800;
  line-height: 1.0;
  margin-bottom: 1.5rem;
  letter-spacing: -.02em;
}

.hero-sub {
  color: rgba(255,255,255,.6);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  max-width: 560px;
  margin-bottom: 2.5rem;
  line-height: 1.85;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 4rem;
}

/* Hero stat strip */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 720px;
  backdrop-filter: blur(8px);
}
.hero-stat {
  padding: 1.4rem 1.5rem;
  background: rgba(255,255,255,.03);
  text-align: center;
  transition: background var(--duration);
}
.hero-stat:hover { background: rgba(255,255,255,.06); }
.hero-stat-value {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  line-height: 1;
  margin-bottom: .3rem;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-stat-label {
  font-size: .72rem;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-family: var(--font-heading);
  font-weight: 600;
}

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  z-index: 2;
  cursor: pointer;
  pointer-events: auto;
}
.scroll-mouse {
  width: 22px; height: 34px;
  border: 2px solid rgba(255,255,255,.25);
  border-radius: 11px;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 5px;
}
.scroll-dot {
  width: 3px; height: 6px;
  background: rgba(255,255,255,.5);
  border-radius: var(--radius-full);
  animation: scrollDotAnim 1.8s ease-in-out infinite;
}
@keyframes scrollDotAnim {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60%       { transform: translateY(8px); opacity: 0; }
}
.scroll-label {
  font-size: .65rem;
  color: rgba(255,255,255,.3);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-family: var(--font-heading);
  font-weight: 600;
}

/* 9. MARQUEE TRUST BAR
   ============================================================ */
.marquee-bar {
  background: var(--dark-800);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 1rem 0;
  overflow: hidden;
  position: relative;
}
.marquee-bar::before,
.marquee-bar::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.marquee-bar::before {
  left: 0;
  background: linear-gradient(to right, var(--dark-800), transparent);
}
.marquee-bar::after {
  right: 0;
  background: linear-gradient(to left, var(--dark-800), transparent);
}
.marquee-track {
  display: flex;
  gap: 0;
  white-space: nowrap;
  animation: marqueeScroll 30s linear infinite;
  width: max-content;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: 0 2.5rem;
  font-family: var(--font-heading);
  font-size: .8rem;
  font-weight: 600;
  color: rgba(255,255,255,.35);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--duration);
}
.marquee-dot {
  width: 4px; height: 4px;
  border-radius: var(--radius-full);
  background: var(--grad-brand);
  flex-shrink: 0;
  opacity: .5;
}

/* 10a. STATS STRIP (home — white, 4 large numbers)
   ============================================================ */
.stats-strip {
  background: var(--white);
  position: relative;
  z-index: 5;
  border-bottom: 1px solid var(--gray-100);
}
.stats-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat-block {
  padding: 3.5rem 2rem;
  text-align: center;
  border-right: 1px solid var(--gray-100);
  position: relative;
}
.stat-block:last-child { border-right: 0; }
.stat-num {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: .4rem;
}
.stat-label {
  font-family: var(--font-heading);
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-dark);
  margin-bottom: .3rem;
}
.stat-sub {
  font-size: .78rem;
  color: var(--text-light);
  line-height: 1.5;
}

/* 10b. ABOUT SPLIT (50/50 Zubak-style)
   ============================================================ */
.section-about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 620px;
  overflow: hidden;
}
.asp-image {
  position: relative;
  overflow: hidden;
  min-height: 500px;
}
.asp-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 6s ease;
}
.asp-image:hover img { transform: scale(1.04); }
.asp-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(2,8,20,.45) 0%,
    rgba(2,8,20,.1) 60%,
    rgba(2,8,20,.4) 100%);
}
.asp-badge {
  position: absolute;
  bottom: 2.5rem;
  left: 2.5rem;
  background: var(--grad-brand);
  color: var(--white);
  padding: 1.1rem 1.6rem;
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: 0 16px 48px rgba(227,30,37,.45);
  z-index: 2;
}
.asp-badge-year {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}
.asp-badge-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .85;
  margin-top: .2rem;
}
.asp-kite {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 120px;
  opacity: .18;
  filter: brightness(10) saturate(0);
  animation: kiteFloat 12s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
.asp-content {
  background: var(--white);
  display: flex;
  align-items: center;
}
.asp-content-inner {
  padding: 5rem clamp(2.5rem, 6vw, 6rem);
}
.asp-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 2rem;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.asp-mini-stat {
  padding: 1.1rem 1rem;
  text-align: center;
  border-right: 1px solid var(--gray-100);
  background: var(--gray-50);
}
.asp-mini-stat:last-child { border-right: 0; }
.asp-mini-stat strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}
.asp-mini-stat span {
  font-size: .68rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-family: var(--font-heading);
  font-weight: 600;
  display: block;
  margin-top: .2rem;
}
.asp-features {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 2rem;
}
.asp-feature {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.asp-feature-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: var(--primary-light);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
  flex-shrink: 0;
}
.asp-feature h4 {
  font-size: .92rem;
  font-weight: 700;
  margin-bottom: .2rem;
  color: var(--text-dark);
}
.asp-feature p {
  font-size: .83rem;
  color: var(--text-mid);
  line-height: 1.55;
}

/* 10. ABOUT SECTION (home) — legacy, kept for other uses
   ============================================================ */
.section-about {
  padding: 7rem 0;
  background: var(--white);
  overflow: hidden;
}
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

/* Visual column */
.about-visual {
  position: relative;
}
.about-visual-main {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(135deg, var(--dark-700) 0%, var(--dark-600) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.about-visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .32;
  z-index: 0;
}
.about-visual-main::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 20% 60%, rgba(227,30,37,.2) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(4,160,224,.15) 0%, transparent 50%);
}
.about-kite-deco {
  position: absolute;
  bottom: -20px;
  right: -30px;
  width: 180px;
  opacity: .18;
  pointer-events: none;
  filter: brightness(2) saturate(1.5);
  animation: kiteFloat 12s ease-in-out infinite;
  z-index: 2;
}
.about-kite-deco img { width: 100%; }
.about-visual-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2rem;
  width: 100%;
}
.about-year {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 800;
  line-height: 1;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: .5rem;
}
.about-visual-inner > p {
  color: rgba(255,255,255,.5);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-family: var(--font-heading);
  font-weight: 600;
  margin-bottom: 2rem;
}
.about-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.about-metric {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: center;
  backdrop-filter: blur(8px);
}
.about-metric strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: .2rem;
}
.about-metric span {
  font-size: .68rem;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-family: var(--font-heading);
  font-weight: 600;
}
.about-float-card {
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-xl);
  min-width: 180px;
  border: 1px solid var(--gray-100);
}
.about-float-card .card-num {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.about-float-card .card-label {
  font-size: .78rem;
  color: var(--text-light);
  margin-top: .2rem;
  font-family: var(--font-heading);
  font-weight: 600;
}

/* Text column */
.about-text { }
.about-text .section-label { margin-bottom: .75rem; }
.about-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
  margin: 1.75rem 0 2rem;
}
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem;
  border-radius: var(--radius-md);
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  transition: all var(--duration);
}
.feature-item:hover {
  background: var(--white);
  box-shadow: var(--shadow-md);
  border-color: transparent;
  transform: translateY(-2px);
}
.feature-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--primary-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
  font-size: .88rem;
  flex-shrink: 0;
}
.feature-item h4 { font-size: .9rem; margin-bottom: .15rem; }
.feature-item p  { font-size: .82rem; line-height: 1.5; }

/* 11a. SECTORS CLEAN (home — light grey, Zubak style)
   ============================================================ */
.section-sectors-clean {
  background: var(--gray-50);
  padding: 7rem 0;
}
.sectors-clean-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 4rem;
  gap: 2rem;
  flex-wrap: wrap;
}
.section-title-xl {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin-top: .5rem;
}
.ssc-cta-btn { flex-shrink: 0; align-self: flex-end; }
.sectors-clean-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.sector-tile {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xl);
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  transition: all .3s var(--ease);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.sector-tile::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--st-color, var(--grad-brand));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.sector-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,.1);
  border-color: transparent;
}
.sector-tile:hover::after { transform: scaleX(1); }
.sector-tile-icon {
  width: 54px; height: 54px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
  background: var(--st-icon-bg, rgba(0,0,0,.08));
  color: var(--st-color, var(--primary));
}
.sector-tile h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: .5rem;
  line-height: 1.25;
}
.sector-tile p {
  font-size: .855rem;
  line-height: 1.7;
  color: var(--text-mid);
  flex-grow: 1;
  margin: 0;
}
.sector-tile-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--gray-100);
}
.sector-brand-count {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-light);
  font-family: var(--font-heading);
}
.sector-tile-arrow {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
  color: var(--text-mid);
  transition: all .25s var(--ease);
  flex-shrink: 0;
}
.sector-tile:hover .sector-tile-arrow {
  background: var(--st-color, var(--primary));
  color: var(--white);
  transform: translateX(3px);
}

/* 11. SECTORS SECTION (home dark) — legacy
   ============================================================ */
.section-sectors {
  background: var(--dark-800);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
}
.section-sectors::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
.section-sectors::after {
  content: '';
  position: absolute;
  bottom: -120px;
  right: -80px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(4,160,224,.08) 0%, transparent 70%);
  pointer-events: none;
}

.sectors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  position: relative;
  z-index: 1;
}
.sector-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-xl);
  padding: 2rem 1.75rem;
  transition: all var(--duration-slow) var(--ease);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  display: block;
}
.sector-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.0) 100%);
  opacity: 0;
  transition: opacity var(--duration);
}
.sector-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.sector-card:hover::before { opacity: 1; }
.sector-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1.25rem;
  position: relative;
}
.sector-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  opacity: .25;
  filter: blur(8px);
  transform: translateY(4px) scale(.8);
  z-index: -1;
  transition: opacity var(--duration);
  background: inherit;
}
.sector-card:hover .sector-icon::after { opacity: .5; }
.sector-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: .4rem;
  line-height: 1.25;
}
.sector-card p {
  font-size: .83rem;
  color: rgba(255,255,255,.45);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.sector-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 700;
  font-family: var(--font-heading);
  letter-spacing: .04em;
  transition: gap var(--duration);
}
.sector-card:hover .sector-link { gap: .65rem; }
.sector-count {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-family: var(--font-heading);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(255,255,255,.25);
}

/* 12. IMPACT NUMBERS SECTION
   ============================================================ */
.section-impact {
  background: var(--dark-900);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
}
.section-impact::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(227,30,37,.07) 0%, transparent 70%);
  pointer-events: none;
}
.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.06);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  position: relative;
  z-index: 1;
}
.impact-item {
  padding: 3rem 2rem;
  text-align: center;
  background: var(--dark-900);
  transition: background var(--duration);
  position: relative;
  overflow: hidden;
}
.impact-item:hover { background: rgba(255,255,255,.03); }
.impact-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transition: transform var(--duration-slow) var(--ease);
}
.impact-item:hover::before { transform: scaleX(1); }
.impact-num {
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: .6rem;
}
.impact-label {
  font-size: .8rem;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-family: var(--font-heading);
  font-weight: 600;
}
.impact-desc {
  font-size: .78rem;
  color: rgba(255,255,255,.25);
  margin-top: .4rem;
  line-height: 1.5;
}

/* 13. BRAND LOGOS SECTION (home)
   ============================================================ */
.section-brands {
  background: #0d1117;
  padding: 5rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.section-brands::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none; z-index: 0;
}
.section-brands::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 700px 450px at 5% 95%, rgba(227,30,37,.18), transparent),
    radial-gradient(ellipse 600px 400px at 95% 5%, rgba(4,160,224,.12), transparent);
  pointer-events: none; z-index: 0;
}
.section-brands .container { position: relative; z-index: 1; }
.section-brands .brands-head h2 { color: #fff; }
.section-brands .brands-head h2 .text-gradient { background: var(--grad-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.section-brands .brands-head .section-label { color: rgba(255,255,255,.5); }
.section-brands .bm-wrap::before { background: linear-gradient(to right, #0d1117, transparent) !important; }
.section-brands .bm-wrap::after  { background: linear-gradient(to left,  #0d1117, transparent) !important; }
/* Brand marquee */
.bm-wrap {
  overflow: hidden;
  position: relative;
  padding: .75rem 0;
}
.bm-wrap::before,
.bm-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 160px;
  z-index: 2;
  pointer-events: none;
}
.bm-wrap::before { left:  0; background: linear-gradient(to right, var(--white), transparent); }
.bm-wrap::after  { right: 0; background: linear-gradient(to left,  var(--white), transparent); }

.bm-track { overflow: hidden; margin-bottom: 1.25rem; }
.bm-track:last-child { margin-bottom: 0; }

.bm-inner {
  display: flex;
  gap: 0;
  width: max-content;
  animation: bm-left 34s linear infinite;
}
.bm-track--rev .bm-inner { animation-name: bm-right; animation-duration: 38s; }
.bm-inner:hover { animation-play-state: paused; }

@keyframes bm-left  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes bm-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Photo tile card - margin-right keeps half-width maths exact for seamless loop */
.bm-card {
  position: relative;
  width: 210px;
  height: 132px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex-shrink: 0;
  margin-right: 1.1rem;
  cursor: default;
  transition: transform .3s, box-shadow .3s;
}
.bm-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 14px 36px rgba(0,0,0,.28); }

.bm-logo { position: absolute; inset: 0; }
.bm-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.4);
  transition: filter .35s, transform .35s;
}
.bm-card:hover .bm-logo img { filter: grayscale(0); transform: scale(1.06); }

/* gradient overlay */
.bm-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.15) 55%, transparent 100%);
  transition: opacity .3s;
}
.bm-card:hover::after { opacity: .85; }

/* red accent bar on hover */
.bm-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--primary);
  z-index: 3;
  transform: scaleX(0);
  transition: transform .3s;
}
.bm-card:hover::before { transform: scaleX(1); }

.bm-name {
  position: absolute;
  bottom: .65rem;
  left: .85rem;
  right: .85rem;
  z-index: 2;
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 14. JOURNEY PREVIEW (home)
   ============================================================ */
.section-journey-preview {
  background: var(--dark-800);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
}
.section-journey-preview::before {
  content: '';
  position: absolute;
  right: -100px;
  bottom: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(227,30,37,.06) 0%, transparent 70%);
  pointer-events: none;
}
.journey-split {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 5rem;
  align-items: center;
}
.journey-milestones {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.journey-card {
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-lg);
  transition: all var(--duration);
}
.journey-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
  transform: translateX(6px);
}
.j-year {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
  min-width: 55px;
  line-height: 1;
  padding-top: .1rem;
}
.j-content {}
.j-title {
  font-size: .92rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: .2rem;
  font-family: var(--font-heading);
}
.j-desc { font-size: .82rem; color: rgba(255,255,255,.45); line-height: 1.6; }

/* 15. STATS BAR (inner pages)
   ============================================================ */
.stats-bar {
  background: var(--dark-700);
  padding: 2.5rem 0;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.stats-bar .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.06);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.stat-item {
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--dark-700);
  transition: background var(--duration);
}
.stat-item:hover { background: rgba(255,255,255,.04); }
.stat-num {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 800;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.stat-num .plus { font-size: 1.4rem; }
.stat-label {
  font-size: .75rem;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: .4rem;
  font-family: var(--font-heading);
  font-weight: 600;
}

/* 16. BRAND CARDS (group page)
   ============================================================ */
.brands-section { padding: 4rem 0 6rem; background: var(--dark-900); }
.category-section { margin-bottom: 4rem; }
.category-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.category-icon-lg {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  background: rgba(255,255,255,.06) !important;
}
.category-header h2 { font-size: 1.45rem; margin: 0; color: var(--white); }
.category-header .cat-count {
  margin-left: auto;
  font-size: .78rem;
  font-weight: 700;
  font-family: var(--font-heading);
  color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  padding: .3rem .9rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}
.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}
.brand-card {
  background: var(--dark-700);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  transition: all var(--duration) var(--ease);
  position: relative;
  overflow: hidden;
}
.brand-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--brand-color, var(--primary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.brand-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%,
    rgba(var(--brand-rgb, 227,30,37), .06) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s;
}
.brand-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 20px 50px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06);
}
.brand-card:hover::before { transform: scaleX(1); }
.brand-card:hover::after  { opacity: 1; }
.brand-card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.brand-logo-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  background: rgba(255,255,255,.07);
  color: var(--brand-color, var(--primary));
  border: 1px solid rgba(255,255,255,.1);
}
.brand-card h4 { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; color: var(--white); }
.brand-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .2rem .65rem;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.5);
}
.brand-logo-img-wrap {
  width: 100%;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 1rem;
  padding: .4rem 0;
}
.brand-logo-img-wrap img {
  max-height: 60px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .75;
}
.brand-card p { font-size: .875rem; line-height: 1.65; flex-grow: 1; color: rgba(255,255,255,.55); }
.brand-card-footer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand-link {
  font-size: .8rem;
  font-weight: 700;
  color: var(--brand-color, var(--primary));
  display: flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--font-heading);
  transition: gap var(--duration);
}
.brand-card:hover .brand-link { gap: .6rem; }

/* Force dark styles on brand card internals — overrides any inline light-color styles */
.brand-card .brand-logo-icon {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}
.brand-card .brand-badge {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.45) !important;
}
.brand-card .brand-card-footer > span {
  color: rgba(255,255,255,.3) !important;
}
.brand-card .brand-link {
  color: var(--brand-color, var(--secondary)) !important;
}

/* 17. FILTERS (group page)
   ============================================================ */
.filter-bar {
  background: var(--dark-800);
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: sticky;
  top: var(--header-height);
  z-index: 100;
}
.filter-tabs {
  display: flex;
  gap: .5rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab {
  padding: .5rem 1.1rem;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  transition: all var(--duration);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.filter-tab:hover { background: rgba(255,255,255,.1); color: var(--white); }
.filter-tab.active {
  background: var(--grad-brand);
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(227,30,37,.3);
}

/* Category cards (home page businesses) */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.cat-card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  transition: all var(--duration) var(--ease);
  position: relative;
  overflow: hidden;
}
.cat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--card-color, var(--primary));
}
.cat-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: transparent;
}
.cat-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1.25rem;
  background: color-mix(in srgb, var(--card-color, var(--primary)) 10%, transparent);
  color: var(--card-color, var(--primary));
}
.cat-card h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.cat-card p  { font-size: .88rem; line-height: 1.65; }
.cat-card .brand-count {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--card-color, var(--primary));
  margin-top: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-family: var(--font-heading);
}

/* 18. TIMELINE (journey page)
   ============================================================ */
.timeline {
  position: relative;
  padding: 2rem 0;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: linear-gradient(to bottom, var(--primary) 0%, var(--secondary) 100%);
  opacity: .4;
}
.timeline-item {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: start;
  margin-bottom: 3rem;
  position: relative;
}
.timeline-item:nth-child(odd) .timeline-content { grid-column: 1; text-align: right; }
.timeline-item:nth-child(odd) .timeline-dot     { grid-column: 2; }
.timeline-item:nth-child(odd) .timeline-spacer  { grid-column: 3; }
.timeline-item:nth-child(even) .timeline-spacer { grid-column: 1; order: -1; }
.timeline-item:nth-child(even) .timeline-dot    { grid-column: 2; order: 0; }
.timeline-item:nth-child(even) .timeline-content { grid-column: 3; }
.timeline-dot {
  width: 52px; height: 52px;
  border-radius: var(--radius-full);
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  color: white;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: .68rem;
  text-align: center;
  line-height: 1.2;
  border: 3px solid var(--white);
  box-shadow: 0 0 0 3px var(--primary), 0 4px 16px rgba(227,30,37,.35);
  z-index: 1;
  flex-shrink: 0;
  position: relative;
  top: .25rem;
}
.timeline-content {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--duration) var(--ease);
}
.timeline-content:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.timeline-year {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 800;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: .25rem;
}
.timeline-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: .5rem;
}
.timeline-body { font-size: .875rem; line-height: 1.75; }
.timeline-spacer { min-height: 1px; }
.milestone-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--primary);
  background: var(--primary-light);
  padding: .25rem .65rem;
  border-radius: var(--radius-full);
  margin-bottom: .75rem;
  font-family: var(--font-heading);
}
.milestone-badge i { font-size: .7em; }

/* 19. VISION / MISSION / VALUES
   ============================================================ */
.vmv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.vmv-card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  text-align: center;
  transition: all var(--duration) var(--ease);
  position: relative;
  overflow: hidden;
}
.vmv-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.vmv-card.vision::before  { background: var(--primary); }
.vmv-card.mission::before { background: var(--secondary); }
.vmv-card.values::before  { background: #8b5cf6; }
.vmv-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: transparent;
}
.vmv-icon {
  width: 64px; height: 64px;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  margin: 0 auto 1.5rem;
}
.vision  .vmv-icon { background: var(--primary-light); color: var(--primary); }
.mission .vmv-icon { background: var(--secondary-light); color: var(--secondary); }
.values  .vmv-icon { background: #ede9fe; color: #8b5cf6; }
.vmv-card h3 { margin-bottom: .75rem; }
.values-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .75rem;
  text-align: left;
}
.values-list li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  color: var(--text-mid);
}
.values-list li i { color: #8b5cf6; font-size: .75em; }

/* 20. CONTACT
   ============================================================ */

/* Google Maps embed */
.map-embed-wrap {
  position: relative;
  line-height: 0;
}
.map-embed-wrap iframe {
  display: block;
  width: 100%;
  border: 0;
  filter: invert(.9) hue-rotate(180deg) saturate(.8) brightness(.9);
}
.map-overlay-badge {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--dark-800);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  padding: .85rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  white-space: nowrap;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.map-overlay-badge i {
  color: var(--primary);
  font-size: 1rem;
  flex-shrink: 0;
}
.map-overlay-badge span {
  font-size: .85rem;
  color: rgba(255,255,255,.7);
  font-family: var(--font-heading);
  font-weight: 600;
}
@media (max-width: 600px) {
  .map-overlay-badge { flex-direction: column; gap: .5rem; text-align: center; bottom: 1rem; }
  .map-embed-wrap iframe { height: 320px; }
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  align-items: start;
}
.contact-info-item {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.contact-icon {
  width: 50px; height: 50px;
  border-radius: var(--radius-md);
  background: var(--primary-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.contact-info-item h4 { font-size: .9rem; margin-bottom: .3rem; }
.contact-info-item p, .contact-info-item a {
  font-size: .9rem;
  color: var(--text-mid);
  line-height: 1.6;
}
.contact-form-card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-md);
}
.contact-form-card h3 { margin-bottom: .25rem; }
.contact-form-card > p { margin-bottom: 1.75rem; font-size: .9rem; }
.form-group { margin-bottom: 1.25rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: .4rem;
  font-family: var(--font-heading);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  color: var(--text-dark);
  background: var(--white);
  transition: border-color var(--duration), box-shadow var(--duration);
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(227,30,37,.1);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-success {
  display: none;
  text-align: center;
  padding: 2rem;
}
.form-success i { font-size: 3rem; color: #10b981; margin-bottom: 1rem; }

/* 21. CTA SECTION
   ============================================================ */
.cta-section {
  background: var(--dark-900);
  padding: 6rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 20% 50%, rgba(227,30,37,.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 80% 50%, rgba(4,160,224,.1) 0%, transparent 60%);
}
.cta-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
}
.cta-section h2 {
  color: white;
  position: relative;
  z-index: 1;
}
.cta-section p {
  color: rgba(255,255,255,.6);
  max-width: 540px;
  margin: 1rem auto 2.5rem;
  position: relative;
  z-index: 1;
  font-size: 1.05rem;
}
.cta-section .btn-cta-group {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* 22. ABOUT PAGE — STORY
   ============================================================ */
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.story-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.story-block {
  background: var(--dark-700);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  text-align: center;
}
.story-block:first-child {
  grid-column: span 2;
  background: var(--grad-brand);
}
.story-block .block-num {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 800;
  color: white;
  line-height: 1;
}
.story-block .block-label {
  font-size: .78rem;
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: .3rem;
}
/* Story visual photo (about page) */
.story-visual-img-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.story-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.story-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2,8,20,.25) 0%, rgba(2,8,20,.78) 100%);
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
  padding: 2rem;
}
.story-block-sm {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-md);
  padding: 1rem 1.5rem;
  text-align: center;
  flex: 1;
}
.story-block-sm .block-num {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.story-block-sm .block-label {
  font-size: .72rem;
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: .3rem;
  font-family: var(--font-heading);
  font-weight: 600;
}

.leader-quote {
  background: var(--gray-50);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.5rem 1.75rem;
  margin-top: 1.5rem;
}
.leader-quote p {
  font-style: italic;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-mid);
}
.leader-quote cite {
  display: block;
  margin-top: .75rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-dark);
  font-style: normal;
}

/* Journey preview grid (home) */
.journey-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--gray-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gray-100);
}
.journey-preview-item {
  background: var(--white);
  padding: 2rem;
  display: flex;
  gap: 1.25rem;
  transition: background var(--duration);
}
.journey-preview-item:hover { background: var(--gray-50); }
.preview-year {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
  min-width: 60px;
}
.preview-item-title { font-size: .95rem; font-weight: 700; color: var(--text-dark); margin-bottom: .3rem; }
.preview-item-text  { font-size: .85rem; line-height: 1.6; }

/* 23. ANIMATIONS
   ============================================================ */
.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
}
.fade-in.visible { opacity: 1; transform: translateY(0); }
.fade-in-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
}
.fade-in-left.visible { opacity: 1; transform: translateX(0); }
.fade-in-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
}
.fade-in-right.visible { opacity: 1; transform: translateX(0); }

.stagger > *:nth-child(1) { transition-delay: .06s; }
.stagger > *:nth-child(2) { transition-delay: .12s; }
.stagger > *:nth-child(3) { transition-delay: .18s; }
.stagger > *:nth-child(4) { transition-delay: .24s; }
.stagger > *:nth-child(5) { transition-delay: .30s; }
.stagger > *:nth-child(6) { transition-delay: .36s; }

/* 24. UTILITIES
   ============================================================ */
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 2rem; }
.divider {
  width: 40px; height: 3px;
  background: var(--grad-brand);
  border-radius: var(--radius-full);
}

/* Back to top */
.back-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px; height: 44px;
  background: var(--grad-brand);
  color: white;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all var(--duration);
  z-index: 900;
  box-shadow: 0 4px 20px rgba(227,30,37,.4);
}
.back-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-top:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(227,30,37,.5); }

/* 25a. PREMIUM EFFECTS — Cursor / Reveal / Parallax / Section Deco
   ============================================================ */


/* Text reveal — clip-path slide-up (Kryvex) */
.js-reveal {
  opacity: 0;
  transform: translateY(48px);
  clip-path: inset(0 0 100% 0);
  transition:
    opacity   .85s cubic-bezier(.16,1,.3,1),
    transform .85s cubic-bezier(.16,1,.3,1),
    clip-path .85s cubic-bezier(.16,1,.3,1);
}
.js-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0 0 0% 0);
}
.js-reveal:nth-child(1) { transition-delay: .0s; }
.js-reveal:nth-child(2) { transition-delay: .1s; }
.js-reveal:nth-child(3) { transition-delay: .2s; }

/* Section decorative large background word (Rugbond style) */
[data-bg-word]::before {
  content: attr(data-bg-word);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-size: clamp(8rem, 22vw, 22rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.05);
  text-stroke: 1px rgba(255,255,255,.05);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
.section-sectors-clean[data-bg-word]::before {
  -webkit-text-stroke: 1px rgba(0,0,0,.04);
  text-stroke: 1px rgba(0,0,0,.04);
}

/* Section numbered label (01 / 02 / 03 — Rugbond style) */
.section-num {
  font-family: var(--font-heading);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .85rem;
}
.section-num::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--grad-brand);
}
.section-num.light { color: rgba(255,255,255,.5); }
.section-num.light::after { opacity: .4; }

/* Parallax wrapper — overflow clip so image can move */
.parallax-wrap {
  overflow: hidden;
  position: relative;
}
.parallax-wrap img[data-parallax] {
  will-change: transform;
  height: 110%;
  width: 100%;
  object-fit: cover;
  top: -5%;
  position: absolute;
}

/* Enhanced sector tile hover — icon scale */
.sector-tile:hover .sector-tile-icon {
  transform: scale(1.1);
  transition: transform .3s var(--ease-spring);
}
.sector-tile-icon { transition: transform .3s var(--ease); }

/* Enhanced about split image parallax */
.asp-image.parallax-wrap { min-height: 500px; }
.asp-image.parallax-wrap img { position: absolute; height: 115%; top: -7.5%; }

/* Impact section — bigger numbers, more drama */
.impact-num {
  font-family: var(--font-heading);
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: 800;
  line-height: 1;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: .5rem;
  letter-spacing: -.03em;
}

/* Journey card hover image effect */
.journey-card {
  position: relative;
  overflow: hidden;
}
.journey-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--grad-brand);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .4s var(--ease);
}
.journey-card:hover::before { transform: scaleY(1); }

/* Marquee hover pause + style upgrade */
.marquee-bar:hover .marquee-track { animation-play-state: paused; }

/* Button premium hover — gradient slide */
.btn-gradient {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.btn-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  opacity: 0;
  transition: opacity .35s;
  z-index: -1;
}
.btn-gradient:hover::before { opacity: 1; }

/* Stats strip — left accent bar on hover */
.stat-block {
  transition: background .3s;
}
.stat-block:hover {
  background: var(--gray-50);
}

/* Inner-page hero entrance animations */
.page-hero-content .breadcrumb {
  opacity: 0;
  animation: heroFadeUp .5s cubic-bezier(.16,1,.3,1) .05s forwards;
}
.page-hero h1 {
  opacity: 0;
  animation: heroLineUp .85s cubic-bezier(.16,1,.3,1) .2s forwards;
}
.page-hero p {
  opacity: 0;
  animation: heroFadeUp .7s cubic-bezier(.16,1,.3,1) .38s forwards;
}

/* Section-num in centered context: inline + symmetric line on both sides */
.text-center .section-num {
  display: inline-flex;
}
.text-center .section-num::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--grad-brand);
  order: -1;
}

/* Light-bg data-bg-word sections get a subtle dark stroke (visible on white/grey bg) */
section:not(.section-dark):not(.cta-section):not(.section-journey-preview)[data-bg-word]::before {
  -webkit-text-stroke: 1px rgba(0,0,0,.04);
  text-stroke: 1px rgba(0,0,0,.04);
}

/* ── Reduced-motion overrides ── */
@media (prefers-reduced-motion: reduce) {
  .hero-h1-ready > *:not(br),
  .hero-item-reveal { animation: none; opacity: 1; }
  .js-reveal { opacity: 1; transform: none; clip-path: none; }
  [data-parallax] { transform: none !important; }
  .page-hero h1,
  .page-hero p,
  .page-hero-content .breadcrumb { animation: none; opacity: 1; }
}

/* 25. RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .sectors-grid       { grid-template-columns: repeat(3, 1fr); }
  .sectors-clean-grid { grid-template-columns: repeat(3, 1fr); }
  .impact-grid        { grid-template-columns: repeat(2, 1fr); }
  .stats-strip-grid   { grid-template-columns: repeat(2, 1fr); }
  .stat-block         { border-bottom: 1px solid var(--gray-100); }
  .stat-block:nth-child(2) { border-right: 0; }
}

@media (max-width: 900px) {
  .section-about-split  { grid-template-columns: 1fr; }
  .asp-image            { min-height: 380px; }
  .asp-content-inner    { padding: 3.5rem 2rem; }
  .sectors-clean-grid   { grid-template-columns: repeat(2, 1fr); }
  .sectors-clean-head   { flex-direction: column; align-items: flex-start; }
  .ssc-cta-btn          { width: 100%; text-align: center; justify-content: center; }
}

/* About milestones 3-col grid */
.milestones-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 860px) {
  .milestones-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .milestones-grid { grid-template-columns: 1fr; }
}

/* About "Why SAM" two-column layout */
.about-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

@media (max-width: 860px) {
  .sectors-grid    { grid-template-columns: repeat(2, 1fr); }
  .about-split     { grid-template-columns: 1fr; gap: 3rem; }
  .story-grid      { grid-template-columns: 1fr; gap: 3rem; }
  .about-why-grid  { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 1024px) {
  .grid-4       { grid-template-columns: repeat(2, 1fr); }
  .footer-main  { grid-template-columns: 1fr 1fr; }
  .cat-grid     { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .timeline::before { left: 24px; }
  .timeline-item {
    grid-template-columns: 48px 1fr;
    gap: 1.25rem;
  }
  .timeline-item:nth-child(odd) .timeline-content,
  .timeline-item:nth-child(even) .timeline-content {
    grid-column: 2;
    text-align: left;
  }
  .timeline-item:nth-child(odd) .timeline-dot,
  .timeline-item:nth-child(even) .timeline-dot { grid-column: 1; }
  .timeline-spacer { display: none; }
  .timeline-item:nth-child(even) .timeline-dot  { order: unset; }
  .timeline-item:nth-child(even) .timeline-spacer { display: none; }
  .vmv-grid { grid-template-columns: 1fr 1fr; }
  .story-grid { grid-template-columns: 1fr; gap: 3rem; }
  .journey-split { grid-template-columns: 1fr; gap: 3rem; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); max-width: 500px; }
  .about-split  { gap: 3rem; }
}

@media (max-width: 768px) {
  :root {
    --topbar-height: 0px;
    --header-height: 62px;
  }
  .page-offset { padding-top: var(--header-height); }

  /* CRITICAL: Remove backdrop-filter from navbar on mobile.
     backdrop-filter creates a CSS stacking context that traps position:fixed
     children (the nav drawer) inside the navbar bounds instead of the viewport. */
  .navbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255,255,255,.98) !important;
  }
  body[data-page="home"] .site-header .navbar {
    background: rgba(255,255,255,.97) !important;
    border-bottom-color: rgba(0,0,0,.08) !important;
  }

  /* ── Mobile hamburger ── */
  .nav-toggle { display: flex; }
  body[data-page=”home”] .site-header .toggle-bar {
    background: rgba(255,255,255,.9) !important;
  }

  /* ── Mobile drawer - LIGHT VERSION ── */
  .nav-wrapper {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(320px, 88vw);
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    transform: translateX(100%);
    transition: transform .35s var(--ease);
    overflow-y: auto;
    z-index: 1100;
    box-shadow: -8px 0 40px rgba(0,0,0,.18);
    gap: 0;
  }
  .nav-wrapper.open { transform: translateX(0); }

  /* Mobile drawer header */
  .mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
    background: #f8f9fa;
  }
  .mobile-nav-header .nav-logo-img { height: 30px; width: auto; }
  /* Light drawer - show coloured logo, hide white logo */
  .mobile-nav-header .nav-logo-dark  { display: none  !important; }
  .mobile-nav-header .nav-logo-light { display: block !important; }
  .navbar .nav-logo-img { height: 32px; }
  .mobile-nav-close {
    width: 34px; height: 34px;
    border-radius: var(--radius-full);
    background: #e9ecef;
    display: flex; align-items: center; justify-content: center;
    color: #495057;
    font-size: .85rem;
    border: none; cursor: pointer;
    transition: all var(--duration);
  }
  .mobile-nav-close:hover { background: var(--primary); color: #fff; }

  /* Nav menu in drawer */
  .nav-menu {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    padding: .5rem 0;
    flex-grow: 1;
  }
  .nav-link {
    width: 100%;
    justify-content: space-between;
    padding: .9rem 1.25rem;
    font-size: .9rem;
    border-radius: 0;
    color: #212529;
    min-height: 48px;
    border-bottom: 1px solid #f1f3f4;
  }
  .nav-link:hover, .nav-link.active {
    color: var(--primary);
    background: rgba(227,30,37,.06);
    border-left: 3px solid var(--primary);
    padding-left: calc(1.25rem - 3px);
  }

  /* Mobile mega-menu collapsible - light */
  .mega-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-top: none;
    border-left: 3px solid var(--primary);
    padding: 0;
    margin: 0;
    background: #f8f9fa;
    border-radius: 0;
    display: none;
    max-height: 70vh;
    overflow-y: auto;
    width: 100%;
  }
  /* Constrain inner container to drawer width */
  .mega-menu .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  .mega-menu::before { display: none; }
  .nav-item.has-dropdown.open .mega-menu { display: block; }
  .mega-grid { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
  .mega-item { padding: .65rem .9rem; border-radius: 0; }
  .mega-item:hover { background: rgba(227,30,37,.06); transform: none; }
  .mega-icon { width: 30px; height: 30px; font-size: .78rem; }
  .mega-text strong { font-size: .82rem; color: #212529; }
  .mega-text small  { display: none; }
  .mega-footer      { display: none; }

  /* 4-col mega layout → single column on mobile, light */
  .mega-4col-layout {
    display: flex;
    flex-direction: column;
    min-height: unset;
  }
  .mm-intro {
    background: #fff !important;
    border-right: none !important;
    border-bottom: 1px solid #e9ecef;
    padding: 1.1rem 1.25rem;
    gap: .6rem;
  }
  .mm-intro-eyebrow { color: var(--primary) !important; font-size: .65rem; }
  .mm-intro-title   { color: #1a1a2e !important; font-size: 1rem; }
  .mm-intro-desc    { color: #6c757d !important; font-size: .8rem; display: none; }
  .mm-intro-link    {
    font-size: .8rem;
    padding: .45rem .9rem;
    background: rgba(227,30,37,.1) !important;
    border-color: rgba(227,30,37,.2) !important;
    color: var(--primary) !important;
  }
  .mm-links {
    background: transparent !important;
    border-right: none !important;
    border-bottom: 1px solid #e9ecef;
    padding: .85rem 1.25rem;
  }
  .mm-links-label {
    color: #999 !important;
    border-bottom-color: #dee2e6 !important;
    font-size: .65rem;
    margin-bottom: .5rem;
    padding-bottom: .45rem;
  }
  .mm-link-list li a {
    color: #343a40 !important;
    padding: .45rem .4rem;
    font-size: .84rem;
  }
  .mm-link-list li a:hover {
    color: var(--primary) !important;
    background: rgba(227,30,37,.07) !important;
  }
  .mm-link-list li a i { color: #adb5bd !important; }
  .mm-link-list li a:hover i { color: var(--primary) !important; }
  /* Hide image card col on mobile */
  .mm-card { display: none !important; }

  /* Nav CTA in drawer */
  .nav-cta-item {
    padding: 1.25rem 1.25rem;
    margin-left: 0;
    margin-top: .5rem;
    border-top: 1px solid #e9ecef;
  }
  .nav-cta {
    width: 100%;
    justify-content: center;
    margin-left: 0;
    min-height: 44px;
  }

  /* Backdrop */
  .nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1099;
  }
  .nav-backdrop.active { display: block; }

  /* Home page - always white navbar on mobile */
  body[data-page="home"] .site-header .navbar {
    background: rgba(255,255,255,.97) !important;
    border-bottom-color: rgba(0,0,0,.08) !important;
  }

  /* Sections */
  section { padding: 4.5rem 0; }
  .about-split, .story-grid { grid-template-columns: 1fr; gap: 3rem; }
  .about-float-card { display: none; }

  /* Stats strip mobile */
  .stats-strip-grid { grid-template-columns: 1fr 1fr; }
  .stat-block { padding: 2rem 1rem; border-bottom: 1px solid var(--gray-100); }
  .stat-block:nth-child(2) { border-right: 0; }

  /* About split mobile */
  .section-about-split { grid-template-columns: 1fr; }
  .asp-image { min-height: 320px; }
  .asp-badge { bottom: 1.5rem; left: 1.5rem; }
  .asp-badge-year { font-size: 2rem; }
  .asp-kite { width: 80px; }
  .asp-content-inner { padding: 3rem 1.5rem; }
  .asp-mini-stats { grid-template-columns: repeat(3, 1fr); }

  /* Sectors clean mobile */
  .section-sectors-clean { padding: 4rem 0; }
  .sectors-clean-grid { grid-template-columns: 1fr; }
  .sectors-clean-head { flex-direction: column; align-items: flex-start; gap: 1.5rem; margin-bottom: 2rem; }
  .ssc-cta-btn { display: none; }
  .about-features { grid-template-columns: 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .sectors-grid { grid-template-columns: 1fr; }
  .impact-grid  { grid-template-columns: 1fr 1fr; }
  .vmv-grid     { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .form-row     { grid-template-columns: 1fr; }
  .footer-main  { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-bottom .container { flex-direction: column; text-align: center; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
  .hero-cta   { flex-direction: column; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .hero h1 { font-size: clamp(2.2rem, 8vw, 3.2rem); }
  .hero-inner { padding-top: calc(var(--header-height) + 3rem); padding-bottom: 7rem; }
  .stats-bar .container { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  :root { --header-height: 58px; }
  .navbar .nav-logo-img { height: 28px; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .impact-grid { grid-template-columns: 1fr; }
  .sectors-grid { grid-template-columns: 1fr; }
  .cta-section .btn-cta-group { flex-direction: column; align-items: center; }
  .stats-strip-grid { grid-template-columns: 1fr 1fr; }
  .asp-mini-stats { grid-template-columns: 1fr; }
  .asp-mini-stat { border-right: 0; border-bottom: 1px solid var(--gray-100); }
  .asp-mini-stat:last-child { border-bottom: 0; }
  .cta-section .btn-cta-group .btn { width: 100%; max-width: 300px; justify-content: center; }
}

/* 26. THEME TOGGLE + LIGHT THEME
   ============================================================ */

/* ── Toggle button (desktop) ── */
.nav-theme-item { display: flex; align-items: center; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .65rem;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.75);
  font-size: .88rem;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: rgba(255,255,255,.2);
  color: var(--white);
  border-color: rgba(255,255,255,.3);
  transform: rotate(18deg);
}
.theme-toggle-label {
  display: none;
  font-family: var(--font-heading);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  transform: none;
}

/* On scrolled dark header (home) — same as default, no change needed */

/* On inner-page white navbar */
body:not([data-page="home"]) .site-header:not(.scrolled) .theme-toggle {
  background: var(--gray-100);
  border-color: var(--gray-200);
  color: var(--text-mid);
}
body:not([data-page="home"]) .site-header:not(.scrolled) .theme-toggle:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

/* ── Toggle button (mobile drawer) ── */
@media (max-width: 768px) {
  .nav-theme-item {
    border-top: 1px solid #e9ecef;
    padding: 0;
  }
  .theme-toggle {
    width: 100%;
    border-radius: 0;
    background: transparent;
    border: none;
    padding: .9rem 1.25rem;
    color: #495057;
    font-size: .9rem;
    font-family: var(--font-heading);
    font-weight: 600;
    justify-content: flex-start;
    transform: none !important;
  }
  .theme-toggle:hover {
    background: rgba(227,30,37,.06);
    color: var(--primary);
    border-color: transparent;
  }
  .theme-toggle-label { display: block; }
  .theme-toggle i { font-size: .95rem; color: var(--primary); }
}

/* ── Light theme overrides ── */
html.theme-light .section-dark,
html.theme-light .section-journey-preview { background: var(--gray-50) !important; }

html.theme-light .section-dark h2,
html.theme-light .section-dark h3,
html.theme-light .section-dark h4,
html.theme-light .section-journey-preview h2,
html.theme-light .section-journey-preview h3 { color: var(--text-dark); }

html.theme-light .section-dark p,
html.theme-light .section-journey-preview p { color: var(--text-mid); }

html.theme-light .section-dark .section-label,
html.theme-light .section-dark .section-label.light { color: var(--primary); }

html.theme-light .section-dark .section-num,
html.theme-light .section-dark .section-num.light { color: var(--primary); }

html.theme-light .section-dark .section-num::after,
html.theme-light .section-dark .section-num.light::after { opacity: 1; }

/* Brand section */
html.theme-light .brands-section  { background: var(--off-white) !important; }
html.theme-light .brand-card      { background: var(--white) !important; border-color: var(--gray-200) !important; box-shadow: var(--shadow-sm); }
html.theme-light .brand-card h4   { color: var(--text-dark); }
html.theme-light .brand-card p    { color: var(--text-mid); }
html.theme-light .brand-card-footer { border-top-color: var(--gray-100); }
html.theme-light .brand-card-footer > span { color: var(--text-light) !important; }
html.theme-light .brand-logo-img-wrap img  { filter: none; opacity: .85; }
html.theme-light .brand-logo-icon  { background: var(--gray-100) !important; border-color: var(--gray-200) !important; }
html.theme-light .brand-badge     { background: var(--gray-50) !important; border-color: var(--gray-200) !important; color: var(--text-mid) !important; }
html.theme-light .category-header { border-bottom-color: var(--gray-200); }
html.theme-light .category-header h2,
html.theme-light .category-header h2.js-reveal { color: var(--text-dark); }
html.theme-light .category-icon-lg { background: var(--gray-100) !important; }
html.theme-light .category-header .cat-count { background: var(--gray-100); border-color: var(--gray-200); color: var(--text-mid); }

/* Filter bar */
html.theme-light .filter-bar  { background: var(--white) !important; border-bottom-color: var(--gray-200) !important; }
html.theme-light .filter-tab  { color: var(--text-mid); background: var(--gray-50); border-color: var(--gray-200); }
html.theme-light .filter-tab:hover { background: var(--gray-100); color: var(--text-dark); }

/* Stats bar */
html.theme-light .stats-bar   { background: var(--white) !important; border-color: var(--gray-200) !important; }
html.theme-light .stat-item   { background: var(--white) !important; }
html.theme-light .stat-label  { color: var(--text-mid); }

/* Journey cards */
html.theme-light .journey-card { background: var(--white); border-color: var(--gray-200); }
html.theme-light .j-title     { color: var(--text-dark); }
html.theme-light .j-desc      { color: var(--text-mid); }

/* Impact section (home — class is section-impact, not impact-section) */
html.theme-light .section-impact          { background: var(--gray-50) !important; }
html.theme-light .section-impact h2       { color: var(--text-dark) !important; }
html.theme-light .impact-grid             { background: var(--gray-100) !important; border-color: var(--gray-200) !important; }
html.theme-light .impact-item             { background: var(--white) !important; }
html.theme-light .impact-item:hover       { background: var(--gray-50) !important; }
html.theme-light .impact-label            { color: var(--text-mid); }
html.theme-light .impact-desc             { color: var(--text-light); }
html.theme-light .section-impact .section-num,
html.theme-light .section-impact .section-num.light { color: var(--primary); }
html.theme-light .section-impact .section-num::after,
html.theme-light .section-impact .section-num.light::after { opacity: 1; }

/* Section-journey-preview — section-num.light fix */
html.theme-light .section-journey-preview .section-num,
html.theme-light .section-journey-preview .section-num.light { color: var(--primary); }
html.theme-light .section-journey-preview .section-num::after,
html.theme-light .section-journey-preview .section-num.light::after { opacity: 1; }

/* About — "Why SAM" dark-section inline-styled cards */
html.theme-light .about-why-cards > div  { background: var(--white) !important; border-color: var(--gray-200) !important; }
html.theme-light .about-why-cards h4     { color: var(--text-dark) !important; }
html.theme-light .about-why-cards p      { color: var(--text-mid) !important; }

/* Map embed — revert dark-filter in light mode so the map shows normally */
html.theme-light .map-embed-wrap iframe  { filter: none; }

/* bg-word ghost text on formerly-dark sections in light mode */
html.theme-light .section-dark[data-bg-word]::before,
html.theme-light .section-journey-preview[data-bg-word]::before,
html.theme-light .section-impact[data-bg-word]::before {
  -webkit-text-stroke: 1px rgba(0,0,0,.04);
  text-stroke: 1px rgba(0,0,0,.04);
}

/* Toggle button in light mode */
html.theme-light .theme-toggle {
  background: var(--dark-700);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.7);
}
html.theme-light .theme-toggle:hover {
  background: var(--dark-500);
  color: var(--white);
}
html.theme-light body:not([data-page="home"]) .site-header:not(.scrolled) .theme-toggle {
  background: var(--dark-700);
  border-color: rgba(255,255,255,.1);
  color: rgba(255,255,255,.65);
}
html.theme-light body:not([data-page="home"]) .site-header:not(.scrolled) .theme-toggle:hover {
  background: var(--dark-500);
  color: var(--white);
}
@media (max-width: 768px) {
  html.theme-light .theme-toggle { color: rgba(255,255,255,.45); }
  html.theme-light .theme-toggle:hover { background: rgba(255,255,255,.08); color: var(--white); }
}

/* ═══════════════════════════════════════════════════════
   SECTION 28 — DARK MODE BASE
   Default state = dark; html.theme-light = light override
   ═══════════════════════════════════════════════════════ */

/* Body — dark by default */
html:not(.theme-light) body {
  background: var(--dark-900);
  color: rgba(255,255,255,.8);
}

/* Redefine shared text tokens for dark mode so every page auto-adapts */
html:not(.theme-light) {
  --text-primary:   rgba(255,255,255,.90);
  --text-secondary: rgba(255,255,255,.65);
  --text-muted:     rgba(255,255,255,.42);
}

/* Sections with explicit white / gray-50 backgrounds */
html:not(.theme-light) .stats-strip            { background: var(--dark-800) !important; border-bottom-color: rgba(255,255,255,.06) !important; }
html:not(.theme-light) .stat-block             { border-right-color: rgba(255,255,255,.06) !important; }
html:not(.theme-light) .stat-label             { color: rgba(255,255,255,.7) !important; }
html:not(.theme-light) .stat-sub               { color: rgba(255,255,255,.4) !important; }
html:not(.theme-light) .section-bg             { background: var(--dark-800) !important; }
html:not(.theme-light) .section-sectors-clean  { background: var(--dark-800) !important; }
/* section-brands is always dark (#0d1117) - no theme override needed */
html:not(.theme-light) .asp-content            { background: var(--dark-800) !important; }
html:not(.theme-light) .asp-mini-stats         { border-color: rgba(255,255,255,.08) !important; }
html:not(.theme-light) .asp-mini-stat          { background: var(--dark-700) !important; border-right-color: rgba(255,255,255,.08) !important; }
html:not(.theme-light) .asp-mini-stat span     { color: rgba(255,255,255,.5) !important; }
html:not(.theme-light) .asp-feature h4         { color: rgba(255,255,255,.9) !important; }
html:not(.theme-light) .asp-feature p          { color: rgba(255,255,255,.6) !important; }

/* Section typography */
html:not(.theme-light) .section-sub            { color: rgba(255,255,255,.6) !important; }

/* Cards */
html:not(.theme-light) .timeline-content {
  background: var(--dark-700) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
html:not(.theme-light) .timeline-title         { color: rgba(255,255,255,.92) !important; }
html:not(.theme-light) .timeline-body          { color: rgba(255,255,255,.6) !important; }
html:not(.theme-light) .milestone-badge        { background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.7) !important; }

html:not(.theme-light) .vmv-card {
  background: var(--dark-700) !important;
  border-color: rgba(255,255,255,.08) !important;
}
html:not(.theme-light) .vmv-card h3            { color: rgba(255,255,255,.92) !important; }
html:not(.theme-light) .values-list li         { color: rgba(255,255,255,.65) !important; }

html:not(.theme-light) .cat-card {
  background: var(--dark-700) !important;
  border-color: rgba(255,255,255,.08) !important;
}
html:not(.theme-light) .cat-card h3            { color: rgba(255,255,255,.92) !important; }
html:not(.theme-light) .cat-card p             { color: rgba(255,255,255,.6) !important; }

html:not(.theme-light) .sector-tile {
  background: var(--dark-700) !important;
  border-color: rgba(255,255,255,.08) !important;
}
html:not(.theme-light) .sector-tile h3         { color: rgba(255,255,255,.92) !important; }
html:not(.theme-light) .sector-tile p          { color: rgba(255,255,255,.6) !important; }
html:not(.theme-light) .sector-tile-footer     { border-top-color: rgba(255,255,255,.06) !important; }
html:not(.theme-light) .sector-brand-count     { color: rgba(255,255,255,.45) !important; }

html:not(.theme-light) .brand-logo-pill        { background: var(--dark-800) !important; }

html:not(.theme-light) .leader-quote           { background: var(--dark-700) !important; border-left-color: var(--primary); }
html:not(.theme-light) .leader-quote p         { color: rgba(255,255,255,.65) !important; }
html:not(.theme-light) .leader-quote cite      { color: rgba(255,255,255,.5) !important; }

/* Contact form card */
html:not(.theme-light) .contact-form-card {
  background: var(--dark-700) !important;
  border-color: rgba(255,255,255,.08) !important;
}
html:not(.theme-light) .contact-form-card h3   { color: rgba(255,255,255,.92) !important; }
html:not(.theme-light) .contact-form-card > p  { color: rgba(255,255,255,.55) !important; }

/* Form inputs */
html:not(.theme-light) .form-group label       { color: rgba(255,255,255,.7) !important; }
html:not(.theme-light) .form-group input,
html:not(.theme-light) .form-group select,
html:not(.theme-light) .form-group textarea {
  background: var(--dark-600) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.85) !important;
}
html:not(.theme-light) .form-group input::placeholder,
html:not(.theme-light) .form-group textarea::placeholder { color: rgba(255,255,255,.3) !important; }

/* Contact info */
html:not(.theme-light) .contact-info-item h4   { color: rgba(255,255,255,.9) !important; }
html:not(.theme-light) .contact-info-item p,
html:not(.theme-light) .contact-info-item a    { color: rgba(255,255,255,.55) !important; }
html:not(.theme-light) .contact-info-item a:hover { color: var(--white) !important; }

/* Contact — inline-styled elements (classes added via HTML) */
html:not(.theme-light) .contact-location-box   { background: var(--dark-700) !important; border-color: rgba(255,255,255,.08) !important; }
html:not(.theme-light) .contact-location-box h4 { color: rgba(255,255,255,.85) !important; }
html:not(.theme-light) .contact-location-box span { background: var(--dark-600) !important; border-color: rgba(255,255,255,.1) !important; color: rgba(255,255,255,.6) !important; }
html:not(.theme-light) .contact-social-pills a  { background: var(--dark-600) !important; color: rgba(255,255,255,.65) !important; }
html:not(.theme-light) .contact-quick-cards > div { background: var(--dark-700) !important; border-color: rgba(255,255,255,.08) !important; box-shadow: none !important; }
html:not(.theme-light) .contact-quick-cards h4   { color: rgba(255,255,255,.9) !important; }
html:not(.theme-light) .contact-quick-cards p    { color: rgba(255,255,255,.6) !important; }

/* Navbar — inner pages use white navbar; make dark in dark mode */
html:not(.theme-light) body:not([data-page="home"]) .navbar {
  background: rgba(5,10,22,.95) !important;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-bottom-color: rgba(255,255,255,.07) !important;
}
html:not(.theme-light) body:not([data-page="home"]) .site-header .nav-link       { color: rgba(255,255,255,.8); }
html:not(.theme-light) body:not([data-page="home"]) .site-header .nav-link:hover  { color: var(--white); background: rgba(255,255,255,.08); }
html:not(.theme-light) body:not([data-page="home"]) .site-header .toggle-bar      { background: rgba(255,255,255,.85); }
html:not(.theme-light) body:not([data-page="home"]) .site-header:not(.scrolled) .theme-toggle {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.75) !important;
}

/* ═══════════════════════════════════════════════════════
   SECTION 29 — NEW VISUAL COMPONENTS
   Complementary color, image bands, accent strips
   ═══════════════════════════════════════════════════════ */

/* ── Visual full-width image band ── */
.visual-band {
  position: relative;
  overflow: hidden;
  min-height: 440px;
  display: flex;
  align-items: center;
}
.visual-band-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 8s ease;
}
.visual-band:hover .visual-band-img { transform: scale(1.04); }
.visual-band-overlay {
  position: absolute;
  inset: 0;
}
.visual-band-overlay.deep {
  background: linear-gradient(135deg, rgba(10,2,4,.97) 0%, rgba(30,5,10,.92) 50%, rgba(2,8,22,.90) 100%);
}
.visual-band-overlay.side-left {
  background: linear-gradient(90deg, rgba(87,10,16,.95) 0%, rgba(87,10,16,.8) 35%, rgba(87,10,16,.35) 65%, transparent 100%);
}
.visual-band-overlay.dark {
  background: linear-gradient(180deg, rgba(2,8,20,.55) 0%, rgba(2,8,20,.75) 100%);
}
.visual-band-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* ── Feature image grid ── */
.feat-img-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 1rem;
  height: 360px;
}
.feat-img-cell {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.feat-img-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.feat-img-cell:hover img { transform: scale(1.07); }
.feat-img-caption {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(87,10,16,.88) 0%, rgba(227,30,37,.18) 50%, transparent 100%);
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
}
.feat-img-caption h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--white);
  margin-bottom: .25rem;
}
.feat-img-caption p {
  font-size: .8rem;
  color: rgba(255,255,255,.72);
  margin: 0;
}
.feat-img-cell-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--grad-brand);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .3rem .7rem;
  border-radius: var(--radius-full);
}

/* ── Accent strip (rich gradient) ── */
.accent-strip {
  background: var(--grad-rich);
  padding: 3.5rem 0;
  position: relative;
  overflow: hidden;
}
.accent-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(255,255,255,.07) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 50%, rgba(255,255,255,.05) 0%, transparent 50%);
  pointer-events: none;
}
.accent-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.14);
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.accent-strip-item {
  background: rgba(255,255,255,.05);
  padding: 2.5rem 2rem;
  text-align: center;
  color: var(--white);
  transition: background var(--duration);
}
.accent-strip-item:hover { background: rgba(255,255,255,.12); }
.accent-strip-num {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: .4rem;
  letter-spacing: -.02em;
}
.accent-strip-label {
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.68);
}
.accent-strip-sub {
  font-size: .78rem;
  color: rgba(255,255,255,.45);
  margin-top: .3rem;
}

/* ── Quote / highlight bar ── */
.quote-bar {
  background: var(--complementary);
  padding: 2.5rem 0;
  position: relative;
  overflow: hidden;
}
.quote-bar::before {
  content: '\201C';
  position: absolute;
  top: -2rem;
  left: 2rem;
  font-size: 14rem;
  font-family: Georgia, serif;
  color: rgba(255,255,255,.04);
  line-height: 1;
  pointer-events: none;
}
.quote-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--complementary-dark) 0%, var(--complementary) 50%, var(--complementary-mid) 100%);
  opacity: .7;
  pointer-events: none;
}
.quote-bar-inner {
  position: relative;
  z-index: 2;
  text-align: center;
}
.quote-bar-text {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 700;
  color: var(--white);
  max-width: 820px;
  margin: 0 auto;
  line-height: 1.55;
  letter-spacing: -.01em;
}
.quote-bar-source {
  margin-top: .85rem;
  font-size: .82rem;
  color: rgba(255,255,255,.5);
  font-weight: 500;
}

/* ── Image + color stat panel split ── */
.img-stat-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 460px;
  overflow: hidden;
}
.img-stat-photo {
  position: relative;
  overflow: hidden;
}
.img-stat-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 8s ease;
}
.img-stat-split:hover .img-stat-photo img { transform: scale(1.04); }
.img-stat-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(87,10,16,.35) 0%, rgba(227,30,37,.12) 100%);
}
.img-stat-panel {
  background: var(--grad-deep);
  padding: 5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.img-stat-panel::before {
  content: '';
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 300px;
  height: 300px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.05);
}
.img-stat-panel::after {
  content: '';
  position: absolute;
  top: -50px;
  left: -50px;
  width: 200px;
  height: 200px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.04);
}
.img-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  position: relative;
  z-index: 2;
  margin-top: 2.5rem;
}
.img-stat-item { color: var(--white); }
.img-stat-num {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: .3rem;
  letter-spacing: -.02em;
}
.img-stat-label {
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.58);
}

/* ── Color trio bar (decorative) ── */
.color-trio-bar {
  display: flex;
  height: 5px;
  border-radius: var(--radius-full);
  overflow: hidden;
  margin: 0 0 2.5rem;
  width: 120px;
}
.color-trio-bar span { flex: 1; }
.color-trio-bar span:nth-child(1) { background: var(--complementary); }
.color-trio-bar span:nth-child(2) { background: var(--primary); }
.color-trio-bar span:nth-child(3) { background: var(--secondary); }

/* ── Complementary-colored CTA pill ── */
.btn-deep {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 2rem;
  background: var(--complementary);
  color: var(--white);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--duration) var(--ease);
  box-shadow: var(--shadow-glow-deep);
}
.btn-deep:hover {
  background: var(--complementary-dark);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(87,10,16,.65);
}

/* ── Page-hero with richer overlay ── */
.page-hero-img-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg,
    rgba(87,10,16,.62) 0%,
    rgba(227,30,37,.38) 40%,
    rgba(4,160,224,.22) 100%);
}
.page-hero-content { z-index: 2; }

/* ── Section accent border top ── */
.section-accent-top {
  border-top: 4px solid;
  border-image: var(--grad-rich) 1;
}

/* Responsive */
@media (max-width: 900px) {
  .feat-img-row          { grid-template-columns: 1fr 1fr; height: 280px; }
  .feat-img-row .feat-img-cell:last-child { display: none; }
  .accent-strip-grid     { grid-template-columns: repeat(2, 1fr); }
  .img-stat-split        { grid-template-columns: 1fr; }
  .img-stat-photo        { min-height: 280px; }
  .img-stat-panel        { padding: 3.5rem 2.5rem; }
}
@media (max-width: 600px) {
  .feat-img-row          { grid-template-columns: 1fr; height: auto; }
  .feat-img-cell         { height: 220px; }
  .feat-img-row .feat-img-cell:nth-child(2),
  .feat-img-row .feat-img-cell:last-child { display: none; }
  .accent-strip-grid     { grid-template-columns: 1fr 1fr; }
  .accent-strip-item     { padding: 1.75rem 1rem; }
  .accent-strip-num      { font-size: 2rem; }
  .img-stat-grid         { grid-template-columns: 1fr 1fr; }
  .img-stat-panel        { padding: 3rem 1.75rem; }
}

/* Light mode — new components stay colored/dark (intentional brand elements) */
html.theme-light .btn-deep              { background: var(--complementary); color: var(--white); }
html.theme-light .feat-img-cell-badge   { color: var(--white); }

/* Light mode — inline dark-bg sections become light */
html.theme-light section[style*="background:var(--dark-900)"] {
  background: var(--gray-50) !important;
}

/* ══════════════════════════════════════════════════
   § 30 — Journey v2 Timeline  (.jv2-*)
══════════════════════════════════════════════════ */

.jv2-section { padding: 6rem 0; position: relative; overflow: hidden; }

/* Vertical gradient spine */
.jv2-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
}
.jv2-timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    var(--complementary) 0%,
    var(--primary) 35%,
    var(--secondary) 62%,
    var(--primary) 82%,
    var(--complementary) 100%);
  z-index: 0;
}

/* Each milestone row: left-card | node | right-card */
.jv2-chapter {
  display: grid;
  grid-template-columns: 1fr 100px 1fr;
  align-items: center;
  position: relative;
  z-index: 1;
  margin-bottom: 3.5rem;
}
.jv2-chapter:last-child { margin-bottom: 0; }

/* Center node cell */
.jv2-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Circular node */
.jv2-node {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--era-color, var(--primary));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--white);
  text-align: center;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  box-shadow: 0 0 0 5px var(--white), 0 0 0 8px var(--era-color, var(--primary)), 0 8px 24px rgba(0,0,0,.2);
}
.jv2-node i { font-size: 1.2rem; line-height: 1; }
.jv2-node-year {
  font-size: .6rem;
  font-weight: 800;
  margin-top: .2rem;
  letter-spacing: .03em;
  opacity: .9;
}

/* Card side cells */
.jv2-left  { padding: 0 2rem 0 0; }
.jv2-right { padding: 0 0 0 2rem; }

/* Milestone card */
.jv2-card {
  background: var(--white);
  border-radius: 14px;
  padding: 1.75rem 1.75rem 1.5rem;
  border: 1px solid var(--gray-200);
  border-top: 4px solid var(--era-color, var(--primary));
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
  transition: transform .3s, box-shadow .3s;
}
.jv2-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.13);
}

/* Ghost year watermark */
.jv2-card::after {
  content: attr(data-year);
  position: absolute;
  bottom: -.5rem;
  right: .75rem;
  font-size: 5.5rem;
  font-weight: 800;
  color: var(--era-color, var(--primary));
  opacity: .055;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* Era badge */
.jv2-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .28rem .8rem;
  border-radius: 999px;
  border: 1.5px solid var(--era-color, var(--primary));
  color: var(--era-color, var(--primary));
  margin-bottom: .9rem;
}

/* Year number */
.jv2-year {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: .4rem;
  background: linear-gradient(135deg, var(--era-color, var(--primary)) 0%, var(--secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Title & body */
.jv2-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: .5rem;
  line-height: 1.4;
}
.jv2-body {
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin: 0;
}

/* Featured card (founding & milestone) */
.jv2-card.jv2-feat {
  background: linear-gradient(135deg, var(--complementary-dark) 0%, var(--primary) 55%, #0f4c75 100%);
  border: none;
  color: var(--white);
}
.jv2-card.jv2-feat::after { color: rgba(255,255,255,.07); opacity: 1; }
.jv2-card.jv2-feat .jv2-badge {
  border-color: rgba(255,255,255,.4);
  color: rgba(255,255,255,.9);
}
.jv2-card.jv2-feat .jv2-year {
  background: none;
  -webkit-text-fill-color: rgba(255,255,255,.95);
  color: rgba(255,255,255,.95);
}
.jv2-card.jv2-feat .jv2-title { color: var(--white); }
.jv2-card.jv2-feat .jv2-body  { color: rgba(255,255,255,.75); }

/* Image break divider */
.jv2-img-break {
  position: relative;
  height: 260px;
  overflow: hidden;
  border-radius: 18px;
  margin: 4rem auto;
}
.jv2-img-break img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.48);
}
.jv2-img-break-over {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    rgba(87,10,16,.78) 0%,
    rgba(227,30,37,.42) 45%,
    rgba(4,160,224,.22) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}
.jv2-img-break-over h3 {
  color: var(--white);
  font-size: 1.8rem;
  font-weight: 800;
  margin: 0 0 .4rem;
}
.jv2-img-break-over p {
  color: rgba(255,255,255,.75);
  font-size: .95rem;
  margin: 0;
}

/* Dark mode overrides */
html:not(.theme-light) .jv2-card {
  background: var(--dark-700) !important;
  border-color: rgba(255,255,255,.08) !important;
}
html:not(.theme-light) .jv2-card .jv2-title { color: rgba(255,255,255,.9); }
html:not(.theme-light) .jv2-card .jv2-body  { color: rgba(255,255,255,.55); }
html:not(.theme-light) .jv2-node {
  box-shadow: 0 0 0 5px var(--dark-900), 0 0 0 8px var(--era-color, var(--primary)), 0 8px 24px rgba(0,0,0,.4);
}
html:not(.theme-light) .jv2-card.jv2-feat {
  background: linear-gradient(135deg, var(--complementary-dark) 0%, var(--primary) 55%, var(--dark-600) 100%) !important;
  border-color: transparent !important;
}

/* Responsive — tablet */
@media (max-width: 860px) {
  .jv2-timeline::before { left: 36px; transform: none; }
  .jv2-chapter           { grid-template-columns: 72px 1fr; }
  .jv2-center            { grid-column: 1; grid-row: 1; }
  .jv2-left,
  .jv2-right             { grid-column: 2; grid-row: 1; padding: 0 0 0 1.25rem; }
  .jv2-spacer            { display: none; }
  .jv2-node              { width: 64px; height: 64px; }
  .jv2-img-break         { height: 210px; margin: 3rem 0; border-radius: 12px; }
  .jv2-img-break-over h3 { font-size: 1.4rem; }
}
@media (max-width: 480px) {
  .jv2-chapter    { grid-template-columns: 56px 1fr; margin-bottom: 2.5rem; }
  .jv2-timeline::before { left: 28px; }
  .jv2-node       { width: 52px; height: 52px; }
  .jv2-node i     { font-size: 1rem; }
  .jv2-node-year  { font-size: .55rem; }
  .jv2-card       { padding: 1.25rem; }
  .jv2-year       { font-size: 1.6rem; }
}

/* ============================================================
   SAM GROUP v2 — CORPORATE REDESIGN ADDITIONS
   Logo switching · Mega menu · New sections · Light theme
   ============================================================ */

/* Always light theme - logo.png only, no dark-logo switching */
.nav-logo-img { display: block; }

/* Home page navbar - always white, dark nav links */
body[data-page="home"] .site-header:not(.scrolled) .navbar {
  background: rgba(255,255,255,.95) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,.08) !important;
}
body[data-page="home"] .site-header:not(.scrolled) .nav-link { color: var(--dark-900) !important; }
body[data-page="home"] .site-header:not(.scrolled) .nav-link:hover { color: var(--primary) !important; background: rgba(0,0,0,.05) !important; }
body[data-page="home"] .site-header:not(.scrolled) .toggle-bar { background: var(--dark-900) !important; }

/* MEGA MENU v2 — layout with image panel */
.mega-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 0;
  min-height: 400px;
}
.mega-left {
  padding: 1.75rem 2rem 1.5rem;
  border-right: 1px solid var(--gray-100);
}
.mega-right {
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--gray-50);
  border-radius: 0 0 var(--radius-xl) 0;
}
.mega-section-label {
  font-family: var(--font-heading);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: .85rem;
}
.mega-arrow {
  margin-left: auto;
  font-size: .6rem;
  color: var(--text-light);
  opacity: 0;
  transform: translateX(-4px);
  transition: all var(--duration);
  flex-shrink: 0;
}
.mega-item:hover .mega-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--primary);
}
.mega-feat-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  background: var(--white);
  transition: all var(--duration);
  color: var(--text-dark);
  text-decoration: none;
}
.mega-feat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.mega-feat-img {
  position: relative;
  height: 110px;
  overflow: hidden;
}
.mega-feat-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease);
}
.mega-feat-card:hover .mega-feat-img img { transform: scale(1.05); }
.mega-feat-badge {
  position: absolute;
  top: .6rem; left: .6rem;
  background: var(--primary);
  color: var(--white);
  font-size: .65rem;
  font-weight: 700;
  font-family: var(--font-heading);
  padding: .25rem .6rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: .3rem;
}
.mega-feat-body { padding: .85rem; }
.mega-feat-cat {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary);
  display: block;
  margin-bottom: .3rem;
}
.mega-feat-body h4 {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.35;
  margin-bottom: .3rem;
}
.mega-feat-body p {
  font-size: .72rem;
  color: var(--text-light);
  line-height: 1.5;
  margin-bottom: .5rem;
}
.mega-feat-link {
  font-size: .72rem;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  transition: gap var(--duration);
}
.mega-feat-card:hover .mega-feat-link { gap: .55rem; }

/* Dark mega overrides when header scrolled on home */
body[data-page="home"] .site-header.scrolled .mega-left { border-right-color: rgba(255,255,255,.08); }
body[data-page="home"] .site-header.scrolled .mega-right { background: var(--dark-800); }
body[data-page="home"] .site-header.scrolled .mega-section-label { color: rgba(255,255,255,.35); }
body[data-page="home"] .site-header.scrolled .mega-feat-card { background: var(--dark-700); border-color: rgba(255,255,255,.08); }
body[data-page="home"] .site-header.scrolled .mega-feat-body h4 { color: var(--white); }
body[data-page="home"] .site-header.scrolled .mega-feat-body p { color: rgba(255,255,255,.5); }

/* HOME PAGE - no page-offset, hero covers full screen */
.page-home { /* main wrapper for home page */ }
body[data-page="home"] { background: var(--dark-900); }

/* LIGHT THEME HEADER OVERRIDES */
html.theme-light .navbar { background: rgba(255,255,255,.97); }
html.theme-light .nav-link { color: var(--gray-700); }
html.theme-light body[data-page="home"] .site-header .navbar {
  background: rgba(255,255,255,.97) !important;
  border-bottom-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,.06) !important;
}
html.theme-light body[data-page="home"] .site-header .nav-link { color: var(--dark-900) !important; }
html.theme-light body[data-page="home"] .site-header .toggle-bar { background: var(--dark-900) !important; }
html.theme-light body[data-page="home"] .site-header.scrolled .nav-link { color: var(--gray-700); }
html.theme-light body[data-page="home"] .site-header.scrolled .nav-link:hover { color: var(--primary); }
html.theme-light body[data-page="home"] .site-header.scrolled .nav-logo-dark { display: none !important; }
html.theme-light body[data-page="home"] .site-header.scrolled .nav-logo-light { display: block !important; }
html.theme-light body[data-page="home"] .site-header.scrolled .toggle-bar { background: var(--gray-700); }
html.theme-light body[data-page="home"] .site-header.scrolled .mega-menu { background: var(--white); }
html.theme-light body[data-page="home"] .site-header.scrolled .mega-right { background: var(--gray-50); }
html.theme-light body[data-page="home"] .site-header.scrolled .mega-feat-card { background: var(--white); border-color: var(--gray-200); }
html.theme-light body[data-page="home"] .site-header.scrolled .mega-feat-body h4 { color: var(--text-dark); }
html.theme-light body[data-page="home"] .site-header.scrolled .mega-feat-body p { color: var(--text-light); }

/* LIGHT THEME BODY SECTION OVERRIDES */
html.theme-light .stats-strip { background: var(--white); }
html.theme-light .section-sectors-clean { background: var(--gray-50); }
html.theme-light .sector-tile { background: var(--white); border: 1px solid var(--gray-200); }
html.theme-light .sector-tile h3 { color: var(--text-dark); }
/* section-brands is always dark - light-theme keeps dark bg too */
html.theme-light .section-insights { background: var(--gray-50); }
html.theme-light .insight-card { background: var(--white); border-color: var(--gray-200); }
html.theme-light .section-news { background: var(--white); }
html.theme-light .news-card { background: var(--white); border-color: var(--gray-200); }
html.theme-light .section-success { background: var(--gray-50); }
html.theme-light .success-card { background: var(--white); border-color: var(--gray-200); }
html.theme-light .section-video-showcase { background: var(--white); }
html.theme-light .section-scale { background: var(--white); }
html.theme-light .theme-toggle { color: var(--gray-700); }
html.theme-light .cta-section { background: var(--dark-900); }

/* HERO v2 */
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(155deg,
    rgba(2,8,20,.9) 0%,
    rgba(2,8,20,.65) 40%,
    rgba(87,10,16,.5) 70%,
    rgba(2,8,20,.85) 100%
  );
}
.hero-shapes { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-shape { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .15; }
.hero-shape-1 {
  width: 600px; height: 600px; background: var(--primary);
  top: -200px; right: -100px;
  animation: shapePulse 8s ease-in-out infinite alternate;
}
.hero-shape-2 {
  width: 500px; height: 500px; background: var(--secondary);
  bottom: -150px; left: -100px;
  animation: shapePulse 10s ease-in-out infinite alternate-reverse;
}
@keyframes shapePulse {
  0%   { transform: scale(1) translate(0,0); }
  100% { transform: scale(1.2) translate(30px,-30px); }
}
.hero-trust {
  display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem;
}
.hero-trust-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,.8);
  font-size: .78rem; font-family: var(--font-heading); font-weight: 600;
  padding: .4rem 1rem; border-radius: var(--radius-full); letter-spacing: .02em;
}
.hero-trust-pill i { color: var(--primary); font-size: .75rem; }
.hero-bottom-fade {
  position: absolute; bottom: 0; left: 0; right: 0; height: 120px; z-index: 2;
  background: linear-gradient(to bottom, transparent, var(--dark-900));
  pointer-events: none;
}
.hero-yt-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-yt-wrap iframe {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: max(100%, calc(100vh * 1.778));
  height: max(100%, calc(100vw * .5625));
  pointer-events: none;
}

/* STATS v2 */
.stat-icon {
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  background: var(--primary-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; margin: 0 auto 1rem;
  transition: all var(--duration);
}
.stat-block:hover .stat-icon { background: var(--primary); color: var(--white); transform: scale(1.1); }

/* SCALE AT SPEED */
.section-scale { overflow: hidden; background: var(--white); }
.scale-inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; }
.scale-content {
  padding: 5rem 3rem 5rem max(var(--gutter), calc((100vw - 1280px) / 2 + var(--gutter)));
  display: flex; flex-direction: column; justify-content: center;
}
.scale-label {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-heading); font-size: .75rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--primary); margin-bottom: 1rem;
}
.scale-label-line { width: 24px; height: 2px; background: var(--grad-brand); border-radius: var(--radius-full); flex-shrink: 0; }
.scale-heading {
  font-size: clamp(2.2rem,4.5vw,3.6rem); font-weight: 800; line-height: 1.05;
  color: var(--text-dark); margin-bottom: 1.25rem;
}
.scale-heading sup { font-size: .45em; color: var(--primary); vertical-align: super; }
.scale-heading span { color: var(--primary); }
.scale-desc { color: var(--text-mid); font-size: 1rem; line-height: 1.8; max-width: 440px; margin-bottom: 2rem; }
.scale-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
.scale-image { position: relative; overflow: hidden; clip-path: polygon(8% 0,100% 0,100% 100%,0 100%); }
.scale-img-wrap { width: 100%; height: 100%; position: relative; }
.scale-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.scale-image:hover .scale-img-wrap img { transform: scale(1.04); }
.scale-img-wrap::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(135deg, rgba(227,30,37,.35) 0%, transparent 60%);
}
.scale-img-badge {
  position: absolute; bottom: 2rem; left: 2rem; z-index: 2;
  background: var(--grad-brand); color: var(--white);
  padding: 1rem 1.5rem; border-radius: var(--radius-md); box-shadow: var(--shadow-glow-red);
}
.scale-badge-num { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 800; line-height: 1; }
.scale-badge-txt { font-size: .75rem; opacity: .85; margin-top: .2rem; }

/* VISION / BIG THINKERS */
.section-vision {
  background: var(--complementary-dark); padding: 6rem 0;
  position: relative; overflow: hidden;
}
.section-vision::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 80% at 0% 50%, rgba(227,30,37,.25) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 100% 20%, rgba(4,160,224,.12) 0%, transparent 50%);
}
.vision-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; position: relative; z-index: 1; }
.vision-eyebrow { margin-bottom: 1.25rem; }
.vision-eyebrow-tag {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-heading); font-size: .7rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.15); padding: .4rem 1rem; border-radius: var(--radius-full);
}
.vision-eyebrow-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.vision-heading { font-size: clamp(1.7rem,3vw,2.5rem); color: var(--white); line-height: 1.2; margin-bottom: 1.25rem; }
.vision-desc { color: rgba(255,255,255,.6); font-size: 1rem; line-height: 1.85; margin-bottom: 1.75rem; }
.vision-author {
  display: flex; align-items: center; gap: 1rem;
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem;
}
.vision-author-avatar {
  width: 48px; height: 48px; border-radius: 50%; background: var(--grad-brand);
  display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.2rem; flex-shrink: 0;
}
.vision-author strong { display: block; color: var(--white); font-family: var(--font-heading); font-size: .9rem; font-weight: 700; }
.vision-author span { font-size: .78rem; color: rgba(255,255,255,.5); }
.vision-image { position: relative; }
.vision-img-frame { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,.5); }
.vision-img-frame img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; }
.vision-img-decor-1 { position: absolute; inset: -6px; border: 2px solid rgba(227,30,37,.3); border-radius: calc(var(--radius-xl) + 6px); pointer-events: none; }
.vision-img-decor-2 { position: absolute; inset: -14px; border: 1px solid rgba(255,255,255,.06); border-radius: calc(var(--radius-xl) + 14px); pointer-events: none; }
.vision-stat-float {
  position: absolute; bottom: -1.5rem; right: -1.5rem;
  background: var(--grad-brand); color: var(--white);
  padding: 1.25rem 1.75rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-glow-red); text-align: center;
}
.vsf-num { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 800; line-height: 1; }
.vsf-txt { font-size: .72rem; opacity: .85; margin-top: .2rem; }

/* VIDEO SHOWCASE */
.section-video-showcase { background: var(--white); padding: 6rem 0; position: relative; }
.video-showcase-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.vs-thumb-wrap {
  position: relative; border-radius: var(--radius-xl); overflow: hidden; cursor: pointer;
  box-shadow: 0 24px 64px rgba(0,0,0,.18); transition: box-shadow var(--duration); aspect-ratio: 16/9;
}
.vs-thumb-wrap:hover { box-shadow: 0 32px 80px rgba(0,0,0,.28); }
.vs-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.vs-thumb-wrap:hover .vs-thumb-img { transform: scale(1.04); }
.vs-overlay { position: absolute; inset: 0; background: linear-gradient(135deg,rgba(87,10,16,.55) 0%,rgba(2,8,20,.45) 100%); transition: opacity var(--duration); }
.vs-thumb-wrap:hover .vs-overlay { opacity: .7; }
.vs-play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 72px; height: 72px; border-radius: 50%; background: var(--primary); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
  box-shadow: 0 8px 32px rgba(227,30,37,.6); transition: all var(--duration) var(--ease-spring);
  padding-left: 4px; border: none; cursor: pointer;
}
.vs-thumb-wrap:hover .vs-play-btn { transform: translate(-50%,-50%) scale(1.12); box-shadow: 0 12px 48px rgba(227,30,37,.7); }
.vs-thumb-shape { position: absolute; background: var(--grad-brand); opacity: .15; clip-path: polygon(0 0,100% 0,85% 100%,0% 100%); pointer-events: none; }
.vs-ts-1 { width: 80px; height: 100%; right: 0; top: 0; }
.vs-ts-2 { width: 60px; height: 100%; right: 55px; top: 0; opacity: .08; }
.vs-caption { text-align: center; font-size: .78rem; color: var(--text-light); margin-top: 1rem; }

/* Video Modal */
.video-modal {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 9000;
  align-items: center; justify-content: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.video-modal.active { display: flex; animation: fadeIn .25s var(--ease); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.video-modal-box { position: relative; width: 90vw; max-width: 900px; animation: modalIn .3s var(--ease); }
@keyframes modalIn { from { transform: scale(.92) translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.video-modal-close {
  position: absolute; top: -44px; right: 0; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.1); color: var(--white); font-size: 1rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--duration); border: none;
}
.video-modal-close:hover { background: var(--primary); }
.video-modal-iframe-wrap { position: relative; padding-bottom: 56.25%; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.video-modal-iframe-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* LATEST INSIGHTS */
.section-insights { background: var(--gray-50); padding: 6rem 0; }
.insights-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 3rem; flex-wrap: wrap; gap: 1.5rem; }
.insights-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.insight-card {
  background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--gray-200); transition: all var(--duration); color: var(--text-dark); display: flex; flex-direction: column;
}
.insight-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.insight-img { position: relative; height: 180px; overflow: hidden; }
.insight-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.insight-card:hover .insight-img img { transform: scale(1.06); }
.insight-cat {
  position: absolute; top: .75rem; left: .75rem;
  font-family: var(--font-heading); font-size: .65rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: .25rem .65rem; border-radius: var(--radius-full); color: var(--white);
}
.insight-cat.mobility    { background: var(--primary); }
.insight-cat.hospitality { background: var(--secondary); }
.insight-cat.education   { background: #0d9488; }
.insight-cat.energy      { background: #d97706; }
.insight-cat.realestate  { background: #4f46e5; }
.insight-cat.food        { background: #059669; }
.insight-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.insight-tag { font-family: var(--font-heading); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); display: block; margin-bottom: .5rem; }
.insight-body h4 { font-size: .95rem; line-height: 1.45; color: var(--text-dark); margin-bottom: .5rem; transition: color var(--duration); }
.insight-card:hover h4 { color: var(--primary); }
.insight-body p { font-size: .82rem; color: var(--text-light); line-height: 1.6; flex: 1; }
.insight-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--gray-100); }
.insight-date, .insight-read { font-size: .72rem; color: var(--text-light); display: flex; align-items: center; gap: .3rem; }
.insight-read { color: var(--primary); font-weight: 600; }

/* WHAT'S NEW */
.section-news { background: var(--white); padding: 6rem 0; }
.news-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 3rem; flex-wrap: wrap; gap: 1.5rem; }
.news-nav-btns { display: flex; gap: .5rem; }
.news-nav-btn { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--gray-200); background: transparent; color: var(--gray-700); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: .85rem; transition: all var(--duration); }
.news-nav-btn:hover { background: var(--primary); border-color: var(--primary); color: var(--white); }
.news-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.news-card { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gray-200); background: var(--white); transition: all var(--duration); }
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.news-card-img { position: relative; height: 200px; overflow: hidden; }
.news-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.news-card:hover .news-card-img img { transform: scale(1.05); }
.news-tag { position: absolute; top: .75rem; left: .75rem; font-family: var(--font-heading); font-size: .65rem; font-weight: 700; letter-spacing: .08em; padding: .25rem .65rem; border-radius: var(--radius-full); background: var(--grad-brand); color: var(--white); }
.news-card-body { padding: 1.5rem; }
.news-date { font-size: .72rem; font-family: var(--font-heading); font-weight: 600; color: var(--primary); margin-bottom: .6rem; }
.news-card-body h4 { font-size: .95rem; line-height: 1.45; color: var(--text-dark); margin-bottom: .65rem; }
.news-card-body p { font-size: .82rem; color: var(--text-light); line-height: 1.6; }
.news-read-more { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-heading); font-size: .8rem; font-weight: 700; color: var(--primary); margin-top: 1rem; transition: gap var(--duration); }
.news-read-more:hover { gap: .7rem; }

/* CAPABILITIES */
.section-capabilities {
  background: linear-gradient(135deg, var(--complementary-dark) 0%, var(--dark-800) 55%, var(--dark-900) 100%);
  padding: 6rem 0; position: relative; overflow: hidden;
}
.section-capabilities::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 70% at 100% 50%, rgba(227,30,37,.15) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 0% 20%, rgba(4,160,224,.1) 0%, transparent 50%);
}
.cap-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; position: relative; z-index: 1; }
.cap-list { list-style: none; margin-top: 1rem; }
.cap-item {
  display: flex; align-items: center; gap: .85rem; padding: .7rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.75);
  font-size: .93rem; font-family: var(--font-heading); font-weight: 600;
  transition: all var(--duration); cursor: default;
}
.cap-item:last-child { border-bottom: none; }
.cap-item i {
  width: 32px; height: 32px; border-radius: var(--radius-sm); background: rgba(255,255,255,.07); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; transition: all var(--duration);
}
.cap-item:hover { color: var(--white); padding-left: .5rem; }
.cap-item:hover i { background: var(--primary); color: var(--white); }
.cap-right { display: flex; align-items: center; justify-content: center; }
.cap-visual { position: relative; width: 320px; height: 320px; }
.cap-rings { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.cap-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); }
.cap-ring-1 { width: 100%; height: 100%; }
.cap-ring-2 { width: 72%; height: 72%; border-color: rgba(227,30,37,.2); }
.cap-ring-3 { width: 44%; height: 44%; border-color: rgba(4,160,224,.2); }
.cap-center-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; z-index: 1; }
.cap-center-num { font-family: var(--font-heading); font-size: 3rem; font-weight: 800; background: var(--grad-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
.cap-center-txt { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.cap-icons-orbit { position: absolute; inset: 0; }
.cap-orbit-icon {
  position: absolute; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center; color: var(--color,#fff); font-size: .9rem;
  top: 50%; left: 50%;
  animation: orbitItem 18s linear infinite;
  animation-delay: calc(var(--i) * -3s);
}
@keyframes orbitItem {
  from { transform: translate(-50%,-50%) rotate(calc(var(--i) * 60deg)) translateY(-140px) rotate(calc(var(--i) * -60deg)); }
  to   { transform: translate(-50%,-50%) rotate(calc(var(--i) * 60deg + 360deg)) translateY(-140px) rotate(calc(var(--i) * -60deg - 360deg)); }
}

/* SUCCESS STORIES */
.section-success { background: var(--gray-50); padding: 6rem 0; }
.success-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 2rem; flex-wrap: wrap; gap: 1.5rem; }
.success-carousel-wrap { overflow: hidden; padding: 8px 0 16px; margin: 0 -4px; }
.success-grid { display: flex; gap: 1.25rem; padding: 0 4px; transition: transform .45s cubic-bezier(.4,0,.2,1); will-change: transform; }
.success-card { flex: 0 0 calc((100% - 2 * 1.25rem) / 3); background: var(--white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gray-200); transition: transform var(--duration), box-shadow var(--duration), border-color var(--duration); }
.success-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.news-nav-btn:disabled { opacity: .35; cursor: not-allowed; }
.success-card-img { position: relative; height: 180px; overflow: hidden; }
.success-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.success-card:hover .success-card-img img { transform: scale(1.06); }
.success-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top,rgba(0,0,0,.55) 0%,transparent 50%); display: flex; align-items: flex-end; padding: .75rem; }
.success-cat { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-heading); font-size: .65rem; font-weight: 700; color: var(--white); background: rgba(255,255,255,.15); backdrop-filter: blur(4px); padding: .25rem .6rem; border-radius: var(--radius-full); }
.success-card-body { padding: 1.25rem; }
.success-label { font-family: var(--font-heading); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); display: block; margin-bottom: .5rem; border-bottom: 1px solid var(--gray-100); padding-bottom: .5rem; }
.success-card-body h4 { font-size: .88rem; line-height: 1.5; color: var(--text-dark); margin-bottom: .75rem; transition: color var(--duration); }
.success-card:hover h4 { color: var(--primary); }
.success-person strong { display: block; font-size: .8rem; color: var(--text-dark); }
.success-person span { font-size: .72rem; color: var(--text-light); }

/* LIMITLESS TOGETHER */
.section-limitless { position: relative; padding: 8rem 0; overflow: hidden; }
.limitless-bg { position: absolute; inset: 0; z-index: 0; }
.limitless-bg-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.limitless-overlay { position: absolute; inset: 0; background: linear-gradient(135deg,rgba(2,8,20,.92) 0%,rgba(87,10,16,.8) 50%,rgba(2,8,20,.9) 100%); }
.limitless-content { position: relative; z-index: 1; text-align: center; }
.limitless-text { max-width: 700px; margin: 0 auto; }
.limitless-text h2 { color: var(--white); font-size: clamp(2rem,4.5vw,3.5rem); font-weight: 800; margin-bottom: 1.25rem; }
.limitless-text p { color: rgba(255,255,255,.65); font-size: 1.05rem; line-height: 1.8; margin-bottom: 2.5rem; }
.limitless-ctas { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* SECTOR TILE v2 */
.sector-tile { position: relative; overflow: hidden; }
.sector-tile-dot { position: absolute; bottom: 1rem; right: 1rem; width: 8px; height: 8px; border-radius: 50%; background: var(--st-color,var(--primary)); opacity: .4; transition: all var(--duration); }
.sector-tile:hover .sector-tile-dot { opacity: 1; transform: scale(1.5); box-shadow: 0 0 12px var(--st-color,var(--primary)); }

/* ANIMATION BASE */
.fade-in       { opacity:0; transform:translateY(28px); transition:opacity .65s var(--ease),transform .65s var(--ease); }
.fade-in-left  { opacity:0; transform:translateX(-40px); transition:opacity .65s var(--ease),transform .65s var(--ease); }
.fade-in-right { opacity:0; transform:translateX(40px);  transition:opacity .65s var(--ease),transform .65s var(--ease); }
.fade-in.visible,.fade-in-left.visible,.fade-in-right.visible { opacity:1; transform:none; }
.stagger .fade-in:nth-child(2) { transition-delay:.1s; }
.stagger .fade-in:nth-child(3) { transition-delay:.2s; }
.stagger .fade-in:nth-child(4) { transition-delay:.3s; }
.stagger .fade-in:nth-child(5) { transition-delay:.4s; }
.stagger .fade-in:nth-child(6) { transition-delay:.5s; }

/* RESPONSIVE */
@media (max-width:1100px) {
  .mega-layout { grid-template-columns: 1fr 250px; }
  .mega-grid { grid-template-columns: repeat(2,1fr); }
  .success-card { flex: 0 0 calc((100% - 1.25rem) / 2); }
}
@media (max-width:900px) {
  .scale-inner { grid-template-columns:1fr; }
  .scale-image { clip-path:none; height:300px; order:-1; }
  .scale-content { padding:3rem var(--gutter); }
  .vision-inner,.video-showcase-inner { grid-template-columns:1fr; gap:2.5rem; }
  .vision-image { height: auto; }
  .vision-img-frame { border-radius: var(--radius-lg); }
  .vision-img-frame img { aspect-ratio: 16/9; }
  .vision-stat-float {
    position: relative;
    bottom: auto; right: auto; left: auto;
    margin-top: 1rem;
    border-radius: var(--radius-md);
    padding: 1rem 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
  }
  .vsf-num { font-size: 1.5rem; }
  .vision-img-decor-1, .vision-img-decor-2 { display: none; }
  .insights-grid { grid-template-columns:repeat(2,1fr); }
  .news-grid { grid-template-columns:1fr; }
  .cap-inner { grid-template-columns:1fr; }
  .cap-right { display:none; }
  .success-card { flex: 0 0 calc((100% - 1.25rem) / 2); }
  .mega-layout { grid-template-columns:1fr; }
  .mega-right { display:none; }
  .mega-left { border-right:none; }
}
@media (max-width:600px) {
  .hero-trust { gap:.5rem; }
  .hero-trust-pill { font-size:.72rem; padding:.35rem .75rem; }
  .insights-grid,.news-grid { grid-template-columns:1fr; }
  .success-card { flex: 0 0 100%; }
  .limitless-ctas { flex-direction:column; align-items:center; }
  .mega-grid { grid-template-columns:1fr; }
}


/* ═══════════════════════════════════════════════════════════════
   NEW NAV - ABOUT / INSIGHTS / CAREERS DROPDOWNS
   ═══════════════════════════════════════════════════════════════ */

/* Narrow mega menu variant (fewer items) */
.mega-menu--narrow .mega-layout { grid-template-columns: 1fr 300px; }

/* Stat panel inside mega-right (About dropdown) */
.mega-stat-panel { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.5rem; }
.mega-stat { background:rgba(255,255,255,.04); border:1px solid var(--glass-border); border-radius:var(--radius-md); padding:1rem; text-align:center; }
.mega-stat-num { display:block; font-size:1.5rem; font-weight:800; color:var(--primary); line-height:1; margin-bottom:.25rem; }
.mega-stat-lbl { font-size:.72rem; color:var(--text-muted); }

/* Mega CTA button */
.mega-cta-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.3rem; background:var(--primary); color:#fff; border-radius:2rem; font-size:.82rem; font-weight:700; text-decoration:none; transition:background .2s,gap .2s; width:100%; justify-content:center; }
.mega-cta-btn:hover { background:var(--complementary); gap:.9rem; }
.mega-cta-btn--sm { padding:.4rem .9rem; font-size:.78rem; width:auto; }

/* Careers banner inside mega-left */
.mega-careers-banner { display:flex; align-items:center; gap:1rem; margin-top:1.5rem; padding:1rem 1.2rem; background:rgba(227,30,37,.1); border:1px solid rgba(227,30,37,.2); border-radius:var(--radius-md); }
.mega-careers-banner > i { font-size:1.4rem; color:var(--primary); flex-shrink:0; }
.mega-careers-banner > div { flex:1; }
.mega-careers-banner strong { display:block; font-size:.88rem; font-weight:700; color:var(--text-primary); }
.mega-careers-banner span { font-size:.78rem; color:var(--text-muted); }

/* List variant of mega-grid (2 columns -> 1 col full-width) */
.mega-grid--list { grid-template-columns:1fr; }
.mega-grid--list .mega-item { border-radius:var(--radius-md); }

/* Nav search button */
.nav-search-btn { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:1.05rem; padding:.4rem .5rem; display:flex; align-items:center; transition:color .2s; }
.nav-search-btn:hover { color:var(--primary); }
body[data-page="home"] .site-header:not(.scrolled) .nav-search-btn { color:rgba(255,255,255,.75); }
body[data-page="home"] .site-header:not(.scrolled) .nav-search-btn:hover { color:#fff; }
html.theme-light .nav-search-btn { color:#555; }
html.theme-light .nav-search-btn:hover { color:var(--primary); }

/* Light-theme stat panel */
html.theme-light .mega-stat { background:#f5f7fa; border-color:#dde3ec; }

/* ═══════════════════════════════════════════════════════════════
   SEARCH OVERLAY
   ═══════════════════════════════════════════════════════════════ */

.search-overlay { position:fixed; inset:0; background:rgba(5,6,10,.97); z-index:10000; display:flex; align-items:flex-start; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s var(--ease); overflow-y:auto; }
.search-overlay.open { opacity:1; pointer-events:all; }

.search-overlay-inner { width:100%; max-width:800px; padding:5rem 1.5rem 4rem; }

.search-close { position:fixed; top:1.5rem; right:1.5rem; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); color:#fff; font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.search-close:hover { background:rgba(255,255,255,.15); }

.search-eyebrow { font-size:.78rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:1.2rem; }

.search-input-wrap { position:relative; display:flex; align-items:center; margin-bottom:2.5rem; }
.search-input-icon { position:absolute; left:1.2rem; font-size:1.1rem; color:rgba(255,255,255,.4); pointer-events:none; }
.search-input { width:100%; padding:1rem 3.5rem; font-size:1.5rem; font-weight:600; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-lg); color:#fff; outline:none; font-family:inherit; transition:border-color .25s,box-shadow .25s; }
.search-input::placeholder { color:rgba(255,255,255,.3); font-weight:400; }
.search-input:focus { border-color:rgba(227,30,37,.5); box-shadow:0 0 0 3px rgba(227,30,37,.12); }
.search-submit { position:absolute; right:.6rem; width:42px; height:42px; border-radius:var(--radius-sm); background:var(--primary); border:none; color:#fff; font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.search-submit:hover { background:var(--complementary); }

.search-sugg-label { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:.9rem; }

.search-ribbons { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.5rem; }
.search-ribbon { padding:.45rem 1.1rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:2rem; color:rgba(255,255,255,.75); font-size:.84rem; font-weight:500; cursor:pointer; transition:all .2s; }
.search-ribbon:hover { background:rgba(227,30,37,.15); border-color:rgba(227,30,37,.35); color:#fff; }

.search-ql-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.8rem; }
.search-ql-card { display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:1.1rem; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-md); color:rgba(255,255,255,.7); font-size:.82rem; font-weight:600; text-decoration:none; text-align:center; transition:all .2s; }
.search-ql-card i { font-size:1.2rem; color:var(--primary); }
.search-ql-card:hover { background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.15); color:#fff; }

/* ── Responsive for new nav pieces ── */
@media (max-width:1100px) {
  .mega-menu--narrow .mega-layout { grid-template-columns:1fr; }
  .mega-stat-panel { grid-template-columns:repeat(4,1fr); }
}
@media (max-width:768px) {
  .mega-careers-banner { flex-wrap:wrap; }
  .search-input { font-size:1.1rem; }
  .search-ql-grid { grid-template-columns:repeat(3,1fr); }
  .mega-stat-panel { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px) {
  .search-input { font-size:1rem; padding:.85rem 3rem; }
  .search-ql-grid { grid-template-columns:repeat(2,1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   HERO SPLIT - Text Left · Diagonal Panels Right
   ═══════════════════════════════════════════════════════════════ */

.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* ── Left column ── */
.hs-left {
  display: flex;
  align-items: center;
  background: var(--dark-900);
  padding: 140px 60px 80px 60px;
  position: relative;
  z-index: 1;
}

/* Subtle animated gradient mesh behind text */
.hs-left::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 0% 40%, rgba(227,30,37,.07) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 100% 100%, rgba(4,160,224,.05) 0%, transparent 70%);
  pointer-events: none;
}

.hs-left-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
}

.hs-eyebrow {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 1.4rem;
}

.hs-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(1.5); }
}

.hs-heading {
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-weight: 800;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 1.4rem;
  letter-spacing: -.02em;
}

.hs-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,.6);
  line-height: 1.75;
  margin-bottom: 2rem;
  max-width: 100%;
}

.hs-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.hs-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.hs-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .9rem;
  border-radius: 2rem;
  border: 1px solid rgba(255,255,255,.12);
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(6px);
}

.hs-trust-pill i {
  color: var(--primary);
  font-size: .76rem;
}

/* ── Right column - two stacked diagonal panels ── */
.hs-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  background: var(--dark-900);
}

.hs-panel {
  flex: 1;
  position: relative;
  overflow: hidden;
  clip-path: polygon(6% 0, 100% 0, 100% 100%, 0% 100%);
}

.hs-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}

.hs-panel:hover img {
  transform: scale(1.04);
}

/* Dark overlay - stronger on bottom panel for play button contrast */
.hs-panel-top::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.1) 100%);
  pointer-events: none;
}

.hs-panel-bottom .hs-panel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 100%);
}

/* Panel caption (bottom-left corner) */
.hs-panel-label {
  position: absolute;
  bottom: 1.2rem;
  left: 2rem;
  z-index: 2;
}

.hs-panel-label span {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

.hs-panel-label small {
  font-size: .74rem;
  color: rgba(255,255,255,.65);
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* ── Play button ── */
.hs-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 3;
}

.hs-play-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s var(--ease), background .25s, box-shadow .3s;
  box-shadow: 0 8px 32px rgba(227,30,37,.5);
}

.hs-play-circle i {
  font-size: 1.5rem;
  color: #fff;
  margin-left: 4px; /* optical centering for play triangle */
}

.hs-play-btn:hover .hs-play-circle {
  transform: scale(1.1);
  background: #c51920;
  box-shadow: 0 12px 48px rgba(227,30,37,.65);
}

/* Ripple ring animation around play button */
.hs-play-circle::before,
.hs-play-circle::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(227,30,37,.4);
  animation: hs-ripple 2s ease-out infinite;
}

.hs-play-circle::after {
  animation-delay: 1s;
}

@keyframes hs-ripple {
  0%   { width: 80px; height: 80px; opacity: 1; }
  100% { width: 160px; height: 160px; opacity: 0; }
}

/* ── Scroll cue ── */
.hs-scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 3rem;
  cursor: pointer;
  z-index: 10;
  opacity: .5;
  transition: opacity .2s;
}

.hs-scroll-cue:hover { opacity: 1; }

/* ── Light theme overrides ── */
html.theme-light .hs-left {
  background: #f0f4f8;
}

html.theme-light .hs-left::before {
  background:
    radial-gradient(ellipse 70% 60% at 0% 40%, rgba(227,30,37,.06) 0%, transparent 70%);
}

html.theme-light .hs-heading { color: var(--dark-900); }

html.theme-light .hs-eyebrow { color: rgba(0,0,0,.45); }

html.theme-light .hs-sub { color: rgba(0,0,0,.6); }

html.theme-light .hs-trust-pill {
  border-color: rgba(0,0,0,.12);
  color: rgba(0,0,0,.6);
  background: rgba(0,0,0,.04);
}

html.theme-light .hs-right { background: #e2e8f0; }

/* Also keep home body dark so the header transparent overlay works correctly */
body[data-page="home"] {
  background: var(--dark-900);
}

html.theme-light body[data-page="home"] {
  background: #f0f4f8;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .hs-left { padding: 120px 40px 60px; }
  .hs-heading { font-size: clamp(2.4rem, 4.5vw, 3.8rem); }
}

@media (max-width: 768px) {
  .hero-split {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hs-left {
    padding: 120px 24px 40px;
    min-height: 70vh;
    align-items: flex-end;
  }

  .hs-right {
    height: 55vw;
    min-height: 280px;
    flex-direction: row;
    gap: 6px;
  }

  .hs-panel {
    clip-path: polygon(0 6%, 100% 0, 100% 100%, 0% 100%);
    flex: 1;
  }

  .hs-play-circle { width: 60px; height: 60px; }
  .hs-play-circle i { font-size: 1.1rem; }
  @keyframes hs-ripple {
    0%   { width: 60px; height: 60px; opacity: 1; }
    100% { width: 120px; height: 120px; opacity: 0; }
  }

  .hs-panel-label { display: none; }
  .hs-scroll-cue { display: none; }
}

@media (max-width: 480px) {
  .hs-cta { flex-direction: column; }
  .hs-cta .btn { width: 100%; justify-content: center; }
}


/* ═══════════════════════════════════════════════════════════════
   HERO - PINWHEEL LAYOUT  (4 blade images · center play pin)
   ═══════════════════════════════════════════════════════════════ */

.hs-right {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  background: var(--dark-900) !important;
  flex-direction: unset !important;
  gap: 0 !important;
  padding: 0 !important;
}

/* ── Each blade fills the full panel; clip-path reveals one sector ── */
.pw-blade {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.pw-blade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .65s cubic-bezier(.25,.46,.45,.94);
}

.pw-blade:hover img { transform: scale(1.05); }

/* Dim overlay on each blade */
.pw-blade::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.28);
  pointer-events: none;
}

/* ── Clockwise pinwheel clip-paths ── */
/*   Each polygon: center → two adjacent edges → sweeps one quadrant */
.pw-b1 { clip-path: polygon(50% 50%, 0%   0%,   100% 0%,   100% 50%); }
.pw-b2 { clip-path: polygon(50% 50%, 100% 0%,   100% 100%, 50%  100%); }
.pw-b3 { clip-path: polygon(50% 50%, 100% 100%, 0%   100%, 0%   50%); }
.pw-b4 { clip-path: polygon(50% 50%, 0%   100%, 0%   0%,   50%  0%); }

/* ── Seam lines overlay - thin dark X from center to each corner ── */
.pw-seams {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background:
    linear-gradient(to bottom right,
      transparent calc(50% - 1px), rgba(0,0,0,.55) calc(50% - 1px),
      rgba(0,0,0,.55) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom left,
      transparent calc(50% - 1px), rgba(0,0,0,.55) calc(50% - 1px),
      rgba(0,0,0,.55) calc(50% + 1px), transparent calc(50% + 1px));
}

/* ── Center pin / play button ── */
.pw-center-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pw-dot {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
  box-shadow: 0 8px 32px rgba(227,30,37,.6), 0 0 0 4px rgba(255,255,255,.15);
  transition: transform .3s var(--ease), box-shadow .3s;
}

.pw-dot i {
  font-size: 1.3rem;
  color: #fff;
  margin-left: 4px;
}

.pw-center-btn:hover .pw-dot {
  transform: scale(1.12);
  box-shadow: 0 12px 48px rgba(227,30,37,.75), 0 0 0 6px rgba(255,255,255,.18);
}

.pw-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(227,30,37,.5);
  animation: pw-ripple 2.2s ease-out infinite;
}
.pw-ring-2 { animation-delay: 1.1s; }

@keyframes pw-ripple {
  0%   { width: 68px;  height: 68px;  opacity: 1; }
  100% { width: 170px; height: 170px; opacity: 0; }
}

/* ── Light theme ── */
html.theme-light .hs-right { background: #edf2f7 !important; }

/* ── Scroll cue ── */
.hs-scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 3rem;
  cursor: pointer;
  z-index: 10;
  opacity: .45;
  transition: opacity .2s;
}
.hs-scroll-cue:hover { opacity: 1; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .hero-split { grid-template-columns: 1fr; }

  .hs-left {
    padding: 120px 24px 36px;
    min-height: 65vh;
    align-items: flex-end;
  }

  .hs-right {
    height: 72vw !important;
    min-height: 280px !important;
  }

  .pw-dot { width: 50px; height: 50px; }
  .pw-dot i { font-size: 1rem; }
  @keyframes pw-ripple {
    0%   { width: 50px;  height: 50px;  opacity: 1; }
    100% { width: 120px; height: 120px; opacity: 0; }
  }
}

/* ═══════════════════════════════════════════════════════════════
   FIX: hs-left - text must fill the full left column
   ═══════════════════════════════════════════════════════════════ */
.hs-left {
  padding: 130px 52px 72px 64px !important;
}

.hs-left-inner {
  max-width: 100% !important;
  width: 100% !important;
}

.hs-heading {
  font-size: clamp(3rem, 5.5vw, 5.5rem) !important;
  letter-spacing: -.025em !important;
  line-height: 1.03 !important;
}

.hs-sub {
  max-width: 100% !important;
  font-size: 1.05rem !important;
}

/* ═══════════════════════════════════════════════════════════════
   STATS IMAGE STRIP  (Mahindra-style: full-width image + number bar)
   ═══════════════════════════════════════════════════════════════ */

.stats-img-strip {
  position: relative;
  height: 420px;
  overflow: hidden;
}

/* Full-width background image */
.sstrip-bg {
  position: absolute;
  inset: 0;
}

.sstrip-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

/* Dark gradient overlay - heavier at bottom for readability */
.sstrip-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.15) 0%,
    rgba(0,0,0,.25) 50%,
    rgba(0,0,0,.55) 85%,
    rgba(0,0,0,.7)  100%
  );
}

/* Numbers bar - fixed to bottom of section */
.sstrip-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 2;
}

.sstrip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Each stat cell */
.sstrip-stat {
  flex: 1;
  text-align: center;
  padding: 22px 20px;
}

.sstrip-num {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: 5px;
  font-family: 'Montserrat', sans-serif;
}

.sstrip-label {
  font-size: .8rem;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Thin vertical divider */
.sstrip-divider {
  width: 1px;
  height: 44px;
  background: #e0e0e0;
  flex-shrink: 0;
}

/* Dark theme - keep bar white for contrast */
html:not(.theme-light) .sstrip-bar {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
}

html:not(.theme-light) .sstrip-label {
  color: #444;
}

/* Responsive */
@media (max-width: 900px) {
  .stats-img-strip { height: 340px; }
  .sstrip-num { font-size: 1.7rem; }
  .sstrip-label { font-size: .72rem; }
  .sstrip-stat { padding: 18px 10px; }
}

@media (max-width: 600px) {
  .stats-img-strip { height: 280px; }
  .sstrip-inner { padding: 0 12px; }
  .sstrip-divider { height: 32px; }
  .sstrip-stat { padding: 14px 8px; }
  .sstrip-num { font-size: 1.35rem; }
  .sstrip-label { font-size: .65rem; letter-spacing: .02em; }
}

/* ══════════════════════════════════════════════════════════════
   SITE OVERRIDES - cursor · hero container · mega-4col
   ══════════════════════════════════════════════════════════════ */

/* 1. Cursor - default arrow everywhere; pointer only for true interactions */
*:not(a):not(button):not(input):not(select):not(textarea):not([role="button"]) {
  cursor: default;
}
/* Ensure pointer on links and every child inside them - !important needed to beat the :not() specificity above */
a, a *, [role="button"], [role="button"] * { cursor: pointer !important; }

/* 2. Hero - contained inside max-width container + Mahindra-style grid pattern */
.hero-split {
  display: flex !important;
  align-items: stretch !important;
  grid-template-columns: unset !important;
  background-color: var(--dark-900) !important;
  /* Two-level grid: major 80px grid + minor 20px subdivision */
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) !important;
  background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Container inside hero is the 50/50 layout driver */
.hero-split > .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Left panel - transparent so grid pattern shows through */
.hs-left {
  background: transparent !important;
}

/* Light theme */
html.theme-light .hero-split {
  background-color: var(--gray-50) !important;
  background-image:
    linear-gradient(rgba(0,0,0,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.045) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.015) 1px, transparent 1px) !important;
  background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px !important;
}
html.theme-light .hs-left { background: transparent !important; }

@media (max-width: 768px) {
  .hero-split > .container {
    grid-template-columns: 1fr;
    min-height: auto;
  }
}

/* 3. Industries mega-menu - 4-column grid layout */
.mega-industries-hdr {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.4rem 0 .75rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: .4rem;
}
html.theme-light .mega-industries-hdr { border-bottom-color: var(--gray-200); }
.mega-industries-hdr .mega-section-label { margin: 0; flex-shrink: 0; }
.mega-industries-hdr .mega-count         { flex: 1; font-size: .81rem; color: rgba(255,255,255,.4); }
html.theme-light .mega-industries-hdr .mega-count { color: var(--text-light); }
.mega-industries-hdr .mega-view-all      { margin: 0; flex-shrink: 0; }

.mega-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .35rem;
  padding-bottom: 1.5rem;
}

.mega-4col .mega-item {
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  padding: .85rem .9rem;
}

.mega-4col .mega-item .mega-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  font-size: .8rem;
  flex-shrink: 0;
}

.mega-4col .mega-item .mega-text strong { font-size: .85rem; }
.mega-4col .mega-item .mega-text small  { font-size: .73rem; }
.mega-4col .mega-item .mega-arrow       { display: none; }

@media (max-width: 1024px) {
  .mega-4col { grid-template-columns: repeat(2, 1fr); }
}

/* ── Stats bar overlapping hero bottom ── */
.sstrip-bar--hero {
  position: relative;
  z-index: 10;
  margin-top: -52px;
  border-radius: 8px;
  box-shadow: 0 -4px 32px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.10);
}

/* Ensure the hero section has enough bottom padding to show the overlap */
.hero-split {
  padding-bottom: 52px;
}

/* Give the section after stats-strip some breathing room */
.section-scale {
  padding-top: 80px;
}

@media (max-width: 900px) {
  .sstrip-bar--hero {
    margin-top: -36px;
    border-radius: 6px;
  }
  .hero-split {
    padding-bottom: 36px;
  }
}

@media (max-width: 600px) {
  .sstrip-bar--hero {
    margin-top: 0;
    border-radius: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
  }
  .hero-split {
    padding-bottom: 0;
  }
}

/* ══════════════════════════════════════════════════════════════
   MAHINDRA DESIGN SYSTEM - Buttons · Fonts · Backgrounds
   ══════════════════════════════════════════════════════════════ */


/* ── 2. BUTTONS - Flat red, single colour, slide-fill animation ── */

/* Base shape reset */
.btn {
  border-radius: 2px !important;
  overflow: hidden;
  isolation: isolate;        /* own stacking context - ::before z:-1 stays below text */
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: .8rem !important;
  font-weight: 700;
  transition: color .3s, border-color .3s, background .3s !important;
  transform: none !important;
}
.btn:hover { transform: none !important; }

/* Icon nudge on hover */
.btn:hover i:last-child { transform: translateX(4px); transition: transform .25s; }

/* ·· Primary / CTA - solid red, dark-red slide in from left ·· */
.btn-gradient,
.btn-primary {
  background: var(--primary) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
}
/* Override the old ::before gradient-fade to use left-slide instead */
.btn-gradient::before,
.btn-primary::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--primary-dark) !important;
  opacity: 1 !important;
  transform: translateX(-100%);
  transition: transform .42s cubic-bezier(.4, 0, .2, 1) !important;
  z-index: -1;
}
.btn-gradient:hover,
.btn-primary:hover {
  background: var(--primary) !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}
.btn-gradient:hover::before,
.btn-primary:hover::before {
  transform: translateX(0) !important;
  opacity: 1 !important;
}

/* ·· Outline (dark bg) - transparent → white fill ·· */
.btn-outline {
  background: transparent !important;
  color: rgba(255,255,255,.85) !important;
  border: 1.5px solid rgba(255,255,255,.45) !important;
  border-radius: 2px !important;
}
.btn-outline::before { display: none !important; }
.btn-outline:hover {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.8) !important;
  color: #fff !important;
  transform: none !important;
}

/* ·· Outline dark (light bg) - red slide fill ·· */
.btn-outline-dark {
  background: transparent !important;
  color: var(--primary) !important;
  border: 1.5px solid var(--primary) !important;
  border-radius: 2px !important;
  overflow: hidden;
}
.btn-outline-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--primary);
  transform: translateX(-100%);
  transition: transform .42s cubic-bezier(.4, 0, .2, 1);
  z-index: -1;
}
.btn-outline-dark:hover {
  color: #fff !important;
  background: transparent !important;
  transform: none !important;
}
.btn-outline-dark:hover::before { transform: translateX(0); }

/* ·· White button (CTA sections) - white → red slide ·· */
.btn-white {
  background: #fff !important;
  color: var(--primary) !important;
  border: 2px solid #fff !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  overflow: hidden;
}
.btn-white::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--primary);
  transform: translateX(-100%);
  transition: transform .42s cubic-bezier(.4, 0, .2, 1);
  z-index: -1;
}
.btn-white:hover {
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
}
.btn-white:hover::before { transform: translateX(0); }

/* ·· Glass button - keep but clean up ·· */
.btn-glass {
  border-radius: 2px !important;
  transform: none !important;
}
.btn-glass:hover { transform: none !important; }

/* ── 3. SECTION BACKGROUNDS - Mahindra warm palette + line patterns ── */

/* Shared warm off-white variable */
:root { --section-warm: #f7f6f2; }

/* Warm off-white sections with fine grid */
.section-scale {
  background-color: var(--section-warm) !important;
  position: relative;
  overflow: hidden;
}
/* Large concentric circles from right - follows image position */
.section-scale::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-radial-gradient(
    circle at 72% 50%,
    transparent 0px,
    transparent 74px,
    rgba(227,30,37,.07) 75px,
    transparent 76px
  );
  -webkit-mask-image: radial-gradient(ellipse 75% 90% at 72% 50%, black 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 90% at 72% 50%, black 0%, transparent 100%);
  pointer-events: none; z-index: 0;
}
/* Smaller secondary circles bottom-left */
.section-scale::after {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-radial-gradient(
    circle at 5% 95%,
    transparent 0px,
    transparent 44px,
    rgba(0,0,0,.04) 45px,
    transparent 46px
  );
  pointer-events: none; z-index: 0;
}
.section-scale .scale-inner { position: relative; z-index: 1; }
.section-insights       { background-color: var(--section-warm) !important; }
.section-success {
  background-color: var(--section-warm) !important;
  position: relative;
  overflow: hidden;
}
/* Large concentric arc rings from bottom-right corner */
.section-success::before {
  content: '';
  position: absolute;
  bottom: -280px; right: -280px;
  width: 700px; height: 700px;
  border-radius: 50%;
  border: 1px solid rgba(227,30,37,.12);
  box-shadow:
    0 0 0 80px  rgba(227,30,37,.0),
    0 0 0 81px  rgba(227,30,37,.09),
    0 0 0 161px rgba(227,30,37,.0),
    0 0 0 162px rgba(227,30,37,.065),
    0 0 0 242px rgba(227,30,37,.0),
    0 0 0 243px rgba(227,30,37,.04),
    0 0 0 323px rgba(227,30,37,.0),
    0 0 0 324px rgba(227,30,37,.022);
  pointer-events: none; z-index: 0;
}
/* Fine dot grid fading from center */
.section-success::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,.07) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 40% 50%, black 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 75% at 40% 50%, black 20%, transparent 100%);
  pointer-events: none; z-index: 0;
}
.section-success > .container { position: relative; z-index: 1; }
.section-video-showcase {
  background-color: #fff !important;
  position: relative;
  overflow: hidden;
}
/* Circles on left side only - behind the text */
.section-video-showcase::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-radial-gradient(
    circle at 22% 50%,
    transparent 0px,
    transparent 59px,
    rgba(227,30,37,.1) 60px,
    transparent 61px
  );
  -webkit-mask-image: linear-gradient(to right, black 0%, black 40%, transparent 75%);
  mask-image: linear-gradient(to right, black 0%, black 40%, transparent 75%);
  pointer-events: none; z-index: 0;
}
.section-video-showcase > .container { position: relative; z-index: 1; }
.section-news {
  background-color: #fff !important;
  position: relative;
}
.section-news::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--primary) 20%,
    #ff6b35 50%,
    var(--primary) 80%,
    transparent 100%
  );
  z-index: 1;
}
.section-vision         { background-color: #111 !important; }
.section-vision::before {
  background: radial-gradient(ellipse 65% 70% at 0% 50%, rgba(227,30,37,.14) 0%, transparent 55%) !important;
}
.section-capabilities { background-color: #111 !important; }
.section-capabilities::before {
  background: radial-gradient(ellipse 50% 65% at 100% 50%, rgba(227,30,37,.1) 0%, transparent 55%) !important;
}
.section-sectors-clean  { background-color: var(--section-warm) !important; }

/* Light theme: keep warm tones */
html.theme-light .section-scale        { background-color: var(--section-warm) !important; }
html.theme-light .section-insights     { background-color: var(--section-warm) !important; }
html.theme-light .section-success      { background-color: var(--section-warm) !important; }
html.theme-light .section-sectors-clean{ background-color: var(--section-warm) !important; }
html.theme-light .section-video-showcase{ background-color: #fff !important; }
html.theme-light .section-news         { background-color: #fff !important; }

/* ══════════════════════════════════════════════════════════════
   PAGE HERO BANNER - Full-width cream · vertical lines · red tint · kite
   ══════════════════════════════════════════════════════════════ */

/* ── Outer banner: full-width bg, content constrained to container ── */
.ph-banner {
  min-height: 280px;
  position: relative;
  overflow: hidden;
  background-color: #f2ede2;
  background-image:
    radial-gradient(ellipse 65% 100% at 82% 50%, rgba(227,30,37,.1) 0%, transparent 62%),
    linear-gradient(90deg, rgba(0,0,0,.085) 1px, transparent 1px);
  background-size: auto, 38px 38px;
}

/* ── Inner container: flex row, centred within max-width ── */
.ph-inner {
  display: flex;
  align-items: center;
  min-height: 280px;
}

/* ── Left: content column ── */
.ph-left {
  flex: 1 1 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.5rem 0;
  background: transparent;
  position: relative;
  z-index: 2;
}

/* ── Right: kite SVG ── */
.ph-right {
  flex: 0 0 40%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: transparent;
}
.ph-right::before { display: none; }

/* ── Paper Kite SVG ── */
.ph-kite {
  position: relative;
  z-index: 1;
  max-height: 220px;
  width: auto;
  transform: none;
  opacity: .7;
  filter: drop-shadow(0 4px 24px rgba(0,160,228,.18));
}

/* ── Breadcrumb ── */
.ph-crumb {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 1rem;
  text-decoration: none;
}
.ph-crumb a       { color: #999; text-decoration: none; transition: color .2s; }
.ph-crumb a:hover { color: var(--primary); }
.ph-crumb i       { font-size: .52rem; color: var(--primary); }
.ph-crumb span    { color: var(--primary); }

/* ── Title ── */
.ph-title {
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 800;
  color: #111;
  line-height: 1.1;
  letter-spacing: -.025em;
  margin: 0 0 1rem;
}

/* ── Subtitle ── */
.ph-sub {
  font-size: .96rem;
  color: #555;
  line-height: 1.72;
  max-width: 500px;
  margin: 0;
}

/* ── Dark theme - invert banner ── */
html:not(.theme-light) .ph-banner {
  background-color: var(--dark-800);
  background-image:
    radial-gradient(ellipse 65% 100% at 82% 50%, rgba(227,30,37,.12) 0%, transparent 62%),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: auto, 38px 38px;
}
html:not(.theme-light) .ph-title { color: #fff; }
html:not(.theme-light) .ph-sub   { color: rgba(255,255,255,.6); }
html:not(.theme-light) .ph-crumb,
html:not(.theme-light) .ph-crumb a { color: rgba(255,255,255,.4); }
html:not(.theme-light) .ph-kite { opacity: .85; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .ph-banner { min-height: auto; }
  .ph-inner  { flex-direction: column; min-height: auto; }
  .ph-left   { flex: none; padding: 2.5rem 0 1.5rem; }
  .ph-right  { flex: none; justify-content: center; padding: 0 0 2rem; }
  .ph-kite   { max-height: 100px; }
  .ph-title  { font-size: 1.75rem; }
}

/* ═══════════════════════════════════════════════════════════
   4-COLUMN MEGA MENU
   ═══════════════════════════════════════════════════════════ */

/* Mega-menu always has a white/light bg - pin text tokens to dark regardless of theme */
.mega-menu {
  --text-primary:   #1a1a2e;
  --text-secondary: #4a5568;
  --text-muted:     #718096;
}

.mega-menu--4col { padding: 0; overflow: hidden; }

.mega-4col-layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 300px;
}

/* ── Col 1: Intro ── */
.mm-intro {
  padding: 2rem 1.75rem;
  background: rgba(227,30,37,.05);
  border-right: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
html.theme-light .mm-intro { background: rgba(227,30,37,.04); border-right-color: var(--gray-200); }

.mm-intro-body { flex: 1; display: flex; flex-direction: column; gap: .55rem; }

.mm-intro-eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary);
}

.mm-intro-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.25;
}
html.theme-light .mm-intro-title { color: var(--dark-900); }

.mm-intro-desc {
  font-size: .81rem;
  color: var(--text-light);
  line-height: 1.7;
}

.mm-intro-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  padding: .55rem 1rem;
  background: rgba(227,30,37,.1);
  border-radius: 2rem;
  border: 1px solid rgba(227,30,37,.2);
  width: fit-content;
  transition: gap .2s, background .2s;
}
.mm-intro-link:hover { gap: .7rem; background: rgba(227,30,37,.18); }

/* ── Col 2 & 3: Links ── */
.mm-links {
  padding: 1.75rem 1.5rem;
  border-right: 1px solid var(--glass-border);
}
html.theme-light .mm-links { border-right-color: var(--gray-200); }

.mm-links-label {
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: .6rem;
  margin-bottom: .65rem;
  border-bottom: 1px solid var(--glass-border);
  display: block;
}
html.theme-light .mm-links-label { border-bottom-color: var(--gray-200); }

.mm-link-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .05rem;
}

.mm-link-list li a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .52rem .55rem;
  border-radius: 6px;
  font-size: .84rem;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  transition: background .14s, color .14s, padding-left .14s;
}
html.theme-light .mm-link-list li a { color: var(--dark-800); }

.mm-link-list li a:hover {
  background: rgba(227,30,37,.07);
  color: var(--primary);
  padding-left: .85rem;
}

.mm-link-list li a i {
  width: 15px;
  text-align: center;
  font-size: .78rem;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color .14s;
}
.mm-link-list li a:hover i { color: var(--primary); }

/* ── Col 4: Image card ── */
.mm-card {
  padding: .9rem;
  background: rgba(255,255,255,.015);
}
html.theme-light .mm-card { background: var(--gray-50); }

.mm-img-card {
  display: block;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 100%;
  text-decoration: none;
  min-height: 240px;
}

.mm-img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}
.mm-img-card:hover img { transform: scale(1.07); }

.mm-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.15) 55%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.1rem;
  gap: .3rem;
}

.mm-img-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .65rem;
  border-radius: 2rem;
  font-size: .68rem;
  font-weight: 700;
  color: #fff;
  width: fit-content;
  margin-bottom: .2rem;
  background: var(--primary);
}
.mm-img-badge--green  { background:#059669; }
.mm-img-badge--amber  { background:#d97706; }
.mm-img-badge--purple { background:#7c3aed; }

.mm-img-title {
  font-size: .92rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.mm-img-sub {
  font-size: .75rem;
  color: rgba(255,255,255,.72);
  line-height: 1.4;
}

.mm-img-cta {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  font-size: .76rem;
  font-weight: 700;
  color: #ff6b6b;
  margin-top: .25rem;
  transition: gap .2s;
}
.mm-img-card:hover .mm-img-cta { gap: .52rem; }

/* ── Dark background variants (home page scrolled dark navbar) ── */
body[data-page="home"] .site-header.scrolled .mm-links-label { border-bottom-color: rgba(255,255,255,.08); }
body[data-page="home"] .site-header.scrolled .mm-link-list li a { color: rgba(255,255,255,.8); }
body[data-page="home"] .site-header.scrolled .mm-link-list li a:hover { background: rgba(255,255,255,.06); color: #fff; }
body[data-page="home"] .site-header.scrolled .mm-intro-title { color: var(--white); }
body[data-page="home"] .site-header.scrolled .mm-links { border-right-color: rgba(255,255,255,.08); }
body[data-page="home"] .site-header.scrolled .mm-intro { border-right-color: rgba(255,255,255,.08); }
body[data-page="home"] .site-header.scrolled .mm-card { background: var(--dark-800); }

/* Light theme overrides for home scrolled */
html.theme-light body[data-page="home"] .site-header.scrolled .mm-link-list li a { color: var(--dark-800); }
html.theme-light body[data-page="home"] .site-header.scrolled .mm-intro-title { color: var(--dark-900); }
html.theme-light body[data-page="home"] .site-header.scrolled .mm-card { background: var(--gray-50); }

/* ── Responsive – tablet ── */
@media (max-width: 1024px) {
  .mega-4col-layout { grid-template-columns: repeat(2, 1fr); }
  .mm-intro { grid-column: 1 / -1; border-right: none; border-bottom: 1px solid var(--glass-border); flex-direction: row; align-items: center; gap: 2rem; padding: 1.5rem 1.75rem; }
  .mm-intro-body { flex: 1; }
  .mm-card { grid-column: 1 / -1; }
  .mm-img-card { min-height: 160px; }
  .mm-links:last-of-type { border-right: none; }
}

/* ── Mobile – inside the side drawer ── */
@media (max-width: 768px) {
  /* Single-column stack, fully dark to match drawer */
  .mega-menu--4col { padding: 0; overflow: hidden; }
  .mega-4col-layout { grid-template-columns: 1fr; min-height: unset; }

  /* Hide image card - too small to be useful */
  .mega-4col-layout .mm-card { display: none; }

  /* ── Intro col ── */
  .mega-4col-layout .mm-intro {
    flex-direction: row;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.1rem;
    background: rgba(227,30,37,.1);
    border-right: none;
    border-left: 3px solid var(--primary);
    border-bottom: 1px solid rgba(255,255,255,.06);
    border-radius: 0;
  }
  .mega-4col-layout .mm-intro-body { flex: 1; gap: .2rem; }
  .mm-intro-eyebrow { font-size: .6rem; }
  .mega-4col-layout .mm-intro-title { font-size: .88rem; color: #fff; margin: 0; }
  .mega-4col-layout .mm-intro-desc { display: none; }
  .mega-4col-layout .mm-intro-link {
    font-size: .73rem;
    padding: .35rem .75rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ── Link cols ── */
  .mega-4col-layout .mm-links {
    padding: .65rem 1.1rem;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.05);
    background: transparent;
  }
  .mega-4col-layout .mm-links-label {
    font-size: .6rem;
    margin-bottom: .35rem;
    padding-bottom: .3rem;
    color: rgba(255,255,255,.28);
    border-bottom-color: rgba(255,255,255,.07);
  }
  .mega-4col-layout .mm-link-list li a {
    padding: .42rem .35rem;
    font-size: .81rem;
    gap: .5rem;
    color: rgba(255,255,255,.72);
    border-radius: 4px;
  }
  .mega-4col-layout .mm-link-list li a i { color: #000000; font-size: .72rem; }
  .mega-4col-layout .mm-link-list li a:hover {
    padding-left: .65rem;
    background: rgba(255,255,255,.05);
    color: #fff;
  }
  .mega-4col-layout .mm-link-list li a:hover i { color: var(--primary); }
}

/* ═══════════════════════════════════════════════════════════
   HERO SLIDER
   ═══════════════════════════════════════════════════════════ */

.hero-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 620px;
  max-height: 940px;
  overflow: hidden;
  background: var(--dark-900);
  padding: 0 !important;
}

/* ── Track ── */
.hsl-track { position: relative; width: 100%; height: 100%; }

/* ── Slide ── */
.hsl-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .85s ease, visibility .85s;
  z-index: 0;
}
.hsl-slide--active { opacity: 1; visibility: visible; z-index: 1; }

/* ── Background image ── */
.hsl-bg { position: absolute; inset: 0; overflow: hidden; }
.hsl-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transform: scale(1.08);
  transition: transform 7s ease;
  display: block;
}
.hsl-slide--active .hsl-bg img { transform: scale(1); }

/* ── Gradient overlay - heavy on left, fades right ── */
.hsl-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg,
      rgba(5,10,22,.92) 0%,
      rgba(5,10,22,.65) 45%,
      rgba(5,10,22,.2)  100%),
    linear-gradient(to top,
      rgba(5,10,22,.7) 0%,
      transparent 40%);
}

/* ── Content wrapper ── */
.hsl-content-wrap {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
}

.hsl-content {
  max-width: 640px;
  padding-top: var(--header-height);
}

/* ── Eyebrow ── */
.hsl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 1.25rem;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease .15s, transform .6s ease .15s;
}
.hsl-slide--active .hsl-eyebrow { opacity: 1; transform: translateY(0); }

.hsl-eyebrow-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(227,30,37,.3);
  animation: hslDotPulse 2s infinite;
}
@keyframes hslDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(227,30,37,.3); }
  50%       { box-shadow: 0 0 0 7px rgba(227,30,37,.0); }
}

/* ── Title ── */
.hsl-title {
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 1.4rem;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .65s ease .32s, transform .65s ease .32s;
}
.hsl-slide--active .hsl-title { opacity: 1; transform: translateY(0); }
.hsl-title em {
  font-style: normal;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Subtitle ── */
.hsl-sub {
  font-size: 1.02rem;
  color: rgba(255,255,255,.62);
  line-height: 1.72;
  max-width: 500px;
  margin-bottom: 2rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease .5s, transform .6s ease .5s;
}
.hsl-slide--active .hsl-sub { opacity: 1; transform: translateY(0); }

/* ── CTAs ── */
.hsl-cta {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease .65s, transform .6s ease .65s;
}
.hsl-slide--active .hsl-cta { opacity: 1; transform: translateY(0); }

/* ── Trust pills ── */
.hsl-trust {
  display: flex;
  gap: .65rem;
  flex-wrap: wrap;
  opacity: 0;
  transition: opacity .6s ease .82s;
}
.hsl-slide--active .hsl-trust { opacity: 1; }

.hsl-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .32rem .85rem;
  border-radius: 2rem;
  border: 1px solid rgba(255,255,255,.18);
  font-size: .73rem;
  font-weight: 600;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(6px);
}
.hsl-trust-pill i { color: var(--primary); font-size: .7rem; }

/* ── Sector tag ── */
.hsl-sector-tag {
  position: absolute;
  bottom: 5.5rem;
  right: 3rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem 1.3rem;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius-md);
  color: rgba(255,255,255,.85);
  font-size: .82rem;
  font-weight: 600;
  z-index: 3;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity .6s ease .95s, transform .6s ease .95s;
}
.hsl-slide--active .hsl-sector-tag { opacity: 1; transform: translateX(0); }
.hsl-sector-tag i { color: var(--primary); font-size: 1.05rem; }

/* ── Left accent bar ── */
.hsl-slide--active::before {
  content: '';
  position: absolute;
  left: 0; top: 15%; bottom: 15%;
  width: 3px;
  background: var(--grad-brand);
  z-index: 4;
  border-radius: 0 2px 2px 0;
}

/* ── Arrows (positioned at bottom-center) ── */
.hsl-arrow {
  position: absolute;
  top: 15%;
  transform: translateY(-50%);
  z-index: 10;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .22s, border-color .22s, transform .22s, box-shadow .22s;
}
.hsl-arrow:hover {
  background: var(--primary);
  border-color: var(--primary);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 0 20px rgba(227,30,37,.4);
}
.hsl-arrow--prev { left: 1.75rem; }
.hsl-arrow--next { right: 1.75rem; left: auto; }

/* ── Vertical dots (right side) ── */
.hsl-dots {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  align-items: center;
}
.hsl-dot {
  width: 4px; height: 22px;
  border-radius: 2px;
  background: rgba(255,255,255,.28);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .3s, height .3s;
}
.hsl-dot--active { background: var(--primary); height: 36px; box-shadow: 0 0 10px rgba(227,30,37,.45); }
.hsl-dot:hover:not(.hsl-dot--active) { background: rgba(255,255,255,.55); }

/* ── Counter ── */
.hsl-counter {
  position: absolute;
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: baseline;
  gap: .3rem;
  color: rgba(255,255,255,.4);
  font-family: var(--font-heading);
  letter-spacing: .04em;
}
.hsl-counter-cur { font-size: 1.6rem; font-weight: 900; color: #fff; line-height: 1; }
.hsl-counter-sep { font-size: .85rem; margin: 0 .1rem; }
.hsl-counter-tot { font-size: .85rem; }

/* ── Progress bar ── */
.hsl-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,.1);
  z-index: 10;
}
.hsl-progress-bar {
  height: 100%;
  background: var(--grad-brand);
  width: 0%;
}
.hsl-progress-bar.hsl-bar-run {
  width: 100%;
  transition: width 5s linear;
}

/* ── Bottom fade ── */
.hero-slider::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 100px;
  background: linear-gradient(to bottom, transparent, rgba(5,10,22,.45));
  pointer-events: none;
  z-index: 2;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .hero-slider { height: 100svh; min-height: 560px; max-height: none; }
  .hsl-title { font-size: clamp(2rem, 8vw, 2.8rem); }
  .hsl-sub { font-size: .9rem; max-width: 100%; }
  .hsl-content { padding-top: calc(var(--header-height) + 1rem); max-width: 100%; }
  .hsl-sector-tag { display: none; }
  .hsl-dots { right: .6rem; }
  .hsl-arrow--prev { left: .75rem; }
  .hsl-arrow--next { right: .75rem; left: auto; }
  .hsl-trust-pill { font-size: .68rem; padding: .28rem .7rem; }
  .hsl-cta .btn-lg { padding: .7rem 1.4rem; font-size: .88rem; }
}

@media (max-width: 480px) {
  .hsl-overlay { background: rgba(5,10,22,.88); }
  .hsl-dots { display: none; }
  .hsl-counter { bottom: 3.2rem; }
  .hsl-arrow { width: 40px; height: 40px; font-size: .85rem; }
}

/* ── MOBILE NAV DRAWER - late override to ensure backdrop-filter never traps
   the position:fixed drawer inside .navbar bounds (Chrome/Safari behavior).
   These rules appear last so they win any !important specificity battle. ── */
@media (max-width: 768px) {
  .site-header .navbar,
  .site-header:not(.scrolled) .navbar,
  .site-header.scrolled .navbar,
  body[data-page="home"] .site-header .navbar,
  html.theme-light body[data-page="home"] .site-header:not(.scrolled) .navbar,
  html.theme-light body[data-page="home"] .site-header.scrolled .navbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* ── DRAWER NAV LINKS - always dark on the white drawer, all themes & pages ── */
  .nav-wrapper .nav-link,
  html:not(.theme-light) .nav-wrapper .nav-link,
  html:not(.theme-light) body[data-page="home"] .nav-wrapper .nav-link,
  body[data-page="home"] .site-header .nav-wrapper .nav-link,
  body[data-page="home"] .site-header.scrolled .nav-wrapper .nav-link {
    color: #212529 !important;
  }
  .nav-wrapper .nav-link:hover,
  .nav-wrapper .nav-link.active,
  html:not(.theme-light) .nav-wrapper .nav-link:hover,
  html:not(.theme-light) .nav-wrapper .nav-link.active {
    color: #e31e25 !important;
    background: rgba(227,30,37,.06) !important;
    border-left: 3px solid #e31e25 !important;
    padding-left: calc(1.25rem - 3px) !important;
  }

  /* Override any dark-mode mm-* colours so the light drawer always reads correctly */
  .nav-wrapper .mm-intro-title,
  html:not(.theme-light) .nav-wrapper .mm-intro-title { color: #1a1a2e !important; }
  .nav-wrapper .mm-intro-desc,
  html:not(.theme-light) .nav-wrapper .mm-intro-desc  { color: #6c757d !important; }
  .nav-wrapper .mm-links-label,
  html:not(.theme-light) .nav-wrapper .mm-links-label { color: #999 !important; }
  .nav-wrapper .mm-link-list li a,
  html:not(.theme-light) .nav-wrapper .mm-link-list li a { color: #343a40 !important; }
  .nav-wrapper .mm-link-list li a i,
  html:not(.theme-light) .nav-wrapper .mm-link-list li a i { color: #adb5bd !important; }

  /* Scrolled home page dark-mode overrides - keep drawer light */
  body[data-page="home"] .site-header.scrolled .nav-wrapper .mm-link-list li a,
  body[data-page="home"] .site-header.scrolled .nav-wrapper .mm-intro-title { color: #1a1a2e !important; }
}

/* ══════════════════════════════════════════════════════════
   SHARED SECTOR COLOUR UTILITIES
   Used across portfolio, case-studies, news, sam-way,
   our-group, industries pages.
══════════════════════════════════════════════════════════ */

/* Icon / light background + coloured text */
.sector-icon-mobility    { background:rgba(227,30,37,.12);  color:#e31e25; }
.sector-icon-realestate  { background:rgba(79,70,229,.12);  color:#4f46e5; }
.sector-icon-energy      { background:rgba(217,119,6,.12);  color:#d97706; }
.sector-icon-hospitality { background:rgba(2,132,199,.12);  color:#0284c7; }
.sector-icon-food        { background:rgba(5,150,105,.12);  color:#059669; }
.sector-icon-events      { background:rgba(124,58,237,.12); color:#7c3aed; }
.sector-icon-education   { background:rgba(13,148,136,.12); color:#0d9488; }
.sector-icon-engineering { background:rgba(234,88,12,.12);  color:#ea580c; }
.sector-icon-business    { background:rgba(71,85,105,.12);  color:#475569; }
.sector-icon-purple      { background:#ede9fe;              color:#8b5cf6; }
.sector-icon-primary     { background:var(--primary-light); color:var(--primary); }
.sector-icon-secondary   { background:var(--secondary-light);color:var(--secondary); }

/* Badge / opaque background + white text */
.sector-badge-mobility    { background:rgba(227,30,37,.9);  color:#fff; }
.sector-badge-realestate  { background:rgba(79,70,229,.9);  color:#fff; }
.sector-badge-energy      { background:rgba(217,119,6,.9);  color:#fff; }
.sector-badge-hospitality { background:rgba(2,132,199,.9);  color:#fff; }
.sector-badge-food        { background:rgba(5,150,105,.9);  color:#fff; }
.sector-badge-events      { background:rgba(124,58,237,.9); color:#fff; }
.sector-badge-education   { background:rgba(13,148,136,.9); color:#fff; }
.sector-badge-engineering { background:rgba(234,88,12,.9);  color:#fff; }
.sector-badge-business    { background:rgba(71,85,105,.9);  color:#fff; }
.sector-badge-primary     { background:var(--primary);      color:#fff; }
.sector-badge-secondary   { background:var(--secondary);    color:#fff; }
.sector-badge-green       { background:#059669;             color:#fff; }

/* Shared layout helpers */
.stat-suffix  { font-size:1.4rem; }
.tab-icon     { margin-right:.3rem; font-size:.85em; }
.btn-row      { display:flex; gap:1rem; flex-wrap:wrap; }
.btn-row-center { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }
.para-top     { margin-top:1rem; }
.container-z1 { position:relative; z-index:1; }
.vis-band-col { max-width:560px; }

/* On-dark-background text helpers */
.section-label-on-dark  { color:rgba(255,255,255,.65); }
.section-label-center   { justify-content:center; }
.section-label-dim      { color:rgba(255,255,255,.55); }
.heading-on-dark        { color:var(--white); margin-bottom:1.25rem; text-shadow:0 2px 16px rgba(0,0,0,.7); }
.para-on-dark           { color:rgba(255,255,255,.85); font-size:1rem; line-height:1.75; margin-bottom:2rem; text-shadow:0 1px 8px rgba(0,0,0,.5); }
.para-dim               { color:rgba(255,255,255,.58); font-size:.9rem; line-height:1.7; margin-bottom:0; }

/* Visual band variants */
.visual-band-md  { min-height:380px; }
.visual-band-tall { min-height:400px; }
.visual-band-xl  { min-height:480px; }

/* Band stats (inside visual-band) */
.band-stats      { display:flex; justify-content:center; gap:3rem; flex-wrap:wrap; margin-top:1.5rem; }
.band-stat       { text-align:center; }
.band-stat-num   { font-family:var(--font-heading); font-size:2.5rem; font-weight:900; background:var(--grad-brand); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; filter:drop-shadow(0 2px 8px rgba(0,0,0,.6)); }
.band-stat-label { font-size:.8rem; color:rgba(255,255,255,.8); font-weight:700; text-transform:uppercase; letter-spacing:.1em; text-shadow:0 1px 6px rgba(0,0,0,.6); }
.band-title      { color:var(--white); font-size:clamp(1.5rem,4vw,2.5rem); font-weight:900; margin-bottom:.75rem; letter-spacing:-.02em; }
.band-text-center { color:rgba(255,255,255,.7); max-width:600px; margin:0 auto 2.5rem; font-size:1rem; line-height:1.75; }

/* Shared video-section / inline-style replacements */
.vs-lead-margin   { margin-top:1.25rem; }
.vs-btn-row       { display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; }
.spin-icon-primary{ color:var(--primary); font-size:.75rem; }
.section-sub-flush  { margin-bottom:0; }
.section-sub-compact{ margin-top:.5rem; margin-bottom:0; }

/* Dark sections - restore red glow */
.section-vision::before {
  background: radial-gradient(ellipse 65% 70% at 0% 50%, rgba(227,30,37,.14) 0%, transparent 55%) !important;
}
.section-capabilities::before {
  background: radial-gradient(ellipse 50% 65% at 100% 50%, rgba(227,30,37,.1) 0%, transparent 55%) !important;
}