/* ==========================================================================
   Pages
   Each page's <body> has an id (#home, #studio, #work, #project, #contact),
   so each section below only affects its own page. Within a section:
   rules for every width first, then desktop (960px and wider),
   then mobile (below 960px).

   Contents
     Home ............ #home
     Studio .......... #studio
     Work listing .... #work
     Case study ...... #project
     Contact, 404 .... #contact
   ========================================================================== */

@layer pages {


/* Home
   ========================================================================== */

#home {

    #hero_banner {
        background-color: var(--red-light);
        position: relative;
        .intro {
            color: var(--red-bright);
            margin-bottom: 0;
        }
        /* The kitty illustration */
        .mighty {
            background: url('../ui/kitty-kitty.webp') right top no-repeat;
            background-size: contain;
            position: absolute;
            text-indent: -200vw;
        }
    }

    #featured_work {
        background: url('../ui/featured-bg.png') left top repeat-x;
        overflow: hidden;
        position: relative;
        article .container {
            text-decoration: none;
            img {
                grid-area: row01 / 01 / row03 / 11;
                width: 100%;
            }
            .picture-title {
                background-color: white;
                display: flex;
                flex-flow: column nowrap;
                justify-content: center;
                padding: 4vw;
                .eyebrow {
                    color: var(--red-dark);
                    font-size: 0.8rem;
                    letter-spacing: 1px;
                    line-height: 1rem;
                    margin-bottom: 0.3rem;
                    text-transform: uppercase;
                }
                .project-title {
                    color: var(--red-bright);
                    font-size: var(--medium-size);
                    font-weight: bold;
                    line-height: 100%;
                }
            }
        }
        /* Carousel: a horizontal strip that snaps to each project */
        .carousel {
            position: relative;
        }
        .carousel-track {
            display: flex;
            overflow-x: auto;
            overscroll-behavior-x: contain;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
            &::-webkit-scrollbar {
                display: none;
            }
            @media (prefers-reduced-motion: no-preference) {
                scroll-behavior: smooth;
            }
        }
        .carousel-slide {
            flex: 0 0 auto;
            scroll-snap-align: start;
        }
        /* Round previous/next carousel buttons */
        .slideshow-nav button {
            border: none;
            border-radius: 100%;
            box-shadow: var(--shadow-medium);
            cursor: pointer;
            font-size: 1rem;
            letter-spacing: 1px;
            line-height: 1rem;
            opacity: 0.95;
            position: absolute;
            text-transform: uppercase;
            top: 50%;
            transform: translateY(-75%);
            &.next {
                background: rgb(255 255 255 / 0.95) url('../ui/arrow-next.svg') center center no-repeat;
                text-indent: -200vw;
            }
            &.prev {
                background: rgb(255 255 255 / 0.95) url('../ui/arrow-prev.svg') center center no-repeat;
                text-indent: -200vw;
                z-index: 10;
            }
            &:hover {
                transition: var(--fade);
            }
        }
    }

    #what_we_do {
        position: relative;
        .up-for-change p {
            color: var(--red-bright);
            font-size: var(--txt-med-size);
            line-height: var(--txt-med-leading);
        }
        .wwsd {
            dt {
                color: var(--red-bright);
                font-size: var(--medium-size);
                font-weight: bold;
                line-height: 100%;
                padding-bottom: 0.5rem;
                padding-left: 100px;
                &.startup {
                    background: url('../ui/startup.svg') left center no-repeat;
                }
                &.pivot {
                    background: url('../ui/pivot.svg') left center no-repeat;
                }
                &.merger {
                    background: url('../ui/merger.svg') left center no-repeat;
                }
                &.focus {
                    background: url('../ui/focus.svg') left center no-repeat;
                }
            }
            dd {
                margin-bottom: 3rem;
                padding-left: 100px;
            }
        }
    }

    #our_clients {
        .clients-heading {
            text-align: center;
        }
        h2 {
            margin-bottom: 1vw;
        }
        .clients-tagline {
            color: var(--red-bright);
            font-size: var(--txt-med-size);
            line-height: var(--txt-med-leading);
            margin-bottom: 0;
        }
        .featured-clients {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            padding-bottom: 6vh;
            li {
                background-position: center center;
                background-repeat: no-repeat;
                float: left;
                margin: 2vh 0;
                text-indent: -200vw;
            }
        }
        .client-list {
            column-gap: 2vw;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            text-transform: uppercase;
            li {
                font-size: 1rem;
                letter-spacing: 1px;
                line-height: 1.25rem;
            }
        }
    }

    #contact_us {
        background: url('../ui/bg-dots.png') left top repeat;
    }

    /* Home, desktop */
    @media screen and (width >= 960px) {

        #hero_banner {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: [row01] minmax(140px, 1fr) [row02] 3fr [row03] 1fr [end];
            column-gap: 2vw;
            padding: 0 45px 0 100px;
            .content {
                grid-area: row02 / 02 / row03 / 10;
            }
            h1 {
                margin-bottom: 2rem;
            }
            .subtitle {
                color: var(--red-bright);
                font-family: var(--font-headline);
                font-size: var(--giant-size);
                line-height: var(--giant-size);
                margin-bottom: var(--giant-space);
            }
            .intro {
                font-size: 1.8rem;
                margin-left: var(--column);
            }
            .mighty {
                top: 10%;
                left: 12%;
                width: 80%;
                height: 90%;
            }
        }

        #featured_work {
            padding: 0 0 1vh 100px;
            .carousel-track {
                gap: 9vw;
            }
            .carousel-slide {
                width: calc(10 * var(--column) + 18vw);
            }
            /* Previous at the start, Next at the end */
            .slideshow-nav button:disabled {
                opacity: 0;
                pointer-events: none;
            }
            article .container {
                display: grid;
                grid-template-columns: repeat(10, 1fr);
                grid-template-rows: [row01] 1fr [row02] 30% [row03] 2rem [end];
                column-gap: 2vw;
                text-decoration: none;
                img {
                    grid-area: row01 / 01 / row03 / 11;
                    width: 100%;
                }
                .picture-title {
                    background-color: white;
                    display: flex;
                    flex-flow: column nowrap;
                    grid-area: row02 / 06 / row03 / 11;
                    justify-content: center;
                    padding: 4vw;
                    .eyebrow {
                        color: var(--red-dark);
                        font-size: 0.8rem;
                        letter-spacing: 1px;
                        text-transform: uppercase;
                    }
                    .project-title {
                        color: var(--red-bright);
                        font-size: var(--medium-size);
                        font-weight: bold;
                        line-height: 100%;
                    }
                }
                .pagination {
                    font-size: 0.8rem;
                    grid-area: row03 / 01 / end / 11;
                    text-align: right;
                }
            }
            .slideshow-nav button {
                width: 125px;
                height: 125px;
                &.next {
                    right: 145px;
                }
                &.prev {
                    left: -20px;
                }
                &:hover {
                    width: 129px;
                    height: 129px;
                    &.next {
                        right: 143px;
                    }
                    &.prev {
                        left: -22px;
                    }
                }
            }
        }

        .check-it {
            margin-top: 4rem;
        }

        #what_we_do, #our_clients, #contact_us {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            column-gap: 2vw;
            position: relative;
            h2 {
                color: var(--red-bright);
                font-family: var(--font-headline);
                font-size: var(--big-size);
                line-height: var(--big-leading);
                margin-bottom: var(--big-space);
            }
            .up-for-change {
                grid-area: 01 / 02 / 02 / 06;
            }
            .wwsd {
                grid-area: 01 / 07 / 02 / 11;
            }
        }

        #what_we_do {
            padding: 12vh 45px 4vw 100px;
            .up-for-change p {
                color: var(--red-bright);
                font-size: var(--txt-med-size);
                line-height: var(--txt-med-leading);
                /* The hands illustration */
                &::after {
                    content: url('../ui/up-for-change-hands.svg');
                    display: block;
                    left: 7vw;
                    padding-top: 2vh;
                    position: absolute;
                    width: 194px;
                    height: 293px;
                }
            }
            .up-for-change::before {
                content: '';
                background: url('../ui/bg-dots.png') left top repeat;
                height: 100%;
                overflow: hidden;
                position: absolute;
                right: 0;
                top: 0;
                width: calc(8 * var(--column) + 14vw + 45px);
                z-index: -10;
            }
        }

        #our_clients {
            padding: 0 45px 0 100px;
            .clients-heading {
                grid-area: 01 / 01 / 02 / 13;
                padding: 8vh 0 4vh 0;
            }
            .featured-clients {
                grid-area: 02 / 01 / 03 / 13;
                li {
                    width: 20%;
                    height: 100px;
                }
            }
            .client-list {
                grid-area: 03 / 01 / 04 / 13;
                padding-bottom: 8vh;
                li {
                    margin-bottom: 1.25rem;
                    width: 18%;
                    height: 2rem;
                }
            }
        }

        #contact_us {
            padding: 8vh 45px 8vh 100px;
            h2 {
                grid-column: 02 / 13;
                margin-bottom: 4vh;
            }
            .check-it {
                grid-column: 02 / 07;
                grid-row: 02 / 03;
                place-self: center;
            }
            .help-you {
                color: var(--red-bright);
                font-size: var(--txt-med-size);
                grid-column: 07 / 13;
                grid-row: 02 / 03;
                line-height: var(--txt-med-leading);
            }
        }

    } /* end home desktop */

    /* Home, mobile */
    @media screen and (width < 960px) {

        #hero_banner {
            padding: 180px calc(20px + 2vw) 0 calc(20px + 2vw);
            h1 {
                margin-bottom: 1rem;
            }
            .subtitle {
                color: var(--red-bright);
                font-family: var(--font-headline);
                font-size: var(--giant-mobile-size);
                line-height: var(--giant-mobile-size);
                margin-bottom: var(--giant-mobile-space);
            }
            .intro {
                font-size: calc(1.3rem + 1vw);
                padding-right: 10%;
            }
            .mighty {
                top: 120px;
                right: 0;
                width: 100%;
                height: 100%;
            }
        }

        #featured_work {
            padding-top: 6vw;
            .container {
                .picture-title {
                    left: 20%;
                    position: relative;
                    top: -40px;
                    width: 80%;
                }
                .pagination {
                    bottom: 20px;
                    font-size: 0.8rem;
                    padding: 20px;
                    position: absolute;
                }
            }
            .carousel-track {
                gap: calc(20px + 2vw);
            }
            .carousel-slide {
                width: 100%;
            }
            /* Swipe only on phones and tablets */
            .slideshow-nav {
                display: none;
            }
            .slideshow-nav button {
                width: 100px;
                height: 100px;
                &.next {
                    right: -20px;
                }
                &.prev {
                    left: -20px;
                }
                &:hover {
                    width: 104px;
                    height: 104px;
                    &.next {
                        right: -22px;
                    }
                    &.prev {
                        left: -22px;
                    }
                }
            }
        }

        #what_we_do {
            background: url('../ui/bg-dots.png') left top repeat;
            margin-top: 12vw;
            padding: 12vw calc(20px + 2vw);
            .wwsd {
                margin: 8vw 0;
            }
            > span {
                background: url('../ui/up-for-change-hands.svg') left top no-repeat;
                background-size: cover;
                display: inline-block;
                position: absolute;
                width: 138px;
                height: 219px;
            }
        }

        #our_clients {
            margin-top: 175px;
            padding: 0 calc(20px + 2vw);
            .featured-clients {
                column-gap: calc(20px + 2vw);
                margin-top: 2vh;
                li {
                    width: 142px;
                    height: 100px;
                }
            }
            .client-list {
                column-gap: calc(20px + 2vw);
                padding-bottom: 5vh;
                li {
                    margin-bottom: 1.75rem;
                    width: 40%;
                }
            }
        }

        #contact_us {
            padding: 6vh calc(20px + 2vw);
        }

    } /* end home mobile */

} /* end home */


