/* ============================================================
   ERS ENERGY — COMPONENTS
   components.css — all UI components using token variables
   ============================================================ */

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announcement-bar {
  background: #a3c1c1;
  color: #1a1a1a;
  padding-block: var(--sp-2);
  padding-inline: var(--container-pad);
  text-align: left;
  font-size: var(--type-sm);
  font-weight: var(--fw-medium);
  position: relative;
  z-index: calc(var(--z-sticky) - 1);
}

.announcement-bar .container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.announcement-bar a {
  color: #1a1a1a;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: var(--fw-semibold);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

.announcement-bar a:hover { opacity: 0.85; }

.announcement-dismiss {
  position: absolute;
  right: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(0,0,0,0.5);
  cursor: pointer;
  padding: var(--sp-1);
  display: flex;
  align-items: center;
  transition: color var(--transition-base);
}

.announcement-dismiss:hover { color: #1a1a1a; }

/* ============================================================
   COMPONENT PLACEHOLDERS (prevents layout shift during partial loading)
   ============================================================ */
#site-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  min-height: 64px;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  background: var(--bg-nav);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: box-shadow var(--transition-slow), border-color var(--transition-slow), background var(--transition-slow);
}

.nav.scrolled {
  box-shadow: var(--shadow-nav);
  border-bottom-color: var(--border-strong);
}

.nav__inner {
  display: flex;
  align-items: center;
  height: 64px;
  gap: var(--sp-8);
}

.nav__logo {
  font-size: var(--type-xl);
  font-weight: var(--fw-black);
  letter-spacing: -0.04em;
  color: var(--text-primary);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.nav__logo-img {
  height: 36px;
  width: auto;
}
.nav__logo-img--dark { display: none; }
[data-theme="dark"] .nav__logo-img--light { display: none; }
[data-theme="dark"] .nav__logo-img--dark { display: block; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex: 1;
}

.nav__link {
  font-size: var(--type-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  transition: color var(--transition-base), background var(--transition-base);
  white-space: nowrap;
}

.nav__link:hover,
.nav__link.active {
  color: var(--text-primary);
  background: var(--bg-surface);
}

/* Dropdown trigger */
.nav__dropdown {
  position: relative;
}

.nav__dropdown-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.nav__dropdown-toggle .drop-arrow {
  font-size: 16px;
  transition: transform var(--transition-base);
  opacity: 0.5;
}

.nav__dropdown:hover .drop-arrow,
.nav__dropdown.open .drop-arrow {
  transform: rotate(180deg);
  opacity: 1;
}

/* Mega menu */
.mega-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: repeat(3, 200px);
  align-items: start;
  gap: 0;
  padding: var(--sp-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-slow), visibility var(--transition-slow), transform var(--transition-slow);
  transform: translateY(-8px);
  pointer-events: none;
}

.nav__dropdown:hover .mega-menu,
.nav__dropdown.open .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.mega-menu__col {
  padding: var(--sp-3);
}

.mega-menu__col + .mega-menu__col {
  border-left: 1px solid var(--border);
}

.mega-menu__heading {
  font-size: var(--type-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--sp-1) var(--sp-2) var(--sp-2);
  display: block;
  line-height: 1.4;
  min-height: calc(2.8em + var(--sp-1) + var(--sp-2));
}

.mega-menu__link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--type-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  padding: var(--sp-2) var(--sp-2);
  border-radius: var(--radius-sm);
  transition: color var(--transition-base), background var(--transition-base);
}

.mega-menu__link:hover {
  color: var(--text-primary);
  background: var(--bg-surface);
}

.mega-menu__link .material-symbols-outlined {
  font-size: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Dropdown (simple) */
.simple-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 320px;
  padding: var(--sp-2);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-slow), visibility var(--transition-slow);
  pointer-events: none;
}

.nav__dropdown:hover .simple-dropdown,
.nav__dropdown.open .simple-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.simple-dropdown__link {
  display: block;
  font-size: var(--type-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  transition: color var(--transition-base), background var(--transition-base);
}

.simple-dropdown__link--rich {
  display: block;
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  transition: color var(--transition-base), background var(--transition-base);
}
.simple-dropdown__title {
  display: block;
  font-size: var(--type-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  line-height: 1.3;
  transition: color var(--transition-base);
}
.simple-dropdown__desc {
  display: block;
  font-size: var(--type-xs);
  font-weight: var(--fw-regular);
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: 2px;
}
.simple-dropdown__link--rich:hover .simple-dropdown__title { color: var(--text-primary); }
.simple-dropdown__group-label {
  display: block;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--sp-3) var(--sp-3) var(--sp-1);
}
.simple-dropdown__group-label:not(:first-child) {
  border-top: 1px solid var(--border);
  margin-top: var(--sp-1);
}

.simple-dropdown__link:hover {
  color: var(--text-primary);
  background: var(--bg-surface);
}

/* Nav right side */
.nav__contact-btn {
  position: relative;
  padding: 3px 14px 3px 3px;
}

.nav__contact-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: var(--sp-2);
  border: 1px solid rgba(255,255,255,0.4);
}

.nav__right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-left: auto;
  flex-shrink: 0;
}

/* Theme toggle */
.theme-toggle {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  transition: color var(--transition-base), border-color var(--transition-base);
  cursor: pointer;
  border: 1px solid var(--border);
}

.theme-toggle:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.theme-toggle .material-symbols-outlined {
  font-size: 18px;
}

.theme-toggle__dark { display: none; }
.theme-toggle__light { display: block; }

[data-theme="dark"] .theme-toggle__dark { display: block; }
[data-theme="dark"] .theme-toggle__light { display: none; }

/* Language switcher — single button with dropdown (EN ▾ → English / Bahasa Malaysia / 中文) */
.lang-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  user-select: none;
}

.lang-switcher__toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  padding: 0 var(--sp-2) 0 var(--sp-3);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 18px;
  color: var(--text-secondary);
  font-size: var(--type-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.lang-switcher__toggle:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.lang-switcher__chevron {
  font-size: 18px !important;
  transition: transform var(--transition-base);
}

.lang-switcher.is-open .lang-switcher__chevron {
  transform: rotate(180deg);
}

.lang-switcher__menu {
  position: absolute;
  top: calc(100% + var(--sp-2));
  right: 0;
  min-width: 180px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--sp-2);
  display: none;
  flex-direction: column;
  z-index: 100;
}

.lang-switcher.is-open .lang-switcher__menu {
  display: flex;
}

.lang-switcher__option {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  color: var(--text-secondary);
  font-size: var(--type-sm);
  text-decoration: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}

.lang-switcher__option:hover {
  background: var(--bg-page);
  color: var(--text-primary);
}

.lang-switcher__option--current {
  display: none;
}

/* Drawer-specific lang-switcher positioning. The switcher now lives in
   .nav__drawer-header anchored top-left; the dropdown must open to the
   right of the toggle (left:0) instead of right-aligned, so it stays
   on-screen on phones. The earlier center-translate was for an older
   layout where the switcher sat at the bottom of the drawer. */
.nav__drawer .lang-switcher__menu {
  right: auto;
  left: 0;
  transform: none;
}

/* Hamburger */
.nav__hamburger {
  display: none;
  width: 36px;
  height: 36px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border);
}

.nav__hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text-secondary);
  border-radius: 2px;
  transition: all var(--transition-slow);
}

.nav__hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__hamburger.open span:nth-child(2) {
  opacity: 0;
}
.nav__hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer */
.nav__drawer {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg-page);
  z-index: calc(var(--z-sticky) - 1);
  padding: 80px var(--container-pad) var(--sp-8);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--transition-smooth);
}

.nav__drawer.open {
  transform: translateX(0);
}

/* Drawer header — lang switcher on the left, X close on the right.
   Sits above all sections so the close affordance is the first thing
   the user sees on the drawer open, and the language switch is one
   tap away without scrolling past the menu. */
.nav__drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.nav__drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.nav__drawer-close:hover {
  background: var(--bg-surface);
  border-color: var(--accent-orange);
  color: var(--accent-orange);
}
.nav__drawer-close .material-symbols-outlined {
  font-size: 22px;
}

.nav__drawer-section {
  margin-bottom: var(--sp-6);
}

.nav__drawer-label {
  font-size: var(--type-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent-orange);
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-2);
}

.nav__drawer-link {
  display: block;
  font-size: var(--type-lg);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--border);
  transition: color var(--transition-base);
}

