/* ============================================================================
   MicroPower Website - Dark Editorial Design Stylesheet
   ============================================================================
   Minimalist dark theme with small-caps typography, elegant and refined
   Design system: Teal primary, Amber secondary, dark backgrounds
   Editorial aesthetic with generous whitespace and careful typographic hierarchy
   ============================================================================ */

/* ============================================================================
   1. CSS RESET & CUSTOM PROPERTIES
   ============================================================================ */

:root {
  /* Colors - Dark Editorial Palette */
  --color-bg: #0a0a0f;                 /* Near-black background */
  --color-bg-alt: #111118;             /* Slightly lighter dark */
  --color-bg-warm: #1a1620;            /* Warm dark – for contrast bands */
  --color-bg-contrast: #15161d;        /* Mid-dark – softer than bg, cooler than warm */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-primary: #0A6270;            /* Deep Teal */
  --color-secondary: #DC9B4B;          /* Warm Amber */
  --color-accent: #4CAF50;             /* Bio Green */
  --color-text: #ffffff;               /* White text */
  --color-text-muted: rgba(255, 255, 255, 0.6);
  --color-text-body: rgba(255, 255, 255, 0.75);
  --color-white: #FFFFFF;

  /* Gradients */
  --gradient-hero: linear-gradient(135deg, #0A6270 0%, #DC9B4B 100%);
  --gradient-overlay: linear-gradient(135deg, rgba(10, 98, 112, 0.85) 0%, rgba(220, 155, 75, 0.85) 100%);
  --gradient-placeholder: linear-gradient(135deg, #0A6270 0%, #DC9B4B 100%);

  /* Typography */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* Type Scale */
  --font-size-h1: clamp(2.5rem, 5vw, 4rem);
  --font-size-h2: clamp(2rem, 4vw, 3rem);
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.125rem;
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-4xl: 5rem;
  --spacing-5xl: 6rem;

  /* Layout */
  --max-width-container: 1200px;
  --max-width-narrow: 800px;
  --max-width-wide: 1400px;
  --gutter: 2rem;

  /* Breakpoints */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  /* Transitions & Animations */
  --transition-fast: 200ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;

  /* Shadows - Subtle on dark */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6);

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.5rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-body);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  display: block;
}

/* ============================================================================
   2. TYPOGRAPHY
   ============================================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-variant: small-caps;
  font-weight: 500;
  line-height: var(--line-height-tight);
  letter-spacing: 0.05em;
  text-transform: lowercase;
  margin: 0;
  color: var(--color-text);
}

/* Brand-name override – preserves CamelCase rendering inside headings.
   Without this, the global h1–h6 small-caps + lowercase rules collapse
   product names like PowerRing / PowerBlock to "POWERRING" / "POWERBLOCK"
   when rendered, which is wrong. Wrap brand names in <span class="brand-name">. */
h1 .brand-name, h2 .brand-name, h3 .brand-name,
h4 .brand-name, h5 .brand-name, h6 .brand-name {
  font-variant: normal;
  text-transform: none;
  letter-spacing: 0;
}

h1 {
  font-size: var(--font-size-h1);
  margin-bottom: var(--spacing-lg);
}

h2 {
  font-size: var(--font-size-h2);
  margin-bottom: var(--spacing-lg);
}

h3 {
  font-size: var(--font-size-h3);
  margin-bottom: var(--spacing-md);
}

h4 {
  font-size: var(--font-size-h4);
  margin-bottom: var(--spacing-md);
}

p {
  margin: 0 0 var(--spacing-md) 0;
  line-height: var(--line-height-relaxed);
  color: var(--color-text-body);
}

p:last-child {
  margin-bottom: 0;
}

small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-normal);
}

strong {
  font-weight: 600;
}

em {
  font-style: italic;
}

a {
  color: var(--color-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary);
}

ul, ol {
  margin: 0 0 var(--spacing-md) var(--spacing-lg);
  color: var(--color-text-body);
}

li {
  margin-bottom: var(--spacing-sm);
}

/* ============================================================================
   3. LAYOUT & GRID
   ============================================================================ */

.container {
  width: 100%;
  max-width: var(--max-width-container);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.container-narrow {
  width: 100%;
  max-width: var(--max-width-narrow);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.container-wide {
  width: 100%;
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

/* CSS Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-2xl);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-2xl);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-2xl);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-2xl);
}

@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Flexbox utilities */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-center {
  align-items: center;
  justify-content: center;
}

.flex-between {
  align-items: center;
  justify-content: space-between;
}

.flex-start {
  align-items: flex-start;
  justify-content: flex-start;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.gap-lg {
  gap: var(--spacing-lg);
}

.gap-xl {
  gap: var(--spacing-xl);
}

/* ============================================================================
   4. HEADER & NAVIGATION
   ============================================================================ */

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(10, 10, 15, 0.7);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-lg);
  max-width: var(--max-width-wide);
  margin: 0 auto;
}

.logo {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: opacity var(--transition-fast);
  flex-shrink: 0;
  margin-right: var(--spacing-2xl);
}

.logo span {
  font-variant: small-caps;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-text);
}

.logo:hover {
  opacity: 0.8;
}

.logo-icon {
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-weight: 600;
}

nav {
  display: flex;
  align-items: center;
  gap: 40px;
}

nav a {
  color: var(--color-text);
  font-size: 0.6875rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transition: color var(--transition-fast);
  position: relative;
  padding-bottom: var(--spacing-sm);
  line-height: 1;
  white-space: nowrap;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-menu > a,
.nav-menu > .nav-dropdown > a {
  font-size: 0.6875rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  height: 100%;
}

nav a:hover,
nav a.active {
  color: var(--color-secondary);
}

nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-secondary);
  transition: width var(--transition-normal);
}

