/* BēnreaDesignStudio */

/* Sans Serif Fonts */
@font-face {
    font-family: 'sans-serif-variable-font';
    src: url('../assets/font/GeneralSans/GeneralSans-Variable.woff2') format('woff2'),
        url('../assets/font/GeneralSans/GeneralSans-Variable.woff') format('woff'),
        url('../assets/font/GeneralSans/GeneralSans-Variable.ttf') format('truetype');
    font-weight: 200 700;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: 'sans-serif-variable-italic-font';
    src: url('../assets/font/GeneralSans/GeneralSans-VariableItalic.woff2') format('woff2'),
        url('../assets/font/GeneralSans/GeneralSans-VariableItalic.woff') format('woff'),
        url('../assets/font/GeneralSans/GeneralSans-VariableItalic.ttf') format('truetype');
    font-weight: 200 700;
    font-display: swap;
    font-style: italic;
}

/* Display Fonts */
@font-face {
    font-family: "display-variable-font";
    src: url('../assets/font/ClashDisplay/ClashDisplay-Variable.woff2') format('woff2'),
        url('../assets/font/ClashDisplay/ClashDisplay-Variable.woff') format('woff'),
        url('../assets/font/ClashDisplay/ClashDisplay-Variable.eot') format('eot'),
        url('../assets/font/ClashDisplay/ClashDisplay-Variable.ttf') format('truetype');
    font-weight: 200 700;
    font-display: swap;
    font-style: normal;
}
/* Display Alt Fonts */
@font-face {
    font-family: "display-alt-variable-font";
    src: url('../assets/font/ClashGrotesk/ClashGrotesk-Variable.woff2') format('woff2'),
        url('../assets/font/ClashGrotesk/ClashGrotesk-Variable.woff') format('woff'),
        url('../assets/font/ClashGrotesk/ClashGrotesk-Variable.eot') format('eot'),
        url('../assets/font/ClashGrotesk/ClashGrotesk-Variable.ttf') format('truetype');
    font-weight: 200 700;
    font-display: swap;
    font-style: normal;
}

/* Animations */
/* Fade In */
.fadeInAnimation {
    animation: fadeIn 0.3s linear;
}
.fadeInAnimation2 {
    animation: fadeIn 0.45s linear;
}
.fadeInAnimation3 {
    animation: fadeIn 0.6s linear;
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Fade Out */
.fadeOutAnimation {
    animation: fadeOut 0.3s linear;
}
.fadeOutAnimation2 {
    animation: fadeOut 1.5s linear;
}
.fadeOutAnimation3 {
    animation: fadeOut 0.2s linear;
}
.fadeOutAnimation4 {
    animation: fadeOut 0.45s linear;
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
.fadeOutAnimation4 {
    animation: fadeOut4 0.15s ease-out;
}
@keyframes fadeOut4 {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.6;
    }
}
.fadeOutAnimation5 {
    animation: fadeOut 2s linear;
}
.fadeOutAnimation6 {
    animation: fadeOut 0.3s linear;
}
/* Push */
.pushInLeftAnimation {
    animation: pushInLeft;
    animation-duration: 2s;
}
@keyframes pushInLeft {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(0);
    }

    40% {
        transform: translateX(-100px);
    }
}
.pushInRightAnimation {
    animation: pushInRight;
    animation-duration: 2s;
}
@keyframes pushInRight {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(0);
    }

    40% {
        transform: translateX(100px);
    }
}
/* Scroll */
.scrollLeftAnimation {
    animation: scrollLeft 150s linear infinite;
}
.scrollLeftAnimation2 {
    animation: scrollLeft 20s linear infinite;
}
@keyframes scrollLeft {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}
.scrollRightAnimation {
    animation: scrollRight 40s linear infinite;
}
@keyframes scrollRight {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}
/* Slide In Top */
.slideInTopAnimation {
    animation: slideInTop 0.45s ease-out;
}
@keyframes slideInTop {
    from {
        transform: translate(0, -100%);
    }
    to {
        transform: translate(0, 0);
    }
}
.slideInTopAnimation2 {
    animation: slideInTop2 0.3s ease-out;
}
@keyframes slideInTop2 {
    from {
        transform: translate(0, -12px);
        opacity: 0;
    }
    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}
.slideInTopAnimation3 {
    animation: slideInTop 0.3s ease-out;
}
/* Slide In Left */
.slideInLeftAnimation {
    animation: slideInLeft 0.25s ease-out;
}
@keyframes slideInLeft {
    from {
        transform: translate(-50%, 0);
        opacity: 0;
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}
/* Slide In Right */
.slideInRightAnimation {
    animation: slideInRight 0.6s ease-out;
}
@keyframes slideInRight {
    from {
        transform: translate(100%, 0);
        opacity: 0;
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}
.slideInRightAnimation2 {
    animation: slideInRight2 0.3s ease-out;
}
@keyframes slideInRight2 {
    from {
        transform: translate(100%, 0);
    }

    to {
        transform: translate(0, 0);
    }
}
/* Slide In Bottom */
.slideInBottomAnimation {
    animation: slideInBottom 0.3s ease-out;
}
@keyframes slideInBottom {
    from {
        transform: translate(0, 100%);
        opacity: 0;
    }
    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}
.slideInBottomAnimation2 {
    animation: slideInBottom2 0.3s ease-out;
}
@keyframes slideInBottom2 {
    from {
        transform: translate(0, 5vh);
        opacity: 0;
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}
/* Slide Out Bottom */
.slideOutBottomAnimation {
    animation: slideOutBottom 0.275s ease-in;
}
@keyframes slideOutBottom {
    from {
        transform: translate(0, 0);
        opacity: 1;
    }

    to {
        transform: translate(0, 100%);
        opacity: 0;
    }
}
.slideOutBottomAnimation2 {
    animation: slideOutBottom2 0.3s ease-in;
}
@keyframes slideOutBottom2 {
    from {
        transform: translate(0, 0);
        opacity: 1;
    }

    to {
        transform: translate(0, 12px);
        opacity: 0;
    }
}
.slideOutBottomAnimation2 {
    animation: slideOutBottom2 0.3s ease-in;
}
/* Slide Out Left */
.slideOutLeftAnimation {
    animation: slideOutLeft 0.3s ease-in;
}
@keyframes slideOutLeft {
    from {
        transform: translate(0, 0);
        opacity: 1;
    }

    to {
        transform: translate(-50%, 0);
        opacity: 0;
    }
}
/* Slide Out Right */
.slideOutRightAnimation {
    animation: slideOutRight ease-in-out;
    animation-duration: 0.5s;
}
@keyframes slideOutRight {
    from {
        transform: translate(0, 0);
        opacity: 1;
    }

    to {
        transform: translate(100%, 0);
        opacity: 0;
    }
}
.slideOutRightAnimation2 {
    animation: slideOutRight2 0.3s ease-out;
}
@keyframes slideOutRight2 {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(100%, 0);
    }
}
.slideOutTopAnimation {
    animation: slideOutTop 0.45s ease-in;
}
@keyframes slideOutTop {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(0, -100%);
    }
}
/* Spin */
.spinAnimation {
    animation: spin 1.75s linear infinite;
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
@keyframes spinOnce {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-180deg);
    }
}
/* Zoom */
.zoomAnimation {
    animation: zoom 1.25s cubic-bezier(1, 0.25, 0.5, 1) alternate-reverse infinite;
}
@keyframes zoom {
    from {
        transform: scale(0.8);
        opacity: 1;
    }
    to {
        transform: scale(1.2);
        opacity: 0;
    }
}
.zoomAnimation2 {
    animation: zoom2 2s linear;
}
@keyframes zoom2 {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(4);
        opacity: 0;
    }
}


