/*
   Shared MoTownCon 2026 page fixes.

   This page still uses the same purchased theme shell as the homepage. Header and
   footer markup are injected by header.js/footer.js, so their selectors have to
   stay here even though most of the Guest page starts farther down. Do not move
   these into main.css until the October artwork and navigation are locked.
*/

/* Sponsor logos are not shown on this page, but this rule stays with the shared
   shell so a future sponsor strip can be dropped in without Phoenix Landing
   suddenly appearing twice the size of everyone else. */
#sponsors .brand-wrapper {
    min-height: 230px;
    padding: 28px 20px;
    text-align: center;
}
#sponsors .brand-wrapper > span:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 140px;
}
#sponsors .brand-wrapper > span:first-child img {
    display: block;
    width: 220px;
    height: 120px;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto;
}
@media (max-width: 1399.98px) {
    .header-three .nav-menu {
        gap: 1.25rem !important;
    }
}


/* This is inherited from the homepage shell. The darker overlay was added
   after the background looked washed out on smaller phones; the Guest page does
   not render this hero today, but keeping the shared rule prevents page drift. */
.banner-three-area {
    isolation: isolate;
    background-position: center;
    background-size: cover;
}

.banner-three-area::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(7, 3, 14, 0.90) 0%, rgba(12, 5, 20, 0.78) 45%, rgba(10, 4, 18, 0.50) 72%, rgba(6, 2, 12, 0.64) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.52) 100%);
}

.banner-three-area > .container {
    position: relative;
    z-index: 2;
}

.banner-three-area .banner-three-venue,
.banner-three-area .banner-event-info-item-content,
.banner-three-area .time-box-item-time,
.banner-three-area .time-box-item-content,
.banner-three-area .time-box-item-divider {
    color: #fff !important;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.95), 0 1px 2px rgba(0, 0, 0, 0.95);
}

.banner-three-area .banner-event-info-item {
    display: inline-flex;
    align-items: center;
    padding: 12px 18px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(10, 5, 18, 0.58);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.banner-three-area .banner-event-location-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    max-width: 100%;
    padding: 12px 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    background: rgba(10, 5, 18, 0.58);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.banner-three-area .banner-event-location-item-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 103, 64, 0.22);
    border: 1px solid rgba(255, 137, 91, 0.42);
    font-size: 20px;
}

.banner-three-area .banner-event-location-copy {
    min-width: 0;
}

.banner-three-area .banner-event-location-venue {
    margin: 0 0 2px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.95);
}

.banner-three-area .banner-event-location-address {
    display: inline-block;
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    text-decoration: none;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.95);
    transition: color 0.2s ease;
}

.banner-three-area .banner-event-location-address:hover,
.banner-three-area .banner-event-location-address:focus-visible {
    color: #ff895b;
}

.mainLogoHeading {
    width: min(100%, 590px);
    margin: 0 0 34px;
}

.mainEventWordmark {
    display: block;
    width: 100%;
    max-width: 590px;
    height: auto;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.48));
}

.mainLogoHeading > span {
    font-size: clamp(1.35rem, 2.4vw, 2.4rem);
    line-height: 1.15;
    text-shadow: 0 4px 14px rgba(0, 0, 0, 0.8);
}

.banner-three-area .time-box-wrapper {
    width: fit-content;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    background: rgba(9, 4, 16, 0.55);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.mascotSideStage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 650px;
    padding: 30px 0 10px;
}

.doodlezHeroFloat {
    position: relative;
    z-index: 3;
    width: min(100%, 720px);
    margin-inline: auto;
    filter: drop-shadow(0 28px 38px rgba(0, 0, 0, 0.55));
    animation: doodlezFloatLoop 7s ease-in-out infinite;
    transform-origin: 50% 65%;
    will-change: transform;
}

.doodlezHeroFloat img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 690px;
    object-fit: contain;
}

.halloweenStageBits {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.halloweenStageBits .doodlezBat {
    position: absolute;
    display: block;
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(22px, 2.6vw, 42px);
    line-height: 1;
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.65));
    animation: batsDriftAcross 9s ease-in-out infinite;
}

.halloweenStageBits .batNearDate {
    top: 13%;
    left: 5%;
    animation-delay: -1.5s;
}

.halloweenStageBits .batNearHat {
    top: 22%;
    right: 7%;
    font-size: clamp(18px, 2vw, 32px);
    animation-duration: 7.5s;
    animation-delay: -4s;
}

.halloweenStageBits .batNearBottom {
    bottom: 24%;
    left: 12%;
    font-size: clamp(16px, 1.7vw, 28px);
    animation-duration: 10.5s;
    animation-delay: -6s;
}

.halloweenStageBits .lavenderFog {
    position: absolute;
    display: block;
    width: 260px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(204, 171, 255, 0.20) 0%, rgba(126, 72, 174, 0.10) 45%, rgba(49, 20, 70, 0) 75%);
    filter: blur(10px);
    opacity: 0.75;
    animation: fogBreathes 11s ease-in-out infinite;
}

.halloweenStageBits .fogAtFeet {
    left: 5%;
    bottom: 12%;
}

.halloweenStageBits .fogBehindArt {
    right: 2%;
    top: 36%;
    width: 310px;
    animation-delay: -5s;
    animation-duration: 13s;
}

@keyframes doodlezFloatLoop {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
    35% { transform: translate3d(8px, -18px, 0) rotate(0.75deg); }
    70% { transform: translate3d(-5px, -9px, 0) rotate(-0.35deg); }
}

@keyframes batsDriftAcross {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-7deg) scale(1); opacity: 0.42; }
    45% { transform: translate3d(24px, -16px, 0) rotate(7deg) scale(1.08); opacity: 0.90; }
    75% { transform: translate3d(-9px, 8px, 0) rotate(-2deg) scale(0.96); opacity: 0.62; }
}

@keyframes fogBreathes {
    0%, 100% { transform: translate3d(-14px, 0, 0) scale(0.96); opacity: 0.38; }
    50% { transform: translate3d(30px, -14px, 0) scale(1.10); opacity: 0.78; }
}

.ticket-three-area-top .row.g-4:last-child > [class*="col-"] {
    display: flex;
}

.ticket-three-card,
.ticket-three-card .ticket-card-content {
    width: 100%;
    height: 100%;
}

.ticket-three-card .ticket-card-content {
    display: flex;
    flex-direction: column;
}

.ticket-three-card .ticket-three-card-features {
    flex: 1 1 auto;
}

.ticket-three-card .ticket-three-card-button {
    margin-top: auto;
    padding-top: 26px;
}

.ticket-three-card .ticket-three-card-button .theme-btn-main {
    width: 100%;
    justify-content: center;
}

@media (max-width: 1199.98px) {
    .mascotSideStage {
        min-height: 520px;
    }
    .doodlezHeroFloat {
        width: min(88vw, 620px);
    }
}

@media (max-width: 767.98px) {
    .mainLogoHeading {
        width: min(100%, 460px);
        margin-bottom: 26px;
        text-align: center;
    }
    .mainEventWordmark {
        margin-inline: auto;
    }
    .banner-three-area::before {
        background: linear-gradient(180deg, rgba(7, 3, 14, 0.91) 0%, rgba(10, 4, 18, 0.78) 62%, rgba(5, 2, 10, 0.72) 100%);
    }
    .banner-three-area .banner-event-info-item {
        border-radius: 16px;
    }
    .banner-three-area .banner-event-location-item {
        width: 100%;
        border-radius: 16px;
    }
    .banner-three-area .banner-event-location-address {
        font-size: 13px;
    }
    .banner-three-area .time-box-wrapper {
        width: 100%;
        justify-content: center;
        padding-inline: 10px;
    }
    .mascotSideStage {
        min-height: 390px;
        padding-top: 10px;
    }
    .doodlezHeroFloat {
        width: min(96vw, 500px);
    }
    .halloweenStageBits .lavenderFog {
        width: 190px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .doodlezHeroFloat,
    .halloweenStageBits .doodlezBat,
    .halloweenStageBits .lavenderFog {
        animation: none !important;
    }
}


/*
   Current event colors. These names are based on where the colors are actually
   used, which has been much easier to remember than "main-three-600" while
   adjusting guest cards beside the theme CSS.
*/
:root {
    --after-hours: #0b080d;
    --header-charcoal: #171015;
    --card-wine: #211219;
    --pumpkin-orange: #ff6a00;
    --warm-ember: #ff8a1f;
    --vip-red: #9e1b32;
    --vip-red-deep: #650e1d;
    --kids-green: #3f6b32;
    --kids-green-deep: #294722;
    --paper-cream: #fff4e6;
    --paper-cream-muted: rgba(255, 244, 230, 0.72);
}

::selection {
    color: var(--after-hours);
    background: var(--warm-ember);
}

/* header.js builds both menus, so keep the original theme hooks below.
   The custom properties are ours; the header-three names belong to the theme. */
.header-three,
.header-three.sticky,
.header-three.fixed-header,
.header-three.header-fixed {
    background:
        linear-gradient(90deg, rgba(158, 27, 50, 0.10), transparent 28%, transparent 72%, rgba(255, 106, 0, 0.08)),
        linear-gradient(180deg, rgba(11, 8, 13, 0.98), rgba(23, 16, 21, 0.96)) !important;
    border-bottom: 1px solid rgba(255, 106, 0, 0.38) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.34), 0 1px 0 rgba(158, 27, 50, 0.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.header-three .logo img,
.mobile-menu__logo img,
body.motowncon-vendor-hall-page .footer-three .footer-logo img {
    filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.46));
}

.header-three .nav-menu__link,
.mobile-menu .nav-menu__link {
    color: var(--paper-cream) !important;
}

.header-three .nav-menu__link:hover,
.header-three .nav-menu__link:focus-visible,
.header-three .activePage > .nav-menu__link,
.mobile-menu .nav-menu__link:hover,
.mobile-menu .nav-menu__link:focus-visible,
.mobile-menu .activePage > .nav-menu__link {
    color: var(--warm-ember) !important;
    text-shadow: 0 0 18px rgba(255, 106, 0, 0.32);
}