nav a:hover::after,
nav a.active::after {
  width: 100%;
}

/* Dropdown menus */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-bg-alt);
  border-top: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg) 0;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-normal);
  margin-top: var(--spacing-xl);
  box-shadow: var(--shadow-lg);
}

.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-menu a {
  display: block;
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-body);
  text-transform: none;
  letter-spacing: normal;
  width: 100%;
  text-align: left;
  color: var(--color-text-body);
}

.nav-dropdown-menu a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-secondary);
}

/* Grouping headings inside nav dropdowns */
.nav-dropdown-menu .menu-heading {
  display: block;
  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-xs);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  opacity: 0.7;
  pointer-events: none;
}

.nav-dropdown-menu .menu-heading + a {
  padding-top: var(--spacing-xs);
}

.nav-dropdown-menu .menu-divider {
  display: block;
  height: 1px;
  margin: var(--spacing-xs) var(--spacing-lg);
  background: var(--color-border);
  opacity: 0.5;
}

/* Mobile hamburger menu */
.hamburger {
  display: none;
  flex-direction: column;
  gap: var(--spacing-sm);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.hamburger span {
  width: 24px;
  height: 2px;
  background: var(--color-text);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }

  /* Mobile audit 2026-05-19, RC6 + RC7: the previous selectors targeted `nav`
     and `nav.active`. The actual element is `<nav class="nav-menu active">`
     and the rule wasn't taking effect across pages — menu stayed at
     max-height: 0 even when JS added .active. Using .nav-menu directly
     guarantees the selector matches the element on every page, and
     flex-direction: column + align-items: flex-start fixes the
     half-centered / half-left-aligned drawer layout. */
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--color-bg-alt);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal);
    padding: 0;
  }

  .nav-menu.active {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    padding: var(--spacing-lg) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
  }

  .nav-menu > a,
  .nav-menu > .nav-dropdown,
  .nav-menu > .nav-dropdown > a {
    display: block;
    width: 100%;
    padding: var(--spacing-md) 0;
    text-align: left;
    height: auto;
  }

  /* Mobile: dropdown sub-menus always expanded inline - no JS toggle to break */
  .nav-dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    max-height: none;
    overflow: visible;
    transform: none;
    min-width: 0;
    margin: 0 0 var(--spacing-sm) var(--spacing-md);
    padding: 0;
    border-top: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  .nav-dropdown-menu a {
    padding: var(--spacing-sm) var(--spacing-md);
  }
}

/* Body padding for fixed header */
body {
  padding-top: 80px;
}

/* ============================================================================
   5. HERO SECTIONS
   ============================================================================ */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-white);
  overflow: hidden;
}

/* Home page hero - tall with background image */
.hero-home {
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
  padding: var(--spacing-5xl) var(--spacing-lg);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  color: var(--color-white);
}

.hero-home::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(10, 10, 15, 0.9) 0%, rgba(10, 10, 15, 0) 40%), linear-gradient(180deg, transparent 0%, rgba(10, 10, 15, 0.7) 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-home .hero-content {
  position: relative;
  z-index: 2;
  max-width: 650px;
  text-align: left;
  padding-bottom: 100px;
}

.hero-home h1 {
  font-variant: small-caps;
  font-weight: 500;
  font-size: var(--font-size-h1);
  margin-bottom: var(--spacing-lg);
  animation: fadeInUp 800ms ease-out;
  color: var(--color-white);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.05em;
  text-transform: lowercase;
}

.hero-home p {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-2xl);
  line-height: var(--line-height-relaxed);
  animation: fadeInUp 800ms ease-out 200ms both;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Inner page hero - shorter with background image and overlay */
.hero-inner {
  min-height: 560px;
  background-size: cover;
  background-position: center;
  padding: var(--spacing-3xl) var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--color-white);
  overflow: hidden;
}

