@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Roboto Mono Regular'), local('RobotoMono-Regular'),	url('../fonts/RobotoMono-Regular.woff2') format('woff2'), url('../fonts/RobotoMono-Regular.woff') format('woff');
}

:root {
    --purple: #201432;
    --lipurple: #766793;
    --gold: #d6c9c4;
    --light: #eae7e7;
    --dist-small: .5rem;
    --dist-medium: 1.5rem;
    --dist-large: 3.5rem;
    --dist-right: 0rem;
}

body, html {
    overflow-x: hidden;
    margin: 0;
}

body {
    font-family: 'Roboto Mono', Courier, monospace;
    line-height: 1.5;
    background-color: var(--light);
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

:focus-visible {
    outline: 2px solid var(--lipurple);
    outline-offset: 2px;
}

.skip-to-content {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-to-content:focus-visible {
    position: fixed;
    left: 1rem;
    top: 1rem;
    z-index: 1000;
    width: auto;
    height: auto;
    overflow: visible;
    padding: .5rem 1rem;
    background-color: var(--purple);
    color: var(--light);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

h1, h2, h3 {
    font-weight: 700;
    color: var(--purple);
}

a {
    color: #3a2856;
    text-decoration: none;
}

a:hover {
    color: var(--lipurple);
}

/* wrapper */
.wrapper, .wrapper-small {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    transition: width .3s ease;
}

@media (min-width: 768px) {
    .wrapper, .wrapper-small {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .wrapper {
        width: 970px;
    }

    .wrapper-small {
        width: 720px;
    }
}

@media (min-width: 1200px) {
    .wrapper {
        width: 1170px;
    }

    .wrapper-small {
        width: 820px;
    }
}

@media (min-width: 1400px) {
    .wrapper {
        width: 1320px;
    }
}

/* class for flex items */
.is-flex {
    display: flex;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}

/*  PADDING / MARGIN
*   small / medium / large size for all directions.
*   (only a few of these are currently in use)
*/
.p-small {
    padding: var(--dist-small);
}

.p-medium {
    padding: var(--dist-medium);
}

.p-large {
    padding: var(--dist-large);
}

.py-small {
    padding-top: var(--dist-small);
    padding-bottom: var(--dist-small);
}

.py-medium {
    padding-top: var(--dist-medium);
    padding-bottom: var(--dist-medium);
}

.py-large {
    padding-top: var(--dist-large);
    padding-bottom: var(--dist-large);
}

.px-small {
    padding-left: var(--dist-small);
    padding-right: var(--dist-small);
}

.px-medium {
    padding-left: var(--dist-medium);
    padding-right: var(--dist-medium);
}

.px-large {
    padding-left: var(--dist-large);
    padding-right: var(--dist-large);
}

.m-small {
    margin: var(--dist-small);
}

.m-medium {
    margin: var(--dist-medium);
}

.m-large {
    margin: var(--dist-large);
}

.mx-small {
    margin-left: var(--dist-small);
    margin-right: var(--dist-small);
}

.mx-medium {
    margin-left: var(--dist-medium);
    margin-right: var(--dist-right);
}

.mx-large {
    margin-left: var(--dist-large);
    margin-right: var(--dist-large);
}

.my-small {
    margin-top: var(--dist-small);
    margin-bottom: var(--dist-small);
}

.my-medium {
    margin-top: var(--dist-medium);
    margin-bottom: var(--dist-right);
}

.my-large {
    margin-top: var(--dist-large);
    margin-bottom: var(--dist-large);
}

.pt-small {
    padding-top: var(--dist-small);
}

.pt-medium {
    padding-top: var(--dist-medium);
}

.pt-large {
    padding-top: var(--dist-large);
}

.pb-small {
    padding-bottom: var(--dist-small);
}

.pb-medium {
    padding-bottom: var(--dist-medium);
}

.pb-large {
    padding-bottom: var(--dist-large);
}

.mt-small {
    margin-top: var(--dist-small);
}

.mt-medium {
    margin-top: var(--dist-medium);
}

.mt-large {
    margin-top: var(--dist-large);
}

.mb-small {
    margin-bottom: var(--dist-small);
}

.mb-medium {
    margin-bottom: var(--dist-medium);
}

.mb-large {
    margin-bottom: var(--dist-large);
}

/*  COLUMNS
*   grid column size system.
*   (not all column sizes are currently in use)
*/
.row {
    display: flex;
    flex-wrap: wrap;
}

.column-1, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-8, .column-9, .column-10, .column-11, .column-12 {
    box-sizing: border-box;
    width: 100%;
}

@media (min-width: 768px) {
    .column-1 {
        width: 8.33333%;
    }

    .column-2 {
        width: 16.66667%;
    }

    .column-3 {
        width: 25%;
    }

    .column-4 {
        width: 33.33333%;
    }

    .column-5 {
        width: 41.66667%;
    }

    .column-6 {
        width: 50%;
    }

    .column-7 {
        width: 58.33333%;
    }

    .column-8 {
        width: 66.66667%;
    }

    .column-9 {
        width: 75%;
    }

    .column-10 {
        width: 83.33333%;
    }

    .column-11 {
        width: 91.66667%;
    }

    .column-12 {
        width: 100%;
    }

    .column-offset-1 {
        margin-left: 8.33333%;
    }

    .column-offset-2 {
        margin-left: 16.66667%;
    }

    .column-offset-3 {
        margin-left: 25%;
    }

    .column-offset-4 {
        margin-left: 33.33333%;
    }

    .column-offset-5 {
        margin-left: 41.66667%;
    }

    .column-offset-6 {
        margin-left: 50%;
    }

    .column-offset-7 {
        margin-left: 58.33333%;
    }

    .column-offset-8 {
        margin-left: 66.66667%;
    }

    .column-offset-9 {
        margin-left: 75%;
    }

    .column-offset-10 {
        margin-left: 83.33333%;
    }

    .column-offset-11 {
        margin-left: 91.66667%;
    }

    .column-offset-12 {
        margin-left: 0;
    }
}


/* --- HEADER --- */
header.site-header {
    z-index: 99;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    pointer-events: none;
}

header.site-header .wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
}

/* - header - logo - */
header.site-header .logo-link-header, header.site-header .menu-wrapper {
    pointer-events: auto;
}

header .logo-header img {
    width: auto;
    height: clamp(6.875rem, 6rem + 4.6667vw, 11.25rem);
}

/* - header - menu - */
header.site-header .menu-wrapper {
    position: fixed;
    top: 2rem;
    right: 3rem;
}

header .menu-wrapper {
    --menuWidth: 36px;
    --menuBarSize: 4px;
    --menuBarMargin: 10px;
}

header .menu-wrapper input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

header .menu-wrapper input:focus-visible + .button-main-menu {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
}

header input:checked ~ #nav-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

header .button-main-menu span {
    width: var(--menuWidth, 2rem);
    height: var(--menuBarSize);
    display: block;
    background-color: var(--gold);
    border-radius: 1px;
    transition: transform ease-in-out .2s;
}

header .button-main-menu span:nth-of-type(2) {
    margin: var(--menuBarMargin) 0;
}

header input:checked ~ .button-main-menu:not(.collapsed) span {
    transform-origin: center center;
}

header input:checked ~ .button-main-menu:not(.collapsed) span:nth-of-type(1) {
    transform: translatey(calc(var(--menuBarMargin) + var(--menuBarSize))) rotate(45deg);
}

header input:checked ~ .button-main-menu:not(.collapsed) span:nth-of-type(2) {
    transform: scaleX(0);
}

header input:checked ~ .button-main-menu:not(.collapsed) span:nth-of-type(3) {
    transform: translatey(calc(-1 * var(--menuBarMargin) - var(--menuBarSize))) rotate(-45deg);
}

/* - header - menu button - */
header .button-main-menu {
    width: var(--menuWidth), 2rem;
    display: inline-block;
    height: auto;
    cursor: pointer;
}

/* - header - menu container - */
header #nav-menu {
    right: 0px;
    background: var(--purple);
    z-index: -1;
    border-radius: 7px;
    padding: 1.5rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease;
    position: absolute;
    line-height: 2em;

}

header #nav-menu nav a {
    display: block;
    color: var(--gold);
    text-decoration: none;
}

header #nav-menu nav a.current-item {
    color: var(--lipurple);
}

