@media (max-width: 800px) {

    .header-inner {
        width:
            calc(100% - 30px);
    }

    .main-nav {
        display: none;
    }

    .mobile-menu-button {
        display: block;
    }

    .main-nav.mobile-open {
        position: absolute;

        top: 72px;
        left: 0;
        right: 0;

        padding: 15px;

        display: flex;

        flex-direction: column;

        background:
            rgba(8, 10, 15, 0.97);

        border-bottom:
            1px solid var(--border);

        box-shadow: 0 18px 35px rgba(0, 0, 0, 0.24);
        animation: nav-panel-in 0.25s ease both;
    }

    .main-nav.mobile-open a {
        width: 100%;
        animation: nav-link-in 0.3s ease both;
    }

    .main-nav.mobile-open a:nth-child(2) { animation-delay: 0.04s; }
    .main-nav.mobile-open a:nth-child(3) { animation-delay: 0.08s; }
    .main-nav.mobile-open a:nth-child(4) { animation-delay: 0.12s; }
    .main-nav.mobile-open a:nth-child(5) { animation-delay: 0.16s; }
    .main-nav.mobile-open a:nth-child(6) { animation-delay: 0.2s; }

    @keyframes nav-panel-in {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @keyframes nav-link-in {
        from { opacity: 0; transform: translateX(-10px); }
        to { opacity: 1; transform: translateX(0); }
    }

    .countdown-box {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .countdown-insight {
        grid-template-columns: auto 1fr;
    }

    .countdown-insight-date {
        grid-column: 2;
        padding-top: 12px;
        padding-left: 0;
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .upcoming-holiday {
        grid-template-columns: auto 1fr;
    }

    .upcoming-countdown,
    .upcoming-holiday .button {
        grid-column: 1 / -1;
    }

    .upcoming-countdown {
        justify-content: space-between;
    }

    .plan-ahead-grid {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .footer-bottom {
        flex-direction:
            column;

        text-align:
            center;
    }
}

@media (max-width: 500px) {

    main {
        width:
            calc(100% - 30px);
    }

    main:has(.countdown-page) {
        width: 100%;
    }

    .hero {
        min-height:
            560px;

        padding:
            60px 0;
    }

    .hero-icon {
        font-size:
            4rem;
    }

    .countdown-box {
        gap:
            10px;
    }

    .countdown-unit {
        padding:
            22px 10px;
    }

    .countdown-insight {
        gap: 14px;
        padding: 20px;
    }

    .countdown-page::after {
        top: 4%;
        right: -25%;
        width: 250px;
        height: 250px;
        font-size: 9rem;
    }

    .custom-form {
        padding:
            25px 20px;
    }

    .footer-inner {
        grid-template-columns:
            1fr;

        text-align:
            center;
    }

    .footer-brand p {
        margin-left:
            auto;

        margin-right:
            auto;
    }

    .error-card,
    .maintenance-card {
        padding:
            40px 20px;
    }
}

@media (max-width: 800px) {
    .header-inner {
        flex-direction: column;
        justify-content: center;
        padding: 16px 20px;
        gap: 10px;
    }

    .main-nav {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .page-container { padding: 50px 20px; }
    .card-grid { grid-template-columns: 1fr 1fr; }
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .upcoming-card { grid-template-columns: 52px 64px 1fr; }
    .upcoming-card .button { grid-column: 1 / -1; }
}

@media (max-width: 550px) {
    .card-grid { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr; }
    .page-heading h1 { letter-spacing: -1px; }
    .button { width: 100%; }
}