/* General Reset */
body,
h1,
h2,
p,
ul,
li,
a,
form,
input,
textarea,
button {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --nav-h: 5rem;
    --nav-h-mobile: 2rem;
    --dynamic-font-scale: 1;
    --service-menu-height: 5rem;
    --service-menu-height-mobile: 5rem;
    --accent: #993366;
    --accent2: #858585;
    --accent3: white;
    --accent4: #ccc;
    --hover-colour: red;
    --border-radius: 15px;
    --staff-pic: 300px;
    --font-size-xxl: 5rem;
    --font-size-xl: 4rem;
    --font-size-l: 3rem;
    --font-size-m: 2rem;
    --font-size-s: 1.25rem;
    --font-size-xs: 1rem;
}

div.service-card-content {
    scroll-margin-top: var(--nav-h);
}

body {
    position: relative;
    font-family: 'Roboto', 'Arial', sans-serif;
    line-height: 1.6;
    color: black;
    height: 100%;
    background-color: white;
    user-select: none;
    padding-top: var(--nav-h);
}

body a {
    text-decoration: none;
    color: inherit;
}

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


div#copyright {
    position: absolute;
    bottom: 0;
    font-size: 0.75rem;
    color: #858585;
    z-index: 1;
    margin-left: 1rem;
    margin-bottom: 1rem;
}

div#socials {
    position: relative;
    bottom: 0;
    font-size: var(--font-size-xs);
    color: #858585;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

div#socials img {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: cover;
    margin-left: 1.5rem;
}

div#socials a:first-of-type img {
    margin-left: 0;
}

.content {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    background-color: white;
}

.sections-container {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="110%" height="110%"><path fill="none" stroke="%23f5f5f5" stroke-width="1" opacity="0.6" d="m 190.70425,430.918 c -4.67411,-0.35958 -8.97102,-1.54237 -13.09129,-3.60356 -2.76414,-1.38279 -5.02686,-2.90066 -7.50242,-5.03276 -1.10452,-0.95128 -79.516321,-79.37274 -80.4616,-80.47152 -5.080113,-5.905 -7.9394,-12.74978 -8.569265,-20.51377 -0.107774,-1.3286 -0.105303,-206.3964 0.0027,-207.80149 0.59115,-7.70409 3.534541,-14.736293 8.597726,-20.541237 0.728331,-0.835024 2.420462,-2.526997 3.251157,-3.250843 4.920498,-4.28757 10.739022,-7.075081 17.045862,-8.166252 1.10394,-0.191009 2.43158,-0.353389 3.73433,-0.456768 1.33112,-0.10559 205.95645,-0.106826 207.31007,-0.0012 2.44462,0.190734 4.77848,0.581759 6.83711,1.145544 5.31067,1.454363 9.82056,3.88401 14.08612,7.588696 1.17661,1.021912 79.46586,79.32082 80.38022,80.39014 2.08878,2.44281 3.65072,4.76817 4.95709,7.37998 2.07506,4.1486 3.27257,8.51686 3.63812,13.27111 0.10681,1.38962 0.1064,206.24037 -3.9e-4,207.5818 -0.38895,4.88285 -1.54952,9.09103 -3.67317,13.31885 -3.81434,7.59366 -10.50743,13.71102 -18.38603,16.80448 -3.41175,1.33961 -6.70204,2.08252 -10.4616,2.36213 -1.00343,0.0745 -12.3007,0.083 -103.92964,0.0772 -85.60012,-0.005 -102.96465,-0.0189 -103.76486,-0.0804 z M 395.92751,308.5272 v -87.49204 l -44.52361,-0.0142 -44.52363,-0.0142 -1.04341,-0.17731 c -1.29998,-0.2209 -2.38699,-0.5073 -3.48721,-0.91877 -5.31906,-1.9894 -9.41914,-6.55343 -10.81329,-12.0369 -0.12206,-0.47982 -0.29047,-1.28021 -0.3744,-1.77864 l -0.15258,-0.90627 -0.0142,-44.55635 -0.0142,-44.55636 h -87.48164 -87.48171 v 87.46462 87.46461 l 44.55108,0.0142 44.55107,0.0142 0.93358,0.15458 c 4.18155,0.69239 7.66003,2.55665 10.40993,5.57914 2.31549,2.54502 3.74507,5.5341 4.35011,9.09551 l 0.17727,1.04355 0.0142,44.52885 0.0142,44.52888 70.44381,0.0137 c 38.7441,0.008 78.0985,0.0199 87.45422,0.0275 l 17.01041,0.0137 z m -209.94608,48.8262 v -31.30616 l -31.34364,0.003 -31.34363,0.003 31.3299,31.30226 c 17.23145,17.21624 31.33609,31.30268 31.34364,31.3032 0.007,5.1e-4 0.0137,-14.08683 0.0137,-31.30522 z M 387.14074,184.43779 c -0.86076,-0.85557 -14.96533,-14.9478 -31.34352,-31.31606 L 326.0187,123.36122 v 31.31608 31.31607 h 31.34352 31.34352 z"/></svg>');
    background-repeat: no-repeat;
    background-position: 25%;
    background-origin: border-box;
    background-size: cover;
    background-color: white;
    display: flex;
    flex-direction: column;
}

li.active a {
    color: var(--accent);
}

.navbar li:not(li#swap-experience):hover,
.navbar li:not(li#swap-experience):hover * {
    color: var(--hover-colour);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-h);
}