.nav__drawer-link:hover { color: var(--text-primary); }
.nav__drawer-link.main  {
  font-size: var(--type-xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}
.nav__drawer-link__desc {
  display: block;
  font-size: var(--type-sm);
  font-weight: var(--fw-regular);
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: 4px;
}

/* Nav responsive */
@media (max-width: 1024px) {
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }
  .nav__drawer { display: block; }
  /* Top-bar Contact Us pill is too wide for mobile and pushes the hamburger
     off-screen. The drawer already has a full-width Contact Us CTA inside,
     so users can still reach contact via the hamburger menu. !important
     used here as a deliberate pragmatic override for the .btn base rule
     (display:inline-flex), which wins on source order otherwise. */
  .nav__right .nav__contact-btn { display: none !important; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: inherit;
  font-size: var(--type-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
}

.btn:active { transform: scale(0.97); }

/* Primary — orange filled */
.btn--primary {
  background: var(--accent-orange);
  color: #ffffff;
  border-color: var(--accent-orange);
}
.btn--primary:hover {
  background: #d95a1c;
  border-color: #d95a1c;
  box-shadow: 0 0 20px var(--glow-orange);
}

/* Secondary — ghost with border */
.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn--secondary:hover {
  background: var(--bg-surface);
  border-color: var(--accent-orange);
  color: var(--accent-orange);
}

/* Ghost — no border, subtle hover */
.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
  padding-left: var(--sp-2);
  padding-right: var(--sp-2);
}
.btn--ghost:hover {
  color: var(--text-primary);
  background: var(--bg-surface);
}

/* White on dark bg */
.btn--white {
  background: #ffffff;
  color: #0a0a0a;
  border-color: #ffffff;
}
.btn--white:hover {
  background: rgba(255,255,255,0.9);
}

/* Outline white */
.btn--outline-white {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255,255,255,0.4);
}
.btn--outline-white:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.7);
}

.btn--outline-orange {
  background: rgba(242,101,34,0.08);
  color: var(--accent-orange);
  border: 1px solid rgba(242,101,34,0.2);
  border-radius: var(--radius-pill);
}
.btn--outline-orange:hover {
  background: rgba(242,101,34,0.15);
  border-color: rgba(242,101,34,0.4);
}

/* Sizes */
.btn--sm {
  font-size: var(--type-xs);
  padding: 7px 14px;
}

.btn--lg {
  font-size: var(--type-base);
  padding: 14px 28px;
  border-radius: var(--radius-md);
}

.btn--xl {
  font-size: var(--type-base);
  padding: 18px 36px;
  border-radius: var(--radius-md);
}

/* Icon button */
.btn--icon {
  padding: 10px;
  width: 40px;
  height: 40px;
}

.btn .material-symbols-outlined {
  font-size: 16px;
}

/* ============================================================
   BADGES / TAGS
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--type-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.badge--orange {
  background: rgba(242,101,34,0.12);
  color: var(--accent-orange);
  border: 1px solid rgba(242,101,34,0.20);
}

.badge--teal {
  background: rgba(102,153,152,0.12);
  color: var(--accent-teal);
  border: 1px solid rgba(102,153,152,0.20);
}

.badge--neutral {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card-default);
  transition: box-shadow var(--transition-slow), transform var(--transition-slow), border-color var(--transition-slow);
}

.bg-teal-tint .card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card-default);
}

.card--hover:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  border-color: var(--border-orange);
}

.card--featured {
  border-color: var(--border-orange);
  box-shadow: 0 0 0 1px var(--border-orange), 0 0 32px var(--glow-orange);
}

.card--glass {
  background: color-mix(in srgb, var(--bg-elevated) 60%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Eco-home circular glass cards ── */
/* Light-mode defaults; dark overrides below. */
.eco-circle {
  --eco-tint: rgba(0,0,0,0.035);
  --eco-border: rgba(0,0,0,0.10);
  --eco-overlay-1: rgba(0,0,0,0.04);
  --eco-overlay-2: rgba(0,0,0,0.02);
  --eco-icon-bg: rgba(0,0,0,0.06);
  --eco-icon-neutral: #0d0d0d;

  position: relative;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  padding: 47px 37px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--eco-tint);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--eco-border);
  transition: transform .3s, border-color .3s;
}
[data-theme="dark"] .eco-circle {
  --eco-tint: rgba(255,255,255,0.03);
  --eco-border: rgba(255,255,255,0.08);
  --eco-overlay-1: rgba(255,255,255,0.05);
  --eco-overlay-2: rgba(255,255,255,0.02);
  --eco-icon-bg: rgba(255,255,255,0.05);
  --eco-icon-neutral: #ffffff;
}
.eco-circle::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, var(--eco-overlay-1), transparent 50%),
    radial-gradient(circle at 70% 70%, var(--eco-overlay-2), transparent 50%);
  pointer-events: none;
}
.eco-circle:hover {
  transform: scale(1.04);
  border-color: rgba(102,153,152,0.22);
}
.eco-circle .icon-box { margin-bottom: var(--sp-2); border-radius: 50%; width: 74px; height: 74px; background: var(--eco-icon-bg); }
.eco-circle .icon-box .material-symbols-outlined { font-size: 35px; font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' -25, 'opsz' 24; }
.eco-circle .icon-box--gold { color: var(--eco-icon-neutral); }

/* Orbit SVG colors — themed via CSS vars so the SVG gradient stops adapt */
.eco-orbit {
  --eco-track: rgba(0,0,0,0.04);
  --eco-ion-neutral: #2a2a2a;
  --eco-ion-fade: #ffffff;
}
[data-theme="dark"] .eco-orbit {
  --eco-track: rgba(102,153,152,0.08);
  --eco-ion-neutral: #ffffff;
  --eco-ion-fade: transparent;
}
.eco-circle__role {
  font-size: var(--type-2xs, 0.625rem);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  margin-bottom: 4px;
}
.eco-circle .card__title {
  font-size: var(--type-lg);
  margin-bottom: var(--sp-1);
}
.eco-circle .card__text {
  font-size: var(--type-xs);
  line-height: 1.45;
}
@media (max-width: 1024px) {
  .eco-circle { width: 218px; height: 218px; padding: 32px 26px; }
}

/* Readability shadow on service cards whose title sits over a photo
   background (Solar PV System / Battery Energy Storage on /residential/).
   The cards have a 65%-height image at the top and the text label/title
   can land over bright sky regions, so this shadow ensures legibility
   without changing the existing dark gradient overlay. Scoped to
   .svc__card to outrank the per-page <style> block hoisted from <head>. */
.svc__card .svc__name {
  text-shadow: 0 2px 6px rgba(0,0,0,0.75), 0 0 14px rgba(0,0,0,0.55);
}
.svc__card .svc__role {
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.svc__card .svc__desc {
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Residential "Our Solutions" — desktop shows the eco-triangle (3 cards
   in a triangle with the animated orbit SVG centered). Below 1025px the
   triangle's 200×280px gaps + the 720px orbit don't fit, so we hide it
   and surface a simple centered heading + the two big svc__grid cards
   instead. The two classes form a paired visibility switch. */
@media (max-width: 1024px) {
  .eco-triangle-section {
    display: none !important;
  }
}
@media (min-width: 1025px) {
  .mobile-section-heading {
    display: none !important;
  }
}

/* Financing bullets — the per-page <style> block sets margin:0 0 var(--sp-6)
   (no top margin), so the bullet list sits flush against the subtitle and
   reads as cramped. Bump the top margin via higher specificity so we don't
   have to edit 6 per-page style blocks (residential + commercial-industrial
   × EN/MS/ZH). */
.fin .fin__bullets {
  margin-top: var(--sp-6);
}

/* ============================================================
   FAQ ACCORDION (card style)
   Promoted to shared CSS so theme-injected FAQs (.ers-faq → also
   rendered with .faq-item markup) and the existing page-level FAQ
   blocks in 15 pages (career, contact, *-financing, investment-
   structuring) share one visual treatment. Per-page <style> rules
   for .faq-item still exist but match these values exactly, so the
   shared version is a no-op fallback there.
   ============================================================ */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  overflow: hidden;
  transition: border-color var(--transition-smooth);
}
.faq-item:hover,
.faq-item[open] {
  border-color: var(--border-teal);
}
.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  list-style: none;
  user-select: none;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::marker { content: ''; }
.faq-item__question:hover { color: var(--accent-teal); }
.faq-item__question .material-symbols-outlined {
  font-size: 20px;
  color: var(--text-muted);
  transition: transform var(--transition-smooth);
  flex-shrink: 0;
}
.faq-item[open] .faq-item__question .material-symbols-outlined {
  transform: rotate(180deg);
  color: var(--accent-teal);
}
.faq-item__answer {
  padding: 0 24px 20px;
  color: var(--text-secondary);
  line-height: 1.65;
  font-size: 0.95rem;
}
.faq-item__answer p { margin: 0; }

/* Commercial-industrial-roi: the decorative "report-preview__mock"
   skeleton on the left of the "What's in Your Free ROI Report" grid
   is desktop-only flair. Below 1025px the 6 content cards already
   stack to single column and the mock just adds a redundant placeholder
   block — hide it and let the cards take the full width. */
@media (max-width: 1024px) {
  .report-preview {
    grid-template-columns: 1fr !important;
  }
  .report-preview__mock {
    display: none !important;
  }
}

/* Utility-scale page mobile fixes:
   - Force the 4-col Value Drivers grid and the two 3-col Working-With-Us
     grids to one column at md and below. Inline styles set explicit column
     counts so we override with !important via a marker class. */
@media (max-width: 1024px) {
  .us-grid-stack-md {
    grid-template-columns: 1fr !important;
    gap: var(--sp-4) !important;
  }
}

/* Shared 1024 breakpoint block */
@media (max-width: 1024px) {
  .roi-models__grid { grid-template-columns: repeat(2, 1fr) !important; }
  .table-scroll-cue { position: relative; }
  .table-scroll-cue::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 32px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--bg-elevated));
  }
}