.hero-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Bell-curve overlay: dark enough behind centred text for legibility, but
     never so dark at the bottom that the subject in the lower half disappears.
     Sits between the original "buried" gradient (35→75%) and an over-bright
     one (40→15%). The plant reads as supporting backdrop, not foreground. */
  background: linear-gradient(180deg,
    rgba(10, 10, 15, 0.50) 0%,
    rgba(10, 10, 15, 0.62) 45%,
    rgba(10, 10, 15, 0.55) 70%,
    rgba(10, 10, 15, 0.45) 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-inner .hero-content {
  text-align: center;
  max-width: 700px;
  position: relative;
  z-index: 2;
}

.hero-inner h1 {
  font-variant: small-caps;
  font-weight: 500;
  font-size: clamp(1.75rem, 5vw, 3rem);
  margin-bottom: var(--spacing-md);
  letter-spacing: 0.05em;
  text-transform: lowercase;
  /* Soft shadow so the lighter overlay below doesn't compromise legibility */
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.hero-inner p {
  font-size: 1.125rem;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

/* ============================================================================
   6. BUTTONS
   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  /* Use the display font so buttons belong to the headline system
     rather than the body UI. */
  font-family: var(--font-display);
  font-size: var(--font-size-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
  white-space: nowrap;
  min-height: 48px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Inline SVG icons inside .btn-icon — keep them vertically centred with the
   label, inherit colour from the button, and stop them stretching. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.btn-icon svg {
  display: block;
  flex: 0 0 auto;
}

/* Primary button - teal background */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(10, 98, 112, 0.3);
  opacity: 0.9;
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

/* Secondary button - amber outline */
.btn-secondary {
  background: transparent;
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-secondary);
  color: var(--color-bg);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(220, 155, 75, 0.3);
}

/* Ghost button - white outline for dark backgrounds */
.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}

.btn-ghost:hover:not(:disabled) {
  background: transparent;
  color: var(--color-secondary);
  border-color: var(--color-secondary);
  transform: translateY(-2px);
}

/* Small button */
.btn-sm {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: 0.75rem;
  min-height: 40px;
}

/* Large button */
.btn-lg {
  padding: var(--spacing-lg) var(--spacing-2xl);
  font-size: 1rem;
  min-height: 56px;
}

/* Block button */
.btn-block {
  width: 100%;
}

/* Mobile audit 2026-05-19, RC2: long uppercase CTAs like "Explore the
   Applications" / "View Patent Portfolio (NDA)" stayed on one line because
   the base .btn rule sets white-space: nowrap. On a 385px viewport they
   pushed the page wider, producing the "blank column on the right" effect.
   Below 768px we let labels wrap, cap the button width at the parent, and
   add tighter horizontal padding so wrapped labels still look like buttons. */
@media (max-width: 768px) {
  .btn {
    white-space: normal;
    text-align: center;
    max-width: 100%;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
  .btn-lg {
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
    line-height: 1.25;
  }
}

/* ============================================================================
   7. CARDS
   ============================================================================ */

.card {
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
  border: 1px solid var(--color-border);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(255, 255, 255, 0.15);
}

.card-header {
  padding: var(--spacing-2xl);
  border-bottom: 1px solid var(--color-border);
}

.card-body {
  padding: var(--spacing-2xl);
  color: var(--color-text-body);
}

.card-footer {
  padding: var(--spacing-2xl);
  border-top: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

/* Feature card */
.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding: var(--spacing-2xl);
  border-left: 2px solid var(--color-secondary);
  padding-left: 24px;
}

.feature-card-icon {
  width: 64px;
  height: 64px;
  background: rgba(10, 98, 112, 0.2);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 2rem;
}

.feature-card h3 {
  color: var(--color-text);
  font-variant: small-caps;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: lowercase;
}

.feature-card p {
  color: var(--color-text-body);
  margin-bottom: 0;
}

/* Stat card */
.stat-card {
  text-align: center;
  padding: var(--spacing-2xl);
  border: none;
  background: transparent;
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 6.5rem);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.stat-label {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  text-transform: lowercase;
  font-variant: small-caps;
  font-weight: 500;
  letter-spacing: 0.1em;
}

/* Case study card */
.case-study-card {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--color-white);
  border: none;
}

.case-study-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-overlay);
  z-index: 1;
}

.case-study-card .card-body {
  position: relative;
  z-index: 2;
  padding: var(--spacing-2xl);
}

.case-study-card h3,
.case-study-card p {
  color: var(--color-white);
}

/* News card */
.news-card {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-lg);
  border-left: 2px solid var(--color-secondary);
  padding-left: 20px;
  background: var(--color-bg-alt);
}

.news-card-image {
  width: 100%;
  height: 90px;
  background: var(--gradient-placeholder);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-sm);
}

