/* ============================================================
   Samso Nexus — Livera-grade refinement
   Pass 1: foundation (body backdrop, viewport card, pill nav, tokens)
   Loaded AFTER theme.css so these rules always win.
   ============================================================ */

:root {
  /* Backdrop + viewport */
  --bg-app:        #ebedf1;
  --bg-viewport:   #ffffff;
  --r-viewport:    28px;
  --sh-viewport:   0 40px 80px -40px rgba(8, 26, 48, .18),
                   0 8px 24px -12px rgba(8, 26, 48, .08);

  /* Soft-blue palette additions (layered on existing theme.css) */
  --blue-50:       #eef4fb;
  --blue-100:      #dbe7f6;
  --blue-200:      #c5d8ee;
  --blue-300:      #8ab4e8;
  --blue-500:      #3f7bd1;
  --blue-700:      #1f4f94;
  --blue-900:      #102a55;

  /* Slightly darker than --navy-900 for the dark feature bands */
  --navy-deep:     #0a1525;
  --ink-2:         #0e1623;

  /* Iso "glass" tile gradient */
  --tile-grad:     linear-gradient(135deg, #dbe7f6 0%, #8ab4e8 55%, #3f7bd1 100%);
  --tile-grad-dim: linear-gradient(135deg, #1b2b48 0%, #0e1d36 100%);

  /* Dot-grid texture */
  --dotgrid:       radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 22px 22px;
}

/* ────────────────────────────────────────────────────────────
   1. Body backdrop + floating viewport card
   ──────────────────────────────────────────────────────────── */

html, body {
  background: var(--bg-app) !important;
}

body {
  padding: 24px 0;
}

.viewport {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  background: var(--bg-viewport);
  border-radius: var(--r-viewport);
  box-shadow: var(--sh-viewport);
  overflow: hidden;
  isolation: isolate;
}

/* Full-bleed sections inside .viewport need to play nicely with the rounded clip */
.viewport > .hero,
.viewport > .ticker,
.viewport > .fbq,
.viewport > .entry,
.viewport > .news,
.viewport > .site-footer {
  border-radius: 0;
}

/* On small screens collapse the floating chrome so we use the full width */
@media (max-width: 720px) {
  body { padding: 0; }
  .viewport {
    border-radius: 0;
    box-shadow: none;
    max-width: none;
  }
}

/* ────────────────────────────────────────────────────────────
   2. Header — floats over the dark hero (Livera pattern)
   The viewport is the positioning context. Header sits absolute
   at top:0 over the navy hero so the white logo + frosted pill
   nav read correctly on dark.
   ──────────────────────────────────────────────────────────── */

.viewport { position: relative; }

.site-header {
  position: absolute !important;
  top: 0; left: 0; right: 0;
  z-index: 50 !important;
  height: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  border-bottom: none !important;
  padding: 22px 0 !important;
}

.site-header .wrap {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Logo: white wordmark over the dark hero */
.site-header .brand-logo,
.site-header .custom-logo-link img,
.site-header img {
  max-height: 30px !important;
  width: auto !important;
  height: auto !important;
  filter: brightness(0) invert(1);
  -webkit-filter: brightness(0) invert(1);
}
.site-header .custom-logo-link,
.site-header > .wrap > a:first-child {
  display: inline-flex;
  align-items: center;
}

/* ── Pill nav (centred, frosted-glass) ───────────────────── */

.site-header .main-nav {
  display: inline-flex !important;
  gap: 4px;
  padding: 6px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  margin: 0 !important;
  list-style: none !important;
}
.site-header .main-nav ul {
  list-style: none !important;
  margin: 0;
  padding: 0;
  display: inline-flex;
  gap: 4px;
}
.site-header .main-nav li { list-style: none !important; }
.site-header .main-nav li::marker { content: '' !important; }

.site-header .main-nav a {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  font: 500 13.5px/1 'DM Sans', system-ui, sans-serif;
  color: rgba(255, 255, 255, .82);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -0.005em;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.site-header .main-nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}
.site-header .main-nav a.is-active,
.site-header .main-nav a[aria-current="page"],
.site-header .main-nav .current-menu-item > a,
.site-header .main-nav .current_page_item > a {
  color: var(--blue-900);
  background: #fff;
}

/* Header CTA: white-on-dark pill matching Livera */
.site-header > .wrap > a.btn,
.site-header > .wrap > a.btn-primary {
  background: #111827 !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .35);
  padding: 11px 18px !important;
  font-size: 13.5px !important;
  border-radius: 999px !important;
  letter-spacing: -0.005em;
}
.site-header > .wrap > a.btn:hover {
  background: #1f2937 !important;
  transform: none;
}

/* The header sits in front of the hero's tinted gradient, so when the page
   is scrolled past the hero we'd like the nav to read on whatever's behind it.
   This is handled by a class added in theme.js — for now just keep it simple
   and let the navy hero be the backdrop. */

/* ────────────────────────────────────────────────────────────
   3. Hero — keep dark navy + orbit, give the header room to float
   ──────────────────────────────────────────────────────────── */

.hero {
  /* Pad top to clear the absolute header (logo 30 + padding 22*2 = 74) */
  padding-top: clamp(110px, 12vh, 140px) !important;
  padding-bottom: clamp(72px, 9vw, 110px) !important;
}

/* Subtle dot-grid texture overlay (Pass 2 will refine) */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--dotgrid);
  opacity: .85;
  pointer-events: none;
  z-index: 1;
}
.hero > .wrap,
.hero > .hero-veil { position: relative; z-index: 2; }
.hero > .hero-bg { z-index: 0; opacity: .9; }

/* Force the hero grid to give the copy column the remaining space.
   Original was `auto 1fr` or similar that let the orbit dominate. */
.hero > .wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(420px, 38vw, 520px) !important;
  align-items: center !important;
  gap: clamp(36px, 5vw, 80px) !important;
}
.hero .hero-copy { min-width: 0; }
.hero .hero-art { justify-self: end; }

/* Hero accent: swap mint to soft blue */
.hero .h1 .accent {
  color: var(--blue-300) !important;
}

/* Hero proof pills: tighten + recolour */
.hero .hero-proof {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 28px;
}
.hero .hero-proof .pf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  font-weight: 500;
}
.hero .hero-proof .pf svg {
  width: 14px; height: 14px;
  color: var(--blue-300);
}

@media (max-width: 900px) {
  .hero > .wrap {
    grid-template-columns: 1fr !important;
  }
  .hero .hero-art { justify-self: center; }
}

/* ────────────────────────────────────────────────────────────
   4. Eyebrow pill — replaces the inline-diamond eyebrow
   ──────────────────────────────────────────────────────────── */

.eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: 999px;
  color: var(--blue-700) !important;
  font: 600 11px/1 'Inter', system-ui, sans-serif !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
}
.eyebrow::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue-500);
  display: inline-block;
  flex: 0 0 auto;
  transform: none !important;
}
.eyebrow.on-dark {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .88) !important;
}
.eyebrow.on-dark::before {
  background: var(--blue-300);
}
.eyebrow.center { margin-inline: auto; }

/* ────────────────────────────────────────────────────────────
   5. Iso-tile primitive — used in Pass 3 for tech cards + "why" tile
   ──────────────────────────────────────────────────────────── */

.iso-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-card);
  background: var(--tile-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.iso-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 30% 20%, rgba(255, 255, 255, .35), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 40%);
  pointer-events: none;
}
.iso-tile svg {
  width: 46%;
  height: 46%;
  color: #fff;
  position: relative;
  z-index: 1;
}

/* Dark variant for feature bands */
.iso-tile.iso-dark {
  background: var(--tile-grad-dim);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.iso-tile.iso-dark svg { color: var(--blue-300); }

/* ────────────────────────────────────────────────────────────
   6. Feature-band primitive — used in Pass 2/3 for dark sections
   ──────────────────────────────────────────────────────────── */

.feature-band,
.viewport > .fbq,
.viewport > .entry,
.viewport > .news {
  position: relative;
  background-color: var(--navy-deep);
  isolation: isolate;
}
.feature-band::before,
.viewport > .fbq::before,
.viewport > .entry .entry-hero::before,
.viewport > .news::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--dotgrid);
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%);
}
.feature-band > *,
.viewport > .fbq > *,
.viewport > .entry > *,
.viewport > .news > * {
  position: relative;
  z-index: 1;
}

/* ────────────────────────────────────────────────────────────
   7. Footer (lives inside viewport)
   ──────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--navy-deep) !important;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.site-footer .wrap {
  padding-block: 60px 32px !important;
}
.site-footer img {
  filter: brightness(0) invert(1);
  max-height: 26px;
  width: auto;
  margin-bottom: 14px;
}
.site-footer .col h4 {
  font: 600 12px/1 'Inter', system-ui, sans-serif !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55) !important;
  margin-bottom: 14px;
}
.site-footer .col a {
  color: rgba(255, 255, 255, .82) !important;
  font-size: 14px;
  transition: color .2s var(--ease);
}
.site-footer .col a:hover { color: #fff !important; }

.site-footer .bot {
  border-top: 1px solid rgba(255, 255, 255, .06);
  margin-top: 36px;
  padding-top: 22px !important;
  color: rgba(255, 255, 255, .55);
  font-size: 13px;
}
.site-footer .bot .social {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, .06);
  border-radius: 999px;
}
.site-footer .bot .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  color: rgba(255, 255, 255, .7);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.site-footer .bot .social a:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.site-footer .bot .social svg { width: 14px; height: 14px; }

/* ────────────────────────────────────────────────────────────
   8. Section + content rhythm refinements
   ──────────────────────────────────────────────────────────── */

.section { padding-block: clamp(72px, 9vw, 120px) !important; }

.h1, .hero h1 {
  letter-spacing: -0.022em !important;
}
.h2 {
  letter-spacing: -0.018em !important;
}

/* Slight tonal shift on light sections to feel like Livera */
.section.paper { background: #f5f7fa !important; }

/* ────────────────────────────────────────────────────────────
   9. Hero polish — tone the UnicornStudio ambient layer
   ──────────────────────────────────────────────────────────── */

.hero .hero-bg { opacity: .35 !important; }
.hero .hero-bg canvas { opacity: .85; }
.hero .hero-veil {
  background: linear-gradient(180deg,
    rgba(7, 17, 41, .35) 0%,
    rgba(7, 17, 41, .15) 40%,
    rgba(7, 17, 41, .55) 100%) !important;
}

/* Ghost button (See how it fits together) — readable on dark */
.hero .btn-ghost,
.btn-ghost {
  color: rgba(255, 255, 255, .92) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  background: rgba(255, 255, 255, .04) !important;
  padding: 13px 22px !important;
  font-weight: 600 !important;
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, .1) !important;
  border-color: rgba(255, 255, 255, .35) !important;
  color: #fff !important;
}

/* Hide UnicornStudio attribution badge */
.hero .hero-bg a[href*="unicorn.studio"],
.hero a[href*="unicorn.studio"] {
  display: none !important;
}

/* ────────────────────────────────────────────────────────────
   10. Ticker — refine palette to blue
   ──────────────────────────────────────────────────────────── */

.ticker {
  background: var(--navy-deep) !important;
  border-block: 1px solid rgba(255, 255, 255, .06) !important;
  padding-block: 18px !important;
}
.ticker .ti {
  color: rgba(255, 255, 255, .55) !important;
  font: 500 13px/1 'Inter', system-ui, sans-serif !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ticker .ti i {
  background: var(--blue-300) !important;
  width: 4px !important; height: 4px !important;
  border-radius: 50%;
}

/* ────────────────────────────────────────────────────────────
   11. "60% wasted as heat" feature band (.fbq)
   ──────────────────────────────────────────────────────────── */

.viewport > .fbq {
  background-color: var(--navy-deep) !important;
  padding-block: clamp(80px, 9vw, 130px) !important;
}
.viewport > .fbq .fbq-bg {
  display: none !important; /* drop the photo background */
}
.viewport > .fbq > .wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 60px;
  position: relative;
  z-index: 1;
}
.viewport > .fbq h2,
.viewport > .fbq .h2 {
  color: #fff !important;
  margin: 0 !important;
}
.viewport > .fbq .chip {
  display: inline-flex !important;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, .82);
}
.viewport > .fbq .chip b {
  color: var(--blue-300);
  font: 700 44px/1 'DM Sans', system-ui, sans-serif;
  letter-spacing: -0.02em;
}