.header-three .nav-submenu,
.mobile-menu .nav-submenu {
    color: var(--paper-cream) !important;
    background: linear-gradient(180deg, #211219, #130c11) !important;
    border: 1px solid rgba(255, 106, 0, 0.32);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
}

.header-three .nav-submenu__link,
.mobile-menu .nav-submenu__link {
    color: var(--paper-cream) !important;
}

.header-three .nav-submenu__link:hover,
.header-three .nav-submenu__link:focus-visible,
.mobile-menu .nav-submenu__link:hover,
.mobile-menu .nav-submenu__link:focus-visible {
    color: var(--warm-ember) !important;
    background: rgba(158, 27, 50, 0.22) !important;
}

/* Mobile navigation */
.mobile-menu {
    background:
        radial-gradient(circle at 12% 10%, rgba(158, 27, 50, 0.20), transparent 32%),
        linear-gradient(180deg, #130c11 0%, #09070b 100%) !important;
    border-right: 1px solid rgba(255, 106, 0, 0.38);
    box-shadow: 18px 0 55px rgba(0, 0, 0, 0.52);
}

.mobile-menu .close-button {
    color: var(--paper-cream) !important;
    background: var(--vip-red) !important;
    border: 1px solid rgba(255, 138, 31, 0.48);
}

/* Shared Halloween button treatment */
.theme-btn-main,
.ticket-button {
    border: 1px solid rgba(255, 244, 230, 0.15);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

.theme-btn-main:hover,
.theme-btn-main:focus-visible,
.ticket-button:hover,
.ticket-button:focus-visible {
    color: var(--paper-cream) !important;
    border-color: rgba(255, 138, 31, 0.62);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.30), 0 0 24px rgba(255, 106, 0, 0.20);
}

/* Primary CTAs: pumpkin-to-ember */
.header-button .theme-btn-main,
.motowncon-mobile-ctas > a:first-child,
.banner-three-area .theme-btn-main,
.ticket-button.bg-main-600 {
    color: var(--paper-cream) !important;
    background: linear-gradient(135deg, var(--pumpkin-orange), var(--warm-ember)) !important;
}

.header-button .theme-btn-main:hover,
.motowncon-mobile-ctas > a:first-child:hover,
.banner-three-area .theme-btn-main:hover,
.ticket-button.bg-main-600:hover {
    background: linear-gradient(135deg, #e85800, var(--pumpkin-orange)) !important;
}

/* Discord and premium actions: blood red */
.motowncon-discord-header a,
.motowncon-mobile-ctas > a:nth-child(2),
.ticket-three-card .theme-btn-main.bg-main-three-600 {
    color: var(--paper-cream) !important;
    background: linear-gradient(135deg, var(--vip-red), var(--vip-red-deep)) !important;
    border-color: rgba(255, 106, 0, 0.26);
}

.motowncon-discord-header a:hover,
.motowncon-discord-header a:focus-visible,
.motowncon-mobile-ctas > a:nth-child(2):hover,
.ticket-three-card .theme-btn-main.bg-main-three-600:hover {
    background: linear-gradient(135deg, #b7233f, var(--vip-red)) !important;
}

/* General admission: vivid pumpkin */
.ticket-three-card .theme-btn-main.bg-main-four-600 {
    color: var(--paper-cream) !important;
    background: linear-gradient(135deg, var(--pumpkin-orange), #d94f00) !important;
}

.ticket-three-card .theme-btn-main.bg-main-four-600:hover {
    background: linear-gradient(135deg, var(--warm-ember), var(--pumpkin-orange)) !important;
}

/* Kids/family admission: moss green */
.ticket-three-card .theme-btn-main.bg-main-two-600 {
    color: var(--paper-cream) !important;
    background: linear-gradient(135deg, var(--kids-green), var(--kids-green-deep)) !important;
}

.ticket-three-card .theme-btn-main.bg-main-two-600:hover {
    background: linear-gradient(135deg, #537f40, var(--kids-green)) !important;
}

/* Button dots and icon treatments */
.header-button .tw-btn-circle-dot,
.banner-three-area .tw-btn-circle-dot,
.ticket-button .tw-btn-circle-dot {
    background: var(--paper-cream) !important;
}

.ticket-three-card .theme-btn-main.bg-main-three-600 .tw-btn-circle-dot,
.ticket-three-card .theme-btn-main.bg-main-four-600 .tw-btn-circle-dot,
.ticket-three-card .theme-btn-main.bg-main-two-600 .tw-btn-circle-dot {
    background: rgba(255, 244, 230, 0.82) !important;
}

/* Harmonize prominent accent text near CTAs */
.banner-three-area .text-main-600,
.section-sub-title.text-main-600,
.section-sub-title.text-main-three-600,
.text-only-button.text-main-600 {
    color: var(--warm-ember) !important;
}

.ticket-three-card-tag.text-main-three-600,
.ticket-three-card-price.text-main-three-600 {
    color: var(--vip-red) !important;
}

.ticket-three-card-tag.text-main-four-600,
.ticket-three-card-price.text-main-four-600 {
    color: #d95700 !important;
}

.ticket-three-card-tag.text-main-two-600,
.ticket-three-card-price.text-main-two-600 {
    color: var(--kids-green) !important;
}

/* The footer is injected after this file loads. These overrides are local
   because theme updates have reset the footer background more than once. */
body.motowncon-vendor-hall-page .footer-three {
    color: var(--paper-cream);
    background:
        radial-gradient(circle at 8% 18%, rgba(158, 27, 50, 0.23), transparent 32%),
        radial-gradient(circle at 92% 82%, rgba(255, 106, 0, 0.14), transparent 30%),
        linear-gradient(145deg, #0a080c 0%, #171015 52%, #210f16 100%) !important;
    border-top: 1px solid rgba(255, 106, 0, 0.42);
    box-shadow: inset 0 1px 0 rgba(158, 27, 50, 0.20);
}

body.motowncon-vendor-hall-page .footer-three::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 88%);
}

.footer-three-shape img {
    opacity: 0.18;
    filter: sepia(1) saturate(7) hue-rotate(335deg) brightness(0.92);
}

body.motowncon-vendor-hall-page .footer-three .footer-three-widget-title {
    color: var(--paper-cream) !important;
}

body.motowncon-vendor-hall-page .footer-three .footer-three-widget-title::after {
    background: linear-gradient(90deg, var(--pumpkin-orange), var(--vip-red)) !important;
}

body.motowncon-vendor-hall-page .footer-three .text--white-70,
body.motowncon-vendor-hall-page .footer-three .footer-quick-links-list-item {
    color: var(--paper-cream-muted) !important;
}

body.motowncon-vendor-hall-page .footer-three a:hover,
body.motowncon-vendor-hall-page .footer-three a:focus-visible,
body.motowncon-vendor-hall-page .footer-three .footer-quick-links-list-item:hover,
body.motowncon-vendor-hall-page .footer-three .footer-quick-links-list-item:focus-visible,
body.motowncon-vendor-hall-page .footer-three .copyright-text a:hover {
    color: var(--warm-ember) !important;
}

body.motowncon-vendor-hall-page .footer-three .footer-quick-links-list-item i {
    color: var(--pumpkin-orange);
}

body.motowncon-vendor-hall-page .footer-three .footer-address {
    padding: 24px;
    border: 1px solid rgba(255, 106, 0, 0.22);
    border-radius: 18px;
    background: rgba(11, 8, 13, 0.42);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.motowncon-vendor-hall-page .footer-three .footer-address span,
body.motowncon-vendor-hall-page .footer-three .footer-social a {
    color: var(--paper-cream) !important;
    background: linear-gradient(135deg, var(--vip-red), #5b101d) !important;
    border: 1px solid rgba(255, 106, 0, 0.28);
}

body.motowncon-vendor-hall-page .footer-three .footer-social a:hover,
body.motowncon-vendor-hall-page .footer-three .footer-social a:focus-visible {
    color: var(--after-hours) !important;
    background: linear-gradient(135deg, var(--pumpkin-orange), var(--warm-ember)) !important;
}

body.motowncon-vendor-hall-page .footer-three .open-popup img {
    border: 1px solid rgba(255, 106, 0, 0.30);
    border-radius: 10px;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

body.motowncon-vendor-hall-page .footer-three .open-popup:hover img,
body.motowncon-vendor-hall-page .footer-three .open-popup:focus-visible img {
    transform: translateY(-3px);
    border-color: var(--warm-ember);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34), 0 0 18px rgba(255, 106, 0, 0.18);
}

@media (max-width: 767.98px) {
    .header-three {
        background: linear-gradient(180deg, rgba(11, 8, 13, 0.99), rgba(23, 16, 21, 0.98)) !important;
    }

    body.motowncon-vendor-hall-page .footer-three .footer-address {
        padding: 18px;
    }
}


/* =========================================================
   Mobile-first polish: centered, symmetrical, and uncluttered
   Desktop styling remains unchanged above 767.98px.
   ========================================================= */
@media (max-width: 767.98px) {
    html,
    body {
        overflow-x: hidden;
    }

    body {
        text-align: center;
    }

    .container,
    .tw-container-1700-px {
        padding-inline: 20px !important;
    }

    /* Mobile navigation: centered, balanced touch targets */
    .mobile-menu__inner,
    .mobile-menu__menu,
    .mobile-menu .nav-menu,
    .mobile-menu .nav-menu__item,
    .mobile-menu .nav-submenu,
    .mobile-menu .nav-submenu__item {
        width: 100%;
        text-align: center;
    }

    .mobile-menu__logo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding-inline: 42px;
    }

    .mobile-menu__logo img {
        display: block;
        width: min(100%, 190px);
        margin-inline: auto;
    }

    .mobile-menu .nav-menu__link,
    .mobile-menu .nav-submenu__link {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-height: 50px;
        padding-inline: 12px !important;
        text-align: center;
    }

    .mobile-menu .nav-submenu {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 100%;
        margin: 4px auto 10px;
    }

    .motowncon-mobile-ctas {
        align-items: center;
    }

    .motowncon-mobile-ctas .theme-btn-main {
        width: min(100%, 280px);
        align-items: center;
        justify-content: center;
    }

    /* Hero: one clean centered visual axis */
    .banner-three-area {
        min-height: auto !important;
        padding-top: 96px;
        padding-bottom: 48px;
        text-align: center;
    }

    .banner-three-area > .container,
    .banner-three-area .row,
    .concordHeroCopy {
        width: 100%;
    }

    .concordHeroCopy {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .mainLogoHeading {
        width: min(88vw, 390px);
        margin: 0 auto 22px;
        text-align: center;
    }

    .mainEventWordmark {
        width: 100%;
        max-width: 390px;
        margin-inline: auto;
    }

    .mainLogoHeading > span {
        margin-top: 10px !important;
        font-size: clamp(1.15rem, 5.2vw, 1.55rem);
        line-height: 1.25;
        text-align: center;
    }

    .concordInfoRail {
        width: 100%;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        margin-bottom: 26px !important;
    }

    .concordInfoRail > div {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .writing-mode-md-vertical-lr-180 {
        writing-mode: horizontal-tb !important;
        transform: none !important;
    }

    .banner-three-area .banner-three-venue {
        width: 100%;
        margin: 0 auto 2px !important;
        font-size: 0.95rem;
        line-height: 1.35 !important;
        letter-spacing: 0.12em;
        text-align: center;
    }

    .banner-three-area .banner-event-info-item {
        display: flex;
        width: min(100%, 420px);
        min-height: 58px;
        margin: 0 auto 12px !important;
        padding: 12px 16px;
        align-items: center;
        justify-content: center;
        gap: 9px;
        border-radius: 16px;
        text-align: center;
    }

    .banner-three-area .banner-event-info-item-icon {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
    }

    .banner-three-area .banner-event-info-item-content {
        margin: 0;
        font-size: clamp(0.88rem, 3.8vw, 1rem);
        line-height: 1.4;
        text-align: center;
    }

    .banner-three-area .banner-event-location-item {
        width: min(100%, 420px);
        min-height: 132px;
        margin: 0 auto 18px !important;
        padding: 16px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 9px;
        border-radius: 16px;
        text-align: center;
    }

    .banner-three-area .banner-event-location-copy,
    .banner-three-area .banner-event-location-venue,
    .banner-three-area .banner-event-location-address {
        width: 100%;
        text-align: center;
    }

    .banner-three-area .banner-event-location-venue {
        margin-bottom: 4px;
        font-size: 1rem;
    }

    .banner-three-area .banner-event-location-address {
        max-width: 330px;
        margin-inline: auto;
        font-size: 0.84rem;
        line-height: 1.55;
    }

    .banner-three-area .time-box-wrapper {
        display: flex !important;
        width: min(100%, 420px);
        min-height: 82px;
        margin-inline: auto;
        padding: 12px 8px;
        align-items: center;
        justify-content: space-between;
        gap: 0 !important;
        border-radius: 16px;
    }

    .banner-three-area .time-box-item {
        display: flex !important;
        flex: 1 1 25%;
        min-width: 0;
        align-items: center;
        justify-content: center;
        gap: 3px !important;
    }

    .banner-three-area .time-box-item-content-wrapper {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .banner-three-area .time-box-item-time {
        font-size: clamp(1.45rem, 7vw, 2rem);
        line-height: 1;
        text-align: center;
    }

    .banner-three-area .time-box-item-content {
        margin-top: 5px;
        font-size: 0.68rem;
        line-height: 1;
        text-align: center;
    }

    .banner-three-area .time-box-item-divider {
        margin-inline: 1px;
        font-size: 1rem;
        line-height: 1;
    }

    .heroTicketJump {
        display: flex;
        width: 100%;
        padding-left: 0 !important;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .heroTicketJump .theme-btn-main {
        width: min(100%, 330px);
        min-height: 54px;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    /* Mascot is supportive, not dominant, on mobile */
    .mascotSideStage {
        width: 100%;
        min-height: 250px;
        margin-top: 12px;
        padding: 6px 0 0;
        align-items: center;
        justify-content: center;
    }

    .doodlezHeroFloat {
        width: min(62vw, 270px);
        margin-inline: auto;
        opacity: 0.94;
        filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.48));
        animation: doodlezFloatSmall 8s ease-in-out infinite;
    }

    .doodlezHeroFloat img {
        width: 100%;
        max-height: 270px;
        margin-inline: auto;
        object-fit: contain;
    }

    .halloweenStageBits .batNearHat,
    .halloweenStageBits .batNearBottom,
    .halloweenStageBits .fogBehindArt {
        display: none;
    }

    .halloweenStageBits .batNearDate {
        top: 14%;
        left: 10%;
        font-size: 21px;
        opacity: 0.48;
    }

    .halloweenStageBits .fogAtFeet {
        left: 50%;
        bottom: 14%;
        width: 150px;
        height: 58px;
        opacity: 0.38;
        transform: translateX(-50%);
    }

    /* Tighter mobile rhythm; desktop spacing remains intact */
    .service-three-area,
    .event-three-area,
    .brand-three-area,
    .ticket-three-area-top,
    .footer-three-top {
        padding-top: 72px !important;
        padding-bottom: 72px !important;
    }

    .section-wrapper,
    .section-sub-title,
    .section-title,
    .section-description,
    .section-description-title {
        margin-inline: auto;
        text-align: center !important;
    }

    .section-title {
        max-width: 560px;
        font-size: clamp(2rem, 9.5vw, 3.15rem) !important;
        line-height: 1.08 !important;
    }

    .service-three-shape,
    .brand-three-area .ellipse-shape,
    .footer-three-shape {
        display: none !important;
    }

    /* About section */
    .service-three-area .row,
    .service-three-area [class*="col-"] {
        text-align: center;
    }

    .service-three-area .video-three-area-video {
        width: min(100%, 520px);
        margin-inline: auto;
    }

    .service-three-area .col-lg-6:last-child {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .service-three-area .col-lg-6:last-child > h3,
    .service-three-area .col-lg-6:last-child > p {
        width: 100%;
        max-width: 620px;
        margin-inline: auto;
        text-align: center;
    }

    .service-three-area .theme-btn-main {
        align-items: center;
        justify-content: center;
        margin-inline: auto;
    }

    /* Activity cards: equal visual balance */
    .event-three-area .service-three-card {
        display: flex;
        min-height: 290px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .event-three-area .service-three-card-title,
    .event-three-area .service-three-card-description,
    .event-three-area .text-only-button {
        width: 100%;
        margin-inline: auto;
        text-align: center;
    }

    .event-three-area .text-only-button {
        align-items: center;
        justify-content: center;
    }

    /* Sponsors */
    #sponsors .section-wrapper,
    #sponsors .section-sub-title,
    #sponsors .section-title,
    #sponsors .brand-wrapper {
        text-align: center !important;
    }

    #sponsors .brand-wrapper {
        min-height: 215px;
        align-items: center;
        justify-content: center;
    }

    /* Ticket cards: centered content with clean button alignment */
    .ticket-three-card,
    .ticket-three-card .ticket-card-content {
        text-align: center;
    }

    .ticket-three-card .ticket-card-content {
        align-items: center;
        justify-content: flex-start;
    }

    .ticket-three-card-tag,
    .ticket-three-card-name,
    .ticket-three-card-price {
        width: 100%;
        margin-inline: auto;
        text-align: center;
    }

    .ticket-three-card-price {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ticket-three-card-features {
        width: 100%;
        margin-inline: auto;
        padding-left: 0;
        text-align: center;
    }

    .ticket-three-card-features-item {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .ticket-three-card-features-item-text {
        text-align: center;
    }

    .ticket-three-card .ticket-three-card-button {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    .ticket-three-card .ticket-three-card-button .theme-btn-main {
        width: min(100%, 320px);
        align-items: center;
        justify-content: center;
    }

    /* Lower ticket CTA */
    .ticket-three-area-bottom,
    .ticket-three-area-bottom .section-wrapper,
    .ticket-three-area-bottom .seat-booking-area-quote-wrapper,
    .ticket-three-area-bottom .seat-booking-sticker {
        text-align: center;
    }

    .ticket-three-area-bottom .seat-booking-area-quote-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 24px;
    }

    .ticket-three-area-bottom .seat-booking-area-quote-wrapper > div {
        width: 100%;
        text-align: center;
    }

    .ticket-three-area-bottom .ticket-button {
        margin-inline: auto;
        align-items: center;
        justify-content: center;
    }

    .ticket-three-area-bottom .seat-booking-banner {
        width: min(100%, 520px);
        margin-inline: auto;
    }

    /* Footer: centered columns, links, address, and social icons */
    body.motowncon-vendor-hall-page .footer-three,
    .footer-three-widget,
    .footer-three-widget-title,
    body.motowncon-vendor-hall-page .footer-three .text--white-70,
    body.motowncon-vendor-hall-page .footer-three .copyright-text {
        text-align: center !important;
    }

    body.motowncon-vendor-hall-page .footer-three .footer-logo {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-inline: auto;
    }

    body.motowncon-vendor-hall-page .footer-three .footer-logo img {
        width: min(100%, 220px);
        margin-inline: auto;
    }

    .footer-quick-links-list {
        align-items: center;
        justify-content: center;
    }

    body.motowncon-vendor-hall-page .footer-three .footer-quick-links-list-item {
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    body.motowncon-vendor-hall-page .footer-three .footer-address > .d-flex {
        align-items: center;
        justify-content: center;
    }

    body.motowncon-vendor-hall-page .footer-three .footer-address > .d-flex > .d-flex {
        width: 100%;
        flex-direction: column;
        align-items: center !important;
        justify-content: center;
        gap: 10px !important;
        text-align: center;
    }

    body.motowncon-vendor-hall-page .footer-three .footer-address p,
    body.motowncon-vendor-hall-page .footer-three .footer-address a {
        width: 100%;
        margin-inline: auto;
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .container,
    .tw-container-1700-px {
        padding-inline: 16px !important;
    }

    .banner-three-area {
        padding-top: 88px;
        padding-bottom: 40px;
    }

    .mainLogoHeading {
        width: min(86vw, 320px);
        margin-bottom: 18px;
    }

    .mainEventWordmark {
        max-width: 320px;
    }

    .banner-three-area .banner-event-info-item,
    .banner-three-area .banner-event-location-item,
    .banner-three-area .time-box-wrapper {
        width: 100%;
        max-width: 380px;
    }

    .banner-three-area .banner-event-location-item {
        min-height: 126px;
        padding: 14px;
    }

    .banner-three-area .time-box-wrapper {
        min-height: 76px;
        padding-inline: 5px;
    }

    .banner-three-area .time-box-item-time {
        font-size: clamp(1.3rem, 6.8vw, 1.75rem);
    }

    .banner-three-area .time-box-item-content {
        font-size: 0.62rem;
    }

    .mascotSideStage {
        min-height: 210px;
        margin-top: 4px;
    }

    .doodlezHeroFloat {
        width: min(56vw, 220px);
    }

    .doodlezHeroFloat img {
        max-height: 220px;
    }

    .halloweenStageBits .batNearDate {
        left: 12%;
        font-size: 18px;
        opacity: 0.38;
    }

    .halloweenStageBits .fogAtFeet {
        width: 120px;
        opacity: 0.28;
    }

    .theme-btn-main,
    .ticket-button {
        min-height: 52px;
    }

    .service-three-area,
    .event-three-area,
    .brand-three-area,
    .ticket-three-area-top,
    .footer-three-top {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .event-three-area .service-three-card {
        min-height: 270px;
    }

    #sponsors .brand-wrapper {
        min-height: 200px;
        padding: 22px 16px;
    }

    body.motowncon-vendor-hall-page .footer-three .footer-address {
        padding: 16px;
    }
}

@keyframes doodlezFloatSmall {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.35deg); }
    50% { transform: translate3d(3px, -8px, 0) rotate(0.35deg); }
}



/* =========================================================
   Desktop hero UAT polish
   Keeps mobile rules intact while aligning the CTA with the
   date, venue, address, and countdown information stack.
   ========================================================= */
@media (min-width: 768px) {
    .concordHeroCopy {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .concordInfoRail {
        width: 100%;
        max-width: 650px;
        margin-bottom: 0 !important;
        align-items: stretch !important;
        gap: 18px !important;
    }

    .concordInfoRail > div:first-child {
        display: flex;
        align-items: stretch;
        justify-content: center;
        flex: 0 0 42px;
    }

    .concordInfoRail > div:first-child .writing-mode-md-vertical-lr-180 {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .eventInfoPile {
        display: flex;
        width: min(100%, 560px);
        flex-direction: column;
        align-items: stretch;
    }

    .banner-three-area .banner-event-info-item {
        display: flex;
        width: 100%;
        min-height: 56px;
        margin-bottom: 14px !important;
        align-items: center;
        justify-content: center;
        gap: 10px;
        text-align: center;
    }

    .banner-three-area .banner-event-info-item-content {
        margin: 0;
        line-height: 1.35;
        text-align: center;
    }

    .banner-three-area .banner-event-location-item {
        width: 100%;
        min-height: 82px;
        margin-bottom: 16px !important;
        align-items: center;
    }

    .banner-three-area .time-box-wrapper {
        display: flex !important;
        width: 100%;
        min-height: 92px;
        margin: 0;
        padding: 14px 18px;
        align-items: center;
        justify-content: space-between;
        gap: 0 !important;
    }

    .banner-three-area .time-box-item {
        display: flex !important;
        flex: 1 1 25%;
        min-width: 0;
        align-items: center;
        justify-content: center;
        gap: 8px !important;
    }

    .banner-three-area .time-box-item-content-wrapper {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .heroTicketJump {
        display: flex;
        width: 100%;
        margin-top: 18px;
        padding: 0 !important;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .heroTicketJump .theme-btn-main {
        display: inline-flex;
        width: min(100%, 360px);
        min-height: 58px;
        align-items: center;
        justify-content: center;
        margin-inline: auto;
        text-align: center;
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34), 0 0 24px rgba(255, 106, 0, 0.18);
    }

    .heroTicketJump .theme-btn-text {
        flex: 0 1 auto;
        text-align: center;
    }
}

@media (min-width: 1200px) {
    .banner-three-area .row {
        min-height: 720px;
    }

    .mainLogoHeading {
        margin-bottom: 30px;
    }
}



/* Halloween logo asset integration */
.header-three .logo img.octoberWordmark {
    display: block;
    width: min(220px, 18vw);
    max-width: 220px !important;
    max-height: 84px;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.56));
}

.mobile-menu__logo img.octoberWordmark {
    display: block;
    width: min(100%, 205px);
    max-height: 104px;
    margin-inline: auto;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.56));
}

.mainEventWordmark.octoberWordmark {
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.58));
}

body.motowncon-vendor-hall-page .footer-three .footer-logo {
    width: fit-content;
}

body.motowncon-vendor-hall-page .footer-three .footer-logo img.motowncon-halloween-mini-logo {
    display: block;
    width: 138px !important;
    height: 138px;
    max-width: 138px !important;
    margin: 0;
    object-fit: contain;
    object-position: center;
    border-radius: 50%;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.56));
}

@media (max-width: 1199.98px) {
    .header-three .logo img.octoberWordmark {
        width: min(190px, 22vw);
        max-height: 76px;
    }
}

@media (max-width: 767.98px) {
    .mainEventWordmark.octoberWordmark {
        object-position: center;
    }

    body.motowncon-vendor-hall-page .footer-three .footer-logo img.motowncon-halloween-mini-logo {
        width: 118px !important;
        height: 118px;
        max-width: 118px !important;
        margin-inline: auto;
    }
}


/* =========================================================
   Desktop hero alignment correction
   Aligns the Halloween logo subtitle, location label, event
   details, countdown, and CTA on one centered visual axis.
   ========================================================= */
@media (min-width: 768px) {
    .concordHeroCopy {
        align-items: center;
        text-align: center;
    }

    .mainLogoHeading {
        width: min(100%, 560px);
        margin: 0 auto 28px;
        text-align: center;
    }

    .mainEventWordmark.octoberWordmark {
        width: 100%;
        max-width: 560px;
        margin-inline: auto;
        object-position: center;
    }

    .mainLogoHeading > span {
        display: block;
        width: 100%;
        margin-top: 12px !important;
        text-align: center;
    }

    .concordInfoRail {
        display: flex !important;
        width: min(100%, 560px);
        max-width: 560px;
        margin: 0 auto !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
    }

    .concordInfoRail > div:first-child {
        display: flex;
        width: 100%;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
    }

    .concordInfoRail > div:first-child .writing-mode-md-vertical-lr-180 {
        display: block;
        width: 100%;
        height: auto;
        writing-mode: horizontal-tb !important;
        transform: none !important;
    }

    .banner-three-area .banner-three-venue {
        width: 100%;
        margin: 0 !important;
        padding: 0;
        line-height: 1.2 !important;
        letter-spacing: 0.16em;
        text-align: center;
    }

    .eventInfoPile {
        width: 100%;
        max-width: 560px;
        align-items: stretch;
    }

    .banner-three-area .banner-event-info-item,
    .banner-three-area .banner-event-location-item,
    .banner-three-area .time-box-wrapper,
    .heroTicketJump {
        width: 100%;
        margin-inline: auto;
    }
}

@media (min-width: 1200px) {
    .concordHeroCopy {
        padding-inline: 24px;
    }
}



/* =========================================================
   Desktop location-label refinement
   Restores CONCORD, NC to the left of the event details while
   keeping the complete group centered beneath the hero logo.
   ========================================================= */
@media (min-width: 768px) {
    .concordInfoRail {
        display: grid !important;
        width: min(100%, 620px);
        max-width: 620px;
        margin: 0 auto !important;
        grid-template-columns: 46px minmax(0, 560px);
        align-items: stretch !important;
        justify-content: center !important;
        column-gap: 14px !important;
        row-gap: 0 !important;
    }

    .concordInfoRail > div:first-child {
        display: flex;
        width: 46px;
        min-width: 46px;
        height: 100%;
        align-items: center;
        justify-content: center;
    }

    .concordInfoRail > div:first-child .writing-mode-md-vertical-lr-180 {
        display: flex;
        width: auto;
        height: 100%;
        min-height: 100%;
        align-items: center;
        justify-content: center;
        writing-mode: vertical-rl !important;
        transform: rotate(180deg) !important;
    }

    .banner-three-area .banner-three-venue {
        width: auto;
        margin: 0 !important;
        padding: 0;
        font-size: 0.95rem;
        line-height: 1 !important;
        letter-spacing: 0.18em;
        white-space: nowrap;
        text-align: center;
    }

    .eventInfoPile {
        width: 100%;
        max-width: 560px;
        min-width: 0;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .concordInfoRail {
        width: min(100%, 590px);
        grid-template-columns: 40px minmax(0, 530px);
        column-gap: 12px !important;
    }

    .concordInfoRail > div:first-child {
        width: 40px;
        min-width: 40px;
    }
}


/* =========================================================
   Desktop CONCORD label positioning fix
   Keeps the vertical label beside the full event-information
   stack without allowing it to stretch or increase hero height.
   ========================================================= */
@media (min-width: 768px) {
    .concordInfoRail {
        position: relative;
        display: block !important;
        width: min(100%, 560px);
        max-width: 560px;
        margin: 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .concordInfoRail > div:first-child {
        position: absolute;
        top: 50%;
        left: -54px;
        z-index: 4;
        display: flex;
        width: 38px;
        min-width: 38px;
        height: auto !important;
        min-height: 0 !important;
        align-items: center;
        justify-content: center;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .concordInfoRail > div:first-child .writing-mode-md-vertical-lr-180 {
        display: flex;
        width: 38px;
        height: auto !important;
        min-height: 0 !important;
        align-items: center;
        justify-content: center;
        writing-mode: vertical-rl !important;
        transform: rotate(180deg) !important;
    }

    .banner-three-area .banner-three-venue {
        width: auto;
        margin: 0 !important;
        padding: 0;
        font-size: 0.95rem;
        line-height: 1 !important;
        letter-spacing: 0.18em;
        white-space: nowrap;
        text-align: center;
    }

    .eventInfoPile {
        display: flex;
        width: 100%;
        max-width: 560px;
        min-width: 0;
        flex-direction: column;
        align-items: stretch;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .concordInfoRail > div:first-child {
        left: -44px;
        width: 34px;
        min-width: 34px;
    }

    .concordInfoRail > div:first-child .writing-mode-md-vertical-lr-180 {
        width: 34px;
    }
}


/* =========================================================
   Desktop CONCORD label span refinement
   Makes the vertical location marker slightly taller and moves
   it upward toward the date panel without affecting hero height.
   ========================================================= */
@media (min-width: 992px) {
    .concordInfoRail > div:first-child {
        top: 46%;
        left: -60px;
        width: 42px;
        min-width: 42px;
    }

    .concordInfoRail > div:first-child .writing-mode-md-vertical-lr-180 {
        width: 42px;
    }

    .banner-three-area .banner-three-venue {
        font-size: 1rem;
        letter-spacing: 0.34em;
        line-height: 1 !important;
    }
}

@media (min-width: 1400px) {
    .concordInfoRail > div:first-child {
        top: 45%;
        left: -64px;
    }

    .banner-three-area .banner-three-venue {
        letter-spacing: 0.38em;
    }
}


/* =========================================================
   Anime + comic convention decorative system
   Replaces generic template ellipses/spinners with custom
   manga bursts, speech bubbles, badges and action graphics.
   ========================================================= */
:root {
    --comic-pop-pink: #ff3fa4;
    --comic-pop-blue: #24d8ff;
    --comic-pop-yellow: #ffd93d;
    --comic-pop-orange: #ff6a00;
    --comic-ink: #130b18;
    --comic-paper: #fff8ef;
}

/* Manga burst: About section */
.sixthYearPop {
    width: 176px;
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    text-align: center;
    color: var(--comic-ink);
    background:
        radial-gradient(circle at 50% 48%, var(--comic-pop-yellow) 0 48%, transparent 49%),
        var(--comic-pop-pink);
    clip-path: polygon(
        50% 0%, 58% 21%, 73% 6%, 75% 29%, 96% 19%, 84% 40%,
        100% 50%, 80% 57%, 94% 76%, 71% 72%, 70% 98%, 55% 78%,
        43% 100%, 39% 76%, 16% 91%, 24% 67%, 0% 61%, 20% 49%,
        2% 34%, 27% 33%, 17% 9%, 40% 24%
    );
    filter: drop-shadow(8px 10px 0 rgba(19, 11, 24, .22));
    transform: rotate(-9deg);
    animation: comicStickerBob 6s ease-in-out infinite;
}

.sixthYearPop::before {
    content: "";
    position: absolute;
    inset: 19px;
    border: 4px solid var(--comic-ink);
    clip-path: inherit;
    pointer-events: none;
}

.sixthYearNumber {
    position: relative;
    z-index: 1;
    display: block;
    font-family: var(--heading-font, inherit);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: .16em;
    line-height: 1;
}

.sixthYearPop strong {
    position: relative;
    z-index: 1;
    display: block;
    font-family: var(--heading-font, inherit);
    font-size: 2rem;
    font-weight: 950;
    font-style: italic;
    line-height: .95;
    -webkit-text-stroke: 1px var(--comic-ink);
}

.popAccent {
    position: absolute;
    width: 34px;
    height: 7px;
    border-radius: 0;
    background: var(--comic-pop-blue);
    border: 2px solid var(--comic-ink);
}

.popAccent.spark-one {
    top: 16px;
    right: -18px;
    transform: rotate(-25deg);
}

.popAccent.spark-two {
    bottom: 18px;
    left: -18px;
    transform: rotate(28deg);
}

/* Sponsor speech bubble */
.brand-three-area .sponsorThankYouBubble {
    position: absolute;
    top: 26px;
    right: 4%;
    left: auto;
    width: 230px;
    min-height: 126px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 22px 24px;
    color: var(--comic-ink);
    background: linear-gradient(135deg, var(--comic-pop-blue), #8ff0ff);
    border: 4px solid var(--comic-ink);
    border-radius: 28px 28px 28px 6px;
    box-shadow: 8px 9px 0 var(--comic-pop-pink);
    transform: rotate(3deg);
    z-index: -1;
}

.brand-three-area .sponsorThankYouBubble::after {
    content: "";
    position: absolute;
    right: 30px;
    bottom: -25px;
    width: 32px;
    height: 28px;
    background: var(--comic-pop-blue);
    border-right: 4px solid var(--comic-ink);
    border-bottom: 4px solid var(--comic-ink);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.sponsorThankYouBubble i {
    font-size: 2.25rem;
    color: var(--comic-pop-pink);
    filter: drop-shadow(2px 2px 0 var(--comic-ink));
}

.sponsorThankYouBubble span {
    font-family: var(--heading-font, inherit);
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: .04em;
}

.sponsorThankYouBubble strong {
    font-size: 1.25rem;
}

/* Convention pass: Tickets section */
.passStickerCorner {
    top: 18px !important;
    right: 18px !important;
    transform: rotate(7deg);
    animation: badgeLanyardSway 5.5s ease-in-out infinite;
}

.passStickerCorner::before,
.passStickerCorner::after {
    content: "";
    position: absolute;
    bottom: calc(100% - 5px);
    width: 8px;
    height: 74px;
    border-radius: 8px;
    background: repeating-linear-gradient(
        180deg,
        var(--comic-pop-pink) 0 12px,
        var(--comic-pop-blue) 12px 24px,
        var(--comic-pop-yellow) 24px 36px
    );
    border: 2px solid var(--comic-ink);
}

.passStickerCorner::before {
    left: 44px;
    transform: rotate(-8deg);
}

.passStickerCorner::after {
    right: 44px;
    transform: rotate(8deg);
}

.october31Pass {
    position: relative;
    width: 190px;
    min-height: 132px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 26px 18px 18px;
    text-align: center;
    color: var(--comic-ink);
    background:
        linear-gradient(135deg, rgba(255,255,255,.35), transparent 48%),
        var(--comic-pop-yellow);
    border: 4px solid var(--comic-ink);
    clip-path: polygon(10% 0, 90% 0, 100% 12%, 100% 88%, 90% 100%, 10% 100%, 0 88%, 0 12%);
    box-shadow: 8px 9px 0 var(--comic-pop-blue);
}

.passLanyardHole {
    position: absolute;
    top: 9px;
    width: 28px;
    height: 12px;
    background: var(--comic-ink);
    border-radius: 999px;
}

.october31Pass small,
.october31Pass span {
    font-weight: 900;
    letter-spacing: .08em;
}

.october31Pass strong {
    margin: 3px 0;
    font-family: var(--heading-font, inherit);
    font-size: 1.35rem;
    line-height: 1;
    color: var(--comic-pop-pink);
    -webkit-text-stroke: 1px var(--comic-ink);
}

/* Manga action burst: lower ticket promo */
.mangaActionBurst {
    width: 190px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    background:
        repeating-conic-gradient(
            from 0deg,
            var(--comic-pop-yellow) 0deg 7deg,
            var(--comic-pop-pink) 7deg 13deg,
            var(--comic-paper) 13deg 20deg
        );
    clip-path: polygon(
        50% 0, 57% 28%, 70% 5%, 70% 31%, 94% 17%, 78% 40%,
        100% 48%, 77% 57%, 96% 77%, 69% 70%, 68% 98%, 55% 76%,
        42% 100%, 38% 73%, 14% 91%, 24% 64%, 0 59%, 23% 48%,
        3% 31%, 31% 33%, 19% 7%, 43% 27%
    );
    filter: drop-shadow(8px 9px 0 rgba(19, 11, 24, .45));
    transform: rotate(9deg);
}

.mangaActionBurst::after {
    content: "";
    position: absolute;
    inset: 25px;
    border: 4px solid var(--comic-ink);
    clip-path: inherit;
}

.mangaActionBurst span {
    position: relative;
    z-index: 1;
    font-family: var(--heading-font, inherit);
    font-size: 2.7rem;
    font-weight: 950;
    font-style: italic;
    color: var(--comic-pop-blue);
    -webkit-text-stroke: 2px var(--comic-ink);
    text-shadow: 3px 3px 0 var(--comic-pop-pink);
}

/* Chibi-style dialogue bubble */
.chibiReminderBubble {
    min-width: 205px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px 22px;
    color: var(--comic-ink);
    background: var(--comic-paper);
    border: 4px solid var(--comic-ink);
    border-radius: 30px 30px 8px 30px;
    box-shadow: 8px 8px 0 var(--comic-pop-blue);
    transform: rotate(-4deg);
}

.chibiReminderBubble::after {
    content: "";
    position: absolute;
    left: 24px;
    bottom: -26px;
    width: 32px;
    height: 28px;
    background: var(--comic-paper);
    border-left: 4px solid var(--comic-ink);
    border-bottom: 4px solid var(--comic-ink);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.chibiReminderBubble i {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    color: var(--comic-paper);
    background: linear-gradient(135deg, var(--comic-pop-pink), #ff7bc0);
    border: 3px solid var(--comic-ink);
    clip-path: polygon(50% 0, 61% 18%, 82% 10%, 81% 32%, 100% 42%, 82% 56%, 91% 79%, 66% 76%, 50% 100%, 35% 77%, 9% 88%, 17% 60%, 0 45%, 20% 34%, 16% 11%, 40% 20%);
    font-size: 1.8rem;
}

.chibiReminderBubble span {
    font-family: var(--heading-font, inherit);
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.05;
}

/* Footer comic callouts */
.mtc-footer-speech {
    top: 42px !important;
    left: 22px !important;
    width: 180px;
    min-height: 106px;
    display: grid;
    place-items: center;
    padding: 18px;
    text-align: center;
    color: var(--comic-ink);
    background: var(--comic-pop-blue);
    border: 4px solid var(--comic-ink);
    border-radius: 26px 26px 26px 5px;
    box-shadow: 7px 8px 0 var(--comic-pop-pink);
    transform: rotate(-7deg);
    opacity: .5;
}

.mtc-footer-speech::after {
    content: "";
    position: absolute;
    left: 24px;
    bottom: -23px;
    width: 30px;
    height: 25px;
    background: var(--comic-pop-blue);
    border-left: 4px solid var(--comic-ink);
    border-bottom: 4px solid var(--comic-ink);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.mtc-footer-speech span {
    font-family: var(--heading-font, inherit);
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.05;
}

.mtc-footer-speech strong {
    font-size: 1.45rem;
}

.mtc-footer-con-badge {
    right: 24px !important;
    bottom: 24px !important;
    width: 150px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--comic-ink);
    text-align: center;
    background:
        linear-gradient(135deg, rgba(255,255,255,.26), transparent 45%),
        var(--comic-pop-yellow);
    border: 5px solid var(--comic-ink);
    clip-path: polygon(50% 0, 62% 13%, 79% 8%, 83% 26%, 100% 36%, 90% 53%, 98% 72%, 78% 78%, 69% 98%, 50% 88%, 30% 100%, 22% 80%, 2% 74%, 11% 55%, 0 38%, 19% 28%, 20% 8%, 39% 14%);
    filter: drop-shadow(8px 8px 0 var(--comic-pop-pink));
    transform: rotate(8deg);
    opacity: .55;
}

.mtc-footer-con-badge small {
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.mtc-footer-con-badge strong {
    font-family: var(--heading-font, inherit);
    font-size: 1.5rem;
    line-height: 1;
}

.mtc-footer-con-badge span {
    font-weight: 950;
}

/* Make the activity icons feel like manga panels instead of generic circles */
.service-three-card-icon {
    border-radius: 18px 5px 18px 5px !important;
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
    border: 3px solid var(--comic-ink);
    box-shadow: 7px 7px 0 var(--comic-pop-yellow);
    transform: rotate(-3deg);
}

.event-three-area .col-xl-3:nth-child(2) .service-three-card-icon {
    background: linear-gradient(135deg, var(--comic-pop-pink), #ff78bd) !important;
}

.event-three-area .col-xl-3:nth-child(3) .service-three-card-icon {
    background: linear-gradient(135deg, var(--comic-pop-blue), #1289ff) !important;
    transform: rotate(3deg);
}

.event-three-area .col-xl-3:nth-child(4) .service-three-card-icon {
    background: linear-gradient(135deg, var(--comic-pop-yellow), var(--comic-pop-orange)) !important;
}

.event-three-area .col-xl-3:nth-child(5) .service-three-card-icon {
    background: linear-gradient(135deg, #9a67ff, var(--comic-pop-pink)) !important;
    transform: rotate(3deg);
}

/* Ticket category labels become compact convention badge tabs */
.ticket-three-card-tag {
    width: fit-content;
    padding: 8px 18px 7px;
    color: var(--comic-ink) !important;
    background: var(--comic-pop-yellow);
    border: 2px solid var(--comic-ink);
    border-radius: 0 !important;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    box-shadow: 4px 4px 0 rgba(19, 11, 24, .16);
    font-weight: 900;
    letter-spacing: .04em;
}

.ticket-three-card:nth-child(1) .ticket-three-card-tag {
    background: #ff8a1f;
}

@keyframes comicStickerBob {
    0%, 100% { transform: rotate(-9deg) translateY(0); }
    50% { transform: rotate(-6deg) translateY(-8px); }
}

@keyframes badgeLanyardSway {
    0%, 100% { transform: rotate(7deg) translateY(0); }
    50% { transform: rotate(4deg) translateY(-8px); }
}

@media (max-width: 1199.98px) {
    .brand-three-area .sponsorThankYouBubble {
        width: 190px;
        min-height: 108px;
        right: 2%;
        opacity: .72;
    }

    .passStickerCorner {
        transform: scale(.82) rotate(7deg);
        transform-origin: top right;
    }
}

/* Preserve the tidy mobile experience: decorative callouts stay hidden. */
@media (max-width: 991.98px) {
    .sixthYearPop,
    .brand-three-area .sponsorThankYouBubble,
    .passStickerCorner,
    .mangaActionBurst,
    .chibiReminderBubble,
    .mtc-footer-speech,
    .mtc-footer-con-badge {
        display: none !important;
    }

    .service-three-card-icon {
        transform: none !important;
        box-shadow: 5px 5px 0 var(--comic-pop-yellow);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sixthYearPop,
    .passStickerCorner {
        animation: none !important;
    }
}


/* Itasha Trunk-or-Treat feature */
.halloweenDayCopy { width: 100%; }

.trunkTreatDetails {
    max-width: 650px;
    margin-top: 28px;
    padding: 24px 26px;
    color: #fff4e6;
    background:
        linear-gradient(135deg, rgba(11,8,13,.88), rgba(33,18,25,.78)),
        radial-gradient(circle at 100% 0%, rgba(255,106,0,.22), transparent 46%);
    border: 1px solid rgba(255,138,31,.5);
    border-left: 4px solid #ff6a00;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(0,0,0,.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.trunkTreatHeading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 14px;
}

.trunkTreatPumpkin {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    color: #171015;
    background: linear-gradient(135deg, #ffd93d, #ff6a00);
    border: 2px solid rgba(255,244,230,.8);
    border-radius: 15px 5px 15px 5px;
    box-shadow: 5px 5px 0 rgba(158,27,50,.78);
    transform: rotate(-3deg);
    font-size: 1.65rem;
}

.trunkTreatKicker {
    display: block;
    margin-bottom: 4px;
    color: #ffb35c;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .12em;
    line-height: 1.2;
    text-transform: uppercase;
}

.trunkTreatHeading h3 {
    margin: 0;
    color: #fff4e6;
    font-size: clamp(1.5rem, 2vw, 2rem);
    line-height: 1.05;
}

.trunkTreatDetails > p {
    margin: 0;
    color: rgba(255,244,230,.86);
    font-size: 1rem;
    line-height: 1.7;
}

.trunkTreatList {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.trunkTreatList li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255,244,230,.92);
    line-height: 1.45;
}

.trunkTreatList i {
    display: inline-grid;
    place-items: center;
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    margin-top: 1px;
    color: #171015;
    background: #ff8a1f;
    border-radius: 50%;
    font-size: .78rem;
}

.ticket-three-area-bottom .itashaPhotoCard {
    position: relative;
    width: 100%;
    min-height: 520px;
    margin: 0;
    overflow: hidden;
    isolation: isolate;
    background: #0b080d;
    border: 1px solid rgba(255,138,31,.5);
    border-radius: 28px 8px 28px 8px;
    box-shadow: 0 28px 70px rgba(0,0,0,.42), 12px 12px 0 rgba(158,27,50,.34);
}

.ticket-three-area-bottom .itashaPhotoCard::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(11,8,13,.1) 5%, rgba(11,8,13,.25) 42%, rgba(11,8,13,.94) 100%),
        linear-gradient(90deg, rgba(11,8,13,.55), transparent 52%);
}

.ticket-three-area-bottom .itashaPhotoCard::after {
    content: "";
    position: absolute;
    inset: 14px;
    z-index: 4;
    pointer-events: none;
    border: 1px solid rgba(255,244,230,.2);
    border-radius: 21px 4px 21px 4px;
}

.ticket-three-area-bottom .itashaPhotoCard > img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.015);
    transition: transform .8s ease;
}

.ticket-three-area-bottom .itashaPhotoCard:hover > img { transform: scale(1.055); }

.photoShade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 84% 16%, rgba(255,106,0,.32), transparent 34%),
        radial-gradient(circle at 10% 80%, rgba(158,27,50,.34), transparent 38%);
    mix-blend-mode: screen;
    opacity: .78;
}

.trunkTreatStrip {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px;
    color: #fff4e6;
}

.trunkTreatBadge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    color: #171015;
    background: linear-gradient(135deg, #ffd93d, #ff8a1f);
    border: 2px solid rgba(255,244,230,.88);
    border-radius: 999px;
    box-shadow: 4px 5px 0 rgba(158,27,50,.72);
    font-size: .82rem;
    font-weight: 950;
    letter-spacing: .07em;
    text-transform: uppercase;
    transform: rotate(-2deg);
}

.itashaEyebrow {
    margin: 0 0 7px;
    color: #ffb35c;
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.trunkTreatStrip h3 {
    max-width: 440px;
    margin: 0 0 9px;
    color: #fff4e6;
    font-size: clamp(2rem, 3vw, 3.15rem);
    line-height: .98;
    text-shadow: 0 8px 24px rgba(0,0,0,.72);
}

.trunkTreatStrip div > p:last-child {
    max-width: 460px;
    margin: 0;
    color: rgba(255,244,230,.86);
    font-size: 1rem;
    line-height: 1.55;
}

.photoCardCorner {
    position: absolute;
    z-index: 5;
    width: 54px;
    height: 54px;
    pointer-events: none;
}

.photoCardCorner.corner-one {
    top: 0;
    right: 0;
    border-top: 5px solid #ff6a00;
    border-right: 5px solid #ff6a00;
}

.photoCardCorner.corner-two {
    bottom: 0;
    left: 0;
    border-bottom: 5px solid #9e1b32;
    border-left: 5px solid #9e1b32;
}

@media (max-width: 1199.98px) {
    .ticket-three-area-bottom .itashaPhotoCard {
        min-height: 460px;
        max-width: 720px;
        margin-inline: auto;
    }

    .trunkTreatDetails {
        max-width: 720px;
        margin-inline: auto;
    }
}

@media (max-width: 767.98px) {
    .trunkTreatDetails {
        margin-top: 22px;
        padding: 20px 18px;
        border-left-width: 1px;
        text-align: center;
    }

    .trunkTreatHeading {
        flex-direction: column;
        justify-content: center;
        gap: 11px;
    }

    .trunkTreatList {
        max-width: 440px;
        margin-inline: auto;
    }

    .trunkTreatList li {
        justify-content: flex-start;
        text-align: left;
    }

    .ticket-three-area-bottom .itashaPhotoCard {
        min-height: 410px;
        border-radius: 22px 7px 22px 7px;
        box-shadow: 0 22px 52px rgba(0,0,0,.4), 7px 7px 0 rgba(158,27,50,.28);
    }

    .trunkTreatStrip {
        align-items: center;
        padding: 22px;
        text-align: center;
    }

    .trunkTreatBadge { align-self: center; }

    .trunkTreatStrip h3 {
        font-size: clamp(1.85rem, 9vw, 2.6rem);
    }
}

@media (max-width: 479.98px) {
    .ticket-three-area-bottom .itashaPhotoCard { min-height: 365px; }
    .trunkTreatStrip { padding: 18px; }
    .trunkTreatStrip div > p:last-child { font-size: .92rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ticket-three-area-bottom .itashaPhotoCard > img { transition: none; }
    .ticket-three-area-bottom .itashaPhotoCard:hover > img { transform: scale(1.015); }
}


/* =========================================================
   Halloween promo flow and contrast correction
   - Removes the template's constrained section height
   - Keeps all content above the footer
   - Places the ticket CTA back in normal document flow
   - Adds a strong hero-style tint for readable text
   ========================================================= */
.halloweenFeatureBand {
    position: relative;
    isolation: isolate;
    height: auto !important;
    min-height: 0 !important;
    padding-top: 110px !important;
    padding-bottom: 120px !important;
    overflow: hidden !important;
    background-color: #0b080d !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-blend-mode: multiply;
}

.halloweenFeatureBand::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(8, 5, 11, .94) 0%,
            rgba(11, 7, 14, .88) 38%,
            rgba(12, 8, 15, .76) 68%,
            rgba(8, 5, 11, .82) 100%
        ),
        linear-gradient(
            180deg,
            rgba(8, 5, 11, .48) 0%,
            rgba(8, 5, 11, .68) 52%,
            rgba(8, 5, 11, .9) 100%
        );
}

.halloweenFeatureBand::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 25%, rgba(158, 27, 50, .24), transparent 34%),
        radial-gradient(circle at 82% 24%, rgba(255, 106, 0, .18), transparent 32%);
}

.halloweenFeatureBand > .container {
    position: relative;
    z-index: 2;
}

.halloweenFeatureBand > .container > .row {
    align-items: center !important;
    row-gap: 52px;
}

.halloweenFeatureBand .col-xl-6,
.halloweenFeatureBand .col-xl-5 {
    position: relative;
    z-index: 2;
}

.halloweenFeatureBand .section-wrapper,
.halloweenFeatureBand .seat-booking-area-quote-wrapper {
    position: relative !important;
    z-index: 2;
}

.halloweenFeatureBand .section-sub-title,
.halloweenFeatureBand .section-title,
.halloweenFeatureBand .section-description-title,
.halloweenFeatureBand .section-description {
    color: #fff4e6 !important;
    text-shadow:
        0 2px 2px rgba(0, 0, 0, .95),
        0 8px 24px rgba(0, 0, 0, .92);
}

.halloweenFeatureBand .section-title {
    max-width: 650px;
}

.halloweenFeatureBand .section-description {
    max-width: 620px;
    padding: 14px 16px;
    background: rgba(8, 5, 11, .58);
    border: 1px solid rgba(255, 138, 31, .24);
    border-radius: 12px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.halloweenFeatureBand .seat-booking-area-quote-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    overflow: visible !important;
}

.halloweenFeatureBand .halloweenDayCopy {
    width: 100%;
}

.halloweenFeatureBand .trunkTreatDetails {
    position: relative;
    z-index: 2;
    overflow: visible;
}

/* The original template floats this sticker outside its content column.
   Keep it in flow so the parent section correctly includes its height. */
.halloweenFeatureBand .seat-booking-sticker {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    translate: none !important;
    align-self: flex-start;
    width: auto;
    height: auto;
    margin-top: 28px;
    margin-bottom: 0;
    z-index: 3;
}

.halloweenFeatureBand .seat-booking-sticker .ticket-button {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
}

.halloweenFeatureBand .itashaPhotoCard {
    align-self: center;
    min-height: 560px;
    margin-top: 0;
    margin-bottom: 0;
}

.halloweenFeatureBand + .footer-three {
    position: relative;
    z-index: 1;
    clear: both;
    margin-top: 0 !important;
}

@media (max-width: 1199.98px) {
    .halloweenFeatureBand {
        padding-top: 90px !important;
        padding-bottom: 100px !important;
    }

    .halloweenFeatureBand > .container > .row {
        row-gap: 44px;
    }

    .halloweenFeatureBand .seat-booking-area-quote-wrapper {
        align-items: center !important;
        text-align: center;
    }

    .halloweenFeatureBand .section-title,
    .halloweenFeatureBand .section-description {
        margin-inline: auto;
    }

    .halloweenFeatureBand .seat-booking-sticker {
        align-self: center;
    }
}

@media (max-width: 767.98px) {
    .halloweenFeatureBand {
        padding-top: 72px !important;
        padding-bottom: 80px !important;
        background-position: 44% center !important;
    }

    .halloweenFeatureBand::before {
        background:
            linear-gradient(
                180deg,
                rgba(8, 5, 11, .9) 0%,
                rgba(8, 5, 11, .82) 48%,
                rgba(8, 5, 11, .94) 100%
            );
    }

    .halloweenFeatureBand .section-description {
        padding: 13px 14px;
    }

    .halloweenFeatureBand .itashaPhotoCard {
        min-height: 430px;
    }

    .halloweenFeatureBand .seat-booking-sticker {
        margin-top: 24px;
    }
}

@media (max-width: 479.98px) {
    .halloweenFeatureBand {
        padding-top: 60px !important;
        padding-bottom: 68px !important;
    }

    .halloweenFeatureBand .itashaPhotoCard {
        min-height: 385px;
    }
}


/* =========================================================
   Ticket admission-label alignment
   Keeps Premium, General and Kids badges centered directly
   above their corresponding ticket name, price and features.
   ========================================================= */
.ticket-three-card .ticket-card-content {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    width: 100%;
    text-align: center;
}

.ticket-three-card .ticket-three-card-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 220px;
    max-width: calc(100% - 32px);
    min-height: 42px;
    margin: 0 auto 14px !important;
    padding: 8px 18px 7px;
    text-align: center !important;
    line-height: 1.15;
}

.ticket-three-card .ticket-three-card-name,
.ticket-three-card .ticket-three-card-price {
    align-self: center;
    width: 100%;
    margin-inline: auto;
    text-align: center !important;
}

.ticket-three-card .ticket-three-card-price {
    justify-content: center;
}

@media (max-width: 479.98px) {
    .ticket-three-card .ticket-three-card-tag {
        width: min(220px, calc(100% - 20px));
    }
}


/* =========================================================
   Itasha Trunk-or-Treat CTA shape refinement
   Replaces the round promo button with a more regular,
   ticket-inspired car/event CTA.
   ========================================================= */
.halloweenFeatureBand .itashaTicketArea {
    align-self: flex-start;
    margin-top: 28px;
}

.halloweenFeatureBand .itashaTicketButton,
.halloweenFeatureBand .itashaTicketArea .ticket-button {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 220px;
    min-height: 64px;
    padding: 16px 28px 16px 58px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #ff7a00 0%, #ff5a00 100%) !important;
    color: #fff8ef !important;
    border: 2px solid rgba(255, 244, 230, .78) !important;
    box-shadow:
        0 14px 28px rgba(0, 0, 0, .24),
        6px 6px 0 rgba(158, 27, 50, .45) !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    letter-spacing: .01em;
    line-height: 1.1;
    text-align: center;
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 10px 50%);
    transform: none !important;
    overflow: hidden;
}

.halloweenFeatureBand .itashaTicketButton::before,
.halloweenFeatureBand .itashaTicketArea .ticket-button::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 28px;
    height: 28px;
    transform: translateY(-50%);
    background:
        radial-gradient(circle at 25% 70%, #171015 0 2px, transparent 3px),
        radial-gradient(circle at 75% 70%, #171015 0 2px, transparent 3px),
        linear-gradient(#171015, #171015) 50% 62% / 18px 3px no-repeat,
        linear-gradient(#171015, #171015) 50% 46% / 16px 8px no-repeat;
    background-repeat: no-repeat;
    border-radius: 6px;
    opacity: .95;
}

.halloweenFeatureBand .itashaTicketButton::after,
.halloweenFeatureBand .itashaTicketArea .ticket-button::after {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    right: 14px;
    width: 10px;
    border-left: 2px dashed rgba(255, 244, 230, .75);
    opacity: .85;
}

.halloweenFeatureBand .itashaTicketButton:hover,
.halloweenFeatureBand .itashaTicketArea .ticket-button:hover {
    background: linear-gradient(135deg, #ff8a1f 0%, #ff6400 100%) !important;
    color: #fff8ef !important;
    transform: translateY(-2px) !important;
    box-shadow:
        0 18px 34px rgba(0, 0, 0, .28),
        7px 7px 0 rgba(158, 27, 50, .5) !important;
}

.halloweenFeatureBand .itashaTicketButton i,
.halloweenFeatureBand .itashaTicketArea .ticket-button i {
    margin-left: 2px;
}

@media (max-width: 767.98px) {
    .halloweenFeatureBand .itashaTicketArea {
        align-self: center;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .halloweenFeatureBand .itashaTicketButton,
    .halloweenFeatureBand .itashaTicketArea .ticket-button {
        min-width: min(280px, 100%);
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .halloweenFeatureBand .itashaTicketButton:hover,
    .halloweenFeatureBand .itashaTicketArea .ticket-button:hover {
        transform: none !important;
    }
}


/* =========================================================
   Itasha CTA: true car-icon button refinement
   Uses a clear coupe-car icon with stacked ticket copy.
   ========================================================= */
.halloweenFeatureBand .itashaTicketButton,
.halloweenFeatureBand .itashaTicketArea .ticket-button {
    min-width: 272px;
    min-height: 74px;
    padding: 14px 22px 14px 20px !important;
    border-radius: 18px !important;
    clip-path: none !important;
    gap: 14px !important;
}

.halloweenFeatureBand .itashaTicketButton::before,
.halloweenFeatureBand .itashaTicketButton::after,
.halloweenFeatureBand .itashaTicketArea .ticket-button::before,
.halloweenFeatureBand .itashaTicketArea .ticket-button::after {
    content: none !important;
}

.halloweenFeatureBand .mtc-itasha-car-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 42px;
    flex: 0 0 58px;
    color: #fff8ef;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.28));
}

.halloweenFeatureBand .mtc-itasha-car-icon svg {
    width: 58px;
    height: 30px;
    display: block;
    overflow: visible;
}

.halloweenFeatureBand .mtc-itasha-ticket-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    text-align: left;
    line-height: 1.05;
}

.halloweenFeatureBand .mtc-itasha-ticket-main {
    display: block;
    color: #fff8ef;
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: .01em;
    white-space: nowrap;
}

.halloweenFeatureBand .mtc-itasha-ticket-sub {
    display: block;
    margin-top: 4px;
    color: rgba(255,248,239,.82);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .halloweenFeatureBand .itashaTicketButton,
    .halloweenFeatureBand .itashaTicketArea .ticket-button {
        min-width: min(300px, 100%);
        justify-content: center;
    }

    .halloweenFeatureBand .mtc-itasha-ticket-copy {
        align-items: flex-start;
    }
}

@media (max-width: 420px) {
    .halloweenFeatureBand .itashaTicketButton,
    .halloweenFeatureBand .itashaTicketArea .ticket-button {
        min-width: min(100%, 320px);
        padding: 13px 18px !important;
        gap: 10px !important;
    }

    .halloweenFeatureBand .mtc-itasha-car-icon {
        width: 50px;
        flex-basis: 50px;
    }

    .halloweenFeatureBand .mtc-itasha-ticket-main {
        font-size: .95rem;
    }

    .halloweenFeatureBand .mtc-itasha-ticket-sub {
        font-size: .68rem;
    }
}


/* =========================================================
   Car-shaped SVG CTA button
   The car graphic itself is the button; no outer square/box.
   ========================================================= */
.halloweenFeatureBand .itashaTicketArea {
    align-self: flex-start;
    margin-top: 28px;
}

.halloweenFeatureBand .itashaTicketButton,
.halloweenFeatureBand .itashaTicketArea .ticket-button {
    display: inline-block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 360px;
    max-width: min(100%, 360px);
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    clip-path: none !important;
    text-decoration: none !important;
    line-height: 0;
    transform-origin: center center;
}

.halloweenFeatureBand .itashaTicketButton::before,
.halloweenFeatureBand .itashaTicketButton::after,
.halloweenFeatureBand .itashaTicketArea .ticket-button::before,
.halloweenFeatureBand .itashaTicketArea .ticket-button::after {
    content: none !important;
}

.halloweenFeatureBand .itashaTicketButton .mtc-car-button-svg,
.halloweenFeatureBand .itashaTicketArea .ticket-button .mtc-car-button-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.halloweenFeatureBand .itashaTicketButton:hover,
.halloweenFeatureBand .itashaTicketArea .ticket-button:hover {
    transform: translateY(-3px) scale(1.02) !important;
}

.halloweenFeatureBand .itashaTicketButton:hover .mtc-car-button-svg,
.halloweenFeatureBand .itashaTicketArea .ticket-button:hover .mtc-car-button-svg {
    filter: drop-shadow(0 16px 24px rgba(255,106,0,.22));
}

.halloweenFeatureBand .itashaTicketButton:focus-visible,
.halloweenFeatureBand .itashaTicketArea .ticket-button:focus-visible {
    outline: 3px solid rgba(255, 217, 61, 0.95) !important;
    outline-offset: 6px;
    border-radius: 12px;
}

@media (max-width: 767.98px) {
    .halloweenFeatureBand .itashaTicketArea {
        align-self: center;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .halloweenFeatureBand .itashaTicketButton,
    .halloweenFeatureBand .itashaTicketArea .ticket-button {
        width: min(320px, 100%);
    }
}

@media (max-width: 420px) {
    .halloweenFeatureBand .itashaTicketButton,
    .halloweenFeatureBand .itashaTicketArea .ticket-button {
        width: min(290px, 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .halloweenFeatureBand .itashaTicketButton:hover,
    .halloweenFeatureBand .itashaTicketArea .ticket-button:hover {
        transform: none !important;
    }
}


/* =========================================================
   Car CTA footer-overlap correction
   Keeps the SVG and its shadow inside reserved section space.
   ========================================================= */
.halloweenFeatureBand {
    padding-bottom: 165px !important;
}

.halloweenFeatureBand .itashaTicketArea {
    position: relative;
    isolation: isolate;
    flex: 0 0 auto;
    min-height: 160px;
    margin-top: 28px;
    margin-bottom: 24px;
    padding-bottom: 10px;
    overflow: visible;
}

.halloweenFeatureBand .itashaTicketButton,
.halloweenFeatureBand .itashaTicketArea .ticket-button {
    position: relative !important;
    z-index: 2;
    vertical-align: top;
}

.halloweenFeatureBand .itashaTicketButton .mtc-car-button-svg,
.halloweenFeatureBand .itashaTicketArea .ticket-button .mtc-car-button-svg {
    overflow: hidden !important;
    filter: drop-shadow(0 8px 7px rgba(0, 0, 0, .3));
}

.halloweenFeatureBand .itashaTicketButton:hover .mtc-car-button-svg,
.halloweenFeatureBand .itashaTicketArea .ticket-button:hover .mtc-car-button-svg {
    filter: drop-shadow(0 10px 9px rgba(255, 106, 0, .18));
}

.halloweenFeatureBand + .footer-three {
    position: relative;
    z-index: 5;
    clear: both;
}

@media (max-width: 1199.98px) {
    .halloweenFeatureBand {
        padding-bottom: 135px !important;
    }
}

@media (max-width: 767.98px) {
    .halloweenFeatureBand {
        padding-bottom: 110px !important;
    }

    .halloweenFeatureBand .itashaTicketArea {
        min-height: 145px;
        margin-bottom: 18px;
    }
}

@media (max-width: 420px) {
    .halloweenFeatureBand {
        padding-bottom: 95px !important;
    }

    .halloweenFeatureBand .itashaTicketArea {
        min-height: 132px;
    }
}


/* =========================================================
   Real Coupe Car SVG ticket button
   Uses images/coupecar.svg as the entire clickable button.
   ========================================================= */
.halloweenFeatureBand .itashaTicketArea {
    position: relative;
    min-height: 160px;
    margin-top: 28px;
    margin-bottom: 28px;
    padding-bottom: 8px;
    overflow: visible;
}

.halloweenFeatureBand .ticketCarButton,
.halloweenFeatureBand .itashaTicketArea .ticket-button {
    position: relative !important;
    display: inline-block !important;
    width: min(360px, 100%);
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    clip-path: none !important;
    overflow: visible !important;
    text-decoration: none !important;
    transform-origin: center;
}

.halloweenFeatureBand .ticketCarButton::before,
.halloweenFeatureBand .ticketCarButton::after,
.halloweenFeatureBand .itashaTicketArea .ticket-button::before,
.halloweenFeatureBand .itashaTicketArea .ticket-button::after {
    content: none !important;
}

.ticketCarSvg {
    position: relative;
    display: block;
    width: 100%;
    line-height: normal;
}

.ticketCarArtwork {
    display: block;
    width: 100%;
    height: auto;
    max-height: 150px;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 9px 8px rgba(0, 0, 0, .34));
    transition: transform .25s ease, filter .25s ease;
}

.ticketCarLabel {
    position: absolute;
    left: 50%;
    top: 58%;
    z-index: 2;
    transform: translate(-50%, -50%);
    color: #fff8ef;
    font-family: var(--heading-font, Arial, sans-serif);
    font-size: clamp(1.15rem, 2.1vw, 1.65rem);
    font-weight: 950;
    letter-spacing: .035em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow:
        0 2px 2px rgba(0, 0, 0, .98),
        0 0 8px rgba(0, 0, 0, .9),
        2px 2px 0 rgba(0, 0, 0, .72);
    pointer-events: none;
}

.ticketCarButton:hover .ticketCarArtwork,
.itashaTicketArea .ticket-button:hover .ticketCarArtwork {
    transform: translateY(-3px) scale(1.025);
    filter:
        drop-shadow(0 12px 10px rgba(0, 0, 0, .38))
        drop-shadow(0 0 8px rgba(255, 106, 0, .25));
}

.ticketCarButton:focus-visible {
    outline: 3px solid #ffd93d !important;
    outline-offset: 7px;
    border-radius: 16px;
}

@media (max-width: 767.98px) {
    .halloweenFeatureBand .itashaTicketArea {
        display: flex;
        justify-content: center;
        width: 100%;
        min-height: 145px;
        margin-bottom: 22px;
    }

    .halloweenFeatureBand .ticketCarButton,
    .halloweenFeatureBand .itashaTicketArea .ticket-button {
        width: min(320px, 100%);
    }

    .ticketCarLabel {
        top: 58%;
        font-size: clamp(1.05rem, 5vw, 1.4rem);
    }
}

@media (max-width: 420px) {
    .halloweenFeatureBand .itashaTicketArea {
        min-height: 132px;
    }

    .halloweenFeatureBand .ticketCarButton,
    .halloweenFeatureBand .itashaTicketArea .ticket-button {
        width: min(285px, 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ticketCarArtwork {
        transition: none;
    }

    .ticketCarButton:hover .ticketCarArtwork,
    .itashaTicketArea .ticket-button:hover .ticketCarArtwork {
        transform: none;
    }
}


/* =========================================================
   Coupe car ticket text color refinement
   Changes the overlaid Tickets label to Halloween orange
   with a dark outline/shadow for readability on white SVG.
   ========================================================= */
.ticketCarLabel {
    color: #ff6a00 !important;
    text-shadow:
        -1px -1px 0 rgba(0, 0, 0, .98),
         1px -1px 0 rgba(0, 0, 0, .98),
        -1px  1px 0 rgba(0, 0, 0, .98),
         1px  1px 0 rgba(0, 0, 0, .98),
         0  0  8px rgba(0, 0, 0, .80),
         0  2px 4px rgba(0, 0, 0, .90) !important;
}


/* =========================================================
   Header navigation sync
   Matches the supplied MoTownCon header links and registration
   forms while preserving the new template's visual system.
   ========================================================= */
@media (min-width: 1200px) {
    .header-three .header-menu > .nav-menu {
        gap: 1.2rem !important;
        padding-inline: 1.1rem !important;
        flex-wrap: nowrap;
    }

    .header-three .header-menu > .nav-menu > .nav-menu__item > .nav-menu__link {
        font-size: 0.93rem;
        white-space: nowrap;
    }

    .header-three .header-menu .nav-submenu {
        min-width: 290px;
    }

    .header-three .header-menu .nav-submenu__link {
        white-space: normal;
        line-height: 1.3;
    }
}

@media (min-width: 1400px) {
    .header-three .header-menu > .nav-menu {
        gap: 1.55rem !important;
        padding-inline: 1.5rem !important;
    }

    .header-three .header-menu > .nav-menu > .nav-menu__item > .nav-menu__link {
        font-size: 1rem;
    }
}

/* "Itasha / Trunk-or-Treat Registration" wraps on narrow phones. Let it
   take a second line instead of shrinking the whole drawer text. */
.mobile-menu .nav-submenu__link {
    white-space: normal !important;
    line-height: 1.35;
}