.mhz-about{
  --mhz-about-section-gap: 150px;
  --mhz-about-overlap: -243px;
  --mhz-about-clients-gap: 68px;
  --mhz-about-values-gap: 114px;
  --mhz-about-portrait-gap: 42px;
  --mhz-about-radius: var(--wp--custom--design--radius-card);
  background: var(--wp--custom--design--charcoal);
}

.mhz-about-intro__photo img{
  width: min(100%, 1920px);
  height: 920px;
  margin-inline: auto;
  object-fit: cover;
  object-position: center 20%;
}

.mhz-about-intro .mhz-about-intro__panel{
  position: relative;
  width: 74.15%;
  margin: var(--mhz-about-overlap) 0 0 auto;
  padding: 75px 9% 54px;
  min-height: 371px;
  background: var(--wp--custom--design--charcoal);
  border-radius: var(--mhz-about-radius);
}

.mhz-about-intro__panel h1{
  margin-bottom: var(--wp--custom--design--space-hero-heading-copy);
}

.mhz-about-intro__panel p{
  max-width: 568px;
}

.mhz-clients{
  margin-top: var(--mhz-about-clients-gap);
}

.mhz-clients__title::after{
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--wp--custom--design--yellow);
  margin-top: 10px;
}

.mhz-clients__rail{
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  margin-top: 36px;
  mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent);
}

.mhz-clients__rail::-webkit-scrollbar{
  display: none;
}

.mhz-clients__logo{
  flex: 0 0 217px;
  height: 143px;
  display: grid;
  place-items: center;
  background: var(--wp--custom--design--black);
  border-radius: 8px;
  scroll-snap-align: start;
}

.mhz-clients__logo img{
  width: 120px;
  height: 80px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.mhz-clients :focus-visible{
  outline: 2px solid var(--wp--custom--design--yellow);
  outline-offset: -2px;
}

.mhz-values{
  padding-top: var(--mhz-about-section-gap);
}

.mhz-values__intro{
  text-align: center;
  max-width: 660px;
  margin-inline: auto;
}

.mhz-values__intro p{
  max-width: 453px;
  margin-inline: auto;
}

.mhz-values__cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 335px));
  justify-content: center;
  gap: 54px;
  margin-top: var(--mhz-about-values-gap);
  padding-inline: 32px;
}

.mhz-values__slot{
  position: relative;
  isolation: isolate;
}

.mhz-values__slot::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--mhz-about-radius);
  background: var(--wp--custom--design--yellow);
  z-index: -1;
}

.mhz-values__slot:first-child::before{
  transform: translateX(85px) rotate(10deg);
}

.mhz-values__slot:last-child::before{
  transform: translateX(-85px) rotate(-10deg);
}

.mhz-values__slot:nth-child(2)::before{
  display: none;
}

.mhz-values__card{
  min-height: 436px;
  padding: 48px 32px;
  border-radius: var(--mhz-about-radius);
  background: var(--wp--custom--design--black);
  text-align: center;
}

.mhz-values__slot:first-child .mhz-values__card{
  transform: rotate(-5deg);
}

.mhz-values__slot:last-child .mhz-values__card{
  transform: rotate(5deg);
}

.mhz-values__portrait{
  position: relative;
  width: 96px;
  height: 135px;
  margin: 0 auto var(--mhz-about-portrait-gap);
}

.mhz-values__portrait::before{
  content: "";
  position:absolute;
  top:0;
  left:0;
  width:58px;
  height:58px;
  border:3px solid var(--wp--custom--design--yellow);
  border-radius:16px;
  transform:rotate(6deg);
}

.mhz-values__portrait--circle::before{
  border-radius:50%;
}

.mhz-values__portrait--triangle::before{
  border:0;
  border-radius:0;
  transform:none;
  background:url("../images/triangle.svg") center / contain no-repeat;
}

/* Crop the source portraits to the faces, as in the design. */
.mhz-values__photo{
  position:absolute;
  top:40px;
  left:13px;
  width:77px;
  height:76px;
  overflow:hidden;
  border-radius:var(--mhz-about-radius);
}