@media (max-width: 720px) {
  .viewport > .fbq > .wrap { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────────
   12. The integrated system — numbered pillar list (.steps)
   ──────────────────────────────────────────────────────────── */

#system .sec-head {
  text-align: left !important;
  max-width: 880px;
}

#system .steps {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  margin-top: 56px !important;
}
#system .steps .step {
  position: relative;
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 36px;
  align-items: start;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: 32px 0 !important;
  box-shadow: none !important;
  transition: background .2s var(--ease);
}
#system .steps .step:last-child {
  border-bottom: 1px solid var(--line) !important;
}
#system .steps .step:hover {
  background: var(--blue-50) !important;
  transform: none !important;
}

#system .steps .step .idx {
  font: 600 44px/1 'DM Sans', system-ui, sans-serif !important;
  color: var(--blue-500) !important;
  letter-spacing: -0.02em;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
#system .steps .step .mk { display: none !important; }
#system .steps .step h3 {
  font: 700 24px/1.2 'DM Sans', system-ui, sans-serif !important;
  letter-spacing: -0.01em;
  margin: 4px 0 8px !important;
  color: var(--ink) !important;
}
#system .steps .step p {
  max-width: 580px;
  color: var(--slate) !important;
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0 !important;
}
#system .steps .step .more {
  align-self: center;
  white-space: nowrap;
  color: var(--blue-700) !important;
  font-weight: 600;
  font-size: 14px;
}

@media (max-width: 720px) {
  #system .steps .step {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #system .steps .step .more { align-self: start; }
}

/* ────────────────────────────────────────────────────────────
   13. Eight technologies — iso tile cards (.tech)
   ──────────────────────────────────────────────────────────── */

#tech .tech-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
  margin-top: 48px !important;
}
@media (max-width: 1100px) { #tech .tech-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px)  { #tech .tech-grid { grid-template-columns: 1fr !important; } }

#tech .tech {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card) !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column;
  gap: 18px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
#tech .tech:hover {
  transform: translateY(-4px);
  border-color: var(--blue-200) !important;
  box-shadow: 0 24px 40px -28px rgba(63, 123, 209, .35);
}

/* The .mk inside .tech becomes the iso tile */
#tech .tech .mk {
  position: relative;
  aspect-ratio: 1.4 / 1;
  border-radius: 14px;
  background: var(--tile-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}
#tech .tech .mk::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 30% 20%, rgba(255, 255, 255, .35), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 40%);
  pointer-events: none;
}
#tech .tech .mk svg {
  width: 38%;
  height: 38%;
  color: #fff;
  position: relative;
  z-index: 1;
}

#tech .tech h3 {
  font: 600 18px/1.25 'DM Sans', system-ui, sans-serif !important;
  margin: 0 !important;
  color: var(--ink) !important;
}
#tech .tech p {
  font-size: 13.5px !important;
  color: var(--slate) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
#tech .tech .arrow {
  position: absolute;
  top: 26px; right: 26px;
  z-index: 2;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  color: var(--blue-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#tech .tech .arrow svg { width: 14px; height: 14px; }

/* Exclusive nickel-selenide — big dark feature card */
#tech .excl {
  margin-top: 64px !important;
  display: grid !important;
  grid-template-columns: 180px minmax(0, 1fr) auto;
  gap: 36px !important;
  align-items: center;
  background: var(--navy-deep) !important;
  background-image: var(--dotgrid) !important;
  border: 1px solid rgba(255, 255, 255, .06) !important;
  border-radius: 20px !important;
  padding: 32px !important;
  color: #fff !important;
}
#tech .excl .mk {
  width: 180px !important; height: 180px !important;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-card);
  background: var(--tile-grad-dim) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
#tech .excl .mk svg {
  width: 56% !important; height: 56% !important;
  color: var(--blue-300) !important;
}
#tech .excl .tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(63, 123, 209, .15);
  color: var(--blue-300);
  border-radius: 999px;
  font: 600 11px/1 'Inter', system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
#tech .excl h3 {
  font: 700 26px/1.2 'DM Sans', system-ui, sans-serif !important;
  margin: 0 0 10px !important;
  color: #fff !important;
  letter-spacing: -0.01em;
}
#tech .excl p {
  color: rgba(255, 255, 255, .78) !important;
  font-size: 15px;
  line-height: 1.55;
  margin: 0 !important;
  max-width: 720px;
}
#tech .excl .btn {
  background: var(--blue-500) !important;
  color: #fff !important;
  border: 0 !important;
}
#tech .excl .btn:hover { background: var(--blue-700) !important; }

@media (max-width: 900px) {
  #tech .excl { grid-template-columns: 1fr; text-align: left; }
  #tech .excl .mk { width: 120px !important; height: 120px !important; }
}

/* ────────────────────────────────────────────────────────────
   14. Why Samso Nexus — iso glass tile + checklist accordion
   ──────────────────────────────────────────────────────────── */

#why .strat-media {
  position: relative;
  aspect-ratio: 1 / 1.1;
  max-width: 460px;
  border-radius: var(--r-card);
  background: var(--tile-grad);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 24px 60px -30px rgba(63, 123, 209, .35),
              inset 0 1px 0 rgba(255, 255, 255, .35);
}
#why .strat-media img {
  display: none !important; /* replace photo with iso tile */
}
#why .strat-media .ov { display: none !important; }
#why .strat-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 20% 25%, rgba(255, 255, 255, .35), transparent 60%),
    radial-gradient(60% 50% at 80% 80%, rgba(31, 79, 148, .35), transparent 60%);
  z-index: 0;
}
/* Place 4 floating glyphs over the tile */
#why .strat-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 64 64' fill='none' stroke='white' stroke-opacity='.85' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='32' cy='32' r='4' fill='white' stroke='none'/><line x1='44' y1='32' x2='49' y2='32'/><line x1='20' y1='32' x2='15' y2='32'/><line x1='32' y1='44' x2='32' y2='49'/><line x1='32' y1='20' x2='32' y2='15'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 64 64' fill='none' stroke='white' stroke-opacity='.85' stroke-width='2.4' stroke-linecap='round'><circle cx='26' cy='32' r='11'/><circle cx='38' cy='32' r='11'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='68' height='68' viewBox='0 0 64 64' fill='none' stroke='white' stroke-opacity='.85' stroke-width='2.4' stroke-linecap='round'><path d='M13 32 q9.5 -7 19 0 t19 0'/><path d='M13 42 q9.5 -7 19 0 t19 0'/></svg>");
  background-repeat: no-repeat;
  background-position: 18% 20%, 72% 32%, 30% 75%;
  z-index: 1;
}

#why .strat-card {
  position: absolute !important;
  left: 24px !important; bottom: 24px !important;
  background: rgba(255, 255, 255, .92) !important;
  color: var(--ink) !important;
  border-radius: var(--r-card) !important;
  padding: 18px !important;
  backdrop-filter: blur(8px);
  max-width: 240px;
  z-index: 2;
}
#why .strat-card .l {
  font: 600 11px/1 'Inter', system-ui, sans-serif !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-700) !important;
  margin-bottom: 6px;
  display: block;
}
#why .strat-card b {
  font: 600 15px/1.35 'DM Sans', system-ui, sans-serif !important;
  color: var(--ink) !important;
}

/* Accordion refinement */
#why .acc {
  margin-top: 28px !important;
  border-top: 1px solid var(--line);
}
#why .acc-item {
  border-bottom: 1px solid var(--line) !important;
}
#why .acc-btn {
  padding: 22px 0 !important;
  font: 600 18px/1.3 'DM Sans', system-ui, sans-serif !important;
  color: var(--ink) !important;
  background: transparent !important;
}
#why .acc-btn .pm {
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--blue-50);
  color: var(--blue-700);
}
#why .acc-item.open .acc-btn .pm {
  background: var(--blue-700);
  color: #fff;
}
#why .acc-panel p {
  color: var(--slate);
  font-size: 15px;
  line-height: 1.65;
  padding-bottom: 22px;
}

/* ────────────────────────────────────────────────────────────
   15. "What we bring" — 3 numbered value cards
   ──────────────────────────────────────────────────────────── */

.value3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
  margin-top: 48px !important;
}
.value3 .v {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card) !important;
  padding: 28px !important;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.value3 .v:hover {
  transform: translateY(-4px);
  border-color: var(--blue-200) !important;
}
.value3 .v .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--blue-50);
  color: var(--blue-700);
  font: 700 14px/1 'DM Sans', system-ui, sans-serif;
  margin-bottom: 16px;
}
.value3 .v h3 {
  font: 600 20px/1.25 'DM Sans', system-ui, sans-serif !important;
  margin: 0 0 8px !important;
  color: var(--ink) !important;
}
.value3 .v p {
  color: var(--slate) !important;
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 !important;
}

@media (max-width: 900px) { .value3 { grid-template-columns: 1fr !important; } }

/* ────────────────────────────────────────────────────────────
   16. Find the right entry point — dark feature + pill tabs
   ──────────────────────────────────────────────────────────── */

.viewport > .entry {
  background: var(--navy-deep) !important;
  padding-block: 0 !important;
}
.viewport > .entry .entry-hero {
  padding-block: clamp(72px, 9vw, 110px) !important;
  position: relative;
  isolation: isolate;
}
.viewport > .entry .entry-hero h2,
.viewport > .entry .entry-hero .h2 {
  color: #fff !important;
  text-align: center;
  margin: 8px 0 28px !important;
}
.viewport > .entry .eyebrow.on-dark { display: inline-flex !important; margin-inline: auto; }

.entry-tabs {
  display: inline-flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px !important;
  margin-inline: auto !important;
  padding: 6px !important;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  margin-top: 6px !important;
}
.entry-tab {
  padding: 11px 18px !important;
  font: 500 14px/1 'DM Sans', system-ui, sans-serif !important;
  color: rgba(255, 255, 255, .8) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.entry-tab.on {
  background: #fff !important;
  color: var(--blue-900) !important;
}

.entry-body {
  background: var(--navy-deep) !important;
  padding-bottom: clamp(72px, 9vw, 110px) !important;
}
.entry-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important;
  gap: 60px !important;
  align-items: center;
}
.entry-panel .intro {
  color: rgba(255, 255, 255, .85) !important;
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: 22px;
}
.entry-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid;
  gap: 14px;
}
.entry-list li {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  padding: 16px 18px;
}
.entry-list li b {
  display: block;
  color: #fff !important;
  font: 600 15.5px/1.3 'DM Sans', system-ui, sans-serif !important;
  margin-bottom: 4px;
}
.entry-list li span {
  color: rgba(255, 255, 255, .65) !important;
  font-size: 13.5px;
  line-height: 1.5;
}

.entry-media {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 460px;
  margin-inline-start: auto;
  border-radius: var(--r-card);
  background: var(--tile-grad);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 24px 60px -30px rgba(63, 123, 209, .4);
}
.entry-media img { display: none !important; }
.entry-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 30% 25%, rgba(255, 255, 255, .35), transparent 60%);
}
.entry-media .btn {
  position: absolute !important;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, .92) !important;
  color: var(--blue-900) !important;
  border: 0 !important;
  z-index: 2;
}
.entry-media .btn:hover { background: #fff !important; }

@media (max-width: 900px) {
  .entry-panel { grid-template-columns: 1fr !important; }
  .entry-media { margin-inline: auto; }
}

/* ────────────────────────────────────────────────────────────
   17. Industries — 2-col + 2×2+1 stat grid
   ──────────────────────────────────────────────────────────── */

#industries .ind {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) !important;
  gap: 60px !important;
  align-items: start;
}
#industries .ind-media .h2 { margin-top: 14px !important; }
#industries .ind-media img {
  border-radius: var(--r-card) !important;
  width: 100%;
  margin-block: 24px;
  filter: saturate(.85);
}
#industries .ind-media .btn {
  background: #111827 !important;
  color: #fff !important;
  border: 0 !important;
}

