:root{--red:#F23450;--bg:#0D0E19;--card:#13152A;--white:#E8F1FB;--dim:rgba(232,241,251,.5);--line:rgba(232,241,251,.1);--oct:'TTO',sans-serif;--ibm:'IBM Plex Sans',sans-serif;}

.s5{padding:120px 0 0;}

.s5-header{
  display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;gap:20px;
  padding-bottom:clamp(20px,2.5vw,32px);
  margin-bottom:clamp(36px,4.5vw,56px);
}
.s5-headline{
  font-family:var(--oct);font-weight:500;
  font-size:32px;
  line-height:1.1;letter-spacing:-.015em;text-transform:uppercase;
  color:var(--white);
}
.s5-year-tabs{display:flex;gap:8px;}
.year-tab{
  font-family:var(--oct);font-weight:500;
  font-size:13px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--white);
  background:transparent;border:1px solid var(--line);
  padding:8px 18px;cursor:pointer;
  transition:all .2s;
}
.year-tab.active{background:var(--red);border-color:var(--red);}
.year-tab:hover:not(.active){border-color:rgba(232,241,251,.35);}

.s5-media{
  display:grid;
  grid-template-columns:3fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:4px;

}

.s5-video{
  grid-column:1;
  grid-row:1 / 3;
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  overflow:hidden;
  cursor:pointer;
  aspect-ratio:16/9;
  width:100%;
  height:auto;
}
.s5-video::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(232,241,251,.018) 0,rgba(232,241,251,.018) 1px,transparent 1px,transparent 3px);
}
.video-placeholder-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(242,52,80,.12) 0,var(--card) 100%);
}
.video-year-badge{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--oct);font-weight:500;
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--white);background:rgba(13,14,25,.8);
  padding:5px 12px;border:1px solid var(--line);
}
.video-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:2;width:56px;height:56px;
  background:var(--red);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s,background .2s;
}
.s5-video:hover .video-play{transform:translate(-50%,-50%) scale(1.1);background:#d62940;}
.video-play svg{margin-left:4px;}
.video-duration{
  position:absolute;bottom:12px;right:14px;z-index:2;
  font-family:var(--ibm);font-weight:400;
  font-size:12px;color:rgba(232,241,251,.5);letter-spacing:1px;
}
.video-label{
  position:absolute;bottom:12px;left:14px;z-index:2;
  font-family:var(--ibm);font-weight:300;
  font-size:12px;color:rgba(232,241,251,.65);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:60%;
}
.video-progress{
  position:absolute;bottom:0;left:0;right:0;height:3px;z-index:3;
  background:rgba(232,241,251,.1);
}
.video-progress-fill{height:100%;width:0%;background:var(--red);}
.video-caption{
  position:absolute;inset:0;z-index:1;
  display:flex;align-items:center;justify-content:center;
}
.video-caption-text{
  font-family:var(--oct);font-weight:300;
  font-size:clamp(11px,1.2vw,15px);
  text-transform:uppercase;letter-spacing:3px;
  color:rgba(232,241,251,.15);text-align:center;
}

.video-iframe{
  position:absolute;inset:0;z-index:5;
  width:100%;height:100%;border:0;
  display:block;
}

.s5-video.has-video .video-placeholder-bg,
.s5-video.has-video .video-caption,
.s5-video.has-video .video-play,
.s5-video.has-video .video-label,
.s5-video.has-video .video-duration,
.s5-video.has-video .video-progress,
.s5-video.has-video .video-year-badge{
  display:none;
}

.gallery-cell{
  position:relative;overflow:hidden;cursor:pointer;
  background:var(--card);border:1px solid var(--line);
}
.gallery-year-set{position:absolute;inset:0;display:none;}
.gallery-year-set.is-active{display:block;}
.gallery-slide{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .7s ease;
}
.gallery-slide.is-active{opacity:1;}
.gallery-slide-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
}
.gallery-ph{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.gallery-ph-icon{color:rgba(232,241,251,.06);}
.gallery-counter{
  position:absolute;bottom:8px;right:10px;z-index:3;
  font-family:var(--ibm);font-weight:400;
  font-size:9px;letter-spacing:1.5px;
  color:rgba(232,241,251,.3);
}
.gallery-progress{
  position:absolute;bottom:0;left:0;right:0;height:2px;z-index:4;
  background:rgba(232,241,251,.08);
}
.gallery-progress-fill{
  height:100%;width:0%;background:var(--red);
}

.gallery-ph{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
}
.gallery-ph-icon{
  color:rgba(232,241,251,.06);
}

.s5-note{
  margin-top:20px;
  font-family:var(--ibm);font-weight:300;
  font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(232,241,251,.3);
  text-align:center;
}

@media(max-width:700px){
  .s5-media{grid-template-columns:1fr;grid-template-rows:240px 140px 140px;height:auto;}
  .s5-video{grid-column:1;grid-row:1;}
  .gc-1{grid-column:1;grid-row:2;}
  .gc-2{grid-column:1;grid-row:3;}
}