/* ==========================================================================
   Responsive behaviour
   ========================================================================== */

@media (max-width: 1360px) {
    :root {
        --hero-copy-inset: 32px;
    }
}

@media (max-width: 1200px) {
    :root {
        --hero-copy-inset: 0px;
        --section-pad-y: var(--space-10);
    }

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

    .site-nav__list {
        gap: var(--space-6);
    }

    .packages-grid,
    .packages-grid--pair,
    .cases-grid,
    .services-grid--featured {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .package-card--band {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-6);
    }

    .package-card--band .package-card__intro {
        grid-row: auto;
        grid-column: 1 / -1;
    }

    .package-card--band .package-card__examples,
    .package-card--band .package-card__details {
        grid-column: auto;
        padding-left: var(--space-5);
    }

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

    .trust {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        row-gap: var(--space-8);
    }

    .trust__intro,
    .trust__partners {
        grid-column: 1 / -1;
    }

    .trust__partners {
        padding-left: 0;
    }

    .trust__partners::before {
        display: none;
    }

    .trust__stat:first-of-type {
        padding-left: 0;
    }

    .trust__stat:first-of-type::before {
        display: none;
    }
}

@media (max-width: 1024px) {
    :root {
        --fs-h1: 36px;
        --fs-h2: 28px;
    }

    /* No room for a side column, so the contents becomes a block above the
       text. It earns its place on a phone too: these pages are long and the
       reader is usually after one clause. */
    .legal-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .legal-contents {
        position: static;
        order: -1;
        justify-self: stretch;
        width: auto;
        margin-bottom: var(--space-8);
        padding: var(--space-5) var(--space-6);
        border-left: 0;
        background: var(--surface-strip);
        border-radius: var(--radius-md);
    }

    .legal-contents__list a {
        margin-left: 0;
        padding-left: var(--space-4);
        border-left-width: 2px;
        border-left-color: var(--border-card);
    }

    .hero {
        min-height: 0;
    }

    .hero__visual {
        inset: 0;
        opacity: 0.45;
    }

    .hero__visual::after {
        background:
            linear-gradient(180deg,
                rgba(14, 23, 38, 0.55) 0%,
                rgba(14, 23, 38, 0.78) 55%,
                rgba(14, 23, 38, 0.94) 100%);
    }

    .hero__inner {
        min-height: auto;
        padding-block: var(--space-9);
    }

    .hero__copy {
        max-width: 36rem;
    }

    .page-head {
        min-height: 0;
    }

    .page-head__visual {
        inset: 0;
        opacity: 0.42;
    }

    .page-head__visual::after {
        background:
            linear-gradient(180deg,
                rgba(14, 23, 38, 0.55) 0%,
                rgba(14, 23, 38, 0.8) 55%,
                rgba(14, 23, 38, 0.94) 100%);
    }

    .page-head__inner {
        min-height: auto;
        padding-block: var(--space-9);
    }

    .page-head__copy {
        max-width: 36rem;
    }

    .page-head--contact {
        min-height: 0;
    }

    .contact {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "intro"
            "calendar"
            "write";
        gap: var(--space-8);
    }

    .contact__intro {
        position: static;
    }

    .contact__calendar {
        position: static;
    }

    .contact__write {
        margin-top: var(--space-2);
    }

    .detail-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .detail-aside {
        position: static;
    }

    .guides-index {
        grid-template-columns: minmax(0, 1fr);
    }

    .guides-visual {
        position: static;
        order: 2;
    }

    .guides-index__main {
        order: 1;
    }

    .guides-visual__frame,
    .guides-visual__frame img {
        min-height: 16rem;
    }

    .contact__assurances {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3) var(--space-5);
    }

    .pain-strip__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
    }

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

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

    .about {
        gap: var(--space-8);
    }
}

