/*
Theme Name: Build Effects Theme
Author: Earthcore.Services
Version: 1.0
*/

@font-face {
  font-family: 'Delight';
  src: url('assets/webfonts/Delight-Light.woff2') format('woff2'),
       url('assets/webfonts/Delight-Light.woff')  format('woff'),
       url('assets/webfonts/Delight-Light.ttf')   format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap; /* recommended for performance */
}
@font-face {
  font-family: 'Delight';
  src: url('assets/webfonts/Delight-Regular.woff2') format('woff2'),
       url('assets/webfonts/Delight-Regular.woff')  format('woff'),
       url('assets/webfonts/Delight-Regular.ttf')   format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* recommended for performance */
}
@font-face {
  font-family: 'Delight';
  src: url('assets/webfonts/Delight-Medium.woff2') format('woff2'),
       url('assets/webfonts/Delight-Medium.woff')  format('woff'),
       url('assets/webfonts/Delight-Medium.ttf')   format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap; /* recommended for performance */
}

:root {
    --spacing: 20px;
    --spacing_small: 10px;
    --spacing_medium: 25px;
}

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

body {
    margin: 0;
    color: white;
    background-color: black;

    font-family: "Delight", Helvetica, Arial, sans-serif;
    font-size: 14px;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3 {
  margin: 0;
}
h1, .h1 {
  font-size: clamp(24px, 24px + 0.9115vw, 38px);
  font-weight: 300;
  line-height: 1;
}
h2 {
  font-size: clamp(16px, 16px + 0.5208vw, 24px);
  font-weight: 400;
  line-height: 1.1;
}
h3 {
  font-size: clamp(14px, 14px + 0.2604vw, 18px);
  font-weight: 400;
  line-height: 1.4;
}
[data-fontstyle="body_large"] {
  font-size: clamp(14px, 14px + 0.2604vw, 18px);
  font-weight: 400;
  line-height: 1.4;
}
[data-fontstyle="body"] {
  font-size: clamp(12px, 12px + 0.1302vw, 14px);
  font-weight: 500;
  line-height: 1.5;
}
[data-fontstyle="body_small"] {
  font-size: clamp(10px, 10px + 0.1302vw, 12px);
  font-weight: 500;
  line-height: 1.25;
}
[data-fontstyle="body_small_compact"] {
  font-size: clamp(10px, 10px + 0.1302vw, 12px);
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 1;
  text-transform: uppercase;
}
[data-fontstyle="body_small_alternate"] {
  font-size: clamp(10px, 10px + 0.1302vw, 12px);
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1.2;
  text-transform: uppercase;
}
[data-fontstyle="label"] {
  font-size: clamp(10px, 10px + 0.1302vw, 12px);
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1.25;
  text-transform: uppercase;
}
[data-fontstyle="value"] {
  font-size: clamp(10px, 10px + 0.1302vw, 12px);
  font-weight: 500;
  line-height: 1.25;
}

p:first-child {
  margin-top: 0;
}
p:last-child {
  margin-bottom: 0;
}

a {
  text-decoration: none;
  color: inherit;
}
a[data-button="back"] {
    display: inline-flex;
    flex-direction: row;
    grid-column-gap: var(--spacing_small);
    align-items: center;
}
a[data-button="back"] span.arrow {}
a[data-button="back"] span.arrow img {
    max-width: 10px;
}
a[data-button="back"] span.label {}

a[data-button="link"] {
    display: inline-flex;
    flex-direction: row;
    grid-column-gap: var(--spacing_small);
    align-items: center;
}
a[data-button="link"] span.arrow {}
a[data-button="link"] span.arrow img {
    max-width: 10px;
}
a[data-button="link"] span.label {}

img.ri,
video.ri {
  width: 100%;
  height: auto;
  display: block;
}
.media img,
.media video {
  background-color: #1C1C1C;
}
img.arrow {
  width: 100%;
  height: clamp(18px, 18px + 0.3906vw, 24px);
  max-width: clamp(14px, 14px + 0.3906vw, 20px);
  display: block;
}

.grid {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 12 equal-width columns */
  grid-template-rows: auto;
  grid-column-gap: var(--spacing);
  grid-row-gap: var(--spacing);
}

/* grid */
#grid {
  position: fixed;
  inset: 0;
  padding: 0 var(--spacing);

  pointer-events: none;
  user-select: none;

  z-index: 9999;

  visibility: hidden;
}
#grid.visible {
  visibility: visible;
}
#grid .grid_item {
  background-color: #ff0000;
  opacity: 0.15;
}

header {
  position: fixed;
  inset: 0 0 auto var(--spacing_small);
  z-index: 1;

  display: flex;

  pointer-events: none;
  user-select: none;
}
@media screen and (min-width: 1024px) {
    header {
        inset: var(--spacing) var(--spacing) auto var(--spacing);

        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        grid-column-gap: var(--spacing);
        align-items: flex-start;
    }
}
@media screen and (min-width: 1024px) {
    header .logomark {
        grid-column-start: 1;
        grid-column-end: span 3;
    }
}
header .logomark a {
    pointer-events: all;

    display: inline-flex;
}
header .logomark a .logo-scene {
    position: relative;
    width: 55px;
    height: 55px;
    perspective: 800px;
}

header .logomark a .logo-scene .logo-cube {
    position: relative;
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;
    cursor: pointer;
}

/* faces */
header .logomark a .logo-scene .logo-cube .face {
    position: absolute;
    width: 55px;
    height: 55px;
}

header .logomark a .logo-scene .logo-cube .face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* cube faces positions */
header .logomark a .logo-scene .logo-cube .front {
    transform: rotateY(0deg) translateZ(27.5px);
}

header .logomark a .logo-scene .logo-cube .back {
    transform: rotateY(180deg) translateZ(27.5px);
}

header .logomark a .logo-scene .logo-cube .right {
    transform: rotateY(90deg) translateZ(27.5px);
}

header .logomark a .logo-scene .logo-cube .left {
    transform: rotateY(-90deg) translateZ(27.5px);
}

header .logomark a .logo-scene .logo-cube .top {
    transform: rotateX(90deg) translateZ(27.5px);
}

header .logomark a .logo-scene .logo-cube .bottom {
    transform: rotateX(-90deg) translateZ(27.5px);
}

