.campaign-modal[hidden] { display: none; }

.campaign-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 4vh 5vw;
}

.campaign-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .46);
  backdrop-filter: blur(2px);
}

.campaign-modal__dialog {
  position: relative;
  width: min(950px, 90vw, calc(88vh * 1.6));
  aspect-ratio: 1200 / 750;
  overflow: hidden;
  border-radius: clamp(18px, 2.3vw, 30px);
  background: #dfe2e6;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .24);
  opacity: 0;
  transform: translateY(10px) scale(.985);
  transition: opacity 300ms ease, transform 300ms ease;
}

.campaign-modal.is-visible .campaign-modal__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.campaign-modal__picture,
.campaign-modal__image {
  display: block;
  width: 100%;
  height: 100%;
}

.campaign-modal__image { object-fit: contain; }

.campaign-modal__dialog::after {
  content: "";
  position: absolute;
  inset: 0 42% 0 0;
  background: linear-gradient(90deg, rgba(239, 241, 244, .96) 0%, rgba(239, 241, 244, .7) 54%, rgba(239, 241, 244, 0) 100%);
  pointer-events: none;
}

.campaign-modal__content {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 5.5%;
  width: 33%;
  transform: translateY(-50%);
  color: var(--color-text, #111);
}

.campaign-modal__eyebrow {
  margin: 0 0 12px;
  color: #16899a;
  font: 700 clamp(.66rem, 1vw, .8rem)/1.2 var(--font-heading, sans-serif);
  letter-spacing: .17em;
}

.campaign-modal__content h2 {
  margin: 0;
  font: 500 clamp(1.85rem, 3.5vw, 3.2rem)/.98 var(--font-heading, sans-serif);
  letter-spacing: -.045em;
}

.campaign-modal__content > p:not(.campaign-modal__eyebrow) {
  max-width: 28ch;
  margin: 18px 0 24px;
  color: #3f4348;
  font: 400 clamp(.82rem, 1.15vw, 1rem)/1.5 var(--font-body, sans-serif);
}

.campaign-modal__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 20px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font: 700 clamp(.7rem, .9vw, .8rem)/1 var(--font-heading, sans-serif);
  letter-spacing: .07em;
  transition: background-color 180ms ease, transform 180ms ease;
}

.campaign-modal__cta:hover { background: #242424; transform: translateY(-1px); }

.campaign-modal__close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(17, 17, 17, .12);
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  color: #111;
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.campaign-modal__close:hover { background: #fff; }
.campaign-modal__close:focus-visible,
.campaign-modal__cta:focus-visible { outline: 3px solid #5bccdd; outline-offset: 3px; }
body.campaign-modal-open { overflow: hidden; }

@media (max-width: 700px) {
  .campaign-modal { padding: 4vh 5vw; }
  .campaign-modal__dialog {
    width: min(90vw, 540px, calc(88vh * .75));
    aspect-ratio: 900 / 1200;
    border-radius: 22px;
  }
  .campaign-modal__dialog::after {
    inset: 0 0 57% 0;
    background: linear-gradient(180deg, rgba(235, 238, 242, .98) 0%, rgba(235, 238, 242, .78) 62%, rgba(235, 238, 242, 0) 100%);
  }
  .campaign-modal__content {
    top: 5.2%;
    left: 7%;
    width: 84%;
    transform: none;
  }
  .campaign-modal__eyebrow { margin-bottom: 8px; font-size: clamp(.58rem, 2.4vw, .72rem); }
  .campaign-modal__content h2 { max-width: 11ch; font-size: clamp(1.48rem, 6vw, 2.15rem); line-height: 1; }
  .campaign-modal__content > p:not(.campaign-modal__eyebrow) { max-width: 28ch; margin: 10px 0 14px; font-size: clamp(.72rem, 2.7vw, .88rem); line-height: 1.35; }
  .campaign-modal__cta { min-height: 40px; padding: 10px 15px; font-size: clamp(.6rem, 2.2vw, .72rem); }
  .campaign-modal__close { top: 10px; right: 10px; width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .campaign-modal__dialog,
  .campaign-modal__cta { transition: none; }
}

@supports not (backdrop-filter: blur(2px)) {
  .campaign-modal__overlay { background: rgba(0, 0, 0, .5); }
}