/* --- FOOTER --- */
footer {
    color: var(--light);
}

.footer-inner, .footer-dots:before {
    background-color: #0f0a1a;
}

footer .planet-row {
    position: relative;
}

footer .footer-address {
    position: relative;
    padding-top: 5.5rem;
    padding-bottom: 5rem;
    font-size: 1rem;
}

footer .footer-address .title {
    color: var(--lipurple);
}

footer .has-planet .planet-container {
    position: absolute;
    top: 7.25rem;
    width: 80px;
    height: 80px;
    background-size: cover;
    background-position: center;
    transform: translatey(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 80 80' fill='%23766793' viewBox='0 0 80 80'%3E%3Cpath d='M40 0C17.9 0 0 17.9 0 40s17.9 40 40 40 40-17.9 40-40S62.1 0 40 0zm36.3 30.6c-1.3 3.3-3 6.1-4 8.6-1.9 13.4-13.8-8.2-18.4 2.2 7.9 3.7 7.3 7.8-1 9.4-9.3-9.7-9.5.6.7 2 7.7 2-9.9 25.4-17.6 21.3-7.5-6.7 1.3-20.7-15.1-20.2C-2 23.4 57.3 47.6 40 38.3c-.8-.4-1.3-.5-1.9-.9-.2-.1-1.1 1.1-2.1.8s-1.2-3.3-1.7-3.6c-2.3-1.3-2-.6-3.8.9-2.9 2.4-8.5 2.9-5.6-2.4 1.5-.9 2.8-1.4 4-2 1.4-.7 1.5-2.9 2.4-3.6 2.9-2.2 4.4-3 6.5-3.2 1.7-.2 1.6-3.3 4.4-3.8 19.1 2.5 10.1-10 9.2-16.3 12.3 4.1 21.7 14.1 24.9 26.4zm-46.6-5.9c.4-.8 0-3.1 1-2.6.7.3 1.4 1.6 1.5 3.2.2 1.7-1.9 2.4-3.7 2s.8-1.7 1.2-2.6zm-.8-20.5c6.3.8 10.5 3.5 7.4 8.1-8.4 12.1-3.8-2.7-8.7-2.1-4.4.5-10.4 10.2-18.6 8.7C13.7 12 20.7 6.7 28.9 4.2zM2.7 35.8C4 43 7.9 53 8.3 60c-3.7-5.8-5.8-12.6-5.8-20 0-1.4.1-2.8.2-4.2z'/%3E%3C/svg%3E");
}

footer .has-planet .planet-container a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

footer .has-planet:after {
    content: "";
    position: absolute;
    top: 6.25rem;
    left: 60px;
    right: 36%;
    height: 2px;
    background-color: var(--lipurple);
    pointer-events: none;
}

footer .row.planet-row p {
    margin-left: 15px;
}

@media (max-width: 767px) {
    footer .has-planet .address-column {
        width: 50%;
        margin-left: auto;
        font-size: clamp(0.8rem, 0.3rem + 2.6667vw, 1rem);
    }

    footer .has-planet:after {
        right: calc(50% + 1em);
    }
}

footer .footer-bottom {
    background-color: var(--purple);
    font-size: .8rem;
    line-height: 1.35rem;

}

footer .footer-bottom .wrapper {
    justify-content: space-between;
    align-items: flex-end;
}

@media (max-width: 500px) {
    footer .footer-bottom .wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    footer .footer-bottom .wrapper > div {
        width: 100%;
        text-align: center;
    }

    footer .footer-bottom .socials-footer {
        padding: 1rem 0;
    }
}

footer .txt-footer {
    opacity: .35;
    min-width: 33%;
}

footer .txt-footer.copyright-footer {
    text-align: right;
}

footer .txt-footer a {
    color: #fff;
    text-decoration: none;
}

footer .socials-footer a {
    width: 30px;
    display: inline-block;
}

footer .footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .75rem;
    min-width: 33%;
}