h2 {
    margin-top: 1rem;
    margin-bottom: 2rem;
    text-align: center;
}


/* Navigation Bar */
#logo {
    height: 1.5em;
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    height: var(--nav-h);
    align-content: center;
    box-sizing: border-box;
    isolation: isolate;
    /*border-bottom: 5px solid var(--accent);*/
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background-color: inherit;
}

.navbar .logo {
    display: flex;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--accent);
    text-decoration: none;
    align-content: center;
}

.navbar .nav-links {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.navbar .nav-links li {
    margin: 0;
    text-decoration: none;
    color: var(--accent);
    font-weight: 500;
    transition: color 0.3s;
    cursor: pointer;
    width: 100%;
    text-wrap-mode: nowrap;
}

.nav-links li a {
    display: block;
    width: 100%;
}

.navbar .nav-links li:hover {
    color: var(--accent);
}

span#mobile-nav-drop {
    display: none;
}

div#logo-background-container {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    width: 100vw;
    height: calc(100vh - var(--nav-h));
    visibility: hidden;
    opacity: 0;
    transition: 0.5s ease;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="100" height="100"><path fill="none" stroke="%23993366" stroke-width="1" opacity="0.9" d="m 190.70425,430.918 c -4.67411,-0.35958 -8.97102,-1.54237 -13.09129,-3.60356 -2.76414,-1.38279 -5.02686,-2.90066 -7.50242,-5.03276 -1.10452,-0.95128 -79.516321,-79.37274 -80.4616,-80.47152 -5.080113,-5.905 -7.9394,-12.74978 -8.569265,-20.51377 -0.107774,-1.3286 -0.105303,-206.3964 0.0027,-207.80149 0.59115,-7.70409 3.534541,-14.736293 8.597726,-20.541237 0.728331,-0.835024 2.420462,-2.526997 3.251157,-3.250843 4.920498,-4.28757 10.739022,-7.075081 17.045862,-8.166252 1.10394,-0.191009 2.43158,-0.353389 3.73433,-0.456768 1.33112,-0.10559 205.95645,-0.106826 207.31007,-0.0012 2.44462,0.190734 4.77848,0.581759 6.83711,1.145544 5.31067,1.454363 9.82056,3.88401 14.08612,7.588696 1.17661,1.021912 79.46586,79.32082 80.38022,80.39014 2.08878,2.44281 3.65072,4.76817 4.95709,7.37998 2.07506,4.1486 3.27257,8.51686 3.63812,13.27111 0.10681,1.38962 0.1064,206.24037 -3.9e-4,207.5818 -0.38895,4.88285 -1.54952,9.09103 -3.67317,13.31885 -3.81434,7.59366 -10.50743,13.71102 -18.38603,16.80448 -3.41175,1.33961 -6.70204,2.08252 -10.4616,2.36213 -1.00343,0.0745 -12.3007,0.083 -103.92964,0.0772 -85.60012,-0.005 -102.96465,-0.0189 -103.76486,-0.0804 z M 395.92751,308.5272 v -87.49204 l -44.52361,-0.0142 -44.52363,-0.0142 -1.04341,-0.17731 c -1.29998,-0.2209 -2.38699,-0.5073 -3.48721,-0.91877 -5.31906,-1.9894 -9.41914,-6.55343 -10.81329,-12.0369 -0.12206,-0.47982 -0.29047,-1.28021 -0.3744,-1.77864 l -0.15258,-0.90627 -0.0142,-44.55635 -0.0142,-44.55636 h -87.48164 -87.48171 v 87.46462 87.46461 l 44.55108,0.0142 44.55107,0.0142 0.93358,0.15458 c 4.18155,0.69239 7.66003,2.55665 10.40993,5.57914 2.31549,2.54502 3.74507,5.5341 4.35011,9.09551 l 0.17727,1.04355 0.0142,44.52885 0.0142,44.52888 70.44381,0.0137 c 38.7441,0.008 78.0985,0.0199 87.45422,0.0275 l 17.01041,0.0137 z m -209.94608,48.8262 v -31.30616 l -31.34364,0.003 -31.34363,0.003 31.3299,31.30226 c 17.23145,17.21624 31.33609,31.30268 31.34364,31.3032 0.007,5.1e-4 0.0137,-14.08683 0.0137,-31.30522 z M 387.14074,184.43779 c -0.86076,-0.85557 -14.96533,-14.9478 -31.34352,-31.31606 L 326.0187,123.36122 v 31.31608 31.31607 h 31.34352 31.34352 z"/></svg>') repeat;
    background-size: 8rem 8rem;
}

li#swap-experience {
    display: flex;
    align-items: center;
    border: 2px solid var(--accent);
    padding: 0.5rem;
    border-radius: 5px;
    background-color: var(--accent);
    color: white;
    cursor: pointer;
}

li#swap-experience:hover {
    border: 2px solid black;
    /*box-shadow: 0 0 5px var(--accent);*/
}


/* Hero Section */
.hero {
    background: white;
    height: calc(100vh - var(--nav-h));
    position: relative;
    display: flex;
    align-items: center;
    text-align: center;
    color: black;
    flex-direction: column;
}

.hero-movie {
    position: absolute;
    top: 0;
    margin-top: 0;
    margin-bottom: 12vh;
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: contain;
    object-position: center;
    opacity: 1;
    visibility: visible;
    transition: 0.5s ease;
}

.hero-movie-sub {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}