header .navivation {
    flex: 1;

    pointer-events: all;
}
@media screen and (min-width: 1024px) {
    header .navivation {
        grid-column-start: 11;
        grid-column-end: span 2;
    }
}
header .navivation .navivation_header {
    height: 55px;
    padding: var(--spacing_small);
    
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(20px);

    display: flex;
    justify-content: space-between;
    align-items: center;
}
@media screen and (min-width: 1024px) {
    header .navivation .navivation_header {
        background-color: white;
    }
}
header .navivation_header .logotype {
    font-size: clamp(14px, 14px + 0.2604vw, 18px);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;

    color: white;
}
@media screen and (min-width: 1024px) {
    header .navivation_header .logotype {
        color: black;
    }
}
@media screen and (min-width: 1024px) {
    header .navivation_header .menu_toggle {
        display: none;
    }
}
header .navivation_header .menu_toggle a.menu_toggle_button {
    position: relative;
    height: 44px;
    padding: 0 var(--spacing_small);

    display: flex;
    align-items: center;
}
header .navivation_header .menu_toggle a.menu_toggle_button .lines {
    position: relative;
    width: 20px;
    height: 11px;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
header .navivation_header .menu_toggle a.menu_toggle_button .lines .line {
    position: relative;
    width: 20px;
    height: 1px;

    background-color: white;

    transition: transform 200ms ease;
}
@media screen and (min-width: 1024px) {
    header .navivation_header .menu_toggle a.menu_toggle_button .lines .line {
        background-color: black;
    }
}
body.show_menu header .navivation_header .menu_toggle a.menu_toggle_button .lines .line:nth-child(1) {
    transform: translate3d(-50%, 0, 0);

    transition: transform 200ms cubic-bezier(0.25, 1, 0.5, 1);
}
body.show_menu header .navivation_header .menu_toggle a.menu_toggle_button .lines .line:nth-child(3) {
    transform: translate3d(50%, 0, 0);

    transition: transform 200ms cubic-bezier(0.25, 1, 0.5, 1);
}

header .navivation_menu {
    margin-right: var(--spacing);
    color: black;
    background-color: white;

    /* fully hidden (height = 0) */
    clip-path: inset(0 0 100% 0);
    overflow: hidden;
    transition: clip-path 400ms ease;

    height: 0;

}
body.show_menu header .navivation_menu {
    /* fully visible */
    clip-path: inset(0 0 0 0);
    transition: clip-path 200ms cubic-bezier(0.25, 1, 0.5, 1);

    height: auto;
}
@media screen and (min-width: 1024px) {
    header .navivation_menu {
        margin-right: unset;
        clip-path: unset;
        height: auto;
    }
}
header .navivation_menu ul {
    margin: 0;
    padding: 0;

    list-style: none;

    display: flex;
    flex-direction: column;
    grid-row-gap: 0px;
}
header .navivation_menu > ul {
    padding: calc(0.5 * var(--spacing_small)) var(--spacing_small);

    transform: translate3d(0, var(--spacing),  0);

    transition: transform 200ms ease 400ms;
}
body.show_menu header .navivation_menu > ul {
    transform: translate3d(0, 0,  0);

    transition: transform 600ms cubic-bezier(0.25, 1, 0.5, 1);
}
@media screen and (min-width: 1024px) {
    header .navivation_menu > ul {
        transform: translate3d(0, 0,  0);
    }
}
header .navivation_menu ul li a {
    position: relative;
    padding: 3px 0;

    display: block;
}
header .navivation_menu ul li a:hover,
header .navivation_menu ul li.current-menu-item > a,
header .navivation_menu ul li.current-menu-parent > a,
header .navivation_menu ul li.current-menu-parent ul.sub-menu li.current-menu-item a {
    color: white;
}
header .navivation_menu ul li a:before {
    content: '';

    position: absolute;
    inset: 0 calc(-0.5 * var(--spacing_small));

    background-color: black;

    pointer-events: none;
    user-select: none;

    opacity: 0;

    z-index: -1;

    transition: opacity 100ms ease;
}
header .navivation_menu ul li a:hover:before,
header .navivation_menu ul li.current-menu-item > a:before,
header .navivation_menu ul li.current-menu-parent > a:before,
header .navivation_menu ul li.current-menu-parent ul.sub-menu li.current-menu-item a:before {
    opacity: 1;

    transition: opacity 200ms ease;
}
header .navivation_menu ul.sub-menu {
    display: none;
}
header .navivation_menu ul.sub-menu.is-open,
header .navivation_menu ul li.current-menu-parent ul.sub-menu {
    display: block;
}
header .navivation_menu ul.sub-menu li a {
    padding: 3px 0 3px calc(0.5 * var(--spacing_small));
}
@media screen and (min-width: 1280px) {
    header .navivation_menu ul.sub-menu li a {
        padding: 3px 0 3px var(--spacing);
    }
}

#controlcenter {
    position: fixed;
    inset: auto 0 0 0;

    padding: var(--spacing);

    z-index: 1;

    display: none;

    user-select: none;
    pointer-events: none;
}
@media screen and (min-width: 1024px) {
    #controlcenter {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        grid-column-gap: var(--spacing);
        align-items: flex-start;
    }
}
#controlcenter .heatmap_container {
    position: relative;

    grid-column-start: 11;
    grid-column-end: span 2;

    aspect-ratio: 1/1;

    background-color: #1C1C1C;
    background-color: transparent;
}
#controlcenter .heatmap_container canvas {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
}
#controlcenter .heatmap_container .content {
    position: absolute;
    inset: var(--spacing_small);
    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    grid-row-gap: var(--spacing_small);
}
#controlcenter .heatmap_container .content .row {
    display: flex;
    flex-direction: row;
    grid-column-gap: var(--spacing_small);
    justify-content: space-between;
}
#controlcenter .heatmap_container .content .row .label {
    color: #606060;
}
#controlcenter .heatmap_container .content .row .value {
    text-align: right;
}