footer .iso-badge {
    display: inline-block;
    line-height: 0;
    border-radius: 50%;
    opacity: .85;
    transition: opacity .2s ease-out;
}

footer .iso-badge:hover {
    opacity: 1;
}

@media (max-width: 500px) {
    footer .footer-right {
        align-items: center;
    }

    footer .footer-right .copyright-footer {
        text-align: center;
    }
}


/* --- DOTS PATTERN --- */
.dot-clip {
    position: absolute;
}

.dots-overlap {
    margin-top: -10vw;
}

/* reserve room for the overlapping footer dots unless the last section already does */
main::after {
    content: "";
    display: block;
    height: 10vw;
}

main:has(.dotpadding-bottom)::after {
    display: none;
}

.dotpadding-bottom {
    padding-bottom: 10vw;
}

.dots-top {
    position: relative;
    width: 100%;
    height: 10vw;
    overflow: hidden;
}

.dots-top:before {
    content: "";
    width: 100%;
    height: 10vw;
    position: absolute;
    top: 0;
    -webkit-clip-path: url(#dotClip);
    clip-path: url(#dotClip);
    transform-origin: top center;
}

@media (max-width: 1200px) {
    .dots-overlap {
        margin-top: -15vw;
    }

    main::after {
        height: 15vw;
    }

    .dotpadding-bottom {
        padding-bottom: 15vw;
    }

    .dots-top {
        height: 15vw;
    }

    .dots-top:before {
        transform: scale(1.5);
    }
}

@media (max-width: 900px) {
    .dots-overlap {
        margin-top: -20vw;
    }

    main::after {
        height: 20vw;
    }

    .dotpadding-bottom {
        padding-bottom: 20vw;
    }

    .dots-top {
        height: 20vw;
    }

    .dots-top:before {
        transform: scale(2);
    }
}

@media (max-width: 600px) {
    .dots-overlap {
        margin-top: -30vw;
    }

    main::after {
        height: 30vw;
    }

    .dotpadding-bottom {
        padding-bottom: 30vw;
    }

    .dots-top {
        height: 30vw;
    }

    .dots-top:before {
        transform: scale(3);
    }
}

@media (max-width: 300px) {
    .dots-overlap {
        margin-top: -40vw;
    }

    main::after {
        height: 40vw;
    }

    .dotpadding-bottom {
        margin-bottom: 40vw;
    }

    .dots-top {
        height: 40vw;
    }

    .dots-top:before {
        transform: scale(4);
    }
}


/* --- PAGE - HOME --- */
/* - home - intro - */
.intro-home {
    color: var(--purple);
    font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
    line-height: clamp(3.2rem, 3.05rem + 0.6vw, 3.5rem);
}

/* - home - quicknav - */
.quicknav-home {
    --colourAbout: #62778f;
    --colourCases: #5c9186;
    --colourVacancies: #9b6f75;
    --colourTechnology: #766793;
}

.quicknav-home #about h2, .quicknav-home #about a, .quicknav-home #about svg {
    color: var(--colourAbout);
}

.quicknav-home #cases h2, .quicknav-home #cases a, .quicknav-home #cases svg {
    color: var(--colourCases);
}

