.agenda-hero {
  --agenda-orange: #d88422;
  min-height: calc(86svh - 84px) !important;
  padding: clamp(28px, 4vw, 58px) clamp(20px, 4vw, 64px) 40px !important;
}

.agenda-mosaic,
.agenda-collage-shade {
  position: absolute !important;
  inset: 0;
  clip-path: inset(0 0 0 100%);
  animation: agenda-reveal 1.15s cubic-bezier(.72, 0, .17, 1) .28s forwards;
  will-change: clip-path;
}

.agenda-mosaic {
  z-index: 0 !important;
  left: auto;
  width: 40%;
  background: #101a25;
}

.agenda-piece {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: #101a25;
  box-shadow: 0 12px 34px rgba(4, 9, 14, .28);
}

.agenda-piece img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.9) contrast(1.06);
}

.agenda-piece-a {
  inset: -3% 38% auto -2%;
  height: 35%;
  clip-path: polygon(2% 0, 100% 2%, 97% 94%, 4% 100%);
}

.agenda-piece-a img { object-position: 53% 7%; filter: grayscale(1) contrast(1.08); }

.agenda-piece-b {
  inset: -2% -4% auto 57%;
  height: 46%;
  clip-path: polygon(3% 3%, 98% 0, 100% 95%, 0 100%);
}

.agenda-piece-b img { object-position: 91% 7%; }

.agenda-piece-c {
  inset: 27% 20% auto -7%;
  height: 43%;
  clip-path: polygon(4% 5%, 98% 0, 100% 91%, 1% 100%);
}

.agenda-piece-c img { object-position: 63% 48%; }

.agenda-piece-d {
  inset: 40% -5% auto 69%;
  height: 39%;
  clip-path: polygon(0 4%, 98% 0, 100% 96%, 5% 100%);
}

.agenda-piece-d img { object-position: 90% 43%; }

.agenda-piece-e {
  inset: auto 5% -5% 5%;
  height: 37%;
  clip-path: polygon(2% 5%, 96% 0, 100% 96%, 0 100%);
}

.agenda-piece-e img { object-position: 69% 92%; }

.agenda-mosaic::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(44, 86, 163, .22), transparent 23%);
}

.agenda-collage-shade {
  z-index: 1 !important;
  left: auto;
  width: 40%;
  background:
    linear-gradient(90deg, rgba(44, 86, 163, .18), rgba(8, 17, 27, .12) 35%, rgba(5, 11, 18, .38)),
    linear-gradient(0deg, rgba(3, 8, 13, .42), transparent 58%);
  pointer-events: none;
}

.agenda-hero .kicker,
.agenda-lockup,
.agenda-hero .hero-foot {
  z-index: 3 !important;
}

@keyframes agenda-reveal {
  from { clip-path: inset(0 0 0 100%); }
  to { clip-path: inset(0); }
}

.agenda-lockup {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 48px);
  margin: auto 0;
}

.agenda-vertical {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(88px, 9vw, 138px);
  height: clamp(205px, 25vw, 300px);
  padding: clamp(15px, 2vw, 26px) 0;
  background: #f4f0e5;
  color: #071713;
  font: 800 clamp(25px, 3vw, 46px) / .88 'Syne', sans-serif;
  letter-spacing: .08em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  box-shadow: -16px -16px 0 var(--agenda-orange);
}

.agenda-lockup h1 {
  margin: 0;
  color: #fff;
  font: 800 clamp(76px, 13.2vw, 204px) / .72 'Syne', sans-serif;
  letter-spacing: -.078em;
  text-transform: uppercase;
}

.agenda-lockup h1 span {
  display: block;
}

.agenda-lockup h1 span:last-child {
  margin-left: clamp(38px, 6vw, 96px);
}

.agenda-lockup h1 span:only-child {
  margin-left: 0;
}

@media (max-width: 640px) {
  .agenda-hero {
    min-height: calc(76svh - 72px) !important;
  }

  .agenda-hero .kicker span:last-child {
    display: none;
  }

  .agenda-lockup {
    gap: 14px;
  }

  .agenda-vertical {
    width: 62px;
    height: 150px;
    padding: 12px 0;
    font-size: 18px;
    box-shadow: -9px -9px 0 var(--agenda-orange);
  }

  .agenda-lockup h1 {
    font-size: 19vw;
  }

  .agenda-lockup h1 span:last-child {
    margin-left: 0;
  }

  .agenda-mosaic,
  .agenda-collage-shade {
    animation-duration: .95s;
  }

  .agenda-mosaic,
  .agenda-collage-shade { width: 40%; }
}

@media (prefers-reduced-motion: reduce) {
  .agenda-mosaic,
  .agenda-collage-shade {
    clip-path: inset(0);
    animation: none;
  }
}