/* Geport uit lusion.co about.CNa9RfUh.css — alle #home-reel regels, kleuren omgezet naar MK oranje */
:root{--cross-size:1.5rem;--base-padding-x:max(5vw,40px);--base-padding-y:clamp(30px,4vw,50px);--grid-gap:2vw;--grid-space:calc((100% - 11 * var(--grid-gap)) / 12);--vh:1vh;}
#home-reel{font-size:clamp(.875rem,1vw,2rem)}
#home-reel-container{grid-column:1 / 13;padding-bottom:calc(var(--vh, vh) * 100);margin-bottom:calc(var(--vh, vh) * 10)}
#home-reel-video-cursor-svg{width:3.6rem;height:3.6rem}
#home-reel-container-inner{position:relative;width:100%}
#home-reel-video-container{position:relative;width:100%;will-change:transform}
#home-reel-video-container-decoration{position:absolute;top:calc(-2 * var(--cross-size));left:0;width:100%;height:calc(100% + 4 * var(--cross-size));display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
#home-reel-video-container-top{position:absolute;top:0;left:0;width:100%;height:var(--cross-size);overflow:hidden}
#home-reel-video-container-bottom{position:absolute;bottom:0;left:0;width:100%;height:var(--cross-size)}
.home-reel-video-container-svg-wrapper{display:flex;justify-content:space-around;width:calc((100vw - 2 * var(--base-padding-x)) * 2)}
.home-reel-video-container-svg-wrapper svg{height:var(--cross-size);width:auto}
#home-reel-video-container-crosses{position:absolute;height:var(--cross-size);width:100%}
.home-reel-video-container-cross{position:absolute;width:var(--cross-size);height:var(--cross-size)}
.home-reel-video-container-cross:nth-child(1){left:0;top:0}
.home-reel-video-container-cross:nth-child(2){left:calc(25% - calc(var(--cross-size) / 2));top:0}
.home-reel-video-container-cross:nth-child(3){left:calc(50% - calc(var(--cross-size) / 2));top:0}
.home-reel-video-container-cross:nth-child(4){left:calc(75% - calc(var(--cross-size) / 2));top:0}
.home-reel-video-container-cross:nth-child(5){left:calc(100% - var(--cross-size));top:0}
.home-reel-video-container-cross:before,.home-reel-video-container-cross:after{position:absolute;content:"";left:0;background:#0b0f14}
.home-reel-video-container-cross:before{width:var(--cross-size);height:calc(.125 * var(--cross-size));left:50%;top:50%;transform:translate(-50%,-50%)}
.home-reel-video-container-cross:after{height:var(--cross-size);width:calc(.125 * var(--cross-size));left:50%;top:50%;transform:translate(-50%,-50%)}
#home-reel-video-watch-btn{cursor:pointer;position:absolute;left:calc(50% - 4.7em);top:calc(50% - 3em);width:9.4em;height:6em;display:flex;justify-content:center;align-items:center;overflow:hidden;border-radius:22.5em}
#home-reel-video-watch-btn svg{z-index:1;width:2em;height:2em;color:#0b0f14;transition:color .3s cubic-bezier(.4,0,.1,1)}
#home-reel-video-title{--font-size: 7.5em;display:flex;gap:2em;position:absolute;line-height:1;font-size:var(--font-size);text-transform:uppercase;color:#fff;top:50%;left:50%;transform:translate(-50%,-50%)}
#home-reel-video-title .char-wrapper{position:relative;height:1em}
.home-reel-video-title-word{position:relative;overflow:hidden;display:flex!important;height:.8em;will-change:transform}
.home-reel-video-title-word .char-wrapper{position:relative;top:-.15em;width:.6em}
#home-reel-video-watch-btn-base{position:absolute;width:100%;height:100%;border-radius:22.5em;background:#fff;transition:background .3s cubic-bezier(.4,0,.1,1)}
#home-reel-video-watch-btn-background{position:absolute;width:100%;height:100%;background:#fc5b34;transform:scale3d(1,0,1);transform-origin:bottom;transition:transform .4s cubic-bezier(.4,0,.1,1)}
#home-reel-video-placeholder{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:auto}
#home-reel-video{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:12px;object-fit:cover;opacity:0}
#home-reel-title{position:relative;font-size:10vw;left:-.03em;letter-spacing:-.02em;grid-column:1 / span 12;margin-top:1em;margin-bottom:.5em;line-height:1;will-change:transform}
#home-reel-title .word{position:relative;bottom:.1em}
#home-reel-title-inner{display:inline-block;position:relative}
#home-reel-title-inner>div{overflow:hidden}
#home-reel-title-line-1{padding-left:calc(var(--grid-space) * 2 + var(--grid-gap) * 2)}
#home-reel-thumb-wrapper{position:relative;grid-column:1 / span 5;width:calc(100% + var(--grid-gap) * 2);height:0;top:-10em}
#home-reel-thumb{grid-column:1 / span 5;height:100px;font-size:2.4rem;overflow:hidden;padding-top:56.25%;height:0}
#home-reel-content{line-height:1.4;grid-column:7 / span 6;height:fit-content;font-size:clamp(1rem,1.5vw,3rem)}
#home-reel-content-inner{position:relative;width:100%}
#home-reel-desc{will-change:transform;font-size:1em;margin:0}
#home-reel-cta{display:flex;position:relative;float:left;overflow:hidden;padding:1em 1.5em 1em 1.625em;align-items:center;gap:1em;border-radius:5.3125em;font-size:clamp(.875rem,1vw,1.75rem);background:#fff;font-family:Aeonik;text-transform:uppercase;width:fit-content;height:3.375em;font-weight:500;pointer-events:auto;color:var(--project-details-btn-text);grid-column:7 / span 6;margin-top:3em;opacity:0;box-shadow:0 6px 10px #0000000a,0 2px 4px #0000000a;transition:background cubic-bezier(.35,0,0,1) .2s;will-change:transform}
#home-reel-cta-dot{display:inline-block;position:relative;width:.5em;height:.5em;background:#0b0f14;border-radius:100px;z-index:1;transition:background cubic-bezier(.35,0,0,1) .5s,transform cubic-bezier(.35,0,0,1) .4s}
#home-reel-cta-text{position:relative;z-index:1;transition:color cubic-bezier(.35,0,0,1) .5s,transform cubic-bezier(.35,0,0,1) .4s}
#home-reel-cta-arrow{position:absolute;display:flex;justify-content:center;align-items:center;right:1em;height:1.2em;width:1.2em;color:#fc5b34;border-radius:100%;transform:translate3d(3em,0,0);transition:transform cubic-bezier(.4,0,0,1) .4s;z-index:1}
#home-reel-cta-arrow svg{transition:color .5s;width:100%;height:100%}
@media (max-width: 812px){
#home-reel-container{grid-column:1 / 7;padding-bottom:0}
#home-reel-container-inner{padding:0}
.home-reel-video-container-svg-wrapper{width:calc((100vw - 2 * var(--base-padding-x)) * 4)}
#home-reel-video-container-crosses{display:none}
.home-reel-video-container-cross:nth-child(2){display:none}
.home-reel-video-container-cross:nth-child(4){display:none}
#home-reel-video-title{display:none}
#home-reel-title{grid-column:1 / span 6;font-size:13.8vw;margin-bottom:1em}
#home-reel-title-inner>div{overflow:visible}
#home-reel-title-line-1{padding-left:0}
#home-reel-thumb-wrapper{top:0}
#home-reel-thumb{padding-top:0}
#home-reel-content{grid-column:1 / span 6}
#home-reel-cta{opacity:1;margin-bottom:6em;margin-top:3em}
}
@media (hover: hover){
#home-reel-video-watch-btn:hover #home-reel-video-watch-btn-base{transition:background .1s .3s cubic-bezier(.4,0,.1,1);background:#fc5b34}
#home-reel-video-watch-btn:hover #home-reel-video-watch-btn-background{transform:scaleZ(1)}
#home-reel-video-watch-btn:hover svg{color:#fff}
#home-reel-cta:hover{color:#fff;background:#fc5b34;transition:background cubic-bezier(.35,0,0,1) .5s .3s}
#home-reel-cta:hover #home-reel-cta-text{transform:translate3d(-1.5em,0,0)}
#home-reel-cta:hover #home-reel-cta-dot{transform:translate3d(3em,0,0) scale(20);background:#fc5b34}
#home-reel-cta:hover #home-reel-cta-arrow{transform:translateZ(0)}
#home-reel-cta:hover #home-reel-cta-arrow svg{color:#fff}
}
@media (min-aspect-ratio: 21/9){
#home-reel-title{font-size:6.7vw}
#home-reel-content{grid-column:8 / span 3}
}
@media (max-width: 480px){
#home-reel-title{font-size:20vw}
}

/* ===== MK host-aanpassingen op de geporte lusion-reel ===== */
#home-reel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap,2vw);padding:calc(var(--base-padding-y,clamp(30px,4vw,50px)) + clamp(70px,9vh,120px)) var(--base-padding-x,max(5vw,40px)) var(--base-padding-y,clamp(30px,4vw,50px));position:relative;width:100%;font-size:clamp(.875rem,1vw,2rem);font-family:Aeonik,Arial,sans-serif;color:#0b0f14;}
#home-reel-title{font-weight:400;margin:0 0 .5em;}
#home-reel-desc{font-weight:400;}
#home-reel-cta{color:#0b0f14;text-decoration:none;}
#home-reel-video-container{aspect-ratio:16/9;background:linear-gradient(150deg,#fc5b34,#ff7a45 55%,#f73519);border-radius:14px;overflow:hidden;}
#home-reel-video{opacity:1!important;z-index:1;}
#home-reel-video-title{z-index:2;pointer-events:none;}
#home-reel-video-watch-btn{z-index:3;border:0;background:transparent;}
#home-reel-video-title .home-reel-video-title-word{display:inline-block;}
@media(max-width:812px){#home-reel{grid-template-columns:repeat(6,minmax(0,1fr));}}


/* Geport uit lusion about.css — about-who intro (titel + details), kleuren naar MK */
#about-who{position:relative;display:block;color:#fff;width:100vw;padding:0;padding-bottom:950vw;font-size:clamp(.875rem,1vw,1.75rem)}
#about-who-subsection-container{position:relative;width:350vw;height:calc(var(--vh, 1vh) * 100);will-change:transform}
#about-who-subsection-we-are,#about-who-subsection-details{margin-right:25vw}
.about-who-subsection{float:left;position:relative;display:block;width:100vw;height:100%;flex-grow:0;flex-shrink:0;white-space:normal;padding:var(--base-padding-y) var(--base-padding-x)}
#about-who-title-main{position:absolute;width:calc(100% - var(--base-padding-x) * 2);bottom:calc(var(--base-padding-y))}
#about-who-title-main-logo{width:100%}
#about-who-title-main-scroll{position:absolute;right:-.1em;font-size:1.75em;line-height:calc(var(--base-padding-y) * 1 - .2em);white-space:nowrap}
#about-who-title-left{position:absolute;bottom:calc(var(--base-padding-y));font-size:4vw}
#about-who-title-left-2{display:inline-block;margin-left:.075em;height:.71em;line-height:1em;visibility:hidden}
#about-who-title-left-2 svg{position:relative;float:left;height:100%}
#about-who-title-left-4{font-style:italic}
#about-who-title-left-4 span{display:inline-block}
#about-who-title-right{position:absolute;right:var(--base-padding-x);bottom:calc(var(--base-padding-y));text-align:right;font-size:4vw;font-style:italic}
#about-who-subsection-details{font-size:4vw}
#about-who-subsection-details .is-italic{font-style:italic}
#about-who-subsection-details br.is-mobile{display:none}
#about-who-desc-top{margin-top:calc(clamp(1rem,1vw,2rem) * 2 + var(--base-padding-y));width:80%}
#about-who-desc-top>span{display:inline}
#about-who-desc-top>span span{display:inline-block;margin-right:1ex}
#about-who-desc-bottom{text-align:right;position:absolute;bottom:var(--base-padding-y);right:var(--base-padding-x)}
#about-who-desc-bottom>span{display:inline}
#about-who-desc-bottom>span span{display:inline-block;margin-left:1ex}
@media (max-width: 812px){
#about-who{width:100%;height:auto;padding-bottom:calc(var(--vh, 1vh) * 1125);font-size:clamp(.95rem,1vw,1.75rem)}
#about-who-subsection-container{width:100%;height:calc(var(--vh, 1vh) * 100)}
#about-who-subsection-we-are,#about-who-subsection-details{margin-right:0}
.about-who-subsection{position:absolute;float:none;height:calc(var(--vh, 1vh) * 100)}
#about-who-title-main{bottom:calc(var(--base-padding-y) * 3)}
#about-who-title-main-scroll{right:50%;line-height:calc(var(--base-padding-y) * 3 - .15em);transform:translate(50%);font-size:4vw}
#about-who-title-left{position:relative;bottom:auto;top:var(--base-padding-y);margin-top:1em}
#about-who-title-left-2{visibility:visible}
#about-who-title-left-4 span{display:block}
#about-who-subsection-details{font-size:6vw}
#about-who-subsection-details br.is-desktop{display:none}
#about-who-subsection-details br.is-mobile{display:block}
}
@media (min-aspect-ratio: 21/9){
.about-who-subsection{font-size:1.25em}
#about-who-title-main-scroll{font-size:1.25em}
#about-who-title-left{font-size:2.7vw}
#about-who-title-right{font-size:2.7vw}
#about-who-subsection-details{font-size:2.7vw}
}
@media (max-width: 560px){
#about-who-title-left{font-size:8vw}
#about-who-title-right{font-size:8vw}
#about-who-subsection-details{font-size:8vw}
#about-who-desc-top{width:100%}
}


/* ===== MK host-aanpassingen op de geporte lusion about-who ===== */
.mk-who{position:relative;min-height:240vh;}
.mk-who__pin{position:sticky;top:0;height:100vh;overflow:hidden;}
.mk-who #about-who{position:relative;width:100%;height:100%;padding:0;padding-bottom:0!important;color:#0b0f14;font-size:clamp(.875rem,1vw,1.75rem);font-family:Aeonik,Arial,sans-serif;}
.mk-who .about-who-subsection{position:absolute;inset:0;float:none;width:100%;height:100%;padding:calc(var(--base-padding-y,clamp(30px,4vw,50px)) + 70px) var(--base-padding-x,max(5vw,40px)) var(--base-padding-y,clamp(30px,4vw,50px));}
.mk-who #about-who-title-left{left:var(--base-padding-x,max(5vw,40px));line-height:1.04;letter-spacing:-.02em;}
.mk-who #about-who-title-left>div{overflow:hidden;}
.mk-who #about-who-title-left-2 img{height:3.2vw;width:auto;display:block;margin:.4vw 0;}
.mk-who #about-who-title-main-logo{height:clamp(26px,2.4vw,40px);width:auto;}
.mk-who #about-who-title-main{display:flex;align-items:center;justify-content:space-between;}
.mk-who #about-who-title-main-scroll{font-family:IBMPlexMono,MKVMono,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(11,15,20,.5);}
.mk-who #about-who-title-right{line-height:1.06;}
.mk-who #about-who-desc-top,.mk-who #about-who-desc-bottom{font-size:4vw;line-height:1.05;letter-spacing:-.035em;}
.mk-who #about-who-desc-top .is-italic{font-style:italic;color:#fc5b34;}
.mk-who #about-who-desc-top span>span,.mk-who #about-who-desc-bottom span>span{display:inline-block;will-change:transform,opacity;}
.mk-who #about-who-desc-bottom{margin-top:1.2em;}
#about-who-subsection-details{visibility:hidden;}
@media(max-width:812px){
  .mk-who{min-height:auto;}
  .mk-who__pin{position:relative;height:auto;overflow:visible;}
  .mk-who .about-who-subsection{position:relative;inset:auto;height:auto;}
  #about-who-subsection-details{visibility:visible;}
  .mk-who #about-who-title-left,.mk-who #about-who-title-right{position:relative;left:auto;right:auto;bottom:auto;font-size:9vw;text-align:left;margin-top:1.2em;}
  .mk-who #about-who-title-left-2 img{height:7vw;}
  .mk-who #about-who-desc-top,.mk-who #about-who-desc-bottom{font-size:7.5vw;width:100%;}
}

/* nowrap zodat titelregels niet breken zoals lusion */
.mk-who #about-who-title-left>div,.mk-who .about-who-title-right-text{white-space:nowrap;}

/* Hogere specificiteit dan het oude platgeslagen about-who blok in option23.css */
@media(min-width:813px){
  .mk-who #about-who-title-left{position:absolute!important;bottom:var(--base-padding-y)!important;top:auto!important;margin-top:0!important;font-size:4vw!important;}
  .mk-who #about-who-title-right{position:absolute!important;right:var(--base-padding-x)!important;left:auto!important;bottom:var(--base-padding-y)!important;top:auto!important;text-align:right!important;font-size:4vw!important;font-style:italic!important;}
  .mk-who #about-who-title-main{position:absolute!important;bottom:auto!important;top:calc(var(--base-padding-y) + 60px)!important;left:var(--base-padding-x)!important;right:var(--base-padding-x)!important;width:auto!important;}
  .mk-who #about-who-desc-bottom{position:absolute!important;bottom:var(--base-padding-y)!important;right:var(--base-padding-x)!important;text-align:right!important;}
  .mk-who #about-who-desc-top{margin-top:0!important;position:absolute!important;top:calc(var(--base-padding-y) + 130px)!important;left:var(--base-padding-x)!important;width:80%!important;}
  .mk-who #about-who-title-left-2{visibility:visible!important;}
}

/* Basis-hoogtes ook verharden tegen het option23-blob */
.mk-who .mk-who__pin{position:sticky!important;top:0!important;height:100vh!important;overflow:hidden!important;}
.mk-who #about-who{position:relative!important;width:100%!important;height:100%!important;padding:0!important;color:#0b0f14!important;}
.mk-who .about-who-subsection,.mk-who #about-who-subsection-we-are,.mk-who #about-who-subsection-details{position:absolute!important;inset:0!important;float:none!important;width:100%!important;height:100%!important;margin:0!important;padding:calc(var(--base-padding-y) + 70px) var(--base-padding-x) var(--base-padding-y)!important;}
@media(max-width:812px){
  .mk-who .mk-who__pin{position:relative!important;height:auto!important;overflow:visible!important;}
  .mk-who #about-who{height:auto!important;}
  .mk-who .about-who-subsection,.mk-who #about-who-subsection-we-are,.mk-who #about-who-subsection-details{position:relative!important;inset:auto!important;height:auto!important;}
}

/* Thumb: duotone in ons oranje (zoals lusion's blauwe duotone-thumb) */
#home-reel-thumb{position:relative;border-radius:12px;}
#home-reel-thumb img,#home-reel-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none;display:block;}
/* schone videokaart net als de home hero-reel — geen oranje duotone overlays */
/* Overlay-tint op de inline showreel: ons oranje in plaats van lusion-blauw */
#home-reel-video-placeholder::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(252,91,52,.28),rgba(247,53,25,.18));mix-blend-mode:multiply;pointer-events:none;z-index:2;}

/* Layout-flow rechttrekken: lusion's height:0/-10em thumb-truc en de 100vh
   scroll-runway onder de video werken alleen met hun WebGL-runtime. */
.mk-subpage #home-reel-thumb-wrapper{height:auto!important;top:0!important;width:100%!important;margin-top:clamp(30px,4vw,60px)!important;}
.mk-subpage #home-reel-thumb{position:relative!important;height:0!important;padding-top:62%!important;border-radius:12px!important;overflow:hidden!important;}
.mk-subpage #home-reel-container{grid-column:1/13!important;margin:clamp(20px,3vw,44px) 0 0!important;}
.mk-subpage #home-reel-content{align-self:start!important;}

/* Showreel morpht van klein naar groot terwijl je scrolt (lusion home reel):
   de container krijgt een scroll-runway, de inner pint sticky. De curl/warp-
   vervorming zelf wordt door de WebGL reel-morph (mk-reel-morph.js) gerenderd. */
@media(min-width:813px){
  .mk-subpage #home-reel-container{padding-bottom:0!important;min-height:220vh!important;}
  .mk-subpage #home-reel-container-inner{position:sticky!important;top:0!important;height:100vh!important;display:grid!important;place-items:center!important;width:100%!important;}
  .mk-subpage #home-reel-video-container{width:100%!important;will-change:transform;transform-origin:50% 50%;}
}
@media(max-width:812px){
  .mk-subpage #home-reel-container{padding-bottom:0!important;min-height:auto!important;}
  /* Mobiel: thumb BOVEN content (niet ernaast → overlap) */
  .mk-subpage #home-reel-thumb-wrapper{grid-column:1/-1!important;grid-row:2!important;margin-top:1.2em!important;margin-bottom:1.5em!important;width:100%!important;}
  .mk-subpage #home-reel-content{grid-column:1/-1!important;grid-row:3!important;padding-top:0!important;}
  .mk-subpage #home-reel-container{grid-row:4!important;}
  /* Scroll-morph sticky uitschakelen op mobiel: gewoon inline video */
  .mk-subpage #home-reel-container-inner{position:relative!important;height:auto!important;display:block!important;}
  .mk-subpage #home-reel-video-container{transform:none!important;width:100%!important;}
  /* Drawpath-lijn ook op mobiel — iets dunner en lager zodat hij de
     compacte hero-titel niet overstemt */
  .mk-subpage .mk-reel-line{display:block!important;height:min(90vh,720px)!important;}
  /* De viewBox (1600x2400) wordt op mobiel naar ±375x860 geperst, dus een
     stroke van 15 user-units kwam er als 3–5 schermpixels uit — een haarlijn,
     terwijl hij op desktop ±45px is. vector-effect rekent de dikte in
     schermpixels, waardoor mobiel dezelfde zwaarte krijgt als desktop. */
  .mk-subpage .mk-reel-line path{
    stroke-width:28px!important;
    vector-effect:non-scaling-stroke!important;
  }
}

/* Over-ons hero: titel iets groter + hoger (alle schermbreedtes) */
.mk-subpage #home-reel{padding-top:0px!important;}
.mk-subpage #home-reel-title{font-size:clamp(52px,8.5vw,128px)!important;margin-top:0!important;margin-bottom:.5em!important;}
/* Mobiel: compacte font-size zodat woorden op één rij passen (geen per-woord wrap) */
@media(max-width:812px){
  .mk-subpage #home-reel-title{font-size:clamp(28px,9.2vw,48px)!important;line-height:1.12!important;}
}

/* Desktop: thumb LINKS naast content in dezelfde grid-rij (span 4 = iets kleiner) */
@media(min-width:813px){
  .mk-subpage #home-reel-thumb-wrapper{margin-top:0!important;grid-row:2!important;align-self:start!important;grid-column:1 / span 4!important;}
  .mk-subpage #home-reel-content{align-self:start!important;grid-row:2!important;}
  .mk-subpage #home-reel-container{grid-row:3!important;}
}



/* ============================================================================
   Over-ons hero + showreel exact volgens de Lusion-template (#home-reel).
   De eerdere subpage-overrides bouwden een eigen layout (thumb naast de
   content); Lusion zet de thumb juist met height:0 + top:-10em onder de titel
   door. Die truc is pure CSS (aspect-ratio via padding-top) en heeft geen
   WebGL nodig. Gescoped op .mk-page-about zodat andere pagina's ongemoeid
   blijven. Zie ref/index.html + about.CNa9RfUh.css.
   ========================================================================== */

/* Lusion heeft in deze sectie wel degelijk een lijn die er doorheen loopt —
   bij hen als WebGL-model (assets/models/lines/line_reel.buf). Onze SVG-
   drawpath is daar de DOM-variant van, in onze eigen kleur. Hij hoort ACHTER
   alles: eerder lag hij over de titel en de thumb heen. */
.mk-page-about .mk-reel-line{
  display:block!important;
  opacity:1!important;
  z-index:0!important;
  /* Loopt door tot achter de showreel-video i.p.v. te stoppen onder de hero. */
  height:100%!important;
}
/* Startstaat in CSS, niet pas in JS: dankzij pathLength="1" op het pad kan de
   lijn ongetekend beginnen vanaf de allereerste paint. Zonder dit stond hij
   er even volledig, verdween hij en tekende hij pas daarna in. */
/* Bewust ZONDER !important: GSAP animeert deze twee inline, en !important zou
   die tween blokkeren (de lijn bleef dan permanent ongetekend staan). */
.mk-page-about .mk-reel-line path{
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
}
/* Alle inhoud van de reel boven de lijn tillen. */
.mk-page-about #home-reel-title,
.mk-page-about #home-reel-content,
.mk-page-about #home-reel-thumb-wrapper,
.mk-page-about #home-reel-container{
  position:relative!important;
  z-index:1!important;
}

/* Titel: Lusion-maat, en elke regel op een lijn. Cruciaal, want
   #home-reel-title-inner>div heeft overflow:hidden voor de line-reveal —
   een regel die afbreekt wordt daardoor half afgeknipt. */
.mk-page-about #home-reel-title{
  font-size:clamp(40px,8.2vw,116px)!important;
  line-height:1!important;
  letter-spacing:-.02em!important;
  margin-top:1em!important;
  margin-bottom:.5em!important;
}
.mk-page-about #home-reel-title-line-1,
.mk-page-about #home-reel-title-line-2{
  white-space:nowrap!important;
}
/* Lusion springt regel 1 twee kolommen in ("Bold Ideas," is kort). Onze regel
   is langer, dus met dezelfde inspringing valt de laatste letter buiten de
   clip. Een kolom inspringing houdt het effect en laat de regel wel passen. */
