/*-----------------*/
/*--- F O N T S ---*/
/*-----------------*/

@import url('https://use.typekit.net/bjl0nkc.css');


/*-------------------------------------------*/
/*--- S I T E W I D E   C O N S T A N T S ---*/
/*-------------------------------------------*/

:root {
    /*--- original design width ---*/
    --original-design-width: 1798;

    /*--- standard colours ---*/
    --grey-875: 32, 32, 32;
    --grey-750: 64, 64, 64;
    --grey-625: 96, 96, 96;
    --grey-500: 128, 128, 128;
    --grey-375: 160, 160, 160;
    --grey-250: 192, 192, 192;
    --grey-125: 224, 224, 224;
    --white: 255, 255, 255;

    /*--- design specific ---*/
    --black: 16, 2, 2;
    --blue: 0, 0, 253;
    --red: 200, 92, 92;
    --green: 92, 170, 115;

    /*--- fonts ---*/
    --font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
}


/*-------------------*/
/*--- G L O B A L ---*/
/*-------------------*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 1;
    letter-spacing: calc(0.5 * var(--aspect-multiplier));
    font-family: var(--font-family), sans-serif;
}

html {
    scroll-behavior: smooth;
}

html.fixed {
    overflow: hidden;
}

html,
body {
    height: 100%;
}

body {
    flex: 0 auto;
    container-type: inline-size;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;

    /*--- aspect multiplier ---*/
    --aspect-multiplier: calc(100cqw / var(--original-design-width));

    /*--- font sizes ---*/
    --xl: calc(150 * var(--aspect-multiplier));
    --l: calc(60 * var(--aspect-multiplier));
    --m: calc(30 * var(--aspect-multiplier));
    --s: calc(22 * var(--aspect-multiplier));
    --xs: calc(16 * var(--aspect-multiplier));
}

section {
    padding: calc(100 * var(--aspect-multiplier)) calc(46 * var(--aspect-multiplier)) 0 calc(46 * var(--aspect-multiplier));
}

h1 {
    font-size: var(--l);
    font-weight: 500;
}

h2 {
    font-size: var(--m);
    font-weight: 500;
}

h3 {
    font-size: var(--s);
    font-weight: 600;
}

p {
    font-size: var(--s);
}

.preload * { transition: none !important; }

.hidden-onload { display: none; }

.is-sr-only {
    position: absolute;
    left: calc(-10000 * var(--aspect-multiplier));
}

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

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


/*---------------------------*/
/*--- A N I M A T I O N S ---*/
/*---------------------------*/

.js .letter-animate {
    visibility: hidden;
}

.js .letter-visible {
    visibility: visible;
}

.js .letter-word {
    display: inline;
    white-space: nowrap;
    line-height: inherit;
    font: inherit;
    vertical-align: baseline;
}

.js .letter {
    display: inline;
    position: relative;
    opacity: 0;
    top: 0;
    line-height: inherit;
    font: inherit;
    vertical-align: baseline;
}


/*---------------------*/
/*--- B U T T O N S ---*/
/*---------------------*/

button { appearance: none; }

button,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55em 1.55em;
    font-size: var(--s);
    color: rgb(var(--black));
    background: transparent;
    border: calc(1 * var(--aspect-multiplier)) solid rgb(var(--black));
    border-radius: 100em;
    text-decoration: none;
    line-height: 1.2;
    transition: all ease-in-out .25s;
    cursor: pointer;
}

button:hover,
.button:hover {
    color: rgb(var(--white));
    border: calc(1 * var(--aspect-multiplier)) solid rgb(var(--blue));
    background-color: rgb(var(--blue));
}

button.-v2,
.button.-v2 {
    color: rgb(var(--white));
    border: calc(1 * var(--aspect-multiplier)) solid rgb(var(--blue));
    background-color: rgb(var(--blue));
}

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

.dark h2,
.dark h3,
.dark p {
    color: rgb(var(--white));
}

