:root {
  /* Deep canvas + distinct layout bands (WCAG AA on #001454) */
  --bg-canvas: #001454;
  --bg-page: #001454;
  --bg-muted: #000f38;
  --bg-light: #002a78;
  --bg-soft: #001454;
  --bg-card: #001c62;
  --bg-elevated: #002470;
  --bg-panel: #001a5a;
  --bg-white: #001e68;
  --bg-footer: #000a28;
  --bg-image-frame: #111318;

  --bg-navy: #001454;
  --bg-navy-mid: #000f38;
  --surface: #001c62;
  --elevated: #002470;
  --border: #3d5eb8;
  --border-strong: #6b8fd8;
  --border-dark: #8aa8e8;

  /* Text — WCAG AA on #001454 / footer #000a28 */
  --text-primary: #ffffff;
  --text-secondary: #e8efff;
  --text-muted: #c8d6f5;
  --text-subtle: #a8bde8;

  --text-dark: var(--text-primary);
  --text-muted-dark: var(--text-secondary);
  --text-subtle-dark: var(--text-muted);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --subtle: var(--text-muted);

  --lake-champlain: #2a5273;
  --dawn-lake: #96f6fe;
  --torregrotta: #b2ffff;
  --deep-sky-blue: #00bfff;
  /* Header — dark navy bar (light text) */
  --header-bg: rgba(0, 20, 84, 0.97);
  --footer-bg: rgba(0, 10, 48, 0.99);
  --header-text: #e8efff;
  --header-text-muted: #c8d6f5;
  --header-text-hover: #ffffff;
  --header-border: #6b8fd8;
  --header-active-bg: rgba(255, 255, 255, 0.1);
  --header-active-text: #ffffff;
  --accent-blue: #ffffff;
  --accent-blue-light: #f0f7ff;
  --accent-steel: #d4e8ff;
  --accent-blue-pale: rgba(255, 255, 255, 0.1);
  --logo-red: #dc2626;
  --brand-red: #dc2626;

  /* Type scale */
  --text-nav: 1rem;
  --text-footer: 0.875rem;
  --text-footer-heading: 0.9375rem;
  --text-footer-muted: #a8bde8;
  --tracking-body: 0.012em;
  --tracking-footer: 0.02em;
  --tracking-footer-heading: 0.06em;

  /* Hero header typography */
  --hero-eyebrow-color: #b8d0f2;
  --hero-title-color: #f6f9ff;
  --hero-lead-color: #dce8ff;
  --hero-title-size: clamp(1.875rem, 4.5vw, 3rem);
  --hero-title-weight: 700;
  --hero-title-leading: 1.1;
  --hero-title-tracking: -0.028em;

  /* Layout — canonical tokens in design-system.css (aliases set there) */
  --space-page-x: clamp(1rem, 4vw, 2rem);
  --space-section-y: clamp(2.25rem, 3.25vw + 1rem, 4.75rem);
  --space-grid: 1.5rem;
  --space-grid-lg: 2rem;
  --media-hero-h: clamp(280px, 48vh, 480px);
  --media-page-hero-h: clamp(240px, 36vh, 400px);
  --media-content-max-h: min(400px, 42vw);
  --media-card-max-h: min(280px, 38vw);
  --media-wide-max-h: min(460px, 48vw);
  --media-gallery-max-h: min(320px, 36vw);
  --media-solution-max-h: min(360px, 44vw);
  --media-glass-max-h: min(280px, 32vw);
  --ratio-content: 3 / 2;
  --ratio-card: 4 / 3;
  --ratio-tall: 4 / 5;
  --ratio-wide: 21 / 9;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg-page);
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.625;
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography: main content uses .portal-body + design-system.css */
.portal-body h1,
.portal-body h2,
.portal-body h3,
.portal-body h4,
.portal-body h5,
.portal-body h6,
.portal-body p,
.portal-body li {
  max-width: unset;
}