.hero-movie-sub::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: linear-gradient(45deg, rgb(44 18 18 / 50%), transparent);*/
    pointer-events: none;
}

video,
canvas {
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%;
}

canvas {
    will-change: transform;
    /* Hint for GPU acceleration */
}

div.poster {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/Logo-Colour.png) center / 60vw auto no-repeat;
    transition: 1.5s ease;
}

.hero-tag-container {
    color: white;
    text-transform: uppercase;
    font-size: var(--font-size-xxl);
    font-weight: bold;
    line-height: 2rem;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50vh;
    text-align: center;
    align-content: end;
    transition: opacity 2s ease;
    background-image: linear-gradient(0, white, transparent)
}

.hero-tag {
    background-image: radial-gradient(circle at 0% 100vh, rgb(145, 10, 67), rgb(244, 75, 90), rgb(138, 40, 105));
    background-clip: text;
    margin-top: auto;
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-wrap: nowrap;
}

p#hero-tag {
    background-image: inherit;
    background-clip: text;
    color: transparent;
    align-content: center;
    margin-top: auto;
    font-size: calc(var(--dynamic-font-scale) * var(--font-size-xxl));
    line-height: normal;
    padding: calc(var(--nav-h) * 0.2);
}

.hero-fade {
    /*height: 10vh;*/
    /*background: linear-gradient(to bottom, var(--accent) 0%, var(--accent)c0 40%, transparent 80%);*/
    display: block;
}

div#hero-hint-scroll {
    position: absolute;
    visibility: visible;
    opacity: 1;
    bottom: 15%;
    left: 50%;
    color: white;
    background-color: var(--accent);
    padding: 2rem;
    font-size: var(--font-size-l);
    border-radius: 2rem;
    border: 2px solid white;
    transition-property: opacity, visibility;
    /* Only animate these */
    transition-duration: 0.5s;
    transition-timing-function: ease;
}

.modal-window {
    display: flex;
    height: calc(100vh - var(--nav-h));
    width: 100vw;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    background-color: transparent;
    justify-content: center;
    align-items: flex-start;
}

div.modal-content,
div#character-select {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    visibility: hidden;
    opacity: 0;
    padding: 3rem;
    background-color: black;
    border: 2px solid var(--accent);
    border-radius: 10px;
    box-shadow: 0 0 20vw 4rem var(--accent);
    transition: 1s ease;
    z-index: 1;
}

div.modal-content {
    position: relative;
    top: unset;
    left: unset;
    transform: unset;
    max-width: fit-content;
    max-height: calc(100vh - var(--nav-h) - 4rem);
    margin: auto;
}

div.sections-container.visible~span#skip-to-select,
div#character-select.visible~span#skip-to-select {
    display: none;
}

#swap-experience i,
#skip-to-select i {
    margin-right: 0.5rem;
}

div.modal-content.visible {
    opacity: 1;
    visibility: visible;
    background-color: white;
    color: black;
}

div.hero-movie.ended div.poster,
div#logo-background-container.visible,
div#character-select.visible {
    opacity: 1;
    visibility: visible;
    background-color: black;
    position: fixed;
}

div.hero-movie.hidden {
    visibility: hidden;
    opacity: 0;
}

span#skip-to-select {
    display: flex;
    position: absolute;
    bottom: var(--nav-h);
    left: 50%;
    width: fit-content;
    transform: translate(-50%, 0);
    border: 2px solid var(--accent);
    padding: 1rem;
    border-radius: 5px;
    background-color: var(--accent);
    color: white;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

span#skip-to-select:hover {
    box-shadow: 0 0 50px 10px var(--accent);
    border: 2px solid white;
}

span#go-custom-experience {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translate(-50%, 0);
    border: 2px solid var(--accent);
    border-radius: 5px;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    color: white;
    background: var(--accent);
    cursor: pointer;
}

span#go-custom-experience:hover {
    /* box-shadow: 0 0 10px 2px #d4338f7d; */
    border: 2px solid white;
}

span#close-contact-modal,
span#close-custom-experience {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 16pt;
    color: var(--accent3);
}

span#close-contact-modal:hover,
span#close-custom-experience:hover {
    color: var(--accent);
    cursor: pointer;
}

/* Custom Select */

.radio-card {
    display: inline-block;
}

.experience-content {
    cursor: pointer;
    border: 2px solid #ccc;
    padding: 1rem;
    margin: 1rem;
    border-radius: 10px;
    height: 150px;
    width: 150px;
    text-align: center;
    transition:
        scale 0.2s ease,
        visibility 0.2s ease,
        opacity 0.2s ease;
    color: #ccc;
    background-image: linear-gradient(180deg, #5d1c3c, #4A1431);
}

span#experience-select-title {
    position: absolute;
    top: 1rem;
    left: 1rem;
    color: white;
    font-size: var(--font-size-s);
    width: calc(100% - 2rem);
    text-align: center;
}

.radio-card img {
    max-width: 100%;
    border-radius: 8px;
}

.radio-card span {
    display: block;
    margin-top: 8px;
    font-weight: bold;
}

span.experience-avatar {
    font-size: var(--font-size-xl);
}

input::placeholder {
    color: var(--accent4);
    opacity: 0.5;
}

/* Hide the native radio but keep it accessible */
.radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Selected state */
.radio-card input[type="radio"]:checked+.experience-content {
    color: white;
    border-color: white;
    box-shadow: 0 0 10px 0 #34b4d1;
}

