/* ===== Aflex Hero module ===== */
.aflex-hero{
  --brand:#008BC0; --brand-d:#0080b3; --ink:#1f2d3d; --muted:#5a6470;
  --hero-h:600px; --slant:16%; --anim:.62s cubic-bezier(.5,0,.2,1);
  position:relative;background:#fff;overflow:hidden;
}
.aflex-hero *{box-sizing:border-box;}
.aflex-hero .hero-inner{display:flex;align-items:stretch;min-height:var(--hero-h);
  /* max-width:1600px; */
  margin:0 auto;}

/* left content */
.aflex-hero .hero-content{
  flex:0 0 39%;display:flex;align-items:center;
  padding:48px 1.5vw 48px 5vw;position:relative;z-index:5;
  transition:transform var(--anim),opacity .45s ease;
}
.aflex-hero .hero-content__inner{max-width:540px;}
.aflex-hero h1{
  font-size:clamp(28px,2.9vw,44px);line-height:1.1;font-weight:800;
  margin:0 0 .5em;letter-spacing:-.01em;color:var(--ink);
}
.aflex-hero .hero-copy p{font-size:20px;line-height:1.5;color:var(--muted);margin:0 0 1em;}
.aflex-hero .hero-copy p:last-child{margin-bottom:1.5em;}
.aflex-hero .hero-copy strong{color:var(--brand-d);font-weight:700;}

.aflex-hero .award{display:flex;align-items:center;gap:16px;text-decoration:none;margin-bottom:1.6em;max-width:420px;}
.aflex-hero .award img{width:72px;height:auto;flex:none;}
.aflex-hero .award span{font-weight:700;color:var(--brand-d);line-height:1.25;font-size:15px;}

.aflex-hero .badges{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.aflex-hero .badges img{height:52px;width:auto;}

/* right media */
.aflex-hero .hero-media{
  position:relative;flex:1 1 auto;overflow:hidden;background:#0b1118;
}
.aflex-hero .hero-media .loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.aflex-hero .motif{position:absolute;top:0;left:-2%;height:100%;width:auto;pointer-events:none;z-index:3;}
.aflex-hero .motif-white{fill:#fff;}               /* the AFLEX "A" point — white, merges into content, no shadow = no dotted gap */
.aflex-hero .motif-blue{fill:#0488BF;fill-opacity:.34;}

.aflex-hero .play-btn{
  position:absolute;z-index:6;top:50%;left:60%;transform:translate(-50%,-50%);
  width:84px;height:84px;border-radius:50%;border:0;cursor:pointer;
  background:var(--brand);color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .2s ease,background .2s ease;
}
.aflex-hero .play-btn svg{width:34px;height:34px;fill:#fff;margin-left:4px;}
.aflex-hero .play-btn::after{content:"";position:absolute;inset:-10px;border-radius:50%;
  border:2px solid rgba(255,255,255,.6);animation:aflexPulse 2.4s ease-out infinite;}
.aflex-hero .play-btn:hover{transform:translate(-50%,-50%) scale(1.06);background:var(--brand-d);}
@keyframes aflexPulse{0%{transform:scale(.85);opacity:.7}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}

/* full video stage */
.aflex-hero .hero-fullvideo{
  position:absolute;inset:0;z-index:20;background:#070d13;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity var(--anim);
}
.aflex-hero .hero-fullvideo .full{width:100%;height:100%;object-fit:contain;}
.aflex-hero .close-btn{
  position:absolute;top:18px;right:18px;z-index:21;width:46px;height:46px;border-radius:50%;
  border:0;cursor:pointer;background:rgba(255,255,255,.14);display:grid;place-items:center;
  transition:background .2s ease,transform .2s ease;
}
.aflex-hero .close-btn svg{width:22px;height:22px;stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round;}
.aflex-hero .close-btn:hover{background:rgba(255,255,255,.28);transform:scale(1.08);}

/* playing state */
.aflex-hero.is-playing .hero-content{transform:translateX(-128%);opacity:0;}
.aflex-hero.is-playing .play-btn{opacity:0;pointer-events:none;}
.aflex-hero.is-playing .hero-fullvideo{opacity:1;pointer-events:auto;}

/* responsive */
@media(max-width:860px){
  .aflex-hero .hero-inner{flex-direction:column;}
  .aflex-hero .hero-copy p{font-size:18px;line-height:1.4;}
  .aflex-hero .hero-content{flex:none;width:100%;padding:40px 6vw 28px;}
  .aflex-hero .hero-content__inner{max-width:none;}
  .aflex-hero .hero-media{width:100%;min-height:300px;}
  /* force the motif to span the full media height on mobile (was bottom-anchored / part-height → broke on small screens) */
  .aflex-hero .motif{left:-2%;top:0;bottom:auto;height:100%;width:auto;}
  .aflex-hero .play-btn{left:50%;}
  .aflex-hero.is-playing .hero-content{transform:translateY(-40px);}
  /* badges stay on a single line and shrink to fit instead of wrapping */
  .aflex-hero .badges{flex-wrap:nowrap;gap:8px;}
  .aflex-hero .badges img{flex:1 1 0;min-width:0;width:100%;height:auto;max-height:52px;object-fit:contain;}
}

/* very wide screens: centre the hero content column */
@media(min-width:1800px){
  .aflex-hero .hero-content{justify-content:center;}
}