/* ==========================================================================
   Responsive — tablet & mobile breakpoints
   ========================================================================== */

@media (max-width: 1000px) {
    .nav-links {
        gap: 1.25rem;
    }

    .nav-links a {
        font-size: 1rem;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 900px) {
    :root {
        --nav-clearance: calc(5.5rem + env(safe-area-inset-top, 0px));
    }

    section {
        padding: 5rem 0;
    }

    body > section:first-of-type {
        padding-top: max(5rem, var(--nav-clearance));
    }

    .hero {
        padding: 8rem 0 5rem;
    }

    body > .hero:first-of-type {
        padding-top: max(8rem, var(--nav-clearance));
    }

    .nav-toggle {
        display: inline-flex;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0.25rem;
        padding: 1rem 2rem;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
    }

    #navbar.nav-open .nav-links {
        display: flex;
    }

    #navbar.nav-open .nav-cta {
        display: inline-flex;
    }

    .nav-cta {
        display: none;
    }

    /* animasi bar jadi "X" saat terbuka */
    #navbar.nav-open .nav-toggle-bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    #navbar.nav-open .nav-toggle-bar:nth-child(2) {
        opacity: 0;
    }

    #navbar.nav-open .nav-toggle-bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .about-image-wrap {
        position: static;
        max-width: 320px;
    }

    .process-grid {
        grid-template-columns: 1fr;
    }

    .process-grid::before {
        display: none;
    }

    .featured-card {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 2rem;
    }

    .credentials-grid {
        grid-template-columns: 1fr;
    }

    .contact-wrap {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .tier-grid {
        grid-template-columns: 1fr;
    }

    .tier-card.featured {
        transform: none;
    }

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

    .packages-grid {
        grid-template-columns: 1fr;
    }

    .package-card.retainer-wide {
        flex-direction: column;
    }

    .package-card.retainer-wide .package-side {
        align-items: flex-start;
        min-width: 0;
    }

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

@media (max-width: 640px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-bottom {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 540px) {
    body {
        font-size: 17px;
    }

    section {
        padding: 4rem 0;
    }

    body > section:first-of-type {
        padding-top: max(4rem, var(--nav-clearance));
    }

    body > .hero:first-of-type {
        padding-top: max(7rem, var(--nav-clearance));
    }

    .container {
        padding: 0 1.25rem;
    }

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

    .cert-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .featured-name {
        font-size: 1.4rem;
    }

    .timeline-role {
        font-size: 1.2rem;
    }

    .client-card {
        flex-direction: column;
        gap: 1rem;
    }

    .contact-panel {
        padding: 2rem 1.5rem;
    }

    .svc-flow {
        grid-template-columns: 1fr;
    }

    .pkg-flow {
        grid-template-columns: 1fr;
    }

    .pkg-comparison {
        overflow-x: auto;
    }

    .tier-price-amount {
        font-size: 1.6rem;
    }
}