/* AdCrest hero, "campaign going live" (assets/js/campaign-core.js). */
.campaign-core {
    position: relative;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    will-change: transform;
}
.campaign-core-canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 991px) {
    .campaign-core { max-width: 440px; margin-bottom: 40px; }
}
/* two columns: the animation sits high (user: less space above it), top-aligned and a little above the heading line */
@media (min-width: 992px) {
    .hero-area-four .campaign-col { -ms-flex-item-align: start; align-self: flex-start; margin-top: -40px; }
}

/* the heading's second line always starts on its own line in the two-column hero */
.hero-content-four h1 .h2 { display: block; margin-top: 0.35em; }

/* Each heading part on ONE line (user, 2026-09-28): sizes fitted to 94% of the text column at each width
   ("ATL-led Advertising." is 9.9x its font size wide, the second line 19.2x). Small phones wrap, at readable sizes. */
.hero-area-four .hero-content-four h1 { font-size: 70px; }
.hero-area-four .hero-content-four h1 .h2 { font-size: 36px; }
@media (max-width: 1399px) {
    .hero-area-four .hero-content-four h1 { font-size: 60px; }
    .hero-area-four .hero-content-four h1 .h2 { font-size: 31px; }
}
@media (max-width: 1199px) {
    .hero-area-four .hero-content-four h1 { font-size: 50px; }
    .hero-area-four .hero-content-four h1 .h2 { font-size: 25px; }
}
@media (max-width: 991px) {
    .hero-area-four .hero-content-four h1 { font-size: 60px; }
    .hero-area-four .hero-content-four h1 .h2 { font-size: 33px; }
}
@media (max-width: 767px) {
    .hero-area-four .hero-content-four h1 { font-size: 48px; }
    .hero-area-four .hero-content-four h1 .h2 { font-size: 24px; }
}
@media (max-width: 575px) {
    .hero-area-four .hero-content-four h1 { font-size: 38px; }
    .hero-area-four .hero-content-four h1 .h2 { font-size: 24px; }
}

/* The hero text waits hidden until it builds. Only when the script runs (html.cc-js, never with reduced motion),
   with a 4 s failsafe so the text always appears. */
.cc-js:not(.cc-run) .hero-content-four h1,
.cc-js:not(.cc-run) .hero-content-four > .theme-btn {
    opacity: 0;
    -webkit-animation: cc-failsafe 0.01s 4s forwards;
    animation: cc-failsafe 0.01s 4s forwards;
}
@-webkit-keyframes cc-failsafe { to { opacity: 1; } }
@keyframes cc-failsafe { to { opacity: 1; } }
.cc-w { display: inline-block; white-space: nowrap; }
.cc-c { display: inline-block; }