.dark .button {
    color: rgb(var(--white));
    border: calc(1 * var(--aspect-multiplier)) solid rgb(var(--white));
}

.dark .button:hover {
    color: rgb(var(--black));
    border: calc(1 * var(--aspect-multiplier)) solid rgb(var(--black));
    background-color: rgb(var(--white));
}


/*-------------------*/
/*--- D I A L O G ---*/
/*-------------------*/

.video-modal {
    align-items: center;
    justify-content: center;
    width: min(
            90vw,
            calc(1920 * var(--aspect-multiplier)),
            calc(95vh * 16 / 9)
    );
    height: auto;
    max-height: 95vh;
    margin: auto;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}

.video-modal[open] {
    display: flex;
}

.video-modal::backdrop {
    background: rgb(0 0 0 / 80%);
}

.video-modal-content {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-modal-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

dialog .close {
    position: absolute;
    top: 0;
    right: calc(-80 * var(--aspect-multiplier));
    width: calc(50 * var(--aspect-multiplier));
    height: calc(50 * var(--aspect-multiplier));
    padding: 0;
    background: rgb(var(--white));
    border: none;
    cursor: pointer;
    z-index: 99;
}

dialog .close svg {
    width: calc(20 * var(--aspect-multiplier));
    height: calc(20 * var(--aspect-multiplier));
    display: block;
    stroke: black;
    stroke-width: 2;
    stroke-linecap: round;
}


/*---------------------------*/
/*--- N A V I G A T I O N ---*/
/*---------------------------*/

.main-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    column-gap: calc(24 * var(--aspect-multiplier));
    min-height: calc(82 * var(--aspect-multiplier));
    padding: calc(20 * var(--aspect-multiplier)) calc(46 * var(--aspect-multiplier)) 0 calc(46 * var(--aspect-multiplier));
    font-size: var(--s);
}

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

.main-nav ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: calc(48 * var(--aspect-multiplier));
    list-style: none;
}

.main-nav ul .active {
    font-weight: 600;
}

.main-nav ul a {
    color: rgb(var(--black));
    text-decoration: none;
    white-space: nowrap;
}

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


/*-------------------*/
/*--- H E A D E R ---*/
/*-------------------*/

header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: calc(80 * var(--aspect-multiplier)) calc(46 * var(--aspect-multiplier)) 0 calc(46 * var(--aspect-multiplier));
}

header h1 {
    font-size: var(--l);
    font-weight: 500;
}

header .first {
    max-width: calc(990 * var(--aspect-multiplier));
    width: 100%;
    margin-left: calc(158 * var(--aspect-multiplier));
    font-size: var(--xl);
    font-weight: 500;
    color: rgb(var(--black));
    line-height: 0.8;
}

header .second {
    max-width: calc(940 * var(--aspect-multiplier));
    width: 100%;
    margin-left: auto;
    margin-right: calc(160 * var(--aspect-multiplier));
    font-size: var(--xl);
    font-weight: 500;
    text-align: left;
    color: rgb(var(--blue));
    line-height: 0.8;
    letter-spacing: calc(-1.5 * var(--aspect-multiplier));
}

header .third {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    margin-top: calc(124 * var(--aspect-multiplier));
    font-size: var(--xl);
    font-weight: 500;
    color: rgb(var(--black))
}

header .third .left {
    flex: 1 100%;
    max-width: calc(870 * var(--aspect-multiplier));
    font-size: var(--xl);
    line-height: 0.8;
}

header .third .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: calc(678 * var(--aspect-multiplier));
    padding-top: calc(34 * var(--aspect-multiplier));
}

header .third .right p {
    font-size: var(--s);
    line-height: 1.7;
}

header .third .right .button {
    align-self: flex-start;
}

header.article-hero img {
    display: block;
    width: 100%;
    height: auto;
}


/*--- ARTICLE LIST - PAGE SPECIFIC ---*/