/* Variables */
:root {
    /* Blur */
    --blur-normal: 16px;
    --blur-medium: 20px;
    --blur-heavy: 50px;
    /* Border */
    --border-small: 1px;
    --border-normal: 1.75px;
    --border-medium: 3px;
    /* Colour */
    --color-black: #000000;
    --color-black-transparent: rgba(0, 0, 0, 0);
    --color-black-transparent-faint: rgba(0, 0, 0, 0.0275);
    --color-black-transparent-lighter: rgba(0, 0, 0, 0.1);
    --color-black-transparent-light: rgba(0, 0, 0, 0.25);
    --color-black-transparent-normal: rgba(0, 0, 0, 0.5);
    --color-black-transparent-heavy: rgba(0, 0, 0, 0.85);
    --color-grey-faint: #fafafa;
    --color-grey-lighter: #eaeaea;
    /* --color-grey-light: #e1e1e1; */
    --color-grey-light: #c5c5c5;
    --color-grey: #888888;
    /* --color-grey-dark-1: #4d4d4d;
    --color-grey-dark-2: #1f1f1f; */
    --color-grey-coal: #1A1A1A;
    --color-text-white: #f1f1f1;
    --color-text-light: #e1e1e1;
    --color-text-grey: #909090;
    --color-text-dark: #4C4C4C;
    --color-text-black: #2a2a2a;
    --color-white: #ffffff;
    --color-white-transparent: rgba(255, 255, 255, 0);
    --color-white-transparent-faint: rgba(255, 255, 255, 0.05);
    --color-white-transparent-lighter: rgba(255, 255, 255, 0.15);
    --color-white-transparent-light: rgba(255, 255, 255, 0.3);
    --color-white-transparent-normal: rgba(255, 255, 255, 0.5);
    --color-white-transparent-heavy: rgba(255, 255, 255, 0.7);
    --color-white-transparent-text: rgba(255, 255, 255, 0.95);
    /* Theme */
    --color-theme-light: #F1F7F8;
    --color-theme: #21f9ea;
    --color-theme-highlight: #7ef9f14d;
    --color-theme-faint: #7ef9f12a;
    --color-theme-dark: #063129;
    --color-theme-dark-text: #083e39;
    --color-theme-dark-faint: #20403d15;
    --color-theme-text: #093430;
    --color-accent: #f7791f;
    --color-accent-light: #ffd1b8;
    --color-accent-highlight: #FF7C334d;
    --color-accent-faint: #ff7a331e;
    /* Corner Radius */
    --corner-radius-small: 8px;
    --corner-radius-normal: 16px;
    --corner-radius-medium: 32px;
    --corner-radius-large: calc(var(--margin-body) * 0.5);
    --corner-radius-rounded: 100vw;
    /* Filter */
    --filter-grey-faint: invert(99%) sepia(4%) saturate(251%) hue-rotate(217deg) brightness(116%) contrast(96%);
    --filter-theme: invert(86%) sepia(70%) saturate(626%) hue-rotate(92deg) brightness(106%) contrast(98%);
    --filter-theme-dark: invert(15%) sepia(10%) saturate(4343%) hue-rotate(128deg) brightness(103%) contrast(97%);
    --filter-theme-light: invert(89%) sepia(93%) saturate(424%) hue-rotate(17deg) brightness(105%) contrast(104%);
    /* Font */
    --font-weight-extra-light: "wght" 200;
    --font-weight-light: "wght" 300;
    --font-weight-regular: "wght" 400;
    --font-weight-regular-alt: "wght" 450;
    --font-weight-medium: "wght" 500;
    --font-weight-medium-alt: "wght" 550;
    --font-weight-semi-bold: "wght" 600;
    --font-weight-bold: "wght" 700;
    --font-weight-extra-bold: "wght" 800;
    --font-weight-black: "wght" 900;
    /* Padding */
    --padding-section: 50px;
    /* Margin */
    --margin-body: 5vw;
    /* Notch */
    --notch-small: 6px;
    --notch-normal: 20px;
    /* Size */
    --size-button-small: 28px;
    --size-button-normal: 38px;
    --size-header: 72px;
    --size-window-height: 100dvh;
    /* Spacer */
    --spacer-min: 10px;
    --spacer-normal: 16px;
    --spacer-medium: 32px;
    --spacer-large: 50px;
    /* Transition */
    --transition-time-fast-in-out: 0.15s ease-in-out;
    --transition-time-fast-out: 0.15s ease-out;
    --transition-time-medium-in-out: 0.225s ease-in-out;
    --transition-time-medium-out: 0.225s ease-out;
    --transition-time-normal-in-out: 0.3s ease-in-out;
    --transition-time-normal-out: 0.3s ease-out;
    --transition-time-lazy-in-out: 0.45s ease-in-out;
    --transition-time-lazy-out: 0.45s ease-out;
}