/* Legacy dark-layout pages (non–portal-body) */
body:not(.portal-body) h1 {
  color: var(--text-primary);
  font-size: clamp(1.875rem, 4.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.028em;
}

body:not(.portal-body) h2 {
  color: var(--text-primary);
  font-size: clamp(1.5rem, 3.5vw, 2.125rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.02em;
}

body:not(.portal-body) p,
body:not(.portal-body) li {
  color: var(--text-muted);
  max-width: 65ch;
  line-height: 1.625;
  letter-spacing: var(--tracking-body);
}

small, .text-xs {
  color: var(--text-muted);
  line-height: 1.5;
  letter-spacing: 0.015em;
}

body:not(.portal-body) main .text-slate-300 {
  color: var(--text-muted) !important;
  letter-spacing: var(--tracking-body);
}

.portal-body main .text-slate-300,
.portal-body main .text-slate-400 {
  color: var(--text-on-light-muted, #2f4558) !important;
  letter-spacing: var(--tracking-body);
}

.section-width { max-width: none; width: 100%; margin-left: 0; margin-right: 0; }
.prose-width { max-width: 42rem; }

/* ── Layout architecture (Grid / Flex, overflow-safe) ── */

/* Horizontal inset: design-system.css (--container-gutter on nav, footer, .portal-container) */

main > section[class*="py-16"],
main > section[class*="py-20"] {
  padding-top: var(--space-section-y) !important;
  padding-bottom: var(--space-section-y) !important;
}

main .gap-4 { gap: calc(var(--space-grid) * 0.9) !important; }
main .gap-6 { gap: var(--space-grid) !important; }
main .gap-8,
main .gap-10,
main .gap-12 { gap: var(--space-grid-lg) !important; }

main .grid,
main [class*="grid-cols"] {
  width: 100%;
}

main .grid > *,
.content-split > *,
.product-grid > *,
.solutions-grid > *,
.gallery-grid > * {
  min-width: 0;
}

.content-split {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-grid-lg) !important;
  align-items: center;
  width: 100%;
}
@media (min-width: 1024px) {
  .content-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.product-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-grid) !important;
}
@media (min-width: 640px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--space-grid-lg) !important;
  }
}

.solutions-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-grid-lg) !important;
}
@media (min-width: 768px) {
  .solutions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1400px) {
  .solutions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

.gallery-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-grid) !important;
}
@media (min-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-grid-lg) !important;
  }
}

/* Unified media blocks — fill grid cells without overlap */
.media-block,
.content-split > .media-frame,
.content-split > .agv-spec-image,
.content-split > div.rounded-xl.overflow-hidden.border-border[class*="aspect"],
.content-split > div.rounded-xl.overflow-hidden.border-border:not(.glass-panel),
.industry-panel > div[class*="rounded"],
.product-card > div[class*="aspect-"],
main a.card-hover[class*="aspect-"],
.gallery-item {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}

main img {
  max-width: 100%;
}

.home-enterprise .hero-lockup--fullbleed .hero-lockup__parallax img {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}

.media-block img,
.content-split > .media-frame picture,
.content-split > .media-frame img,
.content-split > .agv-spec-image picture,
.content-split > .agv-spec-image img,
.content-split > div.rounded-xl.overflow-hidden.border-border picture,
.content-split > div.rounded-xl.overflow-hidden.border-border img,
.industry-panel picture,
.industry-panel img,
.product-card picture,
.product-card img,
.gallery-item picture,
.gallery-item img,
main a.card-hover picture,
main a.card-hover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.industry-panel img.absolute,
main a.card-hover img.absolute {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.portal-body main section h2.mb-6,
.portal-body main section h2.mb-8 {
  margin-bottom: var(--section-head-gap) !important;
}

body:not(.portal-body) main section h2.mb-6,
body:not(.portal-body) main section h2.mb-8 {
  margin-bottom: clamp(2rem, 4vw, 3.25rem) !important;
}

/* ── Section themes — dark surfaces, light text ── */
.section-light,
.section-white,
.section-muted {
  color: var(--text-secondary);
}
.section-light h1, .section-light h2, .section-light h3, .section-light h4,
.section-white h1, .section-white h2, .section-white h3, .section-white h4,
.section-muted h1, .section-muted h2, .section-muted h3, .section-muted h4 {
  color: var(--text-primary);
}
.section-light .text-white,
.section-white .text-white,
.section-muted .text-white {
  color: var(--text-primary) !important;
}
.section-light .text-slate-300,
.section-white .text-slate-300,
.section-muted .text-slate-300 {
  color: var(--text-secondary) !important;
}
.section-light .text-subtle,
.section-white .text-subtle,
.section-muted .text-subtle {
  color: var(--text-muted) !important;
}
.section-light .section-label,
.section-white .section-label,
.section-muted .section-label {
  color: var(--accent-steel);
}

.section-light  {
  background: var(--bg-page);
}
.section-muted  {
  background: var(--bg-muted);
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}
.section-white  {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-dark {
  background: var(--bg-light);
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-secondary);
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 {
  color: var(--text-primary);
}
.section-dark .text-white { color: var(--text-primary) !important; }
.section-dark .text-slate-300 { color: var(--text-secondary) !important; }
.section-dark .text-subtle { color: var(--text-muted) !important; }

.section-surface {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  color: var(--text-secondary);
}
.section-surface h1, .section-surface h2, .section-surface h3, .section-surface h4 {
  color: var(--text-primary);
}
.section-surface .text-white { color: var(--text-primary) !important; }
.section-surface .text-slate-300 { color: var(--text-secondary) !important; }
.section-surface .text-subtle { color: var(--text-muted) !important; }

.section-label {
  color: var(--accent-steel);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── Header — dark navy bar ── */
.nav-bar {
  background-color: var(--header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--header-border);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.nav-bar .nav-link {
  color: var(--header-text);
  font-size: var(--text-nav);
  font-weight: 700;
}

.nav-bar .nav-link:hover,
.nav-bar .nav-link:focus-visible {
  color: var(--header-text-hover);
}

.nav-bar .nav-link[aria-current="page"] {
  color: var(--header-active-text);
  background: var(--header-active-bg);
  border-radius: 0.375rem;
  padding-inline: 0.5rem;
  margin-inline: -0.5rem;
}

.nav-bar #lang-en,
.nav-bar #lang-zh {
  font-size: 0.8125rem;
  font-weight: 700;
}

.nav-bar .text-subtle {
  color: var(--header-text-muted) !important;
}

.nav-bar .text-subtle:hover {
  color: var(--header-text-hover) !important;
}

.nav-bar #mobile-menu-btn {
  color: var(--header-text) !important;
  font-weight: 700;
}

.nav-bar .btn-primary,
.nav-bar a.btn-primary {
  font-weight: 700;
}

.nav-bar #mobile-menu {
  font-size: 0.9375rem;
  background: var(--header-bg);
  border-top-color: var(--header-border) !important;
}

.nav-bar #mobile-menu .text-white {
  color: var(--header-text) !important;
  font-weight: 700;
}