.quicknav-home #vacancies h2, .quicknav-home #vacancies a, .quicknav-home #vacancies svg {
    color: var(--colourVacancies);
}

.quicknav-home #technologies h2, .quicknav-home #technologies a, .quicknav-home #technologies svg {
    color: var(--colourTechnology);
}

.quicknav-home #about h2:after {
    background-color: var(--colourAbout);
}

.quicknav-home #cases h2:after {
    background-color: var(--colourCases);
}

.quicknav-home #vacancies h2:after {
    background-color: var(--colourVacancies);
}

.quicknav-home #technologies h2:after {
    background-color: var(--colourTechnology);
}

.quicknav-home-inner, .quicknav-home-dots:before {
    background-color: #dbd5d5;
}

.quicknav-home .row {
    align-items: center;
}

.quicknav-home h2 {
    position: relative;
    font-size: 2rem;
}

.quicknav-home h2:after {
    content: "";
    height: 2px;
    display: inline-block;
    position: absolute;
    top: calc(50% + 2px);
    background: var(--purple);
    width: 100%;
    opacity: .3;
    margin-left: 2rem;
}

.quicknav-home .row:nth-of-type(even) h2:after {
    margin-left: 0;
    width: 9rem;
    left: -10rem;
    opacity: .2;
}

.quicknav-home .col-img {
    z-index: 1;
}

.quicknav-home .col-img.is-flex {
    justify-content: center;
}

.quicknav-home .read-more-link {
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 1rem;
    display: inline-block;
}

.quicknav-home p, .quicknav-home a {
    font-size: 1.2rem;
}

.quicknav-home .quicknav-home-img {
    position: relative;
}