/* Text */
h1 {
    display: inline-block;
    position: relative;
    text-decoration: none;
    text-rendering: geometricPrecision;
    font-family: display-variable-font;
    font-variation-settings: var(--font-weight-black);
    font-weight: normal;
    font-style: normal;
    font-size: 6.5rem;
    letter-spacing: -0rem;
    line-height: 100%;
    text-transform: uppercase;
    cursor: text;
    /* white-space: pre-wrap; */
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}
h2 {
    display: inline-block;
    position: relative;
    text-decoration: none;
    text-rendering: geometricPrecision;
    /* font-family: display-light-italic-font; */
    font-family: display-variable-font;
    font-variation-settings: var(--font-weight-regular-alt);
    font-weight: normal;
    font-style: normal;
    font-size: 5rem;
    letter-spacing: -0.05rem;
    line-height: 115%;
    /* white-space: pre-wrap; */
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}
h3 {
    display: inline-block;
    position: relative;
    text-decoration: none;
    text-rendering: geometricPrecision;
    font-family: display-variable-font;
    font-variation-settings: var(--font-weight-medium-alt);
    font-weight: normal;
    font-style: normal;
    font-size: 3rem;
    letter-spacing: -0.015rem;
    line-height: 115%;
    /* white-space: pre-wrap; */
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}
h4 {
    display: inline-block;
    position: relative;
    text-decoration: none;
    text-rendering: geometricPrecision;
    font-family: display-variable-font;
    font-variation-settings: var(--font-weight-semi-bold);
    font-style: normal;
    font-weight: normal;
    font-size: 1.275rem;
    letter-spacing: 0.005rem;
    line-height: 100%;
    white-space: wrap;
}
h5 {
    display: inline-block;
    position: relative;
    text-decoration: none;
    text-rendering: geometricPrecision;
    font-family: sans-serif-variable-font;
    font-variation-settings: var(--font-weight-semi-bold);
    font-style: normal;
    font-weight: normal;
    font-size: 1.05rem;
    line-height: 130%;
    letter-spacing: -0.005rem;
    white-space: wrap;
    stroke: none;
}
p {
    display: inline-block;
    position: relative;
    text-decoration: none;
    text-rendering: geometricPrecision;
    font-family: sans-serif-variable-font;
    font-variation-settings: var(--font-weight-regular-alt);
    font-style: normal;
    font-weight: normal;
    font-size: 1.05rem;
    line-height: 130%;
    letter-spacing: 0rem;
    white-space: wrap;
    stroke: none;
}
ul, ol {
    display: inline-block;
    position: relative;
    text-decoration: none;
    text-rendering: geometricPrecision;
    font-family: sans-serif-variable-font;
    font-variation-settings: var(--font-weight-regular-alt);
    font-style: normal;
    font-weight: normal;
    font-size: 1.05rem;
    line-height: 130%;
    letter-spacing: 0rem;
    list-style-position: inside;
}
ul li, 
ol li {
    padding: 0 0 0 var(--spacer-normal);
}
ul li:not(:last-child), 
ol li:not(:last-child) {
    margin: 0 0 var(--spacer-min) 0;
}
ul {
    list-style-type: square;
}
ol {
    list-style-type: lower-alpha;
}
b, strong { 
    font-variation-settings: var(--font-weight-medium-alt);
    letter-spacing: 0rem;
}
.caption {
    font-size: 0.875rem;
    line-height: 135%;
    letter-spacing: -0.001rem;
}

button {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    position: relative;
    text-decoration: none;
    text-rendering: geometricPrecision;
    width: fit-content;
    height: fit-content;
    align-content: center;
    align-items: center;
    font-family: display-variable-font;
    font-variation-settings: var(--font-weight-medium);
    font-style: normal;
    font-weight: normal;
    font-size: 0.875rem;
    letter-spacing: 0.008rem;
    color: var(--color-theme-light);
    padding: 12px 20px;
    border: none;
    background: var(--color-theme-dark);
    clip-path: 
    polygon(
      0% var(--notch-small), 
      var(--notch-small) 0%, 
      100% 0%, 
      100% 0%, 
      100% calc(100% - var(--notch-small)), 
      calc(100% - var(--notch-small)) 100%, 
      0% 100%, 
      0% 100%
    );
    transition: var(--transition-time-fast-out);
    -moz-transition: var(--transition-time-fast-out);
    cursor: pointer;
    /* z-index: 52; */
}
button:after {
    content: "";
    position: absolute;
    margin: 0;
    width: calc(var(--notch-small) * 4);
    height: calc(var(--notch-small) * 4);
    left: calc(0px - (var(--notch-small) * 2.5));
    bottom: calc(0px - (var(--notch-normal) * 2.5));
    transform: rotate(45deg);
    background-color: var(--color-theme);
    opacity: 1;
    transition: var(--transition-time-medium-out);
    -moz-transition: var(--transition-time-medium-out);
}
button:hover:after {
    left: calc(0px - (var(--notch-small) * 2.5));
    bottom: calc(0px - (var(--notch-small) * 2.5));
    opacity: 1;
}

.input {
    /* This is a different input for forms and will conflict
    with video input when changed to input and not .input */
    display: inline-block;
    position: relative;
    text-decoration: none;
    text-rendering: geometricPrecision;
    left: 0;
    right: 0;
    padding: 0.9rem;
    height: fit-content;
    background: none;
    border-radius: var(--corner-radius-small);
    border: 3px solid var(--color-text-dark);
    font-family: sans-serif-variable-font;
    font-variation-settings: var(--font-variation-medium-alt);
    font-size: 0.95rem;
    letter-spacing: -0.005rem;
    transition: var(--transition-time-normal-out);
    -moz-transition: var(--transition-time-normal-out);
}
.tag {
    display: inline-block;
    width: fit-content;
    height: fit-content;
    text-decoration: none;
    text-rendering: geometricPrecision;
    padding: 5.5px 9px;
    font-family: sans-serif-variable-font;
    font-variation-settings: var(--font-variation-medium);
    font-size: 0.85rem;
    letter-spacing: 0rem;
    line-height: 100%;
    color: var(--color-text-dark);
    text-transform: capitalize;
    border: var(--border-small) solid var(--color-text-dark);
    border-radius: var(--corner-radius-rounded);
    background: none;
}

.separator {
    display: flex;
    position: relative;
    flex-direction: row;
    width: 100%;
    height: fit-content;
    opacity: 0.15;
    transition: var(--transition-time-medium-out);
    -moz-transition: var(--transition-time-medium-out);
    transition-delay: 0.3s;
}
.separator div {
    position: relative;
    display: flex;
    shape-rendering: geometricPrecision;
    height: var(--border-small);
    /* background: var(--color-text-black); */
    background: var(--color-theme-dark);
    transition: var(--transition-time-lazy-out);
    -moz-transition: var(--transition-time-lazy-out);
}
.separator div:nth-child(1) {
    width: 30px;
    transform: rotate(45deg) translate(-14px, 0);
    margin: 0 -15px 0 6px;
}
.separator div:nth-child(2) {
    width: 100%;
}


/* Layout */
* {
    margin: 0;
    padding: 0;
    /* box-sizing: border-box; */
    /* cursor: none; */
}
html {
    font-size: 100%;
}
body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    background: var(--color-grey-faint);
    transition: var(--transition-time-lazy-out);
    -moz-transition: var(--transition-time-lazy-out);
    scroll-behavior: smooth;
    /* user-select: none; */
    /* overflow: visible; */
}
::-webkit-scrollbar {
    width: 8px;
    background: var(--color-black-transparent-faint);
}
::-webkit-scrollbar-track {
    background: none;
}
::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    /* border-radius: var(--corner-radius-normal); */
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-grey);
}
::selection {
    color: var(--color-white-transparent-text);
    background: var(--color-accent);
}