#article-list-page header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    column-gap: calc(50 * var(--aspect-multiplier));
    padding: calc(110 * var(--aspect-multiplier)) calc(160 * var(--aspect-multiplier)) 0 calc(46 * var(--aspect-multiplier));
}

#article-list-page header div {
    max-width: calc(580 * var(--aspect-multiplier));
    width: 100%;
}

#article-list-page header div p {
    font-size: var(--s);
}

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

/*--- CONTACT - PAGE SPECIFIC ---*/

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

#contact-page header .second {
    max-width: calc(1140 * var(--aspect-multiplier));
    margin-right: calc(120 * var(--aspect-multiplier));
}


/*-----------------------*/
/*--- S H O W R E E L ---*/
/*-----------------------*/

#showreel {
    padding: calc(270 * var(--aspect-multiplier)) calc(46 * var(--aspect-multiplier)) 0 calc(46 * var(--aspect-multiplier));
}

#showreel video {
    max-width: 100%;
}


/*----------------------------------------*/
/*--- S T O R Y   /   N O T E  L I S T ---*/
/*----------------------------------------*/

#story-list,
#note-list {
    padding: calc(120 * var(--aspect-multiplier)) calc(46 * var(--aspect-multiplier)) 0 calc(46 * var(--aspect-multiplier));
    text-align: center;
}

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


/*-------------------------------*/
/*--- A R T I C L E   L I S T ---*/
/*-------------------------------*/

.article-list {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    column-gap: calc(20 * var(--aspect-multiplier));
    row-gap: calc(64 * var(--aspect-multiplier));
}

.article-list article {
    flex: 0 1 calc(50% - calc(10 * var(--aspect-multiplier)));
    width: auto;
    padding-bottom: 0;
}

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

.article-list article a {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    color: rgb(var(--black));
    text-decoration: none;
}

.article-list article img {
    width: 100%;
    margin-bottom: calc(20 * var(--aspect-multiplier));
}

.article-list article:not(.full-width) img {
    height: auto;
    object-fit: cover;
    object-position: 50% 50%;
}

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

.article-list article:nth-child(4n + 2) img,
.article-list article:nth-child(4n + 3) img {
    height: calc(458 * var(--aspect-multiplier));
}

.article-list article h3 {
    padding-right: calc(20 * var(--aspect-multiplier));
    font-size: var(--m);
    font-weight: 500;
    text-align: left;
    line-height: 1.2;
}

.article-list article h3:has(+ span) {
    max-width: calc(426 * var(--aspect-multiplier));
    width: 100%;
}

.article-list article span {
    font-size: var(--s);
    text-align: right;
    line-height: 1.2;
}


/*-------------------------------*/
/*--- A R T I C L E   I T E M ---*/
/*-------------------------------*/

.article-item {
    padding: calc(60 * var(--aspect-multiplier)) calc(50 * var(--aspect-multiplier)) 0 calc(50 * var(--aspect-multiplier));
}

.article-item h1 {
    max-width: calc(1060 * var(--aspect-multiplier));
    font-size: var(--l);
    font-weight: 500;
    line-height: 1.2;
}

.article-item > p {
    max-width: calc(1060 * var(--aspect-multiplier));
    width: 100%;
    margin-top: calc(60 * var(--aspect-multiplier));
    font-size: var(--m);
    line-height: 1.4;
}

.article-item.note > p,
.article-item.note ul {
    max-width: calc(1220 * var(--aspect-multiplier));
    margin-left: calc(500 * var(--aspect-multiplier));
    font-size: calc(28 * var(--aspect-multiplier));
}

.article-item.note ul {
    margin-top: calc(50 * var(--aspect-multiplier));
    list-style-position: inside;
}

.article-item.note .emoji-bullets {
    list-style: none;
}

.article-item.note ul li:not(:first-child) {
    margin-top: calc(20 * var(--aspect-multiplier));
}

