/* Isolated decorative layer: links and text remain above all portraits. */
.nm-service-section.nm-portrait-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f8fafc;
  background: #15233e;
}
.nm-portrait-section > .wp-block-group { position: relative; z-index: 2; }
.nm-portrait-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(15, 27, 49, .94), rgba(15, 27, 49, .83) 42%, rgba(15, 27, 49, .60) 100%);
}
.nm-portrait-section .nm-heading-accent { color: #a9c3ff; }
.nm-portrait-section .nm-service-eyebrow { color: #cbd8f2; }
.nm-portrait-section .wp-block-button__link { color: #15233e; background: #f8fafc; border-color: #f8fafc; }
.nm-portrait-section .wp-block-button__link:hover { color: #15233e; background: #dce7ff; }
.nm-portrait-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  max-width: none !important;
  margin: 0 !important;
  pointer-events: none;
  user-select: none;
  perspective: 1100px;
}
.nm-portrait-card {
  position: absolute;
  width: clamp(180px, var(--portrait-width, 26vw), 420px);
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(207, 225, 255, .25);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
  overflow: hidden;
  transition: transform 240ms ease-out;
}
.nm-portrait-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 32%; filter: saturate(.65); }
.nm-portrait-card--1 { left: calc(37% + var(--portrait-x, 0%)); top: calc(1% + var(--portrait-y, 0%)); transform: rotateZ(var(--portrait-angle, -10deg)); }
.nm-portrait-card--2 { right: calc(4% + var(--portrait-x, 0%)); top: calc(13% + var(--portrait-y, 0%)); transform: rotateZ(var(--portrait-angle, 7deg)); }
.nm-portrait-card--3 { left: calc(47% + var(--portrait-x, 0%)); bottom: calc(-24% + var(--portrait-y, 0%)); transform: rotateZ(var(--portrait-angle, -5deg)); }
@media (max-width: 781px) {
  .nm-portrait-card { width: var(--portrait-mobile-width, 47vw); }
  .nm-portrait-card--1 { left: calc(5% + var(--portrait-mobile-x, 0%)); top: calc(-8% + var(--portrait-mobile-y, 0%)); }
  .nm-portrait-card--2 { right: calc(-9% + var(--portrait-mobile-x, 0%)); top: calc(22% + var(--portrait-mobile-y, 0%)); }
  .nm-portrait-card--3 { left: calc(22% + var(--portrait-mobile-x, 0%)); bottom: calc(-12% + var(--portrait-mobile-y, 0%)); }
  .nm-portrait-section::after { background: linear-gradient(90deg, rgba(15, 27, 49, .88), rgba(15, 27, 49, .72)); }
}
@media (prefers-reduced-motion: reduce) {
  .nm-portrait-card { transition: none; }
}

/* Keep the whole word Arbeitskontext together, including on narrow screens. */
.nm-portrait-section h2.wp-block-heading {
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}
.nm-portrait-scene.is-awaiting-entry .nm-portrait-card { opacity: 0; }
.nm-portrait-scene.has-entered .nm-portrait-card {
  animation: nm-portrait-enter 950ms cubic-bezier(.16, 1, .3, 1) both;
}
.nm-portrait-scene.has-entered .nm-portrait-card--2 { animation-delay: 220ms; }
.nm-portrait-scene.has-entered .nm-portrait-card--3 { animation-delay: 440ms; }
@keyframes nm-portrait-enter {
  from { opacity: 0; translate: 80px 150px -240px; }
  to { opacity: 1; translate: 0 0 0; }
}
@media (max-width: 781px) {
  .nm-portrait-section h2.wp-block-heading { font-size: clamp(1.65rem, 8.2vw, 3.25rem); }
}
@media (prefers-reduced-motion: reduce) {
  .nm-portrait-scene .nm-portrait-card {
    animation: none;
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* Reuse the decorative collage independently on other sections. */
[data-nm-collage].nm-portrait-section {position:relative;isolation:isolate;overflow:hidden;}
.nm-collage-landscape .nm-portrait-card {aspect-ratio:4/3;}
.nm-portrait-card--4 {left:calc(18% + var(--portrait-x,0%));bottom:calc(-8% + var(--portrait-y,0%));transform:rotateZ(var(--portrait-angle,5deg));}
.nm-portrait-scene.has-entered .nm-portrait-card--4 {animation-delay:660ms;}
@media(max-width:781px){.nm-portrait-card--4{left:calc(-7% + var(--portrait-mobile-x,0%));top:calc(47% + var(--portrait-mobile-y,0%));}}

/* Free placement replaces the previous four fixed anchor positions. */
.nm-portrait-scene .nm-portrait-card {
 left:var(--portrait-left,45%); top:var(--portrait-top,10%);
 right:auto; bottom:auto;
}
@media(max-width:781px){
 .nm-portrait-scene .nm-portrait-card {
  left:var(--portrait-mobile-left,15%); top:var(--portrait-mobile-top,10%);
  right:auto; bottom:auto;
 }
}