.quicknav-home .quicknav-home-img .img-wrapper {
    height: 240px;
    width: 240px;
    border-radius: 50%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.quicknav-home .quicknav-home-img .img-wrapper .img-colour-overlay {
    width: 100%;
    height: 100%;
    mix-blend-mode: overlay;
}

.quicknav-home #about .img-colour-overlay {
    background: var(--colourAbout);
}

.quicknav-home #cases .img-colour-overlay {
    background: var(--colourCases);
}

.quicknav-home #vacancies .img-colour-overlay {
    background: var(--colourVacancies);
}

.quicknav-home #technologies .img-colour-overlay {
    background: var(--colourTechnology);
}

.quicknav-home .quicknav-home-img svg {
    position: absolute;
    width: 170px;
    height: auto;
    color: var(--purple);
    transition: transform .3s ease;
}

.quicknav-home .quicknav-home-img svg.icon-sputnik {
    left: 9rem;
    top: -1rem;
}

.quicknav-home .quicknav-home-img svg.icon-telescope {
    left: -5rem;
    bottom: -1rem;
}

.quicknav-home .quicknav-home-img svg.icon-helmet {
    width: 100px;
    right: 3rem;
    bottom: -1rem;
}

.quicknav-home .quicknav-home-img svg.icon-tech {
    width: 130px;
    bottom: -.8rem;
    left: -2rem;
}

.quicknav-home #about .quicknav-home-img:hover svg {
    transform: translate(2rem, -2rem);
}

.quicknav-home #cases .quicknav-home-img:hover svg {
    transform: rotate(-8deg);
}

.quicknav-home #vacancies .quicknav-home-img:hover svg {
    transform: translate(-3rem, 0);
}

.quicknav-home #technologies .quicknav-home-img:hover svg {
    transform: rotate(120deg);
    transform-origin: 50% 53%;
}

.quicknav-home .row:nth-of-type(odd) {
    padding: 5rem 0 5rem 3rem;
    background: #ffffff22;
}

.quicknav-home .row:nth-of-type(even) {
    padding: 3rem 0;
}

@media (max-width: 767px) {
    .quicknav-home .row:nth-of-type(odd) {
        flex-direction: column-reverse;
        padding: 0;
        background: none;
    }

    .quicknav-home .row:nth-of-type(even) {
        padding: 0;
    }

    .quicknav-home h2:after {
        content: none;
    }

    .quicknav-home .quicknav-home-img {
        width: 240px;
        max-width: 100%;
        margin: auto;
    }

    .quicknav-home .wrapper {
        margin-bottom: 0;
        padding-bottom: 0;
    }
}

/* - home - client logos - */
.logo-wrapper-home .logo-wrapper-inner, .logo-wrapper-home .logo-wrapper-dots:before {
    background-color: #cec5c1;
    color: #464548;
}

.logo-wrapper-home .logo-column {
    align-items: center;
    justify-content: center;
    width: 20%;
}

.logo-wrapper-home h2 {
    font-size: 2.5rem;
    color: var(--purple);
    margin-bottom: 0;
}

.logo-wrapper-home svg, .logo-wrapper-home img {
    width: 200px;
    height: auto;
    max-width: 85%;
    max-height: 140px;
}

@media (min-width: 768px) {
    .logo-wrapper-home .logo-column {
        margin-left: calc(20% / 3);
    }

    .logo-wrapper-home .logo-column:nth-of-type(4n + 1) {
        margin-left: 0;
        justify-content: flex-start;
    }

    .logo-wrapper-home .logo-column:nth-of-type(4n) {
        justify-content: flex-end;
    }
}

@media (max-width: 767px) {
    .logo-wrapper-home .logo-column {
        width: calc(80% / 3);
        margin-left: calc(20% / 2);
    }

    .logo-wrapper-home .logo-column:nth-of-type(3n + 1) {
        margin-left: 0;
        justify-content: flex-start;
    }

    .logo-wrapper-home .logo-column:nth-of-type(3n) {
        justify-content: flex-end;
    }
}

@media (max-width: 500px) {
    .logo-wrapper-home .logo-column {
        width: 50%;
        margin-left: 0;
    }

    .logo-wrapper-home .logo-column:nth-of-type(2n+1) {
        justify-content: flex-start;
    }

    .logo-wrapper-home .logo-column:nth-of-type(2n) {
        justify-content: flex-end;
    }
}

