@media (max-width: 1200px) {
    :root {
        --container: 1120px;
        --section-padding: 96px;
    }

    .site-header {
        padding-inline: 24px;
    }
}

@media (max-width: 992px) {
    :root {
        --header-height: 74px;
        --section-padding: 84px;
    }

    .site-header {
        grid-template-columns: auto auto;
        justify-content: space-between;
    }

    .desktop-nav,
    .theme-button,
    .header-actions .btn-ghost {
        display: none;
    }

    .mobile-only,
    .menu-button.mobile-only {
        display: inline-flex;
    }

    .hero,
    .split,
    .case-hero,
    .product-detail,
    .checkout-grid,
    .customer-auth-grid,
    .contact-grid,
    .store-band,
    .about-visual,
    .about-personal,
    .service-detail {
        grid-template-columns: 1fr;
    }

    .hero {
        min-height: auto;
    }

    .hero h1 {
        max-width: 100%;
        font-size: clamp(2.7rem, 6.8vw, 3.6rem);
    }

    .hero-copy,
    .hero-copy .lead,
    .hero .meta-line {
        max-width: 100%;
        min-width: 0;
    }

    .hero .meta-line {
        row-gap: 8px;
    }

    .grid-3,
    .service-grid,
    .products-grid,
    .timeline-grid,
    .stack-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-card.featured-card {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .process-line {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .summary-panel {
        position: static;
    }

    .service-detail {
        gap: 24px;
    }

    .service-carousel,
    .testimonial-carousel {
        --carousel-visible: 2;
    }

    .service-carousel .carousel-item,
    .testimonial-carousel .carousel-item {
        flex-basis: calc((100% - 24px) / 2);
    }

    .service-preview img {
        min-height: 220px;
    }

    .store-band {
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .section,
    .site-footer,
    .flash {
        width: min(calc(100% - 44px), var(--container));
    }

    .section {
        padding-block: 72px;
    }

    .section + .section {
        padding-top: 0;
    }

    .section-head,
    .section-header,
    .site-footer {
        display: grid;
        align-items: start;
    }

    .hero h1,
    .page-hero h1,
    .case-hero h1,
    .product-detail h1 {
        font-size: clamp(2.75rem, 10vw, 3.7rem);
        line-height: 1;
    }

    .section-head h2,
    .section-title,
    .split h2,
    .cta h2 {
        font-size: clamp(2.1rem, 8vw, 2.9rem);
    }

    .grid-2,
    .grid-3,
    .projects-grid,
    .service-grid,
    .products-grid,
    .timeline-grid,
    .stack-grid,
    .editorial-grid,
    .case-grid {
        grid-template-columns: 1fr;
    }

    .case-meta,
    .case-gallery,
    .skill-grid,
    .process-line {
        grid-template-columns: 1fr;
    }

    .cart-row,
    .cart-total {
        grid-template-columns: 1fr;
    }

    .service-detail .btn,
    .band-copy > .btn {
        width: max-content;
    }

    .service-carousel,
    .testimonial-carousel {
        --carousel-visible: 1;
    }

    .service-carousel .carousel-item,
    .testimonial-carousel .carousel-item {
        flex-basis: 100%;
    }

    .tools-carousel {
        max-width: 100%;
    }

    .contact-channels .contact-channel-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) and (max-height: 900px) {
    .section,
    .site-footer,
    .flash {
        width: min(calc(100% - 34px), 356px);
        margin-inline: 17px auto;
    }

    .hero-copy,
    .hero-copy .lead,
    .hero .meta-line,
    .button-row {
        max-width: 100%;
    }

    .hero h1 {
        max-width: 100%;
        font-size: clamp(2.35rem, 7vw, 3rem);
        overflow-wrap: break-word;
        text-wrap: balance;
    }
}

@media (max-width: 576px) {
    body {
        font-size: 15.5px;
    }

    .site-header {
        min-height: 70px;
        padding-inline: 18px;
    }

    .store-controls {
        display: grid;
        gap: 18px;
    }

    .store-sort {
        min-width: 0;
    }

    .brand span:last-child,
    .cart-link,
    .customer-menu-link,
    .header-actions .btn-ghost {
        display: none;
    }

    .brand-mark {
        width: 42px;
        height: 42px;
    }

    .icon-button {
        min-height: 42px;
        padding-inline: 14px;
    }

    .section,
    .site-footer,
    .flash {
        width: min(calc(100% - 34px), 356px);
    }

    .hero {
        padding-top: 56px;
        gap: 36px;
    }

    .hero h1 {
        max-width: 100%;
        font-size: clamp(2rem, 8.4vw, 2.35rem);
        letter-spacing: -.02em;
        overflow-wrap: break-word;
        text-wrap: balance;
    }

    .hero h1 .text-gradient {
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }

    .hero .section-kicker {
        font-size: .68rem;
        letter-spacing: .1em;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .hero-copy,
    .hero-copy .lead,
    .hero .meta-line {
        max-width: 100%;
        min-width: 0;
    }

    .meta-line {
        row-gap: 6px;
        font-size: .84rem;
    }

    .meta-line span + span::before {
        margin: 0 9px;
    }

    .tech-list li,
    .skill-grid span {
        font-size: .72rem;
    }

    .hero-copy .lead,
    .page-hero p,
    .case-hero p,
    .product-detail > div > p {
        font-size: 1rem;
    }

    .profile-card {
        padding: 12px;
        border-radius: 24px;
    }

    .button-row,
    .product-card form {
        display: grid;
    }

    .button-row .btn,
    .product-card form .btn {
        width: 100%;
    }

    .btn,
    button,
    .text-link {
        max-width: 100%;
        white-space: normal;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .service-detail .btn,
    .service-final-cta .btn,
    .cart-update-row .btn,
    .cart-actions .btn,
    .coupon-panel .btn,
    .available-coupons .btn {
        width: 100%;
    }

    .cart-update-row,
    .cart-actions,
    .coupon-panel-head,
    .available-coupons article form,
    .service-final-cta .button-row {
        width: 100%;
    }

    .store-band,
    .cta,
    .project-body,
    .service-card,
    .service-detail,
    .summary-panel,
    .form-panel,
    .editorial-grid article,
    .case-grid article,
    .timeline-card,
    .stack-card {
        padding: 24px;
    }

    .mini-products a {
        grid-template-columns: 1fr;
    }

    .service-detail {
        gap: 20px;
    }

    .service-detail-copy {
        gap: 18px;
    }

    .service-preview img {
        min-height: 180px;
    }

    .band-copy {
        gap: 18px;
    }

    .carousel-shell {
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        gap: 10px;
    }

    .carousel-arrow {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .form-grid-mini,
    .customer-order-card,
    .customer-list li {
        grid-template-columns: 1fr;
    }

    .customer-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .customer-toolbar .btn,
    .customer-order-card .btn {
        width: 100%;
    }

    .legal-card {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}