.article-item .case-study {
    display: grid;
    align-items: start;
    grid-template-columns: calc(360 * var(--aspect-multiplier)) calc(780 * var(--aspect-multiplier));
    column-gap: calc(60 * var(--aspect-multiplier));
    row-gap: calc(150 * var(--aspect-multiplier));
    max-width: calc(1300 * var(--aspect-multiplier));
    width: 100%;
    margin: calc(140 * var(--aspect-multiplier)) 0 0 calc(420 * var(--aspect-multiplier));
    font-size: var(--s);
}

.article-item .case-study .label h2,
.article-item .case-study .content p {
    font-size: var(--s);
    font-weight: 500;
    line-height: 1.6;
}

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

.article-item .case-study ul {
    list-style: none;
}

.article-item .case-study ul li:not(:first-child) {
    margin-top: calc(20 * var(--aspect-multiplier));
}

.article-item .gallery {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: calc(20 * var(--aspect-multiplier));
    margin-top: calc(150 * var(--aspect-multiplier));
}

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

.article-item .gallery .full-width {
    flex: 1 100%;
    max-width: 100%;
}

.article-item .gallery .half-width {
    flex: 1 50%;
    max-width: calc(50% - calc(10 * var(--aspect-multiplier)));
}

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

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

.article-item .the-bigger-picture p {
    max-width: calc(1080 * var(--aspect-multiplier));
    margin-top: calc(48 * var(--aspect-multiplier));
    font-size: calc(28 * var(--aspect-multiplier));
    line-height: 1.6;
}

.article-item .the-bigger-picture .cta {
    display: flex;
    align-items: flex-end;
    column-gap: calc(20 * var(--aspect-multiplier));
    margin-top: calc(50 * var(--aspect-multiplier));
}

.article-item .the-bigger-picture .cta .button {
    font-size: var(--s);
}

.article-item .the-bigger-picture .cta div {
    margin-left: auto;
}

.article-item .the-bigger-picture .cta .previous {
    margin-right: calc(15 * 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(264 * var(--aspect-multiplier)) calc(46 * var(--aspect-multiplier)) calc(280 * var(--aspect-multiplier)) calc(46 * var(--aspect-multiplier));
}

#stories-brought-to-life h2 {
    max-width: calc(1180 * var(--aspect-multiplier));
    width: 100%;
    margin-left: calc(158 * var(--aspect-multiplier));
    font-size: var(--xl);
    font-weight: 500;
    line-height: 0.8;
    letter-spacing: calc(-0.5 * var(--aspect-multiplier));
}

#stories-brought-to-life p {
    margin-top: calc(284 * var(--aspect-multiplier));
    font-size: var(--l);
    font-weight: 500;
    letter-spacing: calc(-0.5 * var(--aspect-multiplier));
}

#stories-brought-to-life p:last-of-type {
    max-width: calc(660 * var(--aspect-multiplier));
    margin-left: auto;
    margin-top: calc(138 * var(--aspect-multiplier));
    line-height: 1.2;
}

#stories-brought-to-life ol {
    margin-top: calc(138 * var(--aspect-multiplier));
    list-style: none;
    counter-reset: item;
    font-size: var(--m);
}

#stories-brought-to-life ol li {
    display: flex;
    align-items: center;
    counter-increment: item;
    gap: calc(60 * var(--aspect-multiplier));
    height: calc(124 * var(--aspect-multiplier));
    border-bottom: calc(1 * var(--aspect-multiplier)) solid rgb(var(--blue));
}

#stories-brought-to-life ol li:first-child {
    border-top: calc(1 * var(--aspect-multiplier)) solid rgb(var(--blue));
}

#stories-brought-to-life ol li::before {
    content: counter(item, decimal-leading-zero);
    flex: 0 0 auto;
    font-weight: 600;
}

#stories-brought-to-life ol li span {
    flex: 1;
}

#stories-brought-to-life ol li strong {
    flex: 1;
    text-align: right;
}


/*---------------------------------------------*/
/*--- B R A N D   U N D E R S T A N D I N G ---*/
/*---------------------------------------------*/

