.promotions-page { min-height: 100vh; display: flex; flex-direction: column; }
.promotions-page main { flex: 1; }
.promotions-hero { padding: clamp(2rem, 4vw, 3rem) 0; background: radial-gradient(ellipse at 10% 15%, #0096cc14, transparent 60%); }
.promotions-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.promotions-hero h1 { margin: 1rem 0; font-size: clamp(2.8rem, 4.8vw, 4.25rem); }
.promotions-hero h1 em { color: var(--cyan-400); }
.promotions-hero__image { position: relative; overflow: hidden; border: 1px solid var(--hairline); border-radius: 20px; }
.promotions-hero__image img { width: 100%; height: 240px; object-fit: cover; }
.promotions-hero__image figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem 1.25rem 1.25rem; background: linear-gradient(transparent, #060916dd); font-size: .75rem; }
.promotions-offer { padding: 0 0 clamp(3rem, 6vw, 6rem); }
.promotions-offer__heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1rem; }
.promotions-offer__heading h2 { font-size: clamp(1.4rem, 2.5vw, 1.8rem); letter-spacing: -.03em; }
.promotions-offer__heading a { color: var(--cyan-400); font-size: .82rem; font-weight: 700; }
/* Match BJJLink's declared color scheme so the browser keeps its iframe canvas transparent. */
.promotions-offer__embed { overflow: hidden; background: transparent; color-scheme: light; }
.promotions-offer__frame { display: block; width: 100%; height: 600px; border: 0; background: transparent; }
@media (max-width: 850px) {
  .promotions-hero__grid { grid-template-columns: 1fr; }
  .promotions-hero__image { display: none; }
}