/** Homepage-only process stack, composed to match the supplied reference. */
html.has-home-process-stack,
body.has-home-process-stack {
  /* `hidden` creates a scroll container here and prevents sticky descendants. */
  overflow-x: clip;
}

.home-process[data-surface][data-surface] {
  --white: #f7fbfc;
  --gray-600: #d2dcdf;
  --gray-500: #9babb0;
  --gray-400: #6f8187;
  --process-number-column: clamp(3.5rem,5.5vw,5.4rem);
  --process-column-gap: clamp(.9rem,1.8vw,1.6rem);
  --process-card-padding: clamp(.9rem,1.5vw,1.25rem);
  position: relative;
  overflow: visible;
  padding-block: clamp(6.5rem, 11vw, 10rem) clamp(8rem, 15vw, 13rem);
  background:
    radial-gradient(ellipse 50% 20% at 76% 2%, rgba(0, 175, 193, .08), transparent 72%),
    #050607;
  color: #f7fbfc;
  color-scheme: dark;
}

.home-process::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(103,232,237,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103,232,237,.025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000, transparent 34%);
}

.home-process > .container { position: relative; display: block; }

.home-process__intro {
  display: grid;
  grid-template-columns: var(--process-number-column) minmax(0,1fr);
  column-gap: var(--process-column-gap);
  row-gap: clamp(1.75rem,3vw,2.6rem);
  align-items: start;
  width: min(74rem,100%);
  margin-inline: auto;
  padding-inline: var(--process-card-padding);
  padding-bottom: clamp(4rem, 8vw, 7rem);
  border-bottom: 1px solid rgba(103,232,237,.1);
}

.home-process__eyebrow {
  grid-column: 1 / -1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  padding-top: 0;
}

.home-process__heading { grid-column: 2; min-width: 0; }

.home-process .section-label {
  position: absolute;
  left: 50%;
  margin: 0;
  color: var(--blue-light);
  transform: translateX(-50%);
}
.home-process__count { color: #6f8187; font-size: .61rem; font-weight: 650; letter-spacing: .16em; white-space: nowrap; }

.home-process__heading .section-title {
  max-width: none !important;
  margin: 0 !important;
  color: #f7fbfc !important;
  background: none;
  -webkit-text-fill-color: currentColor;
  font-size: clamp(3.5rem, 7vw, 7rem) !important;
  font-weight: 720 !important;
  line-height: .9 !important;
  letter-spacing: -.065em !important;
  text-align: left !important;
  text-wrap: balance;
}

.home-process__heading .section-sub {
  max-width: 43rem;
  margin: clamp(1.5rem,3vw,2.4rem) 0 0;
  color: #9babb0 !important;
  font-size: clamp(.95rem,1.25vw,1.08rem);
  line-height: 1.75;
}

.process-stack { position: relative; width: min(74rem, 100%); margin: clamp(5rem,10vw,8rem) auto 0; }
.process-stack__cards { position: relative; }
.process-stack__cards::after { content: none; }

.process-stack__rail {
  display: none;
}

.process-stack__rail > span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom,var(--blue-light),var(--blue));
  box-shadow: 0 0 12px var(--blue-glow);
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
}

.process-card {
  position: sticky;
  top: clamp(7rem,23vh,13rem);
  min-height: clamp(12.5rem, 17vw, 14.5rem);
  margin-bottom: clamp(1rem,3vh,2rem);
  z-index: calc(10 + var(--process-index));
}

.process-card:last-child { margin-bottom: 0; }

.process-card__surface {
  display: grid;
  grid-template-columns: var(--process-number-column) minmax(0,1fr);
  gap: var(--process-column-gap);
  min-height: clamp(12.5rem,17vw,14.5rem);
  padding: var(--process-card-padding);
  overflow: hidden;
  border: 1px solid rgba(7,22,25,.11);
  border-radius: clamp(1rem,1.35vw,1.35rem);
  background: #f3f2f7;
  color: #071619;
  box-shadow: 0 30px 90px -38px rgba(0,0,0,.92);
  transform: translate3d(0,var(--card-y,0),0) scale(var(--card-scale,1));
  transform-origin: center top;
  opacity: var(--card-opacity,1);
  transition: background-color .45s ease, border-color .45s ease, box-shadow .55s var(--ease-expo), filter .45s ease;
  will-change: transform,opacity;
}