/* Header */
header {
    display: none;
    position: relative;
    flex-direction: row;
    flex-shrink: 0;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    /* height: fit-content; */
    height: var(--size-header);
    align-items: center;
    padding: 0 var(--margin-body);
    background: var(--color-grey-faint);
    z-index: 50;
    transition: var(--transition-time-normal-out);
    -moz-transition: var(--transition-time-normal-out);
    pointer-events: fill;
}
header .left {
    display: flex;
    position: relative;
    width: 100%;
    height: fit-content;
    flex-direction: row;
    align-items: center;
    gap: var(--spacer-normal);
}
#header-title {
    display: flex;
    position: relative;
    text-decoration: none;
    text-rendering: geometricPrecision;
    width: fit-content;
    height: fit-content;
    font-family: display-variable-font;
    font-variation-settings: var(--font-weight-bold);
    font-style: normal;
    font-weight: normal;
    font-size: 1.25rem;
    letter-spacing: 0.015rem;
    line-height: 100%;
    color: var(--color-theme-dark);
    text-transform: uppercase;
}
#header-title span {
    font-variation-settings: var(--font-weight-regular-alt);
    letter-spacing: -0.025rem;
}
#header-logo {
    display: flex;
    position: relative;
    height: fit-content;
    width: fit-content;
    text-decoration: none;
    align-items: center;
    /* padding: var(--spacer-min); */
    cursor: pointer;
    transition: var(--transition-time-normal-out);
    -moz-transition: var(--transition-time-normal-out);
}
#header-logo img {
    display: flex;
    position: relative;
    object-fit: contain;
    width: 35px;
    height: fit-content;
    filter: var(--filter-theme-dark);
}
header .right {
    display: inline-flex;
    position: relative;
    width: 100%;
    height: fit-content;
    flex-direction: row;
    align-items: center;
    float: right;
    right: 0;
    gap: var(--spacer-min);
}
.headerMenu {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    position: relative;
    text-decoration: none;
    text-rendering: geometricPrecision;
    width: fit-content;
    height: var(--size-button-small);
    align-content: center;
    align-items: center;
    padding: 0 var(--spacer-min);
    font-family: display-variable-font;
    font-variation-settings: var(--font-weight-medium-alt);
    font-style: normal;
    font-weight: normal;
    font-size: 0.9rem;
    letter-spacing: 0.005rem;
    line-height: 100%;
    color: var(--color-theme-dark-text);
    text-transform: uppercase;
    border: none;
    background: none;
    clip-path: 
    polygon(
      0% var(--notch-small), 
      var(--notch-small) 0%, 
      100% 0%, 
      100% 0%, 
      100% calc(100% - var(--notch-small)), 
      calc(100% - var(--notch-small)) 100%, 
      0% 100%, 
      0% 100%
    );
    transition: var(--transition-time-fast-out);
    -moz-transition: var(--transition-time-fast-out);
    cursor: pointer;
}
.headerMenu:hover {
    /* background: var(--color-black-transparent-faint); */
    background: var(--color-theme-dark-faint);
    /* background: var(--color-theme-dark); */
    /* box-shadow: 10px 10px lightblue !important; */
    /* background: var(--color-theme); */
}
.headerMenu:after {
    content: "";
    position: absolute;
    margin: 0;
    width: calc(var(--notch-small) * 4);
    height: calc(var(--notch-small) * 4);
    left: calc(0px - (var(--notch-small) * 2));
    bottom: calc(0px - (var(--notch-normal) * 2));
    transform: rotate(45deg);
    background-color: var(--color-accent);
    opacity: 0;
    transition: var(--transition-time-medium-out);
    -moz-transition: var(--transition-time-medium-out);
}
.headerMenu:hover:after {
    left: calc(0px - (var(--notch-small) * 2.5));
    bottom: calc(0px - (var(--notch-small) * 2.5));
    opacity: 1;
}
.headerMenu:first-of-type {
    margin: 0 0 0 auto;
}
.headerActive {
    font-variation-settings: var(--font-weight-medium);
    color: var(--color-white-transparent-text) !important;
    background: var(--color-accent);
}
.headerActive:hover {
    color: var(--color-white-transparent-text) !important;
    background: var(--color-accent);
}
.headerActive:after {
    background-color: var(--color-theme-dark);
}

header .dropDown {
    display: flex;
    position: relative;
    flex-direction: column;
    width: fit-content;
    height: fit-content;
    align-items: start;
    /* gap: var(--spacer-min); */
    color: var(--color-theme-dark);
    transition: var(--transition-time-normal-out);
    -moz-transition: var(--transition-time-normal-out);
    overflow: visible;
}
header .dropDown div {
    display: none;
    visibility: hidden;
    position: absolute;
    flex-direction: column;
    flex-shrink: 0;
    margin: var(--size-button-small) 0 0 0;
    right: 0;
    width: fit-content;
    height: fit-content;
    align-items: start;
    /* gap: var(--spacer-normal); */
    color: var(--color-theme-dark);
    background: var(--color-grey-faint);
    clip-path: 
    polygon(
      0% var(--notch-small), 
      var(--notch-small) 0%, 
      100% 0%, 
      100% 0%, 
      100% calc(100% - var(--notch-small)), 
      calc(100% - var(--notch-small)) 100%, 
      0% 100%, 
      0% 100%
    );
    /* transform: translate(0, 50px); */
    transition: var(--transition-time-normal-out);
    -moz-transition: var(--transition-time-normal-out);
}
header .dropDown:hover > div,
header .dropDown:focus-within > div,
header .dropDown div:hover,
header .dropDown div:focus {
  visibility: visible;
  opacity: 1;
  display: flex;
}
header button {
    height: var(--size-button-small);
    padding: 0 var(--spacer-min);
    font-family: display-variable-font;
    font-variation-settings: var(--font-weight-medium);
    font-size: 0.825rem;
    letter-spacing: 0.005rem;
    line-height: 100%;
    text-transform: uppercase;
}
header button:after {
    background-color: var(--color-accent);
}
header .dropDown a {
    display: flex;
    position: relative;
    flex-direction: row;
    text-decoration: none;
    width: fit-content;
    min-width: 96px;
    height: fit-content;
    align-items: center;
    padding: var(--spacer-normal);
    gap: var(--spacer-min);
    color: var(--color-theme-dark);
    font-family: display-variable-font;
    font-variation-settings: var(--font-weight-medium-alt);
    font-style: normal;
    font-weight: normal;
    font-size: 0.95rem;
    letter-spacing: 0.005rem;
    line-height: 100%;
    background: var(--color-grey-faint);
    cursor: pointer;
    transition: var(--transition-time-medium-out);
    -moz-transition: var(--transition-time-medium-out);
}
header .dropDown a:hover {
    color: var(--color-white-transparent-text);
    background: var(--color-accent);
}
header .dropDown img {
    display: flex;
    position: relative;
    object-fit: contain;
    width: 18px;
    height: fit-content;
    filter: var(--filter-theme-dark);
    transition: var(--transition-time-medium-out);
    -moz-transition: var(--transition-time-medium-out);
}
header .dropDown a:hover img {
    filter: invert(1);
}