/* HOME - PLANETS AND ORBITS */
#space {
    position: relative;
    width: 100vw;
    left: 0;
    top: 0;
    padding: 0;
    height: 400px;
    min-height: 65vh;
    max-height: 85vh;
    clip-path: url(#planetClip);
}

#particles-js {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.space-back-element {
    width: calc(100% + 20px);
    position: absolute;
    z-index: -1;
}

.space-top {
    top: 0;
    left: 0;
    right: 0;
    bottom: 12.5vw;
    background-color: var(--purple);
    /* animation:spacecolback 15s linear infinite; */
}

.space-bottom {
    color: var(--purple);
    bottom: 0;
    /* animation: spacecolfront 15s linear infinite; */
}

@keyframes spacecolfront {
    0%, 10%, 90%, 100% {
        color: #201432;
    }
    37% {
        color: #2d1c47;
    }
    63% {
        color: #160d22;
    }
}

@keyframes spacecolback {
    0%, 10%, 90%, 100% {
        background-color: #201432;
    }
    37% {
        background-color: #2d1c47;
    }
    63% {
        background-color: #160d22;
    }
}

#planets-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

#planets-wrapper .ellipse-planet-pair {
    position: absolute;
}

#planets-wrapper .ellipse {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translatey(0); /* prevents visible line cut on bottom */
}

#planets-wrapper .planet {
    opacity: 0;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%) translateZ(0);
    cursor: pointer;
    z-index: 9;
    width: var(--planetSize);
    height: var(--planetSize);
    background-color: var(--planetColour);
}

#planets-wrapper .planet .planet-title {
    position: absolute;
    margin-bottom: 0;
    color: #eae7e7;
    top: calc(50% - 10px);
    width: 150px;
    height: 20px;
    left: calc(50% - 75px - var(--ellipseMargin) / 2);
    -webkit-animation: orbit var(--animationSpeed) linear infinite var(--animationDelay) var(--animationDirection), leftright var(--animationSpeed) cubic-bezier(.4, .09, .6, .9) infinite calc(var(--animationSpeed) / 2 + var(--animationDelay)) var(--animationDirection);
    animation: orbit var(--animationSpeed) linear infinite var(--animationDelay) var(--animationDirection), leftright var(--animationSpeed) cubic-bezier(.4, .09, .6, .9) infinite calc(var(--animationSpeed) / 2 + var(--animationDelay)) var(--animationDirection);
    display: flex;
    justify-content: center;
    align-items: center;
}

#planets-wrapper .planet:hover .planet-title {
    animation-play-state: paused;
}

#planets-wrapper .planet .planet-title svg {
    height: 12px;
}

@-webkit-keyframes orbit {
    from {
        -webkit-transform: rotate(0deg) translateX(var(--orbitSize)) rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg) translateX(var(--orbitSize)) rotate(-360deg);
    }
}

@keyframes orbit {
    from {
        transform: rotate(0deg) translateX(var(--orbitSize)) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(var(--orbitSize)) rotate(-360deg);
    }
}

@-webkit-keyframes leftright {
    0%, 100% {
        margin-left: 0;
    }
    50% {
        margin-left: var(--ellipseMargin);
    }
}

@keyframes leftright {
    0%, 100% {
        margin-left: 0;
    }
    50% {
        margin-left: var(--ellipseMargin);
    }
}

/* PLANET AND ELLIPSE PROPERTIES */
/* - ellipses - */
#pair1 {
    width: 140vmax;
    height: 120vmin;
    left: -70vmax;
    top: -90vmin;
}

#pair2 {
    width: 152vmax;
    height: 130vmin;
    left: -68vmax;
    top: -87vmin;
}

#pair3 {
    width: 180vmax;
    height: 120vmin;
    left: -79vmax;
    top: -63vmin;
}

/* - planets - */
.planet-1 {
    --planetColour: #c2d4e7;
    --planetSize: 45px;
    --planetSize: clamp(1.875rem, 1.5625rem + 1.6667vw, 2.8125rem);
    --orbitSize: 45px;
    --ellipseMargin: 30px;
    --animationSpeed: 16s;
    --animationDelay: -.5s;
    --animationDirection: reverse;
}