#brand-understanding {
    padding: calc(138 * var(--aspect-multiplier)) calc(238 * var(--aspect-multiplier)) calc(100 * var(--aspect-multiplier)) calc(46 * var(--aspect-multiplier));
    color: rgb(var(--white));
    background-color: rgb(var(--black));
}

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

#brand-understanding > h2 {
    max-width: calc(1510 * var(--aspect-multiplier));
    margin-top: calc(118 * var(--aspect-multiplier));
    font-size: var(--xl);
    font-weight: 500;
    line-height: 0.8;
}

#brand-understanding > p,
#brand-understanding > div > p {
    max-width: calc(720 * var(--aspect-multiplier));
    font-size: var(--l);
    line-height: 1.2;
}

#brand-understanding > div {
    display: flex;
    justify-content: space-between;
    padding-top: calc(162 * var(--aspect-multiplier));
}

#brand-understanding > div > div p:not(:first-child) {
    margin-top: calc(15 * var(--aspect-multiplier));
}


/*---------------------------------------*/
/*--- B R A N D   A N D   M O T I O N ---*/
/*---------------------------------------*/

#brand-and-motion {
    padding: calc(286 * var(--aspect-multiplier)) calc(46 * var(--aspect-multiplier)) 0 calc(46 * var(--aspect-multiplier));
}

#brand-and-motion > h2 {
    max-width: calc(680 * var(--aspect-multiplier));
    width: 100%;
    font-size: var(--l);
    font-weight: 500;
    line-height: 1.2;
}

#brand-and-motion ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(25 * var(--aspect-multiplier));
    list-style: none;
    margin-top: calc(270 * var(--aspect-multiplier));
}

#brand-and-motion ul h3 {
    margin-bottom: calc(70 * var(--aspect-multiplier));
    font-size: var(--l);
    font-weight: 500;
    text-align: center;
}

#brand-and-motion ul video {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

#brand-and-motion ul p {
    margin-top: calc(50 * var(--aspect-multiplier));
    font-size: var(--s);
    text-align: center;
    line-height: 1.2;
}


/*---------------------------------------*/
/*--- S T A R T   B U I L D   G R O W ---*/
/*---------------------------------------*/

#start-build-grow {
    padding: calc(300 * var(--aspect-multiplier)) calc(46 * var(--aspect-multiplier)) 0 calc(46 * var(--aspect-multiplier));
}

#start-build-grow .process-item {
    display: flex;
    align-items: center;
}

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

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

#start-build-grow .process-item h3,
#start-build-grow .process-item p {
    font-size: var(--m);
}

#start-build-grow .process-item p {
    padding-left: calc(38 * var(--aspect-multiplier));
}

#start-build-grow .process-item .arrow-start {
    max-width: calc(716 * var(--aspect-multiplier));
    width: 100%;
}

#start-build-grow .process-item .arrow-build {
    max-width: calc(415 * var(--aspect-multiplier));
    width: 100%;
}

#start-build-grow .process-item .arrow-grow {
    max-width: calc(780 * var(--aspect-multiplier));
    width: 100%;
}


/*---------------------------------------*/
/*--- F U T U R E   O F   S E A R C H ---*/
/*---------------------------------------*/

#future-of-search {
    padding: calc(260 * var(--aspect-multiplier)) calc(46 * var(--aspect-multiplier)) calc(280 * var(--aspect-multiplier)) calc(46 * var(--aspect-multiplier));
}

#future-of-search h2 {
    max-width: calc(1080 * var(--aspect-multiplier));
    margin-left: calc(148 * var(--aspect-multiplier));
    font-size: var(--xl);
    font-weight: 500;
}

#future-of-search div {
    display: flex;
    justify-content: space-between;
    margin-top: calc(250 * var(--aspect-multiplier));
}

#future-of-search div h3 {
    max-width: calc(720 * var(--aspect-multiplier));
    font-size: var(--l);
    font-weight: 500;
}

#future-of-search div p {
    max-width: calc(678 * var(--aspect-multiplier));
    font-size: var(--s);
    line-height: 1.8;
}