#menu-toggle {
    display: flex;
    position: relative;
    flex-direction: column;
    width: fit-content;
    height: fit-content;
    margin: 0 calc(0px - var(--spacer-min)) 0 var(--spacer-min);
    padding: var(--spacer-min);
    /* align-items: end; */
    gap: 3px;
    cursor: pointer;
    transition: var(--transition-time-normal-out);
    -moz-transition: var(--transition-time-normal-out);

    display: none;
}
#menu-toggle div {
    position: relative;
    display: flex;
    flex-shrink: 0;
    flex-grow: 0;
    shape-rendering: geometricPrecision;
    height: var(--border-normal);
    width: 24px;
    /* background: var(--color-text-black); */
    background: var(--color-theme-dark);
    border-radius: 2px;
    transition: var(--transition-time-fast-out);
    -moz-transition: var(--transition-time-fast-out);
}
#menu-toggle div:nth-of-type(2) {
    margin: 0 0 0 auto;
    width: 12px;
}
#menu-toggle:hover div:nth-of-type(2) {
    width: 24px;
}


/* Main */
main {
    display: none;
    position: relative;
    flex-direction: column;
    margin: 0;
    left: 0;
    right: 0;
    padding: 0;
    height: fit-content;
    z-index: 1;
    color: var(--color-text-dark);
    background: var(--color-grey-faint);
    pointer-events: fill;

    /* display: flex; */
}
main section {
    display: flex;
    position: relative;
    flex-direction: column;
    margin: 0;
    left: 0;
    right: 0;
    height: fit-content;
}
/* main::after {
    content: "";
    position: relative;
    margin: 0;
    left: 0;
    right: 0;
    height: 100vh;
    background: none;
} */


/* Footer */
footer {
    display: none;
    position: relative;
    flex-direction: column;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: var(--spacer-large) var(--margin-body);
    gap: var(--spacer-medium);
    color: var(--color-text-white);
    background: var(--color-theme-dark);
    transition: var(--transition-time-normal-out);
    -moz-transition: var(--transition-time-normal-out);
    transition: var(--transition-onload);

    /* display: flex; */
}
footer h4 {
    margin: 0 0 0.35rem 0;
}
footer .top {
    display: flex;
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0;
    left: 0;
    right: 0;
    height: fit-content;
    gap: calc(var(--margin-body) / 2);
}
footer .top .container {
    display: flex;
    position: relative;
    flex-direction: column;
    width: 15%;
    min-width: 200px;
    height: fit-content;
    gap: var(--spacer-min);
}
footer .top .container:last-of-type {
    margin: 0 0 0 auto;
}
footer .top p {
    cursor: text;
    user-select: text;
}
footer .top .container:last-of-type a {
    display: flex;
    position: relative;
    text-decoration: none;
    text-rendering: geometricPrecision;
    width: fit-content;
    height: fit-content;
    align-content: center;
    align-items: center;
    /* margin: 0 0 calc(0px - (var(--spacer-normal) / 2)) 0; */
    font-family: display-variable-font;
    font-variation-settings: var(--font-weight-medium);
    font-style: normal;
    font-weight: normal;
    font-size: 0.925rem;
    letter-spacing: 0.005rem;
    color: var(--color-theme);
    padding: 8px 12px;
    clip-path: 
    polygon(
      0% var(--notch-small), 
      var(--notch-small) 0%, 
      100% 0%, 
      100% 0%, 
      100% calc(100% - var(--notch-small)), 
      calc(100% - var(--notch-small)) 100%, 
      0% 100%, 
      0% 100%
    );
    /* background: var(--color-theme-faint); */
    background: none;
    border: var(--border-normal) solid var(--color-theme-faint);
    border-collapse: collapse;
    transition: var(--transition-time-medium-out);
    -moz-transition: var(--transition-time-medium-out);
    cursor: pointer;
}
footer .top .container:last-of-type a:hover {
    /* background: var(--color-accent-highlight); */
    background: var(--color-theme-faint);
    border: var(--border-normal) solid var(--color-white-transparent);
}
footer .top .container:last-of-type a:after {
    content: "";
    position: absolute;
    margin: 0;
    width: calc(var(--notch-small) * 4);
    height: calc(var(--notch-small) * 4);
    right: calc(0px - (var(--notch-small) * 2));
    top: calc(0px - (var(--notch-normal) * 2));
    transform: rotate(45deg);
    background-color: var(--color-theme);
    opacity: 0;
    transition: var(--transition-time-medium-out);
    -moz-transition: var(--transition-time-medium-out);
}
footer .top .container:last-of-type a:hover:after {
    right: calc(0px - (var(--notch-small) * 2.75));
    top: calc(0px - (var(--notch-small) * 2.75));
    opacity: 1;
}
footer .accreditations {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacer-small);
    padding: var(--spacer-normal) 0;
}
footer .accreditations h4 {
    text-align: right;
    font-size: 0.9rem;
    margin: 0 0 0.25rem 0;
}
footer .accreditations .badges {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: calc(var(--margin-body) / 2);
    align-items: center;
}
footer .accreditations .badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacer-min);
}
footer .accreditations .badge-label {
    font-size: 0.75rem;
    font-variation-settings: var(--font-weight-medium);
    color: var(--color-theme);
    margin: 0;
    text-align: center;
    opacity: 0.9;
}
footer .accreditations .badge.cyber-essentials {
    height: 132px;
    width: 132px;
}
footer .accreditations .badge.iso-badge,
footer .accreditations .badge.constructionline-badge {
    height: auto;
    width: auto;
    max-width: 200px;
}
footer .accreditations .badge.cyber-essentials {
    height: 132px;
    width: 132px;
}
footer .accreditations .badge.cyber-essentials iframe {
    width: 132px !important;
    height: 132px !important;
    max-width: 132px;
    max-height: 132px;
}
footer .accreditations .badge.iso-badge {
    transition: var(--transition-time-fast-out);
    -moz-transition: var(--transition-time-fast-out);
    cursor: pointer;
}
footer .accreditations .badge.iso-badge:hover {
    opacity: 0.8;
    transform: scale(1.02);
}
footer .accreditations .badge.constructionline-badge a {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-time-fast-out);
    -moz-transition: var(--transition-time-fast-out);
}
footer .accreditations .badge.constructionline-badge a:hover {
    opacity: 0.8;
    transform: scale(1.02);
}
footer .accreditations .badge.constructionline-badge img {
    max-width: 180px;
    height: auto;
    object-fit: contain;
}
footer .accreditations .badge.iso-badge .certificatebyqms {
    max-width: 180px;
    height: auto;
}
footer .accreditations .badge.iso-badge .certificatebyqms img {
    max-width: 180px !important;
    height: auto !important;
    width: auto !important;
}
footer .bottom {
    display: flex;
    flex-direction: row;
    position: relative;
    margin: 0;
    left: 0;
    right: 0;
    height: fit-content;
    gap: calc(var(--margin-body) / 2);
}
footer .bottom a {
    display: inline-block;
    position: relative;
    text-decoration: none;
    font-family: sans-serif-variable-font;
    font-variation-settings: var(--font-weight-medium);
    transition: var(--transition-time-fast-out);
    -moz-transition: var(--transition-time-fast-out);
    cursor: pointer;
}
footer .bottom p {
    font-variation-settings: var(--font-weight-regular);
}
footer .bottom .left {
    display: flex;
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    width: fit-content;
    height: fit-content;
    gap: calc(var(--margin-body) / 2);
    opacity: 0.55;
}
footer .bottom .left a {
    color: var(--color-text-white);
}
footer .bottom .right {
    display: flex;
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 0 0 auto;
    width: fit-content;
    min-width: calc(200px + (var(--border-normal) * 2));
    height: fit-content;
    gap: calc(var(--margin-body) / 2);
}
footer .bottom .right a {
    color: var(--color-theme);
}
footer .bottom .right a:hover {
    /* color: var(--color-theme-light); */
    text-decoration: underline;
}


