.campaign {
  /* Top padding leaves ~600px of breathing room above the lead-in for the
     floating-clouds scroll effect that lives between the hero image and this section. */
  padding-top: clamp(300px, 45vh, 600px);
  padding-bottom: clamp(60px, 9vh, 140px);
}

.campaign__lead-wrap {
  text-align: center;
}

.campaign__lead {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.06;
  color: var(--c-text);
  margin-inline: auto;
  /* No max-width so the full line fits at desktop widths; container caps it at 1360 */
}

.campaign__accent {
  color: var(--c-navy);
}

.campaign__media-wrap {
  margin-top: clamp(40px, 6vh, 90px);
}

.campaign__cloud-type {
  display: block;
  width: 100%;
  max-width: 1360px;
  height: auto;
  margin-inline: auto;
}

/* Hidden until campaign.js fades it in when the image enters the viewport.
   html.js gates the rule so a no-JS render still shows the image. The
   html.js class is set synchronously in landing/head.blade.php before
   first paint, so this catches the image before the browser renders it. */
html.js .campaign__cloud-type { opacity: 0; }

@media (max-width: 720px) {
  /* Tighten the breathing room above "Track the work" on phone — desktop's
     45vh runway is unnecessary at this width and just produces dead space. */
  .campaign {
    padding-top: clamp(80px, 18vh, 180px);
    padding-bottom: clamp(40px, 7vh, 100px);
  }
  .campaign__lead {
    font-size: clamp(24px, 6.5vw, 36px);
  }
}