/*---------------------------*/
/*--- W H A T   W E   D O ---*/
/*---------------------------*/

#what-we-do {
    padding: calc(124 * var(--aspect-multiplier)) calc(46 * var(--aspect-multiplier)) calc(146 * var(--aspect-multiplier)) calc(46 * var(--aspect-multiplier));
}

#what-we-do h2 {
    max-width: calc(960 * var(--aspect-multiplier));
    font-size: var(--l);
    font-weight: 500;
}

#what-we-do img {
    max-width: calc(1128 * var(--aspect-multiplier));
    width: 100%;
    margin: calc(136 * var(--aspect-multiplier)) 0 0 calc(144 * var(--aspect-multiplier));
}


/*-------------------------------*/
/*--- T E S T I M O N I A L S ---*/
/*-------------------------------*/

#testimonials {
    padding: calc(290 * var(--aspect-multiplier)) 0 0 calc(46 * var(--aspect-multiplier));
}

#testimonials .testimonials-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

#testimonials .testimonials-row:first-of-type {
    align-items: baseline;
    padding-right: calc(46 * var(--aspect-multiplier));
}

#testimonials h2 {
    font-size: var(--l);
    font-weight: 500;
}

#testimonials p {
    font-size: var(--s);
}

#testimonials .testimonial-controls {
    padding: calc(250 * var(--aspect-multiplier)) 0 0 calc(80 * var(--aspect-multiplier));
}

#testimonials .testimonial-controls .testimonial-prev,
#testimonials .testimonial-controls .testimonial-next {
    width: calc(42 * var(--aspect-multiplier));
    height: calc(42 * var(--aspect-multiplier));
    margin-right: calc(20 * var(--aspect-multiplier));
    padding: 0;
    border: none;
    border-radius: 100em;
    color: #100202;
    background: transparent;
    appearance: none;
    cursor: pointer;
    transition: color ease-in-out .25s;
}

#testimonials .testimonial-controls .testimonial-prev svg,
#testimonials .testimonial-controls .testimonial-next svg {
    display: block;
    width: 100%;
    height: 100%;
}

#testimonials .testimonial-controls .testimonial-prev circle,
#testimonials .testimonial-controls .testimonial-next circle {
    fill: transparent;
    stroke: currentColor;
    transition: fill ease-in-out .25s,
    stroke ease-in-out .25s;
}

#testimonials .testimonial-controls .testimonial-prev path,
#testimonials .testimonial-controls .testimonial-next path {
    stroke: currentColor;
    transition: stroke ease-in-out .25s;
}

#testimonials .testimonial-controls .testimonial-prev:hover,
#testimonials .testimonial-controls .testimonial-next:hover {
    color: rgb(var(--white));
}

#testimonials .testimonial-controls .testimonial-prev:hover circle,
#testimonials .testimonial-controls .testimonial-next:hover circle {
    fill: rgb(var(--blue));
    stroke: rgb(var(--blue));
}

#testimonials .testimonial-controls .testimonial-prev:hover path,
#testimonials .testimonial-controls .testimonial-next:hover path {
    stroke: rgb(var(--white));
}

#testimonials .testimonial-carousel {
    list-style: none;
    max-width: calc(1465 * var(--aspect-multiplier));
    width: 100%;
    min-height: calc(1074 * var(--aspect-multiplier));
    margin-left: auto;
    padding-top: calc(150 * var(--aspect-multiplier));
}

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

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

#testimonials .testimonial img {
    display: block;
}

#testimonials .testimonial .is-video {
    position: relative;
}

#testimonials .testimonial .is-video .video-play {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    background: url("/images/play_button.svg") left calc(20 * var(--aspect-multiplier)) bottom calc(20 * var(--aspect-multiplier)) / calc(42 * var(--aspect-multiplier)) calc(42 * var(--aspect-multiplier)) no-repeat transparent;
    cursor: pointer;
    border-radius: 0;
    z-index: 99;
}