.blink {
    animation: blink 1s steps(1) infinite;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

section.backbutton {
    margin: calc(8 * var(--spacing)) 0;
    padding: 0 var(--spacing);
}
@media screen and (min-width: 768px) {
    section.backbutton {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        grid-column-gap: var(--spacing);
        align-items: flex-start;
    }
}
@media screen and (min-width: 768px) {
    section.backbutton .button {
        grid-column-start: 4;
        grid-column-end: span 7;
    }
}
@media screen and (min-width: 1024px) {
    section.backbutton .button {
        grid-column-start: 4;
        grid-column-end: span 3;
    }
}


section.text_link {
    margin: var(--spacing) 0 calc(8 * var(--spacing)) 0;
    padding: 0 var(--spacing);
}
@media screen and (min-width: 768px) {
    section.text_link {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        grid-column-gap: var(--spacing);
        align-items: flex-start;
    }
}
@media screen and (min-width: 768px) {
    section.text_link .button {
        grid-column-start: 4;
        grid-column-end: span 7;
    }
}
@media screen and (min-width: 1024px) {
    section.text_link .button {
        grid-column-start: 4;
        grid-column-end: span 3;
    }
}


section.image_slideshow {
    margin: calc(8 * var(--spacing)) 0;
    padding: 0 var(--spacing);

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    grid-column-gap: var(--spacing);
    grid-row-gap: var(--spacing);
}
@media screen and (min-width: 768px) {
    section.image_slideshow {}
}
section.image_slideshow .subheading {
    grid-row-start: 1;
    grid-column-start: 5;
    grid-column-end: span 8;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
@media screen and (min-width: 768px) {
    section.image_slideshow .subheading {
        grid-column-start: 1;
        grid-column-end: span 3;

        position: sticky;
        top: calc(4 * var(--spacing));
    }
}
section.image_slideshow .subheading span.arrow {
    display: block;
}
section.image_slideshow .subheading span.arrow img {
    max-width: 20px;
}
section.image_slideshow .heading {
    grid-row-start: 2;
    grid-column-start: 5;
    grid-column-end: span 8;

    text-wrap: balance;
}
@media screen and (min-width: 768px) {
    section.image_slideshow .heading {
        grid-row-start: 1;
        grid-column-start: 4;
        grid-column-end: span 5;
    }
}
section.image_slideshow .media {
    grid-row-start: 3;
    grid-column-start: 5;
    grid-column-end: span 8;

    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* parent is square */
    overflow: hidden;
}
@media screen and (min-width: 768px) {
    section.image_slideshow .media {
        grid-row-start: 2;
        grid-column-start: 4;
        grid-column-end: span 4;
    }
}
section.image_slideshow .media .media_track {
    display: flex; /* horizontal layout */
    animation: scroll 6s linear infinite; /* adjust duration for speed */
}
section.image_slideshow .media .media_track > * {
    display: block;
    flex: 0 0 100%; /* each item takes full width of wrapper */
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
section.image_slideshow .media .media_track img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
section.image_slideshow .media_caption {
    grid-row-start: 4;
    grid-column-start: 5;
    grid-column-end: span 8;

    color: #606060;
    text-wrap: balance;
}
@media screen and (min-width: 768px) {
    section.image_slideshow .media_caption {
        grid-row-start: 3;
        grid-column-start: 4;
        grid-column-end: span 4;
    }
}


section.page_link {
    margin: calc(8 * var(--spacing)) 0;
    padding: 0 var(--spacing);

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    grid-column-gap: var(--spacing);
    grid-row-gap: var(--spacing);
}
@media screen and (min-width: 768px) {
    section.page_link {
        grid-row-gap: calc(2 * var(--spacing));
    }
}
section.page_link .subheading {
    grid-row-start: 1;
    grid-column-start: 5;
    grid-column-end: span 8;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
@media screen and (min-width: 768px) {
    section.page_link .subheading {
        grid-column-start: 1;
        grid-column-end: span 3;

        position: sticky;
        top: calc(4 * var(--spacing));
    }
}
section.page_link .subheading span.arrow {
    display: none;
}
@media screen and (min-width: 768px) {
    section.page_link .subheading span.arrow {
        display: block;
    }
}
section.page_link .subheading span.arrow img {
    max-width: 20px;
}
section.page_link .heading {
    grid-row-start: 2;
    grid-column-start: 5;
    grid-column-end: span 8;

    text-wrap: balance;
}
@media screen and (min-width: 768px) {
    section.page_link .heading {
        grid-row-start: 1;
        grid-column-start: 4;
        grid-column-end: span 5;
    }
}
section.page_link .media {
    grid-row-start: 3;
    grid-column-start: 5;
    grid-column-end: span 8;

    display: flex;
    flex-direction: column;
    grid-row-gap: var(--spacing);
}
@media screen and (min-width: 768px) {
    section.page_link .media {
        grid-row-start: 2;
        grid-column-start: 4;
        grid-column-end: span 4;
    }
}
section.page_link .media img,
section.page_link .media video {
    aspect-ratio: 1/1;
    object-fit: cover;
}
section.page_link .media .media_caption {
    color: #606060;
    text-wrap: balance;
}

section.page_link_large {
    min-height: 100svh;
    padding: calc(8 * var(--spacing)) var(--spacing) var(--spacing) var(--spacing);

    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12 equal-width columns */
    grid-template-rows: auto;
    grid-column-gap: var(--spacing);
    grid-row-gap: var(--spacing);
}
@media screen and (min-width: 1024px) {
    section.page_link_large {
        padding: var(--spacing);

        grid-row-gap: unset;
        align-items: flex-end;
    }
}
section.page_link_large .media {
    grid-row-start: 3;
    grid-column-start: 1;
    grid-column-end: span 12;
}
@media screen and (min-width: 768px) {
    section.page_link_large .media {
        grid-row-start: 2;
    }
}
@media screen and (min-width: 1024px) {
    section.page_link_large .media {
        grid-row-start: 1;
        grid-column-end: span 10;
    }
}
section.page_link_large .media video,
section.page_link_large .media img {
    aspect-ratio: 3/4;
    object-fit: cover;
}
@media screen and (min-width: 1024px) {
    section.page_link_large .media video,
    section.page_link_large .media img {
        aspect-ratio: unset;
        margin-left: calc(-1 * var(--spacing));
        width: calc(100% + var(--spacing));
        height: calc(100svh - (2 * var(--spacing)));
    }
}
section.page_link_large .subheading {
    grid-row-start: 1;
    grid-column-start: 1;
    grid-column-end: span 12;

    margin-bottom: var(--spacing);

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    grid-column-gap: var(--spacing);
}
@media screen and (min-width: 768px) {
    section.page_link_large .subheading {
        grid-column-end: span 3;

        margin-bottom: unset;
    }
}
@media screen and (min-width: 1024px) {
    section.page_link_large .subheading {
        grid-row-start: 1;

        margin-bottom: var(--spacing);

        transform: translate3d(0px, -50%, 0px);

        z-index: 1;
    }
}
section.page_link_large .subheading span.arrow {
    display: none;
}
@media screen and (min-width: 768px) {
    section.page_link_large .subheading span.arrow {
        display: block;
    }
}
section.page_link_large .subheading span.arrow img {
    max-width: 20px;
}

section.page_link_large .heading {
    grid-row-start: 2;
    grid-column-start: 1;
    grid-column-end: span 12;
}
@media screen and (min-width: 768px) {
    section.page_link_large .heading {
        grid-row-start: 1;
        grid-column-start: 4;
        grid-column-end: span 6;

        display: flex;
        align-items: center;
    }
}
@media screen and (min-width: 1024px) {
    section.page_link_large .heading {
        grid-row-start: 1;
        grid-column-start: 4;
        grid-column-end: span 6;

        margin-bottom: var(--spacing);

        z-index: 1;
    }
}
section.page_link_large .heading h1 a {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    grid-column-gap: var(--spacing);
}
section.page_link_large .heading span.arrow {
    display: block;
}
@media screen and (min-width: 768px) {
    section.page_link_large .heading span.arrow {
        display: none;
    }
}
section.page_link_large .heading span.arrow img {
    max-width: 20px;
}

section.media {
    margin: calc(8 * var(--spacing)) 0;
    padding: 0 var(--spacing);

    display: flex;
    flex-direction: column;
    grid-row-gap: var(--spacing);
}
@media screen and (min-width: 512px) {
    section.media {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        grid-column-gap: var(--spacing);
        align-items: flex-start;
    }
}
@media screen and (min-width: 512px) {
    section.media .caption {
        grid-row-start: 1;
        grid-column-start: 1;
        grid-column-end: span 4;

        position: sticky;
        top: calc(4 * var(--spacing));
    }
}
@media screen and (min-width: 768px) {
    section.media .caption {
        grid-column-end: span 3;
    }
}
@media screen and (min-width: 1024px) {
    section.media .caption {
        grid-column-end: span 3;
    }
}
@media screen and (min-width: 512px) {
    section.media .media {
        grid-row-start: 1;
        grid-column-start: 5;
        grid-column-end: span 8;
    }
}
@media screen and (min-width: 768px) {
    section.media .media {
        grid-column-start: 4;
        grid-column-end: span 9;
    }
}
@media screen and (min-width: 1024px) {
    section.media .media {
        grid-column-end: span 6;
    }
}

section.definition_list {
    margin: calc(8 * var(--spacing)) 0;
    padding: 0 var(--spacing);

    display: flex;
    flex-direction: column;
    grid-row-gap: calc(2 * var(--spacing));
}
@media screen and (min-width: 512px) {
    section.definition_list {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        grid-column-gap: var(--spacing);
    }
}
section.definition_list .heading {
    text-wrap: balance;
}
@media screen and (min-width: 512px) {
    section.definition_list .heading {
        grid-row-start: 1;
        grid-column-end: span 12;
    }
}
@media screen and (min-width: 768px) {
    section.definition_list .heading {
        grid-column-start: 4;
        grid-column-end: span 7;
    }
}
@media screen and (min-width: 1024px) {
    section.definition_list .heading {
        grid-column-end: span 5;
    }
}
section.definition_list .details {
    display: flex;
    flex-direction: column;
    grid-row-gap: 30px;
}
@media screen and (min-width: 512px) {
    section.definition_list .details {
        grid-row-start: 2;
        grid-column-end: span 12;
    }
}
section.definition_list .details .detail {
    display: flex;
    flex-direction: column;
    grid-row-gap: 10px;
}
@media screen and (min-width: 512px) {
    section.definition_list .details .detail {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-column-gap: var(--spacing);
        align-items: baseline;
    }
}
@media screen and (min-width: 512px) {
    section.definition_list .details .detail .term {
        grid-column-end: span 4;
    }
}
@media screen and (min-width: 768px) {
    section.definition_list .details .detail .term {
        grid-column-end: span 3;
    }
}
@media screen and (min-width: 512px) {
    section.definition_list .details .detail .definition {
        grid-column-end: span 8;
    }
}
@media screen and (min-width: 768px) {
    section.definition_list .details .detail .definition {
        grid-column-end: span 5;
    }
}
@media screen and (min-width: 1024px) {
    section.definition_list .details .detail .definition {
        grid-column-end: span 3;
    }
}

section.link_list {
    margin: 100px 0;
    padding: 0 var(--spacing);

    display: flex;
    flex-direction: column;
    grid-row-gap: calc(2 * var(--spacing));
}
@media screen and (min-width: 512px) {
    section.link_list {
        margin: calc(8 * var(--spacing)) 0;

        grid-row-gap: calc(4 * var(--spacing));

        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: auto;
        grid-column-gap: var(--spacing);
    }
}
@media screen and (min-width: 1024px) {
    section.link_list {
        grid-template-columns: repeat(12, 1fr);
    }
}
@media screen and (min-width: 1024px) {
    section.link_list .heading {
        grid-column-start: 4;
        grid-column-end: span 6;
        grid-row-start: 1;
    }
}
section.link_list .links {
    display: flex;
    flex-direction: column;
    grid-row-gap: 10px;

    overflow-x: hidden;
}
@media screen and (min-width: 1024px) {
    section.link_list .links {
        grid-column-start: 4;
        grid-column-end: span 6;
        grid-row-start: 2;
    }
}
section.link_list .links .link a {
    position: relative;
    display: inline-block;
    color: inherit;
    text-decoration: none;

    transition: color 400ms ease;
}
section.link_list .links .link a:hover {
    color: #5a5a5a;

    transition: color 200ms ease;
}


section.text_list {
    margin: 100px 0;
    padding: 0 var(--spacing);

    display: flex;
    flex-direction: column;
    grid-row-gap: calc(2 * var(--spacing));
}
@media screen and (min-width: 512px) {
    section.text_list {
        margin: calc(8 * var(--spacing)) 0;

        grid-row-gap: calc(4 * var(--spacing));

        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: auto;
        grid-column-gap: var(--spacing);
    }
}
@media screen and (min-width: 1024px) {
    section.text_list {
        grid-template-columns: repeat(12, 1fr);
    }
}
@media screen and (min-width: 1024px) {
    section.text_list .heading {
        grid-column-start: 4;
        grid-column-end: span 6;
        grid-row-start: 1;
    }
}
section.text_list .items {
    display: flex;
    flex-direction: column;
    grid-row-gap: 10px;

    overflow-x: hidden;
}
@media screen and (min-width: 1024px) {
    section.text_list .items {
        grid-column-start: 4;
        grid-column-end: span 3;
        grid-row-start: 2;
    }
}
section.text_list .items .label {}

section.text_list .items .description {
    color: #606060;
}


section.statement {
    margin: 100px 0;
    padding: 0 var(--spacing);

    display: flex;
    flex-direction: column;
    grid-row-gap: calc(2 * var(--spacing));
}
@media screen and (min-width: 512px) {
    section.statement {
        margin: calc(8 * var(--spacing)) 0;

        grid-row-gap: calc(4 * var(--spacing));

        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: auto;
        grid-column-gap: var(--spacing);
    }
}
@media screen and (min-width: 1024px) {
    section.statement {
        grid-template-columns: repeat(12, 1fr);
    }
}
@media screen and (min-width: 1024px) {
    section.statement .heading {
        grid-column-start: 4;
        grid-column-end: span 6;
        grid-row-start: 1;

        text-wrap: balance;
    }
}
section.statement .heading a {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-color: inherit;
    text-decoration-thickness: 4%;
    text-underline-offset: 8%;
    text-underline-position: from-font;

    transition: color 400ms ease, text-decoration-color 400ms ease;
}
section.statement .heading a:hover {
    color: rgb(90, 90, 90);

    text-decoration-color: transparent;

    transition: color 200ms ease, text-decoration-color 200ms ease;
}


section.projects_list {
    min-height: 100svh;
    padding: calc(8 * var(--spacing)) var(--spacing) var(--spacing) var(--spacing);

    display: flex;
    flex-direction: column;
    grid-row-gap: calc(2 * var(--spacing));
}
@media screen and (min-width: 768px) {
    section.projects_list {
        padding-top: 50svh;

        grid-row-gap: calc(4 * var(--spacing));

        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        grid-column-gap: var(--spacing);
    }
}
@media screen and (min-width: 768px) {
    section.projects_list .heading {
        grid-column-start: 4;
        grid-column-end: span 6;
        grid-row-start: 1;
    }
}
section.projects_list .projects {
    display: flex;
    flex-direction: column;
    grid-row-gap: var(--spacing_medium);

    overflow-x: hidden;
}
@media screen and (min-width: 768px) {
    section.projects_list .projects {
        grid-column-start: 1;
        grid-column-end: span 12;
        grid-row-start: 2;
        
        grid-row-gap: calc(3 * var(--spacing));
    }
}
section.projects_list .projects .project {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    grid-column-gap: var(--spacing);
    grid-row-gap: var(--spacing_small);
}
@media screen and (min-width: 768px) {
    section.projects_list .projects .project {
        grid-row-gap: var(--spacing);
    }
}
section.projects_list .projects .project .acronym {
    grid-column-start: 1;
    grid-column-end: span 4;
    grid-row-start: 1;
}
@media screen and (min-width: 768px) {
    section.projects_list .projects .project .acronym {
        grid-column-start: 1;
        grid-column-end: span 2;
        grid-row-start: 1;
    }
}
section.projects_list .projects .project .thumbnail {
    grid-column-start: 5;
    grid-column-end: span 8;
    grid-row-start: 1;
}
@media screen and (min-width: 768px) {
    section.projects_list .projects .project .thumbnail {
        grid-column-start: 3;
        grid-column-end: span 1;
        grid-row-start: 1;
    }
}
@media screen and (min-width: 768px) {
    section.projects_list .projects .project .thumbnail .image {
        opacity: 0;

        transition: opacity 400ms ease;
    }
}
@media screen and (min-width: 768px) {
    section.projects_list .projects .project:hover .thumbnail .image {
        opacity: 1;

        transition: opacity 200ms ease;
    }
}
section.projects_list .projects .project .thumbnail .image img {
    aspect-ratio: 1/1;
    object-fit: cover;
}
section.projects_list .projects .project .content {
    grid-column-start: 5;
    grid-column-end: span 8;
    grid-row-start: 2;

    display: flex;
    flex-direction: column;
    grid-row-gap: var(--spacing_small);
}
@media screen and (min-width: 768px) {
    section.projects_list .projects .project .content {
        grid-column-start: 4;
        grid-column-end: span 6;
        grid-row-start: 1;

        grid-row-gap: calc(1 * var(--spacing));
    }
}
section.projects_list .projects .project .content .details {
    display: flex;
    flex-direction: column;
}
@media screen and (min-width: 768px) {
    section.projects_list .projects .project .content .details {
        grid-row-gap: 4px;
    }
}


section.team_members_list {
    min-height: 100svh;
    margin: calc(8 * var(--spacing)) 0;
    padding: var(--spacing);

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    grid-column-gap: var(--spacing);
    grid-row-gap: calc(2 * var(--spacing));
}
@media screen and (min-width: 768px) {
    section.team_members_list {
        grid-row-gap: calc(4 * var(--spacing));
    }
}
section.team_members_list .heading {
    grid-column-start: 5;
    grid-column-end: span 8;
    grid-row-start: 1;
}
@media screen and (min-width: 768px) {
    section.team_members_list .heading {
        grid-column-start: 4;
        grid-column-end: span 6;
        grid-row-start: 1;
    }
}
section.team_members_list .team_members {
    grid-row-start: 2;
    grid-column-start: 5;
    grid-column-end: span 8;

    display: flex;
    flex-direction: column;
    grid-row-gap: calc(2 * var(--spacing));

    overflow-x: hidden;
}
@media screen and (min-width: 768px) {
    section.team_members_list .team_members {
        grid-column-start: 1;
        grid-column-end: span 12;
        grid-row-start: 2;
        
        grid-row-gap: calc(4 * var(--spacing));
    }
}
section.team_members_list .team_members .team_member {
    display: flex;
    flex-direction: column;
    grid-row-gap: calc(0.5 * var(--spacing_small));
}
@media screen and (min-width: 768px) {
    section.team_members_list .team_members .team_member {
        grid-row-gap: var(--spacing);

        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        grid-column-gap: var(--spacing);
    }
}
@media screen and (min-width: 768px) {
    section.team_members_list .team_members .team_member .position {
        grid-column-start: 1;
        grid-column-end: span 3;
        grid-row-start: 1;

        margin-top: var(--spacing_small);
    }
}
section.team_members_list .team_members .team_member .content {
    display: flex;
    flex-direction: column;
    grid-row-gap: var(--spacing_small);
}
@media screen and (min-width: 768px) {
    section.team_members_list .team_members .team_member .content {
        grid-column-start: 4;
        grid-column-end: span 4;
        grid-row-start: 1;

        grid-row-gap: calc(1 * var(--spacing));
    }
}
@media screen and (min-width: 1024px) {
    section.team_members_list .team_members .team_member .content .image {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        grid-column-gap: var(--spacing);
    }
}
section.team_members_list .team_members .team_member .content .image img {
    aspect-ratio: 1/1;
    object-fit: cover;
}
section.team_members_list .team_members .team_member .content .details {
    display: flex;
    flex-direction: column;
}
@media screen and (min-width: 768px) {
    section.team_members_list .team_members .team_member .content .details {
        grid-row-gap: 0;
    }
}
section.team_members_list .team_members .team_member a {
    display: inline-block;
    color: inherit;
    text-decoration: none;

    transition: color 400ms ease;
}
section.team_members_list .team_members .team_member a:hover {
    color: rgb(90, 90, 90);

    transition: color 200ms ease;
}



section.bim_articles_list {
    min-height: 100svh;
    margin: 0 0 calc(8 * var(--spacing)) 0;
    padding: var(--spacing);

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    grid-column-gap: var(--spacing);
    grid-row-gap: calc(2 * var(--spacing));
}
@media screen and (min-width: 768px) {
    section.bim_articles_list {
        grid-row-gap: calc(4 * var(--spacing));
    }
}
section.bim_articles_list .bim_articles {
    grid-column-start: 5;
    grid-column-end: span 8;

    display: flex;
    flex-direction: column;
    grid-row-gap: calc(1 * var(--spacing));

    overflow-x: hidden;
}
@media screen and (min-width: 768px) {
    section.bim_articles_list .bim_articles {
        grid-column-start: 4;
        grid-column-end: span 7;
    }
}
section.bim_articles_list .bim_articles .bim_article {
    padding: var(--spacing);
    background-color: #1C1C1C;

    display: flex;
    flex-direction: column;
    grid-row-gap: calc(4 * var(--spacing));
}
@media screen and (min-width: 768px) {
    section.bim_articles_list .bim_articles .bim_article {
        grid-row-gap: calc(4 * var(--spacing));
    }
}
section.bim_articles_list .bim_articles .bim_article .top {
    display: flex;
    flex-direction: column;
    grid-row-gap: calc(1 * var(--spacing));
}
section.bim_articles_list .bim_articles .bim_article .bottom {
    display: flex;
    flex-direction: column;
    grid-row-gap: calc(1 * var(--spacing));
}
section.bim_articles_list .bim_articles .bim_article .bottom .button {
    align-self: flex-start;
    padding: calc(0.25 * var(--spacing_small)) calc(8 * var(--spacing_small)) calc(0.25 * var(--spacing_small)) calc(1 * var(--spacing_small));
    background-color: white;

    display: flex;
    align-items: center;
    grid-column-gap: calc(0.5 * var(--spacing_small));
}
section.bim_articles_list .bim_articles .bim_article .bottom .button .arrow img {
    max-width: 12px;
}
section.bim_articles_list .bim_articles .bim_article .bottom .button .label {
    color: black;
}


section.glossary_terms_list {
    margin: 0 0 calc(8 * var(--spacing)) 0;
    padding: var(--spacing);

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    grid-column-gap: var(--spacing);
    grid-row-gap: calc(2 * var(--spacing));
}
@media screen and (min-width: 768px) {
    section.glossary_terms_list {
        grid-row-gap: calc(4 * var(--spacing));
    }
}
section.glossary_terms_list .glossary_terms {
    grid-column-start: 1;
    grid-column-end: span 12;

    display: flex;
    flex-direction: column;
    grid-row-gap: calc(1 * var(--spacing));

    overflow-x: hidden;
}
@media screen and (min-width: 1024px) {
    section.glossary_terms_list .glossary_terms {
        grid-column-start: 1;
        grid-column-end: span 10;
    }
}
section.glossary_terms_list .glossary_terms .glossary_term {
    background-color: #1C1C1C;

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    grid-column-gap: var(--spacing);

    cursor: pointer;
}
@media screen and (min-width: 1024px) {
    section.glossary_terms_list .glossary_terms .glossary_term {
        grid-template-columns: repeat(10, 1fr);
    }
}
section.glossary_terms_list .glossary_terms .glossary_term .toggle {
    grid-column-start: 1;
    grid-column-end: span 2;
    grid-row-start: 1;
}
@media screen and (min-width: 1024px) {
    section.glossary_terms_list .glossary_terms .glossary_term .toggle {
        grid-column-start: 1;
        grid-column-end: span 1;
        grid-row-start: 1;
    }
}
section.glossary_terms_list .glossary_terms .glossary_term .toggle .toggle_icon {
    position: relative;

    padding: var(--spacing);

    aspect-ratio: 1/1;

    display: flex;
    justify-content: center;
    align-items: center;
}
section.glossary_terms_list .glossary_terms .glossary_term .toggle .toggle_icon .toggle_icon_line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    background-color: white;

    transition: transform 400ms ease;
}
section.glossary_terms_list .glossary_terms .glossary_term .toggle .toggle_icon .toggle_icon_line:first-child {
    width: 10px;
    height: 2px;
}
section.glossary_terms_list .glossary_terms .glossary_term .toggle .toggle_icon .toggle_icon_line:last-child {
    width: 2px;
    height: 10px;
}
section.glossary_terms_list .glossary_terms .glossary_term.show .toggle .toggle_icon .toggle_icon_line:last-child {
    transform: translate3d(-50%, -50%, 0) rotate(90deg);

    transition: transform 200ms ease;
}
section.glossary_terms_list .glossary_terms .glossary_term .glossary_term_name {
    grid-column-start: 4;
    grid-column-end: span 9;
    grid-row-start: 1;

    padding: var(--spacing) var(--spacing) var(--spacing) 0;

    display: flex;
    align-items: center;
}
@media screen and (min-width: 768) {
    section.glossary_terms_list .glossary_terms .glossary_term .glossary_term_name {
        grid-column-start: 4;
        grid-column-end: span 9;
    }
}
@media screen and (min-width: 1024px) {
    section.glossary_terms_list .glossary_terms .glossary_term .glossary_term_name {
        grid-column-start: 4;
        grid-column-end: span 7;
    }
}
section.glossary_terms_list .glossary_terms .glossary_term .glossary_term_definition {
    grid-column-start: 4;
    grid-column-end: span 9;
    grid-row-start: 2;

    padding-right: var(--spacing);
    padding-bottom: calc(2 * var(--spacing));

    display: none;
}
@media screen and (min-width: 1024px) {
    section.glossary_terms_list .glossary_terms .glossary_term .glossary_term_definition {
        grid-column-start: 4;
        grid-column-end: span 5;
    }
}
@media screen and (min-width: 1440px) {
    section.glossary_terms_list .glossary_terms .glossary_term .glossary_term_definition {
        grid-column-start: 4;
        grid-column-end: span 4;
    }
}
@media screen and (min-width: 1920px) {
    section.glossary_terms_list .glossary_terms .glossary_term .glossary_term_definition {
        grid-column-start: 4;
        grid-column-end: span 3;
    }
}
section.glossary_terms_list .glossary_terms .glossary_term.show .glossary_term_definition {
    display: block;
}


section.hero {
    min-height: 100svh;
    padding: calc(8 * var(--spacing)) var(--spacing) var(--spacing) var(--spacing);

    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12 equal-width columns */
    grid-template-rows: auto;
    grid-column-gap: var(--spacing);
    grid-row-gap: var(--spacing);
}
@media screen and (min-width: 1024px) {
    section.hero {
        padding: var(--spacing);

        grid-row-gap: calc(2 * var(--spacing));
    }
}
section.hero .media {
    grid-row-start: 3;
    grid-column-start: 1;
    grid-column-end: span 12;

    margin-bottom: var(--spacing);
}
@media screen and (min-width: 1024px) {
    section.hero .media {
        grid-row-start: 1;
        grid-column-end: span 10;

        margin-bottom: unset;
    }
}
section.hero .media video,
section.hero .media img {
    aspect-ratio: 3/4;
    object-fit: cover;
}
@media screen and (min-width: 1024px) {
    section.hero .media video,
    section.hero .media img {
        aspect-ratio: unset;
        margin-left: calc(-1 * var(--spacing));
        width: calc(100% + var(--spacing));
        height: calc(100svh - (6 * var(--spacing)));
    }
}
section.hero .subheading {
    grid-row-start: 1;
    grid-column-start: 1;
    grid-column-end: span 12;

    margin-bottom: var(--spacing);
}
@media screen and (min-width: 1024px) {
    section.hero .subheading {
        grid-row-start: 2;
        grid-column-end: span 3;

        margin-bottom: unset;

        display: flex;
        align-items: center;
    }
}
section.hero .heading {
    grid-row-start: 2;
    grid-column-start: 1;
    grid-column-end: span 12;
}
@media screen and (min-width: 1024px) {
    section.hero .heading {
        grid-row-start: 2;
        grid-column-start: 4;
        grid-column-end: span 7;
    }
}
section.hero .copy {
    grid-row-start: 4;
    grid-column-start: 1;
    grid-column-end: span 12;

    margin-bottom: var(--spacing);
}
@media screen and (min-width: 1024px) {
    section.hero .copy {
        grid-row-start: 3;
        grid-column-start: 4;
        grid-column-end: span 6;
    }
}


section.project_page_top {
    min-height: 100svh;
    padding: calc(8 * var(--spacing)) var(--spacing) var(--spacing) var(--spacing);

    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12 equal-width columns */
    grid-template-rows: auto;
    grid-column-gap: var(--spacing);
    grid-row-gap: var(--spacing);
}
@media screen and (min-width: 1024px) {
    section.project_page_top {
        padding: var(--spacing);

        grid-row-gap: calc(2 * var(--spacing));
    }
}
section.project_page_top .media {
    grid-row-start: 3;
    grid-column-start: 1;
    grid-column-end: span 12;

    margin-bottom: var(--spacing);
}
@media screen and (min-width: 1024px) {
    section.project_page_top .media {
        grid-row-start: 1;
        grid-column-end: span 10;

        margin-bottom: unset;
    }
}
section.project_page_top .media video,
section.project_page_top .media img {
    aspect-ratio: 3/4;
    object-fit: cover;
}
@media screen and (min-width: 1024px) {
    section.project_page_top .media video,
    section.project_page_top .media img {
        aspect-ratio: unset;
        margin-left: calc(-1 * var(--spacing));
        width: calc(100% + var(--spacing));
        height: calc(100svh - (6 * var(--spacing)));
    }
}
section.project_page_top .acronym {
    grid-row-start: 1;
    grid-column-start: 1;
    grid-column-end: span 12;

    margin-bottom: var(--spacing);
}
@media screen and (min-width: 1024px) {
    section.project_page_top .acronym {
        grid-row-start: 2;
        grid-column-end: span 3;

        margin-bottom: unset;

        display: flex;
        align-items: center;
    }
}
section.project_page_top .short_description {
    grid-row-start: 2;
    grid-column-start: 1;
    grid-column-end: span 12;
}
@media screen and (min-width: 1024px) {
    section.project_page_top .short_description {
        grid-row-start: 2;
        grid-column-start: 4;
        grid-column-end: span 6;

        text-wrap: balance;
    }
}
section.project_page_top .long_description {
    grid-row-start: 4;
    grid-column-start: 1;
    grid-column-end: span 12;

    margin-bottom: var(--spacing);
}
@media screen and (min-width: 1024px) {
    section.project_page_top .long_description {
        grid-row-start: 3;
        grid-column-start: 4;
        grid-column-end: span 6;
    }
}
@media screen and (min-width: 1920px) {
    section.project_page_top .long_description {
        grid-column-end: span 4;
    }
}
section.project_page_top .details {
    grid-row-start: 5;
    grid-column-start: 1;
    grid-column-end: span 12;

    display: flex;
    flex-direction: column;
    grid-column-gap: var(--spacing);
    grid-row-gap: var(--spacing);
}
@media screen and (min-width: 1024px) {
    section.project_page_top .details {
        grid-row-start: 4;
        grid-column-start: 4;
        grid-column-end: span 6;
    }
}
section.project_page_top .details .detail {
    grid-row-start: 5;
    grid-column-start: 1;
    grid-column-end: span 12;

    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12 equal-width columns */
    grid-template-rows: auto;
    grid-column-gap: var(--spacing);
    grid-row-gap: var(--spacing);
}
section.project_page_top .details .detail .term {
    grid-column-end: span 4;
}
@media screen and (min-width: 768px) {
    section.project_page_top .details .detail .term {
        grid-column-end: span 3;
    }
}
@media screen and (min-width: 1024px) {
    section.project_page_top .details .detail .term {
        grid-column-end: span 4;
    }
}
section.project_page_top .details .detail .definition {
    grid-column-end: span 8;

    text-wrap: balance;
}
@media screen and (min-width: 768px) {
    section.project_page_top .details .detail .definition {
        grid-column-end: span 5;
    }
}
@media screen and (min-width: 1024px) {
    section.project_page_top .details .detail .definition {
        grid-column-end: span 8;
    }
}

section.service_page_top {
    min-height: 100svh;
    margin: 0 0 calc(4 * var(--spacing)) 0;
    padding: calc(8 * var(--spacing)) var(--spacing) var(--spacing) var(--spacing);

    display: flex;
    flex-direction: column;
    grid-row-gap: var(--spacing);
    justify-content: flex-end;
}
@media screen and (min-width: 768px) {
    section.service_page_top {
        padding-top: 50svh;
        display: grid;
        grid-template-columns: repeat(12, 1fr); /* 12 equal-width columns */
        grid-template-rows: auto;
        grid-column-gap: var(--spacing);
        grid-row-gap: calc(4 * var(--spacing));
        align-content: space-between;
    }
}
@media screen and (min-width: 1024px) {
    section.service_page_top {
        grid-row-gap: calc(4 * var(--spacing));
    }
}
@media screen and (min-width: 1536px) {
    section.service_page_top {
        grid-row-gap: calc(6 * var(--spacing));
    }
}
@media screen and (min-width: 1920px) {
    section.service_page_top {
        grid-row-gap: calc(8 * var(--spacing));
    }
}
section.service_page_top .subheading {
    margin-bottom: var(--spacing);
}
@media screen and (min-width: 768px) {
    section.service_page_top .subheading {
        margin-bottom: 0;

        grid-column-start: 1;
        grid-column-end: span 3;
        grid-row-start: 1;

        display: flex;
        flex-direction: row;
        align-items: center;
    }
}
section.service_page_top .heading {
    display: flex;
    flex-direction: row;
    grid-column-gap: calc(2 * var(--spacing));
    text-wrap: balance;
}
@media screen and (min-width: 768px) {
    section.service_page_top .heading {
        grid-column-start: 4;
        grid-column-end: span 9;
        grid-row-start: 1;
    }
}
@media screen and (min-width: 1024px) {
    section.service_page_top .heading {
        grid-column-start: 4;
        grid-column-end: span 7;
        grid-row-start: 1;
    }
}
section.service_page_top .introduction {
    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    text-wrap: balance;
}
@media screen and (min-width: 768px) {
    section.service_page_top .introduction {
        grid-column-start: 4;
        grid-column-end: span 7;
        grid-row-start: 2;
    }
}
@media screen and (min-width: 1024px) {
    section.service_page_top .introduction {
        grid-column-start: 4;
        grid-column-end: span 5;
        grid-row-start: 2;
    }
}



section.bim_article_page_top {
    min-height: 100svh;
    padding: calc(8 * var(--spacing)) var(--spacing) var(--spacing) var(--spacing);

    display: flex;
    flex-direction: column;
    grid-row-gap: var(--spacing);
    justify-content: flex-end;
}
@media screen and (min-width: 768px) {
    section.bim_article_page_top {
        padding-top: 50svh;
        display: grid;
        grid-template-columns: repeat(12, 1fr); /* 12 equal-width columns */
        grid-template-rows: auto;
        grid-column-gap: var(--spacing);
        grid-row-gap: var(--spacing);
        align-content: space-between;
    }
}
@media screen and (min-width: 1024px) {
    section.bim_article_page_top {}
}
section.bim_article_page_top .subheading {
    margin-bottom: var(--spacing);
}
@media screen and (min-width: 768px) {
    section.bim_article_page_top .subheading {
        margin-bottom: 0;

        grid-column-start: 1;
        grid-column-end: span 3;
        grid-row-start: 1;

        display: flex;
        flex-direction: row;
        align-items: center;
    }
}
section.bim_article_page_top .heading {
    display: flex;
    flex-direction: row;
    grid-column-gap: calc(2 * var(--spacing));
    text-wrap: balance;
}
@media screen and (min-width: 768px) {
    section.bim_article_page_top .heading {
        grid-column-start: 4;
        grid-column-end: span 9;
        grid-row-start: 1;
    }
}
@media screen and (min-width: 1024px) {
    section.bim_article_page_top .heading {
        grid-column-start: 4;
        grid-column-end: span 7;
        grid-row-start: 1;
    }
}
section.bim_article_page_top .introduction {
    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    text-wrap: balance;
}
@media screen and (min-width: 768px) {
    section.bim_article_page_top .introduction {
        grid-column-start: 4;
        grid-column-end: span 7;
        grid-row-start: 2;

        display: block;
    }
}
@media screen and (min-width: 1024px) {
    section.bim_article_page_top .introduction {
        grid-column-start: 4;
        grid-column-end: span 5;
        grid-row-start: 2;
    }
}
section.bim_article_page_top .introduction p a {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-color: inherit;
    text-decoration-thickness: 5%;
    text-underline-offset: 16%;
    text-underline-position: from-font;

    transition: color 400ms ease, text-decoration-color 400ms ease;
}
section.bim_article_page_top .introduction p a:hover {
    color: rgb(90, 90, 90);

    text-decoration-color: transparent;

    transition: color 200ms ease, text-decoration-color 200ms ease;
}


section.references {
    margin: calc(8 * var(--spacing)) 0;
    padding: 0 var(--spacing);

    display: flex;
    flex-direction: column;
    grid-row-gap: calc(2 * var(--spacing));
}
@media screen and (min-width: 768px) {
    section.references {
        grid-row-gap: calc(4 * var(--spacing));

        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        grid-column-gap: var(--spacing);
    }
}
@media screen and (min-width: 768px) {
    section.references .heading {
        grid-column-start: 4;
        grid-column-end: span 6;
        grid-row-start: 1;
    }
}
section.references .projects {
    display: flex;
    flex-direction: column;
    grid-row-gap: var(--spacing_medium);

    overflow-x: hidden;
}
@media screen and (min-width: 768px) {
    section.references .projects {
        grid-column-start: 1;
        grid-column-end: span 12;
        grid-row-start: 2;
        
        grid-row-gap: calc(3 * var(--spacing));
    }
}
section.references .projects .project {
    display: flex;
    flex-direction: column;
    grid-row-gap: calc(0.5 * var(--spacing_small));
}
@media screen and (min-width: 768px) {
    section.references .projects .project {
        grid-row-gap: var(--spacing);

        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        grid-column-gap: var(--spacing);
    }
}
@media screen and (min-width: 768px) {
    section.references .projects .project .acronym {
        grid-column-start: 1;
        grid-column-end: span 3;
        grid-row-start: 1;
    }
}
section.references .projects .project .content {
    display: flex;
    flex-direction: column;
    grid-row-gap: var(--spacing_small);
}
@media screen and (min-width: 768px) {
    section.references .projects .project .content {
        grid-column-start: 4;
        grid-column-end: span 6;
        grid-row-start: 1;

        grid-row-gap: calc(1 * var(--spacing));
    }
}
section.references .projects .project .content .details {
    display: flex;
    flex-direction: column;
}
@media screen and (min-width: 768px) {
    section.references .projects .project .content .details {
        grid-row-gap: 4px;
    }
}
section.references .projects .project a {
    display: inline-block;
    color: inherit;
    text-decoration: none;

    transition: color 400ms ease;
}
section.references .projects .project a:hover {
    color: rgb(90, 90, 90);

    transition: color 200ms ease;
}





section.text {
    margin: calc(3 * var(--spacing)) 0;
    padding: 0 var(--spacing);

    display: flex;
    flex-direction: column;
    grid-row-gap: var(--spacing);
    justify-content: flex-end;
}
@media screen and (min-width: 768px) {
    section.text {
        display: grid;
        grid-template-columns: repeat(12, 1fr); /* 12 equal-width columns */
        grid-template-rows: auto;
        grid-column-gap: var(--spacing);
        grid-row-gap: var(--spacing);
    }
}
section.text .subheading {
    margin-bottom: var(--spacing);
}
@media screen and (min-width: 768px) {
    section.text .subheading {
        margin-bottom: 0;

        grid-column-start: 1;
        grid-column-end: span 3;
        grid-row-start: 1;

        display: flex;
        flex-direction: row;
        align-items: center;
    }
}
section.text .heading {
    text-wrap: balance;
}
@media screen and (min-width: 768px) {
    section.text .heading {
        grid-column-start: 4;
        grid-column-end: span 7;
        grid-row-start: 1;
    }
}
@media screen and (min-width: 1024px) {
    section.text .heading {
        grid-column-start: 4;
        grid-column-end: span 3;
        grid-row-start: 1;
    }
}
@media screen and (min-width: 768px) {
    section.text .copy {
        grid-column-start: 4;
        grid-column-end: span 7;
        grid-row-start: 2;
    }
}
@media screen and (min-width: 1024px) {
    section.text .copy {
        grid-column-start: 4;
        grid-column-end: span 3;
        grid-row-start: 2;
    }
}
section.text .copy a {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-color: inherit;
    text-decoration-thickness: 5%;
    text-underline-offset: 16%;
    text-underline-position: from-font;

    transition: color 400ms ease, text-decoration-color 400ms ease;
}
section.text .copy a:hover {
    color: rgb(90, 90, 90);

    text-decoration-color: transparent;

    transition: color 200ms ease, text-decoration-color 200ms ease;
}
section.text .copy ul {
    margin: 0;
    padding: 0;
    padding-left: calc(0.65 * var(--spacing));
    list-style-type: square;
}


section.page_top {
    min-height: 100svh;
    padding: var(--spacing);

    display: flex;
    flex-direction: column;
    grid-row-gap: var(--spacing);
    justify-content: flex-end;
}
@media screen and (min-width: 768px) {
    section.page_top {
        padding-top: 50svh;
        display: grid;
        grid-template-columns: repeat(12, 1fr); /* 12 equal-width columns */
        grid-template-rows: auto;
        grid-column-gap: var(--spacing);
        grid-row-gap: var(--spacing);
        align-content: space-between;
    }
}
@media screen and (min-width: 1024px) {
    section.page_top {
    }
}
section.page_top .subheading {
    margin-bottom: var(--spacing);
}
@media screen and (min-width: 768px) {
    section.page_top .subheading {
        margin-bottom: 0;

        grid-column-start: 1;
        grid-column-end: span 3;
        grid-row-start: 1;

        display: flex;
        flex-direction: row;
        align-items: center;
    }
}
section.page_top .heading {
    display: flex;
    flex-direction: row;
    grid-column-gap: calc(2 * var(--spacing));
    text-wrap: balance;
}
@media screen and (min-width: 768px) {
    section.page_top .heading {
        grid-column-start: 4;
        grid-column-end: span 9;
        grid-row-start: 1;
    }
}
@media screen and (min-width: 1024px) {
    section.page_top .heading {
        grid-column-start: 4;
        grid-column-end: span 7;
        grid-row-start: 1;
    }
}
section.page_top .copy {
    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    text-wrap: balance;
}
@media screen and (min-width: 768px) {
    section.page_top .copy {
        grid-column-start: 4;
        grid-column-end: span 7;
        grid-row-start: 2;
    }
}
@media screen and (min-width: 1024px) {
    section.page_top .copy {
        grid-column-start: 4;
        grid-column-end: span 5;
        grid-row-start: 2;
    }
}


section.services_list {
    margin: calc(8 * var(--spacing)) 0;
    padding: 0 var(--spacing);

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    grid-column-gap: var(--spacing);
    grid-row-gap: calc(2 * var(--spacing));
}
@media screen and (min-width: 768px) {
    section.services_list {
        align-items: flex-start;
    }
}
section.services_list .subheading {
    grid-row-start: 1;
    grid-column-start: 5;
    grid-column-end: span 8;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
@media screen and (min-width: 768px) {
    section.services_list .subheading {
        grid-column-start: 1;
        grid-column-end: span 3;

        position: sticky;
        top: calc((4 * var(--spacing)) + var(--spacing_small));

        margin-top: var(--spacing_small);
    }
}
section.services_list .subheading span.arrow {
    display: none;
}
@media screen and (min-width: 768px) {
    section.services_list .subheading span.arrow {
        display: block;
    }
}
section.services_list .subheading span.arrow img {
    max-width: 20px;
}
section.services_list .items {
    grid-row-start: 2;
    grid-column-start: 5;
    grid-column-end: span 8;

    display: flex;
    flex-direction: column;
    grid-row-gap: calc(1.5 * var(--spacing));
}
@media screen and (min-width: 768px) {
    section.services_list .items {
        grid-row-start: 1;
        grid-column-start: 4;
        grid-column-end: span 4;

        grid-row-gap: calc(8 * var(--spacing));
    }
}
@media screen and (min-width: 1536px) {
    section.services_list .items {
        grid-column-end: span 5;
    }
}
section.services_list .items .item {
    position: relative;

    display: flex;
    flex-direction: column;
    grid-row-gap: var(--spacing);
}
@media screen and (min-width: 768px) {
    section.services_list .items .item {

        position: sticky;
        top: calc(4 * var(--spacing));
        background-color: black;
    }
}
section.services_list .items .item:before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--spacing);
    background-color: black;
    transform: translate3d(0px, calc(-1 * var(--spacing)), 0px);

}
section.services_list .items .item .heading {
    text-wrap: balance;
}
@media screen and (min-width: 768px) {
    section.services_list .items .item .heading {
        margin-bottom: calc(2 * var(--spacing));
    }
}
section.services_list .items .item .heading h1 a {
    display: flex;
    flex-direction: column;
    grid-column-gap: var(--spacing);
}
@media screen and (min-width: 768px) {
    section.services_list .items .item .heading h1 a {
        flex-direction: row;
        grid-column-gap: calc(2 * var(--spacing));
    }
}
section.services_list .items .item .description {
    max-width: 360px;
}
@media screen and (min-width: 768px) {
    section.services_list .items .item .description {
        max-width: 460px;
    }
}
section.services_list .items .item .media img,
section.services_list .items .item .media video {
    aspect-ratio: 1/1;
    object-fit: cover;
}


footer {
    padding: var(--spacing);

    display: flex;
    flex-direction: column;
    grid-row-gap: var(--spacing_medium);
}
footer a {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-color: rgb(153, 153, 153);
    text-decoration-thickness: 5%;
    text-underline-offset: 16%;
    text-underline-position: from-font;

    transition: color 400ms ease, text-decoration-color 400ms ease;
}
footer a:hover {
    color: rgb(90, 90, 90);

    text-decoration-color: transparent;

    transition: color 200ms ease, text-decoration-color 200ms ease;
}
footer .newsletter,
footer .contact,
footer .knowledge,
footer .credits {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: var(--spacing);
    align-items: baseline;
}
footer .newsletter .heading,
footer .contact .heading,
footer .knowledge .heading,
footer .credits .heading {
    grid-column-end: span 4;
}
@media screen and (min-width: 1024px) {
    footer .newsletter .heading,
    footer .contact .heading,
    footer .knowledge .heading,
    footer .credits .heading {
        grid-column-end: span 3;
    }
}
footer .newsletter .content,
footer .contact .content,
footer .knowledge .content,
footer .credits .content {
    grid-column-start: 5;
    grid-column-end: span 8;
}
@media screen and (min-width: 1024px) {
    footer .newsletter .content,
    footer .contact .content,
    footer .knowledge .content,
    footer .credits .content {
        grid-column-start: 4;
        grid-column-end: span 7;
    }
}
footer .newsletter .content {
    display: flex;
    flex-direction: column;
    grid-row-gap: 2px;
}
footer .newsletter .form form {
    position: relative;
    width: 100%;
    max-width: 335px;
    display: flex;
}
footer .newsletter .form form .form-group {
    flex-grow: 1;
}
footer .newsletter .form form .form-group label {
    display: none;
}
footer .newsletter .form form .form-group input[type="email"] {
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0;
    background-color: white;
    border: none;
    border-radius: 0;
    padding: 0 var(--spacing_small);
}
footer .newsletter .form form.submitting input[type="email"] {
    cursor: none;
    user-select: none;
    pointer-events: none;
}
footer .newsletter .form form button[type="submit"] {
    position: relative;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: white;

    cursor: pointer;
    
    overflow: hidden;
}
footer .newsletter .form form.submitting button[type="submit"] {
    cursor: none;
    user-select: none;
    pointer-events: none;
}
footer .newsletter .form form button[type="submit"]:before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url(assets/iconography/arrow-right-small-dark.svg);
    background-repeat: no-repeat;
    background-position: center;

    display: flex;
    opacity: 0;

    transform: translate3d(-100%, 0, 0);
    transition: transform 400ms ease, opacity 400ms ease;

    user-select: none;
    pointer-events: none;
}
footer .newsletter .form form button[type="submit"]:hover:before {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 200ms ease, opacity 200ms ease;
}
footer .newsletter .form form button[type="submit"]:after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url(assets/iconography/arrow-right-small-dark.svg);
    background-repeat: no-repeat;
    background-position: center;

    display: flex;

    transition: transform 400ms ease, opacity 400ms ease;

    user-select: none;
    pointer-events: none;
}
footer .newsletter .form form button[type="submit"]:hover:after {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
    transition: transform 200ms ease, opacity 200ms ease;
}
footer .newsletter .disclaimer {
    color: rgb(90, 90, 90);
}
footer .contact .content .links {
    display: flex;
    grid-column-gap: var(--spacing_small);
}
footer .knowledge .content .links .link a {
    text-wrap: balance;
}
footer .credits .content table {
    border-collapse: collapse;
}
footer .credits .content table tr td:first-child {
    padding-right: var(--spacing_small);
}
footer .credits .content table tr td {
    padding: 0;
}