.nav-bar #mobile-menu .text-subtle {
  color: var(--header-text-muted) !important;
  font-weight: 700;
}

.nav-bar #mobile-menu .mobile-submenu a {
  font-weight: 700;
}

.nav-bar .border-border {
  border-color: var(--header-border) !important;
}

.nav-bar #lang-zh {
  color: var(--header-text-muted) !important;
}

.nav-bar #lang-zh:hover {
  color: var(--header-text-hover) !important;
}

.nav-bar #lang-en.bg-brand-blue\/10 {
  background: var(--header-active-bg) !important;
  color: var(--header-active-text) !important;
}

.nav-bar a[aria-label="GNA Home"] img {
  height: 3.25rem;
  width: auto;
}

.lang-hidden { display: none !important; }

/* Mega menu */
.nav-item { position: relative; }
.nav-item > .nav-link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0;
  font-size: var(--text-nav);
  font-weight: 700;
  transition: color 0.2s;
}

.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 14rem;
  padding: 0.75rem 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 60;
}

.nav-item:hover .mega-menu,
.nav-item:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega-menu a {
  display: block;
  padding: 0.5rem 1.25rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 700;
  transition: color 0.15s, background 0.15s;
}
.mega-menu a:hover {
  color: var(--accent-blue-light);
  background: var(--accent-blue-pale);
}

/* Hero — unified block: full-width cover image + tight copy */
.hero-split {
  margin-top: 4.25rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg-page);
}

.hero-split__media {
  order: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  min-height: clamp(220px, 38vw, 420px);
  max-height: min(480px, 52vh);
  background: var(--bg-image-frame);
  border-bottom: 1px solid var(--border-strong);
}

.hero-split__media picture {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.hero-split__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
  mix-blend-mode: normal;
  filter: none;
}

.hero-split__content {
  order: 1;
  width: 100%;
}

.hero-split__panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  padding: 1.25rem var(--space-page-x) 1.5rem;
  max-width: none;
  width: 100%;
  margin-inline: 0;
  background: linear-gradient(155deg, #001048 0%, #001a75 48%, #002f92 100%);
  border-bottom: 3px solid var(--accent-steel);
}

@media (min-width: 768px) {
  .hero-split__panel {
    padding: 1.5rem var(--space-page-x) 1.75rem;
  }
}

@media (min-width: 1200px) {
  .hero-split__media {
    aspect-ratio: 21 / 8;
    max-height: 520px;
  }
}

/* Hero copy zone — cohesive header block below image */
.hero-split__panel,
.page-hero > .relative,
.page-hero > div.relative {
  text-align: left;
}

.hero-eyebrow,
.page-hero .section-label {
  display: block;
  color: var(--hero-eyebrow-color) !important;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.625rem;
  line-height: 1.4;
}

.hero-split__title,
.page-hero h1 {
  color: var(--hero-title-color) !important;
  font-size: var(--hero-title-size) !important;
  font-weight: var(--hero-title-weight) !important;
  line-height: var(--hero-title-leading) !important;
  letter-spacing: var(--hero-title-tracking) !important;
  margin: 0 0 0.5rem !important;
  text-wrap: balance;
  max-width: 22em;
}

.hero-split--compact .hero-split__title {
  font-size: clamp(1.625rem, 3.75vw, 2.25rem);
  letter-spacing: -0.024em;
  margin-bottom: 0;
  max-width: 18em;
}

.hero-split__lead {
  color: var(--hero-lead-color);
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.01em;
  max-width: 42rem;
  margin: 0 0 1rem;
}