.process-card.is-active .process-card__surface { background: #faf9fd; border-color: rgba(0,111,130,.24); box-shadow: 0 34px 95px -38px rgba(0,0,0,1); }
.process-card.is-covered .process-card__surface { background: #e1e1e5; filter: brightness(.9) saturate(.82); }

.process-card__number {
  grid-column: 1;
  color: #071619;
  font-family: var(--font-display);
  font-size: clamp(2.15rem,3.5vw,3.6rem);
  font-weight: 500;
  line-height: .88;
  letter-spacing: -.07em;
}

.process-card__body { grid-column: 2; min-width: 0; }
.process-card__phase { display: block; margin-bottom: .38rem; color: #00788c; font-size: .52rem; font-weight: 750; line-height:1.2; letter-spacing: .14em; text-transform: uppercase; }

.process-card h3 {
  margin: 0;
  color: #071619 !important;
  font-family: var(--font-display);
  font-size: clamp(1.35rem,2.25vw,2.2rem);
  font-weight: 620;
  line-height: 1;
  letter-spacing: -.048em;
  text-align:left;
  text-wrap:balance;
}

.process-card__tags { display: flex; flex-wrap: wrap; gap: .32rem; margin-top: .45rem; }
.process-card__tags span {
  padding: .22rem .58rem;
  border: 1px solid rgba(7,22,25,.13);
  border-radius: 999px;
  color: #52686e;
  font-size: .43rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.process-card__content {
  display: grid;
  grid-template-columns: minmax(0,1.75fr) minmax(10rem,.65fr);
  gap: clamp(.7rem,1.4vw,1.15rem);
  align-items: stretch;
  margin-top: clamp(.55rem,1vw,.85rem);
}

.process-card__gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(.45rem,1vw,.8rem); min-width: 0; margin: 0; }
.process-card__thumb {
  position:relative;
  display:block;
  height: clamp(4.5rem,6.5vw,6rem);
  overflow:hidden;
  border: 1px solid rgba(7,22,25,.08);
  border-radius: .55rem;
  background: #dfe5e7;
  transition:transform .7s var(--ease-expo);
}
.process-card__thumb img {
  position:absolute;
  top:50%;
  left:0;
  display:block;
  width:300%;
  max-width:none;
  height:auto;
  min-height:100%;
  filter: saturate(.72) contrast(.96);
  transform:translateY(-50%);
  transition:filter .45s ease;
}
.process-card__thumb:nth-child(2) img { left:-100%; }
.process-card__thumb:nth-child(3) img { left:-200%; }

.process-card.is-active .process-card__thumb img { filter:saturate(.92) contrast(1); }
.process-card.is-active .process-card__thumb:nth-child(2) { transform:translateY(-.2rem); }

.process-card__summary { display: flex; flex-direction: column; min-width: 0; padding-block: .15rem; }
.process-card__summary p { margin: 0; color: #52686e !important; font-size: clamp(.58rem,.68vw,.7rem); line-height: 1.45; }
.process-card__summary span { margin-top: auto; color: #071619; font-size: .47rem; font-weight: 750; letter-spacing: .035em; text-transform: uppercase; }
.process-card__summary span::after { content: " ↗"; color: #00788c; }

@media (max-width: 980px) {
  .home-process__intro { column-gap:var(--process-column-gap); }
  .process-stack { width: 100%; }
  .process-stack__rail { left: -1rem; }
  .process-card { top: 6.5rem; min-height: 12.5rem; }
  .process-card__surface { min-height: 12.5rem; grid-template-columns: 3.5rem minmax(0,1fr); }
  .process-card__content { grid-template-columns: minmax(0,1fr) 9.5rem; }
}

@media (max-width: 767px) {
  .home-process[data-surface][data-surface] {
    --process-number-column:3.25rem;
    --process-column-gap:.8rem;
    --process-card-padding:1.1rem;
    overflow:visible;
    padding-block:5.5rem 6rem;
  }
  .home-process__intro { row-gap:1.5rem; padding-bottom:3.2rem; }
  .home-process__eyebrow { padding-top: 0; }
  .home-process__heading .section-title { font-size: clamp(3rem,15vw,4.8rem) !important; }
  .home-process__heading .section-sub { margin-top: 1.25rem; }
  .process-stack { width: 100%; margin-top: 3rem; }
  .process-stack__rail { display: none; }
  .process-card,
  .process-card:last-child { position: sticky; top: 5.4rem; min-height: 0; margin-bottom: 1rem; }
  .process-card__surface {
    grid-template-columns: 3.25rem minmax(0,1fr);
    gap: .8rem;
    min-height: 0;
    padding: 1.1rem;
    border-radius: 1.15rem;
    transform: none;
    opacity: 1;
    will-change: auto;
  }
  .process-card__surface { transition: opacity .7s var(--ease-expo),transform .8s var(--ease-expo),background-color .4s ease; }
  .process-card__number { font-size: 2.5rem; }
  .process-card h3 { font-size: clamp(1.55rem,7.5vw,2.3rem); line-height: 1.03; }
  .process-card__tags { gap: .32rem; }
  .process-card__tags span { padding: .28rem .55rem; }
  .process-card__content { grid-template-columns: 1fr; }
  .process-card__thumb { height:clamp(5rem,24vw,7.5rem); }
  .process-card__summary { min-height: 7rem; }
  .process-card__summary p { font-size: .75rem; }
  .process-card__summary span { margin-top: 1rem; }
}

@media (max-width: 420px) {
  .home-process__intro { grid-template-columns:1fr; }
  .home-process__heading { grid-column:1; }
  .process-card__surface { grid-template-columns: 1fr; }
  .process-card__number,.process-card__body { grid-column: 1; }
  .process-card__number { margin-bottom: .25rem; }
  .process-card__gallery { gap: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .process-stack__rail > span { transform: scaleY(1) !important; }
  .process-card__surface,
  .process-card__thumb,
  .process-card__thumb img { opacity:1 !important; transition:none !important; filter:none; }
}