.halloween-home-banner {
    position: relative;
    z-index: 1;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: 110px 0 8px;
    background: #07090b;
}
.halloween-home-banner::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -36px;
    pointer-events: none;
    background: url("/assets/img/halloween-colfort-20261027.png") center / cover no-repeat;
    filter: blur(38px);
    opacity: .24;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 64%, transparent 97%);
    mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 64%, transparent 97%);
}
.halloween-home-banner > img {
    display: block;
    width: min(1320px, calc(100% - 64px));
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 80%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 80%, transparent);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}
.halloween-home-banner::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 18%;
    pointer-events: none;
    background: linear-gradient(transparent, #07090b);
}
@media (max-width: 1000px) { .halloween-home-banner { padding-top: 40px; } }
@media (max-width: 620px) {
    .halloween-home-banner { padding: 12px 0 6px; }
    .halloween-home-banner > img { width: 100%; }
    .halloween-home-banner::before { filter: blur(22px); opacity: .18; }
}
/* Carry the banner's dark edge into the next scene instead of a hard seam. */
.halloween-home-banner + .rates::before {
    content: "";
    position: absolute;
    z-index: 5;
    inset: 0 0 auto;
    height: 100px;
    pointer-events: none;
    background: linear-gradient(#07090b, rgba(7, 9, 11, 0));
}

.halloween-home-banner__dates {
    position: absolute;
    z-index: 2;
    right: 16px;
    bottom: 16px;
    left: 16px;
    margin: 0;
    color: #e9c6a0;
    font-family: var(--serif, Georgia, serif);
    font-size: clamp(17px, 1.6vw, 25px);
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
    text-shadow: 0 2px 12px #000;
}
.halloween-home-banner__dates time { white-space: nowrap; }
.halloween-home-banner + .rates > .rates__layout {
    position: relative;
    top: -64px;
    margin-bottom: -64px;
}
.halloween-home-banner + .rates::before { height: 48px; }
@media (max-width: 620px) {
    .halloween-home-banner { padding-bottom: 22px; }
    .halloween-home-banner__dates { bottom: 4px; font-size: 17px; }
    .halloween-home-banner + .rates > .rates__layout { top: -24px; margin-bottom: -24px; }
    .halloween-home-banner + .rates::before { height: 30px; }
}