.hero-split__cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 0.25rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  background: #ffffff;
  color: #001454;
  font-size: 0.875rem;
  font-weight: 700;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.hero-split__cta:hover {
  background: var(--accent-blue-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.25);
}

/* Legacy hero-banner (fallback) */
.hero-banner {
  position: relative;
  width: 100%;
  background: var(--bg-page);
  margin-top: 4.25rem;
}
.hero-banner__media {
  width: 100%;
  line-height: 0;
}
.hero-banner__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
.hero-banner__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  z-index: 2;
  pointer-events: none;
}
.hero-banner__content > * {
  pointer-events: auto;
}
.hero-banner__overlay {
  display: none;
}
.hero-banner__content .hero-title {
  color: var(--text-primary) !important;
}
.hero-banner__content .hero-sub {
  color: var(--text-secondary) !important;
}
.hero-banner__content .section-label {
  color: var(--accent-steel);
}

.hero-banner.hero-banner--compact .hero-banner__content {
  align-items: flex-end;
  padding-bottom: 2.5rem;
}
.hero-banner.hero-banner--compact .hero-banner__content h1 {
  color: var(--text-dark) !important;
}

@media (max-width: 768px) {
  .hero-banner__overlay {
    background: linear-gradient(
      180deg,
      transparent 0%,
      transparent 45%,
      rgba(255, 255, 255, 0.75) 75%,
      rgba(255, 255, 255, 0.92) 100%
    );
  }
  .hero-banner__content {
    align-items: flex-end;
    padding-bottom: 1.5rem;
  }
  .hero-banner__content .max-w-xl {
    padding-top: 0 !important;
    padding-bottom: 1rem !important;
  }
}

/* Legacy hero-full (other pages) */
.hero-full {
  min-height: 88vh;
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-page);
  overflow: hidden;
}
.hero-full.hero-light {
  background: var(--bg-soft);
}
.hero-full.hero-light .hero-bg {
  object-fit: contain;
  object-position: center center;
  width: 100%;
  height: 100%;
}
.hero-full.hero-light .hero-overlay-light {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(255, 255, 255, 0.45) 35%,
    transparent 60%
  );
  pointer-events: none;
}
.hero-full.hero-light .image-overlay {
  display: none;
}
.hero-full.hero-light::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5rem;
  background: linear-gradient(to bottom, transparent, var(--bg-light));
  z-index: 2;
  pointer-events: none;
}
.hero-full.hero-light h1,
.hero-full.hero-light .hero-title {
  color: var(--text-dark) !important;
}
.hero-full.hero-light p,
.hero-full.hero-light .hero-sub {
  color: var(--text-muted-dark) !important;
}
.hero-full.hero-light .section-label {
  color: var(--accent-blue);
}

/* Dark photo heroes (inner pages) */
.hero-full:not(.hero-light) {
  align-items: flex-end;
  background: var(--bg-navy);
}
.hero-full:not(.hero-light)::after,
.hero-full.hero-light::after {
  display: none;
}

.page-hero.hero-light-page {
  min-height: 55vh;
  align-items: center;
  background: var(--bg-page);
  overflow: hidden;
}
.page-hero.hero-light-page .hero-bg {
  object-fit: cover;
  object-position: center center;
  width: 100%;
  height: 100%;
}
.page-hero.hero-light-page .hero-overlay-light {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0.93) 0%,
    rgba(255, 255, 255, 0.65) 35%,
    transparent 65%
  );
  pointer-events: none;
}
.page-hero.hero-light-page .image-overlay {
  display: none;
}
.page-hero.hero-light-page h1 {
  color: var(--text-dark) !important;
}
.page-hero.hero-light-page .section-label {
  color: var(--accent-blue);
}

.hero-bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 1;
  mix-blend-mode: normal;
  filter: none;
}

/* ── Images: neutral frames, no blue cast ── */
.media-frame,
.hero-split__media,
.gallery-item,
.content-block-image,
.product-card > div[class*="aspect-"],
[class*="aspect-"][class*="rounded-xl"].overflow-hidden,
[class*="aspect-"][class*="border-border"].overflow-hidden,
.page-hero > picture,
.industry-panel > div[class*="rounded"],
.industry-panel > div.relative {
  background: var(--bg-image-frame) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 8px 28px rgba(0, 0, 0, 0.45);
}

.media-frame img,
.gallery-item img,
.content-block-image img,
.product-card img,
[class*="aspect-"] img,
.page-hero img.hero-bg {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

.image-overlay {
  background: none !important;
  pointer-events: none;
}

.industry-panel .image-overlay,
.card-hover .image-overlay,
a.card-hover .image-overlay {
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.55) 78%,
    rgba(0, 0, 0, 0.88) 100%
  ) !important;
}

.page-hero {
  min-height: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding-top: 4.25rem;
  background: var(--bg-page);
}