/* Bottom Actions */
#bottom-actions {
    display: flex;
    position: fixed;
    flex-direction: row;
    right: var(--margin-body);
    bottom: calc(var(--margin-body) / 2);
    width: fit-content;
    height: fit-content;
    align-items: center;
    gap: var(--spacer-min);
    transition: var(--transition-time-normal-out);
    -moz-transition: var(--transition-time-normal-out);
    z-index: 49;
}
#bottom-action-contact {
    display: flex;
    position: relative;
    flex-direction: row;
    width: fit-content;
    height: 48px;
    padding: 0 20px;
    align-items: center;
    gap: var(--spacer-min);
    color: var(--color-theme-dark);
    background: #f1f1f1ad;
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: var(--border-small) solid var(--color-theme-dark-faint);
    border-radius: var(--corner-radius-rounded);
    transition: var(--transition-time-fast-out);
    -moz-transition: var(--transition-time-fast-out);

    display: none;
}
#bottom-action-contact:hover {
    background: #f6f6f6e7;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}
#bottom-action-contact div {
    display: flex;
    position: relative;
    flex-direction: row;
    width: fit-content;
    height: fit-content;
    align-items: center;
    gap: 8px;
    color: var(--color-theme-dark);
    cursor: pointer;
    transition: var(--transition-time-normal-out);
    -moz-transition: var(--transition-time-normal-out);
}
#bottom-action-contact p {
    display: inline-block;
    position: relative;
    text-decoration: none;
    font-family: sans-serif-variable-font;
    font-variation-settings: var(--font-weight-semi-bold);
    font-size: 0.875rem;
    letter-spacing: -0.005rem;
    transition: var(--transition-time-fast-out);
    -moz-transition: var(--transition-time-fast-out);
    /* z-index: 52; */
}
#bottom-action-contact:hover div {
    display: none;
}
#bottom-action-contact a {
    display: none;
    position: relative;
    flex-direction: row;
    text-decoration: none;
    width: fit-content;
    height: fit-content;
    align-items: center;
    gap: 6px;
    color: var(--color-theme-dark);
    font-family: sans-serif-variable-font;
    font-variation-settings: var(--font-weight-semi-bold);
    font-size: 0.875rem;
    letter-spacing: -0.005rem;
    cursor: pointer;
    transition: var(--transition-time-medium-out);
    -moz-transition: var(--transition-time-medium-out);
}
/* #bottom-action-contact a:hover {
    color: var(--color-theme);
} */
#bottom-action-contact:hover a {
    display: flex;
}
#bottom-action-email:after {
    content: "";
    position: relative;
    margin: 0 2px 0 5px;
    width: var(--border-normal);
    height: 16px;
    background-color: var(--color-theme-dark);
    opacity: 0.15;
    transition: var(--transition-time-medium-out);
    -moz-transition: var(--transition-time-medium-out);
}
#bottom-action-contact img {
    display: flex;
    position: relative;
    object-fit: contain;
    width: 17px;
    height: fit-content;
    filter: var(--filter-theme-dark);
    transition: var(--transition-time-medium-out);
    -moz-transition: var(--transition-time-medium-out);
}
#bottom-action-contact:hover a:hover img {
    filter: var(--filter-theme-dark);
}
#bottom-action-email img {
    width: 19px;
}
#bottom-action-call img {
    width: 18.5px;
}
#bottom-action-scroll-top {
    display: flex;
    position: relative;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    width: var(--size-button-normal);
    height: var(--size-button-normal);
    /* background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: 32px;
    backdrop-filter: 32px; */
    background: var(--color-grey-faint);
    border-radius: var(--corner-radius-rounded);
    border: var(--border-small) solid var(--color-black-transparent-lighter);
    cursor: pointer;
    transition: var(--transition-time-normal-out);
    -moz-transition: var(--transition-time-normal-out);

    display: none;
}
/* #bottom-action-scroll-top:hover {
    background: var(--color-theme);
} */
#bottom-action-scroll-top img {
    display: flex;
    position: relative;
    object-fit: contain;
    margin: auto;
    width: 16px;
    height: fit-content;
    filter: var(--filter-theme-dark);
}


/* Background Tint */
#background-tint {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(14, 33, 28, 0.65);
    cursor: pointer;
    z-index: 50;
    pointer-events: all;

    /* display: flex; */
}