/* Studio
   ========================================================================== */

#studio {

    #hero_banner {
        .subtitle {
            min-height: 16vw;
            em {
                border-bottom: solid 6px var(--red-bright);
                padding-bottom: 0.5rem;
            }
        }
        /* Typewriter pause/play control (icons are inline SVG in studio/index.twig) */
        .typewriter-toggle {
            background: none;
            border: 0;
            border-radius: 50%;
            color: var(--red-bright);
            cursor: pointer;
            display: inline-flex;
            line-height: 0;
            margin-top: 1rem;
            padding: 2px;
            svg {
                display: block;
            }
            .icon-play {
                display: none;
            }
            &.is-paused {
                .icon-pause {
                    display: none;
                }
                .icon-play {
                    display: block;
                }
            }
            &:focus-visible {
                outline: 2px solid currentColor;
                outline-offset: 2px;
            }
            /* Keep hidden until the script runs (inline-flex would override it) */
            &[hidden] {
                display: none;
            }
        }
    }

    #about {
        margin-top: 4rem;
        .img-and-head img {
            width: 100%;
        }
        .img-and-head::before {
            content: '';
            background: url('../ui/bg-dots.png') left top repeat;
            height: 100%;
            overflow: hidden;
            position: absolute;
            z-index: -10;
        }
        .about-us {
            padding-top: 4vh;
            p {
                color: var(--red-bright);
                font-size: var(--txt-med-size);
                line-height: var(--txt-med-leading);
            }
        }
        .design-rules {
            display: flex;
            flex-flow: row wrap;
            gap: 10%;
            justify-content: center;
            padding-top: 30px;
            li {
                color: var(--red-bright);
                flex: 0 1 45%;
                font-size: 1.4rem;
                font-weight: bold;
                line-height: 1.7rem;
                padding-top: 140px;
                text-align: center;
                &.stories {
                    background: url('../ui/studio-stories.svg') center top no-repeat;
                }
                &.promises {
                    background: url('../ui/studio-promises.svg') center 15px no-repeat;
                }
                &.company {
                    background: url('../ui/studio-company.svg') center 50px no-repeat;
                }
                &.restless {
                    background: url('../ui/studio-restless.svg') center 40px no-repeat;
                }
            }
        }
        .what-we-do {
            h3 {
                color: var(--red-bright);
                font-size: var(--medium-size);
                font-weight: bold;
                line-height: 100%;
                margin-bottom: 2rem;
            }
            li {
                font-size: 0.9rem;
                letter-spacing: 1px;
                line-height: 2rem;
                text-transform: uppercase;
            }
        }
    }

    #crew {
        h2 {
            text-align: center;
        }
        .profile .profile-text {
            h3 {
                color: var(--red-bright);
                font-size: var(--medium-size);
                font-weight: bold;
                line-height: 100%;
            }
            .role {
                font-size: 0.9rem;
                letter-spacing: 1px;
                line-height: 1.5rem;
                margin: 1rem 0 2rem 0;
                text-transform: uppercase;
            }
        }
    }

    #press {
        background: url('../ui/bg-dots.png') left top repeat;
        display: flex;
        gap: 5%;
        .press-intro, ul {
            color: var(--red-bright);
            flex: 0 1 47%;
            font-size: var(--txt-med-size);
            line-height: var(--txt-med-leading);
        }
        .press-intro {
            margin-bottom: 0;
            padding-right: calc(var(--column) + 2vw);
        }
        li {
            font-size: 0.9rem;
            letter-spacing: 1px;
            line-height: 2rem;
            text-transform: uppercase;
        }
    }

    /* Studio, desktop */
    @media screen and (width >= 960px) {

        #hero_banner {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            column-gap: 2vw;
            padding: 180px 45px 0 100px;
            /* hgroup spans the same columns and rows and passes them to its children (subgrid) */
            hgroup {
                display: grid;
                grid-column: 02 / 12;
                grid-row: 1 / 3;
                grid-template-columns: subgrid;
                grid-template-rows: subgrid;
            }
            h1 {
                grid-column: 1 / -1;
            }
            .subtitle {
                font-size: calc(18px + 4.25vw);
                grid-column: 2 / -1;
                margin: 4vh 0;
            }
            /* Pause/play sits in the last column, level with the subtitle */
            .typewriter-toggle {
                grid-column: 12;
                grid-row: 2;
            }
        }

        #about {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: [row01] 200px [row02] 1fr [row03] 1fr [row04] 1fr [end];
            column-gap: 2vw;
            padding: 0 45px 0 100px;
            .img-and-head {
                grid-area: row01 / 01 / row04 / 07;
                h2 {
                    font-size: 2.5rem;
                    line-height: 3rem;
                    max-width: 24ch;
                    padding: 2vh 1vw 0 calc(var(--column) + 2vw);
                }
            }
            .img-and-head::before {
                right: var(--column);
                top: 200px;
                width: calc(8 * var(--column) + 14vw + 45px);
            }
            .about-us {
                grid-area: row03 / 07 / row05 / 12;
            }
            .what-we-do {
                grid-area: row05 / 02 / end / 06;
            }
        }

        #crew {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            column-gap: 2vw;
            padding: 14vh 45px 4vh 100px;
            h2 {
                grid-column: 01 / 12;
                margin-bottom: 6rem;
            }
            .profile {
                column-gap: 2vw;
                display: flex;
                flex-flow: row nowrap;
                grid-column: 01 / 12;
                padding-bottom: 10vh;
                img {
                    align-self: start;
                    flex: 0 1 50%;
                }
                .profile-text {
                    flex: 0 1 50%;
                }
                &.alt {
                    flex-direction: row-reverse;
                    grid-column: 02 / 13;
                }
            }
        }

        #press {
            padding: 8vh 45px 8vh 100px;
        }

    } /* end studio desktop */

    /* Studio, mobile */
    @media screen and (width < 960px) {

        main {
            padding-top: 200px;
        }

        #hero_banner {
            padding: 0 20px;
            .subtitle {
                margin: 2vh 0;
            }
        }

        #about {
            padding: 0 20px;
            .img-and-head h2 {
                margin: 2rem;
            }
            .img-and-head::before {
                right: 0;
                top: 320px;
                width: 100%;
            }
            .about-us p {
                padding: 0 2rem;
            }
            .design-rules li {
                flex: 0 1 150px;
            }
            .what-we-do {
                margin: 6rem 2rem 2rem 2rem;
                ul {
                    padding-left: 20%;
                }
            }
        }

        #crew {
            margin-top: 6rem;
            padding: 0 20px;
            h2 {
                color: var(--red-bright);
                font-family: var(--font-headline);
                font-size: var(--giant-mobile-size);
                line-height: var(--giant-mobile-size);
                margin-bottom: var(--giant-mobile-space);
            }
            .profile {
                img {
                    width: 100%;
                }
                .profile-text {
                    padding: 2rem 0;
                }
            }
        }

        #press {
            display: block;
            padding: 8vh 20px;
            ul {
                padding-top: 4vh;
            }
        }

    } /* end studio mobile */

} /* end studio */


