/* =====================================================================
   Manzano Systems: site styles
   Brand colors come from the logo gradient (violet -> cyan).
   Edit the variables below to retheme the whole site.
   ===================================================================== */

:root {
  --bg:        #05070d;   /* page background (near-black navy) */
  --bg-2:      #0a0f1c;   /* raised sections */
  --surface:   #0f1626;   /* cards */
  --line:      rgba(160, 180, 255, 0.12);
  --text:      #e8ecf5;
  --text-dim:  #9aa5bd;
  --violet:    #9255fc;
  --blue:      #5197ef;
  --cyan:      #35c8f1;
  --grad:      linear-gradient(100deg, var(--violet) 0%, var(--blue) 50%, var(--cyan) 100%);

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 14px;
  --nav-h: 72px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
}
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1.1em; }
em { color: var(--text); font-style: italic; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.mono { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; }
.muted { color: var(--text-dim); }
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 1.4em;
}
.link {
  color: var(--cyan);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.link:hover { border-color: var(--cyan); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  transition: transform .2s, box-shadow .3s, background-color .3s, border-color .3s;
  white-space: nowrap;
}
.btn--primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 0 0 0 rgba(81, 151, 239, 0);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 40px -8px rgba(81, 151, 239, 0.6);
}
.btn--ghost {
  border: 1px solid rgba(232, 236, 245, 0.25);
  color: var(--text);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--cyan); background: rgba(53, 200, 241, 0.06); }
.btn--block { width: 100%; }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  transition: background-color .4s, border-color .4s, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(5, 7, 13, 0.78);
  backdrop-filter: blur(14px);
  border-color: var(--line);
}
.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  height: 100%;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__logo img { width: 168px; height: auto; }
.nav__links { display: flex; align-items: center; gap: 2rem; }
.nav__links a {
  font-size: 0.92rem;
  color: var(--text-dim);
  transition: color .2s;
}
.nav__links a:hover { color: var(--text); }
.nav__links .nav__cta {
  color: var(--text);
  padding: 0.5em 1.2em;
  border: 1px solid rgba(232, 236, 245, 0.25);
  border-radius: 999px;
}
.nav__links .nav__cta:hover { border-color: var(--cyan); }
.nav__toggle {
  display: none;
  background: none;
  border: 0;
  width: 40px;
  height: 40px;
  padding: 10px 8px;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-around;
}
.nav__toggle span {
  display: block;
  height: 1.5px;
  background: var(--text);
  transition: transform .3s;
}
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child  { transform: translateY(-5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
/* The package render sits on the right; the headline sits over the dark left side */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero__media img {
  position: absolute;
  top: 54%;
  right: -6%;
  width: min(72%, 1400px);
  height: auto;
  transform: translateY(-50%);
  animation: hero-drift 24s ease-in-out infinite alternate;
  /* feather the render's edges into the page background */
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 60%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 60%, transparent 100%);
}
/* Darken the left edge a little so the headline always reads */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(5,7,13,.5) 30%, rgba(5,7,13,0) 50%),
    linear-gradient(0deg, var(--bg) 0%, rgba(5,7,13,0) 20%);
}
@keyframes hero-drift {
  from { transform: translateY(-50%) scale(1); }
  to   { transform: translateY(-51.5%) scale(1.04); }
}
.hero__content { padding-top: var(--nav-h); }
.hero__title {
  font-size: clamp(2.8rem, 7.4vw, 6rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.0;
  margin-bottom: 0.4em;
  max-width: 12ch;
}
.hero__lede {
  max-width: 34rem;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  color: var(--text-dim);
  margin-bottom: 2.2em;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.hero__scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 40px;
  border: 1px solid rgba(232,236,245,.3);
  border-radius: 12px;
}
.hero__scroll span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 2px;
  height: 8px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--cyan);
  animation: scroll-dot 2s ease-in-out infinite;
}
@keyframes scroll-dot {
  0%   { opacity: 0; transform: translateY(0); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(14px); }
}