.radio-card input[type="radio"]:hover+.experience-content {
    color: white;
    border-color: white;
    box-shadow: 0 0 10px 0 #ccc;
}

/* Hover state */
.radio-card:hover .content {
    border-color: #888;
}


.custom-select {
    position: relative;
    /*width: 300px;*/
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: stretch;
}

label.custom-select-label,
.custom-select-trigger * {
    font-size: 16pt;
    color: white;
    white-space: pre;
    padding: 5px;
}

.custom-select-trigger {
    padding: 8px 12px;
    border: 1px solid #ccc;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}

.custom-select-trigger:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(92, 6, 212, 0.2);
}

.custom-select-trigger:hover {
    box-shadow: 0 0 0 2px rgba(92, 6, 212, 0.2);
}

.custom-select-trigger i {
    align-self: center;
}

.custom-select-options {
    position: absolute;
    width: 100%;
    border: 1px solid #ccc;
    display: none;
    list-style: none;
    background-color: black;
    z-index: 1;
    color: white;
    /* Hidden by default */
}

.custom-select-options li {
    padding: 8px 12px;
    cursor: pointer;
}

.custom-select-options li:hover {
    background: var(--accent);
}

.visually-hidden {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
}

/* Contact Section */
section#contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}

section#contact * {
    background-image: unset;
    background-clip: unset;
    color: var(--accent);
    background: white;
}

#skip-to-select~section#contact:not(.modal) {
    display: none;
}

section#contact.modal {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    width: 100vw;
    height: calc(100vh - var(--nav-h));
    z-index: 1000;
    padding: 0;
    margin: 0;
    background-color: white;
}

div#contact-content {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    position: relative;
}

section#contact.modal div#contact-content {
    max-width: calc(100vw - 4rem);
    max-height: calc(100vh - var(--nav-h) - 4rem);
    overflow-y: auto;
    padding: calc(0.2 * var(--nav-h));
    margin: calc(0.2 * var(--nav-h));
    border: 2px solid var(--accent);
    border-radius: 10px;
    box-shadow: 0 0 20vw 4rem var(--accent);
    background-image: unset;
    background: white;
}

#contact div.contact-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 100%;
}

#contact .service-card-content {
    display: block;
}

#contact:not(.modal) #close-contact-modal {
    display: none;
}

#contact:not(.modal) #socials {
    position: relative;
    justify-content: center;
    left: auto;
    transform: none;
}

section#contact a {
    color: var(--accent);
    text-decoration: none;
}

#contact form {
    max-width: 600px;
    margin: 0 auto;
}

#contact div.info {
    margin-bottom: 1.5rem;
}

#contact input,
#contact textarea,
#contact button {
    width: 100%;
    margin-bottom: 1rem;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: var(--font-size-xs);
}

#contact button {
    color: white;
}

#contact textarea {
    resize: none;
}

#contact button {
    background: var(--accent);
    border: 2px solid var(--accent);
    cursor: pointer;
}

section#contact.modal *:not(#submit-query) {
    color: var(--accent);
}

p {
    margin-bottom: 1rem;
}

section {
    --gx: 0%;
    /* x position */
    --gy: 100vh;
    /* y position */
    --gcolours: rgb(145, 10, 67), rgb(244, 75, 90), rgb(138, 40, 104);

    background-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    backdrop-filter: blur(5px);
    background-image: radial-gradient(circle at var(--gx) var(--gy), var(--gcolours));
    box-sizing: border-box;
    color: black;
    padding-left: var(--nav-h);
    padding-right: var(--nav-h);
    padding-top: var(--nav-h);
    border-radius: 10px;
    width: 100%;
    opacity: 0.1;
    scale: 0.95;
    transition:
        visibility 1s ease,
        opacity 1s ease,
        scale 1s ease;
    scroll-margin-top: var(--nav-h);
}

section.bg-variant-1 {
    --gcolours: var(--accent);
}

.bg-variant-1 * {
    background-image: unset;
    color: var(--accent);
    background-color: inherit;
}

.bg-variant .service-card-menu-item:not(.active) *,
.bg-variant .service-card-menu-item:not(.active) {
    background-color: var(--accent);
    color: (var(--accent3));
}

.bg-variant .service-card-menu-item.active *,
.bg-variant .service-card-menu-item.active {
    background-color: white;
    color: (var(--accent));
}

section:not(.bg-variant-1) *:not(.service-card-menu):not(.service-card-menu *) {
    background-image: inherit;
    background-clip: text;
    color: transparent;
}

section.bg-variant-1 *:not(.service-card-menu *) {
    background-image: none;
    color: var(--accent);
}

section.bg-variant-1 .service-card-menu,
section.bg-variant-1 .service-card-menu-item {
    background-color: var(--accent);
    color: var(--accent3);
}

section.bg-variant-1 .service-card-menu-item.active:not(.service-card-menu.mobile .service-card-menu-item.active) {
    background-color: var(--accent3);
    color: var(--accent);
}

.service-card-content.filtered-out {
    display: none;
}

section:last-of-type {
    padding-bottom: 10vw;
}

section.active {
    opacity: 1;
    scale: 1;
}