/* Work listing
   ========================================================================== */

#work main {

    #hero_banner {
        /* The bear illustration (only the bear paragraph, not the subtitle inside <hgroup>) */
        > p {
            background: url('../ui/work-bear.svg') top right no-repeat;
            background-size: contain;
            position: absolute;
            top: 3vw;
            right: var(--column);
            width: max(245px, 23%);
            height: max(250px, 40%);
            text-indent: -200vw;
            z-index: -10;
        }
    }

    #list_work .project {
        position: relative;
        img {
            display: block;
            width: 100%;
            height: 100%;
        }
        .eyebrow {
            color: var(--red-dark);
            font-size: 0.8rem;
            letter-spacing: 1px;
            line-height: 1rem;
            margin-bottom: 0.3rem;
            text-transform: uppercase;
        }
        .project-title {
            color: var(--red-bright);
            font-family: var(--font-body); /* undo the general "main h2" heading style */
            font-size: var(--medium-size);
            font-weight: bold;
            line-height: 100%;
            margin-bottom: 0;
        }
        .picture-title {
            background: white;
            max-width: 65%;
            padding: 2vw;
            position: absolute;
        }
    }

    /* Work listing, desktop */
    @media screen and (width >= 960px) {

        display: grid;
        grid-template-columns: repeat(12, 1fr);
        column-gap: 2vw;
        padding: 12vw 45px 8vw 100px;

        #hero_banner {
            grid-column: 02 / 12;
            padding-right: 11%;
        }

        /* The six-project pattern repeats down the page */
        #list_work {
            align-items: start;
            display: grid;
            grid-column: 01 / 13;
            grid-template-columns: repeat(12, 1fr);
            column-gap: 2vw;
            row-gap: 2vw;
            .project {
                &.project1 {
                    grid-column: 05 / 13;
                    .picture-title {
                        bottom: 2vw;
                        left: 2vw;
                    }
                }
                &.project2 {
                    grid-column: 01 / 08;
                    .picture-title {
                        bottom: 2vw;
                        left: 2vw;
                    }
                }
                &.project3 {
                    grid-column: 08 / 13;
                    .picture-title {
                        bottom: 2vw;
                        right: 2vw;
                    }
                }
                &.project4 {
                    grid-column: 01 / 13;
                    .picture-title {
                        bottom: 2vw;
                        left: 2vw;
                    }
                }
                &.project5 {
                    grid-column: 01 / 06;
                    .picture-title {
                        bottom: 2vw;
                        left: 2vw;
                    }
                }
                &.project6 {
                    grid-column: 06 / 13;
                    .picture-title {
                        bottom: 2vw;
                        right: 2vw;
                    }
                }
            }
        }

    } /* end work listing desktop */

    /* Work listing, mobile */
    @media screen and (width < 960px) {

        padding: 220px 20px 0 20px;

        #list_work {
            margin-top: 40px;
            .project {
                margin-bottom: 2rem;
                .picture-title {
                    bottom: 2vh;
                    left: 2vh;
                    max-width: inherit;
                    padding: 1rem 2rem;
                    width: calc(100% - 4vh);
                }
            }
        }

    } /* end work listing mobile */

} /* end work listing */


