:root {
  --bg: #0a0a0c;
  --bg-soft: #111116;
  --text: #f3f3f5;
  --text-muted: #a6a6b0;
  --border: #2a2a31;
  --violet: #6547b8;
  --violet-bright: #7a5ac9;
  --violet-text: #a78bfa;
  --max-width: 1200px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(92%, var(--max-width));
  margin-inline: auto;
}

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-wrap {
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--violet);
  color: var(--text);
  font-weight: 700;
}
.brand-mark img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  display: block;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-text strong {
  font-size: 0.95rem;
  letter-spacing: 0.18em;
}

.brand-text small {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.site-nav {
  display: flex;
  gap: 28px;
}

.site-nav a {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.site-nav a:hover {
  color: var(--text);
}

.nav-cta {
  padding: 11px 17px;
  border: 1px solid var(--violet);
  color: var(--text);
  font-size: 0.85rem;
}

.nav-cta:hover {
  background: var(--violet);
}

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      rgba(8, 8, 10, 0.96) 0%,
      rgba(8, 8, 10, 0.9) 42%,
      rgba(8, 8, 10, 0.45) 100%
    );
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 82% 36%,
      rgba(116, 82, 201, 0.16),
      transparent 33%
    ),
    linear-gradient(
      rgba(255,255,255,0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.025) 1px,
      transparent 1px
    );

  background-size:
    auto,
    64px 64px,
    64px 64px;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-top: 120px;
  padding-bottom: 80px;
}

