/* process-steps: existing family composition and intentional responsive variants. */
.approach-process-story {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fs-space-4);
  margin: var(--fs-space-12) 0 0;
  padding: 0;
  align-items: stretch;
  list-style: none;
}

.approach-process-phase {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--fs-radius-lg);
  padding: var(--fs-space-6);
  background: var(--background);
}

.approach-process-phase::before {
  position: absolute;
  right: var(--fs-space-5);
  bottom: calc(var(--fs-space-4) * -1);
  z-index: -1;
  color: var(--foreground);
  content: attr(data-step);
  font-size: 8rem;
  font-weight: var(--fs-weight-semibold);
  line-height: 0.8;
  opacity: 0.04;
}

.approach-process-phase[data-step="1"] {
  border-color: transparent;
  background: #007a4c;
  color: #fff;
}

.approach-process-phase[data-step="1"]::before {
  color: #fff;
  opacity: 0.12;
}

.approach-process-phase[data-step="7"] {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-foreground);
}

.approach-process-phase[data-step="7"]::before {
  color: var(--accent-foreground);
  opacity: 0.18;
}

.approach-step-marker {
  display: flex;
  align-items: center;
  gap: var(--fs-space-3);
  margin-bottom: var(--fs-space-6);
}

.approach-step-number {
  display: inline-flex;
  width: 3.25rem;
  height: 3.25rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--fs-radius-lg);
  color: var(--accent);
  font-size: var(--fs-font-heading-sm);
  font-weight: var(--fs-weight-semibold);
  line-height: 1;
}

.approach-step-label {
  color: var(--muted-foreground);
  font-size: var(--fs-font-xs);
  line-height: var(--fs-line-snug);
  font-weight: var(--fs-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.approach-process-phase[data-step="1"] .approach-step-number {
  border-color: rgb(255 255 255 / 0.42);
  color: #fff;
}

.approach-process-phase[data-step="1"] .approach-step-label,
.approach-process-phase[data-step="1"] .approach-step-content h3,
.approach-process-phase[data-step="1"] .approach-step-content p {
  color: #fff;
}

.approach-process-phase[data-step="7"] .approach-step-number {
  border-color: rgb(255 255 255 / 0.42);
  color: var(--accent-foreground);
}

.approach-process-phase[data-step="7"] .approach-step-label,
.approach-process-phase[data-step="7"] .approach-step-content p {
  color: var(--accent-foreground);
}

.approach-process-phase__content {
  display: block;
}

.approach-step-content h3 {
  margin: 0 0 var(--fs-space-3);
  font-size: var(--fs-font-heading-sm);
  line-height: var(--fs-line-snug);
  font-weight: var(--fs-weight-semibold);
}

.approach-step-content p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: var(--fs-font-md);
  line-height: var(--fs-line-relaxed);
}

@media (min-width: 48rem) {
  .approach-process-story {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fs-space-5);
  }

  .approach-process-phase {
    padding: var(--fs-space-6);
  }

  .approach-process-phase:first-child,
  .approach-process-phase:last-child {
    grid-column: span 2;
  }}

@media (min-width: 64rem) {

  .approach-process-story {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--fs-space-6);
  }

  .approach-process-phase {
    padding: var(--fs-space-8);
  }

  .approach-process-phase:first-child {
    grid-column: span 2;
  }

  .approach-process-phase:last-child {
    grid-column: span 2;
  }}

/* Shared public step marker, based on the existing Home / Wat we doen typography.
   Covers explicit markers and CSS counters; portal classes are deliberately absent. */
#site-content :is(.home-service-card__number,.services-capability__number,.service-theme-option__number,.approach-step-number),
#site-content .service-theme-process li:before{
 display:block;flex:0 0 auto;width:auto;height:auto;min-width:0;min-height:0;
 margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
 color:var(--accent);font-family:inherit;font-size:.75rem;font-weight:700;
 font-variant-numeric:tabular-nums;letter-spacing:.1em;line-height:1.5;text-align:left;
}
#site-content .approach-step-marker{align-items:baseline;gap:.75rem;margin-bottom:1rem}
#site-content .approach-process-phase:not(.approach-continuity):before{content:none}
#site-content :is(.services-capability,.service-theme-process li){column-gap:1rem}
@media(max-width:47.99rem){#site-content .services-capability{row-gap:1rem}}

/* Family-owned background media composition; shared playback remains in background-media.css. */
.approach-process-phase.approach-continuity {position:relative;isolation:isolate;overflow:hidden;min-height:32rem;padding:clamp(2rem,5vw,4rem);border-radius:var(--fs-radius-xl);background:#111;color:#fff}
.approach-continuity>.background-media {z-index:-2}
.approach-process-phase.approach-continuity:before {content:"";opacity:1;position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgb(0 0 0/.82),rgb(0 0 0/.55));pointer-events:none}
.approach-continuity .approach-step-content {position:relative;z-index:1}
.approach-continuity :is(h3,p) {color:#fff}
@media(max-width:47.99rem) {.approach-continuity {min-height:36rem;padding:1.5rem}
.approach-continuity .approach-step-marker {margin-bottom:2rem}
}
.approach-process-phase.approach-continuity[data-step="7"] :is(h3,p) {color:#fff}
.approach-process-phase.approach-continuity .approach-step-label,
.approach-process-phase.approach-continuity .approach-step-number {color:#fff}
@media(max-width:47.99rem) {.approach-process-phase.approach-continuity {padding:1.5rem}
}
.approach-continuity .background-media :is(img,video) {object-position:50% 50%}
@media(max-width:47.99rem) {.approach-continuity .background-media :is(img,video) {object-position:55% 50%}
}