.news-card-date {
  display: block;
  font-size: var(--font-size-small);
  color: var(--color-secondary);
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.news-card h3 {
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
  font-variant: small-caps;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  font-size: 1.05rem;
  line-height: 1.3;
}

.news-card p {
  color: var(--color-text-body);
  flex-grow: 1;
  margin-bottom: var(--spacing-md);
  font-size: 0.925rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================================
   8. SECTIONS
   ============================================================================ */

section {
  padding: 120px var(--spacing-lg);
  background: var(--color-bg);
}

@media (max-width: 1024px) {
  section {
    padding: 80px var(--spacing-lg);
  }
}

@media (max-width: 640px) {
  section {
    padding: 60px var(--spacing-lg);
  }
}

section.light-bg {
  background: var(--color-bg-contrast);
}

section.gray-bg {
  background: var(--color-bg-alt);
}

section.warm-bg {
  background: var(--color-bg-warm);
}

section.dark-bg {
  background: var(--color-bg);
  color: var(--color-text-body);
}

section.dark-bg h2,
section.dark-bg h3,
section.dark-bg h4 {
  color: var(--color-text);
}

section.dark-bg p {
  color: var(--color-text-body);
}

section.dark-bg a {
  color: var(--color-secondary);
}

section + section {
  border-top: 1px solid var(--color-border);
}

.section-header {
  text-align: center;
  margin-bottom: var(--spacing-3xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.section-header h2 {
  color: var(--color-text);
  font-variant: small-caps;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  margin-bottom: var(--spacing-md);
}

.section-header p {
  font-size: 1.125rem;
  color: var(--color-text-body);
}

/* ============================================================================
   9. STATS & COUNTERS
   ============================================================================ */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-2xl);
  margin: var(--spacing-3xl) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-3xl) 0;
}

.stat-item {
  text-align: center;
  padding: 0 var(--spacing-2xl);
  border-right: 1px solid var(--color-border);
}

.stat-item:last-child {
  border-right: none;
}

.stat-item .stat-number {
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--color-primary);
}

.stat-item .stat-label {
  color: var(--color-text-muted);
  font-variant: small-caps;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: lowercase;
}

@keyframes countUp {
  from {
    counter-set: stat-counter 0;
  }
  to {
    counter-set: stat-counter var(--end-value);
  }
}

/* ============================================================================
   10. VALIDATION BAR (Logo Row)
   ============================================================================ */

.validation-bar {
  background: var(--color-bg-alt);
  padding: var(--spacing-2xl) var(--spacing-lg);
  text-align: center;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.validation-bar p {
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xl);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2xl);
}

.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  opacity: 0.5;
  transition: opacity var(--transition-normal);
  filter: grayscale(1);
}

.logo-item:hover {
  opacity: 1;
  filter: grayscale(0);
}

.logo-item img {
  max-width: 150px;
  height: auto;
}

/* ============================================================================
   11. FOOTER
   ============================================================================ */

footer {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  padding: var(--spacing-5xl) var(--spacing-lg) var(--spacing-2xl);
  border-top: 1px solid var(--color-border);
}

.footer-content {
  max-width: var(--max-width-container);
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-2xl);
  margin-bottom: var(--spacing-3xl);
}

.footer-column h4 {
  color: var(--color-text);
  margin-bottom: var(--spacing-lg);
  font-variant: small-caps;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.footer-column ul {
  list-style: none;
  margin: 0;
}

.footer-column ul li {
  margin-bottom: var(--spacing-md);
}

.footer-column a {
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
  font-size: 0.875rem;
}

.footer-column a:hover {
  color: var(--color-secondary);
}

/* Newsletter signup */
.newsletter-form {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

.newsletter-form input {
  flex: 1;
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  transition: border-color var(--transition-fast);
}

.newsletter-form input::placeholder {
  color: var(--color-text-muted);
}

.newsletter-form input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: rgba(10, 98, 112, 0.1);
}

.newsletter-form button {
  padding: var(--spacing-md) var(--spacing-xl);
}

/* Footer bottom */
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding-top: var(--spacing-2xl);
  border-top: 1px solid var(--color-border);
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
}

.social-links {
  display: flex;
  gap: var(--spacing-lg);
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-full);
  color: var(--color-text);
  transition: all var(--transition-fast);
  border: 1px solid var(--color-border);
}

.social-links a:hover {
  background: var(--color-secondary);
  color: var(--color-bg);
  border-color: var(--color-secondary);
}

.social-links a svg {
  width: 20px;
  height: 20px;
  display: block;
}

.footer-copyright {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

/* ============================================================================
   12. TABLES
   ============================================================================ */

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-2xl) 0;
}

thead {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
}

th {
  padding: var(--spacing-lg);
  text-align: left;
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

td {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-body);
}

tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

tbody tr:last-child td {
  border-bottom: none;
}

.table-comparison {
  background: transparent;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.table-comparison th {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
}

.table-comparison tbody tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.02);
}

/* Mobile audit 2026-05-19, RC3 (tables) + RC2/3 (containers):
   On a 385px viewport, tables 466–716px wide were dragging their parent
   section + container + main wider than the viewport, producing the
   "blank column on the right when you scroll right" issue. Strategy:
   (a) cap every common container/wrapper at the viewport so children can
       no longer push them wider;
   (b) turn tables into their own horizontal-scroll viewport with a soft
       visual hint that there's more content to the right. */