/* ---------- Pipeline strip ---------- */
.strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.strip__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}
.strip__item {
  font-family: var(--font-display);
  font-size: 1.02rem;
  white-space: nowrap;
}
.strip__item .mono { color: var(--cyan); margin-right: .5em; }
.strip__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(146,85,252,.6), rgba(53,200,241,.6));
  position: relative;
  overflow: hidden;
}
/* a pulse of "light" travels down each connector */
.strip__line::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -30%;
  width: 30%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  filter: blur(1px);
  animation: pulse-run 3.2s linear infinite;
}
.strip__line:nth-of-type(4)::after { animation-delay: 1.1s; }
.strip__line:nth-of-type(6)::after { animation-delay: 2.2s; }
@keyframes pulse-run { to { left: 110%; } }

/* ---------- Generic section ---------- */
.section { padding: clamp(80px, 12vw, 150px) 0; }
.section__head { max-width: 46rem; margin-bottom: clamp(40px, 6vw, 72px); }
.section__head p:not(.eyebrow) { color: var(--text-dim); font-size: 1.08rem; }
.subhead {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: clamp(60px, 8vw, 100px) 0 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

/* Two-column text + media */
.split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.split--reverse { grid-template-columns: 1.2fr 0.8fr; }
.split__text p:not(.eyebrow) { color: var(--text-dim); }
.split__media { margin: 0; position: relative; }
.split__media img {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px -30px rgba(81, 151, 239, 0.35);
}
.split__media figcaption {
  margin-top: .9rem;
  color: var(--text-dim);
  font-size: .7rem;
  text-transform: uppercase;
}

/* Capability cards */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: clamp(60px, 8vw, 110px);
}
.card {
  position: relative;
  padding: 2rem 1.8rem 1.6rem;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(15,22,38,.9), rgba(10,15,28,.9));
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .4s, border-color .4s;
}
.card::before {
  /* glow that follows the cursor (position set in main.js) */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, -20%), rgba(81,151,239,.14), transparent 45%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.card:hover { transform: translateY(-4px); border-color: rgba(81,151,239,.35); }
.card:hover::before { opacity: 1; }
.card p { color: var(--text-dim); margin: 0; font-size: .98rem; }
.card__icon { width: 44px; height: 44px; margin-bottom: 1.4rem; }
.card__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.4;
}
.card:nth-child(1) .card__icon svg { stroke: var(--violet); }
.card:nth-child(2) .card__icon svg { stroke: var(--blue); }

/* ---------- Image band ---------- */
.band {
  position: relative;
  height: clamp(380px, 62vw, 720px);
  overflow: hidden;
}
.band__img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  will-change: transform;
}
.band__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(40px, 6vw, 80px);
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(5,7,13,0) 22%, rgba(5,7,13,0) 55%, rgba(5,7,13,.9) 100%);
}
.band__quote {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0;
}

/* ---------- Platform steps ---------- */
.steps {
  list-style: none;
  margin: clamp(48px, 6vw, 80px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.step {
  padding: 1.8rem 1.6rem 0 0;
  position: relative;
}
.step::before {
  /* small node on the timeline, echoing the logo's circuit nodes */
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--cyan);
  background: var(--bg);
}
.step__num { color: var(--cyan); display: block; margin-bottom: .7rem; }
.step h3 { font-size: 1.15rem; }
.step p { color: var(--text-dim); font-size: .95rem; margin: 0; }

/* ---------- Classified teaser ---------- */
.classified {
  position: relative;
  padding: clamp(100px, 14vw, 180px) 0;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.classified__bg { position: absolute; inset: 0; z-index: -1; }
.classified__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(18px) saturate(1.2) brightness(.45);
  transform: scale(1.15);
}
.classified__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(5,7,13,.35) 0%, var(--bg) 78%);
}
.classified__inner { max-width: 820px; }
.classified h2 { margin-bottom: 1.2em; }
.redacted {
  font-family: var(--font-mono);
  font-size: clamp(.9rem, 1.4vw, 1.02rem);
  line-height: 2.1;
  color: var(--text-dim);
  max-width: 640px;
  margin: 0 auto 2.6rem;
}
.redacted .bar {
  background: #c9d1e4;
  color: transparent;
  border-radius: 2px;
  opacity: .85;
  user-select: none;
  position: relative;
  overflow: hidden;
  display: inline-block;
  line-height: 1.2;
  vertical-align: middle;
}
.redacted .bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(53,200,241,.7), transparent);
  transform: translateX(-100%);
  animation: shimmer 4s ease-in-out infinite;
}
.redacted .bar:nth-child(2)::after { animation-delay: .8s; }
.redacted .bar:nth-child(3)::after { animation-delay: 1.6s; }
.redacted .bar:nth-child(4)::after { animation-delay: 2.4s; }
@keyframes shimmer { 60%, 100% { transform: translateX(100%); } }