/* Popup Menu */
#nav-menu {
    display: none;
    position: fixed;
    flex-direction: column;
    top: 0;
    right: 0;
    margin: 0;
    /* width: calc(100vw - (var(--margin-body) * 2)); */
    width: fit-content;
    height: calc(var(--size-window-height) - (var(--margin-body) * 2));
    padding: var(--margin-body) var(--margin-body);
    background: var(--color-theme-dark);
    pointer-events: fill;
    z-index: 75;

    /* display: flex; */
}
#nav-menu-dismiss {
    display: flex;
    position: absolute;
    top: 12px;
    right: calc(var(--margin-body) - 22px);
    width: calc(var(--size-button-normal) - (var(--border-small) * 2));
    height: calc(var(--size-button-normal) - (var(--border-small) * 2));
    background: var(--color-white-transparent-faint);
    border: var(--border-small) solid var(--color-white-transparent-lighter);
    border-radius: var(--corner-radius-rounded);
    cursor: pointer;
    transition: var(--transition-time-normal-out);
    -moz-transition: var(--transition-time-normal-out);
}
#nav-menu-dismiss img {
    display: flex;
    position: relative;
    margin: auto;
    object-fit: contain;
    width: 14px;
    height: fit-content;
    filter: var(--filter-grey-faint);
    transition: var(--transition-time-medium-out);
    -moz-transition: var(--transition-time-medium-out);
}
#nav-menu-dismiss:hover {
    background: var(--color-accent-faint);
}
#nav-menu .middle {
    display: flex;
    position: relative;
    flex-direction: column;
    /* align-items: end; */
    width: fit-content;
    height: fit-content;
    margin: auto 0;
    padding: 0 calc(var(--margin-body) / 2) 0 0;
    gap: var(--spacer-min);
    /* padding: 0 calc(var(--margin-body) / 6); */
}
#nav-menu a {
    display: flex;
    position: relative;
    text-decoration: none;
    text-rendering: geometricPrecision;
    width: fit-content;
    height: fit-content;
    text-align: start;
    /* padding: 2px 0; */
    font-family: display-variable-font;
    font-variation-settings: var(--font-weight-regular-alt);
    font-style: normal;
    font-weight: normal;
    font-size: 1.5rem;
    letter-spacing: 0rem;
    color: var(--color-text-white);
    line-height: 100%;
    text-transform: uppercase;
    transition: var(--transition-time-normal-out);
    -moz-transition: var(--transition-time-normal-out);
}
#nav-menu a:hover {
    color: var(--color-theme);
}
.popupMenuActive {
    font-variation-settings: var(--font-weight-regular-alt);
    color: var(--color-theme) !important;
}


/* Contact */
#popup-contact {
    display: fixed;
    position: absolute;
    flex-direction: column;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 25vw 0;
    color: var(--color-text-dark);
    background: var(--color-grey-lighter);
    gap: 16px;
    z-index: 98;
    display: none;
}
#form {
    display: flex;
    position: relative;
    flex-direction: column;
    left: 0;
    right: 0;
    width: 100%;
    height: fit-content;
    margin: auto;
    gap: 12px;
}
#form .textHeading {
    margin: 0 auto 12px auto;
    text-align: center;
    justify-self: center;
    color: var(--color-text-black);
}
#form input {
    left: 0;
    right: 0;
    margin: 0;
}
#form div {
    display: grid;
    position: relative;
    left: 0;
    right: 0;
    height: fit-content;
    grid-template-columns: 1fr 1fr;
}
#form div input {
    width: 100%;
    margin: unset;
    left: 0;
    right: 0;
}
#message {
    min-height: 80px;
}
#form .button {
    width: unset;
    margin: 0 auto;
    align-self: center;
    justify-self: center;
}


/* Page Transition */
#page-transition {
    display: none;
    position: fixed;
    flex-direction: column;
    top: 0;
    left: 0;
    gap: 0;
    width: 100vw;
    height: 100vh;
    background: var(--color-grey-faint);
    pointer-events: none;
    z-index: 99;
    pointer-events: fill;
}
#page-transition img {
    display: flex;
    position: relative;
    margin: auto;
    object-fit: contain;
    width: 48px;
    height: fit-content;
    filter: var(--filter-theme-dark);
}


/* Page Loader */
#page-loader {
    display: none;
    position: fixed;
    flex-direction: column;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: var(--color-theme-dark);
    pointer-events: none;
    z-index: 100;
}
#page-loader .container {
    display: flex;
    position: relative;
    flex-direction: column;
    width: fit-content;
    height: fit-content;
    margin: auto;
    align-content: center;
    align-items: center;
    gap: 16px;
}
#page-loader-vector {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    position: relative;
    width: 32px;
    height: 32px;
    border: var(--border-medium) solid var(--color-theme);
    border-radius: var(--corner-radius-rounded);
    overflow: visible;
}
#page-loader-vector div {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--color-theme-dark);
    border: var(--border-medium) solid var(--color-theme);
    border-radius: var(--corner-radius-rounded);
}
#page-loader-vector div:nth-child(1) {
    left: -6px;
    top: 50%;
    transform: translate(0, -50%);
}
#page-loader-vector div:nth-child(2) {
    right: -6px;
    top: 50%;
    transform: translate(0, -50%);
}
#page-loader-vector div:nth-child(3) {
    top: -6px;
    left: 50%;
    transform: translate(-50%, 0);
}
#page-loader-vector div:nth-child(4) {
    bottom: -6px;
    left: 50%;
    transform: translate(-50%, 0);
    background: var(--color-accent);
    border: var(--border-medium) solid var(--color-accent);
}
#page-loader p {
    font-family: display-alt-variable-font;
    font-variation-settings: var(--font-weight-regular-alt);
    color: var(--color-text-white);
    letter-spacing: 0.125rem;
    text-transform: uppercase;

    display: none;
}


/* Classes */
.stickyHeader {
    position: fixed;
    /* mix-blend-mode: exclusion;
    isolation: isolate; */
    /* border-bottom: var(--border-small) solid var(--color-grey-light); */
    border-bottom: var(--border-small) solid var(--color-black-transparent-faint) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05) !important;
}
.stickyTHead {
    position: sticky;

    /* position: fixed; */
    top: var(--size-header);
}