/* Belt-and-braces against horizontal overflow on any page. body uses
   overflow-x:clip in base.css (hidden broke sticky nav); html keeps hidden, and on iOS Safari
   the missing html rule can still allow horizontal drag/rubber-banding
   when an inner element is wider than the viewport. */
html {
  overflow-x: hidden;
}

/* Testimonial grid (.testi__grid) is laid out via inline
   grid-template-columns:repeat(2,1fr) across 9 pages (about,
   commercial-industrial-projects, residential-projects × EN/MS/ZH).
   Force one column on mobile so the cards never overflow. */
@media (max-width: 640px) {
  .testi__grid {
    grid-template-columns: 1fr !important;
  }
  .roi-models__grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   BACK TO TOP — floating button, every page, every viewport.
   Created by back-to-top.js; visible only after the user has
   scrolled past ~60% of the viewport height. Sits above the
   site-notice bar and clears the mobile thumb zone.
   ============================================================ */
.back-to-top {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-6);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--transition-base),
              transform var(--transition-base),
              background var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base);
  z-index: var(--z-sticky, 90);
}
.back-to-top--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--accent-orange);
  border-color: var(--accent-orange);
  color: #ffffff;
}
.back-to-top:focus-visible {
  outline: 2px solid var(--accent-orange);
  outline-offset: 3px;
}
.back-to-top .material-symbols-outlined {
  font-size: 22px;
}

@media (max-width: 640px) {
  .back-to-top {
    right: var(--sp-4);
    bottom: var(--sp-5);
    width: 44px;
    height: 44px;
  }
}

/* Solar calculator empty state — shown before the user picks a home, so
   the metrics area never looks broken (em-dash placeholders alone read
   as "the calculator didn't load"). Hidden by JS the moment a home is
   selected; never reappears in the session. */
.calc-empty-hint {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: rgba(242, 101, 34, 0.08);
  border: 1px dashed rgba(242, 101, 34, 0.45);
  color: var(--text-secondary);
  padding: var(--sp-4) var(--sp-5);
  border-radius: 10px;
  margin-block: var(--sp-4) var(--sp-6);
  font-size: var(--type-sm);
  line-height: 1.45;
}
.calc-empty-hint .material-symbols-outlined {
  color: var(--accent-orange);
  font-size: 22px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .eco-circle { width: 203px; height: 203px; padding: 28px 22px; }
  .eco-orbit { display: none; }
}

.card__body {
  padding: var(--sp-6);
}

.card__footer {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.card__title {
  font-size: var(--type-xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
  letter-spacing: -0.02em;
}

.card__text {
  font-size: var(--type-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

/* ============================================================
   SCENARIO CARDS — calculator "How Others Use This" explainers
   Standardised pattern: equal-height cards in a 2-up grid, with
   the result/next-step footer pinned to the bottom of each card
   so adjacent cards align even when descriptions differ in length.
   ============================================================ */
.scenario-cards-section {
  margin-top: var(--sp-10);
}
.scenario-cards-section__heading {
  text-align: center;
  margin-bottom: var(--sp-6);
}
.scenario-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  align-items: stretch;
}
@media (max-width: 1024px) {
  .scenario-cards { grid-template-columns: 1fr; }
}
.scenario-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.scenario-card .card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}
.scenario-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.scenario-card__head .material-symbols-outlined {
  color: var(--accent-teal);
  font-size: 20px;
}
.scenario-card__num {
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-teal);
  font-weight: var(--fw-semibold);
}
.scenario-card__result {
  font-size: var(--type-sm);
  font-weight: var(--fw-semibold);
  color: var(--accent-teal);
  margin: auto 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.scenario-card__result a { color: var(--accent-teal); }

/* Icon box */
.icon-box {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-4);
  flex-shrink: 0;
}

.icon-box--orange {
  background: rgba(242,101,34,0.10);
  color: var(--accent-orange);
}

.icon-box--teal {
  background: rgba(102,153,152,0.10);
  color: var(--accent-teal);
}

.icon-box--gold {
  background: rgba(196,160,84,0.14);
  color: #c4a054;
}

.icon-box--lg {
  width: 64px;
  height: 64px;
}

.icon-box .material-symbols-outlined {
  font-size: 24px;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.icon-box--lg .material-symbols-outlined {
  font-size: 32px;
}

/* Segment cards (large, full-bleed style) */
.segment-card {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
  overflow: hidden;
  transition: box-shadow var(--transition-slow), transform var(--transition-slow), border-color var(--transition-slow);
  display: flex;
  flex-direction: column;
}

.segment-card::before {
  content: '';
  position: absolute;
  top: -280px;
  right: -280px;
  width: 1120px;
  height: 1120px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--transition-slow);
  pointer-events: none;
}

.segment-card--orange::before {
  background: radial-gradient(circle, var(--glow-orange-lg) 0%, transparent 70%);
}

.segment-card--teal::before {
  background: radial-gradient(circle, var(--glow-teal-lg) 0%, transparent 70%);
}

.segment-card:hover {
  transform: translateY(-4px);
}

.segment-card:hover::before { opacity: 1; }

.segment-card--orange:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-orange);
}

.segment-card--teal:hover {
  box-shadow: 0 0 0 1px var(--border-teal), 0 0 28px var(--glow-teal), 0 8px 24px rgba(0,0,0,0.12);
  border-color: var(--border-teal);
}

.segment-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-5);
}

.segment-card--orange .segment-card__icon {
  background: rgba(242,101,34,0.12);
  color: var(--accent-orange);
}

.segment-card--teal .segment-card__icon {
  background: rgba(102,153,152,0.12);
  color: var(--accent-teal);
}

.segment-card__icon .material-symbols-outlined {
  font-size: 28px;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.segment-card--has-img {
  padding-top: 0;
}

.segment-card--has-img .segment-card__icon {
  width: 36px;
  height: 36px;
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-3);
}

.segment-card--has-img .segment-card__icon .material-symbols-outlined {
  font-size: 18px;
}

.segment-card__img-wrap {
  position: relative;
  margin: 0 -32px;
  overflow: hidden;
}

.segment-card__img-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--accent-orange);
  z-index: 3;
  clip-path: polygon(0 0, 100% 0, 100% 10%, 0 26%);
}

.segment-card .segment-card__icon--overlay {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 5;
  background: transparent;
  color: #000;
  border: 2px solid #000;
  border-radius: var(--radius-lg);
}

