@media (orientation: portrait) {
    /*-------------------------------------------*/
    /*--- S I T E W I D E   C O N S T A N T S ---*/
    /*-------------------------------------------*/
    :root {
        /*--- original design width ---*/
        --original-design-width: 360;
    }
    

    /*-------------------*/
    /*--- G L O B A L ---*/
    /*-------------------*/
    body {
        /*--- font sizes ---*/
        --xl: calc(50 * var(--aspect-multiplier));
        --l: calc(30 * var(--aspect-multiplier));
        --m: calc(24 * var(--aspect-multiplier));
        --s: calc(14 * var(--aspect-multiplier));
        --xs: calc(10 * var(--aspect-multiplier));
    }

    section {
        max-width: 100%;
        width: 100%;
        overflow: visible;
    }

    .is-mobile { display: unset !important; }

    .is-desktop { display: none !important; }

    .button {
        padding: 0.57em 1.43em;
        font-size: var(--s);
    }

    .dark .button {
        color: rgb(var(--black));
        background-color: rgb(var(--white));
    }


    /*-------------------*/
    /*--- D I A L O G ---*/
    /*-------------------*/
    dialog .close {
        position: absolute;
        top: initial;
        bottom: calc(-80 * var(--aspect-multiplier));
        right: 50%;
        transform: translateX(50%);
    }


    /*-------------*/
    /*--- N A V ---*/
    /*-------------*/
    .main-nav {
        flex-wrap: wrap;
        min-height: auto;
        padding: calc(20 * var(--aspect-multiplier)) calc(18 * var(--aspect-multiplier)) 0 calc(18 * var(--aspect-multiplier));
    }

    .main-nav ul {
        flex: 1;
        column-gap: calc(28 * var(--aspect-multiplier));
    }

    .main-nav > a {
        order: 2;
        margin-top: calc(20 * var(--aspect-multiplier));
    }

    .main-nav > a:last-of-type img {
        max-width: calc(48 * var(--aspect-multiplier));
        width: 100%;
        max-height: 100%;
    }

    .main-nav > a img { max-width: calc(155 * var(--aspect-multiplier)); }

    .main-nav ul img { height: calc(52 * var(--aspect-multiplier)); }

    .main-nav ul li:nth-last-child(2) { margin-left: auto; }


    /*-------------------*/
    /*--- H E A D E R ---*/
    /*-------------------*/
    header { padding: calc(32 * var(--aspect-multiplier)) calc(18 * var(--aspect-multiplier)) calc(100 * var(--aspect-multiplier)) calc(18 * var(--aspect-multiplier)) }

    header .first { margin: 0; }

    header .second {
        max-width: calc(282 * var(--aspect-multiplier));
        margin-left: calc(40 * var(--aspect-multiplier));
        margin-right: 0;
    }

    header .third {
        flex-wrap: wrap;
        margin-top: calc(52 * var(--aspect-multiplier));
    }

    header .third .left { max-width: 90%; }

    header .third .right { max-width: 100%; }

    header .third .right .button { margin-top: calc(30 * var(--aspect-multiplier)); }

    header.article-hero {
        padding: calc(34 * var(--aspect-multiplier)) calc(16 * var(--aspect-multiplier)) 0 calc(16 * var(--aspect-multiplier));
    }

    /*--- ARTICLE LIST - PAGE SPECIFIC ---*/
    #article-list-page header {
        align-items: flex-start;
        column-gap: 0;
        padding: calc(50 * var(--aspect-multiplier)) calc(22 * var(--aspect-multiplier)) 0 calc(18 * var(--aspect-multiplier));
    }

    #article-list-page header h1 { max-width: calc(120 * var(--aspect-multiplier)); width: 100%;
        font-size: calc(20 * var(--aspect-multiplier));
    }

    #article-list-page header div p { line-height: 1.2; }

    #article-list-page header div p:first-of-type { margin-bottom: calc(4 * var(--aspect-multiplier)); }


    /*--- CONTACT PAGE - PAGE SPECIFIC ---*/
    #contact-page header { padding-bottom: 0; }

    #contact-page header .first { max-width: calc(280 * var(--aspect-multiplier)); }

    #contact-page header .second {
        max-width: calc(260 * var(--aspect-multiplier));
        margin-right: 0;
        margin-left: calc(64 * var(--aspect-multiplier));
    }


    /*-----------------------*/
    /*--- S H O W R E E L ---*/
    /*-----------------------*/
    #showreel { padding: 0; }


    /*----------------------------------------*/
    /*--- S T O R Y   /   N O T E  L I S T ---*/
    /*----------------------------------------*/
    #story-list,
    #note-list {
        row-gap: calc(30 * var(--aspect-multiplier));
        padding: calc(100 * var(--aspect-multiplier)) calc(16 * var(--aspect-multiplier)) 0 calc(16 * var(--aspect-multiplier));
    }

    #story-list > .button,
    #note-list > .button { margin: calc(50 * var(--aspect-multiplier)) 0 0 0; }


    /*-------------------------------*/
    /*--- A R T I C L E   L I S T ---*/
    /*-------------------------------*/
    .article-list {
        row-gap: calc(30 * var(--aspect-multiplier));
    }

    .article-list article { flex: 1 100%; }

    .article-list article a { column-gap: calc(10 * var(--aspect-multiplier)); }

    .article-list article h3,
    .article-list article.full-width h3 {
        flex: 0 auto;
        padding-right: calc(20 * var(--aspect-multiplier));
        font-size: var(--s);
    }

    .article-list article h3:has(+ span),
    .article-list article.full-width h3:has(+ span) {
        max-width: calc(184 * var(--aspect-multiplier));
    }

    .article-list article span {
        max-width: calc(100 * var(--aspect-multiplier));
        font-size: var(--xs);
    }

    .article-list article img {
        max-width: 100%;
        width: 100%;
        max-height: calc(178 * var(--aspect-multiplier));
        margin-bottom: calc(6 * var(--aspect-multiplier));

    }

    .article-list article:nth-child(4n + 1) img,
    .article-list article:nth-child(4n + 4) img {
        max-height: calc(290 * var(--aspect-multiplier));
    }

    /*--- ARTICLE LIST PAGE SPECIFIC ---*/
    #article-list-page #story-list,
    #article-list-page #note-list { padding: calc(70 * var(--aspect-multiplier)) calc(18 * var(--aspect-multiplier)) 0 calc(18 * var(--aspect-multiplier)); }


    /*-------------------------------*/
    /*--- A R T I C L E   I T E M ---*/
    /*-------------------------------*/
    .article-item { padding: calc(30 * var(--aspect-multiplier)) calc(16 * var(--aspect-multiplier)) 0 calc(16 * var(--aspect-multiplier)); }

    .article-item > p {
        margin-top: calc(30 * var(--aspect-multiplier));
        font-size: calc(16 * var(--aspect-multiplier));
    }

    .article-item.note > p {
        margin-left: 0;
        font-size: calc(16 * var(--aspect-multiplier));
    }

    .article-item .case-study {
        display: block;
        margin: calc(60 * var(--aspect-multiplier)) 0 0 0;
    }

    .article-item .case-study .label h2 { margin-top: calc(50 * var(--aspect-multiplier)); }

    .article-item .case-study .content ul,
    .article-item .case-study .content p,
    .article-item .case-study .content p + p {
        margin-top: calc(20 * var(--aspect-multiplier));
        line-height: 1.2;
    }

    .article-item .case-study .content ul li { margin-top: calc(6 * var(--aspect-multiplier)); }

    .article-item .gallery {
        display: block;
        margin-top: calc(50 * var(--aspect-multiplier));
    }

    .article-item .gallery + p { margin-top: calc(50 * var(--aspect-multiplier)); }

    .article-item .gallery .half-width,
    .article-item .gallery .full-width { max-width: 100%; }

    .article-item .gallery img:not(:first-of-type) { margin-top: calc(10 * var(--aspect-multiplier)); }

    .article-item .the-bigger-picture { padding-top: calc(50 * var(--aspect-multiplier)); }

    .article-item .the-bigger-picture h2 { font-size: var(--m); }

    .article-item .the-bigger-picture p {
        max-width: calc(288 * var(--aspect-multiplier));
        margin-top: calc(20 * var(--aspect-multiplier));
        font-size: calc(16 * var(--aspect-multiplier));
        line-height: 1.4;
    }

    .article-item .the-bigger-picture .cta {
        flex-wrap: wrap;
        margin-top: calc(18 * var(--aspect-multiplier));
    }

    .article-item .the-bigger-picture .cta div { margin: calc(35 * var(--aspect-multiplier)) 0 0 0; }

    .article-item .the-bigger-picture .cta .button { font-size: calc(14 * var(--aspect-multiplier)); }

    .article-item .the-bigger-picture .cta .previous { margin-right: calc(6 * var(--aspect-multiplier)); }


    /*-----------------------------------------------------*/
    /*--- S T O R I E S   B R O U G H T   T O   L I F E ---*/
    /*-----------------------------------------------------*/
    #stories-brought-to-life { padding: calc(100 * var(--aspect-multiplier)) calc(18 * var(--aspect-multiplier)) calc(94 * var(--aspect-multiplier)) calc(18 * var(--aspect-multiplier)); }

    #stories-brought-to-life h2 {
        max-width: calc(250 * var(--aspect-multiplier));
        margin-left: calc(78 * var(--aspect-multiplier));
    }

    #stories-brought-to-life p {
        max-width: calc(250 * var(--aspect-multiplier));
        margin-top: calc(100 * var(--aspect-multiplier));
        font-size: var(--m);
    }

    #stories-brought-to-life ol {
        margin-top: calc(40 * var(--aspect-multiplier));
    }

    #stories-brought-to-life ol li {
        display: grid;
        grid-template-columns: auto 1fr;
        row-gap: 0;
        column-gap: var(--m);
        align-items: start;
        height: auto;
        font-size: calc(20 * var(--aspect-multiplier));
        padding: calc(30 * var(--aspect-multiplier)) 0;
    }

    #stories-brought-to-life ol li::before {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    #stories-brought-to-life ol li span {
        grid-column: 2;
        grid-row: 1;
    }

    #stories-brought-to-life ol li strong {
        grid-column: 2;
        grid-row: 2;
        margin-top: calc(5 * var(--aspect-multiplier));
        text-align: left;
    }

    #stories-brought-to-life p:last-of-type {
        max-width: calc(230 * var(--aspect-multiplier));
        margin-top: calc(42 * var(--aspect-multiplier));
    }


    /*---------------------------------------------*/
    /*--- B R A N D   U N D E R S T A N D I N G ---*/
    /*---------------------------------------------*/
    #brand-understanding { padding: calc(50 * var(--aspect-multiplier)) calc(12 * var(--aspect-multiplier)); }

    #brand-understanding h2 { margin-top: calc(46 * var(--aspect-multiplier)); }

    #brand-understanding div {
        flex-wrap: wrap;
        max-width: calc(270 * var(--aspect-multiplier));
        width: 100%;
        margin-left: auto;
        padding-top: calc(42 * var(--aspect-multiplier));
    }

    #brand-understanding p,
    #brand-understanding > p,
    #brand-understanding > div > p {
        /*max-width: calc(260 * var(--aspect-multiplier));*/
        margin-left: auto;
        font-size: var(--m);
    }

    #brand-understanding > div > div > p { font-size: var(--s); }

    #brand-understanding .button { margin-left: calc(10 * var(--aspect-multiplier)); }


    /*---------------------------------------*/
    /*--- B R A N D   A N D   M O T I O N ---*/
    /*---------------------------------------*/
    #brand-and-motion { padding: 0; }

    #brand-and-motion h2 { padding: calc(100 * var(--aspect-multiplier)) calc(18 * var(--aspect-multiplier)) 0 calc(18 * var(--aspect-multiplier)); }

    #brand-and-motion ul {
        display: block;
        width: 100%;
        margin-top: calc(94 * var(--aspect-multiplier));
    }

    #brand-and-motion li {
        max-width: calc(278 * var(--aspect-multiplier));
        width: 100%;
        margin-right: calc(12 * var(--aspect-multiplier));
    }

    #brand-and-motion ul h3 { margin-bottom: calc(28 * var(--aspect-multiplier)); }

    #brand-and-motion ul p {
        max-width: calc(245 * var(--aspect-multiplier));
        width: 100%;
        margin: calc(20 * var(--aspect-multiplier)) auto 0 auto;
        text-align: center;
    }


    /*---------------------------------------*/
    /*--- S T A R T   B U I L D   G R O W ---*/
    /*---------------------------------------*/
    #start-build-grow { padding: calc(84 * var(--aspect-multiplier)) calc(18 * var(--aspect-multiplier)) 0 calc(18 * var(--aspect-multiplier)) }

    #start-build-grow .process-item { flex-wrap: wrap; }

    #start-build-grow .process-item:not(:last-child) { margin-bottom: calc(20 * var(--aspect-multiplier)); }

    #start-build-grow .process-item h3 { max-width: calc(70 * var(--aspect-multiplier)); }

    #start-build-grow .process-item p {
        max-width: calc(210 * var(--aspect-multiplier));
        margin-left: auto;
        padding: 0;
        font-size: calc(20 * var(--aspect-multiplier));
        text-align: right;
        line-height: 1.2;
    }

    #start-build-grow .process-item .arrow-start,
    #start-build-grow .process-item .arrow-build,
    #start-build-grow .process-item .arrow-grow {
        max-width: calc(250 * var(--aspect-multiplier));
        height: calc(10 * var(--aspect-multiplier));
        object-fit: cover;
        object-position: 100% 50%;
    }


    /*---------------------------------------*/
    /*--- F U T U R E   O F   S E A R C H ---*/
    /*---------------------------------------*/
    #future-of-search { padding: calc(92 * var(--aspect-multiplier)) calc(18 * var(--aspect-multiplier)) calc(138 * var(--aspect-multiplier)) calc(18 * var(--aspect-multiplier)); }

    #future-of-search h2 {
        max-width: calc(214 * var(--aspect-multiplier));
        margin-left: calc(78 * var(--aspect-multiplier));
    }

    #future-of-search div {
        display: block;
        margin-top: calc(92 * var(--aspect-multiplier));
    }

    #future-of-search div h3 {
        max-width: calc(300 * var(--aspect-multiplier));
        font-size: var(--m);
    }

    #future-of-search div p {
        margin-top: calc(24 * var(--aspect-multiplier));
    }


    /*---------------------------*/
    /*--- W H A T   W E   D O ---*/
    /*---------------------------*/
    #what-we-do { padding: calc(30 * var(--aspect-multiplier)) calc(12 * var(--aspect-multiplier)); }

    #what-we-do h2 {
        max-width: calc(270 * var(--aspect-multiplier));
        margin-left: calc(6 * var(--aspect-multiplier));
    }

    #what-we-do img {
        max-width: calc(336 * var(--aspect-multiplier));
        margin: calc(30 * var(--aspect-multiplier)) 0 0 0;
    }


    /*-------------------------------*/
    /*--- T E S T I M O N I A L S ---*/
    /*-------------------------------*/
    #testimonials { padding: calc(100 * var(--aspect-multiplier)) 0 0 calc(18 * var(--aspect-multiplier)); }

    #testimonials h2 {
        flex: 1 100%;
        font-size: var(--m);
    }

    #testimonials p {
        max-width: calc(194 * var(--aspect-multiplier));
        margin-top: calc(22 * var(--aspect-multiplier));
    }

    #testimonials .testimonials-row { flex-wrap: wrap; }

    #testimonials .testimonials-row:first-of-type {
        align-items: flex-end;
        padding: 0;
    }

    #testimonials .testimonial-controls { padding: 0; }

    #testimonials .testimonial-controls .testimonial-prev,
    #testimonials .testimonial-controls .testimonial-next {
        width: calc(30 * var(--aspect-multiplier));
        height: calc(30 * var(--aspect-multiplier));
        margin-right: calc(14 * var(--aspect-multiplier));
    }

    #testimonials .testimonial-carousel {
        min-height: auto;
        padding-top: calc(44 * var(--aspect-multiplier));
    }

    #testimonials .testimonial { margin-right: calc(10 * var(--aspect-multiplier)); }

    #testimonials .testimonial,
    #testimonials .testimonial img { max-width: calc(290 * var(--aspect-multiplier)); }

    #testimonials .testimonial p { margin-top: calc(8 * var(--aspect-multiplier)); }

    #testimonials .testimonial blockquote {
        max-width: calc(270 * var(--aspect-multiplier));
        margin-top: calc(20 * var(--aspect-multiplier));
        line-height: 1.2;
    }


    /*-------------*/
    /*--- C T A ---*/
    /*-------------*/
    #cta { padding: calc(100 * var(--aspect-multiplier)) calc(18 * var(--aspect-multiplier)) 0 calc(18 * var(--aspect-multiplier)); }

    #cta h2 { word-spacing: 0; }

    #cta h2 .cta { margin-left: calc(60 * var(--aspect-multiplier)); }


    /*---------------------*/
    /*--- C O N T A C T ---*/
    /*---------------------*/
    #contact { padding: calc(64 * var(--aspect-multiplier)) calc(14 * var(--aspect-multiplier)) 0 calc(14 * var(--aspect-multiplier)); }

    #contact h2 { font-size: calc(20 * var(--aspect-multiplier)); }

    #contact p { margin-top: calc(16 * var(--aspect-multiplier)); }

    #contact .button { margin-top: calc(22 * var(--aspect-multiplier)); }

    #contact div { display: block; }

    #contact div + div,
    #contact form { margin-top: calc(45 * var(--aspect-multiplier)); }

    #contact form { display: block; }

    #contact form ul { margin-top: calc(30 * var(--aspect-multiplier)); }

    #contact form input,
    #contact form textarea {
        height: calc(70 * var(--aspect-multiplier));
        font-size: calc(14 * var(--aspect-multiplier));
    }

    #contact form textarea {
        height: calc(140 * var(--aspect-multiplier));
        padding: calc(20 * var(--aspect-multiplier)) 0;
    }

    #contact form .button { margin: calc(30 * var(--aspect-multiplier)) 0 0 0; }

    #contact form ul li:first-of-type input { font-size: calc(14 * var(--aspect-multiplier)); }

    #contact form .form-messages { margin-top: calc(30 * var(--aspect-multiplier)); }

    #contact form .form-messages h3 { font-size: var(--s); }

    #contact form .form-messages p { line-height: 1.4; }


    /*-------------------*/
    /*--- F O O T E R ---*/
    /*-------------------*/
    footer {
        display: block;
        padding: calc(100 * var(--aspect-multiplier)) calc(16 * var(--aspect-multiplier)) calc(16 * var(--aspect-multiplier)) calc(16 * var(--aspect-multiplier));
    }

    footer .contact-details { margin-bottom: calc(34 * var(--aspect-multiplier)); }

    footer .contact-details p { font-size: calc(20 * var(--aspect-multiplier)); }

    footer .contact-details p:not(:first-child) { margin-top: calc(10 * var(--aspect-multiplier)); }

    footer .contact-details a {
        font-weight: 700;
    }

    footer .left,
    footer .right {
        max-width: none;
        width: 100%;
    }

    footer .left img {
        margin-top: 0;
        max-width: calc(155 * var(--aspect-multiplier));
    }

    footer .left > p {
        max-width: calc(290 * var(--aspect-multiplier));
        margin-top: calc(12 * var(--aspect-multiplier));
        font-size: calc(16 * var(--aspect-multiplier));
    }

    footer .links {
        grid-template-columns: repeat(3, 1fr);
        column-gap: calc(35 * var(--aspect-multiplier));
        margin-top: calc(34 * var(--aspect-multiplier));
    }

    footer .links div {
        gap: calc(8 * var(--aspect-multiplier));
    }

    footer .links a {
        font-size: calc(10 * var(--aspect-multiplier));
    }

    footer .right {
        margin-top: calc(34 * var(--aspect-multiplier));
    }

    footer .right img {
        max-width: calc(46 * var(--aspect-multiplier));
    }

    footer .right > p:first-of-type {
        margin-top: calc(8 * var(--aspect-multiplier));
        font-size: calc(16 * var(--aspect-multiplier));
    }

    footer .right > p:last-of-type {
        margin-top: calc(16 * var(--aspect-multiplier));
        font-size: var(--xs);
    }

    footer .copyright {
        margin-top: calc(30 * var(--aspect-multiplier));
        font-size: var(--xs);
    }

}