@media (max-width: 900px) {
    .nav-toggle {
        display: grid;
        place-items: center;
    }

    /* Keep the booking CTA in the header on tablet; only the link list collapses. */
    .site-nav {
        display: none;
    }

    .site-header__inner {
        position: relative;
    }

    .site-nav.is-open {
        display: block;
        position: absolute;
        left: calc(-1 * var(--container-pad));
        right: calc(-1 * var(--container-pad));
        top: calc(100% + 1px);
        z-index: 50;
        margin: 0;
        padding: var(--space-6) max(1.5rem, var(--container-pad)) var(--space-7);
        background:
            linear-gradient(165deg, #eef2ee 0%, var(--surface-page) 42%, #fbfbfa 100%);
        border-bottom: 1px solid var(--border-card);
        box-shadow: 0 22px 48px rgba(14, 23, 38, 0.16);
    }

    .site-nav.is-open .site-nav__label {
        display: block;
        margin: 0 0 var(--space-5);
        padding-bottom: var(--space-3);
        border-bottom: 1px solid rgba(14, 23, 38, 0.1);
        color: var(--green-deep);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
    }

    .site-nav.is-open .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .site-nav.is-open .site-nav__item {
        border: 0;
        border-radius: var(--radius-md);
        background: rgba(255, 255, 255, 0.72);
        box-shadow: inset 0 0 0 1px rgba(14, 23, 38, 0.06);
    }

    .site-nav.is-open .site-nav__item:last-child {
        border-bottom: 0;
    }

    .site-nav.is-open .site-nav__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 52px;
        padding: 0.85rem 1.1rem;
        font-family: var(--font-display);
        font-size: 1.2rem;
        font-weight: 600;
        letter-spacing: 0.01em;
    }

    .site-nav.is-open .site-nav__item--current {
        background: #fff;
        box-shadow: inset 3px 0 0 0 var(--green-deep), inset 0 0 0 1px rgba(14, 23, 38, 0.08);
    }

    .site-nav.is-open .site-nav__item--current .site-nav__link {
        box-shadow: none;
        color: var(--green-deep);
    }

    .site-nav.is-open .site-nav__item--current .site-nav__link span {
        box-shadow: none;
    }

    .site-nav.is-open .site-nav__cta {
        display: block;
        margin-top: var(--space-6);
        padding-top: var(--space-5);
        border-top: 1px solid rgba(14, 23, 38, 0.1);
    }

    .site-nav.is-open .site-nav__cta .btn {
        width: 100%;
        justify-content: center;
        min-height: 52px;
        font-size: 1rem;
    }

    .grid--6,
    .grid--3,
    .grid--5,
    .cases-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Three featured cards: single column avoids a lone orphan on the last row. */
    .services-grid--featured {
        grid-template-columns: minmax(0, 1fr);
    }

    .package-card__details {
        grid-template-columns: minmax(0, 1fr);
    }

    .package-card--band {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
    }

    .package-card--band .package-card__intro {
        grid-row: auto;
    }

    .package-card--band .package-card__examples,
    .package-card--band .package-card__details {
        grid-column: auto;
        padding-left: 0;
        padding-top: var(--space-5);
        border-left: none;
        border-top: 1px solid var(--border-card);
    }

    .about {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }

    .about__portrait {
        width: min(100%, 22rem);
        max-width: none;
        margin-inline: auto;
    }

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

    .trust__stat:nth-of-type(odd) {
        padding-left: 0;
    }

    .trust__stat:nth-of-type(odd)::before {
        display: none;
    }
}