/* Case study
   Colors come from --article_dark and --article_light, set per project.
   ========================================================================== */

#project main {

    color: var(--grey-text);

    #hero_banner {
        img {
            width: 100%;
        }
        .title-box {
            color: var(--article_dark);
            font-size: var(--txt-med-size);
            line-height: var(--txt-med-leading);
            margin-top: 5vw;
            h1 {
                color: var(--article_dark);
                font-family: var(--font-headline);
                font-size: var(--big-size);
                line-height: var(--big-leading);
                margin-bottom: var(--big-space);
            }
        }
        .categories {
            color: var(--article_dark);
            font-size: 0.9rem;
            letter-spacing: 1px;
            line-height: 1.75rem;
            text-transform: uppercase;
        }
    }

    .content {
        .caption {
            font-size: 0.8rem;
            letter-spacing: 1px;
            line-height: 1.25rem;
            text-transform: uppercase;
        }
        .txt h3 {
            color: var(--article_dark);
            font-size: 1.75rem;
            margin-bottom: 0.5rem;
        }
        .txt-img {
            width: 100%;
            h3 {
                color: var(--article_dark);
                font-size: var(--txt-big-size);
                line-height: var(--txt-big-leading);
                margin-bottom: 1rem;
            }
            .img-box img {
                width: 100%;
            }
            .txt-box {
                position: relative;
                &.colored::before {
                    content: "";
                    background-color: var(--article_light);
                    position: absolute;
                    z-index: -100;
                }
            }
        }
        .img1 img {
            display: block;
            width: 100%;
        }
        .pullquote {
            h3 {
                font-weight: bold;
            }
            /* Full-width colored bands */
            &.pull, &.results {
                background-color: var(--article_light);
                color: var(--article_dark);
                margin-left: calc(-50vw + 50%);
                margin-right: calc(-50vw + 50%);
                position: relative;
                text-align: center;
                &::before {
                    content: '';
                    background-color: var(--article_light);
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    z-index: -100;
                }
            }
            &.pull::before {
                height: calc(100% + 8vw);
            }
            &.results::before {
                height: calc(100% + 15vw);
            }
            &.testimonial {
                background: var(--article_light) url('../ui/story-quote.svg') 20vw 10vw no-repeat;
                color: var(--article_dark);
                margin-left: calc(-50vw + 50%);
                margin-right: calc(-50vw + 50%);
                position: relative;
                .citation p {
                    line-height: 2rem;
                    i, em {
                        display: block;
                        font-size: 1rem;
                        letter-spacing: 1px;
                        text-transform: uppercase;
                    }
                }
            }
        }
    }

    /* Previous/next project buttons */
    #related {
        display: flex;
        flex-wrap: nowrap;
        gap: 2vw;
        justify-content: center;
        margin: 10vw 0;
        .related-link {
            margin-bottom: 0;
            min-height: 129px;
            min-width: 129px;
            position: relative;
            a {
                border: none;
                border-radius: 100%;
                box-shadow: var(--shadow-medium);
                cursor: pointer;
                font-size: 1rem;
                letter-spacing: 1px;
                line-height: 1rem;
                opacity: 0.95;
                position: absolute;
                text-transform: uppercase;
                z-index: 10;
                &.next {
                    background: rgb(255 255 255 / 0.95) url('../ui/arrow-next.svg') center center no-repeat;
                    span {
                        position: absolute;
                        top: 80px;
                        left: 140px;
                        width: 129px;
                        height: 129px;
                        em {
                            display: block;
                            font-weight: bold;
                        }
                    }
                }
                &.prev {
                    background: rgb(255 255 255 / 0.95) url('../ui/arrow-prev.svg') center center no-repeat;
                    span {
                        position: absolute;
                        top: 80px;
                        right: 140px;
                        text-align: right;
                        width: 129px;
                        height: 129px;
                        em {
                            display: block;
                            font-weight: bold;
                        }
                    }
                }
                &:hover {
                    transform: translate(-2px, -2px);
                    transition: var(--fade);
                }
            }
        }
    }

    /* Case study, desktop */
    @media screen and (width >= 960px) {

        #hero_banner {
            display: grid;
            grid-auto-flow: column;
            grid-template-columns: repeat(12, 1fr);
            column-gap: 2vw;
            img {
                grid-column: 3 / -1;
            }
            .title-box {
                grid-column: 5 / -2;
            }
            .categories {
                grid-column: 2 / 4;
                margin-top: 18vw;
                text-align: right;
            }
        }

        .content {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            column-gap: 2vw;
            margin: 5vw 45px 5vw 100px;
            .caption {
                margin-bottom: 0;
                margin-top: 1.25rem;
            }
            .txt {
                margin: 7vw 0 0 0;
                &.left {
                    grid-column: 1 / span 4;
                }
                &.center {
                    grid-column: 5 / span 4;
                }
                &.right {
                    grid-column: 9 / span 4;
                }
                &.h3-text {
                    grid-column: 4 / span 7;
                    padding-top: 8rem;
                    h3 {
                        float: left;
                        width: calc(3 * var(--column) + 4vw);
                    }
                    p {
                        float: right;
                        width: calc(4 * var(--column) + 6vw);
                    }
                }
            }
            .txt-img {
                align-items: flex-start;
                display: flex;
                grid-column: 1 / -1;
                justify-content: center;
                margin-top: 5vw;
                .img-box {
                    width: 50%;
                }
                .txt-box {
                    margin-left: -5%;
                    margin-top: 5%;
                    min-height: 600px;
                    padding: 10vw;
                    width: 55%;
                    &.colored::before {
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                    }
                }
                &.imageRight {
                    flex-direction: row-reverse;
                }
            }
            .img1 {
                margin-top: 5vw;
                &.full {
                    grid-column: 1 / -1;
                }
                &.right {
                    grid-column: 3 / -1;
                }
                &.left {
                    grid-column: 1 / -3;
                }
            }
            .img2 {
                align-items: flex-start;
                column-gap: 2vw;
                display: flex;
                flex-wrap: wrap;
                grid-column: 1 / -1;
                justify-content: flex-start;
                margin-top: 5vw;
                img {
                    display: block;
                    width: calc(50% - 1vw);
                }
                .caption {
                    width: calc(50% - 1vw);
                }
                &.rightTall {
                    justify-content: flex-end;
                }
            }
            .img3 {
                display: inline-grid;
                grid-column: 1 / -1;
                margin-top: 5vw;
                &.twoLeft {
                    gap: 2vw;
                    grid-template-columns: 1fr 1fr;
                    img {
                        display: block;
                        padding-bottom: 2vw;
                        width: 100%;
                    }
                    .singleton {
                        grid-area: 01 / 02 / 02 / 03;
                        img {
                            padding-bottom: 0;
                        }
                    }
                    .twins {
                        grid-area: 01 / 01 / 02 / 02;
                    }
                }
                &.twoRight {
                    gap: 2vw;
                    grid-template-columns: 1fr 1fr;
                    img {
                        display: block;
                        padding-bottom: 2vw;
                        width: 100%;
                    }
                    .singleton {
                        grid-area: 01 / 01 / 02 / 02;
                        img {
                            padding-bottom: 0;
                        }
                    }
                    .twins {
                        grid-area: 01 / 02 / 02 / 03;
                    }
                }
                &.threeInRow {
                    column-gap: 2vw;
                    grid-template-columns: 1fr 1fr 1fr;
                    img {
                        display: block;
                        width: 100%;
                    }
                    .caption {
                        grid-column: 1 / span 2;
                    }
                }
                &.threeOverlapping {
                    display: grid;
                    grid-template-columns: repeat(12, 1fr);
                    column-gap: 2vw;
                    row-gap: 2vw;
                    img {
                        display: block;
                        width: 100%;
                    }
                    img:nth-of-type(1) {
                        grid-area: 2 / 1 / 4 / 7;
                    }
                    img:nth-of-type(2) {
                        grid-area: 1 / 6 / 3 / -1;
                    }
                    img:nth-of-type(3) {
                        align-self: start;
                        grid-area: 3 / 7 / 4 / -1;
                    }
                }
            }
            .video {
                grid-column: 1 / -1;
                margin-top: 5vw;
            }
            .pullquote {
                grid-column: 1 / -1;
                margin-top: 5vw;
                &.pull, &.results {
                    color: var(--article_dark);
                    font-size: var(--txt-big-size);
                    line-height: var(--txt-big-leading);
                    padding: 10vw 20vw 0 20vw;
                }
                &.testimonial {
                    color: var(--article_dark);
                    font-size: var(--txt-big-size);
                    line-height: var(--txt-big-leading);
                    padding: 12vw 20vw 10vw 30vw;
                }
            }
        }

        #related .related-link a {
            width: 125px;
            height: 125px;
            &:hover {
                width: 129px;
                height: 129px;
            }
        }

    } /* end case study desktop */

    /* Case study, mobile */
    @media screen and (width < 960px) {

        padding: 200px 6rem 0 6rem;

        #hero_banner .categories {
            border-bottom: 1px solid var(--article_light);
            border-top: 1px solid var(--article_light);
            margin-bottom: 3rem;
            padding: 20px 0;
        }

        .content {
            img {
                display: block;
                margin-bottom: 1rem;
                width: 100%;
            }
            .caption {
                margin-bottom: 3rem;
            }
            .txt, .txt-img, .img1, .img2, .img3, .video, .pullquote {
                display: block;
            }
            .txt-img .txt-box.colored::before {
                top: -5rem;
                left: -6rem;
                width: 100vw;
                height: calc(100% + 8rem);
            }
            .txt-img {
                margin-bottom: 4rem;
            }
            .pullquote {
                padding: 4rem 6rem;
                &.testimonial {
                    background-position: 2rem 3rem;
                }
            }
        }

        #related .related-link a {
            width: 100px;
            height: 100px;
            &.prev span {
                right: 35px;
                top: 114px;
            }
            &.next span {
                left: 35px;
                top: 114px;
            }
            &:hover {
                width: 104px;
                height: 104px;
            }
        }

    } /* end case study mobile */

    /* Case study, small tablets and phones */
    @media screen and (width <= 768px) {

        padding-left: 20px;
        padding-right: 20px;

        .content {
            .txt-img .txt-box.colored::before {
                top: -3rem;
                left: -20px;
                width: 100vw;
                height: calc(100% + 5rem);
            }
            .pullquote {
                padding: 4rem 2rem;
                &.testimonial {
                    background-position: 10px 30px;
                }
            }
        }

    } /* end case study small */

} /* end case study */


