/* ==========================================================================
   11. Responsive — below 1024px the comp stops scaling and stacks.
   ========================================================================== */

@media (max-width: 1023px) {
    :root {
        --u: 1.3px;
        --gutter: 40px;
        --indent: var(--gutter);
    }

    /* Header + compact menu */
    .page-home .site-header {
        position: relative;
        background: var(--c-bg);
    }

    .site-header__inner {
        grid-template-columns: 1fr auto;
        height: 76px;
    }

    .logo {
        width: 124px;
    }

    .menu-toggle {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        justify-self: end;
        height: 44px;
        padding: 0 4px 0 12px;
        border: 0;
        background: none;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
    }

    .menu-toggle__bars {
        position: relative;
        width: 20px;
        height: 12px;
    }

    .menu-toggle__bars::before,
    .menu-toggle__bars::after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 1.5px;
        background: currentColor;
        transition: transform 0.2s ease, top 0.2s ease;
    }

    .menu-toggle__bars::before {
        top: 2px;
    }

    .menu-toggle__bars::after {
        top: 9px;
    }

    .menu-toggle[aria-expanded="true"] .menu-toggle__bars::before {
        top: 5.5px;
        transform: rotate(45deg);
    }

    .menu-toggle[aria-expanded="true"] .menu-toggle__bars::after {
        top: 5.5px;
        transform: rotate(-45deg);
    }

    .nav {
        display: none;
        grid-column: 1 / -1;
        padding-bottom: 20px;
    }

    .nav.is-open {
        display: block;
    }

    .nav__list {
        flex-direction: column;
        gap: 0;
        border-top: 1px solid var(--c-border);
    }

    .nav__link {
        padding-block: 14px;
        font-size: 17px;
        border-bottom: 1px solid var(--c-border);
    }

    .nav__link[aria-current="page"] {
        border-bottom-color: var(--c-border);
        box-shadow: inset 3px 0 0 var(--c-accent-dark);
        padding-left: 14px;
    }

    .site-header .region {
        display: none;
    }

    .site-header__inner:has(.nav.is-open) {
        height: auto;
        padding-top: 16px;
    }

    /* Hero */
    .hero {
        display: flex;
        flex-direction: column;
        height: auto;
        overflow: visible;
    }

    .hero__media {
        order: 2;
    }

    .hero__content {
        width: 100%;
        padding-top: 48px;
        padding-bottom: 12px;
    }

    .display {
        font-size: clamp(44px, 9vw, 68px);
        line-height: 1.04;
    }

    .hero__text {
        max-width: 470px;
        font-size: 17px;
        line-height: 1.7;
    }

    .hero__media img {
        position: static;
        max-width: 100%;
        width: 100%;
        -webkit-mask-image: none;
        mask-image: none;
        height: auto;
        aspect-ratio: 593 / 466;
    }

    /* Brand */
    .brand__inner {
        grid-template-columns: 1fr 1fr;
        column-gap: 40px;
        padding: 56px var(--gutter);
    }

    .brand .eyebrow,
    .brand__title {
        grid-column: 1;
    }

    .brand__body {
        grid-column: 1;
        grid-row: 3;
        max-width: 440px;
    }

    .brand__art {
        grid-column: 2;
        grid-row: 1 / 4;
        align-self: center;
        justify-self: center;
        width: 170px;
        margin-top: 0;
    }

    .heading {
        font-size: clamp(30px, 5vw, 36px);
    }

    .body-copy,
    .text-link {
        font-size: 16px;
        line-height: 1.7;
    }

    .arrow {
        width: 18px;
    }

    /* CTA strip */
    .cta-strip__inner {
        grid-template-columns: 1fr 1fr;
        column-gap: 40px;
        padding-block: 48px 52px;
    }

    /* Sustainability */
    .sustain__inner {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        padding-block: 64px;
    }

    .sustain__copy {
        padding-top: 0;
    }

    .sustain .display {
        font-size: clamp(40px, 6.4vw, 56px);
    }

    .sustain__text {
        max-width: 280px;
        margin-top: 28px;
        font-size: 16px;
        line-height: 1.7;
    }

    /* Inner pages */
    .page-intro {
        grid-template-columns: 1fr;
        padding-top: 32px;
    }

    .page-intro__title {
        font-size: clamp(30px, 5vw, 36px);
    }

    .page-intro__title img {
        width: 28px;
    }

    .notice {
        max-width: 480px;
        margin-top: 28px;
    }

    .form-status .notice__title {
        font-size: 18px;
    }

    .notice__title,
    .notice__text {
        font-size: 15px;
        line-height: 1.55;
    }

    .form {
        column-gap: 20px;
        row-gap: 26px;
        margin-top: 44px;
        padding-bottom: 64px;
    }

    .button {
        height: 52px;
        padding-inline: 24px;
        font-size: 15px;
    }

    .about-lead,
    .contact__details {
        grid-template-columns: 1fr;
    }

    .about-lead {
        padding-block: 32px 56px;
    }

    .contact__email {
        font-size: 22px;
    }

    .contact__details > div + div {
        margin-top: 24px;
    }


    /* Footer */
    .site-footer__inner {
        flex-wrap: wrap;
        row-gap: 16px;
        padding-block: 26px;
    }

    .site-footer .region {
        margin-left: 40px;
    }
}

@media (max-width: 767px) {
    :root {
        --gutter: 22px;
    }

    .site-header__inner {
        height: 68px;
    }

    .logo {
        width: 108px;
    }

    .hero__content {
        padding-top: 36px;
    }

    .hero__text {
        font-size: 16px;
    }

    .brand__inner,
    .cta-strip__inner,
    .sustain__inner {
        grid-template-columns: 1fr;
    }

    .brand__inner {
        padding-block: 52px 56px;
    }

    .brand__art {
        grid-column: 1;
        grid-row: 4;
        justify-self: start;
        width: 128px;
        margin-top: 40px;
    }

    .cta-strip__inner {
        padding-block: 44px 48px;
    }

    .sustain__inner {
        row-gap: 40px;
        padding-block: 56px;
    }

    .sustain .display {
        font-size: clamp(40px, 11vw, 52px);
    }

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

    .form__actions .button {
        width: 100%;
        justify-content: center;
    }


    .site-footer__inner {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        row-gap: 18px;
        padding-block: 32px;
    }

    .site-footer__copy {
        grid-row: 3;
        grid-column: 1 / -1;
        margin: 0;
    }

    .site-footer__links {
        grid-row: 2;
        grid-column: 1 / -1;
        margin: 0;
        gap: 28px;
    }

    .site-footer .region {
        grid-row: 1;
        grid-column: 2;
        margin: 0;
    }
}