.segment-card__img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.segment-card__eyebrow {
  font-size: var(--type-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}

.segment-card--orange .segment-card__eyebrow { color: var(--accent-orange); }
.segment-card--teal .segment-card__eyebrow   { color: var(--accent-teal); }

.segment-card__title {
  font-size: var(--type-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: var(--sp-3);
}

.segment-card__desc {
  font-size: var(--type-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  flex: 1;
  margin-bottom: var(--sp-6);
}

.segment-card__stats-label {
  font-size: var(--type-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--fw-medium);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  margin-bottom: var(--sp-3);
}

.segment-card__stats {
  display: flex;
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}

.segment-card__stat-value {
  font-size: var(--type-xl);
  font-weight: var(--fw-extrabold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.segment-card--orange .segment-card__stat-value { color: var(--accent-orange); }
.segment-card--teal .segment-card__stat-value   { color: var(--accent-teal); }

.segment-card__stat-label {
  font-size: var(--type-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* ============================================================
   STAT BAR
   ============================================================ */
.stat-bar {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: var(--sp-8);
}

.stat-bar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-8);
}

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

.stat-bar__item {
  text-align: center;
  position: relative;
}

.stat-bar__item + .stat-bar__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--border);
}

@media (max-width: 1024px) {
  .stat-bar__item:nth-child(2n+1) + .stat-bar__item::before {
    display: none;
  }
}

.stat-bar__icon,
.stat-bar__icon.icon-filled {
  font-size: 32px;
  font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 24;
  margin-bottom: var(--sp-2);
  display: block;
}

.stat-bar__value {
  font-size: clamp(var(--type-2xl), 2.5vw, var(--type-4xl));
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  display: block;
}

.stat-bar__label {
  font-size: var(--type-xs);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: var(--sp-2);
  display: block;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-24);
  display: flex;
  align-items: center;
}

.hero--full {
  min-height: calc(100svh - 104px);
}

.hero--medium {
  min-height: 60svh;
}

.hero--compact {
  padding-block: var(--sp-16);
}

/* Atmospheric background */
.hero__bg {
  position: absolute;
  inset: 0;
  background: var(--glow-hero);
  pointer-events: none;
}

.hero__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 70%);
  opacity: 0.4;
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--type-sm);
  font-weight: var(--fw-semibold);
  color: var(--accent-orange);
  margin-bottom: var(--sp-5);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-pill);
  background: rgba(242,101,34,0.08);
  border: 1px solid rgba(242,101,34,0.18);
}

.hero__eyebrow .material-symbols-outlined {
  font-size: 14px;
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 20;
}

.hero__title {
  font-size: clamp(var(--type-3xl), 5vw, var(--type-6xl));
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: -0.04em;
  color: var(--text-primary);
  margin-bottom: var(--sp-6);
  max-width: 18ch;
}

.hero__title--center { max-width: 100%; }

.hero__title .accent {
  color: var(--accent-orange);
  position: relative;
}

.hero__subtitle {
  font-size: clamp(var(--type-base), 1.5vw, var(--type-xl));
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  max-width: 52ch;
  margin-bottom: var(--sp-8);
}

.hero__tagline {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: clamp(var(--type-base), 1.5vw, var(--type-xl));
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  margin-bottom: var(--sp-8);
}

.hero__tagline a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.hero__tagline a:hover {
  color: var(--accent-orange);
}

.hero__tagline-sep {
  color: var(--accent-orange);
  opacity: 0.5;
  font-weight: var(--fw-light);
}

.hero__actions {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  align-items: center;
}

.hero__stats {
  display: flex;
  gap: var(--sp-8);
  flex-wrap: wrap;
  margin-bottom: var(--sp-8);
}

.hero__stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 80px;
}

.hero__stat-value {
  font-size: clamp(var(--type-2xl), 3vw, var(--type-4xl));
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--accent-orange);
  letter-spacing: -0.03em;
}

.hero__stat-label {
  font-size: var(--type-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Hero background image */
.hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  opacity: 0.17;
  z-index: 0;
}

[data-theme="light"] .hero__bg-img {
  opacity: 0.17;
  filter: brightness(0.85) contrast(1.2);
}

/* ============================================================
   SUB-NAV (pill tabs)
   ============================================================ */
.sub-nav {
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  position: sticky;
  top: 64px;
  z-index: calc(var(--z-sticky) - 1);
}

.sub-nav__inner {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sub-nav__inner::-webkit-scrollbar { display: none; }

.sub-nav__link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--type-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  padding: var(--sp-3) var(--sp-4);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-base), border-color var(--transition-base);
  flex-shrink: 0;
}

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

.sub-nav__link.active {
  color: var(--accent-orange);
  border-bottom-color: var(--accent-orange);
}

/* ============================================================
   FEATURE LIST
   ============================================================ */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--type-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

.feature-list li::before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(242,101,34,0.12);
  border: 1.5px solid var(--accent-orange);
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8l3.5 3.5L13 5' stroke='%23f26522' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.feature-list--teal li::before {
  border-color: var(--accent-teal);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8l3.5 3.5L13 5' stroke='%23669998' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

.card__feature-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.card__feature-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--type-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}
.card__feature-list li .material-symbols-outlined {
  font-size: 18px;
  color: var(--accent-orange);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ============================================================
   PROCESS STEPS
   ============================================================ */
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-6);
  counter-reset: step;
}

/* Mobile: force single column. auto-fit with 180px min would otherwise
   pack 2 cards side-by-side at 430px (180×2 + gap fits), making each
   card too narrow to read comfortably. */
@media (max-width: 640px) {
  .process-steps {
    grid-template-columns: 1fr;
  }
}

.process-step {
  position: relative;
  padding: var(--sp-6);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--transition-slow);
}

.process-step:hover { box-shadow: var(--shadow-card-hover); }

.process-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--accent-orange);
  color: #fff;
  font-size: var(--type-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-4);
  flex-shrink: 0;
}

.process-step__title {
  font-size: var(--type-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
}

.process-step__text {
  font-size: var(--type-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  background: var(--accent-orange);
  padding-block: var(--sp-16);
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: '';
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.cta-band__title {
  font-size: clamp(var(--type-2xl), 3vw, var(--type-4xl));
  font-weight: var(--fw-bold);
  letter-spacing: -0.025em;
  color: #ffffff;
  margin-bottom: var(--sp-3);
}

.cta-band__subtitle {
  font-size: var(--type-base);
  color: rgba(255,255,255,0.8);
  max-width: 52ch;
  margin-bottom: var(--sp-8);
}

.cta-band__actions {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* Two-column layout (video + text) for the home-page CTA variant. Stacks to
   one column under 640px so the video sits above the text on mobile. */
.cta-band__layout {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
}

.cta-band__layout-media {
  width: 165px;
  height: 165px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
}

.cta-band__layout-body {
  flex: 1;
  min-width: 0;
}

@media (max-width: 640px) {
  .cta-band__layout {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-6);
  }
  .cta-band__layout-media {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 220px;
  }
}

/* Dark CTA variant */
.cta-band--dark {
  background: var(--bg-cta);
}

.cta-band--dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glow-hero);
  pointer-events: none;
}

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--type-sm);
}

.comparison-table th,
.comparison-table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.comparison-table thead th {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  background: var(--bg-surface);
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.comparison-table thead th:first-child {
  border-radius: var(--radius-sm) 0 0 0;
}

.comparison-table thead th:last-child {
  border-radius: 0 var(--radius-sm) 0 0;
}

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

.comparison-table .col-ers {
  background: rgba(242,101,34,0.04);
  color: var(--text-primary);
  font-weight: var(--fw-medium);
  border-left: 2px solid var(--accent-orange);
  border-right: 2px solid var(--accent-orange);
}

.comparison-table thead .col-ers {
  border-top: 2px solid var(--accent-orange);
  color: var(--accent-orange);
  background: rgba(242,101,34,0.08);
}

.comparison-table tbody tr:last-child .col-ers {
  border-bottom: 2px solid var(--accent-orange);
  border-radius: 0 0 0 0;
}

.comparison-table tr:hover td { background: var(--bg-surface); }

/* Check / X icons in table */
.check-yes {
  color: var(--accent-teal);
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  font-size: 18px;
  vertical-align: middle;
}

.check-no {
  color: var(--text-muted);
  font-size: 18px;
  vertical-align: middle;
}

/* ============================================================
   FORM COMPONENTS
   ============================================================ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.form-label {
  font-size: var(--type-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

.form-label .required {
  color: var(--accent-orange);
  margin-left: 2px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: var(--type-sm);
  font-family: inherit;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  outline: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--accent-orange);
  box-shadow: none;
  outline: none;
}

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

.form-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: var(--lh-relaxed);
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 36px;
}

/* Radio group */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.radio-option {
  position: relative;
  flex: 1;
  min-width: 140px;
}

.radio-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-option label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border-strong);
  font-size: var(--type-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: center;
  transition: all var(--transition-base);
}

.radio-option label:hover {
  border-color: var(--accent-orange);
  color: var(--accent-orange);
}

.radio-option label .material-symbols-outlined {
  font-size: 32px;
}

.radio-option input:checked + label {
  border-color: var(--accent-orange);
  background: rgba(242,101,34,0.08);
  color: var(--accent-orange);
}

/* Form grid */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}

@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
}

.form-grid--full {
  grid-column: 1 / -1;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: #080808;
  border-top: 1px solid rgba(242,101,34,0.20);
  padding-block: var(--sp-16) var(--sp-8);
  color: #a0a0a0;
}

