/* About hero creative studies — query-gated draft variants only. */
body.mev-about-logo-hero--color-flow .mev-page-widescreen__media,
body.mev-about-logo-hero--photo-veil .mev-page-widescreen__media,
body.mev-about-logo-hero--diptych .mev-page-widescreen__media,
body.mev-about-logo-hero--triptych .mev-page-widescreen__media{
 isolation:isolate!important;overflow:hidden!important
}
body.mev-about-logo-hero--color-flow .mev-page-widescreen__title,
body.mev-about-logo-hero--photo-veil .mev-page-widescreen__title,
body.mev-about-logo-hero--diptych .mev-page-widescreen__title,
body.mev-about-logo-hero--triptych .mev-page-widescreen__title{z-index:7!important}

/* D — palette vivante. */
body.mev-about-logo-hero--color-flow .mev-page-widescreen,
body.mev-about-logo-hero--color-flow .mev-page-widescreen__media{background:#EFF0E9!important}
body.mev-about-logo-hero--color-flow .mev-page-widescreen__media::before{
 content:"";position:absolute;inset:0;z-index:0;background:#EFF0E9;
 animation:mevAboutNeutralFlow 8s ease-in-out infinite
}
body.mev-about-logo-hero--color-flow .mev-page-widescreen__media img{
 z-index:2!important;width:min(46vw,620px)!important;
 animation:mevAboutCreativeBreath 1250ms cubic-bezier(.22,.61,.36,1) 120ms both!important
}

/* E — photograph as a quiet material behind the institutional mark. */
body.mev-about-logo-hero--photo-veil .mev-page-widescreen,
body.mev-about-logo-hero--photo-veil .mev-page-widescreen__media{background:#E9E9E2!important}
body.mev-about-logo-hero--photo-veil .mev-page-widescreen__media img{
 left:0!important;top:0!important;width:100%!important;height:100%!important;
 max-width:none!important;object-fit:cover!important;object-position:50% 42%!important;
 transform:none!important;filter:grayscale(.72) saturate(.45) contrast(.84)!important;
 opacity:.34!important;animation:mevAboutPhotoSettleSoft 1500ms ease-out both!important
}
body.mev-about-logo-hero--photo-veil .mev-page-widescreen__media::before{
 content:"";position:absolute;inset:0;z-index:1;
 background:linear-gradient(180deg,rgba(239,240,233,.34),rgba(239,240,233,.7))
}
body.mev-about-logo-hero--photo-veil .mev-page-widescreen__media::after{
 content:"";position:absolute;z-index:3;left:50%;top:44%;width:min(44vw,600px);height:42%;
 background:url("https://musiceyeview.com/wp-content/uploads/2026/08/mev-logo-music-eye-view-typo-rouge.svg") center/contain no-repeat;
 transform:translate(-50%,-50%);animation:mevAboutMarkIn 1200ms cubic-bezier(.22,.61,.36,1) 260ms both
}

/* F — fixed diptych: image left, identity right. */
body.mev-about-logo-hero--diptych .mev-page-widescreen,
body.mev-about-logo-hero--diptych .mev-page-widescreen__media{background:#F1EFE8!important}
body.mev-about-logo-hero--diptych .mev-page-widescreen__media img{
 left:0!important;top:0!important;width:44%!important;height:100%!important;
 max-width:none!important;object-fit:cover!important;object-position:50% 45%!important;
 transform:none!important;filter:grayscale(.34) saturate(.72) contrast(.92)!important;
 opacity:.9!important;animation:mevAboutPhotoSettleStrong 1400ms ease-out both!important
}
body.mev-about-logo-hero--diptych .mev-page-widescreen__media::before{
 content:"";position:absolute;z-index:2;left:0;top:0;width:44%;height:100%;
 background:url("https://musiceyeview.com/wp-content/uploads/2026/09/mev-pascale-perruchot-guitare-1.webp") center 45%/cover no-repeat;
 border-right:1px solid rgba(17,17,17,.14);opacity:0;
 animation:mevAboutPortraitSwap 8s ease-in-out infinite
}
body.mev-about-logo-hero--diptych .mev-page-widescreen__media::after{
 content:"";position:absolute;z-index:3;left:72%;top:43%;width:min(43vw,560px);height:40%;
 background:url("https://musiceyeview.com/wp-content/uploads/2026/08/mev-logo-music-eye-view-typo-rouge.svg") center/contain no-repeat;
 transform:translate(-50%,-50%);animation:mevAboutMarkIn 1200ms cubic-bezier(.22,.61,.36,1) 260ms both
}
body.mev-about-logo-hero--diptych .mev-page-widescreen__title{left:72%!important;top:72%!important;width:42%!important}
body.mev-about-logo-hero--diptych .mev-page-widescreen.is-name-visible .mev-page-widescreen__title{transform:translate(-50%,-50%)!important}

/* G — three photographs become one panoramic material. */
body.mev-about-logo-hero--triptych .mev-page-widescreen,
body.mev-about-logo-hero--triptych .mev-page-widescreen__media{background:#E7E6DF!important}
body.mev-about-logo-hero--triptych .mev-page-widescreen__media::before{
 content:"";position:absolute;inset:0;z-index:0;opacity:.34;
 background-image:url("https://musiceyeview.com/wp-content/uploads/2026/09/mev-eric-perruchot-guitare-1.webp"),url("https://musiceyeview.com/wp-content/uploads/2026/09/mev-pascale-eric-perruchot-fondateurs-1.webp"),url("https://musiceyeview.com/wp-content/uploads/2026/09/mev-pascale-perruchot-guitare-1.webp");
 background-repeat:no-repeat,no-repeat,no-repeat;
 background-size:33.333% 100%,33.333% 100%,33.333% 100%;
 background-position:left center,center center,right center;
 animation:mevAboutTriptychIn 1600ms ease-out both
}
body.mev-about-logo-hero--triptych .mev-page-widescreen__media::after{
 content:"";position:absolute;inset:0;z-index:1;background:rgba(239,240,233,.58)
}
body.mev-about-logo-hero--triptych .mev-page-widescreen__media img{
 z-index:3!important;width:min(42vw,570px)!important;
 animation:mevAboutCreativeBreath 1300ms cubic-bezier(.22,.61,.36,1) 280ms both!important
}

@keyframes mevAboutNeutralFlow{
 0%,100%{background:#EFF0E9}
 25%{background:#F5F1E9}
 50%{background:#E6E5DE}
 75%{background:#ECEDE8}
}
@keyframes mevAboutCreativeBreath{
 0%{opacity:0;filter:blur(4px);transform:translate(-50%,-50%) scale(.985)}
 100%{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1)}
}
@keyframes mevAboutPhotoSettleSoft{
 0%{opacity:0;filter:grayscale(1) saturate(.3) contrast(.78);transform:scale(1.025)}
 100%{opacity:.34;transform:scale(1)}
}
@keyframes mevAboutPhotoSettleStrong{
 0%{opacity:0;filter:grayscale(1) saturate(.3) contrast(.78);transform:scale(1.025)}
 100%{opacity:.9;transform:scale(1)}
}
@keyframes mevAboutMarkIn{
 0%{opacity:0;filter:blur(4px);transform:translate(-50%,-50%) scale(.98)}
 100%{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1)}
}
@keyframes mevAboutPortraitSwap{
 0%,38%,100%{opacity:0}
 50%,88%{opacity:.9}
}
@keyframes mevAboutTriptychIn{
 0%{opacity:0;filter:grayscale(1)}
 100%{opacity:.34;filter:grayscale(.35)}
}

@media(max-width:900px){
 body.mev-about-logo-hero--color-flow .mev-page-widescreen__media img,
 body.mev-about-logo-hero--triptych .mev-page-widescreen__media img{
  left:50%!important;top:42%!important;width:84vw!important;height:auto!important;transform:translate(-50%,-50%)!important
 }
 body.mev-about-logo-hero--photo-veil .mev-page-widescreen__media img{
  left:0!important;top:0!important;width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:50% 38%!important;transform:none!important
 }
 body.mev-about-logo-hero--photo-veil .mev-page-widescreen__media::after{left:50%;top:43%;width:84vw;height:34%}
 body.mev-about-logo-hero--diptych .mev-page-widescreen__media img{
  left:0!important;top:0!important;width:100%!important;height:45%!important;
  object-fit:cover!important;object-position:50% 42%!important;transform:none!important;opacity:.66!important
 }
 body.mev-about-logo-hero--diptych .mev-page-widescreen__media::before{
  left:0;top:0;width:100%;height:45%;background-position:center 42%;border-right:0;border-bottom:1px solid rgba(17,17,17,.14)
 }
 body.mev-about-logo-hero--diptych .mev-page-widescreen__media::after{left:50%;top:63%;width:84vw;height:28%}
 body.mev-about-logo-hero--diptych .mev-page-widescreen__title{left:50%!important;top:82%!important;width:calc(100vw - 40px)!important}
 body.mev-about-logo-hero--triptych .mev-page-widescreen__media::before{
  background-size:100% 33.333%,100% 33.333%,100% 33.333%;background-position:center top,center center,center bottom
 }
}

@media(prefers-reduced-motion:reduce){
 body.mev-about-logo-hero--color-flow .mev-page-widescreen__media::before,
 body.mev-about-logo-hero--color-flow .mev-page-widescreen__media img,
 body.mev-about-logo-hero--photo-veil .mev-page-widescreen__media img,
 body.mev-about-logo-hero--photo-veil .mev-page-widescreen__media::after,
 body.mev-about-logo-hero--diptych .mev-page-widescreen__media img,
 body.mev-about-logo-hero--diptych .mev-page-widescreen__media::before,
 body.mev-about-logo-hero--diptych .mev-page-widescreen__media::after,
 body.mev-about-logo-hero--triptych .mev-page-widescreen__media::before,
 body.mev-about-logo-hero--triptych .mev-page-widescreen__media img{animation:none!important}
}

/* H–K — true widescreen studies: photography stays the full hero surface. */
body:is(.mev-about-logo-hero--wide-center,.mev-about-logo-hero--wide-edge,.mev-about-logo-hero--wide-watermark,.mev-about-logo-hero--wide-dissolve) .mev-page-widescreen,
body:is(.mev-about-logo-hero--wide-center,.mev-about-logo-hero--wide-edge,.mev-about-logo-hero--wide-watermark,.mev-about-logo-hero--wide-dissolve) .mev-page-widescreen__media{
 background:#111!important
}
body:is(.mev-about-logo-hero--wide-center,.mev-about-logo-hero--wide-edge,.mev-about-logo-hero--wide-watermark,.mev-about-logo-hero--wide-dissolve) .mev-page-widescreen__media{
 isolation:isolate!important;overflow:hidden!important
}
body:is(.mev-about-logo-hero--wide-center,.mev-about-logo-hero--wide-edge,.mev-about-logo-hero--wide-watermark,.mev-about-logo-hero--wide-dissolve) .mev-page-widescreen__media img{
 position:absolute!important;z-index:0!important;left:0!important;top:0!important;
 width:100%!important;height:100%!important;max-width:none!important;
 object-fit:cover!important;object-position:50% 50%!important;
 transform:none!important;filter:none!important;opacity:1!important;
 animation:mevAboutWidePhotoIn 1500ms cubic-bezier(.22,.61,.36,1) both!important
}
body:is(.mev-about-logo-hero--wide-center,.mev-about-logo-hero--wide-edge,.mev-about-logo-hero--wide-watermark,.mev-about-logo-hero--wide-dissolve) .mev-page-widescreen__media::after{
 content:"";position:absolute;z-index:3;pointer-events:none;
 background:url("https://musiceyeview.com/wp-content/uploads/2026/08/mev-logo-music-eye-view-typo-rouge.svg") center/contain no-repeat;
 filter:drop-shadow(0 0 18px rgba(255,255,255,.72));
 animation:mevAboutWideLogoIn 1250ms cubic-bezier(.22,.61,.36,1) 240ms both
}
body:is(.mev-about-logo-hero--wide-center,.mev-about-logo-hero--wide-edge,.mev-about-logo-hero--wide-watermark,.mev-about-logo-hero--wide-dissolve) .mev-page-widescreen__veil{
 z-index:2!important;background:linear-gradient(180deg,rgba(0,0,0,.24) 0%,rgba(0,0,0,.04) 42%,rgba(0,0,0,.34) 100%)!important
}
body:is(.mev-about-logo-hero--wide-center,.mev-about-logo-hero--wide-edge,.mev-about-logo-hero--wide-watermark,.mev-about-logo-hero--wide-dissolve) .mev-page-widescreen__title{
 z-index:6!important;top:77%!important;width:auto!important;color:#fff!important;
 font-size:clamp(22px,1.85vw,30px)!important;letter-spacing:-.015em!important;
 text-shadow:0 1px 18px rgba(0,0,0,.5)!important
}
html body:is(.mev-about-logo-hero--wide-center,.mev-about-logo-hero--wide-edge,.mev-about-logo-hero--wide-watermark,.mev-about-logo-hero--wide-dissolve) #site-navigation .main-nav ul li a,
html body:is(.mev-about-logo-hero--wide-center,.mev-about-logo-hero--wide-edge,.mev-about-logo-hero--wide-watermark,.mev-about-logo-hero--wide-dissolve) #site-navigation .menu-bar-items a,
html body:is(.mev-about-logo-hero--wide-center,.mev-about-logo-hero--wide-edge,.mev-about-logo-hero--wide-watermark,.mev-about-logo-hero--wide-dissolve) #site-navigation .mev-g-utilities a,
html body:is(.mev-about-logo-hero--wide-center,.mev-about-logo-hero--wide-edge,.mev-about-logo-hero--wide-watermark,.mev-about-logo-hero--wide-dissolve) #site-navigation .mev-menu-lab-language,
html body:is(.mev-about-logo-hero--wide-center,.mev-about-logo-hero--wide-edge,.mev-about-logo-hero--wide-watermark,.mev-about-logo-hero--wide-dissolve) #site-navigation .mev-menu-lab-language span{
 color:#fff!important;text-shadow:0 1px 14px rgba(0,0,0,.5)!important
}
html body:is(.mev-about-logo-hero--wide-center,.mev-about-logo-hero--wide-edge,.mev-about-logo-hero--wide-watermark,.mev-about-logo-hero--wide-dissolve) #site-navigation .main-nav ul li.current-menu-item>a,
html body:is(.mev-about-logo-hero--wide-center,.mev-about-logo-hero--wide-edge,.mev-about-logo-hero--wide-watermark,.mev-about-logo-hero--wide-dissolve) #site-navigation .main-nav ul li>a[aria-current="page"],
html body:is(.mev-about-logo-hero--wide-center,.mev-about-logo-hero--wide-edge,.mev-about-logo-hero--wide-watermark,.mev-about-logo-hero--wide-dissolve) #site-navigation .mev-menu-lab-language__current{
 color:#FD0600!important
}
html body:is(.mev-about-logo-hero--wide-center,.mev-about-logo-hero--wide-edge,.mev-about-logo-hero--wide-watermark,.mev-about-logo-hero--wide-dissolve) #site-navigation .mev-g-brand__hero{opacity:1!important}
html body:is(.mev-about-logo-hero--wide-center,.mev-about-logo-hero--wide-edge,.mev-about-logo-hero--wide-watermark,.mev-about-logo-hero--wide-dissolve) #site-navigation .mev-g-brand__compact{opacity:0!important}
html body:is(.mev-about-logo-hero--wide-center,.mev-about-logo-hero--wide-edge,.mev-about-logo-hero--wide-watermark,.mev-about-logo-hero--wide-dissolve) .mev-g-scroll-cue .mev-g-scroll-cue__label{
 color:#fff!important;text-shadow:0 1px 12px rgba(0,0,0,.55)!important
}
html body:is(.mev-about-logo-hero--wide-center,.mev-about-logo-hero--wide-edge,.mev-about-logo-hero--wide-watermark,.mev-about-logo-hero--wide-dissolve) .mev-g-scroll-cue .mev-g-scroll-cue__line{
 background:#fff!important;border-color:#fff!important
}

/* H — centered signature, the calmest composition. */
body.mev-about-logo-hero--wide-center .mev-page-widescreen__media img{object-position:50% 46%!important}
body.mev-about-logo-hero--wide-center .mev-page-widescreen__media::after{
 left:50%;top:44%;width:min(39vw,540px);height:31%;transform:translate(-50%,-50%)
}

/* I — an editorial edge signature that leaves the subject breathing. */
body.mev-about-logo-hero--wide-edge .mev-page-widescreen__media img{object-position:50% 48%!important}
body.mev-about-logo-hero--wide-edge .mev-page-widescreen__media::after{
 left:7vw;top:59%;width:min(31vw,430px);height:27%;transform:translateY(-50%);
 background-position:left center;animation-name:mevAboutWideEdgeIn
}
body.mev-about-logo-hero--wide-edge .mev-page-widescreen__title{
 left:7vw!important;top:79%!important;width:min(420px,34vw)!important;text-align:left!important
}
body.mev-about-logo-hero--wide-edge .mev-page-widescreen.is-name-visible .mev-page-widescreen__title{
 transform:translateY(-50%)!important
}

/* J — one large translucent institutional watermark over the photograph. */
body.mev-about-logo-hero--wide-watermark .mev-page-widescreen__media img{object-position:50% 43%!important}
body.mev-about-logo-hero--wide-watermark .mev-page-widescreen__media::after{
 left:50%;top:47%;width:min(56vw,820px);height:44%;transform:translate(-50%,-50%);
 opacity:.58;filter:drop-shadow(0 0 12px rgba(255,255,255,.38));
 animation-name:mevAboutWideWatermarkIn
}

/* K — slow photographic dissolve, with the identity kept perfectly still. */
body.mev-about-logo-hero--wide-dissolve .mev-page-widescreen__media::before{
 content:"";position:absolute;z-index:1;inset:-1%;
 background:url("https://musiceyeview.com/wp-content/uploads/2026/09/DJ-performing-in-a-haze-of-warm-light.webp") center 48%/cover no-repeat;
 opacity:0;animation:mevAboutWideDissolve 12s ease-in-out 2.2s infinite
}
body.mev-about-logo-hero--wide-dissolve .mev-page-widescreen__media::after{
 left:50%;top:44%;width:min(37vw,510px);height:30%;transform:translate(-50%,-50%)
}

@keyframes mevAboutWidePhotoIn{
 0%{opacity:0;transform:scale(1.025)}
 100%{opacity:1;transform:scale(1)}
}
@keyframes mevAboutWideLogoIn{
 0%{opacity:0;filter:blur(5px) drop-shadow(0 0 26px rgba(255,255,255,0));transform:translate(-50%,-50%) scale(.975)}
 100%{opacity:1;filter:blur(0) drop-shadow(0 0 18px rgba(255,255,255,.72));transform:translate(-50%,-50%) scale(1)}
}
@keyframes mevAboutWideEdgeIn{
 0%{opacity:0;filter:blur(5px) drop-shadow(0 0 26px rgba(255,255,255,0));transform:translateY(-50%) scale(.975)}
 100%{opacity:1;filter:blur(0) drop-shadow(0 0 18px rgba(255,255,255,.72));transform:translateY(-50%) scale(1)}
}
@keyframes mevAboutWideWatermarkIn{
 0%{opacity:0;filter:blur(5px) drop-shadow(0 0 20px rgba(255,255,255,0));transform:translate(-50%,-50%) scale(.985)}
 100%{opacity:.58;filter:blur(0) drop-shadow(0 0 12px rgba(255,255,255,.38));transform:translate(-50%,-50%) scale(1)}
}
@keyframes mevAboutWideDissolve{
 0%,38%,100%{opacity:0}
 50%,88%{opacity:1}
}

@media(max-width:900px){
 body:is(.mev-about-logo-hero--wide-center,.mev-about-logo-hero--wide-edge,.mev-about-logo-hero--wide-watermark,.mev-about-logo-hero--wide-dissolve) .mev-page-widescreen__media img{
  left:0!important;top:0!important;width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:50% 50%!important;transform:none!important
 }
 body:is(.mev-about-logo-hero--wide-center,.mev-about-logo-hero--wide-edge,.mev-about-logo-hero--wide-dissolve) .mev-page-widescreen__media::after{
  left:50%;top:43%;width:78vw;height:26%;transform:translate(-50%,-50%);background-position:center
 }
 body.mev-about-logo-hero--wide-edge .mev-page-widescreen__media::after{animation-name:mevAboutWideLogoIn}
 body.mev-about-logo-hero--wide-watermark .mev-page-widescreen__media::after{
  left:50%;top:45%;width:92vw;height:38%;transform:translate(-50%,-50%)
 }
 body.mev-about-logo-hero--wide-edge .mev-page-widescreen__title,
 body:is(.mev-about-logo-hero--wide-center,.mev-about-logo-hero--wide-edge,.mev-about-logo-hero--wide-watermark,.mev-about-logo-hero--wide-dissolve) .mev-page-widescreen__title{
  left:50%!important;top:72%!important;width:calc(100vw - 40px)!important;
  font-size:clamp(22px,6.4vw,30px)!important;text-align:center!important
 }
 body.mev-about-logo-hero--wide-edge .mev-page-widescreen.is-name-visible .mev-page-widescreen__title{
  transform:translate(-50%,-50%)!important
 }
}

@media(prefers-reduced-motion:reduce){
 body:is(.mev-about-logo-hero--wide-center,.mev-about-logo-hero--wide-edge,.mev-about-logo-hero--wide-watermark,.mev-about-logo-hero--wide-dissolve) .mev-page-widescreen__media img,
 body:is(.mev-about-logo-hero--wide-center,.mev-about-logo-hero--wide-edge,.mev-about-logo-hero--wide-watermark,.mev-about-logo-hero--wide-dissolve) .mev-page-widescreen__media::after,
 body.mev-about-logo-hero--wide-dissolve .mev-page-widescreen__media::before{animation:none!important}
 body.mev-about-logo-hero--wide-dissolve .mev-page-widescreen__media::before{opacity:0!important}
}