.service-card-menu {
    display: flex;
    /*max-width: 80vw;*/
    flex-wrap: nowrap;
    align-items: center;
    opacity: 0;
    background-image: inherit;
    border: 1px solid var(--accent);
    height: var(--service-menu-height);
    /*margin-bottom: 2rem; /* remove this for developer.php */
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

section.always-alternating .service-card-menu {
    display: none;
}

.sticky {
    position: sticky;
    top: var(--nav-h);
    z-index: 1;
}

.service-card-menu.sticky.hidden {
    visibility: hidden !important;
}

.service-card-menu.active {
    opacity: 1;
}

.service-card-menu-item {
    flex: 1;
    position: relative;
    transition: background-color 0.5s ease, color 0.5s ease;
    font-size: var(--font-size-xs);
    padding: 1rem;
    height: 100%;
    box-sizing: border-box;
    cursor: pointer;
}

.service-card-menu-item:first-of-type {
    margin-left: 0;
    border-top-left-radius: var(--border-radius);
}

.service-card-menu-item:nth-last-of-type(2):not(.service-card-menu.mobile .service-card-menu-item) {
    margin-right: 0;
    border-top-right-radius: var(--border-radius);
}

.service-card-menu-item.active {
    background-color: white;
    color: var(--accent);
}

.service-card-menu-item .service-media,
.service-card-menu-item .service-detail,
.service-card-menu-item .service-deliverables,
.service-card-menu-item .service-pitfalls {
    display: none;
}

.service-card-content {
    display: flex;
    position: relative;
    /*min-height: 400px;*/
    background-image: inherit;
    background-clip: text;
    transition: 1s ease;
    /*margin-bottom: 4rem; /* remove this for developer.php */
}

section#services .service-card-content:not(.alternating),
section#dev-services .service-card-content:not(.alternating),
section#hmo-services .service-card-content:not(.alternating) {
    min-height: 350px;
    max-height: 350px;
}

section#sample-projects .service-card-content:not(.alternating) {
    min-height: 550px;
    max-height: 550px;
}

.service-card-content.about-us-media {
    max-height: unset;
}

.service-card-content.hidden:not(section.always-alternating .service-card-content) {
    display: none !important;
}

.service-card-menu.sticky~.service-card-content:not(.active):not(.service-card-menu.sticky+.service-card-content) {
    opacity: 0.1;
    scale: 0.95;
    transition: 1s ease;
}

.service-card-menu:not(.sticky)~.service-card-content,
.service-card-menu.sticky+.service-card-content {
    scale: 1;
}

.service-card-menu.mobile {
    height: var(--nav-h);
    flex-direction: column;
    /*box-sizing: border-box;*/
    border: 1px solid var(--accent);
    font-size: var(--font-size-xs);
    box-sizing: border-box;
}

.service-card-menu.mobile *:not(.service-card-menu-mobile-drop) {
    color: unset;
    background-color: unset;
    width: 100%;
    font-size: unset;
}

.service-card-menu .service-card-menu-item.active {
    height: 100%;
    min-height: 100%;
    color: var(--accent3);
}

.service-card-menu.mobile:not(:has(.active)) .service-card-menu-item:first-of-type,
.service-card-menu.mobile.expand .service-card-menu-item.active {
    height: auto;
    min-height: auto;
    background-color: var(--accent);
    color: var(--accent3);
    display: block;
}

.service-card-menu.mobile .service-card-menu-item {
    width: 100%;
}

.service-card-menu.mobile.expand:not(:has(.active)) .service-card-menu-item:not(.active) {
    background-color: var(--accent3);
}

.service-card-menu.mobile .service-card-menu-mobile-drop {
    position: absolute;
    right: 1rem;
    align-content: center;
    height: -webkit-fill-available;
    color: var(--accent3);
}

.service-card-menu.expand .service-card-menu-mobile-drop,
.service-card-menu:not(.mobile) .service-card-menu-mobile-drop {
    display: none;
}

.service-card-menu.mobile .service-card-menu-item:not(.active) {
    display: none;
    color: var(--accent);
    background-color: var(--accent3);
}

.service-card-menu.mobile.expand .service-card-menu-item {
    display: block;
    border-left: 1px solid var(--accent);
    border-right: 1px solid var(--accent);
    box-sizing: border-box;
    margin-left: -1px;
    margin-right: -1px;
    width: calc(100% + 2px);
}

.service-card-menu.mobile .service-card-menu-item:first-of-type {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.service-card-menu.mobile .service-card-menu-item:nth-last-of-type(2) {
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    border-bottom: 1px solid var(--accent);
}

.service-card-menu.mobile .service-card-menu-item:not(.active):hover {
    color: var(--accent3);
    background-color: var(--accent);
}

section.always-alternating .service-card-content,
.service-card-content.alternating {
    padding-bottom: calc(var(--dynamic-font-scale) * var(--nav-h));
}

section.always-alternating .service-card-content:nth-of-type(2n),
.service-card-content.alternating:nth-of-type(2n) {
    flex-direction: row-reverse;
}

.service-card-content.active {
    opacity: 1;
    scale: 1;
    visibility: visible;
}

.service-card:not(.service-card-menu .service-card) {
    position: relative;
    min-height: 10rem;
}

.service-intro {
    font-size: calc(var(--dynamic-font-scale) * var(--font-size-l));
    line-height: calc(var(--dynamic-font-scale) * var(--font-size-l));
    /*text-transform: uppercase;*/
    font-weight: bold;
    color: #858585;
    transition: all 0.1s ease;
    margin-bottom: calc(var(--dynamic-font-scale) * var(--font-size-m));
}

.service-intro+.service-detail {
    padding-bottom: calc(2 * var(--dynamic-font-scale) * var(--font-size-xs));
    font-size: calc(var(--dynamic-font-scale) * var(--font-size-s));
}

.service-name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-weight: bold;
    color: #858585;
    color: white;
    text-transform: uppercase;
}