/* Contact (also used by the thanks page and the 404 page)
   ========================================================================== */

#contact main {

    background: var(--red-light) url('../ui/contact-lion.svg') 50vw top no-repeat;

    #contact-form {
        /* Honeypot: moved off-screen rather than display: none, which smarter bots skip */
        #dainty-flowers {
            position: absolute;
            left: -10000px;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }
        /* Shown only when JavaScript is off (see the <noscript> in contact/index.twig and 404.twig) */
        /* The negative top margin pulls the note up into the intro's 4rem bottom margin,
           leaving about 1.5rem between them. It only applies when the note is shown. */
        .no-js-note {
            background-color: white;
            font-size: 0.8rem;
            line-height: 1.25rem;
            margin: -2.5rem 0 2.5rem;
            padding: 1.5rem;
            text-transform: uppercase;
        }
        .intro {
            margin-bottom: 4rem;
        }
        /* Error summary after a failed send (contact-form.twig). Same box as .no-js-note,
           with a red bar down the left so it reads as "fix this" rather than a notice. */
        .form-errors {
            background-color: white;
            border-left: 4px solid var(--red-bright);
            font-size: 0.8rem;
            line-height: 1.25rem;
            margin: -2.5rem 0 2.5rem;
            padding: 1.5rem;
            text-transform: uppercase;
            &:focus {
                outline: none; /* focus is moved here by script, not by the visitor */
            }
            ul {
                margin: 0.5rem 0 0;
                padding-left: 1.25rem;
            }
            a {
                color: var(--red-dark);
            }
        }
        form {
            label {
                display: none;
            }
            input[type='text'],
            input[type='email'],
            input[type='tel'],
            textarea {
                background: none;
                border: none;
                border-bottom: 1px solid var(--red-bright);
                color: var(--red-dark);
                font-size: 2rem;
                margin-bottom: 3rem;
                min-height: 4rem;
                padding: 1rem 0;
                width: 100%;
            }
            input[type='text']::placeholder,
            input[type='email']::placeholder,
            input[type='tel']::placeholder,
            textarea::placeholder {
                color: var(--red-dark);
                font-size: 1.25rem;
                vertical-align: bottom;
            }
            input[type='text']:focus,
            input[type='email']:focus,
            input[type='tel']:focus,
            textarea:focus {
                background-color: white;
                border-bottom: 2px solid var(--red-bright);
                outline: none;
                padding: 1rem;
            }
            /* A field with a problem: heavier underline in the darker red.
               After the :focus rule so it still shows while the field is being fixed. */
            :is(input, textarea)[aria-invalid='true'] {
                border-bottom: 2px solid var(--red-dark);
                &:focus {
                    border-bottom-color: var(--red-dark);
                }
            }
            /* The message under a field. The negative top margin tucks it up under
               the field's 3rem bottom margin, so it sits just below the underline. */
            .field-error {
                font-size: 0.8rem;
                font-weight: bold;
                line-height: 1.25rem;
                margin: -2.5rem 0 3rem;
                text-transform: uppercase;
            }
        }
        button {
            background-color: transparent;
            border: 1px solid var(--red-bright);
            border-radius: 100px;
            color: var(--red-dark);
            width: 170px;
            height: 56px;
            &:hover, &:focus {
                background-color: white;
                border-width: 2px;
                cursor: pointer;
                outline: none;
            }
        }
    }

    #media-and-jobs h3 {
        color: var(--red-bright);
        font-size: var(--medium-size);
        font-weight: bold;
        line-height: 100%;
    }

    /* Contact, desktop */
    @media screen and (width >= 960px) {

        display: grid;
        grid-template-columns: repeat(12, 1fr);
        column-gap: 2vw;
        padding: 12vw 45px 8vw 100px;

        #contact-form {
            grid-column: 02 / 07;
            .intro {
                padding-right: var(--column);
            }
        }

        #media-and-jobs {
            grid-column: 08 / 12;
            h3 {
                margin: 4vw 0 1vw 0;
            }
        }

    } /* end contact desktop */

    /* Contact, mobile */
    @media screen and (width < 960px) {

        padding: 200px 20px 8vw 20px;

        .subtitle {
            color: var(--red-bright);
            font-family: var(--font-headline);
            font-size: var(--giant-mobile-size);
            line-height: var(--giant-mobile-size);
            margin-bottom: var(--giant-mobile-space);
        }

        #contact-form, #media-and-jobs {
            margin: 0 auto;
            max-width: 600px;
        }

        #media-and-jobs {
            margin-top: 150px;
            h3 {
                margin-top: 60px;
            }
        }

    } /* end contact mobile */

} /* end contact */


} /* end pages layer */