@media (max-width: 768px) {
  main,
  section,
  .container,
  .container-narrow,
  .card,
  .card-body,
  .animate-on-scroll {
    max-width: 100%;
    min-width: 0;
  }

  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Soft right-edge fade so users see there's more table to the side */
  .table-comparison,
  .card-body > table {
    background-image: linear-gradient(to right, transparent calc(100% - 24px), rgba(220, 155, 75, 0.18) 100%);
    background-attachment: local;
    background-repeat: no-repeat;
  }

  table th,
  table td {
    padding: var(--spacing-md);
    font-size: 0.85rem;
  }
}

/* ============================================================================
   13. IMAGE PLACEHOLDERS & IMAGES
   ============================================================================ */

.img-placeholder {
  display: block;
  width: 100%;
  height: 400px;
  background: var(--gradient-placeholder);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.img-placeholder::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 35px,
      rgba(255, 255, 255, 0.05) 35px,
      rgba(255, 255, 255, 0.05) 70px
    );
  pointer-events: none;
}

.img-placeholder-sm {
  height: 200px;
}

.img-placeholder-lg {
  height: 600px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

/* ============================================================================
   14. ANIMATIONS
   ============================================================================ */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.animate-fade-in {
  animation: fadeIn 600ms ease-out;
}

.animate-fade-in-up {
  animation: fadeInUp 600ms ease-out;
}

.animate-fade-in-down {
  animation: fadeInDown 600ms ease-out;
}

.animate-slide-in-left {
  animation: slideInLeft 600ms ease-out;
}

.animate-slide-in-right {
  animation: slideInRight 600ms ease-out;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Scroll-triggered animations
   ---------------------------------------------------------------------------
   Mobile audit 2026-05-19, RC4: previously the default state was opacity:0
   waiting for the IntersectionObserver to add .animated. On mobile the
   observer fires inconsistently and entire pages (e.g. about.html) stayed
   blank. Default is now visible; the observer-driven .animated class is
   what plays the entrance animation. A separate .js-ready hook lets the
   JS opt-in to the hidden-then-revealed pattern when the script is
   guaranteed to run. */
.scroll-fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}

/* When JS has booted, hide elements that haven't yet entered the viewport so
   the observer can animate them in. If JS never runs, the rule above wins
   and content stays visible. */
html.js-ready .scroll-fade-in:not(.animated):not(.visible) {
  opacity: 0;
  transform: translateY(20px);
}

.scroll-fade-in.visible,
.scroll-fade-in.animated {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================================
   15. UTILITY CLASSES
   ============================================================================ */

/* Text alignment */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

@media (max-width: 768px) {
  .text-center-mobile {
    text-align: center;
  }
}

/* Text colors */
.text-primary {
  color: var(--color-primary);
}

.text-secondary {
  color: var(--color-secondary);
}

.text-accent {
  color: var(--color-accent);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-white {
  color: var(--color-text);
}

/* Spacing utilities */
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }

.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }

.p-0 { padding: 0; }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }

/* Visibility utilities */
.hidden {
  display: none;
}

.invisible {
  visibility: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@media (max-width: 768px) {
  .hidden-mobile {
    display: none;
  }
}

@media (min-width: 769px) {
  .hidden-desktop {
    display: none;
  }
}

/* Background utilities */
.bg-primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.bg-secondary {
  background: var(--color-secondary);
  color: var(--color-bg);
}

.bg-accent {
  background: var(--color-accent);
  color: var(--color-white);
}

.bg-light {
  background: var(--color-bg-alt);
}

/* ============================================================================
   16. RESPONSIVE DESIGN
   ============================================================================ */

/* Mobile-first styles above, desktop adjustments here */

@media (min-width: 768px) {
  .container {
    padding: 0 var(--spacing-2xl);
  }

  .container-narrow {
    padding: 0 var(--spacing-2xl);
  }

  section {
    padding: 120px var(--spacing-2xl);
  }

  .header-content {
    padding: var(--spacing-lg) var(--spacing-2xl);
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 var(--spacing-2xl);
  }

  .hero-home {
    padding: var(--spacing-5xl) var(--spacing-2xl);
  }

  .hero-inner {
    padding: var(--spacing-5xl) var(--spacing-2xl);
  }

  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Print styles */
@media print {
  header,
  footer,
  .hidden-print {
    display: none;
  }

  body {
    padding-top: 0;
    background: var(--color-white);
    color: var(--color-text);
  }

  .card {
    box-shadow: none;
    border: 1px solid var(--color-border);
  }
}

/* ============================================================================
   17. FORMS
   ============================================================================ */

form {
  margin: var(--spacing-2xl) 0;
}

.form-group {
  margin-bottom: var(--spacing-lg);
}

label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.05);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  background: rgba(10, 98, 112, 0.1);
  box-shadow: 0 0 0 3px rgba(10, 98, 112, 0.15);
}

textarea {
  resize: vertical;
  min-height: 120px;
}

input[type="checkbox"],
input[type="radio"] {
  margin-right: var(--spacing-sm);
  accent-color: var(--color-primary);
}