#testimonials .testimonial h3,
#testimonials .testimonial p,
#testimonials .testimonial blockquote {
    font-size: var(--s);
}

#testimonials .testimonial p {
    margin: calc(12 * var(--aspect-multiplier)) 0 calc(30 * var(--aspect-multiplier)) 0;
}

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


/*-------------*/
/*--- C T A ---*/
/*-------------*/

#cta {
    padding: calc(250 * var(--aspect-multiplier)) calc(176 * var(--aspect-multiplier)) 0 calc(190 * var(--aspect-multiplier));
}

#cta h2 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    font-size: var(--xl);
    font-weight: 500;
    word-spacing: calc(-10 * var(--aspect-multiplier));
}

#cta h2 > span {
    display: block;
    line-height: 0.8;
}

#cta h2 > span:last-child {
    align-self: flex-end;
    max-width: calc(1190 * var(--aspect-multiplier));
    color: rgb(var(--blue));
}

#cta h2 .letter {
    display: inline;
}


/*---------------------*/
/*--- C O N T A C T ---*/
/*---------------------*/

#contact {
    padding: calc(200 * var(--aspect-multiplier)) calc(190 * var(--aspect-multiplier)) 0 calc(190 * var(--aspect-multiplier));
}

#contact h2 {
    flex: 1 100%;
    font-size: var(--l);
    font-weight: 500;
}

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

#contact > div {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
}

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

#contact form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#contact form ul {
    list-style: none;
}

#contact form ul li {
    position: relative;
}

#contact form input,
#contact form textarea {
    width: 100%;
    height: calc(120 * var(--aspect-multiplier));
    font-size: calc(30 * var(--aspect-multiplier));
    border: none;
    border-bottom: calc(1 * var(--aspect-multiplier)) solid rgb(var(--black));
    appearance: none;
}

#contact form input:focus,
#contact form textarea:focus {
    outline: none;
    box-shadow:
            inset 0 2px 0 rgb(var(--blue)),
            inset 0 -2px 0 rgb(var(--blue))
}

#contact form textarea {
    min-height: calc(240 * var(--aspect-multiplier));
    padding: calc(50 * var(--aspect-multiplier)) 0;
    resize: vertical;
}

#contact form li.has-errors input,
#contact form li.has-errors textarea {
    color: rgb(var(--red));
}

#contact form li.has-errors::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(30 * var(--aspect-multiplier));
    width: calc(15 * var(--aspect-multiplier));
    height: calc(15 * var(--aspect-multiplier));
    border-radius: 50%;
    background: rgb(var(--red));
    transform: translateY(-50%);
    animation: pulse 1.5s ease-in-out infinite;
    z-index: 99;
}

@keyframes pulse {
    0%, 100% {
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translateY(-50%) scale(1.4);
        opacity: 0.5;
    }
}

#contact form ul {
    width: 100%;
    margin-top: calc(70 * var(--aspect-multiplier));
}

#contact form ul li:first-of-type input {
    border-top: calc(1 * var(--aspect-multiplier)) solid rgb(var(--black));
}

#contact form button {
    align-self: flex-end;
    margin: calc(44 * var(--aspect-multiplier)) 0 0 auto;
}

#contact form .form-messages {
    margin-top: calc(70 * var(--aspect-multiplier));
    padding: calc(20 * var(--aspect-multiplier)) 0 calc(20 * var(--aspect-multiplier)) calc(20 * var(--aspect-multiplier));
}

#contact form .form-messages.error {
    border-left: calc(4 * var(--aspect-multiplier)) solid rgb(var(--red));
}

#contact form .form-messages.success {
    border-left: calc(4 * var(--aspect-multiplier)) solid rgb(var(--green));
}

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

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

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

#contact form .form-messages ul li {
    margin-top: calc(20 * var(--aspect-multiplier));
    font-size: var(--s);
    color: rgb(var(--red));
}