#industries .stats {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}
#industries .stats .stat {
  background: var(--blue-50) !important;
  border: 1px solid var(--blue-100) !important;
  border-radius: var(--r-card) !important;
  padding: 24px !important;
  position: relative;
  transition: transform .25s var(--ease);
}
#industries .stats .stat:hover { transform: translateY(-2px); }
#industries .stats .stat:nth-child(2n) {
  background: #fff !important;
  border-color: var(--line) !important;
}
#industries .stats .stat:last-child {
  grid-column: 1 / -1;
  background: var(--navy-deep) !important;
  border-color: rgba(255, 255, 255, .06) !important;
  color: #fff;
}
#industries .stats .stat .n {
  font: 700 38px/1 'DM Sans', system-ui, sans-serif !important;
  color: var(--blue-700) !important;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  display: block;
}
#industries .stats .stat:last-child .n {
  color: var(--blue-300) !important;
  font-size: 32px;
}
#industries .stats .stat .d b {
  display: block;
  font: 600 14px/1.3 'DM Sans', system-ui, sans-serif !important;
  color: var(--ink) !important;
  margin-bottom: 4px;
}
#industries .stats .stat:last-child .d b { color: #fff !important; }
#industries .stats .stat .d span {
  color: var(--slate) !important;
  font-size: 13px;
  line-height: 1.45;
}
#industries .stats .stat:last-child .d span { color: rgba(255, 255, 255, .65) !important; }

@media (max-width: 900px) {
  #industries .ind { grid-template-columns: 1fr !important; }
  #industries .stats { grid-template-columns: 1fr !important; }
  #industries .stats .stat:last-child { grid-column: 1; }
}

/* ────────────────────────────────────────────────────────────
   18. Trust logos — integration tile grid
   ──────────────────────────────────────────────────────────── */

.logos {
  background: var(--bg-app) !important;
  padding-block: clamp(56px, 7vw, 90px) !important;
}
.logos .lab {
  text-align: center;
  font: 500 12px/1 'Inter', system-ui, sans-serif !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-soft) !important;
  margin-bottom: 24px !important;
}
.logos .row {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.logos .lg {
  position: relative;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  padding: 22px 18px !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  font: 600 15px/1 'DM Sans', system-ui, sans-serif !important;
  color: var(--ink) !important;
  min-height: 64px;
  letter-spacing: -0.005em;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.logos .lg::after {
  content: '+';
  position: absolute;
  top: 14px; right: 16px;
  font-weight: 400;
  color: var(--slate-soft);
  font-size: 16px;
}
.logos .lg:hover {
  transform: translateY(-2px);
  border-color: var(--blue-200) !important;
}

@media (max-width: 1100px) { .logos .row { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 560px)  { .logos .row { grid-template-columns: repeat(2, 1fr) !important; } }

/* ────────────────────────────────────────────────────────────
   19. Contact — light section + iso-tile pip cards + cleaner form
   ──────────────────────────────────────────────────────────── */

.contact {
  background: #fff !important;
}
.contact .grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) !important;
  gap: 48px !important;
  align-items: start;
}

.contact .info .lead {
  color: var(--slate) !important;
  font-size: 16px;
  line-height: 1.55;
  margin: 16px 0 28px;
  max-width: 460px;
}

/* Call us / Visit us → iso-tile pips */
.contact .pip {
  display: flex !important;
  align-items: center;
  gap: 16px;
  padding: 18px;
  background: var(--blue-50) !important;
  border: 1px solid var(--blue-100) !important;
  border-radius: var(--r-card) !important;
  margin-bottom: 12px;
}
.contact .pip .ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--tile-grad);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex: 0 0 auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.contact .pip .ic svg { width: 20px; height: 20px; }
.contact .pip b {
  display: block;
  font: 600 14px/1.3 'DM Sans', system-ui, sans-serif !important;
  color: var(--ink) !important;
  margin-bottom: 2px;
}
.contact .pip span {
  color: var(--slate) !important;
  font-size: 13.5px;
  line-height: 1.45;
}

/* Form card — light + clean */
.contact .form-card {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card) !important;
  padding: 32px !important;
  box-shadow: 0 30px 60px -38px rgba(8, 26, 48, .12) !important;
}
.contact .form-card h3 {
  font: 600 18px/1.3 'DM Sans', system-ui, sans-serif !important;
  color: var(--ink) !important;
  margin: 0 0 18px !important;
}
.contact .form-card label {
  font: 600 12px/1 'Inter', system-ui, sans-serif !important;
  letter-spacing: .04em;
  color: var(--slate) !important;
  margin-bottom: 6px;
  display: block;
}
.contact .form-card input,
.contact .form-card textarea {
  background: var(--bg-app) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  transition: border-color .2s, box-shadow .2s;
}
.contact .form-card input:focus,
.contact .form-card textarea:focus {
  border-color: var(--blue-500) !important;
  box-shadow: 0 0 0 3px rgba(63, 123, 209, .15) !important;
  outline: none;
  background: #fff !important;
}
.contact .form-card .btn {
  background: var(--ink) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
}
.contact .form-note {
  font-size: 12px !important;
  color: var(--slate-soft) !important;
  margin-top: 14px !important;
}

@media (max-width: 900px) {
  .contact .grid { grid-template-columns: 1fr !important; }
}

/* ────────────────────────────────────────────────────────────
   20. Newsletter — small dark feature card centred in viewport
   ──────────────────────────────────────────────────────────── */

.viewport > .news {
  background: transparent !important;
  padding-block: 0 !important;
  margin-block: 16px;
}
.viewport > .news::before { display: none !important; }
.viewport > .news .wrap { padding-inline: var(--gut) !important; }
.viewport > .news .inner {
  background: var(--navy-deep) !important;
  background-image: var(--dotgrid) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, .06) !important;
  padding: 36px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important;
  align-items: center;
  gap: 32px;
}
.viewport > .news h3 {
  color: #fff !important;
  font: 700 22px/1.25 'DM Sans', system-ui, sans-serif !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.01em;
}
.viewport > .news p {
  color: rgba(255, 255, 255, .65) !important;
  font-size: 14px;
  margin: 0 !important;
}
.viewport > .news form {
  display: flex !important;
  gap: 6px;
  padding: 6px;
  background: rgba(255, 255, 255, .06);
  border-radius: 999px;
}
.viewport > .news input {
  flex: 1;
  background: transparent !important;
  border: 0 !important;
  padding: 10px 14px !important;
  color: #fff !important;
  font-size: 14px !important;
}
.viewport > .news input::placeholder { color: rgba(255, 255, 255, .45); }
.viewport > .news input:focus { outline: none !important; }
.viewport > .news .btn {
  background: var(--blue-500) !important;
  color: #fff !important;
  border: 0 !important;
}

@media (max-width: 720px) {
  .viewport > .news .inner { grid-template-columns: 1fr !important; }
}

/* ────────────────────────────────────────────────────────────
   21. Section heading rhythm — tighten lead + center-eyebrow
   ──────────────────────────────────────────────────────────── */

.sec-head { margin-bottom: 28px !important; }
.sec-head .lead {
  font-size: 17px !important;
  line-height: 1.55 !important;
  color: var(--slate) !important;
  max-width: 720px;
  margin-top: 14px;
}
.sec-head.center { text-align: center; }
.sec-head.center .lead { margin-inline: auto; }
.sec-head.center .eyebrow.center { margin-inline: auto; }

/* H2 sizing — slightly larger to feel editorial like Livera */
.h2 {
  font: 700 clamp(28px, 3.4vw, 44px)/1.1 'DM Sans', system-ui, sans-serif !important;
  letter-spacing: -0.018em !important;
  color: var(--ink) !important;
  margin: 0 !important;
}

/* Visible reveal — make sure nothing remains hidden if JS hasn't fired */
.reveal { opacity: 1 !important; transform: none !important; }
.reveal[style*="opacity"] { opacity: 1 !important; }

/* ────────────────────────────────────────────────────────────
   22. Pass 4 — fixes + micro-polish
   ──────────────────────────────────────────────────────────── */

/* Tab panels: respect [hidden] attribute */
.entry-panel[hidden] { display: none !important; }

/* Make the entry-hero center align its content */
.viewport > .entry .entry-hero > .wrap {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.viewport > .entry .entry-hero > .wrap > * { width: 100%; max-width: 880px; }
.viewport > .entry .entry-tabs { width: auto; }

/* News form input contrast */
.viewport > .news input { color: rgba(255,255,255,.92) !important; }
.viewport > .news input::placeholder { color: rgba(255,255,255,.5) !important; }

/* Section #system header eyebrow alignment */
#system .sec-head .eyebrow,
#tech .sec-head .eyebrow,
#why .sec-head .eyebrow { margin-bottom: 14px; }

/* Improve hero proof-pill SVG sizing */
.hero .hero-proof .pf svg { flex: 0 0 14px; }

/* Industries: the stat-grid spans full width when no media on left for small screens */
@media (min-width: 901px) {
  #industries .ind { gap: 64px !important; }
}

/* Final spacing harmonization between sections */
.section + .section { padding-top: 0 !important; }
.viewport > .fbq + .section { padding-top: clamp(72px, 9vw, 110px) !important; }

/* ────────────────────────────────────────────────────────────
   23. Tech card accordion — Read more / Read less
   ──────────────────────────────────────────────────────────── */

#tech .tech {
  position: relative;
}

/* Make sure the iso-tile (mk) doesn't stretch vertically when the card
   grows from the expanded detail panel. */
#tech .tech .mk { flex: 0 0 auto; }

/* Pin the hook + title to the top, push the button + detail down */
#tech .tech-hook {
  margin: 0 !important;
  flex: 1 1 auto;
}

/* Read more / Read less toggle — subtle pill, sits flush left */
#tech .tech-more {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 4px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font: 600 13px/1 'DM Sans', system-ui, sans-serif;
  letter-spacing: -0.005em;
  color: var(--blue-700);
  align-self: flex-start;
  transition: color .2s var(--ease);
}
#tech .tech-more:hover { color: var(--blue-500); }
#tech .tech-more:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 4px;
  border-radius: 4px;
}

#tech .tech-more .ic-plus {
  width: 16px; height: 16px;
  background: var(--blue-50);
  border-radius: 999px;
  padding: 2px;
  transition: background .2s var(--ease), transform .25s var(--ease);
}
#tech .tech-more:hover .ic-plus { background: var(--blue-100); }

/* When expanded: collapse the vertical line of the plus into a minus,
   and swap label text via CSS pseudo-element trick (kept simple — JS
   swaps innerText so screen readers also see the update). */
#tech .tech-more[aria-expanded=true] .ic-vert {
  opacity: 0;
}
#tech .tech-more .ic-vert {
  transition: opacity .2s var(--ease);
}

/* The detail panel itself */
#tech .tech-detail {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .35s var(--ease), opacity .25s var(--ease), padding .25s var(--ease), margin .25s var(--ease);
}
#tech .tech-detail[hidden] {
  display: block !important;       /* override the default [hidden] so we can animate */
  max-height: 0 !important;
  opacity: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top-color: transparent !important;
  pointer-events: none;
}
#tech .tech-detail p {
  margin: 0 !important;
  color: var(--slate) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}

/* Open state: JS removes [hidden] and adds .is-open on the parent .tech */
#tech .tech.is-open .tech-detail {
  max-height: 600px;
  opacity: 1;
}

/* Keep the iso tile from stretching when the card grows */
#tech .tech.is-open .mk { aspect-ratio: 1.4 / 1; }

/* When a card opens, lift it a touch more so it's visually grouped */
#tech .tech.is-open {
  box-shadow: 0 24px 50px -28px rgba(63, 123, 209, .35) !important;
  border-color: var(--blue-200) !important;
}

/* ============================================================
   24. SHARPENING PASS — wider viewport, premium CTA, nav icons,
   sharper typography. Counters the "contained / generic" feeling.
   ============================================================ */

/* Wider, less-boxed-in viewport. Reduce side margins, soften the chrome */
.viewport {
  max-width: 1480px !important;
  border-radius: 22px !important;
  box-shadow: 0 50px 100px -50px rgba(8, 26, 48, .22),
              0 10px 30px -16px rgba(8, 26, 48, .08) !important;
}
@media (max-width: 1100px) {
  body { padding: 12px 0 !important; }
  .viewport { border-radius: 16px !important; max-width: calc(100vw - 24px) !important; }
}