.planet-2 {
    --planetColour: #5da395;
    --planetSize: 120px;
    --planetSize: clamp(4.375rem, 3.3333rem + 5.5556vw, 7.5rem);
    --orbitSize: 85px;
    --ellipseMargin: 30px;
    --animationSpeed: 12s;
    --animationDelay: -3s;
    --animationDirection: normal;
}

.planet-3 {
    --planetColour: var(--lipurple);
    --planetSize: 60px;
    --planetSize: clamp(2.5rem, 2.0833rem + 2.2222vw, 3.75rem);
    --orbitSize: 60px;
    --ellipseMargin: 90px;
    --animationSpeed: 9.5s;
    --animationDelay: -5s;
    --animationDirection: normal;
}

/* responsive ellipse sizes */
.ellipse-planet-pair {
    transition: width .2s ease, height .2s ease, top .2s ease, left .2s ease;
}

@media (max-width: 1600px) {
    #pair1 {
        width: 147vmax;
    }

    #pair2 {
        width: 160vmax;
    }

    #pair3 {
        width: 183vmax;
    }
}

@media (max-width: 1400px) {
    #pair1 {
        width: 150vmax;
    }

    #pair2 {
        width: 164vmax;
    }

    #pair3 {
        width: 190vmax;
    }
}

@media (max-width: 1023px) {
    #pair1 {
        width: 169vmax;
        left: -78vmax;
    }

    #pair2 {
        width: 195vmax;
        left: -82vmax;
    }

    #pair3 {
        width: 200vmax;
    }
}

@media (max-width: 767px) {
    #pair1 {
        width: 172vmax;
        left: -80vmax;
    }

    #pair2 {
        width: 200vmax;
        left: -85vmax;
    }

    #pair3 {
        width: 215vmax;
        left: -87vmax;
    }
}

@media (max-width: 659px) {
    #pair1 {
        width: 170vmax;
        left: -89vmax;
        top: -86vmin;
    }

    #pair2 {
        width: 195vmax;
        left: -93vmax;
        top: -81vmin;
    }

    #pair3 {
        left: -97vmax;
        top: -56vmin;
    }
}

@media (max-width: 599px) {
    #pair1 {
        width: 163vmax;
        left: -88vmax;
        top: -84vmin;
    }

    #pair2 {
        width: 189vmax;
        left: -98vmax;
        top: -78vmin;
    }

    #pair3 {
        width: 194vmax;
        left: -94vmax;
        top: -52vmin;
    }
}

@media (max-width: 549px) {
    #pair1 {
        width: 163vmax;
        left: -88vmax;
        top: -65vmin;
        height: 115vmin;
    }

    #pair2 {
        width: 189vmax;
        left: -98vmax;
        top: -54vmin;
        height: 120vmin;
    }

    #pair3 {
        width: 194vmax;
        left: -94vmax;
        top: -37vmin;
        height: 120vmin;
    }
}

@media (max-width: 549px) and (max-height: 640px) {
    #pair1 {
        top: -84vmin;
    }

    #pair2 {
        top: -78vmin;
    }

    #pair3 {
        top: -52vmin;
    }
}

@media (max-width: 549px) and (min-height: 750px) {
    #pair1 {
        width: 131vmax;
        left: -68vmax;
        top: -61vmin;
    }

    #pair2 {
        width: 155vmax;
        left: -83vmax;
        top: -43vmin;
    }

    #pair3 {
        width: 148vmax;
        left: -69vmax;
        top: -24vmin;
    }
}

@media (max-width: 412px) {
    #pair1 {
        top: -61vmin;
    }

    #pair2 {
        top: -40vmin;
    }

    #pair3 {
        top: -17vmin;
    }
}

@media (max-width: 412px) and (min-height: 750px) {
    #pair1 {
        top: -43vmin;
    }

    #pair2 {
        top: -27vmin;
    }

    #pair3 {
        top: -15vmin;
        height: 133vmin;
    }
}

@media (max-width: 360px) {
    #pair1 {
        top: -55vmin;
    }

    #pair2 {
        top: -34vmin;
    }

    #pair3 {
        top: -12vmin;
        width: 186vmax;
    }
}


/* --- PAGE - CONTACT --- */
.contact-form-container {
    display: flow-root;
}

