/* Shared hero geometry; appearance and layout are independent modifiers. */
:root {
  --hero-height: 520px;
  --hero-padding: 72px;
  --hero-heading: clamp(2.375rem, 4.5vw, 4rem);
  --hero-radius: 10px;
}
.hero-system.hero-system {
  min-height: var(--hero-height);
  padding: var(--hero-padding) 0;
  display: flex;
  align-items: center;
  color: #fff;
  background: var(--navy);
  border: 0;
}
.hero-system::after { display: none; }
.hero-system .container { width: min(1240px, calc(100% - 5rem)); }
.hero-system h1,
.eco-page .hero-system h1 {
  font-size: var(--hero-heading);
  line-height: 1.08;
  letter-spacing: -.045em;
  max-width: 20ch;
  margin: 16px 0 20px;
  overflow-wrap: break-word;
}
.hero-system p,
.eco-page .hero-system p {
  max-width: 60ch;
  font-size: 1.125rem;
  line-height: 1.65;
  color: #c5d3dc;
  margin: 0;
}
.hero-system .eyebrow { color: #f79974; }
.hero-system .actions { margin-top: 28px; gap: 12px; }
.hero-system .hero-layout,
.hero-system .eco-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding: 0;
}
.hero-system .hero-copy { min-width: 0; }
.hero-system .hero-visual {
  min-height: 376px;
  border-radius: var(--hero-radius);
}
.hero-system .hero-visual > img { filter: none; object-position: 61% center; }
.hero-system .eco-product figure { border-radius: var(--hero-radius); box-shadow: none; }
.hero-system.hero-photo {
  background: linear-gradient(90deg,rgba(7,28,44,.96),rgba(7,28,44,.86) 45%,rgba(7,28,44,.3)),var(--banner-image) var(--hero-focus, center)/cover;
}
.hero-system.hero-light-photo {
  background: linear-gradient(90deg,rgba(248,250,251,.98),rgba(248,250,251,.94) 45%,rgba(248,250,251,.28)),var(--banner-image) var(--hero-focus, center 38%)/cover;
}
.hero-system.hero-light { background: #edf2f5; border-bottom: 1px solid var(--line); }
.hero-system.hero-light,
.hero-system.hero-light-photo { color: var(--navy); }
.hero-system.hero-light p,
.hero-system.hero-light-photo p { color: #354f60; }
.hero-system.hero-light .eyebrow,
.hero-system.hero-light-photo .eyebrow { color: #a54126; }
.hero-system.hero-light .btn-secondary,
.hero-system.hero-light-photo .btn-secondary { color: var(--navy); border-color: #758794; background: #fff; }
.hero-system.hero-compact { min-height: 400px; }
@media(max-width: 1100px) {
  :root { --hero-padding: 56px; }
}
@media(max-width: 800px) {
  :root { --hero-padding: 40px; }
  .hero-system.hero-system { min-height: 0; }
  .hero-system .container { width: calc(100% - 2.5rem); }
  .hero-system .hero-layout,
  .hero-system .eco-hero-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero-system .hero-visual { min-height: 0; aspect-ratio: 16/10; }
  .hero-system.hero-photo { background-image: linear-gradient(90deg,rgba(7,28,44,.94),rgba(7,28,44,.78)),var(--banner-image); }
  .hero-system.hero-light-photo { background-image: linear-gradient(90deg,rgba(248,250,251,.97),rgba(248,250,251,.86)),var(--banner-image); }
}
@media(max-width: 480px) {
  .hero-system .actions { flex-direction: column; align-items: stretch; }
  .hero-system .visual-caption { left: 16px; right: 16px; bottom: 16px; flex-wrap: wrap; gap: 8px; }
}

/* Homepage photograph: keep the autonomous systems clear of the copy. */
.hero-system.hero-autonomous {
  --banner-image: url('/assets/images/autonomous-systems-hero.webp');
  --hero-focus: center 58%;
  min-height: 580px;
  background-image: linear-gradient(90deg,rgba(7,28,44,.96) 0%,rgba(7,28,44,.86) 32%,rgba(7,28,44,.38) 60%,rgba(7,28,44,.16) 100%),var(--banner-image);
}
.hero-autonomous .hero-layout { display: block; }
.hero-autonomous .hero-copy { max-width: 550px; }
@media(max-width: 800px) {
  .hero-system.hero-autonomous {
    min-height: 560px;
    --hero-focus: 68% center;
    background-image: linear-gradient(90deg,rgba(7,28,44,.94),rgba(7,28,44,.68)),var(--banner-image);
  }
}

/* Lighter photographic variant retains a protected text area. */
.hero-system.hero-photo-brighter {
  background-image: linear-gradient(90deg,rgba(7,28,44,.88) 0%,rgba(7,28,44,.76) 35%,rgba(7,28,44,.22) 65%,rgba(7,28,44,.06) 100%),var(--banner-image);
}
.hero-photo-brighter h1 { max-width: 18ch; }
.hero-photo-brighter p { max-width: 48ch; color: #e0e8ed; }
@media(max-width: 800px) {
  .hero-system.hero-photo-brighter { background-image: linear-gradient(90deg,rgba(7,28,44,.89),rgba(7,28,44,.64)),var(--banner-image); }
}

.hero-system.hero-technology {
  --banner-image: url('/assets/images/services-safety-technology-dark.png');
  --hero-focus: center 46%;
  background-image: linear-gradient(90deg,rgba(7,28,44,.3),rgba(7,28,44,.12) 48%,transparent 75%),var(--banner-image);
  min-height: 580px;
}
@media(max-width: 800px) {
  .hero-system.hero-technology { --hero-focus: 65% center; min-height: 560px; background-image: linear-gradient(90deg,rgba(7,28,44,.85),rgba(7,28,44,.6)),var(--banner-image); }
}

/* Safe AI: supplied chip artwork with a clear text area. */
.hero-system.hero-ai-chip {
  --banner-image: url('/assets/images/safe-ai-chip-hero.png');
  --hero-focus: center;
  background-image: linear-gradient(90deg,rgba(7,28,44,.45),rgba(7,28,44,.25) 45%,rgba(7,28,44,.05) 75%),var(--banner-image);
}
.hero-ai-chip h1 { max-width: 18ch; }
.hero-ai-chip p { max-width: 48ch; }
@media(max-width: 800px) {
  .hero-system.hero-ai-chip {
    --hero-focus: 65% center;
    background-image: linear-gradient(90deg,rgba(7,28,44,.92),rgba(7,28,44,.65)),var(--banner-image);
  }
}