/* ---------- About ---------- */
.about__mark {
  display: flex;
  justify-content: center;
  position: relative;
}
.about__mark::before {
  content: "";
  position: absolute;
  inset: 10% 15%;
  background: radial-gradient(circle, rgba(81,151,239,.22), transparent 65%);
  filter: blur(30px);
}
.about__mark img {
  position: relative;
  width: min(100%, 380px);
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.team {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.person {
  display: flex;
  gap: 1.4rem;
  align-items: center;
  padding: 1.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}
.person__photo {
  width: 104px;
  height: 104px;
  border-radius: 10px;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter .5s;
  flex-shrink: 0;
  background: var(--bg-2);
}
.person:hover .person__photo { filter: grayscale(0); }
.person h4 { font-size: 1.2rem; margin-bottom: .25rem; }
.person__role { color: var(--text-dim); margin-bottom: .6rem; font-size: .72rem; }

/* ---------- Careers ---------- */
.careers { background: var(--bg-2); border-top: 1px solid var(--line); }
.careers__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  align-items: start;
}
.roles {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 1.8rem;
}
.roles__title {
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .22em;
  margin-bottom: 1.2rem;
  font-weight: 400;
}
.roles__empty {
  color: var(--text-dim);
  margin: 0;
  padding: 1.4rem;
  border: 1px dashed rgba(160,180,255,.2);
  border-radius: 10px;
}
.role {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 0;
  border-top: 1px solid var(--line);
  transition: padding-left .3s;
}
.role:first-of-type { border-top: 0; }
.role h4 { font-size: 1.1rem; margin: 0 0 .2rem; }
.role p { color: var(--text-dim); margin: 0; }
.role__arrow { color: var(--cyan); font-size: 1.3rem; transition: transform .3s; }
.role:hover { padding-left: .5rem; }
.role:hover .role__arrow { transform: translateX(4px); }
.apply {
  border-radius: var(--radius);
  padding: 1.8rem;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad) border-box;
  border: 1px solid transparent;
}
.apply__label { color: var(--cyan); text-transform: uppercase; letter-spacing: .22em; }
.apply__text { color: var(--text-dim); }
.apply__alt { color: var(--text-dim); font-size: .88rem; text-align: center; margin: 1rem 0 0; }