.eyebrow {
  margin: 0 0 24px;
  color: var(--violet-text);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

.hero h1 {
  max-width: 850px;
  margin: 0;

  font-size: clamp(3.4rem, 8vw, 7.4rem);
  line-height: 0.94;
  letter-spacing: -0.05em;
  font-weight: 700;
}

.hero h1 span {
  color: var(--violet-bright);
}

.hero-copy {
  max-width: 690px;
  margin: 32px 0 0;

  color: var(--text-muted);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.7;
}

.hero-actions {
  margin-top: 38px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.button {
  min-height: 48px;
  padding: 0 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--border);

  font-size: 0.9rem;
  font-weight: 600;

  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  background: var(--violet);
  border-color: var(--violet);
}

.button-primary:hover {
  background: var(--violet-bright);
  border-color: var(--violet-bright);
}

.button-secondary {
  background: rgba(255, 255, 255, 0.02);
}

.button-secondary:hover {
  border-color: rgba(255, 255, 255, 0.38);
}

.hero-note {
  margin-top: 54px;

  color: #777781;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

@media (max-width: 860px) {

  .site-nav {
    display: none;
  }

  .nav-cta {
    display: none;
  }

  .hero {
    min-height: 92vh;
  }

  .hero-content {
    padding-top: 130px;
  }

}

@media (max-width: 560px) {

  .nav-wrap {
    min-height: 72px;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
  }

  .hero h1 {
    font-size: clamp(3rem, 16vw, 4.8rem);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .button {
    width: 100%;
  }

}
/* How We Build */
.approach-section {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
}

.approach-label {
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.approach-section h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.approach-intro {
  max-width: 65ch;
  margin: 1.5rem 0 0;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 2rem 1.5rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}

.process-grid > li {
  min-width: 0;
  padding-top: 1.25rem;
  border-top: 2px solid var(--violet);
}

.process-number {
  display: block;
  margin-bottom: 1rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
}

.process-grid h3 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  line-height: 1.4;
}

.process-grid p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.approach-note {
  margin: 2.5rem 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.7;
}
/* Featured product */
.product-section {
  padding: clamp(4rem, 8vw, 7rem) 0;
  border-top: 1px solid var(--border);
}

.product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.product-label {
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.product-section h2 {
  margin: 0;
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.product-tagline {
  max-width: 30ch;
  margin: 1.25rem 0;
  font-size: 1.3rem;
  line-height: 1.5;
}

.product-description {
  max-width: 55ch;
  margin: 0 0 2rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.product-contact {
  margin: 1rem 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.product-workflow {
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-top: 3px solid var(--violet);
}

.product-workflow h3 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.4;
}

.workflow-list {
  margin: 1.75rem 0 0;
  padding-left: 1.5rem;
}

.workflow-list li {
  padding-left: 0.5rem;
  line-height: 1.6;
}

.workflow-list li + li {
  margin-top: 1.5rem;
}

.workflow-list li::marker {
  color: var(--text-muted);
}

.workflow-list p {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
}

.product-section .button:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 4px;
}

@media (max-width: 800px) {
  .product-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* About the company */
.about-section {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 5rem);
}

.about-label {
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.about-section h2 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.about-copy {
  max-width: 65ch;
  color: var(--text-muted);
  line-height: 1.8;
}

.about-copy p {
  margin: 0;
}

.about-copy p + p {
  margin-top: 1.25rem;
}

@media (max-width: 800px) {
  .about-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Responsible technology */
.responsibility-section {
  padding: clamp(4rem, 8vw, 7rem) 0;
  border-top: 1px solid var(--border);
}

.responsibility-label {
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.responsibility-section h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.responsibility-intro {
  max-width: 65ch;
  margin: 1.5rem 0 0;
  color: var(--text-muted);
  line-height: 1.7;
}

.responsibility-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.responsibility-card {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-top: 2px solid var(--violet);
}

.responsibility-status {
  margin: 0 0 0.75rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.responsibility-card h3 {
  margin: 0 0 0.75rem;
  font-size: 1.2rem;
  line-height: 1.4;
}

.responsibility-description {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.7;
}

.responsibility-note {
  max-width: 85ch;
  margin: 2rem 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

@media (max-width: 800px) {
  .responsibility-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Long-term vision */
.vision-section { position:relative; isolation:isolate; overflow:hidden; padding:clamp(4rem,8vw,7rem) 0; background:var(--bg-soft); border-top:1px solid var(--border); }
.vision-media { position:absolute; inset:0; z-index:-2; overflow:hidden; background:var(--bg-soft); }
.vision-frame { position:absolute; inset:0; opacity:0; background-position:center; background-size:cover; transition:opacity 900ms ease; }
.vision-frame.is-active { opacity:1; }
.vision-frame-01.is-loaded { background-image:url("assets/images/longer-horizon-01-software.jpg"); }
.vision-frame-02.is-loaded { background-image:url("assets/images/longer-horizon-02-connected-systems.jpg"); }
.vision-frame-03.is-loaded { background-image:url("assets/images/longer-horizon-03-advanced-engineering.jpg"); }
.vision-media-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,10,12,.94),rgba(10,10,12,.82) 48%,rgba(10,10,12,.64)),linear-gradient(180deg,rgba(10,10,12,.34),rgba(10,10,12,.72)); }
.vision-content { position:relative; z-index:1; }
.vision-section h2 { max-width:24ch; margin:0; font-size:clamp(2rem,4vw,3rem); line-height:1.15; letter-spacing:-.03em; }
.vision-intro { max-width:65ch; margin:1.5rem 0 0; color:var(--text-muted); line-height:1.7; }
.vision-path { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; margin:3rem 0 0; padding:0; list-style:none; }
.vision-step { min-width:0; padding-top:1.25rem; border-top:2px solid rgba(166,166,176,.32); transition:border-color 220ms ease; }
.vision-step.is-active { border-top-color:var(--violet-bright); }
.vision-stage-control { width:100%; padding:0; display:grid; gap:.7rem; background:transparent; color:inherit; border:0; font:inherit; text-align:left; cursor:pointer; }
.vision-stage-control:focus-visible { outline:3px solid var(--text); outline-offset:6px; }
.vision-stage { color:var(--text-muted); font-size:.75rem; font-weight:700; line-height:1.5; text-transform:uppercase; letter-spacing:.1em; }
.vision-flow { position:relative; width:100%; height:2px; margin:.1rem 0 .2rem; background:rgba(166,166,176,.22); }
.vision-flow::before { content:""; position:absolute; left:0; top:50%; width:9px; height:9px; transform:translateY(-50%); border:2px solid rgba(166,166,176,.48); border-radius:50%; background:var(--bg); }
.vision-flow::after { content:""; position:absolute; inset:0; width:0; background:var(--violet-bright); box-shadow:0 0 14px rgba(122,90,201,.42); transition:width 420ms ease; }
.vision-step.is-active .vision-flow::after { width:100%; }
.vision-step.is-active .vision-flow::before { border-color:var(--violet-bright); }
.vision-title { display:block; font-size:1.2rem; font-weight:700; line-height:1.4; }
.vision-summary { display:block; color:var(--text); font-size:.92rem; font-weight:600; line-height:1.5; }
.vision-description { margin:.9rem 0 0; color:var(--text-muted); line-height:1.7; }
.vision-note { margin:2rem 0 0; color:var(--text-muted); font-size:.9rem; line-height:1.7; }
@media (max-width:800px) {
  .vision-media-overlay { background:rgba(10,10,12,.84); }
  .vision-path { grid-template-columns:minmax(0,1fr); gap:1.5rem; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .vision-frame,.vision-flow::after { transition:none; }
}
/* Shared titles and taglines for informational sections */
h2.section-title {
  max-width: 100%;
  margin: 0;
  color: var(--text);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-transform: none;
}

p.section-tagline,
p.product-label {
  max-width: 55ch;
  margin: 0.85rem 0 0;
  color: var(--text-muted);
  font-size: clamp(1.125rem, 2vw, 1.4rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
}
/* Company contact */
.contact-section {
  padding: clamp(4rem, 8vw, 7rem) 0;
  border-top: 1px solid var(--border);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 5rem);
}

.contact-intro {
  max-width: 55ch;
  margin: 0 0 1.5rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.contact-email {
  margin: 1rem 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* Page footer */
.site-footer {
  padding: 2rem 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
}

.footer-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.footer-company {
  flex: 1 1 18rem;
  min-width: 0;
}

.footer-brand {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.footer-note {
  margin: 0.5rem 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

.footer-top {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.contact-section a:focus-visible,
.site-footer a:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 4px;
}

@media (max-width: 800px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Mobile navigation */
.mobile-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, 0.03);
  color: var(--text);

  border: 1px solid var(--border);
  cursor: pointer;
}

.mobile-menu-toggle:hover {
  border-color: var(--violet);
}

.mobile-menu-toggle:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 4px;
}

.menu-icon {
  font-size: 1.35rem;
  line-height: 1;
}

.mobile-nav {
  border-top: 1px solid var(--border);
  background: rgba(10, 10, 12, 0.98);
}

.mobile-nav-inner {
  display: grid;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.mobile-nav a {
  padding: 1rem 0;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.mobile-nav a:last-child {
  border-bottom: 0;
}

.mobile-nav a:hover,
.mobile-nav a:focus-visible {
  color: var(--text);
}

.mobile-nav a:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: -2px;
}

/* Visually hidden, still available to assistive technology */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 860px) {
  .mobile-menu-toggle {
    display: inline-flex;
  }
}
/* Hero circuit system */
.hero-circuit {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero-circuit svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.circuit-muted path {
  fill: none;
  stroke: rgba(180, 184, 198, 0.22);
  stroke-width: 2;
}

.circuit-muted-terminals circle {
  fill: var(--bg);
  stroke: rgba(180, 184, 198, 0.38);
  stroke-width: 2;
}

.circuit-primary path {
  fill: none;
  stroke: rgba(122, 90, 201, 0.95);
  stroke-width: 3;
}

.circuit-nodes circle {
  fill: var(--bg);
  stroke: rgba(122, 90, 201, 0.9);
  stroke-width: 3;
}

.circuit-core-shell {
  fill: url(#core-fill);
  stroke: rgba(122, 90, 201, 0.55);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 18px rgba(122, 90, 201, 0.24));
}

.circuit-core-ring {
  fill: none;
  stroke: rgba(166, 166, 176, 0.18);
  stroke-width: 1.5;
}

.circuit-core-ring-inner {
  stroke: rgba(166, 166, 176, 0.14);
}

.circuit-core-logo-svg {
  filter:
    drop-shadow(0 0 8px rgba(122, 90, 201, 0.35))
    drop-shadow(0 0 18px rgba(122, 90, 201, 0.18));
}

@media (max-width: 860px) {
  .hero-circuit {
    opacity: 0.22;
  }

  .hero-circuit svg {
    left: 42%;
    width: 155%;
    height: 100%;
  }

  .circuit-core-svg {
    display: none;
  }
}
/* Utility / legal pages */
.utility-header {
  position: relative;
  background: var(--bg);
}

.utility-back {
  padding: 0.75rem 1rem;
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-size: 0.9rem;
}

.utility-back:hover {
  color: var(--text);
  border-color: var(--violet);
}

.utility-back:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 4px;
}

.utility-main {
  min-height: 70vh;
}

.utility-article {
  max-width: 820px;
  padding-top: clamp(4rem, 8vw, 7rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.utility-kicker {
  margin: 0 0 1rem;
  color: var(--violet-text);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.utility-article h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.8rem, 7vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.utility-updated {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.utility-lead {
  margin: 2rem 0 0;
  color: var(--text-muted);
  font-size: 1.15rem;
  line-height: 1.8;
}

.utility-article section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.utility-article h2 {
  margin: 0 0 1rem;
  font-size: 1.35rem;
  line-height: 1.4;
}

.utility-article p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.8;
}

.utility-article p + p {
  margin-top: 1rem;
}

.utility-article a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.utility-article a:hover {
  color: var(--violet-text);
}

.utility-article a:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 4px;
}

@media (max-width: 560px) {
  .utility-back {
    padding: 0.65rem 0.8rem;
    font-size: 0.82rem;
  }

  .utility-article {
    width: min(90%, var(--max-width));
  }
}
.utility-list {
  margin: 1rem 0 0;
  padding-left: 1.4rem;
  color: var(--text-muted);
  line-height: 1.8;
}

.utility-list li + li {
  margin-top: 0.5rem;
}

.utility-list li::marker {
  color: var(--violet-text);
}
/* Footer navigation */
.footer-navigation {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.25rem;
}

.footer-legal {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(260px, 100%);
}

.footer-legal a {
  display: block;
  padding: 0.85rem 0;
  color: var(--text);
  font-size: 0.95rem;
  text-align: left;
  border-bottom: 1px solid rgba(166, 166, 176, 0.22);
}

.footer-legal a:first-child {
  border-top: 1px solid rgba(166, 166, 176, 0.22);
}

.footer-legal a:hover {
  color: var(--violet-text);
}

.footer-legal a:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 4px;
}

.footer-top {
  color: var(--violet-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

@media (max-width: 640px) {
  .footer-navigation {
    width: 100%;
    align-items: flex-start;
  }

  .footer-legal {
    width: 100%;
  }
}
/* Longer Horizon mobile visual journey */
.vision-mobile-image {
  display: none;
}

@media (max-width: 800px) {
  .vision-media {
    display: none;
  }

  .vision-section {
    background: var(--bg-soft);
  }

  .vision-mobile-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 1.25rem;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    border: 1px solid var(--border);
  }

  .vision-mobile-image-01.is-loaded {
    background-image:
      linear-gradient(
        rgba(10, 10, 12, 0.08),
        rgba(10, 10, 12, 0.08)
      ),
      url("assets/images/longer-horizon-01-software.jpg");
  }

  .vision-mobile-image-02.is-loaded {
    background-image:
      linear-gradient(
        rgba(10, 10, 12, 0.08),
        rgba(10, 10, 12, 0.08)
      ),
      url("assets/images/longer-horizon-02-connected-systems.jpg");
  }

  .vision-mobile-image-03.is-loaded {
    background-image:
      linear-gradient(
        rgba(10, 10, 12, 0.08),
        rgba(10, 10, 12, 0.08)
      ),
      url("assets/images/longer-horizon-03-advanced-engineering.jpg");
  }

  .vision-step {
    position: relative;
    padding-top: 0;
    border-top: 0;
  }

  .vision-step + .vision-step {
    margin-top: 2.5rem;
  }

  .vision-stage-control {
    padding-top: 1rem;
    border-top: 2px solid rgba(166, 166, 176, 0.32);
  }

  .vision-step.is-active .vision-stage-control {
    border-top-color: var(--violet-bright);
  }
}