/*
.service-card-content .service-name {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-size: calc(var(--dynamic-font-scale) * 3rem);
    line-height: calc(var(--dynamic-font-scale) * 3rem);
    max-width: calc(40% - 1rem);
    color: #ffffffe8;
    background-image: inherit;
    background-clip: text;
    transform: none;
    white-space: pre-wrap;
    text-align: left;
}*/

.service-card-content .service-name {
    position: relative;
    top: 0;
    left: 0;
    font-size: calc(var(--dynamic-font-scale) * var(--font-size-m));
    line-height: calc(var(--dynamic-font-scale) * var(--font-size-m));
    transform: none;
    white-space: pre-wrap;
    text-align: left;
    padding-bottom: 1rem;
}

.service-card-menu:not(.mobile) .service-name {
    font-size: calc(var(--dynamic-font-scale) * var(--font-size-xs));
}

/*
section.always-alternating .service-card-content:nth-of-type(2n) .service-name,
.service-card-content.alternating:nth-of-type(2n) .service-name {
    left: unset;
    right: 1rem;
    text-align: right;
}
*/
.service-card-content .service-media {
    /*position: absolute;
    left: 0;
    top: 0;*/
    min-height: 300px;
    max-height: 100%;
    width: 40%;
    z-index: -1;
}

.service-media img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.service-card-content .service-detail {
    /*position: absolute;
    top: 0;
    left: 40%;*/
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 1rem;
    padding-bottom: 0;
    font-size: calc(var(--dynamic-font-scale) * var(--font-size-xs));
    line-height: calc(var(--dynamic-font-scale) * var(--font-size-s));
    font-weight: 400;
    width: calc(60% - 1rem);
    white-space: pre-wrap;
    text-align: left;
    max-height: -webkit-fill-available;
    overflow-y: auto;
}

.service-card-content .service-detail:not(.service-media~.service-detail) {
    position: relative;
    left: 0;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

section.always-alternating .service-card-content:nth-of-type(2n) .service-detail,
.service-card-content.alternating .service-detail {
    /*padding-top: 0;*/
}

section.always-alternating .service-card-content:nth-of-type(2n) .service-detail,
.service-card-content.alternating:nth-of-type(2n) .service-detail {
    padding-left: 0;
}

.service-card-menu-item.active:not(.service-card-menu.mobile .service-card-menu-item.active) .service-name {
    color: var(--accent);
}

.service-card * {
    color: transparent;
    background-image: inherit;
    background-clip: text;
}

.service-card-content:not(.service-card-menu~.service-card-content) {
    /*border-radius: 2rem;
    box-shadow: 0 0 10px #ccc;
    border: 1px solid #ccc;*/
    margin-bottom: 2rem;
    min-height: unset;
}

section#sample-projects .service-card-content:not(.alternating) {
    flex-direction: row-reverse;
}

/*
section#sample-projects .service-card-content:not(.alternating) .service-name,
section#sample-projects .service-card-content:not(.alternating) .service-media {
    left: unset;
    right: 0;
}

section#sample-projects .service-card-content:not(.alternating) .service-name {
    right: 1rem;
}*/

section#sample-projects .service-card-content:not(.alternating) .service-media~.service-detail {
    right: unset;
    left: 0;
    padding-left: 0;
}

.service-card-content.about-us-media.active.focused {
    transition: none;
    border: 1px solid var(--accent2);
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 0 25px 0 #ccc;
    margin: -1.5rem;
    /*position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;*/
}

.focused .service-card-content.active {
    display: flex;
    width: auto;
}

.focused .about-us-desc.reveal {
    position: relative;
    top: unset;
    left: unset;
    width: unset;
}

.no-transitions,
.no-transitions *,
.no-transitions *::before,
.no-transitions *::after {
    transition: none !important;
    animation: none !important;
}

.service-card-content~.service-card-content.about-us-media.active.focused {
    transition: none;
}

.about-us-media {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    background-image: inherit;
    background-clip: text;
}

.about-us-staff-info {
    width: auto;
}


.about-us-media:not(:first-of-type) {
    /*margin-top: 4rem;*/
}

.about-us-staff {
    position: relative;
    display: block;
    /*width: 33vh;*/
    background-image: inherit;
    background-clip: text;
}

.about-us-staff:hover {
    scale: 1;
}

.about-us-img {
    min-height: var(--staff-pic);
    min-width: var(--staff-pic);
    max-height: var(--staff-pic);
    max-width: var(--staff-pic);
    object-fit: cover;
    overflow: hidden;
}

.about-us-img img {
    height: 100%;
    width: 100%;
}

.about-us-name {
    background-image: inherit;
    background-clip: text;
    color: transparent;
    font-weight: bold;
    text-transform: uppercase;
}

.about-us-desc {
    display: none;
}

.about-us-desc.reveal {
    display: block;
    position: absolute;
    overflow-y: auto;
    top: 0;
    left: calc(33vh + 2rem);
    width: calc(100vw - 33vh - 20vw - 4rem);
    background-image: inherit;
    background-clip: text;
    color: transparent;
    font-size: var(--font-size-s);
    font-weight: 400;
    line-height: 2rem;
    padding-right: 2.5rem;
}