.form-error {
  color: #FF6B6B;
  font-size: var(--font-size-small);
  margin-top: var(--spacing-sm);
}

.form-success {
  color: #51CF66;
  font-size: var(--font-size-small);
  margin-top: var(--spacing-sm);
}

/* ============================================================================
   18. MISCELLANEOUS
   ============================================================================ */

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--spacing-2xl) 0;
}

.divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  margin: var(--spacing-2xl) 0;
}

blockquote {
  padding-left: var(--spacing-lg);
  border-left: 2px solid var(--color-secondary);
  margin: var(--spacing-2xl) 0;
  font-style: italic;
  color: var(--color-text-body);
  font-size: 1.125rem;
}

code {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-secondary);
  padding: 0.25em 0.5em;
  border-radius: var(--radius-sm);
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

pre {
  background: rgba(255, 255, 255, 0.02);
  color: var(--color-text-body);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin: var(--spacing-2xl) 0;
  border: 1px solid var(--color-border);
}

pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  border: none;
}

.badge {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-full);
  font-size: var(--font-size-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.badge-secondary {
  background: var(--color-secondary);
  color: var(--color-bg);
}

.badge-accent {
  background: var(--color-accent);
  color: var(--color-white);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  font-size: var(--font-size-small);
  margin-bottom: var(--spacing-xl);
  color: var(--color-text-muted);
}

.breadcrumb a {
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.breadcrumb a:hover {
  color: var(--color-secondary);
}

.breadcrumb .separator {
  color: rgba(255, 255, 255, 0.3);
}

.breadcrumb .active {
  color: var(--color-secondary);
  pointer-events: none;
}

/* ============================================================================
   UTILITY CLASSES FOR DARK THEME ADJUSTMENTS
   ============================================================================ */

.cta-section {
  background: var(--gradient-hero);
  color: var(--color-white);
  padding: var(--spacing-5xl) var(--spacing-lg);
  text-align: center;
}

.highlight-accent {
  background: var(--color-accent);
  color: var(--color-white);
}

.accent-text {
  color: var(--color-secondary);
}

/* ============================================================================
   12. IMAGE-TO-TEXT HEIGHT NORMALISATION
   Added 2026-04-19 to fix two recurring layout issues site-wide:
   (a) Inside a .grid-2 row with an image on one side and a text block on
       the other, the image was rendering at its natural height while the
       text column expanded – producing uneven columns. We force images
       inside .grid-2 to fill their column vertically with object-fit:cover
       so both columns have the same visible height.
   (b) Standalone "banner" images scattered through applications-* pages
       used a mix of 300px/360px/auto heights – which read as inconsistent
       when scrolling. We standardise any image that sits alone in a
       section wrapper to a 380px display height. Inline-style heights on
       individual imgs still override this via CSS cascade normality;
       !important is only used where inline styles set a smaller fixed
       height we want to bring up to the site-wide standard.
   ============================================================================ */

/* Grid-2 side-by-side images → fill column height, cover-crop to fit.
   aspect-ratio keeps them visually sensible when the text column is very
   short (prevents tall narrow images); max-height caps very tall columns. */
.grid-2 > div > img,
.grid-2 > .animate-on-scroll > img {
  width: 100% !important;
  height: 100% !important;
  min-height: 320px;
  max-height: 520px;
  aspect-ratio: auto;
  object-fit: cover;
  display: block;
}

/* Standalone banner images that live inside a simple <div style="margin..."><img></div>
   pattern – standardise to 380px on desktop, auto-shrink on mobile. */
section > .container > div[style*="margin: var(--spacing-2xl) 0"] > img {
  height: 380px !important;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  opacity: 0.92;
}
@media (max-width: 720px){
  section > .container > div[style*="margin: var(--spacing-2xl) 0"] > img {
    height: 260px !important;
  }
  .grid-2 > div > img,
  .grid-2 > .animate-on-scroll > img {
    min-height: 240px;
    max-height: 360px;
  }
}

/* ============================================================================
   13. IMAGE NORMALISATION – REV 2 (2026-04-19)
   Wider coverage than Section 12. Catches every content image in a section,
   not just the narrow wrapper pattern. Reasoning:
   - Grid-2 side-by-side rows: stretch image to match text column height.
   - Banner images (hardcoded 300/360/380px inline heights): clamp to 380px.
   - Figures with aspect-ratio already set: left alone (detected via
     [style*="aspect-ratio"]).
   ============================================================================ */

/* Grid-2 IMAGE-BESIDE-TEXT FIX (rev 3, 2026-04-19):
   Force every grid-2 child to stretch to row height even when the parent
   has `align-items: center` inline. Then the image inside fills that
   stretched cell – producing a left image that matches the right text
   column's height instead of floating short.
   Also uses aspect-ratio:auto on the image wrapper so native image
   proportions don't short-circuit the stretch. */
.grid-2 > div,
.grid-2 > .animate-on-scroll,
.grid-2 > figure {
  align-self: stretch;
}
.grid-2 > div > img:not([style*="aspect-ratio"]),
.grid-2 > .animate-on-scroll > img:not([style*="aspect-ratio"]),
.grid-2 > figure > img:not([style*="aspect-ratio"]) {
  width: 100% !important;
  height: 100% !important;
  min-height: 360px;
  max-height: 620px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
}

/* Belt-and-braces: if the image is the only child of its grid cell, flex
   the cell so the image can honestly fill available height (some browsers
   treat `height:100%` on a block child inconsistently inside a grid cell
   whose content is just an image). */
.grid-2 > div:only-child,
.grid-2 > div,
.grid-2 > .animate-on-scroll {
  display: block;
}
.grid-2 > div > img:first-child:last-child,
.grid-2 > .animate-on-scroll > img:first-child:last-child {
  height: 100% !important;
  min-height: 360px;
}

/* Catches all "banner" images with hardcoded inline heights – standardise. */
section img[style*="height: 300px"],
section img[style*="height:300px"],
section img[style*="height: 360px"],
section img[style*="height:360px"],
section img[style*="height: 400px"],
section img[style*="height:400px"] {
  height: 380px !important;
  width: 100% !important;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* Mobile scaling. At <720px the grid collapses to a single column, so the
   stretch-to-row-height logic no longer helps – each image becomes a
   banner with its own natural proportions. We cap it for tidiness. */
@media (max-width: 720px){
  .grid-2 > div > img:not([style*="aspect-ratio"]),
  .grid-2 > .animate-on-scroll > img:not([style*="aspect-ratio"]),
  .grid-2 > figure > img:not([style*="aspect-ratio"]) {
    min-height: 240px;
    max-height: 360px;
  }
  .grid-2 > div > img:first-child:last-child,
  .grid-2 > .animate-on-scroll > img:first-child:last-child {
    min-height: 240px;
    height: 280px !important;
  }
  section img[style*="height: 300px"],
  section img[style*="height:300px"],
  section img[style*="height: 360px"],
  section img[style*="height:360px"] {
    height: 260px !important;
  }
}

/* ============================================================================
   14. TABLE CONTRAST FIX (2026-04-19)
   Many application pages define tables with hardcoded light backgrounds
   (`background: white`, `background: #FAF7F2`, `background: #EFE8DC`,
   `background: #fafafa`) designed for a light theme. The site is dark –
   those white cells sit on dark cards with inherited white text, producing
   invisible tables. Below we force tables on dark backgrounds to read.
   ============================================================================ */

/* All content tables: force visible text and override light inline backgrounds.
   Selector is broad (any table inside <section>) so tables not wrapped in a
   .card also get the dark-theme-friendly treatment. */
section table {
  color: var(--color-text) !important;
  background: transparent !important;
}
section table td,
section table th {
  color: var(--color-text) !important;
}

/* Override hardcoded white/cream table backgrounds (bioenergetics tiers, etc.) */
section table[style*="background: white"],
section table[style*="background:white"],
section table[style*="background: #fff"],
section table[style*="background:#fff"] {
  background: transparent !important;
}

/* Rows with light-cream inline backgrounds – swap to subtle dark stripe. */
section table tr[style*="background: #FAF7F2"],
section table tr[style*="background:#FAF7F2"],
section table tr[style*="background: #fafafa"],
section table tr[style*="background:#fafafa"],
section table tr[style*="background: #EFE8DC"],
section table tr[style*="background:#EFE8DC"],
section table tr[style*="background: #f0f0f0"] {
  background: rgba(255, 255, 255, 0.035) !important;
}

/* thead row with cream background – use brand teal for readable header. */
section table thead tr[style*="background: #EFE8DC"],
section table thead tr[style*="background:#EFE8DC"] {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}
section table thead tr[style*="background: #EFE8DC"] th,
section table thead tr[style*="background:#EFE8DC"] th {
  color: var(--color-white) !important;
  border-bottom-color: var(--color-secondary) !important;
}

/* Also fix thead row that uses var(--color-primary) inline – ensure th text is white */
section table thead tr[style*="var(--color-primary)"] th,
section table thead tr[style*="color: white"] th {
  color: var(--color-white) !important;
}

/* Light borders on cells – darken for visibility against dark row backgrounds. */
section table td[style*="border-bottom: 1px solid #eee"],
section table td[style*="border-bottom: 1px solid #ddd"] {
  border-bottom-color: var(--color-border) !important;
}

/* Muted-grey paragraph subtitles on dark cards – lift to muted-white. */
.card p[style*="color: #666"],
.card p[style*="color:#666"],
section p[style*="color: #666"] {
  color: var(--color-text-muted) !important;
}

/* Strong/em inside cells get a gold highlight instead of inheriting. */
section table strong { color: var(--color-text); }
section table em { color: var(--color-text-body); }

/* Links inside tables use the accent colour for visibility. */
section table a { color: var(--color-secondary); }

/* ============================================================================
   15. STAT-NUMBER BAND (2026-04-19)
   The big hero stat numbers on application pages were rendering at up to
   6.5rem with awkward line-height, making "$400B+" and "15–30%" wrap or
   collide with their labels. Rebalance sizing and tighten the label.
   ============================================================================ */

.stat-number {
  font-size: clamp(2.25rem, 4.2vw, 3.75rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: var(--spacing-md) !important;
  white-space: nowrap;
  /* colour stays as whatever the page had – this rule only rebalances size + spacing */
}

/* Compact variant for stat rows that contain long values such as
   "450–630°C" or "300–2,400°C". At the default size these strings are wider
   than the narrow 3-up card and get clipped by the card's overflow:hidden.
   Add class="stat-row-compact" to the grid-3 wrapper to scale all three
   numbers in that row down together, so they stay on one line and stay
   balanced. The clamp is tuned so the longest value ("300–2,400°C") fits the
   narrowest card at every breakpoint – the tight 3-up desktop layout and
   small phones alike – while still reading as a bold hero figure. */
.stat-row-compact .stat-number {
  font-size: clamp(1.75rem, 2.7vw, 2.35rem) !important;
}

.stat-label {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.3 !important;
  color: var(--color-text) !important;
  text-transform: none !important;
  font-variant: normal !important;
  opacity: 0.9;
}

/* Ensure the three cards in a grid-3 stat row align their tops cleanly. */
.grid-3 .card .card-body {
  padding-top: var(--spacing-2xl);
  padding-bottom: var(--spacing-2xl);
}

/* ============================================================================
   16. CHEMICAL FORMULA CASING FIX (2026-04-19)
   h1–h6 globally use font-variant: small-caps, which makes lowercase letters
   render as small uppercase – turning "BiTe" into "BITE" and "PbTe" into
   "PBTE". Same for .btn and .stat-label. Wrap any chemical formula token in
   <span class="chem">…</span> and it will render with correct mixed case.
   ============================================================================ */

.chem {
  font-variant: normal !important;
  font-variant-caps: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-feature-settings: normal !important;
}

/* ============================================================================
   CINEMATIC VIDEO STRIP
   ----------------------------------------------------------------------------
   Used as a full-bleed transitional band between text-heavy sections. Plays a
   muted looping video as the background, with an optional headline + lede
   anchored at the bottom-left over a soft dark gradient for legibility.
   Keep aspect-ratio/height conservative – this is a scroll moment, not a hero.
   ============================================================================ */
.cinematic-strip {
  position: relative;
  height: 62vh;
  min-height: 360px;
  max-height: 720px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  /* The poster image is rendered as a section background (not just the
     <video poster> attribute) so it sizes correctly even when the lazy-load
     observer hasn't promoted data-src yet, or where the mobile browser
     ignores object-fit on the video element. Round 2 of the mobile audit,
     2026-05-19: previously the bare <video poster=...> with no src was
     rendering at the poster image's intrinsic landscape dimensions on
     mobile, pushing the section wider than the viewport. */
  background: #0a0a0f url('../video/home-industrial-scene-poster.jpg') center/cover no-repeat;
}
.cinematic-strip .cinematic-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
  pointer-events: none;
}
.cinematic-strip::before {       /* gradient overlay so text reads cleanly */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 15, 0.15) 0%, rgba(10, 10, 15, 0) 35%, rgba(10, 10, 15, 0.88) 100%);
  z-index: 1;
  pointer-events: none;
}
.cinematic-strip .cinematic-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--spacing-3xl) 0;
}
.cinematic-strip h2 {
  color: var(--color-white);
  margin-bottom: var(--spacing-md);
}
.cinematic-strip p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 640px;
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .cinematic-strip .cinematic-video { display: none; }
}

/* ============================================================================
   END OF STYLESHEET
   ============================================================================ */


/* ============================================================================
   Mobile fixes 2026-05-20 - badge-row stacking + table card-stacking
   ============================================================================ */
@media (max-width: 768px) {
  /* Oversized 2xl card padding eats width on mobile - tighten it */
  .card-body { padding: var(--spacing-lg); }

  .badge-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--spacing-md) !important;
  }

  table.mobile-stack {
    display: block;
    width: 100%;
    overflow: visible;
    background-image: none;
  }
  table.mobile-stack thead { display: none; }
  table.mobile-stack tbody,
  table.mobile-stack tr,
  table.mobile-stack td { display: block; width: 100%; }
  table.mobile-stack tr {
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-contrast);
  }
  table.mobile-stack td {
    display: block;
    padding: 0.5rem 0.9rem;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    font-size: 0.92rem;
  }
  table.mobile-stack td:last-child { border-bottom: 0; }
  table.mobile-stack td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 2px;
  }
  table.mobile-stack td:first-child {
    background: rgba(255, 255, 255, 0.05);
    font-weight: 700;
    font-size: 1rem;
  }
  table.mobile-stack td:first-child::before { display: none; }
  .table-comparison:has(table.mobile-stack) { background-image: none; }
}