/* Slightly tighter body padding so we use more of the screen */
body { padding: 18px 0 !important; }

/* ────────────────────────────────────────────────────────────
   24a. Header — denser, premium CTA, more presence
   ──────────────────────────────────────────────────────────── */

.site-header { padding: 26px 0 !important; }
.site-header .brand-logo,
.site-header .custom-logo-link img,
.site-header img { max-height: 32px !important; }

/* The pill nav: lighter shadow, more refined */
.site-header .main-nav {
  padding: 5px !important;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset,
              0 18px 40px -28px rgba(0, 0, 0, .45);
}
.site-header .main-nav a {
  padding: 10px 16px !important;
  font-weight: 500 !important;
  gap: 8px;
}

/* Inject space for the icon (injected by JS below) */
.site-header .main-nav a .nav-ic {
  width: 15px; height: 15px;
  flex: 0 0 15px;
  color: currentColor;
  opacity: .82;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.site-header .main-nav a:hover .nav-ic { opacity: 1; transform: translateY(-1px); }
.site-header .main-nav a.is-active .nav-ic { opacity: 1; }

/* ── The header CTA — make it the brightest thing in the navbar ── */
.site-header > .wrap > a.btn,
.site-header > .wrap > a.btn-primary {
  background: linear-gradient(180deg, #c8f3a9 0%, #9ee37d 100%) !important;
  color: #0a1525 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: -0.005em !important;
  padding: 13px 22px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 0, 0, .08) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .6) inset,
    0 14px 30px -10px rgba(158, 227, 125, .55),
    0 2px 6px -2px rgba(0, 0, 0, .15) !important;
  position: relative;
  isolation: isolate;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease) !important;
}
.site-header > .wrap > a.btn:hover {
  background: linear-gradient(180deg, #d6f6bc 0%, #adea8c 100%) !important;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .7) inset,
    0 18px 40px -10px rgba(158, 227, 125, .65),
    0 4px 10px -2px rgba(0, 0, 0, .18) !important;
}
.site-header > .wrap > a.btn:active { transform: translateY(0); }

/* The arrow inside the header CTA — bigger, more confident */
.site-header > .wrap > a.btn svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
  transition: transform .25s var(--ease);
}
.site-header > .wrap > a.btn:hover svg { transform: translateX(3px); }

/* ────────────────────────────────────────────────────────────
   24b. Hero — taller, bigger headline, sharper rhythm
   ──────────────────────────────────────────────────────────── */

.hero {
  padding-top: clamp(130px, 14vh, 170px) !important;
  padding-bottom: clamp(96px, 11vw, 130px) !important;
  min-height: clamp(640px, 80vh, 820px) !important;
}

.hero .h1 {
  font: 700 clamp(48px, 5.4vw, 76px)/1.02 'DM Sans', system-ui, sans-serif !important;
  letter-spacing: -0.028em !important;
  text-wrap: balance;
}

.hero .lead {
  font-size: 17px !important;
  line-height: 1.55 !important;
  max-width: 480px;
  color: rgba(255, 255, 255, .82) !important;
}

.hero .hero-cta { gap: 12px !important; margin-top: 36px !important; }
.hero .btn-primary {
  background: linear-gradient(180deg, #c8f3a9 0%, #9ee37d 100%) !important;
  color: #0a1525 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 15px 26px !important;
  border-radius: 999px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .55) inset,
    0 18px 40px -12px rgba(158, 227, 125, .5) !important;
}
.hero .btn-primary:hover {
  background: linear-gradient(180deg, #d6f6bc 0%, #adea8c 100%) !important;
  transform: translateY(-1px);
}

/* Hero proof pills: a touch more polish */
.hero .hero-proof { margin-top: 38px !important; }
.hero .hero-proof .pf {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  font-size: 12.5px !important;
  letter-spacing: -0.005em;
  padding: 9px 14px !important;
}

/* ────────────────────────────────────────────────────────────
   24c. Sharpen typography globally
   ──────────────────────────────────────────────────────────── */

.h2 {
  font: 700 clamp(34px, 4vw, 56px)/1.05 'DM Sans', system-ui, sans-serif !important;
  letter-spacing: -0.024em !important;
}

.h3 { letter-spacing: -0.012em !important; }

/* Eyebrow refinement — tighter, more refined */
.eyebrow {
  padding: 5px 11px 5px 9px !important;
  font-size: 10.5px !important;
  letter-spacing: .14em !important;
}
.eyebrow::before { width: 6px !important; height: 6px !important; }

/* Section heads: more breathing room */
.sec-head { margin-bottom: 44px !important; }
.sec-head .lead { font-size: 18px !important; margin-top: 16px !important; }

/* ────────────────────────────────────────────────────────────
   24d. Card shadows — premium multi-layer
   ──────────────────────────────────────────────────────────── */

#tech .tech {
  border: 1px solid rgba(14, 45, 78, .08) !important;
  box-shadow:
    0 1px 2px rgba(8, 26, 48, .04),
    0 4px 12px -4px rgba(8, 26, 48, .06) !important;
}
#tech .tech:hover {
  box-shadow:
    0 1px 2px rgba(8, 26, 48, .04),
    0 28px 50px -24px rgba(63, 123, 209, .35),
    0 4px 12px -4px rgba(8, 26, 48, .08) !important;
  border-color: rgba(63, 123, 209, .28) !important;
}

.value3 .v {
  box-shadow:
    0 1px 2px rgba(8, 26, 48, .04),
    0 4px 14px -6px rgba(8, 26, 48, .06) !important;
}

#industries .stats .stat {
  box-shadow:
    0 1px 2px rgba(8, 26, 48, .03),
    0 4px 12px -6px rgba(8, 26, 48, .04) !important;
}

.logos .lg {
  box-shadow:
    0 1px 2px rgba(8, 26, 48, .03) !important;
}
.logos .lg:hover {
  box-shadow:
    0 1px 2px rgba(8, 26, 48, .03),
    0 12px 24px -10px rgba(63, 123, 209, .25) !important;
}

.contact .form-card {
  box-shadow:
    0 1px 2px rgba(8, 26, 48, .04),
    0 30px 60px -38px rgba(8, 26, 48, .15) !important;
}

/* ────────────────────────────────────────────────────────────
   24e. Better section rhythm — more white space
   ──────────────────────────────────────────────────────────── */

.section { padding-block: clamp(96px, 11vw, 150px) !important; }

#tech .tech-grid { gap: 18px !important; }
#tech .excl { margin-top: 80px !important; }

/* Tighten the pillar list rows so they feel intentional */
#system .steps .step { padding: 36px 0 !important; gap: 48px !important; }
#system .steps .step h3 { font-size: 26px !important; }

/* ============================================================
   25. CONSISTENCY FIXES — stats layout, entry tile, accordion
   ============================================================ */

/* ── 25a. Stats: kill base theme's 200px number column.
   Stack each stat cleanly: number → label → description. ── */
#industries .stats {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
}
#industries .stats .stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  padding: 26px !important;
  min-width: 0 !important;
}
#industries .stats .stat .n {
  width: auto !important;
  min-width: 0 !important;
  font: 700 clamp(34px, 3vw, 46px)/1 'DM Sans', system-ui, sans-serif !important;
  letter-spacing: -0.025em !important;
  color: var(--blue-700) !important;
  margin: 0 0 14px !important;
  white-space: nowrap;
}
#industries .stats .stat:last-child .n {
  color: var(--blue-300) !important;
  font-size: clamp(30px, 2.6vw, 40px) !important;
}
#industries .stats .stat .d {
  width: auto !important;
  min-width: 0 !important;
  display: block !important;
}
#industries .stats .stat .d b {
  display: block !important;
  font: 600 15px/1.3 'DM Sans', system-ui, sans-serif !important;
  color: var(--ink) !important;
  margin-bottom: 6px !important;
}
#industries .stats .stat:last-child .d b { color: #fff !important; }
#industries .stats .stat .d span {
  display: block !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--slate) !important;
  max-width: 38ch;
}
#industries .stats .stat:last-child .d span { color: rgba(255,255,255,.7) !important; }

/* The wide UK+EU card: lay it out horizontally so it reads as a banner */
#industries .stats .stat:last-child {
  flex-direction: row !important;
  align-items: center !important;
  gap: 28px !important;
  padding: 28px 32px !important;
}
#industries .stats .stat:last-child .n { margin: 0 !important; flex: 0 0 auto; }
@media (max-width: 560px) {
  #industries .stats .stat:last-child { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
}

/* ── 25b. Entry-point media tile: give it real width + height,
   stop the auto-margin from collapsing it, add a glyph cluster. ── */
.entry-panel .entry-media {
  width: 100% !important;
  max-width: 480px !important;
  margin: 0 0 0 auto !important;
  justify-self: end !important;
  min-height: 420px;
  display: block !important;
}
.entry-panel .entry-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 64 64' fill='none' stroke='white' stroke-opacity='.9' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'><circle cx='32' cy='32' r='4' fill='white' stroke='none'/><line x1='44' y1='32' x2='49' y2='32'/><line x1='20' y1='32' x2='15' y2='32'/><line x1='32' y1='44' x2='32' y2='49'/><line x1='32' y1='20' x2='32' y2='15'/><line x1='40.5' y1='40.5' x2='44' y2='44'/><line x1='23.5' y1='23.5' x2='20' y2='20'/><line x1='40.5' y1='23.5' x2='44' y2='20'/><line x1='23.5' y1='40.5' x2='20' y2='44'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 64 64' fill='none' stroke='white' stroke-opacity='.85' stroke-width='2.3' stroke-linecap='round'><path d='M13 26 q9.5 -7 19 0 t19 0'/><path d='M13 34 q9.5 -7 19 0 t19 0'/><path d='M13 42 q9.5 -7 19 0 t19 0'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='66' height='66' viewBox='0 0 64 64' fill='none' stroke='white' stroke-opacity='.8' stroke-width='2.3' stroke-linecap='round'><circle cx='24' cy='24' r='5.5'/><circle cx='40' cy='40' r='5.5'/><circle cx='40' cy='24' r='5.5' fill='white' stroke='none'/></svg>");
  background-repeat: no-repeat;
  background-position: 24% 26%, 74% 38%, 40% 76%;
  pointer-events: none;
}
.entry-panel .entry-media .btn { z-index: 3 !important; }

/* ── 25c. Accordion toggle: consistent blue +/-, clean minus on open ── */
#why .acc-item { box-shadow: none !important; background: transparent !important; }
#why .acc-item.open {
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
  background: transparent !important;
}
#why .acc-btn { box-shadow: none !important; outline: none !important; }
#why .acc-btn .pm {
  background: var(--blue-50) !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
}
#why .acc-btn .pm::before,
#why .acc-btn .pm::after {
  background: var(--blue-700) !important;
}
#why .acc-item.open .acc-btn .pm { background: var(--blue-700) !important; }
#why .acc-item.open .acc-btn .pm::before,
#why .acc-item.open .acc-btn .pm::after { background: #fff !important; }
#why .acc-item.open .acc-btn .pm::after { opacity: 0 !important; }

/* ── 25d. Tech card hover arrow: a touch more visible on hover ── */
#tech .tech:hover .arrow { opacity: 1 !important; }
#tech .tech .arrow {
  background: #fff !important;
  box-shadow: 0 4px 12px -4px rgba(8,26,48,.25) !important;
}

/* ============================================================
   26. LIVERA ALIGNMENT PASS — light silk hero, navy header,
   icon+label eyebrows, pale silk tiles, dark quantified-impact
   stats band, restrained cards. Overrides earlier sections.
   ============================================================ */