span.about-us-desc-rollover {
    position: absolute;
    display: none;
    top: 50%;
    right: 50%;
    font-weight: normal;
    font-size: var(--font-size-xs);
    z-index: 1;
    color: white;
    cursor: pointer;
    transform: translate(50%, 50%);
    background: var(--accent);
    padding: 0.5rem;
    text-align: center;
    border-radius: 10px;
    border: 2px solid white;
    white-space: pre;
}

span.about-us-desc-rollover span {
    margin-left: 0.5rem;
}

span.about-us-desc-rollover.reveal:not(.about-us-desc.reveal~span.about-us-desc-rollover) {
    display: block;
}

span.about-us-close {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    color: transparent;
    background-image: inherit;
    background-clip: text;
}

span#contact-ui-msg {
    min-height: 2rem;
    font-size: var(--font-size-xs);
    line-height: 2rem;
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 0.5rem;
    color: var(--accent);
}

ul.bullets {
    list-style: none;
    font-size: var(--font-size-xs);
    line-height: var(--font-size-s);
    margin-top: 0.5rem;
}

div.service-bullets {
    margin-bottom: calc(var(--dynamic-font-scale) * 1.5rem);
    position: relative;
    display: block;
    line-height: normal;
}

div.service-desc {
    position: relative;
}

span.service-client {
    font-size: calc(var(--dynamic-font-scale) * var(--font-size-m));
    font-weight: bold;
}

ul:not(:has(li:not(:empty))) {
    display: none;
}

div.service-bullets:has(.service-client:empty),
div.service-bullets:has(.service-client:empty):has(.bullets li:empty) {
    display: none;
    margin-bottom: 0;
}

#map {
    width: calc(100vw - 2 * var(--nav-h));
    height: 80vh;
    border-radius: var(--border-radius);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--nav-h);
}

div#section-filter {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: transparent;
    font-size: calc(var(--dynamic-font-scale) * var(--font-size-m));
    font-weight: bold;
    background-color: white;
    background-image: inherit;
    background-clip: text;
}

div#filter-box {
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-image: inherit;
    background-color: inherit;
    background-clip: inherit;
    padding-top: calc(var(--dynamic-font-scale) * 1rem);
    padding-bottom: calc(var(--dynamic-font-scale) * 1rem);
    font-size: calc(var(--dynamic-font-scale) * var(--font-size-xs));
    color: var(--accent) !important;
}

div#filter-box * {
    color: var(--accent) !important;
}

input#filter-input {
    margin-top: 0.5rem;
    width: calc(3 * var(--dynamic-font-scale) * 5rem);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: calc(3 * var(--dynamic-font-scale) * 1rem);
    border-radius: var(--border-radius);
    border: 0;
    box-shadow: inset 0 0 10px 0 #ccc;
    text-align: center;
    color: var(--accent);
    padding: 0.5rem;
}

span#filter-clear {
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    font-size: var(--font-size-s);
    cursor: pointer;
}

span#filter-clear:hover {
    color: var(--hover-colour);
}

.service-tags {
    display: none;
    position: relative;
    margin-top: 1rem;
    color: var(--accent2);
    font-size: 12px;
    gap: 0.5rem;
    flex-wrap: wrap;
    line-height: normal;
}

span.service-tag-glyph {
    margin-right: 0.5rem;
}

#filter-box.sticky.stuck {
    background-image: none;
    background-color: white;
    background-clip: unset;
    color: var(--accent);
    padding-bottom: calc(var(--dynamic-font-scale) * 1rem);
    /*font-size: 0.75rem;*/

}

#filter-box.sticky.stuck label {
    display: none;
}

.service-card-menu.sticky.stuck,
.service-card-menu.sticky.stuck .service-card-menu-item:first-of-type,
.service-card-menu.sticky.stuck .service-card-menu-item:nth-last-of-type(2):not(.service-card-menu.mobile .service-card-menu-item) {
    border-radius: 0;
}
.service-card-menu.stuck~div.service-card-content {
    scroll-margin-top: calc(var(--nav-h) + 0.5rem);
}

.service-card-menu.mobile.stuck:not(.expand) .service-card-menu-item:not(.active) {
    display: none;
}

div#sc-menu {
    display: none;
    position: fixed;
    top: var(--nav-h);
    right: 0;
    background-color: var(--accent);
    color: var(--accent3);
    flex-direction: column;
    justify-content: center;
    align-content: center;
    border-bottom-left-radius: calc(0.5 * var(--border-radius));
    width: 2rem;
    height: 2rem;
    transition: 0.5s ease;
    cursor: pointer;
    padding: 0.1rem;
}

div#sc-menu.expand {
    transition: 0.5s ease;
    width: fit-content;
    height: fit-content;
    padding: 1rem;
}

span#sc-menu-open-glyph,
span#sc-menu-close-glyph {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    cursor: pointer;
}

span#sc-menu-close-glyph {
    align-items: flex-end;
}

div#sc-menu:not(.expand) span#sc-menu-close-glyph {
    display: none;
}

div#sc-menu.expand span#sc-menu-open-glyph {
    display: none;
}

span#sc-menu-jump {
    font-weight: bold;
}

div#sc-menu:not(.expand) span#sc-menu-jump,
div#sc-menu:not(.expand) ul#sc-menu-list {
    display: none;
}

ul#sc-menu-list {
    list-style-type: none;
    cursor: pointer;
}

/* Media Queries */
/*
@media (max-width: 1200px) {
    :root {
        font-size: 10pt;
    }
}
    */