.page-hero > picture {
  position: relative !important;
  display: block;
  flex-shrink: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  aspect-ratio: 21 / 9;
  min-height: clamp(200px, 36vw, 380px);
  max-height: min(440px, 50vh);
  overflow: hidden;
  border-radius: 0;
  background: var(--bg-image-frame);
  line-height: 0;
}

.page-hero .hero-bg {
  position: absolute !important;
  inset: 0 !important;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  margin: 0;
}

.page-hero .image-overlay {
  display: none !important;
}

.page-hero > .relative,
.page-hero > div.relative {
  position: relative !important;
  inset: auto !important;
  width: 100%;
  max-width: none;
  width: 100%;
  margin-inline: 0;
  background: var(--bg-muted);
  border-top: none;
  margin-top: 0;
  padding: 1.125rem var(--space-page-x) 1.5rem;
}

.page-hero::after {
  display: none;
}
.page-hero p {
  color: var(--hero-lead-color) !important;
}

/* Legacy dark hero text (hero-full only) */
.hero-full h1, .hero-full h2, .hero-full h3 {
  color: #ffffff;
}
.hero-full p { color: #e2e8f0; }
.hero-full .section-label { color: var(--accent-steel); }

.card-hover {
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.card-hover:hover {
  border-color: rgba(191, 219, 254, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 27, 120, 0.45);
}

.glass-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  box-shadow: 0 4px 24px rgba(0, 14, 61, 0.45);
  color: var(--text-secondary);
}
.glass-panel h3,
.glass-panel h2 {
  color: var(--text-primary);
}

.section-dark .glass-panel {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-secondary);
}
.section-dark .glass-panel h3 { color: var(--text-primary); }

.btn-primary {
  background: #ffffff !important;
  color: #001454 !important;
}
.btn-primary:hover {
  background: var(--accent-blue-light) !important;
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.2);
}
.btn-red:hover { box-shadow: 0 0 20px rgba(220, 38, 38, 0.35); }

/* Industry tabs */
.industry-tab {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  cursor: pointer;
  white-space: nowrap;
}
.industry-tab.active,
.industry-tab:hover {
  color: var(--text-primary);
  border-bottom-color: var(--accent-steel);
}
.industry-panel { display: none; }
.industry-panel.active { display: block; }

/* Stats */
.stat-divider { border-left: 1px solid var(--border); }
.stat-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 0.75rem;
  box-shadow: 0 4px 20px rgba(0, 14, 61, 0.35);
}
@media (max-width: 639px) {
  .stat-divider {
    border-left: none;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
    margin-top: 1rem;
  }
}

/* Mobile nav accordion */
.mobile-submenu { display: none; }
.mobile-submenu.open { display: block; }

/* Page hero (inner pages) — defined above with light theme */

/* Stats bar — distinct elevated band */
.stats-bar {
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}
.stats-bar p.text-2xl {
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.stats-bar .text-subtle {
  color: var(--text-muted) !important;
  font-weight: 500;
}

.learn-more {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent-steel);
}
.learn-more:hover { color: var(--text-primary); }

.section-white .stat-divider,
.section-light .stat-divider,
.section-muted .stat-divider {
  border-color: var(--border);
}
.section-white .text-brand-blue,
.section-light .text-brand-blue,
.section-muted .text-brand-blue {
  color: var(--accent-steel) !important;
}
.section-white .text-brand-red,
.section-light .text-brand-red,
.section-muted .text-brand-red {
  color: var(--logo-red) !important;
}
.section-white .text-brand-steel,
.section-light .text-brand-steel,
.section-muted .text-brand-steel {
  color: var(--accent-steel) !important;
}

.product-card {
  background: var(--bg-elevated);
  border-color: var(--border) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.product-card .text-white { color: var(--text-primary) !important; }
.product-card .text-slate-300 { color: var(--text-secondary) !important; }
.product-card img { transition: transform 0.5s ease; }
.product-card:hover img { transform: scale(1.04); }
.product-card h2,
.product-card h3 {
  color: var(--text-primary) !important;
}
.product-card p {
  color: var(--text-secondary) !important;
}

/* Image cards keep dark overlay text white */
.image-overlay .text-white,
.image-overlay h3,
.card-hover .image-overlay h3,
.card-hover .image-overlay .text-white,
.card-hover .image-overlay .text-slate-300,
.card-hover .image-overlay .learn-more {
  color: #ffffff !important;
}
.card-hover .image-overlay .learn-more { color: var(--accent-steel) !important; }
.card-hover .image-overlay .learn-more:hover { color: var(--text-primary) !important; }

table.spec-table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}
table.spec-table th,
table.spec-table td {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  text-align: left;
}
table.spec-table th {
  background: var(--bg-light);
  color: var(--text-primary);
  font-weight: 600;
}
table.spec-table td { color: var(--text-secondary); }

