/* Een doorlopend hero-beeld; de overgang volgt het gekozen websitethema. */
.hero.hero-integrated{position:relative;isolation:isolate;display:block;min-height:clamp(580px,48vw,700px);padding-block:clamp(65px,7vw,100px);background:var(--paper);overflow:hidden}
.hero-integrated .hero-copy{position:relative;z-index:2;width:46%;max-width:580px;padding-bottom:0}
.hero-integrated .hero-visual{position:absolute;inset:0;z-index:0;margin:0;padding:0;pointer-events:none}
.hero-integrated .hero-portrait{height:100%;width:100%;max-height:none;aspect-ratio:auto;border-radius:0;background:transparent}
.hero-integrated .hero-portrait>img{width:100%;height:100%;object-fit:cover;object-position:75% center}
.hero-integrated .hero-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 31%,color-mix(in srgb,var(--paper) 96%,transparent) 43%,transparent 67%),linear-gradient(0deg,var(--paper),transparent 15%),linear-gradient(270deg,var(--paper),transparent 3%)}
@media(min-width:680px) and (max-width:959px){
  .hero.hero-integrated{min-height:540px;padding-block:65px}
  .hero-integrated .hero-copy{width:49%}
  .hero-integrated .hero-visual::after{background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 34%,color-mix(in srgb,var(--paper) 96%,transparent) 49%,transparent 72%),linear-gradient(0deg,var(--paper),transparent 15%)}
}
@media(max-width:679px){
  .hero.hero-integrated{min-height:0;padding-top:38px;padding-bottom:0}
  .hero-integrated .hero-copy{width:100%;max-width:600px}
  .hero-integrated .hero-visual{position:relative;inset:auto;width:calc(100% + 2 * var(--gutter));margin:14px calc(-1 * var(--gutter)) 0;aspect-ratio:1.35;}
  .hero-integrated .hero-portrait{position:absolute;inset:0}
  .hero-integrated .hero-portrait>img{object-position:72% center}
  .hero-integrated .hero-visual::after{background:linear-gradient(180deg,var(--paper),transparent 25%,transparent 86%,var(--paper))}
}