[data-theme="light"] .footer {
  background: var(--bg-base);
  color: var(--text-secondary);
  border-top-color: rgba(242,101,34,0.12);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-8);
  margin-bottom: var(--sp-12);
}

/* Tablet and below: brand block spans full width, the three link/contact
   columns drop to a 2-up grid (Solutions+Company on top row, Contact +
   anything else on the second). Stays at 2-up even on phones so the
   footer doesn't become a 6-section vertical stack. */
@media (max-width: 1024px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-6);
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
  .footer__logo-img {
    height: 32px;
  }
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.footer__logo {
  font-size: var(--type-xl);
  font-weight: var(--fw-black);
  letter-spacing: -0.04em;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: calc(var(--sp-4) * 0.725);
}

.footer__logo-mark .material-symbols-outlined {
  font-size: 12px;
  color: #fff;
  font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 20;
}

.footer__logo-img {
  height: 44px;
  width: auto;
}
.footer__logo-img--dark { display: none; }
[data-theme="dark"] .footer__logo-img--light { display: none; }
[data-theme="dark"] .footer__logo-img--dark { display: block; }

.footer__tagline {
  font-size: var(--type-sm);
  color: #666;
  line-height: var(--lh-relaxed);
  max-width: 36ch;
}

.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
}

.footer__social-link {
  font-size: var(--type-xs);
  color: #666;
  font-weight: var(--fw-medium);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--transition-base);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer__social-link:hover { color: var(--accent-teal); }

[data-theme="light"] .footer__social-link { color: #888; }

.footer__col-title {
  font-size: var(--type-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: var(--sp-4);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.footer__link {
  font-size: var(--type-sm);
  color: #666;
  transition: color var(--transition-base);
  padding-block: 10px;
  text-decoration: none;
}

.footer__link:hover { color: var(--accent-orange); }

.footer__contact-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--type-sm);
  color: #666;
  padding-block: 2px;
}

.footer__contact-item .material-symbols-outlined {
  font-size: 16px;
  color: #444;
  flex-shrink: 0;
}

.footer__disclaimer {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid #1f1f1f;
}

.footer__disclaimer-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #444;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  user-select: none;
  transition: color 0.2s;
}

.footer__disclaimer-label::-webkit-details-marker { display: none; }

.footer__disclaimer-label::before {
  content: "▸";
  font-size: 0.7rem;
  display: inline-block;
  transition: transform 0.2s;
}

.footer__disclaimer[open] .footer__disclaimer-label::before {
  transform: rotate(90deg);
}

