/* ==========================================================
   Tablet and mobile navigation
========================================================== */

@media (max-width: 59.99rem) {
    :root {
        --header-height: 5rem;
    }

    .desktop-navigation {
        display: none;
    }

    .menu-toggle,
    .menu-close {
        display: inline-flex;
    }

    .site-header.is-scrolled {
        height: 4.5rem;
    }

    .section-heading {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .section-heading > p {
        padding-bottom: 0;
    }

    .service-feature,
    .service-feature--reverse {
        min-height: 0;
        grid-template-columns: 1.15fr 0.85fr;
    }

    .service-feature--reverse .service-feature__media {
        grid-column: 2;
    }

    .portfolio-grid {
        grid-auto-rows: 11rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .story__grid {
        gap: 3rem;
    }

    .story__visual,
    .story__visual > img {
        min-height: 34rem;
    }

    .value-list {
        grid-template-columns: 1fr;
    }

    .value-list article,
    .value-list article:nth-child(odd),
    .value-list article:nth-child(even) {
        padding: 1.25rem 0;
        border-right: 0;
    }

    .contact__grid {
        grid-template-columns: minmax(15rem, 0.55fr) minmax(0, 1.45fr);
        gap: 2rem;
    }
}

/* ==========================================================
   Mobile layout
========================================================== */

@media (max-width: 47.99rem) {
    .brand {
        width: 10.5rem;
    }

    .hero {
        min-height: max(44rem, 100svh);
    }

    .hero__media img {
        object-position: 62% center;
    }

    .hero__shade {
        background: linear-gradient(0deg, rgba(2, 15, 30, 0.97) 0%, rgba(3, 20, 38, 0.86) 57%, rgba(3, 20, 38, 0.34) 100%), linear-gradient(90deg, rgba(3, 20, 38, 0.44), transparent 75%);
    }

    .hero__content {
        min-height: max(44rem, 100svh);
        padding-top: calc(var(--header-height) + 5rem);
        padding-bottom: 3.75rem;
        justify-content: flex-end;
    }

    .hero h1 {
        max-width: 9.2ch;
        font-size: clamp(2.95rem, 13vw, 5rem);
        line-height: 0.92;
    }

    .hero__lead {
        margin-block: 1.5rem 1.75rem;
        padding-left: 1rem;
        font-size: 1rem;
    }

    .hero::after {
        top: calc(var(--header-height) + 1rem);
        bottom: 1.5rem;
    }

    .hero__signature {
        display: none;
    }

    .mobile-navigation__panel {
        width: 100%;
        border-left: 0;
    }

    .mobile-navigation__links {
        margin-block: clamp(2.5rem, 9vh, 5rem);
    }

    .mobile-navigation__links a {
        font-size: clamp(2rem, 9vw, 3rem);
    }

    .service-strip__inner {
        grid-template-columns: 1fr;
    }

    .service-strip span {
        padding-block: 0.7rem;
        border-right: 1px solid rgba(255, 255, 255, 0.12);
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .service-feature,
    .service-feature--reverse,
    .other-events {
        grid-template-columns: 1fr;
    }

    .service-feature--reverse .service-feature__media {
        grid-column: 1;
        grid-row: auto;
    }

    .service-feature__media {
        min-height: auto;
        aspect-ratio: 4 / 3;
    }

    .service-feature__content {
        padding-top: 4rem;
    }

    .other-events__media {
        min-height: auto;
        aspect-ratio: 4 / 3;
    }

    .portfolio-grid {
        grid-auto-rows: 13.5rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portfolio-item--large,
    .portfolio-item--wide {
        grid-column: span 2;
    }

    .portfolio-item--tall {
        grid-row: span 1;
    }

    .portfolio-item__caption {
        font-size: 0.92rem;
    }

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

    .story__visual,
    .story__visual > img {
        min-height: 29rem;
    }

    .story__mark {
        right: 1rem;
        bottom: -1.5rem;
        width: 5.25rem;
        height: 5.25rem;
    }

    .story__mark img {
        width: 3rem;
    }

    .value-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .value-list article:nth-child(odd) {
        padding-right: 1rem;
        border-right: 1px solid var(--color-line);
    }

    .value-list article:nth-child(even) {
        padding-left: 1rem;
    }

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

    .process-list li,
    .process-list li + li {
        padding: 1.5rem 0;
        border-bottom: 1px solid #cec6b9;
        border-left: 0;
    }

    .process-list h3 {
        margin-top: 1.25rem;
    }

    .contact-intro::after {
        right: -20vw;
        width: 70vw;
    }

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

    .contact__aside {
        position: static;
    }

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

    .contact-form {
        padding: clamp(1.35rem, 6vw, 2rem);
    }

    .form-field--full {
        grid-column: auto;
    }

    .site-footer__main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer__brand {
        grid-column: 1 / -1;
    }

    .site-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .lightbox__content {
        height: min(82vh, 46rem);
    }

    .lightbox__close,
    .lightbox__control {
        width: 2.75rem;
        height: 2.75rem;
    }

    .lightbox__close {
        top: -0.25rem;
        right: -0.25rem;
    }

    .lightbox__control {
        top: auto;
        bottom: 2.5rem;
        transform: none;
    }

    .whatsapp-float {
        right: max(0.35rem, env(safe-area-inset-right));
        width: 2.75rem;
        height: 2.75rem;
    }

    .whatsapp-float svg {
        width: 1.35rem;
    }
}

/* ==========================================================
   Narrow mobile devices
========================================================== */

@media (max-width: 27rem) {
    .site-header:not(.site-header--overlay) .site-header__inner {
        gap: 0.5rem;
    }

    .site-header:not(.site-header--overlay) .brand {
        width: 8.5rem;
    }

    .site-header:not(.site-header--overlay) .button--small {
        min-height: 2.65rem;
        padding-inline: 0.75rem;
        font-size: 0.62rem;
    }

    .hero__content {
        padding-top: calc(var(--header-height) + 2rem);
        padding-bottom: 4rem;
    }

    .hero h1 {
        font-size: clamp(2.75rem, 13vw, 4rem);
    }

    .hero .button {
        min-height: 3.25rem;
        padding-block: 0.75rem;
    }

    .button-group {
        align-items: stretch;
        flex-direction: column;
    }

    .button-group .button {
        width: 100%;
    }

    .portfolio-grid {
        grid-auto-rows: 15rem;
        grid-template-columns: 1fr;
    }

    .portfolio-item,
    .portfolio-item--large,
    .portfolio-item--wide {
        grid-column: span 1;
    }

    .value-list {
        grid-template-columns: 1fr;
    }

    .value-list article,
    .value-list article:nth-child(odd),
    .value-list article:nth-child(even) {
        padding: 1.1rem 0;
        border-right: 0;
    }

    .site-footer__main {
        grid-template-columns: 1fr;
    }

    .site-footer__brand {
        grid-column: auto;
    }
}

/* ==========================================================
   Wide displays
========================================================== */

@media (min-width: 90rem) {
    .hero__media img {
        object-position: center 48%;
    }

    .portfolio-grid {
        grid-auto-rows: 15.5rem;
    }
}

@media (min-width: 100rem) {
    .hero h1 {
        font-size: clamp(7.5rem, 7vw, 9.25rem);
    }

    .hero__lead {
        max-width: 41rem;
    }

    .hero__content {
        padding-bottom: 8vh;
    }
}