.mhz-values__photo img{
  position:absolute;
  width:495.6%;
  height:330.32%;
  max-width:none;
  top:-45.2%;
  left:-140.93%;
}

.mhz-values__portrait--triangle .mhz-values__photo img{
  width:214.16%;
  height:142.74%;
  top:-10.19%;
  left:-100.07%;
}

.mhz-values__card h3{
  margin-bottom: 16px;
}

.mhz-personal{
  display: grid;
  grid-template-columns: minmax(0, 572px) minmax(0, 808px);
  gap: 20px;
  align-items: center;
  padding-block: 180px 160px;
}

.mhz-personal__copy > p{
  max-width: 453px;
}

.mhz-personal__copy .mhz-arrow-list{
  margin-top: 28px;
}

.mhz-personal__gallery{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 20px;
}

.mhz-personal__gallery img{
  width: 100%;
  height: 314px;
  object-fit: cover;
  border-radius: var(--mhz-about-radius);
}

@media (max-width: 1199px){
  .mhz-about{
    --mhz-about-section-gap: 96px;
    --mhz-about-overlap: -140px;
    --mhz-about-values-gap: 80px;
  }
  .mhz-about-intro__photo img{
    height: 650px;
    object-position: 35% center;
  }
  .mhz-about-intro .mhz-about-intro__panel{
    width: 80%;
    margin-top: var(--mhz-about-overlap);
    padding: 48px;
    min-height: 0;
  }
  .mhz-values__cards{
    gap: 24px;
    padding-inline: 16px;
    margin-top: var(--mhz-about-values-gap);
  }
  .mhz-values__card{
    padding: 40px 20px;
    height: 100%;
  }
  .mhz-values__slot:first-child::before{
    transform: translateX(25px) rotate(10deg);
  }
  .mhz-values__slot:last-child::before{
    transform: translateX(-25px) rotate(-10deg);
  }
  .mhz-personal{
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    padding-block: var(--mhz-about-section-gap);
  }
  .mhz-personal__copy > p{
    max-width: 640px;
  }
  .mhz-personal__gallery img{
    height: 280px;
  }
}