:root {
  /* Softer, airier silk palette for tiles */
  --tile-grad: linear-gradient(150deg, #eef4fb 0%, #d3e2f5 38%, #a7c8ec 72%, #7aa8de 100%);
  --tile-grad-dim: linear-gradient(150deg, #1a2c4a 0%, #112038 100%);
}

/* ────────────────────────────────────────────────────────────
   26a. HERO — light silk wave, text-only, bottom-left
   ──────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  background: #dde8f5 !important;
  display: flex !important;
  align-items: flex-end !important;
  min-height: clamp(580px, 80vh, 800px) !important;
  padding: 0 !important;
  overflow: hidden;
}
.hero::after { display: none !important; }   /* kill old dot-grid overlay */

/* The silk background: layered soft-blue radial mesh + flowing light bands */
.hero-silk {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(115% 80% at 78% 8%,  rgba(255,255,255,.70), transparent 46%),
    radial-gradient(85% 70% at 92% 52%,  rgba(132,178,232,.55), transparent 55%),
    radial-gradient(120% 95% at 12% 98%, rgba(20,52,104,.92),  transparent 62%),
    radial-gradient(100% 80% at 46% 128%, rgba(13,38,82,.95),  transparent 60%),
    linear-gradient(158deg, #eaf1f9 0%, #c2d6ef 30%, #7aa6dc 60%, #2c5ea6 88%, #18407e 100%);
}
/* Flowing silk "folds" — soft diagonal light bands */
.hero-silk::before {
  content: ''; position: absolute; inset: -10%;
  background:
    repeating-linear-gradient( 122deg,
      rgba(255,255,255,0) 0px,
      rgba(255,255,255,0) 60px,
      rgba(255,255,255,.05) 90px,
      rgba(255,255,255,0) 140px );
  mix-blend-mode: screen;
  transform: rotate(-2deg);
}
/* A large flowing wave to sell the "silk" motion, bottom-anchored */
.hero-silk::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -5%; height: 80%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1440' height='600' viewBox='0 0 1440 600' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23ffffff' stop-opacity='.22'/><stop offset='1' stop-color='%23ffffff' stop-opacity='0'/></linearGradient></defs><path d='M0,360 C260,240 520,460 760,360 C1000,260 1200,420 1440,330 L1440,600 L0,600 Z' fill='url(%23g)'/><path d='M0,440 C300,360 560,520 820,430 C1080,340 1260,480 1440,420 L1440,600 L0,600 Z' fill='%231a4d8f' fill-opacity='.18'/></svg>");
  background-size: cover; background-position: center bottom;
  pointer-events: none;
}

/* Veil: deepen the lower-left for white-text legibility */
.hero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, rgba(10,28,60,.42) 0%, rgba(10,28,60,.12) 38%, rgba(10,28,60,0) 66%);
}

.hero > .wrap {
  position: relative; z-index: 2;
  display: block !important;
  grid-template-columns: none !important;
  width: 100%;
  padding-block: 0 clamp(54px, 7vw, 92px) !important;
}
.hero .hero-copy { max-width: 620px; }

.hero .h1 {
  color: #fff !important;
  font: 700 clamp(42px, 4.8vw, 68px)/1.04 'DM Sans', system-ui, sans-serif !important;
  letter-spacing: -0.028em !important;
  margin: 0 0 18px !important;
  text-shadow: 0 1px 30px rgba(8,22,48,.25);
}
.hero .h1 .accent { color: #fff !important; opacity: .9; }

.hero .lead {
  color: rgba(255,255,255,.9) !important;
  font-size: 17px !important; line-height: 1.55 !important;
  max-width: 500px; text-shadow: 0 1px 20px rgba(8,22,48,.2);
}

/* Hero CTAs — Livera style: white solid + ghost outline */
.hero .hero-cta { gap: 12px !important; margin-top: 32px !important; }
.hero .btn-primary {
  background: #fff !important; color: #0e2742 !important;
  border: 0 !important; font-weight: 700 !important;
  box-shadow: 0 14px 34px -14px rgba(8,22,48,.45) !important;
}
.hero .btn-primary:hover { background: #f1f5fb !important; transform: translateY(-1px); }
.hero .btn-ghost {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  color: #fff !important; font-weight: 600 !important;
}
.hero .btn-ghost:hover { background: rgba(255,255,255,.16) !important; }

/* Proof pills on silk */
.hero .hero-proof { margin-top: 36px !important; }
.hero .hero-proof .pf {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff !important;
}
.hero .hero-proof .pf svg { color: #fff !important; }

@media (max-width: 640px) {
  .hero { min-height: 70vh !important; }
  .hero .hero-cta { flex-direction: column; align-items: stretch; }
}

/* ────────────────────────────────────────────────────────────
   26b. HEADER — navy logo + nav over the lighter silk top
   ──────────────────────────────────────────────────────────── */

.site-header img {
  filter: none !important;   /* navy logo, set in header.php */
  -webkit-filter: none !important;
}
.site-header .main-nav {
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(14,45,78,.10) !important;
  backdrop-filter: blur(14px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
  box-shadow: 0 8px 24px -16px rgba(8,26,48,.3) !important;
}
.site-header .main-nav a { color: #234 !important; }
.site-header .main-nav a:hover { color: #0e2742 !important; background: rgba(255,255,255,.6) !important; }
.site-header .main-nav a.is-active,
.site-header .main-nav .current-menu-item > a,
.site-header .main-nav .current_page_item > a {
  color: #fff !important; background: #0e2742 !important;
}
.site-header .main-nav a .nav-ic { opacity: .7; }
/* header CTA keeps the lime gradient from section 24 — pops on light */

/* ────────────────────────────────────────────────────────────
   26c. EYEBROWS — subtle icon + muted sentence-case label
   (replaces the uppercase pill from earlier sections)
   ──────────────────────────────────────────────────────────── */

.eyebrow {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
  color: #4f74a8 !important;
  font: 600 12.5px/1 'DM Sans', system-ui, sans-serif !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}
.eyebrow::before {
  content: '' !important;
  width: 18px !important; height: 18px !important;
  border-radius: 5px !important;
  background:
    linear-gradient(135deg, var(--blue-300), var(--blue-500)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  flex: 0 0 18px;
  transform: none !important;
}
.eyebrow.on-dark { color: rgba(255,255,255,.82) !important; }
.eyebrow.on-dark::before {
  background: linear-gradient(135deg, #bcd6f2, var(--blue-300)) !important;
}

/* ────────────────────────────────────────────────────────────
   26d. "ONE SYSTEM" — two-col head + orbit, then pillar steps
   ──────────────────────────────────────────────────────────── */

#system .system-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) !important;
  gap: clamp(36px, 5vw, 72px) !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}
#system .system-top .sec-head { margin-bottom: 0 !important; }
#system .system-orbit {
  display: flex; align-items: center; justify-content: center;
}
#system .system-orbit .orbit {
  position: relative;
  width: min(420px, 100%);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
@media (max-width: 900px) {
  #system .system-top { grid-template-columns: 1fr !important; }
  #system .system-orbit .orbit { width: min(360px, 86%); }
}

/* ────────────────────────────────────────────────────────────
   26e. ISO-TILES & tech cards — paler silk, restrained
   ──────────────────────────────────────────────────────────── */

#tech .tech {
  border: 1px solid rgba(14,45,78,.07) !important;
  box-shadow: 0 1px 2px rgba(8,26,48,.03), 0 8px 22px -16px rgba(8,26,48,.10) !important;
}
#tech .tech:hover {
  border-color: rgba(122,168,222,.5) !important;
  box-shadow: 0 1px 2px rgba(8,26,48,.03), 0 22px 44px -26px rgba(47,99,170,.30) !important;
}
#tech .tech .mk {
  background: var(--tile-grad) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55) !important;
}
#tech .tech .mk svg { color: #3a6bb0 !important; opacity: .9; }
#tech .tech .mk::before {
  background:
    radial-gradient(70% 90% at 28% 18%, rgba(255,255,255,.6), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.2), transparent 45%) !important;
}

/* Why-tile + entry-media: paler silk */
#why .strat-media,
.entry-panel .entry-media {
  background: var(--tile-grad) !important;
}
#why .strat-media svg, .entry-panel .entry-media svg { color: #3a6bb0; }

/* Exclusive nickel-selenide card icon tile */
#tech .excl .mk { background: var(--tile-grad-dim) !important; }
#tech .excl .mk svg { color: var(--blue-300) !important; }

/* Value cards + logo tiles — restrained */
.value3 .v { box-shadow: 0 1px 2px rgba(8,26,48,.03), 0 6px 18px -12px rgba(8,26,48,.08) !important; }
.logos .lg { box-shadow: 0 1px 2px rgba(8,26,48,.03) !important; }

/* ────────────────────────────────────────────────────────────
   26f. STATS — dark "Quantified impact" band (matches reference)
   ──────────────────────────────────────────────────────────── */

#industries {
  background: var(--navy-deep) !important;
  background-image: var(--dotgrid) !important;
  position: relative; isolation: isolate;
}
#industries::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 80% 10%, rgba(47,99,170,.22), transparent 60%);
}
#industries .wrap { position: relative; z-index: 1; }

#industries .ind {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.25fr) !important;
  gap: clamp(36px, 5vw, 72px) !important;
  align-items: start !important;
}
/* Left column → text only (drop the photo, Livera-style) */
#industries .ind-media .eyebrow.on-dark,
#industries .ind-media .eyebrow { /* allow either */ }
#industries .ind-media .eyebrow { color: rgba(255,255,255,.82) !important; }
#industries .ind-media .eyebrow::before { background: linear-gradient(135deg,#bcd6f2,var(--blue-300)) !important; }
#industries .ind-media .h2 { color: #fff !important; }
#industries .ind-media img { display: none !important; }
#industries .ind-media .btn {
  background: #fff !important; color: #0e2742 !important; border: 0 !important;
  margin-top: 22px !important;
}
#industries .ind-media .btn:hover { background: #eef3fa !important; }
/* footnote line */
#industries .ind-media::after {
  content: 'Modelled on real half-hourly demand across distilleries, manufacturing & large estates.';
  display: block; margin-top: 26px;
  color: rgba(255,255,255,.5); font-size: 13px; line-height: 1.5; max-width: 320px;
}

/* Right grid: dark cards, line icon top-left, number → label → desc */
#industries .stats { gap: 16px !important; }
#industries .stats .stat {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: var(--r-card) !important;
  padding: 24px !important;
  position: relative;
}
/* First card highlighted (lighter), like the reference */
#industries .stats .stat:first-child {
  background: #f3f6fb !important;
  border-color: transparent !important;
}
#industries .stats .stat:nth-child(2n) { background: rgba(255,255,255,.04) !important; }
#industries .stats .stat:last-child {
  grid-column: 1 / -1;
  background: rgba(47,99,170,.16) !important;
  border-color: rgba(122,168,222,.25) !important;
  flex-direction: row !important; align-items: center !important; gap: 26px !important;
}
/* line icon slot (injected via JS) */
#industries .stats .stat .stat-ic {
  width: 26px; height: 26px; display: block; margin-bottom: 18px;
  color: var(--blue-300);
}
#industries .stats .stat:first-child .stat-ic { color: var(--blue-700); }
#industries .stats .stat:last-child .stat-ic { margin-bottom: 0; flex: 0 0 26px; }
#industries .stats .stat .n { color: #fff !important; }
#industries .stats .stat:first-child .n { color: var(--blue-700) !important; }
#industries .stats .stat .d b { color: #fff !important; }
#industries .stats .stat:first-child .d b { color: var(--ink) !important; }
#industries .stats .stat .d span { color: rgba(255,255,255,.62) !important; }
#industries .stats .stat:first-child .d span { color: var(--slate) !important; }

/* ────────────────────────────────────────────────────────────
   26g. Misc consistency
   ──────────────────────────────────────────────────────────── */

/* Section heads slightly smaller / more editorial, matching Livera restraint */
.h2 { font-size: clamp(30px, 3.4vw, 46px) !important; letter-spacing: -0.02em !important; }
.sec-head .lead { font-size: 16.5px !important; color: var(--slate) !important; }

/* Ticker → calmer */
.ticker .ti { color: rgba(255,255,255,.5) !important; }