/* ---------- Contact ---------- */
.contact {
  position: relative;
  padding: clamp(110px, 15vw, 200px) 0;
  overflow: hidden;
  isolation: isolate;
}
.contact__bg { position: absolute; inset: 0; z-index: -1; }
.contact__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
  opacity: .55;
}
.contact__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(5,7,13,.85) 45%, rgba(5,7,13,.2) 100%),
    linear-gradient(180deg, var(--bg) 0%, rgba(5,7,13,0) 25%, rgba(5,7,13,0) 75%, var(--bg) 100%);
}
.contact__inner { max-width: var(--container); }
.contact__inner > p:not(.eyebrow) { max-width: 36rem; color: var(--text-dim); margin-bottom: 2em; }
.contact h2 { max-width: 14ch; }
.contact__meta { color: var(--text-dim); }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding: 56px 0 28px;
  font-size: .92rem;
  color: var(--text-dim);
}
.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
}
.footer__brand img { margin-bottom: 1rem; }
.footer__brand p { max-width: 22rem; }
.footer__links, .footer__contact { display: flex; flex-direction: column; gap: .5rem; }
.footer a:hover { color: var(--text); }
.footer__legal {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: .8rem;
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .split, .split--reverse { grid-template-columns: 1fr; }
  .split--reverse .about__mark { order: -1; }
  .about__mark img { width: 220px; }
  .cards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .careers__grid { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 1rem var(--gutter) 2rem;
    background: rgba(5, 7, 13, 0.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, transform .3s;
  }
  .nav__links.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__links a { padding: .9rem 0; font-size: 1.05rem; width: 100%; border-bottom: 1px solid var(--line); }
  .nav__links .nav__cta { border: 0; padding: .9rem 0; border-radius: 0; color: var(--cyan); }
  .nav.menu-open { background: rgba(5, 7, 13, 0.96); }

  .hero__media img { top: 30%; right: -20%; width: 150%; }
  .hero__media::after {
    background:
      linear-gradient(0deg, var(--bg) 0%, rgba(5,7,13,.85) 45%, rgba(5,7,13,.45) 100%);
  }

  .strip__inner { flex-wrap: wrap; gap: .8rem 1.4rem; justify-content: center; }
  .strip__line { display: none; }

  .steps { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr; }
  .person__photo { width: 80px; height: 80px; }
  .footer__inner { grid-template-columns: 1fr; }
  .hero__actions .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Platform intro (text + wafer image) ---------- */
.platform__intro { margin-bottom: clamp(48px, 7vw, 88px); }

/* ---------- Platform stage: image swaps as you hover each step ---------- */
.stage {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px -30px rgba(81, 151, 239, 0.35);
  background: var(--bg-2);
}
.split__media .stage__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .6s ease, transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.split__media .stage__img.is-active { opacity: 1; transform: none; }
.stage__label {
  position: absolute;
  left: 14px;
  bottom: 14px;
  margin: 0;
  padding: .45em .9em;
  border-radius: 999px;
  background: rgba(5, 7, 13, .7);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  color: var(--text);
  text-transform: uppercase;
  font-size: .7rem;
}
.stage__num { color: var(--cyan); }

.step { cursor: pointer; outline: none; transition: opacity .3s; }
.step h3 { transition: color .3s; }
.step::before { transition: background-color .3s, box-shadow .3s; }
.step::after {
  /* gradient bar along the timeline for the active step */
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 1.6rem;
  height: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.steps:hover .step:not(.is-active), .steps:focus-within .step:not(.is-active) { opacity: .55; }
.step.is-active::before { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.step.is-active::after { transform: scaleX(1); }
.step.is-active h3 { color: #fff; }
.step:focus-visible h3 { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Careers background photo (dimmed + softly blurred) ---------- */
.careers { position: relative; overflow: hidden; isolation: isolate; }
.careers__bg { position: absolute; inset: 0; z-index: -1; }
/* Whole photo, uncropped, at section height on the right; edges feathered away */
.careers__bg img {
  position: absolute;
  top: 50%;
  right: 3%;
  height: 112%;
  width: auto;
  max-width: none;
  transform: translateY(-50%);
  filter: blur(3px) brightness(.72) saturate(.85);
  -webkit-mask-image: radial-gradient(ellipse 55% 52% at 50% 50%, #000 30%, rgba(0,0,0,.6) 65%, transparent 100%);
          mask-image: radial-gradient(ellipse 55% 52% at 50% 50%, #000 30%, rgba(0,0,0,.6) 65%, transparent 100%);
}
/* keep the text side dark so the copy stays readable */
.careers__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-2) 38%, rgba(10,15,28,.35) 62%, rgba(10,15,28,.1) 100%);
}
.careers .roles, .careers .apply { backdrop-filter: blur(6px); }
.careers .roles { background: rgba(15, 22, 38, .82); }
@media (max-width: 760px) {
  .careers__bg img { right: 50%; height: 100%; transform: translate(50%, -50%); opacity: .6; }
  .careers__bg::after {
    background: linear-gradient(180deg, var(--bg-2) 0%, rgba(10,15,28,.7) 30%, rgba(10,15,28,.85) 100%);
  }
}