.mk-page-about #home-reel-title-line-1{
  padding-left:calc(var(--grid-space) + var(--grid-gap))!important;
}

@media(min-width:813px){
  /* Thumb terug naar de Lusion-positie: 5 kolommen breed, 16:9 en omhoog
     geschoven zodat hij onder de titel doorloopt. */
  .mk-page-about #home-reel-thumb-wrapper{
    grid-column:1 / span 5!important;
    grid-row:2!important;
    /* Lusion gebruikt -10em; hun regel 2 is korter, bij ons legde dat de thumb
       over de titel heen. -2em houdt het opgetilde effect zonder overlap. */
    height:0!important;
    top:-2em!important;
    margin-top:0!important;
    width:calc(100% + var(--grid-gap) * 2)!important;
  }
  .mk-page-about #home-reel-thumb{
    height:0!important;
    padding-top:56.25%!important;
    overflow:hidden!important;
  }
  .mk-page-about #home-reel-content{
    grid-column:7 / span 6!important;
    grid-row:2!important;
    align-self:start!important;
  }
}

@media(max-width:812px){
  /* Mobiel volgt Lusion: geen negatieve offset, alles onder elkaar. */
  .mk-page-about #home-reel-title{font-size:clamp(30px,11.4vw,60px)!important;}
  .mk-page-about #home-reel-title-inner>div{overflow:visible!important;}
  .mk-page-about #home-reel-title-line-1{padding-left:0!important;}
  /* Mobiel is de clip uit (net als bij Lusion), dus mag een lange regel gewoon
     doorlopen naar de volgende — nowrap zou hem hier buiten beeld duwen. */
  .mk-page-about #home-reel-title-line-1,
  .mk-page-about #home-reel-title-line-2{white-space:normal!important;}
  .mk-page-about #home-reel-thumb-wrapper{top:0!important;height:auto!important;}
}