/* ── 27. Hero fit fix — clear the floating header, calmer headline ── */
.hero {
  align-items: flex-end !important;
  min-height: clamp(680px, 90vh, 900px) !important;
  padding-top: clamp(124px, 15vh, 168px) !important;
  padding-bottom: 0 !important;
}
.hero .h1 {
  font-size: clamp(40px, 4.4vw, 60px) !important;
  line-height: 1.06 !important;
}
.hero .hero-copy { max-width: 600px; }
/* keep the eyebrow visible + spaced from the headline */
.hero .hero-copy .eyebrow { margin-bottom: 18px !important; display: inline-flex !important; }

/* ============================================================
   28. Full-width page + UnicornStudio hero with blue tint
   ============================================================ */

/* Full-bleed: remove the floating viewport card */
html, body { background: #ffffff !important; }
body { padding: 0 !important; }
.viewport {
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.logos { background: #f5f7fa !important; }

/* Hero: UnicornStudio canvas background */
.hero { background: #0c2546 !important; }
.hero-bg {
  position: absolute !important; inset: 0 !important; z-index: 0 !important;
  overflow: hidden !important; pointer-events: none;
}
.hero-bg canvas, .hero-bg > * {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block;
}
.hero-bg a[href*="unicorn.studio"],
.hero a[href*="unicorn"] { display: none !important; }

/* Blue tint over the animation: header scrim + bottom-left legibility + overall wash */
.hero-veil {
  position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(9,26,58,.50), rgba(9,26,58,0) 16%),
    linear-gradient(to top right, rgba(9,26,58,.64), rgba(13,40,86,.34) 52%, rgba(20,60,120,.10) 82%),
    rgba(22,64,128,.22) !important;
}
.hero > .wrap { position: relative; z-index: 2; }

/* Header reverts to WHITE over the tinted hero */
.site-header img {
  filter: brightness(0) invert(1) !important;
  -webkit-filter: brightness(0) invert(1) !important;
}
.site-header .main-nav {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
.site-header .main-nav a { color: rgba(255,255,255,.85) !important; }
.site-header .main-nav a:hover { color: #fff !important; background: rgba(255,255,255,.1) !important; }
.site-header .main-nav a.is-active,
.site-header .main-nav .current-menu-item > a,
.site-header .main-nav .current_page_item > a { color: #0e2742 !important; background: #fff !important; }

/* ============================================================
   29. AUDIT FIX PASS — orbit→hero-right, padded hover, photo
   tech cards on white, normalized padding, clean accordion,
   entry-section redesign. Overrides earlier sections.
   ============================================================ */

/* ── 29a. Hero: orbit on the right, lighter tint ── */
.hero { align-items: center !important; padding-bottom: clamp(48px, 7vh, 92px) !important; }
.hero > .wrap {
  position: relative; z-index: 2;
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.92fr) !important;
  align-items: center !important;
  gap: clamp(32px, 5vw, 72px) !important;
  padding-block: 0 !important;
}
.hero .hero-copy { max-width: 600px; }
.hero .hero-art { width: 100%; display: flex; justify-content: center; }
.hero .hero-art .orbit {
  position: relative;
  width: min(460px, 100%);
  aspect-ratio: 1 / 1;
  margin: 0;
}
@media (max-width: 900px) {
  .hero > .wrap { grid-template-columns: 1fr !important; }
  .hero .hero-art { display: none !important; }
}
/* lighter blue tint so the animation reads */
.hero-veil {
  background:
    linear-gradient(to bottom, rgba(9,26,58,.40), rgba(9,26,58,0) 14%),
    linear-gradient(to top right, rgba(9,26,58,.52), rgba(13,40,86,.16) 48%, transparent 75%),
    rgba(20,60,120,.06) !important;
}

/* ── 29b. Header: bigger logo ── */
.site-header img { max-height: 42px !important; }

/* ── 29c. Pillar steps: padded, rounded hover (text off the edge) ── */
#system .steps .step {
  padding: 28px 26px !important;
  border-radius: 14px;
  transition: background .2s var(--ease) !important;
}
#system .steps .step:hover { background: var(--blue-50) !important; transform: none !important; }

/* ── 29d. Tech cards: photographic tiles on a white section ── */
#tech { background: #fff !important; }
#tech .wrap { background: transparent !important; }

#tech .tech .mk {
  background-color: #e7eef7 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
#tech .tech .mk::before {
  background: linear-gradient(180deg, rgba(10,24,50,0) 42%, rgba(10,24,50,.32) 100%) !important;
}
/* line icon → small frosted corner chip */
#tech .tech .mk svg {
  position: absolute !important;
  top: 12px !important; left: 12px !important;
  width: 36px !important; height: 36px !important;
  padding: 8px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.92) !important;
  color: var(--blue-700) !important;
  box-shadow: 0 2px 8px -3px rgba(8,26,48,.3);
}
/* per-card images (Solar/Wind local; 6 natural Unsplash temps) */
#tech .tech-grid .tech:nth-child(1) .mk { background-image: url(../img/photos/sn-tech-solar.jpg); }
#tech .tech-grid .tech:nth-child(2) .mk { background-image: url(../img/photos/sn-tech-wind.jpg); }
#tech .tech-grid .tech:nth-child(3) .mk { background-image: url(https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80&auto=format&fit=crop); }
#tech .tech-grid .tech:nth-child(4) .mk { background-image: url(https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&q=80&auto=format&fit=crop); }
#tech .tech-grid .tech:nth-child(5) .mk { background-image: url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80&auto=format&fit=crop); }
#tech .tech-grid .tech:nth-child(6) .mk { background-image: url(https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=800&q=80&auto=format&fit=crop); }
#tech .tech-grid .tech:nth-child(7) .mk { background-image: url(https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=800&q=80&auto=format&fit=crop); }
#tech .tech-grid .tech:nth-child(8) .mk { background-image: url(https://images.unsplash.com/photo-1437482078695-73f5ca6c96e2?w=800&q=80&auto=format&fit=crop); }

/* ── 29e. Section padding: one consistent system (kills the duplicates) ── */
.section { padding-block: clamp(84px, 9vw, 130px) !important; }
.section + .section { padding-top: clamp(84px, 9vw, 130px) !important; }
.viewport > .fbq + .section,
.fbq + .section { padding-top: clamp(84px, 9vw, 130px) !important; }

/* ── 29f. Accordion toggle: clean + / − ── */
#why .acc-btn .pm {
  position: relative !important;
  width: 30px !important; height: 30px !important;
  border-radius: 999px !important;
  background: var(--blue-50) !important;
  flex: 0 0 30px !important;
  display: inline-block !important;
}
#why .acc-btn .pm::before,
#why .acc-btn .pm::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  background: var(--blue-700) !important;
  border-radius: 2px !important;
  transition: opacity .2s var(--ease) !important;
}
#why .acc-btn .pm::before { width: 12px !important; height: 2px !important; transform: translate(-50%, -50%) !important; }
#why .acc-btn .pm::after  { width: 2px !important; height: 12px !important; transform: translate(-50%, -50%) !important; }
#why .acc-item.open .acc-btn .pm { background: var(--blue-700) !important; }
#why .acc-item.open .acc-btn .pm::before,
#why .acc-item.open .acc-btn .pm::after { background: #fff !important; }
#why .acc-item.open .acc-btn .pm::after { opacity: 0 !important; }