.contact-form-container input, .contact-form-container textarea {
    width: 100%;
    padding: .6rem;
    margin: .3rem 0 .6rem 0;
    box-sizing: border-box;
    border: none;
    font-family: 'Roboto Mono', Courier, monospace;
    font-size: 1rem;
    resize: vertical;
}

.contact-form-container input[type=submit] {
    width: auto;
    max-width: none;
    background-color: var(--purple);
    transition: background-color .3s ease;
    color: #fff;
    padding: 1rem 1.5rem;
    white-space: nowrap;
    float: right;
    border: none;
    cursor: pointer;
}

.contact-form-container input[type=submit]:hover {
    background-color: var(--lipurple);
}

.contact-form-container input[type=submit]:disabled {
    cursor: not-allowed;
    opacity: .6;
}

.contact-form-container input:focus-visible, .contact-form-container textarea:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 0;
}

.contact-form-container .validation-message {
    color: #b00020;
    font-size: .875rem;
    margin-top: -.4rem;
    margin-bottom: .6rem;
}

/* ---------- CONTENT PAGES (About, Cases, Technologies) ---------- */
.page-hero {
    background: var(--light);
}

.page-hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    text-wrap: balance;
}

.read-more-link {
    text-transform: uppercase;
    font-weight: 700;
    display: inline-block;
}

.page-photo,
.case-shot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgb(32 20 50 / 0.15);
}

.case-shot + .case-shot,
p + .case-shot,
.case-shot + .case-shots-2 {
    margin-top: 1.5rem;
}

.check-list {
    padding-left: 1.25rem;
}

.check-list li + li {
    margin-top: 0.75rem;
}

.feature-grid,
.case-facts,
.tech-cloud,
.phone-row {
    list-style: none;
    margin: 0;
    padding: 0;
}

.feature-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.feature-grid li {
    background: #fff;
    border-left: 4px solid var(--purple);
    padding: 1rem 1.25rem;
    font-weight: 700;
}

.who-we-are .page-photo {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 40%;
}

@media (min-width: 768px) {
    .who-we-are {
        align-items: center;
    }
}

/* technology cloud */
.tech-cloud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem 2.5rem;
    max-width: 60rem;
    margin-inline: auto;
}

.tech-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--lipurple);
}

.tech-item img {
    width: var(--tech-size);
    height: var(--tech-size);
    object-fit: contain;
}

.tech-sm { --tech-size: 3rem; }
.tech-md { --tech-size: 4.5rem; }
.tech-lg { --tech-size: 6rem; }
.tech-xl { --tech-size: 8rem; }

.tech-wide img {
    width: 10rem;
    height: 3rem;
}

.tech-wide span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@keyframes tech-in {
    from {
        opacity: 0;
        transform: translateY(1.5rem) scale(0.6);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .tech-item {
        animation: tech-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        animation-delay: calc(var(--i, 0) * 60ms);
    }

    .tech-item img {
        transition: transform 0.2s ease-out;
    }

    .tech-item:hover img {
        transform: scale(1.1);
    }
}

.sponsor-art {
    width: 100%;
    max-width: 15rem;
    height: auto;
}

/* cases */
.case-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.case-nav a {
    font-weight: 700;
    text-transform: uppercase;
}

.case {
    scroll-margin-top: 7rem;
}

.case-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
    margin-bottom: 2rem;
}

.case-header h2 {
    margin: 0;
}

.case-logo {
    width: auto;
    max-width: 12rem;
    height: 3.5rem;
    object-fit: contain;
}

.case-logo-text {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--purple);
    letter-spacing: 0.05em;
}

.case-lead {
    max-width: 48rem;
}

.case-facts {
    margin: 1.5rem 0;
}

.case-facts li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--light);
    font-variant-numeric: tabular-nums;
}

.case-facts strong {
    color: var(--purple);
    font-size: 1.25rem;
}

.case-shots-2 {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.case-shots-2 .case-shot {
    margin-top: 0;
}

.phone-row {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 2rem;
    max-width: 52rem;
}

@media (min-width: 768px) {
    .phone-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.phone-row img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1.5rem;
    border: 6px solid var(--purple);
}

@media (min-width: 768px) {
    .content-section .row > [class*="column-"] + [class*="column-"] {
        padding-left: 2.5rem;
    }
}

@media (max-width: 767px) {
    .content-section .row > [class*="column-"] + [class*="column-"] {
        margin-top: 2rem;
    }
}