/* Responsiveness */
@media screen and (max-width: 912px) {

    /* Variables */
    :root {
        /* Border */
        --border-small: 1.25px;
        --border-normal: 1.75px;
        --border-medium: 2px;
        /* Corner Radius */
        --corner-radius-small: 8px;
        --corner-radius-normal: 16px;
        --corner-radius-medium: 32px;
        /* Padding */
        --padding-section: 50px;
        /* Margin */
        --margin-body: 6vw;
        /* Notch */
        --notch-small: 6px;
        --notch-normal: 16px;
        /* Size */
        --size-button-small: 32px;
        --size-button-normal: 44px;
        --size-header: 68px;
        /* Spacer */
        --spacer-min: 10px;
        --spacer-normal: 16px;
    }
    
    
    /* Text */
    h1 {
        font-size: 3.5rem;
        letter-spacing: -0rem;
        line-height: 75%;
    }
    h2 {
        font-size: 3.5rem;
        letter-spacing: -0.025rem;
    }
    h3 {
        font-size: 2.25rem;
        letter-spacing: -0.015rem;
    }
    h4 {
        font-variation-settings: var(--font-weight-medium-alt);
        font-size: 1.35rem;
        letter-spacing: 0.002rem;
        line-height: 130%;
    }
    h5 {
        font-size: 1.05rem;
        line-height: 130%;
        letter-spacing: -0.005rem;
    }
    p {
        font-size: 1.05rem;
        line-height: 130%;
    }
    ul, ol {
        font-size: 1.05rem;
        line-height: 130%;
    }


    .caption {
        font-size: 0.85rem;
        line-height: 135%;
        letter-spacing: -0.001rem;
    }
    
    button {
        font-variation-settings: var(--font-weight-medium);
        font-size: 0.95rem;
        letter-spacing: 0.008rem;
        padding: 12px var(--margin-body);
    }
    .separator div:nth-child(1) {
        width: 24px;
        transform: rotate(45deg) translate(-12px, 0);
        margin: 0 -12px 0 8px;
    }


    /* Header */
    header .left {
        display: none;
    }
    #header-logo img {
        width: 34px;
    }
    header .right {
        width: fit-content;
        margin: 0 0 0 auto;
        gap: 0;
    }
    .headerMenu {
        font-variation-settings: var(--font-weight-medium-alt);
        font-size: 0.925rem;
        letter-spacing: 0.003rem;
        padding: 6px 10px 5.5px 10px;

        display: none !important;
    }
    .headerMenu:first-of-type {
        margin: 0 0 0 auto;
    }
    #header-home {
        display: none;
    }
    .headerActive {
        display: none;
    }
    header button {
        font-variation-settings: var(--font-weight-medium-alt);
        font-size: 0.825rem;
        letter-spacing: 0.005rem;
    }
    #menu-toggle {
        display: flex;
        gap: 3px;
    }
    #menu-toggle div {
        width: 24px;
    }
    #menu-toggle div:nth-of-type(2) {
        width: 12px;
    }
    #menu-toggle:hover div:nth-of-type(2) {
        width: 24px;
    }


    /* Footer */
    footer {
        gap: var(--margin-body);
    }
    footer h4 {
        margin: 0 0 0.35rem 0;
    }
    footer .top {
        display: grid;
        flex-wrap: unset;
        grid-template-columns: 1fr, 1fr;
        grid-auto-rows: auto;
        gap: var(--margin-body);
    }
    footer .top .container {
        width: 100%;
        min-width: unset;
        gap: var(--spacer-min);
    }
    footer .top .container:last-of-type {
        margin: 0;
    }
    footer .top .container:last-of-type a {
        font-size: 1rem;
        letter-spacing: 0.004rem;
        padding: 10px 14px;
    }
    footer .accreditations {
        align-items: center;
    }
    footer .accreditations h4 {
        text-align: center;
        font-size: 0.85rem;
    }
    footer .accreditations .badges {
        justify-content: center;
        gap: var(--spacer-normal);
        flex-direction: column;
    }
    footer .accreditations .badge-label {
        font-size: 0.7rem;
    }
    footer .accreditations .badge.cyber-essentials {
        height: 110px;
        width: 110px;
    }
    footer .accreditations .badge.iso-badge,
    footer .accreditations .badge.constructionline-badge {
        max-width: 160px;
    }
    footer .accreditations .badge.cyber-essentials iframe {
        width: 110px !important;
        height: 110px !important;
        max-width: 110px;
        max-height: 110px;
    }
    footer .accreditations .badge.constructionline-badge img {
        max-width: 150px !important;
    }
    footer .accreditations .badge.iso-badge .certificatebyqms,
    footer .accreditations .badge.iso-badge .certificatebyqms img {
        max-width: 150px !important;
    }
    footer .bottom {
        flex-direction: column-reverse;
        gap: calc(var(--margin-body) / 2);
    }
    footer .bottom .left {
        gap: calc(var(--margin-body) / 2);
    }
    footer .bottom .right {
        margin: 0;
        min-width: unset;
        gap: calc(var(--margin-body) / 2);
    }
    
    
    /* Bottom Actions */
    #bottom-actions {
        bottom: var(--margin-body);
        gap: var(--spacer-min);
    }
    #bottom-action-contact {
        height: 50px;
        padding: 0 20px;
        gap: var(--spacer-min);
    }
    #bottom-action-contact div {
        gap: 8px;
    }
    #bottom-action-contact p {
        font-size: 0.95rem;

        display: none;
    }
    #bottom-action-contact a {
        gap: 6px;
        font-size: 0.95rem;
    }
    #bottom-action-email:after {
        margin: 0 2px 0 5px;
        height: 16px;
    }
    #bottom-action-contact img {
        width: 17px;
    }
    #bottom-action-email img {
        width: 19px;
    }
    #bottom-action-call img {
        width: 19px;
    }
    #bottom-action-scroll-top {
        margin: 0;
    }
    #bottom-action-scroll-top img {
        width: 18px;
    }
    
    
    /* Popup Menu */
    #nav-menu {
        width: calc(100vw - (var(--margin-body) * 2));
        height: calc(100vh - (var(--margin-body) * 2));
        padding: var(--margin-body);
    }
    #nav-menu-dismiss {
        top: var(--margin-body);
        right: var(--margin-body);
    }
    #nav-menu-dismiss img {
        width: 16px;
    }
    #nav-menu .middle {
        padding: 0 calc(var(--margin-body) / 2);
        gap: var(--spacer-normal);
    }
    #nav-menu a {
        font-size: 1.5rem;
        letter-spacing: 0.002rem;
    }
    
    
    /* Page Transition */
    #page-transition img {
        width: 48px;
    }
    
    
    /* Page Loader */
    #page-loader .container {
        gap: var(--margin-body);
    }
    /* #page-loader-vector {
        width: 28px;
        height: 28px;
    }
    #page-loader-vector div {
        width: 8px;
        height: 8px;
    }
    #page-loader-vector div:nth-child(1) {
        left: -5px;
    }
    #page-loader-vector div:nth-child(2) {
        right: -5px;
    }
    #page-loader-vector div:nth-child(3) {
        top: -5px;
    }
    #page-loader-vector div:nth-child(4) {
        bottom: -5px;
    } */
    #page-loader p {
        letter-spacing: 0.1rem;
    }
}

@media screen and (max-width: 560px) {
    /* Footer */
    footer {
        padding: calc(var(--margin-body) * 2) var(--margin-body);
        gap: calc(var(--margin-body) * 2);
    }
    footer .top {
        grid-template-columns: 1fr;
        gap: calc(var(--margin-body) * 2);
    }
    footer .bottom {
        grid-template-columns: 1fr;
        gap: var(--margin-body);
    }
    
    /* Bottom Actions */
    #bottom-actions {
        bottom: var(--margin-body);
    }
    
}


/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    body {
        scroll-behavior: auto;
    }
}