@media (max-width: 600px) {
    :root {
        --fs-h1: 30px;
        --fs-h2: 24px;
        --fs-lead: 16px;
        --fs-stat: 26px;
        --section-pad-y: var(--space-9);
        --container-pad: 20px;
        --card-pad: 20px;
    }

    .grid--6,
    .grid--3,
    .grid--5,
    .packages-grid,
    .packages-grid--pair,
    .services-grid,
    .services-grid--featured,
    .cases-grid,
    .trust,
    .site-footer__top,
    .pain-strip__list,
    .contact__assurances {
        grid-template-columns: minmax(0, 1fr);
    }

    .package-card__footer,
    .website-product {
        align-items: stretch;
        flex-direction: column;
    }

    .package-card__footer .btn,
    .website-product .btn {
        width: 100%;
    }

    .trust__stat {
        padding-left: 0;
        text-align: left;
    }

    .trust__stat::before {
        display: none;
    }

    .hero__actions .btn,
    .final-cta__actions .btn {
        width: 100%;
        max-width: 22rem;
        justify-content: center;
    }

    .final-cta__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .final-cta__text {
        margin-inline: auto;
    }

    .final-cta__actions {
        width: 100%;
        flex-direction: column;
        align-items: center;
    }

    .hero__actions {
        flex-direction: column;
        align-items: center;
    }

    .hero__visual {
        position: relative;
        inset: auto;
        height: 280px;
        opacity: 1;
    }

    .hero__visual img {
        object-position: center 40%;
        transform: none;
        animation: none;
    }

    .hero__visual::after {
        background: linear-gradient(180deg, transparent 40%, var(--navy) 100%);
    }

    .hero__inner {
        margin-top: -48px;
        padding-block: 0 var(--space-8);
    }

    .hero__copy {
        padding-left: 0;
    }

    /* Page heroes: same image-above-copy stack as the home hero. */
    .page-head__visual {
        position: relative;
        inset: auto;
        height: 280px;
        opacity: 1;
    }

    .page-head__visual img {
        object-position: center 40%;
    }

    .page-head__visual::after {
        background: linear-gradient(180deg, transparent 40%, var(--navy) 100%);
    }

    .page-head__inner {
        margin-top: -48px;
        padding-block: 0 var(--space-8);
    }

    .page-head__copy {
        padding-left: 0;
    }

    .about__copy {
        text-align: left;
    }

    .about__portrait {
        width: min(100%, 20rem);
    }

    /* Footer: one centred composition instead of a left-stacked column. */
    .site-footer__top > * {
        text-align: center;
    }

    .site-footer .logo {
        justify-content: center;
    }

    .site-footer__blurb {
        margin-inline: auto;
    }

    .site-footer__list {
        justify-items: center;
        gap: 0;
        margin-top: var(--space-3);
    }

    .site-footer__list a,
    .site-footer__policies a,
    .site-footer__policy-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 36px;
        padding-block: 0.2rem;
    }

    .site-footer__social {
        justify-content: center;
        margin-top: var(--space-4);
    }

    .site-footer__social a {
        width: 44px;
        height: 44px;
    }

    .site-footer__bottom {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .site-footer__policies {
        justify-content: center;
    }

    /* Hide the header CTA under 600 so the panel CTA stays the one booking path. */
    .site-header__cta {
        display: none;
    }

    .guides-search__input {
        font-size: 16px;
        min-height: 44px;
    }

    .guides-topics__link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding-block: var(--space-2);
    }

    .link-arrow {
        min-height: 44px;
        padding-block: var(--space-2);
    }

    .btn--compact {
        min-height: 44px;
    }

    .guides-visual__frame,
    .guides-visual__frame img {
        min-height: 16rem;
    }

    .booking__frame {
        height: 680px;
    }

    .consent-banner {
        padding-block: var(--space-4);
        padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    }

    .consent-banner__lead--full {
        display: none;
    }

    .consent-banner__lead--short {
        display: block;
    }

    .consent-banner__title {
        font-size: 1rem;
    }

    /* The banner eats a lot of a small screen, so the two real choices go on
       one full-width row and "Manage" sits under them rather than wrapping
       into an ambiguous third column. */
    .consent-banner__actions {
        width: 100%;
        justify-content: space-between;
    }

    .consent-banner__actions .btn {
        flex: 1 1 auto;
    }

    .consent-banner__manage {
        flex-basis: 100%;
        text-align: center;
        min-height: 44px;
    }

    .booking__actions .btn {
        width: 100%;
    }

    .contact-form__actions .btn {
        width: 100%;
    }
}