/* ── 29g. "Find the right entry point": real photo in the right tile ── */
.entry-panel .entry-media {
  background: #16243f !important;
  overflow: hidden;
  min-height: 460px;
}
.entry-panel .entry-media img {
  display: block !important;
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  filter: saturate(.92);
}
.entry-panel .entry-media::before {
  content: '' !important; position: absolute !important; inset: 0 !important; z-index: 1 !important;
  background: linear-gradient(180deg, rgba(10,24,50,.12) 0%, rgba(10,24,50,.18) 55%, rgba(10,24,50,.6) 100%) !important;
}
.entry-panel .entry-media::after { display: none !important; }
.entry-panel .entry-media .btn {
  position: absolute !important; left: 50% !important; bottom: 22px !important;
  transform: translateX(-50%) !important; z-index: 2 !important;
  background: #fff !important; color: #0e2742 !important; border: 0 !important;
}
.entry-panel .entry-media .btn:hover { background: #eef3fa !important; }
/* tighten the entry panel rhythm */
.entry-body { padding-top: 8px !important; }
.entry-panel { align-items: stretch !important; gap: clamp(36px, 5vw, 64px) !important; }
.entry-panel .intro { margin-bottom: 20px !important; }

/* ── 29-fix: tech images must beat the !important gradient; bigger logo ── */
#tech .tech-grid .tech:nth-child(1) .mk { background-image: url(../img/photos/sn-tech-solar.jpg) !important; }
#tech .tech-grid .tech:nth-child(2) .mk { background-image: url(../img/photos/sn-tech-wind.jpg) !important; }
#tech .tech-grid .tech:nth-child(3) .mk { background-image: url(https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80&auto=format&fit=crop) !important; }
#tech .tech-grid .tech:nth-child(4) .mk { background-image: url(https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&q=80&auto=format&fit=crop) !important; }
#tech .tech-grid .tech:nth-child(5) .mk { background-image: url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80&auto=format&fit=crop) !important; }
#tech .tech-grid .tech:nth-child(6) .mk { background-image: url(https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=800&q=80&auto=format&fit=crop) !important; }
#tech .tech-grid .tech:nth-child(7) .mk { background-image: url(https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=800&q=80&auto=format&fit=crop) !important; }
#tech .tech-grid .tech:nth-child(8) .mk { background-image: url(https://images.unsplash.com/photo-1437482078695-73f5ca6c96e2?w=800&q=80&auto=format&fit=crop) !important; }

.site-header .brand-logo,
.site-header .custom-logo,
.site-header a img,
.site-header img { max-height: 50px !important; max-width: 320px !important; }

/* ============================================================
   30. PROMINENCE + ORBIT + FBQ VIDEO + GREEN→BLUE AUDIT
   - hero video a touch more visible (lighter veil)
   - orbit recoloured to blue, premium core glow + pulse ring
   - the same hero animation behind the .fbq dark band
   - global green/mint token flip kills every green leftover
   Latest section — wins over 1–29.
   ============================================================ */

/* ── 30a. Global token flip: green/mint → blue ──
   Several base-theme rules still reference --green/--mint (orbit,
   ticker dots, step index, .more links, fbq chip, entry bullets,
   ::selection, eyebrows on dark, hero proof ticks). Redefining the
   tokens recolours every leftover at once, without disturbing the
   many rules already pinned to --blue-*. */
:root {
  --green:        #2f6fb0;                 /* was #1D9E75 */
  --green-700:    #1f4f94;                 /* = --blue-700 */
  --green-800:    #102a55;                 /* = --blue-900 */
  --mint:         #9fc6f0;                 /* was #9FE1CB — light blue on dark */
  --mint-soft:    #eaf1fb;                 /* was #EAF5F0 */
  --line-on-dark: rgba(127,176,232,.20);   /* was mint-tinted */
}
/* explicit safety net for the flagged entry bullets */
.entry-list li::before { background: var(--blue-300) !important; }

/* ── 30b. Hero: nudge the animation a touch more prominent ──
   Trim each veil layer slightly (only a bit) so the motion reads. */
.hero-veil {
  background:
    linear-gradient(to bottom, rgba(9,26,58,.32), rgba(9,26,58,0) 15%),
    linear-gradient(to top right, rgba(9,26,58,.42), rgba(13,40,86,.12) 50%, transparent 78%),
    rgba(20,60,120,.03) !important;
}

/* ── 30c. Hero orbit: blue recolour + premium core ── */
.hero .orbit-track    { stroke: var(--blue-300) !important; opacity: .32 !important; }
.hero .orbit-spoke    { stroke: var(--blue-300) !important; opacity: .18 !important; }
.hero .orbit-spoke.lit{ opacity: .75 !important; stroke-width: 1.4 !important; }

/* frosted chips read a hair stronger over the lighter video */
.hero .orbit-chip {
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 14px 38px rgba(7,22,41,.40), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
.hero .orbit-node:hover .orbit-chip {
  background: var(--blue-500) !important; color: #fff !important;
  box-shadow: 0 18px 44px rgba(63,123,209,.55) !important;
}
.hero .orbit-node:hover .orbit-label { color: var(--blue-300) !important; }

/* core: blue frame, blue glow, soft inner sheen */
.hero .orbit-core {
  border: 1px solid rgba(138,180,232,.48) !important;
  box-shadow:
    0 0 0 8px rgba(63,123,209,.09),
    inset 0 1px 0 rgba(255,255,255,.20),
    0 28px 64px rgba(0,0,0,.5) !important;
}
.hero .orbit-core svg        { color: var(--blue-300) !important; }
.hero .orbit-core .core-hook { color: var(--blue-300) !important; }
.hero .orbit-core::after {
  background: radial-gradient(circle, rgba(63,123,209,.42), transparent 66%) !important;
}
/* an expanding pulse ring emanating from the core */
.hero .orbit-core::before {
  content: "" !important;
  position: absolute !important; inset: -2px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(138,180,232,.5) !important;
  z-index: -1 !important;
  animation: sn-core-pulse 4.6s var(--ease) infinite !important;
}
@keyframes sn-core-pulse {
  0%   { transform: scale(1);    opacity: .6; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .orbit-core::before { animation: none !important; opacity: 0 !important; }
}

/* ── 30d. fbq dark band: the same hero animation behind it ── */
.viewport > .fbq, .fbq {
  position: relative !important;
  overflow: hidden !important;
  background-color: #0a1525 !important;
}
/* re-show the canvas host (section 11 had hidden it) */
.viewport > .fbq .fbq-bg, .fbq .fbq-bg {
  display: block !important;
  position: absolute !important; inset: 0 !important;
  z-index: 0 !important;
  background: none !important;
  pointer-events: none !important;
}
.fbq .fbq-bg canvas, .fbq .fbq-bg > * {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block;
}
.fbq .fbq-bg a[href*="unicorn"] { display: none !important; }
/* navy tint over the motion (repurpose the dotgrid ::before) so copy stays legible */
.viewport > .fbq::before, .fbq::before {
  background-image: none !important;
  background:
    linear-gradient(180deg, rgba(7,18,38,.74), rgba(7,18,38,.60)),
    radial-gradient(130% 130% at 82% 16%, rgba(13,40,86,.34), transparent 60%) !important;
  -webkit-mask-image: none !important; mask-image: none !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
/* content sits above canvas + tint */
.viewport > .fbq > .wrap, .fbq > .wrap { position: relative !important; z-index: 2 !important; }

/* ── 30e. Mop up hardcoded mint/green literals on dark UI ── */
.excl::after { background: radial-gradient(circle, rgba(63,123,209,.20), transparent 66%) !important; }
.excl .mk    { background: rgba(138,180,232,.08) !important; }
.btn-ghost:hover {
  background: rgba(138,180,232,.07) !important;
  box-shadow: inset 0 0 0 1px rgba(138,180,232,.40) !important;
}
.entry-tab:hover { border-color: rgba(138,180,232,.40) !important; }
.field input, .field textarea { background: rgba(138,180,232,.05) !important; }
.field input:focus, .field textarea:focus { background: rgba(138,180,232,.09) !important; }
.news input { background: rgba(138,180,232,.07) !important; }
.site-footer .social a:hover { background: rgba(138,180,232,.10) !important; }

/* ── 30f. Header CTA: lime-green leftover → confident blue pill ──
   Section 24a hardcoded a lime gradient on the persistent header CTA;
   it clashes with the all-blue identity. Recolour to a premium blue. */
.site-header > .wrap > a.btn,
.site-header > .wrap > a.btn-primary {
  background: linear-gradient(180deg, #4a86d6 0%, #1f4f94 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 14px 30px -10px rgba(63,123,209,.55),
    0 2px 6px -2px rgba(0,0,0,.18) !important;
}
.site-header > .wrap > a.btn:hover,
.site-header > .wrap > a.btn-primary:hover {
  background: linear-gradient(180deg, #5b93de 0%, #21539a 100%) !important;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 18px 40px -10px rgba(63,123,209,.65),
    0 4px 10px -2px rgba(0,0,0,.20) !important;
}
.site-header > .wrap > a.btn-primary svg { color: #fff !important; }

/* ============================================================
   31. FEEDBACK PASS — orbit hook legibility, fbq height,
   tech grid bg, hour-by-hour tile redesign, entry-tabs width.
   Latest section — wins over 1–30.
   ============================================================ */

/* ── 31a. Orbit hook: hide the core glyph while the hook shows ── */
.hero .orbit.show-hook .orbit-core svg { opacity: 0 !important; }
.hero .orbit-core .core-hook { z-index: 2 !important; }

/* ── 31b. fbq band: halve the height (kill wasted space) ── */
.viewport > .fbq, .fbq { padding-block: clamp(46px, 5vw, 72px) !important; }

/* ── 31c. Tech grid: remove the grey panel behind the cards ── */
#tech .tech-grid {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ── 31d. Entry tabs: pill hugs its content, centred ── */
.entry .entry-hero .wrap { text-align: center; }
.entry-tabs {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100%;
}

/* ── 31e. "Hour-by-hour modelling" tile: dark navy + hero
   animation + an animated demand-curve illustration ── */
#why .strat-media {
  background: #0c2546 !important;
  aspect-ratio: 1 / 1.04 !important;
  max-width: 460px;
  border-radius: var(--r-card);
  overflow: hidden !important;
  isolation: isolate;
  box-shadow: 0 30px 70px -34px rgba(8,22,48,.6), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
/* kill the old silk gradient + floating glyphs */
#why .strat-media::before,
#why .strat-media::after { display: none !important; content: none !important; }
#why .strat-media img { display: none !important; }

/* hero UnicornStudio animation behind the tile */
#why .strat-media .strat-bg {
  position: absolute !important; inset: 0 !important; z-index: 0 !important;
  overflow: hidden !important; pointer-events: none !important;
}
#why .strat-media .strat-bg canvas,
#why .strat-media .strat-bg > * {
  width: 100% !important; height: 100% !important; object-fit: cover !important; display: block;
}
#why .strat-media .strat-bg a[href*="unicorn"] { display: none !important; }
/* navy tint so the illustration + caption read */
#why .strat-media .strat-veil {
  position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(7,18,38,.52), rgba(7,18,38,.80)),
    radial-gradient(120% 90% at 78% 12%, rgba(13,40,86,.34), transparent 60%);
}
/* the animated viz layer */
#why .strat-media .strat-viz {
  position: absolute !important; inset: 0 !important; z-index: 2 !important;
  width: 100% !important; height: 100% !important; pointer-events: none;
}
/* caption above everything */
#why .strat-card { z-index: 5 !important; }

/* viz animations */
#why .strat-viz .sv-demand {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: sn-draw 2.2s var(--ease) .25s forwards;
}
#why .strat-viz .sv-demand-glow {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: sn-draw 2.2s var(--ease) .25s forwards;
}
#why .strat-viz .sv-area { opacity: 0; animation: sn-fade 1.1s ease 1.7s forwards; }
#why .strat-viz .sv-gen  { opacity: 0; animation: sn-fade 1.1s ease 1.1s forwards; }
#why .strat-viz .sv-scan { animation: sn-scan 5.5s linear infinite; will-change: transform; }
#why .strat-viz .sv-peak { transform-box: fill-box; transform-origin: center; animation: sn-peak 2.8s var(--ease) infinite; }
#why .strat-viz .sv-dot  { transform-box: fill-box; transform-origin: center; animation: sn-peak 2.8s var(--ease) .9s infinite; }

@keyframes sn-draw { to { stroke-dashoffset: 0; } }
@keyframes sn-fade { to { opacity: 1; } }
@keyframes sn-scan { 0% { transform: translateX(-30px); } 100% { transform: translateX(500px); } }
@keyframes sn-peak {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .6; transform: scale(1.5); }
}
@media (prefers-reduced-motion: reduce) {
  #why .strat-viz .sv-scan { display: none !important; }
  #why .strat-viz .sv-demand,
  #why .strat-viz .sv-demand-glow { stroke-dashoffset: 0 !important; animation: none !important; }
  #why .strat-viz .sv-area,
  #why .strat-viz .sv-gen { opacity: 1 !important; animation: none !important; }
  #why .strat-viz .sv-peak,
  #why .strat-viz .sv-dot { animation: none !important; }
}

/* 31c-fix: drop the faint border around the tech grid */
#tech .tech-grid { border: 0 !important; }

/* ============================================================
   32. LOWER-HALF ELEVATION — refined micro-interactions
   Compact pillars, fbq key-metric strip, value cards, entry
   list, industries hover, contact "what happens next",
   news/footer polish. Wins over 1–31. (refined & subtle)
   ============================================================ */

/* ── 32a. Pillar steps: fix the broken grid, compact, hover accent ── */
#system .steps { margin-top: 46px !important; }
#system .steps .step {
  position: relative !important;
  grid-template-columns: 68px minmax(0,1fr) auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 28px !important; row-gap: 3px !important;
  padding: 19px 24px !important;
  border-radius: 16px !important;
  align-items: start !important;
  transition: background .25s var(--ease), transform .25s var(--ease) !important;
}
#system .steps .step .idx  { grid-column: 1 !important; grid-row: 1 / span 2 !important; align-self: center !important; font-size: 40px !important; transition: color .25s var(--ease), transform .25s var(--ease) !important; }
#system .steps .step h3    { grid-column: 2 !important; grid-row: 1 !important; align-self: end !important; font-size: 22px !important; margin: 0 0 1px !important; }
#system .steps .step p     { grid-column: 2 !important; grid-row: 2 !important; align-self: start !important; }
#system .steps .step .more { grid-column: 3 !important; grid-row: 1 / span 2 !important; align-self: center !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; }
#system .steps .step::before {
  content: "" !important;
  position: absolute !important; left: 9px !important; top: 16px !important; bottom: 16px !important;
  width: 3px !important; border-radius: 3px !important;
  background: linear-gradient(180deg, var(--blue-500), var(--blue-300)) !important;
  transform: scaleY(0) !important; transform-origin: center !important;
  transition: transform .3s var(--ease) !important;
}
#system .steps .step:hover { background: var(--blue-50) !important; }
#system .steps .step:hover::before { transform: scaleY(1) !important; }
#system .steps .step:hover .idx { color: var(--blue-700) !important; transform: translateX(5px) !important; }
#system .steps .step .more svg { transition: transform .3s var(--ease) !important; }
#system .steps .step:hover .more svg { transform: translateX(4px) !important; }
@media (max-width: 760px) {
  #system .steps .step { grid-template-columns: 1fr !important; row-gap: 6px !important; padding: 18px !important; }
  #system .steps .step .idx,
  #system .steps .step h3,
  #system .steps .step p,
  #system .steps .step .more { grid-column: 1 !important; grid-row: auto !important; align-self: start !important; }
  #system .steps .step::before { display: none !important; }
}

/* ── 32b. "What we bring": icon, ghost numeral, accent line, lift ── */
.value3 { align-items: start !important; }
.value3 .v {
  position: relative !important;
  overflow: hidden !important;
  padding: 30px 28px !important;
  display: flex !important; flex-direction: column !important;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease) !important;
}
.value3 .v .v-ic {
  width: 48px; height: 48px; border-radius: 13px;
  background: var(--blue-50); color: var(--blue-700);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.value3 .v .v-ic svg { width: 24px; height: 24px; }
.value3 .v .n {
  position: absolute !important; top: 18px !important; right: 24px !important;
  width: auto !important; height: auto !important;
  background: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important;
  font: 800 46px/1 'DM Sans', system-ui, sans-serif !important;
  color: var(--blue-100) !important; pointer-events: none;
  transition: color .3s var(--ease);
}
.value3 .v::after {
  content: "" !important;
  position: absolute !important; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-300));
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.value3 .v:hover {
  transform: translateY(-6px) !important;
  border-color: var(--blue-200) !important;
  box-shadow: 0 20px 44px -20px rgba(8,26,48,.24) !important;
}
.value3 .v:hover::after { transform: scaleX(1) !important; }
.value3 .v:hover .v-ic { background: var(--blue-100); transform: translateY(-2px) scale(1.06); }
.value3 .v:hover .n { color: var(--blue-200) !important; }