@media (max-width: 700px){
  .mhz-about{
    --mhz-about-section-gap: 72px;
    --mhz-about-overlap: -56px;
    --mhz-about-clients-gap: 56px;
    --mhz-about-values-gap: 64px;
    --mhz-about-portrait-gap: 24px;
  }
  .mhz-about-intro__photo img{
    height: 430px;
    object-position: 27% center;
  }
  .mhz-about-intro .mhz-about-intro__panel{
    width: 100%;
    margin-top: var(--mhz-about-overlap);
    padding: 32px 24px 0;
  }
  .mhz-clients{
    margin-top: var(--mhz-about-clients-gap);
  }
  .mhz-clients__logo{
    flex-basis: 170px;
    height: 120px;
  }
  .mhz-values{
    padding-top: var(--mhz-about-section-gap);
  }
  .mhz-values__cards{
    grid-template-columns: minmax(0, 335px);
    gap: 48px;
    margin-top: var(--mhz-about-values-gap);
    padding-inline: 14px;
  }
  .mhz-values__card{
    min-height: 360px;
    padding: 32px;
  }
  .mhz-values__portrait{
    margin-bottom: var(--mhz-about-portrait-gap);
    height: 120px;
  }
  .mhz-personal__gallery{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .mhz-personal__gallery img{
    height: auto;
    aspect-ratio: 1;
  }
}

@media (max-width: 900px){
  .mhz-values__cards{
    grid-template-columns: minmax(0, 335px);
    gap: 56px;
  }
  .mhz-values__slot:first-child::before{
    transform: translateX(12px) rotate(6deg);
  }
  .mhz-values__slot:last-child::before{
    transform: translateX(-12px) rotate(-6deg);
  }
}

@media (prefers-reduced-motion: reduce){
  .mhz-clients__rail{
    scroll-behavior: auto;
  }
}

.mhz-about-intro__photo{
  margin:0;
}

.mhz-personal__gallery figure{
  grid-column:span 3;
  min-width:0;
}

.mhz-personal__gallery figure:nth-child(4n + 2), .mhz-personal__gallery figure:nth-child(4n + 3){
  grid-column:span 4;
}

.mhz-clients__logo{
  margin:0;
}

.mhz-clients__title{
  font-family:var(--wp--custom--design--font-body);
  font-size:var(--wp--custom--design--type-lead-size);
  font-weight:var(--wp--custom--design--font-weight-regular);
  line-height:var(--wp--custom--design--type-lead-line-height);
  color:var(--wp--custom--design--white);
  margin-bottom:0;
}

.mhz-values__intro h2{
  margin-inline:auto;
  margin-bottom:var(--wp--custom--design--space-heading-content);
}

.mhz-personal__copy h2{
  margin-bottom:var(--wp--custom--design--space-heading-content);
}

.mhz-personal .mhz-arrow-list{
  list-style:none;
  padding:0;
  line-height:var(--wp--custom--design--type-list-line-height);
}

.mhz-personal .mhz-arrow-list li{
  position:relative;
  padding-left:20px;
}

.mhz-personal .mhz-arrow-list li::before{
  content:"";
  position:absolute;
  top:11px;
  left:0;
  width:6px;
  height:10px;
  background:url("../images/list-arrows.svg") 0 0 / 6px 137px no-repeat;
}

@media(max-width:700px){
  .mhz-personal__gallery figure:nth-child(n){
    grid-column:auto;
  }
  .mhz-personal__gallery img{
    height:auto;
    aspect-ratio:1;
  }
}

/* The editor must keep every logo reachable for selecting, replacing and reordering. */
.editor-styles-wrapper .mhz-clients__rail{
  flex-wrap:wrap;
  mask-image:none;
  overflow:visible;
}


/* Continuous frontend logo movement; the editor retains the original image blocks. */
.mhz-clients__rail.is-auto-sliding {
  display: block;
  overflow: hidden;
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.mhz-clients__track,
.mhz-clients__group {
  display: flex;
  width: max-content;
}
.mhz-clients__group {
  flex-shrink: 0;
  gap: 20px;
  padding-inline-end: 20px;
}
/* Keep Pragmatisch in front of both neighbouring yellow backplates. */
.mhz-values__slot:nth-child(2) {
  z-index: 2;
}
@media (prefers-reduced-motion: no-preference) {
  .mhz-about .mhz-reveal {
    transition-delay: var(--mhz-reveal-delay, 0ms);
  }
  .mhz-values__slot:nth-child(2),
  .mhz-personal__gallery > figure:nth-child(2) {
    --mhz-reveal-delay: 70ms;
  }
  .mhz-values__slot:nth-child(3),
  .mhz-personal__gallery > figure:nth-child(3) {
    --mhz-reveal-delay: 140ms;
  }
  .mhz-personal__gallery > figure:nth-child(4) {
    --mhz-reveal-delay: 210ms;
  }
  .mhz-about-intro__photo {
    overflow: hidden;
  }
  .mhz-about-intro__photo img {
    animation: mhz-about-photo-in 1100ms var(--wp--custom--design--ease-out) both;
  }
  @keyframes mhz-about-photo-in {
    from { opacity: 0; transform: scale(1.035); }
    to { opacity: 1; transform: scale(1); }
  }
}
.editor-styles-wrapper .mhz-about-intro__photo img {
  animation: none;
}

/* Grab the logos themselves, without native image dragging or text selection. */
.mhz-clients__rail {
  cursor: grab;
}
.mhz-clients__rail.is-auto-sliding {
  touch-action: pan-y pinch-zoom;
}
.mhz-clients__rail.is-dragging {
  cursor: grabbing;
  user-select: none;
  scroll-behavior: auto;
  scroll-snap-type: none;
}
.mhz-clients__rail img {
  user-select: none;
  -webkit-user-drag: none;
}
.editor-styles-wrapper .mhz-clients__rail {
  cursor: auto;
}