/* Media — aspect ratio + max-height caps (no overpowering min-heights) */
.product-card > div[class*="aspect-"] {
  aspect-ratio: var(--ratio-card) !important;
  width: 100%;
  max-width: 100%;
  max-height: var(--media-card-max-h) !important;
  min-height: 0 !important;
  margin-inline: auto;
}

.industry-panel > div[class*="rounded"] {
  aspect-ratio: 16 / 9 !important;
  width: 100%;
  max-width: 100%;
  max-height: var(--media-wide-max-h) !important;
  min-height: 0 !important;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .industry-panel > div[class*="rounded"] {
    aspect-ratio: var(--ratio-wide) !important;
    max-height: min(420px, 40vw) !important;
  }
}

main a.card-hover.block[class*="aspect-"],
main a.card-hover[class*="rounded-xl"][class*="aspect-"] {
  aspect-ratio: var(--ratio-tall) !important;
  width: 100%;
  max-width: 100%;
  max-height: var(--media-solution-max-h) !important;
  min-height: 0 !important;
  margin-inline: auto;
}

.content-split > .media-frame,
.content-split > .agv-spec-image,
.content-split > div.rounded-xl.overflow-hidden.border-border[class*="aspect"],
.content-split > div.rounded-xl.overflow-hidden.border-border:not(.glass-panel) {
  aspect-ratio: var(--ratio-content) !important;
  width: 100%;
  max-width: 100%;
  max-height: var(--media-content-max-h) !important;
  min-height: 0 !important;
  margin-inline: auto;
}

.glass-panel .agv-card-media,
.glass-panel .media-frame,
.glass-panel .rounded-lg.overflow-hidden,
.glass-panel > div.rounded-lg.media-frame {
  aspect-ratio: var(--ratio-card) !important;
  width: 100%;
  max-width: 100%;
  max-height: var(--media-glass-max-h) !important;
  min-height: 0 !important;
  margin-inline: auto;
}

.product-card > div.p-5,
.product-card > div[class*="p-"] {
  padding: 1.375rem 1.5rem !important;
}

/* Catch-all: Tailwind aspect boxes in content areas */
main [class*="aspect-"][class*="rounded"],
main [class*="aspect-"][class*="border-border"] {
  max-width: 100%;
  min-height: 0;
}

main .rounded-xl.overflow-hidden:not(.card-hover):not(a):not(.glass-panel) {
  max-height: var(--media-content-max-h);
}

/* AGV page layout */
.content-split.agv-spec-row {
  align-items: start !important;
}

.content-split.agv-spec-row > .overflow-x-auto {
  width: 100%;
  min-width: 0;
}

.agv-copy-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-grid-lg) !important;
  align-items: start;
  width: 100%;
}
@media (min-width: 1024px) {
  .agv-copy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.agv-copy-grid > * {
  min-width: 0;
}

.agv-copy-grid ul {
  max-width: none;
  padding-left: 0;
  list-style: none;
}

.agv-copy-grid ul li {
  max-width: none;
  position: relative;
  padding-left: 1rem;
}

.agv-copy-grid ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent-steel);
}

.agv-brand-logo {
  width: min(12rem, 100%);
  max-width: 12rem;
  aspect-ratio: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  margin-top: 1.5rem;
}

.agv-brand-logo img {
  width: 100%;
  height: auto !important;
  object-fit: contain;
  display: block;
}

.glass-panel {
  max-height: none !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  height: auto !important;
}

.agv-forklift-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-grid-lg);
  align-items: stretch;
  width: 100%;
}
@media (min-width: 1024px) {
  .agv-forklift-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.agv-forklift-grid > * {
  min-width: 0;
}

.glass-panel .agv-card-media picture,
.glass-panel .agv-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-item {
  aspect-ratio: var(--ratio-card);
  width: 100%;
  max-width: 100%;
  max-height: var(--media-gallery-max-h);
  min-height: 0;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 0.625rem;
  display: flex;
  flex-direction: column;
}
.gallery-caption {
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-panel);
  border-top: 1px solid var(--border-strong);
}

/* Footer — header fonts; slightly darker background */
.site-footer {
  background: var(--footer-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--header-border);
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.35);
  color: var(--text-secondary);
  font-size: var(--text-footer);
  line-height: 1.6;
  letter-spacing: var(--tracking-footer);
  padding-top: 1.625rem !important;
  padding-bottom: 1.375rem !important;
}

.site-footer .footer-inner {
  padding-left: var(--space-page-x);
  padding-right: var(--space-page-x);
}

.site-footer .footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem 2rem;
  align-items: start;
}
@media (min-width: 768px) {
  .site-footer .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem 2.5rem;
  }
}

.site-footer .footer-grid > * {
  min-width: 0;
}

.site-footer img[alt="GNA"] {
  height: 2rem;
  width: auto;
  margin-bottom: 0.625rem !important;
  display: block;
}