/* ── 32c. Entry-list: fix cramped left padding + hover ── */
.entry-list li {
  padding: 16px 20px 16px 42px !important;
  position: relative !important;
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease) !important;
}
.entry-list li::before { left: 20px !important; top: 23px !important; transition: box-shadow .25s var(--ease) !important; }
.entry-list li:hover {
  transform: translateY(-3px) !important;
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(138,180,232,.32) !important;
}
.entry-list li:hover::before { box-shadow: 0 0 0 4px rgba(138,180,232,.16) !important; }

/* ── 32d. fbq band: 2-col layout + key-metric stat strip ── */
.viewport > .fbq > .wrap, .fbq > .wrap {
  grid-template-columns: minmax(0,1fr) minmax(330px,460px) !important;
  gap: clamp(32px,5vw,72px) !important;
  align-items: center !important;
}
.fbq .fbq-stats { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
.fbq .fbq-stats .stat {
  position: relative;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;
  padding: 18px 18px 16px !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex !important; flex-direction: column !important; gap: 5px !important;
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease) !important;
}
.fbq .fbq-stats .stat:hover {
  transform: translateY(-4px) !important;
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(138,180,232,.4) !important;
}
.fbq .fbq-stats .stat .n {
  font: 700 clamp(30px,3vw,40px)/1 'DM Sans', system-ui, sans-serif !important;
  letter-spacing: -.02em !important; color: var(--blue-300) !important;
}
.fbq .fbq-stats .stat .lbl { font-size: 13px !important; line-height: 1.35 !important; color: rgba(255,255,255,.72) !important; }
@media (max-width: 860px) { .viewport > .fbq > .wrap, .fbq > .wrap { grid-template-columns: 1fr !important; } }
@media (max-width: 460px) { .fbq .fbq-stats { grid-template-columns: 1fr !important; } }

/* ── 32e. Industries stat cards: refined hover ── */
#industries .stats .stat {
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease) !important;
}
#industries .stats .stat:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(138,180,232,.4) !important;
  box-shadow: 0 20px 44px -24px rgba(0,0,0,.65) !important;
}
#industries .stats .stat .stat-ic { transition: transform .25s var(--ease), color .25s var(--ease) !important; }
#industries .stats .stat:hover .stat-ic { color: var(--blue-300) !important; transform: scale(1.08) !important; }

/* ── 32f. Contact: focus, pip hover, "what happens next" ── */
.contact .form-card input:focus,
.contact .form-card textarea:focus {
  border-color: var(--blue-500) !important;
  box-shadow: 0 0 0 3px rgba(63,123,209,.16) !important;
  background: #fff !important;
}
.contact .pip { transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease) !important; }
.contact .pip:hover { transform: translateY(-3px) !important; }
.contact .pip .ic { transition: transform .3s var(--ease) !important; }
.contact .pip:hover .ic { transform: scale(1.08) rotate(-4deg); }
.next-steps {
  list-style: none !important; margin: 30px 0 0 !important; padding: 26px 0 0 !important;
  border-top: 1px solid var(--line) !important; display: grid !important; gap: 18px !important;
}
.next-steps li { display: flex !important; gap: 15px !important; align-items: flex-start !important; }
.next-steps .ns-n {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 999px;
  background: var(--blue-50); color: var(--blue-700);
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 14px/1 'DM Sans', system-ui, sans-serif;
}
.next-steps .ns-t b { display: block; color: var(--ink); font: 600 15px/1.3 'DM Sans', system-ui, sans-serif; margin-bottom: 2px; }
.next-steps .ns-t span { color: var(--slate); font-size: 13.5px; line-height: 1.5; }

/* ── 32g. News: input focus + button hover ── */
.news input:focus {
  outline: none !important;
  border-color: rgba(138,180,232,.5) !important;
  box-shadow: 0 0 0 3px rgba(63,123,209,.18) !important;
}
.news .btn-primary { transition: transform .25s var(--ease), box-shadow .25s var(--ease) !important; }
.news .btn-primary:hover { transform: translateY(-2px) !important; }

/* ── 32h. Footer: animated link underlines ── */
.site-footer .col a {
  background-image: linear-gradient(currentColor, currentColor) !important;
  background-size: 0% 1px !important;
  background-position: 0 100% !important;
  background-repeat: no-repeat !important;
  transition: background-size .3s var(--ease), color .25s var(--ease) !important;
  padding-bottom: 1px;
}
.site-footer .col a:hover { background-size: 100% 1px !important; }

/* ── 32i. Reduced motion: keep it calm ── */
@media (prefers-reduced-motion: reduce) {
  #system .steps .step, #system .steps .step .idx, #system .steps .step::before,
  .value3 .v, .value3 .v::after, .value3 .v .v-ic, .value3 .v .n,
  .entry-list li, .entry-list li::before,
  .fbq .fbq-stats .stat, #industries .stats .stat, #industries .stats .stat .stat-ic,
  .contact .pip, .contact .pip .ic, .news .btn-primary, .site-footer .col a {
    transition: none !important;
  }
  .value3 .v::after { transform: scaleX(1) !important; }
  #system .steps .step::before { transform: scaleY(1) !important; }
}

/* ============================================================
   33. MOBILE NAV + RESPONSIVE QA + signature polish
   Hamburger nav + overlay, kill horizontal overflow, mobile
   type sizing, exclusive-card signature glow, tech hover.
   Wins over 1–32.
   ============================================================ */

/* kill stray horizontal scroll on small screens */
html { overflow-x: hidden; }

/* ── 33a. Mobile navigation: hamburger + full-screen overlay ── */
.nav-toggle { display: none; }
@media (max-width: 860px) {
  .site-header .main-nav { display: none !important; }
  .site-header > .wrap > a.btn,
  .site-header > .wrap > a.btn-primary { display: none !important; }
  .nav-toggle {
    display: inline-flex !important; flex-direction: column;
    align-items: center; justify-content: center; gap: 5px;
    width: 46px; height: 46px; border-radius: 12px; padding: 0;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
    cursor: pointer; position: relative; z-index: 80;
  }
  .nav-toggle span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s var(--ease); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
.mobile-menu {
  position: fixed; inset: 0; z-index: 55;
  background: linear-gradient(180deg, #0c2546, #081a30);
  display: flex; flex-direction: column; justify-content: center;
  padding: 100px 30px 48px; gap: 0;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
}
.mobile-menu.open { opacity: 1; visibility: visible; transform: none; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mobile-menu a {
  color: rgba(255,255,255,.92); text-decoration: none;
  font: 600 23px/1 'DM Sans', system-ui, sans-serif;
  display: flex; align-items: center; gap: 14px;
  padding: 17px 6px; border-bottom: 1px solid rgba(255,255,255,.09);
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.mobile-menu a:hover { color: #fff; padding-left: 12px; }
.mobile-menu a .nav-ic { width: 22px; height: 22px; color: var(--blue-300); flex: none; }
.mobile-menu .btn, .mobile-menu .btn-primary {
  margin-top: 28px !important; justify-content: center !important; border-bottom: 0 !important;
  font-size: 16px !important; padding: 16px 24px !important;
  background: linear-gradient(180deg, #4a86d6, #1f4f94) !important; color: #fff !important;
}
@media (min-width: 861px) { .mobile-menu { display: none !important; } }
body.menu-open { overflow: hidden; }
body.menu-open .site-header { background: rgba(8,21,38,.96) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; }

/* ── 33b. Small-screen type sizing ── */
@media (max-width: 520px) {
  .hero .h1 { font-size: 38px !important; }
  .fbq h2, .fbq .h2 { font-size: 27px !important; }
  .section { padding-block: clamp(56px, 12vw, 84px) !important; }
}

/* ── 33c. Exclusive nickel-selenide card: signature glow + lift ── */
#tech .excl { position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease) !important; }
#tech .excl:hover { transform: translateY(-4px) !important; box-shadow: 0 30px 70px -36px rgba(0,0,0,.6) !important; }
#tech .excl .mk { position: relative; overflow: visible !important; transition: transform .3s var(--ease) !important; }
#tech .excl:hover .mk { transform: scale(1.05) !important; }
#tech .excl .mk::after {
  content: "" !important; position: absolute !important; inset: -12px !important;
  border-radius: 50% !important; z-index: -1 !important;
  background: radial-gradient(circle, rgba(63,123,209,.55), transparent 70%) !important;
  animation: sn-excl-pulse 4.2s var(--ease) infinite !important;
}
@keyframes sn-excl-pulse { 0%,100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.16); opacity: 1; } }

/* ── 33d. Tech cards: consistent hover lift ── */
#tech .tech-grid .tech { transition: transform .28s var(--ease), box-shadow .28s var(--ease) !important; }
#tech .tech-grid .tech:hover { transform: translateY(-5px) !important; box-shadow: 0 24px 50px -26px rgba(8,26,48,.30) !important; }

/* ── 33e. Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  #tech .excl .mk::after { animation: none !important; }
  #tech .excl, #tech .excl .mk, #tech .tech-grid .tech, .mobile-menu, .mobile-menu a, .nav-toggle span { transition: none !important; }
}

/* 33-fix: nav outputs bare <li> items — strip markers in mobile menu */
.mobile-menu ul, .mobile-menu li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.mobile-menu li { display: block !important; }

/* ============================================================
   34. Tweaks — value3 top divider, footer logo size, footer line
   ============================================================ */
.value3 { border-top: 0 !important; }
.site-footer .brand img,
.site-footer img { height: 50px !important; max-height: 50px !important; width: auto !important; }
.site-footer .bot { border-top: 0 !important; margin-top: 0 !important; padding-top: 26px !important; }

/* ============================================================
   35. FINAL POLISH — trust/logos strip + contact rhythm
   ============================================================ */
/* ── 35a. Trust strip: clean wordmark row (drop tiles + stray "+") ── */
.logos .row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 22px clamp(28px, 4vw, 56px) !important;
}
.logos .lg {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; border-radius: 0 !important; min-height: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  font: 600 19px/1 "DM Sans", system-ui, sans-serif !important;
  letter-spacing: -.01em !important;
  color: var(--slate) !important; opacity: .5 !important;
  transition: opacity .3s var(--ease), color .3s var(--ease) !important;
}
.logos .lg::after, .logos .lg::before { content: none !important; display: none !important; }
.logos .lg:hover { opacity: 1 !important; color: var(--blue-700) !important; }
@media (max-width: 560px) { .logos .row { justify-content: center !important; } }

/* ── 35b. Contact: match the global section rhythm (was 150px) ── */
.contact { padding-block: clamp(84px, 9vw, 130px) !important; }

/* ============================================================
   36. Tech-card imagery — client-supplied energy visuals
   Replaces temp Unsplash naturals; 1 image per technology.
   ============================================================ */
#tech .tech .mk { background-color: #0a1a33 !important; }
#tech .tech-grid .tech:nth-child(1) .mk { background-image: url(../img/photos/sn-tech-solar.jpg) !important; }
#tech .tech-grid .tech:nth-child(2) .mk { background-image: url(../img/photos/sn-tech-wind.jpg) !important; }
#tech .tech-grid .tech:nth-child(3) .mk { background-image: url(../img/photos/sn-tech-battery.jpg) !important; }
#tech .tech-grid .tech:nth-child(4) .mk { background-image: url(../img/photos/sn-tech-heatpumps.jpg) !important; }
#tech .tech-grid .tech:nth-child(5) .mk { background-image: url(../img/photos/sn-tech-heatrecovery.jpg) !important; }
#tech .tech-grid .tech:nth-child(6) .mk { background-image: url(../img/photos/sn-tech-hydrogen.jpg) !important; }
#tech .tech-grid .tech:nth-child(7) .mk { background-image: url(../img/photos/sn-tech-ad.jpg) !important; }
#tech .tech-grid .tech:nth-child(8) .mk { background-image: url(../img/photos/sn-tech-water.jpg) !important; }
/* 36b: cache-bust solar + wind (old filenames were CDN-cached) */
#tech .tech-grid .tech:nth-child(1) .mk { background-image: url(../img/photos/sn-tech-solar-v2.jpg) !important; }
#tech .tech-grid .tech:nth-child(2) .mk { background-image: url(../img/photos/sn-tech-wind-v2.jpg) !important; }