@media (max-width: 1050px) {

    #map {
        width: calc(100vw - 1 * var(--nav-mobile));
        height: 80vh;
        border-radius: var(--border-radius);
        margin-left: auto;
        margin-right: auto;
        margin-bottom: var(--nav-h);
    }

    section {
        padding-left: calc(0.5 * var(--nav-h));
        padding-right: calc(0.5 * var(--nav-h));
        padding-top: calc(0.5 * var(--nav-h));
    }

    .service-card-menu {
        position: sticky;
        z-index: 1;
        height: var(--nav-h);
    }

    .service-card-menu~div.service-card-content {
        scroll-margin-top: calc(var(--nav-h) + 1rem - 2px);
    }

    .service-card-content.hidden {
        display: flex !important;
    }

    .service-card-content.hidden:nth-of-type(2n) {
        flex-direction: row-reverse;
    }

    .service-card-content.hidden:nth-of-type(2n) .service-name {
        left: unset;
        right: 1rem;
        text-align: right;
    }

    .service-card-content.alternating {
        margin-bottom: calc(var(--dynamic-font-scale) * var(--nav-h) * 0.25);
    }

    div#sc-menu {
        display: flex;
    }
}

@media (max-width: 880px) {

    .nav-links li,
    li#swap-experience {
        display: none;
    }

    span#mobile-nav-drop {
        display: block;
        position: absolute;
        right: 1rem;
        color: var(--accent);
    }

    .navbar.expand .nav-links {
        display: flex;
        flex-direction: column;
        width: auto;
        gap: 0;
        align-items: flex-start;
        padding: 1rem;
        top: var(--nav-h);
        right: 0;
        position: fixed;
        background-color: inherit;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
        border-bottom-left-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
        z-index: 10;
    }

    .navbar.expand .nav-links li:not(:first-of-type) {
        padding-top: 0.5rem;
    }

    li#swap-experience,
    li#swap-experience:hover {
        border: none;
        padding: 0;
        border-radius: 0;
        background-color: inherit;
        color: var(--accent);
        cursor: pointer;
    }

    .navbar.expand .nav-links li,
    .navbar.expand .nav-links li#swap-experience {
        display: block;
    }
}

@media (max-height: 820px) {
    div.modal-content {
        padding: 2rem;
    }
}

@media (max-width: 800px) {
    .custom-select {
        flex-direction: column;
        align-items: center;
        padding-top: var(--nav-h);
    }

    section#contact.modal {
        height: calc(100vh - var(--nav-h));
        overflow-y: auto;
        border-radius: 0;
    }

    section#contact.modal div#contact-content {
        width: calc(100% - 2rem);
        height: fit-content;
        box-shadow: none;
        border: none;
        border-radius: unset;
        padding: 1rem;
        max-height: unset;
        max-width: unset;
        margin: 0;
        position: absolute;
        top: 0;
    }

    div.modal-content,
    div#character-select {
        display: block;
        position: absolute;
        top: var(--nav-h);
        left: 0;
        width: 100%;
        height: calc(100% - var(--nav-h));
        transform: none;
        padding: 0;
        border: 0;
        border-radius: 0;
        background-image: linear-gradient(0deg, black, var(--accent));
    }

    li#swap-experience {
        padding-top: 0.5rem;
    }

    .service-card-content .service-detail {
        height: fit-content;
        max-height: unset;
    }
}

@media (max-width: 700px) {

    :root {
        /*--nav-h: var(--nav-h-mobile);*/
    }

    p#hero-tag {
        font-size: var(--font-size-l);
    }

    body {
        padding-top: var(--nav-h);
    }

    #logo {
        /*display: none;*/
    }

    div#logo-background-container {
        top: var(--nav-h);
        height: calc(100vh - var(--nav-h));
    }

    .navbar {
        height: var(--nav-h);
    }

    .navbar:hover .nav-links {
        top: var(--nav-h);
    }

    .hero {
        height: calc(100vh - var(--nav-h));
    }

    .sticky {
        top: var(--nav-h);
    }

    .service-card-menu.mobile {
        height: var(--nav-h);
    }

    .service-card-menu.sticky~.service-card-content {
        scroll-margin-top: var(--nav-h);
    }

    .service-card-content,
    .service-card-content.alternating,
    .service-card-content:nth-of-type(2n),
    .service-card-content.alternating:nth-of-type(2n) {
        display: flex;
        flex-direction: column;
    }

    .service-card-content .service-media {
        display: none;
    }

    .service-card-content .service-detail {
        width: 100%;
        padding: 0;
    }

    /*
    .service-card-content .service-name {
        position: relative;
        max-width: unset;
        top: auto;
        left: unset;
        right: unset;
        color: var(--accent);
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }*/

    .about-us-media {
        width: 100%;
        align-items: center;
    }

    .about-us-staff {
        width: 100%;
    }

    .about-us-img {
        height: auto;
        width: 100%;
    }

    .experience-content {
        height: 100px;
        width: 100px;
        margin: 0.5rem;
        margin-bottom: 0;
        background-image: linear-gradient(0deg, #5d1c3c, #4a142f);
    }

    span.experience-avatar {
        font-size: 2rem;
    }

    .radio-card span {
        font-size: 1rem;
    }
}

@media (forced-colors: active) {

    .service-card *,
    .service-card-content .service-detail,
    .service-intro {
        color: CanvasText !important;
        background: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}