#contact form .form-messages ul li a {
    display: flex;
    column-gap: calc(20 * var(--aspect-multiplier));
    font-size: var(--s);
    color: rgb(var(--red));
}


/*-----------------------------------------------------*/
/*--- P R I V A C Y   /   C O O K I E   P O L I C Y ---*/
/*-----------------------------------------------------*/

#policy h1 {
    margin-bottom: calc(62 * var(--aspect-multiplier));
}

#policy h2 {
    margin-bottom: calc(46 * var(--aspect-multiplier));
}

#policy h3 {
    margin-bottom: calc(10 * var(--aspect-multiplier));
}

#policy p {
    margin-bottom: calc(40 * var(--aspect-multiplier));
    line-height: 1.6;
}

#policy p:has(+ ul) {
    margin-bottom: calc(5 * var(--aspect-multiplier));
}

#policy ul {
    margin-left: calc(35 * var(--aspect-multiplier));
    margin-bottom: calc(46 * var(--aspect-multiplier));
}

#policy ul li {
    margin-top: calc(10 * var(--aspect-multiplier));
    font-size: var(--s);
}

/*-----------------------------*/
/*--- E R R O R   P A G E S ---*/
/*-----------------------------*/

#error h1 {
    margin-bottom: calc(30 * var(--aspect-multiplier));
    font-weight: 500;
}

#error h2 {
    margin-bottom: calc(40 * var(--aspect-multiplier));
    font-weight: 500;
}

#error ul,
#error p {
    margin-bottom: calc(20 * var(--aspect-multiplier));
}

#error ul {
    margin-left: calc(40 * var(--aspect-multiplier));
}

#error ul li {
    margin-top: calc(10 * var(--aspect-multiplier));
}


/*-------------------*/
/*--- F O O T E R ---*/
/*-------------------*/

footer {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: calc(30 * var(--aspect-multiplier));
    padding: calc(260 * var(--aspect-multiplier)) calc(46 * var(--aspect-multiplier)) calc(30 * var(--aspect-multiplier));
    font-size: calc(14 * var(--aspect-multiplier));
}

footer .contact-details {
    grid-column: 1 / -1;
    margin-bottom: calc(90 * var(--aspect-multiplier));
}

footer .contact-details p {
    font-size: var(--l);
}

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

footer .contact-details a {
    color: rgb(var(--black));
    font-weight: 600;
    text-decoration: none;
}

footer .left {
    grid-column: 1 / 9;
    grid-row: 2 / 5;
    width: 100%;
    max-width: calc(840 * var(--aspect-multiplier));
}

footer .left img {
    display: block;
    width: auto;
    max-width: calc(240 * var(--aspect-multiplier));
    margin-top: calc(58 * var(--aspect-multiplier));
}

footer .left > p {
    margin-top: calc(30 * var(--aspect-multiplier));
    font-size: calc(28 * var(--aspect-multiplier));
    line-height: 1.2;
}

footer .right {
    grid-column: 8 / -1;
    grid-row: 2 / 5;
    justify-self: end;
    width: 100%;
    max-width: calc(640 * var(--aspect-multiplier));
}

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

footer .links div {
    display: flex;
    flex-direction: column;
    gap: calc(20 * var(--aspect-multiplier));
}

footer .links a {
    font-size: calc(20 * var(--aspect-multiplier));
    color: rgb(var(--black));
    text-decoration: none;
}

footer .right img {
    display: block;
    width: auto;
    max-width: calc(76 * var(--aspect-multiplier));
}

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

footer .right > p:last-of-type {
    margin-top: calc(30 * var(--aspect-multiplier));
    font-size: calc(20 * var(--aspect-multiplier));
    line-height: 1.1;
}

footer .copyright {
    grid-column: 1 / -1;
    grid-row: 5;
    margin-top: calc(80 * var(--aspect-multiplier));
    font-size: calc(14 * var(--aspect-multiplier));
}


/*--- ERROR - PAGE SPECIFIC ---*/

#error footer {
    padding-top: calc(150 * var(--aspect-multiplier));
}