.footer__disclaimer-label:hover { color: #888; }

.footer__disclaimer[open] .footer__disclaimer-label {
  margin-bottom: 12px;
}

.footer__disclaimer p {
  font-size: 0.62rem;
  font-style: italic;
  color: #3f3f3f;
  line-height: 1.7;
  margin: 0 0 8px;
  max-width: none;
  text-align: justify;
  hyphens: auto;
}

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

[data-theme="light"] .footer__disclaimer {
  border-top-color: #e0e0e0;
}

[data-theme="light"] .footer__disclaimer-label {
  color: #aaa;
}

[data-theme="light"] .footer__disclaimer-label:hover { color: #777; }

[data-theme="light"] .footer__disclaimer p {
  color: #b0b0b0;
}

.footer__certs {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid #1f1f1f;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

[data-theme="light"] .footer__certs { border-top-color: #e0e0e0; }

.footer__certs-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #555;
  font-weight: 700;
}

[data-theme="light"] .footer__certs-label { color: #888; }

.footer__certs-list {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.footer__cert {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--type-xs);
  color: #666;
  font-weight: var(--fw-medium);
}

.footer__cert-logo {
  height: 24px;
  width: auto;
  display: block;
  opacity: 0.5;
}

[data-theme="light"] .footer__cert { color: #888; }
[data-theme="light"] .footer__cert-logo { filter: invert(1); opacity: 0.45; }

.footer__bottom {
  margin-top: var(--sp-6);
  border-top: 1px solid #1f1f1f;
  padding-top: var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

[data-theme="light"] .footer__bottom {
  border-top-color: #e0e0e0;
}

.footer__copyright {
  font-size: var(--type-xs);
  color: #444;
}

.footer__bottom-links {
  display: flex;
  gap: var(--sp-4);
}

.footer__bottom-links a {
  font-size: var(--type-xs);
  color: #444;
  transition: color var(--transition-base);
}

.footer__bottom-links a:hover { color: #888; }

/* ============================================================
   TIMELINE COMPONENT
   ============================================================ */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.timeline__item {
  display: flex;
  gap: var(--sp-6);
  padding-bottom: var(--sp-8);
  position: relative;
}

.timeline__dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 2px solid var(--accent-orange);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.timeline__dot .material-symbols-outlined {
  font-size: 18px;
  color: var(--accent-orange);
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.timeline__year {
  font-size: var(--type-xs);
  font-weight: var(--fw-bold);
  color: var(--accent-orange);
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-1);
}

.timeline__title {
  font-size: var(--type-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: var(--sp-1);
}

.timeline__text {
  font-size: var(--type-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

/* ============================================================
   TEAM / LEADERSHIP CARDS
   ============================================================ */
.team-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  text-align: center;
  transition: box-shadow var(--transition-slow), transform var(--transition-slow);
}

.team-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.team-card__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-4);
}

.team-card__avatar .material-symbols-outlined {
  font-size: 32px;
  color: var(--text-muted);
}

.team-card__name {
  font-size: var(--type-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: var(--sp-1);
}

.team-card__role {
  font-size: var(--type-sm);
  color: var(--accent-orange);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-3);
}

.team-card__bio {
  font-size: var(--type-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

/* ============================================================
   PROJECT / PORTFOLIO CARDS
   ============================================================ */
.project-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-slow), transform var(--transition-slow), border-color var(--transition-slow);
}

.project-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
  border-color: var(--border-orange);
}

.project-card__visual {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.project-card__visual--utility {
  background: linear-gradient(135deg, rgba(242,101,34,0.15) 0%, rgba(242,101,34,0.05) 100%);
}

.project-card__visual--commercial {
  background: linear-gradient(135deg, rgba(102,153,152,0.15) 0%, rgba(102,153,152,0.05) 100%);
}

.project-card__visual--residential {
  background: linear-gradient(135deg, rgba(102,153,152,0.12) 0%, rgba(242,101,34,0.06) 100%);
}

.project-card__visual .material-symbols-outlined {
  font-size: 64px;
  opacity: 0.25;
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 48;
}

.project-card__visual--utility .material-symbols-outlined {
  color: var(--accent-orange);
}

.project-card__visual--commercial .material-symbols-outlined,
.project-card__visual--residential .material-symbols-outlined {
  color: var(--accent-teal);
}

.project-card__body {
  padding: var(--sp-5);
}

.project-card__title {
  font-size: var(--type-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
  letter-spacing: -0.01em;
}

.project-card__meta {
  font-size: var(--type-xs);
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}

.project-card__stats {
  display: flex;
  gap: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

.project-card__stat {
  flex: 1;
}

.project-card__stat-value {
  font-size: var(--type-sm);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.project-card__stat-label {
  font-size: var(--type-xs);
  color: var(--text-muted);
}

/* ============================================================
   NEWS CARDS
   ============================================================ */
.news-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-slow), transform var(--transition-slow);
}

.news-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.news-card__body { padding: var(--sp-5); flex: 1; }
.news-card__footer {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
}

.news-card__category {
  font-size: var(--type-xs);
  font-weight: var(--fw-semibold);
  color: var(--accent-orange);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}

.news-card__title {
  font-size: var(--type-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-3);
}

.news-card__date {
  font-size: var(--type-xs);
  color: var(--text-muted);
}

/* ============================================================
   ELIGIBILITY WIDGET
   ============================================================ */
.eligibility-widget {
  background: var(--bg-elevated);
  border: 1px solid var(--border-orange);
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
  box-shadow: 0 0 0 1px var(--border-orange), 0 0 40px var(--glow-orange);
}

.eligibility-widget__title {
  font-size: var(--type-xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin-bottom: var(--sp-4);
}

.eligibility-widget__step {
  display: none;
}

.eligibility-widget__step.active {
  display: block;
}

/* ============================================================
   INVESTOR HIGHLIGHTS
   ============================================================ */
.investor-highlight {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--transition-slow);
}

.investor-highlight:hover {
  box-shadow: var(--shadow-card-hover);
}

.investor-highlight__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(242,101,34,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent-orange);
}

.investor-highlight__icon .material-symbols-outlined {
  font-size: 22px;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.investor-highlight__title {
  font-size: var(--type-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: var(--sp-1);
}

.investor-highlight__text {
  font-size: var(--type-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

/* ============================================================
   AUDIENCE ROUTER CARDS
   ============================================================ */
.audience-router {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-12);
}

@media (max-width: 1024px) {
  .audience-router { grid-template-columns: 1fr; }
}

.audience-card {
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-slow);
  background: var(--bg-elevated);
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.audience-card:hover,
.audience-card:focus {
  border-color: var(--accent-orange);
  background: rgba(242,101,34,0.04);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.audience-card > .material-symbols-outlined {
  font-size: 36px;
  color: var(--accent-orange);
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: block;
  margin-bottom: var(--sp-3);
}

.audience-card__title {
  font-size: var(--type-base);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
}

.audience-card__desc {
  font-size: var(--type-sm);
  color: var(--text-secondary);
}

.audience-card .btn {
  width: 100%;
}

/* ============================================================
   DATA/FINANCIAL TABLE
   ============================================================ */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--type-sm);
}

.data-table th,
.data-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.data-table thead th {
  font-size: var(--type-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: var(--bg-surface);
}

.data-table tbody td {
  color: var(--text-secondary);
}

.data-table .value-cell {
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.data-table tr:hover td { background: var(--bg-surface); }

.data-table { min-width: 560px; }
.data-table th,
.data-table td { white-space: nowrap; }

/* ============================================================
   CONTACT SIDEBAR CARD
   ============================================================ */
.contact-sidebar-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}

.contact-sidebar-card + .contact-sidebar-card {
  margin-top: var(--sp-4);
}

.contact-sidebar-card__dept {
  font-size: var(--type-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-orange);
  margin-bottom: var(--sp-3);
}

.contact-sidebar-card__name {
  font-size: var(--type-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: var(--sp-1);
}

.contact-sidebar-card__email {
  font-size: var(--type-sm);
  color: var(--text-muted);
}

/* ============================================================
   PRICING TIER CARDS
   ============================================================ */
.pricing-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  transition: box-shadow var(--transition-slow), transform var(--transition-slow);
}

.pricing-card--featured {
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 1px var(--border-orange), 0 0 32px var(--glow-orange);
  position: relative;
}

.pricing-card--featured::before {
  content: 'Most Popular';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-orange);
  color: #fff;
  font-size: var(--type-xs);
  font-weight: var(--fw-semibold);
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.pricing-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.pricing-card__name {
  font-size: var(--type-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-3);
}

.pricing-card__system {
  font-size: var(--type-2xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-1);
}

.pricing-card__range {
  font-size: var(--type-sm);
  color: var(--text-muted);
  margin-bottom: var(--sp-5);
}

.pricing-card__price {
  font-size: var(--type-3xl);
  font-weight: var(--fw-extrabold);
  color: var(--accent-orange);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-1);
}

.pricing-card__savings {
  font-size: var(--type-sm);
  color: var(--accent-teal);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-5);
}

.pricing-card__divider {
  border: none;
  border-top: 1px solid var(--border);
  margin-bottom: var(--sp-5);
}

/* ============================================================
   WIDE LAYOUT HELPERS
   ============================================================ */
.content-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

.content-split--wide {
  grid-template-columns: 3fr 2fr;
}

.content-split--reverse .content-split__media {
  order: -1;
}

@media (max-width: 1024px) {
  .content-split,
  .content-split--wide {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
}

/* Icon showcase */
.icon-showcase {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}

.icon-showcase__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.icon-showcase__item .material-symbols-outlined {
  font-size: 28px;
  color: var(--accent-orange);
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  flex-shrink: 0;
}

.icon-showcase__label {
  font-size: var(--type-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

/* ============================================================
   CARD MODIFIERS (Fix 6)
   ============================================================ */
.card--stat { text-align: center; padding: var(--sp-6); }
.card--stat .stat-value { font-size: var(--type-2xl); font-weight: var(--fw-bold); color: var(--accent-orange); }
.card--stat .stat-label { font-size: var(--type-sm); color: var(--text-secondary); margin-top: var(--sp-1); }

.card--solution { border-top: 3px solid var(--accent-orange); }
.card--industry { cursor: pointer; transition: border-color var(--transition-fast); }
.card--industry:hover { border-color: var(--accent-orange); }

/* ============================================================
   DEEP SEA CARD (teal tonal)
   ============================================================ */
.t-deep { background: #0d2120; border-radius: 18px; padding: 28px; border: 1px solid rgba(102,153,152,0.12); box-shadow: inset 0 0 40px rgba(102,153,152,0.05); transition: border-color .3s, box-shadow .3s; }
.t-deep:hover { border-color: rgba(102,153,152,0.25); box-shadow: inset 0 0 40px rgba(102,153,152,0.08), 0 8px 32px rgba(102,153,152,0.08); }
.t-deep__icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; background: rgba(102,153,152,0.15); color: #85adac; box-shadow: 0 0 20px rgba(102,153,152,0.15); }
.t-deep__icon .material-symbols-outlined { font-size: 24px; font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.t-deep__title { font-size: 20px; font-weight: 700; color: #e0eaea; margin-bottom: 8px; }
.t-deep__text { font-size: 14px; color: #85adac; line-height: 1.65; opacity: 0.7; }
[data-theme="light"] .t-deep { background: #f0f7f7; border-color: rgba(102,153,152,0.15); box-shadow: inset 0 0 40px rgba(102,153,152,0.04); }
[data-theme="light"] .t-deep:hover { box-shadow: inset 0 0 40px rgba(102,153,152,0.06), 0 8px 24px rgba(102,153,152,0.08); }
[data-theme="light"] .t-deep__icon { box-shadow: 0 0 16px rgba(102,153,152,0.1); }
[data-theme="light"] .t-deep__title { color: #2d4847; }
[data-theme="light"] .t-deep__text { color: #5a8a89; }

/* ============================================================
   SUB-NAV EXTRAS (Fix 6)
   ============================================================ */
.sub-nav__back { display: none; }
@media (max-width: 1024px) { .sub-nav__back { display: flex; align-items: center; gap: var(--sp-2); } }
.sub-nav__divider { width: 1px; height: 20px; background: var(--border); margin: 0 var(--sp-2); }
.sub-nav__link--active,
.sub-nav__link.active { color: var(--accent-orange); border-bottom-color: var(--accent-orange); }

/* ============================================================
   CALC STEP KICKER OVERRIDE
   ============================================================ */
/* 21 page-level <style> blocks set .calc-section .calc-step-kicker to 10px and
   load after this file, winning on source order. Higher-specificity override
   here bumps it to 12px site-wide without editing each page. */
body .calc-section .calc-step-kicker { font-size: 12px; }

/* ============================================================
   TIMELINE (Fix 5)
   ============================================================ */
.timeline { position: relative; max-width: 800px; margin: 0 auto; }
.timeline__spine { position: absolute; left: 133px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.timeline__item { display: flex; gap: 32px; margin-bottom: 48px; position: relative; }
.timeline__year { width: 90px; flex-shrink: 0; text-align: right; padding-top: 4px; font-weight: var(--fw-bold); font-size: var(--type-sm); color: var(--accent-orange); }
.timeline__dot { width: 24px; height: 24px; border-radius: 0; background: url('../images/ers-icon.png') center/contain no-repeat; flex-shrink: 0; margin-top: 2px; border: none; box-shadow: none; }
.timeline__content { flex: 1; }

/* Mobile: shrink the year column + gap so the timeline doesn't sit
   adrift on the left. Spine position is year_width + gap + half-dot;
   keep these three values in sync (40 + 12 + 12 = 64). */
@media (max-width: 640px) {
  .timeline__year { width: 40px; }
  .timeline__item { gap: 12px; }
  .timeline__spine { left: 64px; }
  .timeline__content--highlight { padding: 12px 14px; }
  /* about.html's per-page style adds a "mask" ::after on .timeline__item:last-child
     to hide the spine tail below the final emblem, hardcoded to left:128px — a value
     tuned for the DESKTOP spine (left:133px above), sitting ~5px left of it. That
     per-page <style> block loads after this file and wins on source order, so at
     this breakpoint (spine moved to left:64px) the un-updated mask lands ~40px
     inside the highlighted 2026 card and blanks out a 10px strip of its text.
     Reposition it 5px left of the mobile spine to match the desktop offset. */
  body [aria-labelledby="timeline-heading"] .timeline__item:last-child::after {
    left: 59px;
  }
}
.timeline__title { font-size: var(--type-base); font-weight: var(--fw-semibold); margin-bottom: 8px; }
.timeline__desc { font-size: var(--type-sm); color: var(--text-secondary); line-height: 1.6; }

/* Timeline dot variants */
.timeline__dot--outline { background: url('../images/ERS Energy logo (1)2.png') center/contain no-repeat; border: none; box-shadow: none; border-radius: 0; }
.timeline__dot--highlight { width: 28px; height: 28px; margin-top: 0; margin-left: -2px; margin-right: -2px; box-shadow: none; }
.timeline__dot--teal { background: url('../images/ers-icon.png') center/contain no-repeat; border: none; box-shadow: none; }

/* Timeline title variants */
.timeline__title--accent { color: var(--accent-orange); }
.timeline__title--teal { color: var(--accent-teal); }

/* Timeline year variant */
.timeline__year--teal { color: var(--accent-teal); }

/* Timeline content highlight (2022 BESS card) */
.timeline__content--highlight {
  padding: 20px;
  background: rgba(242,101,34,0.07);
  border: 1px solid rgba(242,101,34,0.2);
  border-radius: 12px;
  margin-top: -4px;
}

/* ============================================================
   LEADER AVATAR (Fix 3)
   ============================================================ */
.leader-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--accent-orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-xl);
  font-weight: var(--fw-bold);
  letter-spacing: 1px;
  flex-shrink: 0;
  margin: 0 auto var(--sp-4);
}

/* ============================================================
   ANIMATED BACKGROUND PATHS
   ============================================================ */
.paths-section {
  position: relative;
  min-height: 500px;
  background: radial-gradient(ellipse 150% 300% at 110% 50%, rgba(242,101,34,0.225) 0%, transparent 60%), #050505;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.paths-section svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.paths-section__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--sp-12) 0;
}

.paths-section .hero__eyebrow {
  align-items: flex-start;
  padding-left: var(--sp-4);
  padding-right: var(--sp-6);
}

[data-theme="light"] .paths-section {
  background:
    radial-gradient(ellipse 150% 300% at 110% 50%, rgba(255,170,100,0.32) 0%, transparent 60%),
    linear-gradient(90deg, #7a2a08 0%, #a8390f 50%, #c84614 100%);
}

/* Light-mode hero base is now deep orange — flip text/eyebrow to light tones
   to keep contrast and mirror the dark-mode treatment. Scoped to .paths-section
   so other heroes on the site keep their default dark-on-light text. */
[data-theme="light"] .paths-section .hero__title { color: #fff; }
[data-theme="light"] .paths-section .hero__title .accent { color: #ffd9b8; }
[data-theme="light"] .paths-section .hero__subtitle,
[data-theme="light"] .paths-section .hero__tagline,
[data-theme="light"] .paths-section .hero__tagline a { color: rgba(255,255,255,0.88); }
[data-theme="light"] .paths-section .hero__tagline a:hover { color: #fff; }
[data-theme="light"] .paths-section .hero__tagline-sep { color: rgba(255,255,255,0.45); }
[data-theme="light"] .paths-section .hero__eyebrow {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
  color: #ffd9b8;
}

/* Hide the .fp--dark accent strokes in light mode — their multiply blend reads
   as black streaks on the deep-orange base. Dark mode keeps them as intended. */
[data-theme="light"] .paths-section .fp--dark { display: none; }

/* Repaint the orange flow lines to peach-cream in light mode so they pop against
   the deep-orange base. Same role as the orange-on-black streaks in dark mode. */
[data-theme="light"] .paths-section .fp { stroke: #ffd9b8; }

.fp {
  fill: none;
  stroke: #F26522;
  stroke-linecap: round;
  stroke-dasharray: 800 200;
  animation: flowPath var(--dur, 25s) linear infinite;
  animation-delay: var(--del, 0s);
}

@keyframes flowPath {
  from { stroke-dashoffset: -1500; }
  to   { stroke-dashoffset: 1500; }
}

.fp--fast {
  stroke-dasharray: 40 1100;
  animation-name: flowFast;
}

.fp--dark {
  stroke: #000;
  stroke-dasharray: 550 650;
  mix-blend-mode: multiply;
}

@keyframes flowFast {
  0%   { stroke-dashoffset: -1500; stroke-opacity: 0; }
  15%  { stroke-opacity: 0.5; }
  85%  { stroke-opacity: 0.5; }
  100% { stroke-dashoffset: 1500; stroke-opacity: 0; }
}


/* ============================================================
   CIRCUIT PULSE BUTTON
   ============================================================ */
.circuit-btn {
  position: relative;
  width: 480px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--sp-6);
}

.circuit-btn__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}


/* ============================================================
   ENERGY FLOW DIAGRAM
   ============================================================ */
.energy-flow {
  position: relative;
  background: #050505;
  padding: var(--sp-16) 0;
  overflow: hidden;
}

.energy-flow__svg {
  display: block;
  margin: 0 auto;
  max-width: 800px;
  width: 100%;
  height: auto;
}

/* Animated light dot traveling along path */
.energy-dot {
  fill: var(--dot-color, var(--accent-orange));
  filter: drop-shadow(0 0 6px var(--dot-color, var(--accent-orange)));
}

/* Pulsing markers at nodes */
.energy-node-pulse {
  animation: nodePulse 2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes nodePulse {
  0%, 100% { r: 6; opacity: 0.6; }
  50%      { r: 10; opacity: 0.2; }
}

/* Connection lines */
.energy-line {
  fill: none;
  stroke: var(--line-color, rgba(242,101,34,0.3));
  stroke-width: 1.5;
}

.energy-line--glow {
  fill: none;
  stroke: var(--line-color, var(--accent-orange));
  stroke-width: 2;
  stroke-dasharray: 8 16;
  opacity: 0.6;
  animation: lineGlow 3s linear infinite;
}

@keyframes lineGlow {
  from { stroke-dashoffset: 24; }
  to   { stroke-dashoffset: 0; }
}

/* Center box */
.energy-center {
  fill: rgba(242,101,34,0.08);
  stroke: var(--accent-orange);
  stroke-width: 1.5;
  rx: 12;
}

/* Node labels */
.energy-label {
  fill: var(--text-secondary);
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  text-anchor: middle;
}

.energy-icon {
  fill: var(--accent-orange);
  font-size: 24px;
  text-anchor: middle;
}

@media (prefers-reduced-motion: reduce) {
  .energy-dot, .energy-line--glow { animation: none; }
  .energy-node-pulse { animation: none; }
}

/* ============================================================
   INTERACTIVE GLOBE
   ============================================================ */
.globe-section {
  position: relative;
  background: #050505;
  padding: var(--sp-16) 0;
  overflow: hidden;
}

.globe-section__layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-12);
  flex-wrap: wrap;
}

.globe-section__canvas-wrap {
  position: relative;
  width: 450px;
  height: 450px;
  flex-shrink: 0;
}

.globe-section__canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

.globe-section__info {
  max-width: 400px;
}

.globe-section__offices {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.globe-office {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--type-sm);
  color: var(--text-secondary);
}

.globe-office__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-teal);
  flex-shrink: 0;
  animation: globeDotPulse 2s ease-in-out infinite;
}

.globe-office__dot--hq {
  width: 10px;
  height: 10px;
  background: var(--accent-teal);
}

@keyframes globeDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242,101,34,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(242,101,34,0); }
}

@media (max-width: 1024px) {
  .globe-section__canvas-wrap { width: 300px; height: 300px; }
  .globe-section__layout { flex-direction: column; }
}

/* ============================================================
   FULL BLEED IMAGE CARD
   ============================================================ */
.i-bleed{position:relative;border-radius:18px;overflow:hidden;min-height:440px;background:var(--bg-elevated);border:1px solid var(--border)}
.i-bleed__img{position:absolute;top:0;left:0;right:0;width:100%;height:75%;object-fit:cover}
.i-bleed__content{position:absolute;left:0;right:0;bottom:0;top:40%;padding:32px 28px;z-index:2;display:flex;flex-direction:column;background:linear-gradient(to top,var(--bg-elevated) 0%,var(--bg-elevated) 55%,color-mix(in srgb,var(--bg-elevated) 88%,transparent) 80%,transparent 100%)}
.i-bleed__icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;background:color-mix(in srgb,var(--accent-teal) 20%,transparent);color:var(--accent-teal);flex-shrink:0}
.i-bleed__title{font-size:20px;font-weight:700;color:var(--text-primary);margin-bottom:6px}
.i-bleed__text{font-size:13px;color:var(--text-secondary);line-height:1.6}

/* ============================================================
   INDUSTRIES MARQUEE
   ============================================================ */
.industries-marquee {
  overflow: hidden;
  padding-block: var(--sp-2);
  line-height: 1.1;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.industries-marquee__row {
  display: flex;
  gap: var(--sp-2);
  width: max-content;
  animation: marqueeScroll 315s linear infinite;
  padding-block: 1px;
}

.industries-marquee__row:nth-child(2) { animation-duration: 385s; }
.industries-marquee__row:nth-child(3) { animation-duration: 266s; }
.industries-marquee__row:nth-child(4) { animation-duration: 350s; }
.industries-marquee__row:nth-child(5) { animation-duration: 294s; }

.industries-marquee__row--reverse {
  animation-direction: reverse;
}

.industries-marquee__row:hover {
  animation-play-state: paused;
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.industry-tag {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-3);
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.12);
  font-size: var(--type-2xl);
  font-weight: 200;
  white-space: nowrap;
  cursor: default;
  flex-shrink: 0;
}

.industry-tag:hover {
  color: rgba(255,255,255,0.5);
}

[data-theme="light"] .industry-tag {
  color: rgba(0,0,0,0.10);
}
[data-theme="light"] .industry-tag:hover {
  color: rgba(0,0,0,0.4);
}

/* ============================================================
   SCROLL-LINKED CANVAS ANIMATION
   ============================================================ */
.scroll-canvas {
  position: relative;
  height: 500vh;
  background: #0a0a0a;
}

.scroll-canvas__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  will-change: transform;
}

#solar-canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.scroll-canvas__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 2;
  padding: var(--sp-8);
  pointer-events: none;
  text-align: center;
  transition: none;
}

.scroll-canvas__overlay h2 {
  font-size: clamp(var(--type-3xl), 5vw, var(--type-6xl));
  font-weight: var(--fw-black);
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
  max-width: 700px;
  letter-spacing: -0.03em;
  line-height: var(--lh-tight);
}

.scroll-canvas__overlay p {
  color: rgba(255,255,255,0.6);
  font-size: var(--type-lg);
  margin-top: var(--sp-4);
  max-width: 500px;
}

.scroll-canvas__overlay--left {
  align-items: flex-start;
  text-align: left;
  padding-left: 10%;
}

.scroll-canvas__overlay--right {
  align-items: flex-end;
  text-align: right;
  padding-right: 10%;
}

/* Loader */
.scroll-canvas__loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  z-index: 10;
  background: #0a0a0a;
  color: rgba(255,255,255,0.5);
  font-size: var(--type-sm);
  transition: opacity 0.5s;
}

.scroll-canvas__loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.scroll-canvas__loader-track {
  width: 200px;
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}

.scroll-canvas__loader-bar {
  height: 100%;
  width: 0%;
  background: var(--accent-orange);
  border-radius: 2px;
  transition: width 0.15s;
}

/* Scroll indicator */
.scroll-canvas__hint {
  position: absolute;
  bottom: var(--sp-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: rgba(255,255,255,0.4);
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  animation: scrollHintBounce 2s ease-in-out infinite;
}

@keyframes scrollHintBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ============================================================
   EXTRACTED COMPONENT CLASSES (replaces inline font styles)
   ============================================================ */

/* Project card stat row — flex row with icon + value */
.stat-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.8125rem; /* 13px */
}

/* Project card spec label (e.g. "Solar: 50 MWp") */
.project-spec {
  font-size: 0.8125rem; /* 13px */
  font-weight: var(--fw-semibold);
  margin-bottom: 4px;
}

/* Project card location/meta line */
.project-meta {
  font-size: var(--type-xs);
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}

/* Solid filled badge pills (project cards) */
.badge--solid-orange {
  background: var(--accent-orange);
  color: #fff;
  border: none;
  font-size: 0.6875rem; /* 11px */
  font-weight: var(--fw-bold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  align-self: flex-start;
  display: inline-block;
}
.badge--solid-teal {
  background: var(--accent-teal);
  color: #fff;
  border: none;
  font-size: 0.6875rem; /* 11px */
  font-weight: var(--fw-bold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  align-self: flex-start;
  display: inline-block;
}

/* Mini stat value/label (residential-projects, residential-financing) */
.mini-stat__value {
  font-size: 0.9375rem; /* 15px */
  font-weight: var(--fw-bold);
}
.mini-stat__label {
  font-size: 0.6875rem; /* 11px */
  color: var(--text-muted);
}

/* Monospace display numbers (ci-roi, ci-financing) */
.display-mono {
  font-family: var(--font-mono, monospace);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.display-mono--hero {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  letter-spacing: -2px;
  margin-bottom: var(--sp-2);
}
.display-mono--lg {
  font-size: 1.75rem; /* 28px */
}
.display-mono--base {
  font-size: var(--type-base);
}

/* Newsroom / career metadata */
.news-meta {
  font-size: var(--type-sm);
  color: var(--text-muted);
}

/* Leadership role label */
.role-label {
  font-size: var(--type-sm);
  color: var(--accent-orange);
  font-weight: var(--fw-semibold);
}

/* Inline link (no padding) */
.link--inline {
  font-size: var(--type-sm);
  padding: 0;
}

/* Code / pre blocks */
.code-block {
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem; /* 13px */
  color: var(--text-primary);
  line-height: 1.8;
  margin: 0;
}

/* Stat highlight box */
.stat-highlight {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  font-family: monospace;
  font-size: var(--type-sm);
}

/* Compact card title */
.card__title--sm {
  font-size: var(--type-base);
}

/* Why ERS grid: narrow cards pulled toward center */
.grid--why-ers > .card {
  max-width: 420px;
  width: 100%;
}
.grid--why-ers > .card--right {
  justify-self: end;
}
.card--right .card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
@media (max-width: 1024px) {
  .grid--why-ers > .card,
  .grid--why-ers > .card--right {
    max-width: 100%;
    justify-self: stretch;
  }
  .card--right .card__body {
    align-items: flex-start;
    text-align: left;
  }
}

/* Hiring / category badge (career page) */
.hiring-badge {
  font-size: 0.6875rem; /* 11px */
  font-weight: var(--fw-semibold);
  padding: 2px 10px;
  border-radius: 20px;
  display: inline-block;
}
.hiring-badge--green {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}
.hiring-badge--orange {
  background: rgba(242, 101, 34, 0.15);
  color: var(--accent-orange);
}

/* Step circle (numbered process steps) */
.step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-sm);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

/* Summary stat (big number + label on project pages) */
.summary-stat__value {
  font-size: 2rem;
  font-weight: var(--fw-extrabold);
  line-height: 1;
  margin: 8px 0;
}

/* Sub-heading (used in financing/process sections) */
.heading-sub {
  font-size: var(--type-xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin-bottom: var(--sp-6);
}

/* Financing tag badge */
.tag-badge {
  font-size: var(--type-xs);
  font-weight: var(--fw-bold);
  padding: 4px 12px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

/* Small description text */
.text-detail {
  font-size: 0.8125rem; /* 13px */
  color: var(--text-secondary);
}

/* Small muted text with top margin */
.text-muted-sm {
  font-size: var(--type-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* ---- Legal / disclaimer pages (privacy notice, terms of use, etc.) ----
   Long-form bilingual pages where each section heading should breathe —
   give every <h2> roughly one line-height of vertical space above so
   sections don't crowd into the previous paragraph. Apply by adding the
   .legal-page class to the <section> wrapper of these pages. */
.legal-page h2 {
  margin-top: 2.5em;
  margin-bottom: 0.75em;
}
.legal-page h2:first-of-type {
  margin-top: 1.75em;
}

/* Breadcrumb (visible; used on the nested category "Projects" pages).
   Markup: <nav class="breadcrumb"><div class="container"><ol> <li><a>..</a></li> ... */
.breadcrumb { padding: var(--sp-3) 0; font-size: var(--type-sm); color: var(--text-muted); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.breadcrumb li + li::before { content: "ƒA"; margin-right: var(--sp-2); opacity: 0.6; }
.breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-orange); }
.breadcrumb [aria-current="page"] { color: var(--text-primary); }

/* Nav: tighten spacing so the desktop bar fits between the hamburger breakpoint and 1280px */
@media (min-width: 1025px) and (max-width: 1279px) {
  .nav__inner { gap: var(--sp-2); }
  .nav .container { padding-inline: var(--sp-4); }
  .nav__links { gap: 0; }
  .nav__link { padding-left: 6px; padding-right: 6px; }
  .nav__right { gap: var(--sp-2); }
  .nav__right .nav__contact-btn { padding-right: 10px; }
  .nav__contact-avatar { display: none; }
  .nav__right .nav__contact-btn { padding: 6px 12px; }
}