.site-footer .footer-brand p {
  margin: 0;
  max-width: 22rem;
}

.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer .font-bold,
.site-footer .footer-heading {
  color: var(--text-primary);
  font-size: var(--text-footer-heading);
  font-weight: 600;
  letter-spacing: var(--tracking-footer-heading);
  text-transform: uppercase;
  margin: 0 0 0.5rem !important;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1.55;
}

.site-footer ul li + li {
  margin-top: 0.35rem;
}

.site-footer .text-subtle,
.site-footer p {
  color: var(--text-muted) !important;
  font-size: var(--text-footer) !important;
  letter-spacing: var(--tracking-footer);
  margin: 0;
  max-width: none;
}

.site-footer .text-subtle + .text-subtle {
  margin-top: 0.2rem;
}

.site-footer a {
  color: var(--text-muted);
  font-size: var(--text-footer);
  letter-spacing: var(--tracking-footer);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer a:hover {
  color: var(--text-primary) !important;
}

.site-footer .footer-copy {
  font-size: 0.8125rem;
  color: var(--text-muted) !important;
  letter-spacing: 0.03em;
  text-align: center;
  margin: 1.375rem 0 0 !important;
  padding: 0.875rem 0 0;
  border-top: 1px solid var(--header-border);
  line-height: 1.5;
  max-width: none;
}

.site-footer--minimal .footer-minimal {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.site-footer--minimal .footer-minimal__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
}

.site-footer--minimal .footer-minimal img {
  height: 2.25rem;
  width: auto;
  margin-bottom: 0;
  flex-shrink: 0;
  margin-right: 0;
}

.site-footer--minimal .footer-minimal__brand .footer-contact {
  margin: 0;
  text-align: left;
}

.site-footer--minimal .footer-tagline {
  color: var(--text-primary) !important;
  font-weight: 600;
  font-size: 0.875rem !important;
  letter-spacing: 0.04em;
}

.site-footer--minimal .footer-contact {
  font-size: 0.9375rem !important;
  color: var(--text-secondary) !important;
  font-weight: 600;
}

.site-footer--minimal .footer-contact a {
  color: var(--text-primary);
  font-weight: 800;
  text-decoration: none;
}

.site-footer--minimal .footer-contact a:hover {
  color: var(--accent-steel) !important;
  text-decoration: underline;
}

.site-footer--minimal .footer-copy {
  margin-top: 0.35rem !important;
  padding-top: 0.35rem;
  border-top: 1px solid var(--header-border);
  color: var(--text-muted) !important;
}

/* Legacy footer markup (pre-refactor) */
.site-footer > .grid,
.site-footer .grid:not(.footer-grid) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem 2rem !important;
}
@media (min-width: 768px) {
  .site-footer > .grid,
  .site-footer .grid:not(.footer-grid) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.site-footer p.text-center {
  font-size: 0.8125rem;
  color: rgba(158, 180, 220, 0.75) !important;
  letter-spacing: 0.03em;
  margin: 1.375rem 0 0 !important;
  padding: 0.875rem 0 0;
  border-top: 1px solid rgba(61, 94, 184, 0.35);
  line-height: 1.5;
}

/* Form inputs */
.form-input {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  color: var(--text-primary);
}
.form-input::placeholder {
  color: var(--text-muted);
}
.form-input:focus {
  outline: none;
  border-color: var(--accent-steel);
  box-shadow: 0 0 0 3px rgba(191, 219, 254, 0.25);
}

/* Credential badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-dark);
  color: var(--text-primary);
}

/* Content block alternating */
.content-block-image {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* Links — AA contrast on dark */
a.text-brand-blue,
.text-brand-blue {
  color: var(--accent-steel) !important;
}
a.text-brand-blue:hover {
  color: var(--text-primary) !important;
}

/* Strong emphasis in body copy */
strong.text-white,
strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* ── Mobile & small tablet (≤767px) ── */
@media (max-width: 767px) {
  :root {
    --space-page-x: clamp(1rem, 4vw, 1.25rem);
    --space-section-y: clamp(2rem, 4vw + 0.75rem, 3rem);
    --space-grid: 1rem;
    --space-grid-lg: 1.25rem;
    --media-hero-h: clamp(200px, 38vh, 300px);
    --media-page-hero-h: clamp(180px, 32vh, 260px);
    --media-content-max-h: min(280px, 58vw);
    --media-card-max-h: min(240px, 52vw);
    --media-wide-max-h: min(240px, 54vw);
    --media-gallery-max-h: min(220px, 50vw);
    --media-solution-max-h: min(300px, 68vw);
    --media-glass-max-h: min(220px, 48vw);
  }

  html,
  body {
    overflow-x: clip;
  }

  /* Heroes — mobile */
  .hero-split__media {
    aspect-ratio: 16 / 10;
    min-height: clamp(180px, 32vw, 260px);
    max-height: min(280px, 42vh);
  }

  .hero-split__panel {
    padding: 1.125rem var(--space-page-x) 1.375rem;
    width: 100%;
  }

  :root {
    --hero-title-size: clamp(1.5rem, 6.25vw, 2rem);
    --hero-title-leading: 1.12;
    --hero-title-tracking: -0.022em;
  }

  .hero-eyebrow,
  .page-hero .section-label {
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
  }

  .hero-split__title,
  .page-hero h1 {
    font-weight: 700 !important;
    max-width: none;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .hero-split--compact .hero-split__title {
    font-size: clamp(1.375rem, 5.5vw, 1.75rem);
    max-width: none;
  }

  .hero-split__lead {
    font-size: 0.875rem;
    line-height: 1.6;
    letter-spacing: 0.008em;
    margin-bottom: 0.875rem;
    max-width: none;
  }

  .hero-split__cta {
    min-height: 2.75rem;
    padding: 0.625rem 1.25rem;
  }

  .page-hero > picture {
    aspect-ratio: 16 / 10;
    min-height: clamp(160px, 30vw, 240px);
    max-height: min(260px, 40vh);
  }

  .page-hero > .relative,
  .page-hero > div.relative {
    padding: 1rem var(--space-page-x) 1.25rem !important;
  }

  main .page-hero .section-width[class*="px-"] {
    padding-left: var(--space-page-x) !important;
    padding-right: var(--space-page-x) !important;
  }


  main section h2.mb-6,
  main section h2.mb-8,
  main section h2.mb-10 {
    margin-bottom: 1.5rem !important;
  }

  .industry-panel > div[class*="rounded"] {
    aspect-ratio: 16 / 9 !important;
    max-height: var(--media-wide-max-h) !important;
    min-height: 0 !important;
  }

  main a.card-hover.block[class*="aspect-"],
  main a.card-hover[class*="rounded-xl"][class*="aspect-"] {
    aspect-ratio: 4 / 5 !important;
    max-height: var(--media-solution-max-h) !important;
    min-height: 0 !important;
  }

  .content-split > .media-frame,
  .content-split > .agv-spec-image,
  .content-split > div.rounded-xl.overflow-hidden.border-border[class*="aspect"] {
    max-height: var(--media-content-max-h) !important;
    min-height: 0 !important;
  }

  .glass-panel {
    max-height: none !important;
    aspect-ratio: auto !important;
  }

  .product-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--space-grid) !important;
  }

  .solutions-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .gallery-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .stats-bar {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .stats-bar .section-width {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  .industry-tab {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
  }

  .card-hover:hover {
    transform: none;
  }

  table.spec-table {
    font-size: 0.8125rem;
    min-width: 30rem;
  }

  table.spec-table th,
  table.spec-table td {
    padding: 0.5rem 0.625rem;
    white-space: nowrap;
  }

  table.spec-table th:first-child,
  table.spec-table td:first-child {
    white-space: normal;
    min-width: 7.5rem;
  }

  .content-split .overflow-x-auto,
  .agv-spec-row > .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
  }

  /* AGV page — mobile */
  .agv-spec-row {
    gap: 1.25rem !important;
    align-items: stretch !important;
  }

  .agv-spec-row > .agv-spec-image {
    max-height: min(220px, 52vw) !important;
  }

  .agv-spec-row > .overflow-x-auto {
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    background: var(--bg-muted);
    padding-bottom: 0.125rem;
  }

  .agv-forklift-grid {
    gap: 1.25rem !important;
  }

  .agv-forklift-grid .glass-panel {
    padding: 1.25rem !important;
  }

  .agv-forklift-grid .agv-card-media {
    max-height: min(200px, 48vw) !important;
  }

  .agv-copy-grid {
    gap: 2rem !important;
  }

  .agv-copy-grid h2 {
    font-size: clamp(1.375rem, 5.5vw, 1.75rem) !important;
  }

  .agv-copy-grid p,
  .agv-copy-grid li {
    max-width: none;
    font-size: 0.875rem;
    line-height: 1.65;
  }

  .agv-copy-grid ul li {
    padding-left: 1.125rem;
  }

  .agv-brand-logo {
    width: min(9rem, 65%);
    margin-top: 1.25rem;
  }

  .site-footer {
    padding-top: 1.375rem !important;
    padding-bottom: 1.25rem !important;
  }

  .site-footer .footer-grid {
    gap: 1.25rem;
  }

  .site-footer .footer-brand p {
    line-height: 1.65;
  }

  .site-footer .footer-copy {
    margin-top: 1.125rem !important;
    padding-top: 0.75rem;
    font-size: 0.75rem;
  }

  .nav-bar a[aria-label="GNA Home"] img {
    height: 2.875rem;
  }

  .site-footer img[alt="GNA"] {
    height: 1.875rem;
  }

  #mobile-menu-btn {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}