/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir=rtl] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* ----- SASS VARIABLES ------------------------------------------ */
/* ---- Colours ----- */
/* ----- Design to CSS helpers ----- */
/* ---- Breakpoints ----- */
/* ----- CSS easing & transitions ----- */
/* ----- FUNCTIONS ----------------------------------------------- */
/* ----- MIXINS -------------------------------------------------- */
/* ----- Responsive ----- */
/* ----- CUSTOM PROPERTIES --------------------------------------- */
:root {
  --base-unit: 40px;
  --outer-padding: 50px;
  --border-radius-40: var(--base-unit);
  --border-radius-30: calc(var(--border-radius-40) * 0.75);
  --border-radius-20: calc(var(--border-radius-40) * 0.5);
  --border-radius-10: calc(var(--border-radius-40) * 0.25);
  --pad-40: var(--base-unit);
  --pad-30: calc(var(--base-unit) * 0.75);
  --pad-20: calc(var(--base-unit) * 0.5);
  --gap-40: var(--base-unit);
  --gap-20: calc(var(--base-unit) * 0.5);
  --icon-size: 32px;
  /*  Colours  */
  --black: #000000;
  --foreground-colour: var(--black);
  --white: #ffffff;
  --tint: #f4f4f4;
  --hero-background: #f7f7f7;
  --black-rgb: 0 0 0;
  --white-rgb: 255 255 255;
}
@media (max-width: 667px) {
  :root {
    --base-unit: 30px;
    --mbu: var(--base-unit);
    --mbu-half: calc(var(--base-unit) / 2);
  }
}
@media (min-width: 668px) and (max-width: 1024px) {
  :root {
    --base-unit: 20px;
    --outer-padding: 30px;
    --text-scale: 0.7;
  }
}
@media (min-width: 1025px) and (max-width: 1919px) {
  :root {
    --base-unit: 30px;
    --outer-padding: 40px;
    --text-scale: 0.75;
  }
}

.theme-dark {
  --black: #ffffff;
  --white: #000000;
  --tint: #222222;
  --hero-background: #222;
  --black-rgb: 255 255 255;
  --white-rgb: 0 0 0;
}

/* ----- UTILITY CLASSES --------------------------------------- */
.accessible-hide {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  overflow: hidden;
  white-space: nowrap;
}

@media (max-width: 667px) {
  .mobile-hide {
    display: none !important;
  }
}

@media (min-width: 668px) {
  .mobile-only {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .desktop-only {
    display: none !important;
  }
}

/* 
	Reset:
	Based on http://meyerweb.com/eric/tools/css/reset/ 
   	v2.0 | 20110126	
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ----- Custom Reset styles ------ */
*,
*:before,
*:after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

iframe,
img,
svg,
video,
picture {
  display: block;
  max-width: 100%;
}

button {
  padding: 0;
  background-color: transparent;
  border: none;
}

b,
strong {
  font-weight: bold;
}

iframe {
  border: none;
}

input,
textarea {
  border: none;
}

textarea,
input,
button,
select {
  font-family: inherit;
}

@media (max-width: 1024px) {
  input[type=text],
  input[type=search],
  input[type=button],
  input[type=password] {
    -webkit-appearance: none;
  }
}
h1,
h2,
h3,
h4,
h5 {
  line-height: 1.1;
}

textarea {
  resize: vertical;
}
textarea:not([rows]) {
  min-height: 4lh;
}

a,
button {
  color: inherit;
}

button {
  cursor: pointer;
}

input[type=checkbox] {
  margin: 0;
}

a[href^="tel:"] {
  text-decoration: none;
}
a[href^="tel:"]:hover, a[href^="tel:"]:focus {
  text-decoration: underline;
}

/*
body::before {
	position: fixed;
	inset: 0;
	background-color: var(--tint);
	content: "";
	z-index: -1;
}
*/
.global-header {
  z-index: 10;
  opacity: 1;
  pointer-events: none;
  transform: translateY(0);
  margin: 40px;
  padding: 0px 0px 0px 20px;
  /*.header-logo {
  	display: block;
  	min-width: 120px;
  	display: flex;
  	max-width : 442px;
  	max-height: 40px;
  	justify-content: center;
  	align-items: center;
  	flex-shrink: 0;

  	@include mobile {
  		max-width: 170px;
  	}

  	@include tablet {
  		max-width: 250px;
  		//width: 230px
  	}

  	@include desktop {
  		max-width: vw(295px, true);
  	}

  	@include tablet-up {
  		--logo-collapsed-width: 40px;
  		--logo-expanded-width: 250px;
  		--logo-background-size: calc(var(--logo-collapsed-width) + 2 * var(--pad-30)); // add some padding to prevent harsh edges when expanding
  		// frosted background that's shown when logo is collapsed to 'O'
  		&::before {
  			position: absolute;
  			left: calc(-1 * var(--pad-30));
  			top: 0;
  			width: var(--logo-background-size);
  			height: var(--logo-background-size);
  			background-color: rgb(var(--white-rgb) / 60%);
  			backdrop-filter: blur(10px);
  			border-radius: var(--border-radius-30);
  			content: "";
  			opacity: 0;
  			z-index: -1;
  			transition: opacity $ui-transition-duration ease, width 0.45s $ease;
  		}

  		.logo-letter {
  			--logo-letter-shift-x: 0px;
  			opacity: 1;
  			transform: translateX(0);
  			transition: transform 0.45s $ease, opacity 0.45s ease;
  		}

  		@media (prefers-reduced-motion: reduce) {
  			.logo-letter {
  				transition: none;
  			}

  			&::before {
  				transition: none;
  			}
  		}
  	}

  	svg {
  		width: 100%;
  		height: auto;
  	}
  }*/
}
.global-header .mobile-header-upper-wrapper,
.global-header .header-menu-wrapper {
  pointer-events: auto;
}
@media (min-width: 668px) {
  .global-header {
    --header-top-offset: min(4.6875vw, 90px);
    position: absolute;
    left: calc(var(--outer-padding) + var(--pad-40));
    right: calc(var(--outer-padding) + var(--pad-40));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
  }
}
@media (min-width: 1920px) {
  .global-header {
    top: var(--header-top-offset);
  }
}
@media (max-width: 667px) {
  .global-header {
    --header-top-offset: 0px;
    position: absolute;
    left: 0;
    top: var(--header-top-offset);
    right: 0;
    padding: var(--mbu-half);
    display: grid;
    grid-template-areas: "header" "actions" "menu";
    grid-template-rows: auto auto 1fr;
    gap: 15px;
    /*		
    		&::before {
    			position: fixed;
    			inset: 0;
    			background-color: var(--tint);
    			content: "";
    			z-index: -1;

    			display: none; // temp
    		}
    */
  }
  .global-header:has(.header-menu-wrapper.is-active) {
    bottom: 0;
    background-color: var(--tint);
  }
}
@media (min-width: 668px) {
  .global-header .header-logo-wrapper {
    width: 100px;
    height: 100px;
    background-color: rgb(var(--white-rgb)/60%);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius-30);
  }
}
@media (max-width: 667px) {
  .global-header .mobile-header-upper-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-20);
    background-color: var(--white);
    padding: var(--mbu-half);
    border-radius: 10px;
    grid-area: header;
  }
}
.global-header .header-logo {
  display: flex;
  width: 442px;
  height: 40px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.global-header .header-logo svg {
  width: 100%;
  height: auto;
}
.global-header.is-collapsed {
  position: fixed;
  opacity: 0;
  transform: translateY(calc(-100% - var(--header-top-offset) - var(--gap-20)));
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  will-change: transform, opacity;
}
.global-header.is-collapsed.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.global-header.is-collapsed .header-logo::before {
  opacity: 1;
}
.global-header.is-collapsed .header-logo .logo-letter:not(:first-child) {
  transform: translateX(var(--logo-letter-shift-x, 0px));
  opacity: 0;
}
.global-header.is-collapsed .header-logo:is(:hover, :focus-visible)::before {
  width: calc(var(--logo-expanded-width, 250px) + 2 * var(--pad-30));
}
.global-header.is-collapsed .header-logo:is(:hover, :focus-visible) .logo-letter:not(:first-child) {
  transform: translateX(0);
  opacity: 1;
}
.global-header.is-collapsed .header-menu-wrapper .nav-link:hover {
  background-color: var(--tint);
}
.global-header .toggle-menu {
  width: 50px;
  height: 50px;
  cursor: pointer;
  transition: opacity 0.25s ease, top 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.global-header .toggle-menu .burger-icon {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
  margin: auto;
}
.global-header .toggle-menu .burger-icon .burger-icon-line {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--black);
  transition: background-color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}
.global-header .toggle-menu .burger-icon .burger-icon-line.top {
  top: 0;
  transform-origin: top left;
}
.global-header .toggle-menu .burger-icon .burger-icon-line.middle {
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.25s ease;
}
.global-header .toggle-menu .burger-icon .burger-icon-line.bottom {
  bottom: 0;
  transform-origin: bottom left;
}
.global-header .toggle-menu.is-active .burger-icon-line.top {
  transform: translate(4px, -1px) rotate(46deg);
}
.global-header .toggle-menu.is-active .burger-icon-line.middle {
  opacity: 0;
}
.global-header .toggle-menu.is-active .burger-icon-line.bottom {
  transform: translate(4px, 1px) rotate(-46deg);
}
@media (min-width: 668px) {
  .global-header .header-menu-wrapper {
    display: flex;
    gap: 10px;
    padding: 10px;
    background-color: rgb(var(--white-rgb)/60%);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius-30);
  }
  .global-header .header-menu-wrapper .primary-navigation,
  .global-header .header-menu-wrapper .header-actions {
    display: contents;
  }
}
@media (max-width: 667px) {
  .global-header .header-menu-wrapper.is-active {
    display: contents;
  }
}
@media (max-width: 667px) {
  .global-header .header-menu-wrapper:not(.is-active) {
    display: none;
  }
}
@media (max-width: 667px) {
  .global-header .header-menu-wrapper .primary-navigation .nav-link {
    width: 100%;
  }
}
@media (max-width: 667px) {
  .global-header .header-menu-wrapper .header-actions {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 10px;
    grid-area: actions;
  }
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100%;
  gap: var(--gap-20);
  padding: calc(0.6 * var(--base-unit));
  background-color: var(--white);
  border-radius: var(--border-radius-20);
  color: inherit;
  font-size: calc(1.25rem * var(--text-scale, 1));
  text-decoration: none;
  transition: background-color 250ms ease, color 250ms ease;
}
@media (min-width: 668px) {
  .nav-link {
    white-space: nowrap;
  }
}
@media (max-width: 667px) {
  .nav-link {
    border-radius: 5px;
    text-align: left;
  }
}
.nav-link:hover {
  background-color: var(--tint);
}
.nav-link .icon-wrapper {
  width: 32px;
  height: 32px;
  transition: transform 250ms ease;
}

.nav-listing-level-1 {
  display: flex;
  gap: 10px;
}
@media (max-width: 667px) {
  .nav-listing-level-1 {
    padding: 15px;
    flex-direction: column;
    gap: var(--mbu-half);
    background-color: white;
    border-radius: 10px;
  }
}
.nav-listing-level-1 li {
  position: relative;
}

.nav-link-level-1.is-active {
  background-color: var(--black);
  color: var(--white);
}
.nav-link-level-1.is-active .icon-wrapper {
  transform: scaleY(-1);
}
.nav-link-level-1.is-active .icon-wrapper .fill-black {
  fill: var(--white);
}
@media (min-width: 668px) {
  .nav-link-level-1.is-active + .nav-listing-level-2 {
    opacity: 1;
    visibility: visible;
  }
}
@media (max-width: 667px) {
  .nav-link-level-1.is-active + .nav-listing-level-2 {
    display: block;
  }
}

@media (min-width: 668px) {
  .nav-listing-level-2 {
    position: absolute;
    top: 100%;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: max-content;
    margin-top: var(--gap-20);
    padding: 10px;
    background-color: var(--white);
    border-radius: var(--border-radius-30);
    opacity: 0;
    visibility: hidden;
    transition: opacity 250ms ease, visibility 250ms ease;
  }
}
@media (max-width: 667px) {
  .nav-listing-level-2 {
    display: none;
    background-color: yellow;
  }
}

.theme-toggle {
  position: relative;
  overflow: hidden;
  background-color: var(--tint);
}
.theme-toggle .orbiting-icons {
  width: 32px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: rotate(calc(var(--rotation, 0) * 1deg));
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-toggle .orbiting-icons .icon-wrapper {
  transform: rotate(calc(var(--rotation, 0) * -1deg));
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----- Footer ----- */
@media (min-width: 668px) {
  .footer-upper {
    display: flex;
    justify-content: space-between;
    gap: var(--gap-20);
    padding: var(--outer-padding);
  }
}
@media (max-width: 667px) {
  .footer-upper {
    display: grid;
    gap: var(--mbu);
    justify-items: center;
    margin-bottom: var(--mbu);
  }
  .footer-upper .footer-main,
  .footer-upper .footer-sidebar {
    display: contents;
  }
  .footer-upper .footer-address {
    order: 1;
  }
  .footer-upper .footer-logos,
  .footer-upper .footer-logos-lower {
    order: 1;
  }
}
.footer-upper .footer-logo {
  max-width: 295px;
}
@media (min-width: 668px) {
  .footer-upper .footer-tagline {
    margin-bottom: 0.5em;
  }
}
@media (min-width: 668px) {
  .footer-upper .footer-main {
    display: flex;
    flex-direction: column;
    gap: var(--gap-40);
  }
}
@media (max-width: 667px) {
  .footer-upper .footer-sidebar {
    margin-bottom: var(--mbu);
  }
}
@media (min-width: 668px) {
  .footer-upper .footer-sidebar .social-links-list {
    margin-bottom: 25px;
  }
  .footer-upper .footer-sidebar .social-links-list li:not(:last-child) {
    margin-bottom: 10px;
  }
}
@media (max-width: 667px) {
  .footer-upper .footer-sidebar .social-links-list {
    display: flex;
    justify-content: center;
    gap: 10px;
  }
}
.footer-upper .footer-sidebar .social-links-list .icon-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.footer-upper .footer-sidebar .social-links-list .icon-link .icon-wrapper {
  width: 43px;
  height: 43px;
  background-color: var(--black);
  border-radius: 50%;
}
.footer-upper .footer-sidebar .footer-logos {
  display: flex;
  gap: 10px;
}
@media (max-width: 667px) {
  .footer-upper .footer-sidebar .footer-logos {
    margin-top: -5px;
    justify-content: center;
  }
}
@media (min-width: 668px) {
  .footer-upper .footer-sidebar .footer-logos {
    margin-bottom: 25px;
    justify-content: space-between;
  }
}
.footer-upper .footer-sidebar .footer-logos-lower {
  display: flex;
  justify-content: center;
}

.footer-lower {
  display: grid;
  margin-bottom: var(--base-unit);
  padding: var(--base-unit) var(--outer-padding);
  background-color: var(--tint);
  border-radius: var(--border-radius-40);
}
@media (min-width: 1025px) {
  .footer-lower {
    grid-template-columns: auto 1fr auto;
  }
}
@media (min-width: 668px) and (max-width: 1024px) {
  .footer-lower {
    grid-template-columns: auto 1fr;
  }
  .footer-lower .legal-links {
    grid-column: 1/-1;
    justify-self: center;
  }
}
@media (min-width: 668px) {
  .footer-lower {
    gap: var(--gap-40);
  }
}
@media (max-width: 667px) {
  .footer-lower {
    gap: var(--mbu);
  }
}
.footer-lower p {
  margin-bottom: 0;
}
@media (min-width: 668px) {
  .footer-lower .legal-links-list {
    display: flex;
    gap: 10px;
  }
  .footer-lower .legal-links-list li {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  .footer-lower .legal-links-list li::before {
    content: "";
    flex-shrink: 0;
    width: 0.2em;
    height: 0.2em;
    background-color: var(--black);
    transform: rotate(45deg);
  }
}
.footer-lower .legal-links-list li {
  gap: 10px;
}
@media (min-width: 668px) {
  .footer-lower .legal-links-list li:first-child::before {
    display: none;
  }
}
@media (max-width: 667px) {
  .footer-lower .legal-links-list li:not(:last-child) {
    margin-bottom: 20px;
  }
}

.cta-link {
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .cta-link {
    font-size: 0.75rem;
  }
}
.cta-link:hover {
  text-decoration: underline;
}
@media (max-width: 667px) {
  .cta-link {
    text-decoration: underline;
  }
}
.cta-link.cta-link--clickable-parent-card::after {
  position: absolute;
  inset: 0;
  content: "";
}

.icon-wrapper {
  display: flex;
  flex-shrink: 0;
}
.icon-wrapper > svg, .icon-wrapper img {
  margin: auto;
}

/* ----- Buttons ----- */
.button {
  display: block;
  width: fit-content;
  padding: 14px var(--pad-40);
  border: 2px solid var(--foreground-colour);
  border-radius: 40px;
  color: inherit;
  font-size: 1rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease;
  border-radius: 6px;
  border: 3px solid #483DFF;
  color: #483DFF;
  font-family: "Kode Mono";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
@media (max-width: 667px) {
  .button {
    width: 100%;
    margin: 0 auto;
    padding: 14px 28px;
  }
}
.button:hover {
  background-color: color-mix(in srgb, var(--foreground-colour) 80%, transparent);
  color: var(--background-color);
}
.button:hover .stroke-black {
  stroke: var(--background-color);
}
.button:active {
  background-color: var(--foreground-colour);
  color: var(--background-color);
}
.button:focus-visible {
  outline: 2px solid var(--foreground-colour);
  outline-offset: 4px;
}
.button:has(.icon-wrapper) {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-20);
}

/* ----- Breadcrumbs ----- */
.breadcrumbs {
  width: fit-content;
  margin: 0 auto var(--base-unit);
  padding: min(1.5625vw, 30px) min(2.6041666667vw, 50px);
  background-color: var(--tint);
  border-radius: 40px;
}
.breadcrumbs .breadcrumb-list {
  display: flex;
  align-items: center;
  gap: var(--gap-20);
}
.breadcrumbs .breadcrumb-list li {
  display: flex;
  align-items: center;
}
.breadcrumbs .breadcrumb-list li:not(:first-child)::before {
  display: block;
  height: 22px;
  width: 2px;
  margin-right: var(--gap-20);
  background-color: rgb(var(--black-rgb)/25%);
  border-radius: 2px;
  content: "";
  transform: rotate(30deg);
}
.breadcrumbs .breadcrumb-list li a {
  text-decoration: none;
}
.breadcrumbs .breadcrumb-list li a:hover {
  text-decoration: underline;
}

/* ----- Tags ----- */
.tags-list {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.tag {
  display: block;
  padding: 5px 10px;
  border: 1px solid var(--foreground-colour);
  border-radius: 2px;
  font-size: calc(0.75rem * var(--text-scale, 1));
  font-weight: 600;
  text-transform: uppercase;
}

/* ----- Carousel Controls & Pagination ----- */
/* Used for homepage work carousel and mobile-only carousels */
.swiper-pagination-vertical.swiper-pagination-bullets {
  transform: translate3d(0, 0, 0);
}

.pagination-arrow,
.pagination-dots {
  border: none;
  border-radius: 40px;
  width: calc(2 * var(--base-unit));
  flex-shrink: 0;
  transition: background-color 250ms ease;
}
@media (min-width: 668px) {
  .pagination-arrow,
  .pagination-dots {
    background-color: rgb(var(--white-rgb)/25%);
  }
  .pagination-arrow:hover,
  .pagination-dots:hover {
    background-color: var(--white);
  }
}
@media (max-width: 667px) {
  .background-tint .pagination-arrow,
  .background-tint .pagination-dots {
    background-color: rgb(var(--white-rgb)/25%);
  }
}

.pagination-arrow {
  display: flex;
  aspect-ratio: 1/1;
  /*
  	&:hover {
  		@include tablet-up {
  			background-color: var(--white);
  		}
  	}
  */
}
@media (max-width: 667px) {
  .pagination-arrow {
    padding: 12px;
  }
}
.pagination-arrow .icon-wrapper {
  display: block;
  margin: auto;
}
@media (min-width: 668px) and (max-width: 1024px) {
  .pagination-arrow .icon-wrapper {
    width: 18px;
  }
}
@media (max-width: 667px) {
  .pagination-arrow.pagination-arrow--previous .icon-wrapper {
    transform: rotate(90deg);
  }
}
@media (min-width: 668px) {
  .pagination-arrow.pagination-arrow--previous .icon-wrapper {
    transform: scaleY(-1);
  }
}
@media (max-width: 667px) {
  .pagination-arrow.pagination-arrow--next .icon-wrapper {
    transform: rotate(-90deg);
  }
}

.pagination-dots {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0;
}
@media (max-width: 667px) {
  .pagination-dots {
    padding: 6px 12px;
    min-width: fit-content;
  }
}
@media (min-width: 668px) {
  .pagination-dots {
    width: calc(2 * var(--base-unit));
    padding: 24px 0;
    flex-direction: column;
    align-items: center;
  }
  .pagination-dots:has(.pagination-dot:hover) {
    background-color: var(--white);
  }
}

.pagination-dot {
  position: relative;
  width: 32px;
  aspect-ratio: 1/1;
}
.pagination-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  background-color: var(--black);
  border: 4px solid transparent;
  border-radius: 50%;
  transition: background-color 250ms ease, border-color 250ms ease, width 250ms ease, height 250ms ease;
}
.pagination-dot.is-active::before, li.slick-active > .pagination-dot::before {
  width: 12px;
  height: 12px;
  background-color: transparent;
  border-color: var(--black);
}

/* ----- Cards / Text Panels ----- */
.contact-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  background-color: var(--white);
  color: var(--black);
  border-radius: var(--border-radius-20);
  transition: background-color 150ms ease;
  text-align: left;
  text-decoration: none;
}
@media (min-width: 668px) {
  .contact-card {
    padding: var(--pad-40);
    gap: var(--gap-40);
  }
}
@media (max-width: 667px) {
  .contact-card {
    padding: var(--mbu-half);
    gap: var(--mbu-half);
  }
}
.contact-card .icon-wrapper {
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 668px) {
  .contact-card .icon-wrapper {
    width: 80px;
  }
}
@media (max-width: 667px) {
  .contact-card .icon-wrapper {
    width: 50px;
  }
}
.contact-card.contact-card--projects:hover {
  background-color: rgba(0, 221, 161, 0.8);
}
.contact-card.contact-card--projects:active, .contact-card.contact-card--projects:focus-visible, .contact-card.contact-card--projects.is-active {
  background-color: #00DDA1;
}
.contact-card.contact-card--partnerships:hover {
  background-color: rgba(199, 126, 255, 0.8);
}
.contact-card.contact-card--partnerships:active, .contact-card.contact-card--partnerships:focus-visible, .contact-card.contact-card--partnerships.is-active {
  background-color: #C77EFF;
}
.contact-card.contact-card--team:hover {
  background-color: rgba(82, 209, 255, 0.8);
}
.contact-card.contact-card--team:active, .contact-card.contact-card--team:focus-visible, .contact-card.contact-card--team.is-active {
  background-color: #52D1FF;
}

/* ----- Loading Spinner ----- */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes swing {
  0% {
    stroke-dasharray: 16 201;
    stroke-dashoffset: 0;
  }
  42% {
    stroke-dasharray: 182 201;
    stroke-dashoffset: -48;
  }
  100% {
    stroke-dasharray: 16 201;
    stroke-dashoffset: -217;
  }
}
.spinner {
  animation: spin 1.4s linear infinite;
  pointer-events: none;
  transform-origin: center;
}
.spinner .spinner-stroke-background {
  stroke: rgb(var(--black-rgb)/25%);
}
.background-black .spinner .spinner-stroke-background {
  stroke: rgb(var(--white-rgb)/25%);
}
.spinner .spinner-stroke-foreground {
  stroke: var(--black);
}
.background-black .spinner .spinner-stroke-foreground {
  stroke: var(--white);
}

.arc {
  stroke-dasharray: 16 201;
  animation: swing 1.4s ease-in-out infinite;
}

body {
  /*font-family: "Pathway Extreme", sans-serif;*/
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Kode Mono", monospace;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
}

h1,
.heading-1 {
  font-size: calc(5.625rem * var(--text-scale, 1));
  font-weight: 100;
  line-height: 1.1;
}
@media (max-width: 667px) {
  h1,
  .heading-1 {
    font-size: calc(2.25rem * var(--text-scale, 1));
  }
}

h2,
.heading-2 {
  font-size: calc(3.125rem * var(--text-scale, 1));
  line-height: 1.1;
}
@media (max-width: 667px) {
  h2,
  .heading-2 {
    font-size: calc(1.875rem * var(--text-scale, 1));
  }
}

h3,
.heading-3 {
  font-size: calc(2.25rem * var(--text-scale, 1));
  font-weight: 600;
  line-height: 1.2;
}
@media (max-width: 667px) {
  h3,
  .heading-3 {
    font-size: calc(1.625rem * var(--text-scale, 1));
    line-height: 1.1;
  }
}

h4,
.heading-4 {
  font-size: calc(1.875rem * var(--text-scale, 1));
  font-weight: 600;
  line-height: 1.2;
}
@media (max-width: 667px) {
  h4,
  .heading-4 {
    font-size: calc(1.375rem * var(--text-scale, 1));
    line-height: 1.1;
  }
}

h5,
.heading-5 {
  font-size: calc(1.5rem * var(--text-scale, 1));
  font-weight: 600;
  line-height: 1.4;
}
@media (max-width: 667px) {
  h5,
  .heading-5 {
    font-size: 1.125rem;
    line-height: 1.2;
  }
}

h6,
.heading-6,
.testimonial .testimonial-name {
  font-size: calc(1.25rem * var(--text-scale, 1));
  font-weight: 700;
  line-height: 1.4;
}
@media (max-width: 667px) {
  h6,
  .heading-6,
  .testimonial .testimonial-name {
    font-size: 1rem;
  }
}

p,
.body-text,
.result-item,
.testimonial .testimonial-role {
  font-size: calc(1.25rem * var(--text-scale, 1));
  font-weight: 400;
  line-height: 1.4;
}
p:has(+ p),
.body-text:has(+ p),
.result-item:has(+ p),
.testimonial .testimonial-role:has(+ p) {
  margin-bottom: 1.4em;
  margin-bottom: 1lh;
}

.large-body-text, .testimonial .testimonial-text p {
  font-size: calc(1.875rem * var(--text-scale, 1));
}
@media (max-width: 667px) {
  .large-body-text, .testimonial .testimonial-text p {
    font-size: 1.375rem;
  }
}

.small-body-text {
  font-size: calc(0.875rem * var(--text-scale, 1));
}

.smallprint {
  font-size: 12px;
  line-height: 16.8px; /* 140% */
}

.rich-text-wrapper p:not(:last-of-type) {
  margin-bottom: 1em;
}
.rich-text-wrapper h2,
.rich-text-wrapper h3,
.rich-text-wrapper h4 {
  margin-bottom: 0.5em;
}
.rich-text-wrapper h3,
.rich-text-wrapper h4 {
  margin-top: 2em;
}
.rich-text-wrapper p,
.rich-text-wrapper ul,
.rich-text-wrapper ol {
  line-height: 1.4;
}
.rich-text-wrapper ol,
.rich-text-wrapper ul {
  text-align: left;
}
.rich-text-wrapper ul li {
  display: flex;
  align-items: center;
  gap: 15px;
}
.rich-text-wrapper ul li::before {
  content: "";
  flex-shrink: 0;
  width: 0.2em;
  height: 0.2em;
  background-color: var(--black);
  transform: rotate(45deg);
}
.rich-text-wrapper ol {
  margin-left: 25px;
  list-style-type: decimal;
}

/* ----- Generic module styles ----- */
.module-base {
  margin-bottom: var(--base-unit);
  padding: var(--outer-padding);
  border-radius: var(--border-radius-40);
}
@media (max-width: 667px) {
  .module-base {
    margin-bottom: var(--mbu);
    padding: var(--mbu) var(--mbu-half);
    border-radius: 20px;
  }
}

.section-header {
  text-transform: uppercase;
}
@media (max-width: 667px) {
  .section-header {
    margin-bottom: 30px;
  }
}
@media (min-width: 668px) {
  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--base-unit);
  }
}
.section-header h2 {
  margin-bottom: 0;
}
.section-header .button {
  flex-shrink: 0;
}

.section-footer {
  margin-top: var(--gap-40);
  display: flex;
  justify-content: center;
}

.mobile-section-footer {
  margin-top: var(--mbu);
  display: flex;
  justify-content: center;
}
.mobile-section-footer .button {
  width: 100%;
}

@media (max-width: 667px) {
  .mobile-carousel-pagination-wrapper {
    margin-top: var(--mbu);
    display: grid;
    grid-template-columns: auto 1fr auto;
  }
}
.mobile-carousel-pagination-wrapper .pagination-arrow--previous {
  grid-column: 1;
}
.mobile-carousel-pagination-wrapper .pagination-dots {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: center;
}
.mobile-carousel-pagination-wrapper .pagination-arrow--next {
  grid-column: 3;
}

/* ----- M4: Contact panel ----- */
.module-contact-panel {
  display: flex;
  flex-direction: column;
}
@media (min-width: 668px) {
  .module-contact-panel {
    gap: var(--gap-40);
  }
}
@media (max-width: 667px) {
  .module-contact-panel {
    padding: var(--mbu) var(--mbu-half) var(--mbu-half);
    gap: var(--mbu);
  }
}

.contact-grid {
  display: grid;
}
@media (max-width: 667px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--mbu-half);
  }
}
@media (min-width: 668px) {
  .contact-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-40);
  }
}

/* ----- Hero ----- */
.module-hero {
  position: relative;
  display: flex;
}

.hero-canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--hero-background);
}
@media (max-width: 667px) {
  .hero-canvas-container {
    filter: blur(10px);
  }
}
@media (min-width: 668px) {
  .hero-canvas-container {
    filter: blur(15px);
  }
}

.hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  z-index: 0;
}
.theme-dark .hero-canvas {
  filter: invert(0.9);
}

/* M5: Home hero */
.module-hero--large {
  align-items: flex-end;
  background: radial-gradient(267.67% 50% at 50% 52.8%, var(--white) 50%, var(--tint) 100%);
}
.module-hero--large::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, #F3F9FF 0%, #F3F9FF 100%), linear-gradient(0deg, #F3F9FF 0%, #F3F9FF 100%);
  background-blend-mode: multiply, soft-light;
  mix-blend-mode: soft-light;
  border-radius: 24px;
}
@media (min-width: 668px) {
  .module-hero--large {
    padding-top: 140px;
    padding-bottom: 6.7708333333vw;
  }
}
@media (min-width: 1025px) {
  .module-hero--large {
    aspect-ratio: 16/9;
  }
}
@media (max-width: 667px) {
  .module-hero--large {
    padding: var(--mbu);
  }
  .module-hero--large .hero-title {
    margin: 70px 0 40px;
  }
}

.module-hero--small {
  /*	
  body:not(.theme-dark) & {
  background: #fcfcfc url(/placeholder-content/hero.png) no-repeat center / cover; //temp
  }
  */
}
@media (min-width: 668px) {
  .module-hero--small {
    aspect-ratio: 1820/610;
  }
}
@media (min-width: 668px) and (max-width: 1024px) {
  .module-hero--small {
    padding-top: 120px;
    padding-bottom: 80px;
  }
}
@media (max-width: 667px) {
  .module-hero--small {
    aspect-ratio: 300/250;
  }
}
.module-hero--small .heading-1 {
  margin: auto;
}

.hero-text-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  z-index: 2;
}
.hero-text-wrapper .button {
  pointer-events: auto;
}
.hero-text-wrapper p {
  pointer-events: auto;
  color: #13254E;
  font-family: Inter;
  font-size: 32px;
  font-style: normal;
  font-weight: 300;
  line-height: 44px; /* 137.5% */
}
@media (min-width: 668px) {
  .hero-text-wrapper {
    max-width: 37.2395833333vw;
    gap: min(4.1666666667vw, 80px);
  }
}
@media (max-width: 667px) {
  .hero-text-wrapper {
    gap: 30px;
  }
}

.hero-title {
  pointer-events: auto;
  z-index: 2;
  align-self: stretch;
  color: #483DFF;
  font-size: 70px;
  font-style: normal;
  font-weight: 400;
  line-height: 77px; /* 110% */
  letter-spacing: 7px;
  text-transform: uppercase;
}

/* ----- Case Study Hero ----- */
.module-case-study-hero {
  display: grid;
  padding: 0;
}
@media (min-width: 668px) {
  .module-case-study-hero {
    grid-template-columns: 7fr 5fr;
    gap: 4.6875vw;
    margin-top: min(11.4583333333vw, 220px);
  }
}
@media (max-width: 667px) {
  .module-case-study-hero {
    gap: var(--mbu);
  }
}
.module-case-study-hero .hero-title {
  align-self: center;
  order: 2;
}
@media (max-width: 667px) {
  .module-case-study-hero .hero-title {
    padding: 0 var(--base-unit);
  }
}
.module-case-study-hero .hero-media {
  border-radius: var(--border-radius-40);
  order: 1;
}
@media (max-width: 667px) {
  .module-case-study-hero .hero-media {
    border-radius: 20px;
  }
}

.swiper-pagination-bullets.swiper-pagination-horizontal {
  width: auto;
}

.module-work-carousel .carousel-wrapper {
  position: relative;
  border-radius: var(--border-radius-20);
  overflow: hidden;
}
.module-work-carousel .pagination-wrapper {
  display: flex;
  justify-content: space-between;
}
@media (min-width: 668px) {
  .module-work-carousel .pagination-wrapper {
    position: absolute;
    right: var(--pad-40);
    top: var(--pad-40);
    bottom: var(--pad-40);
    flex-direction: column;
    z-index: 2;
  }
}
@media (min-width: 668px) {
  .module-work-carousel .work-media-controls-wrapper {
    position: absolute;
    left: var(--pad-40);
    top: var(--pad-40);
    display: flex;
    background-color: rgb(var(--white-rgb)/25%);
    backdrop-filter: blur(5px);
    border-radius: 40px;
    interpolate-size: allow-keywords;
    transition: background-color 250ms ease, width 250ms cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    white-space: nowrap;
    z-index: 2;
  }
  .module-work-carousel .work-media-controls-wrapper:hover {
    background-color: var(--white);
  }
  .module-work-carousel .work-media-controls-wrapper .media-control-buttons {
    display: flex;
    flex-shrink: 0;
    gap: var(--gap-40);
    padding-left: 9px;
    padding-right: min(1.25vw, 24px);
    transition: opacity 250ms ease;
  }
  .module-work-carousel .work-media-controls-wrapper .media-control-buttons .media-control-button {
    position: relative;
  }
  .module-work-carousel .work-media-controls-wrapper .media-control-buttons .media-control-button::after {
    content: "";
    position: absolute;
    inset: -15px;
  }
  .module-work-carousel .work-media-controls-wrapper.is-closed {
    width: calc(2 * var(--base-unit));
  }
  .module-work-carousel .work-media-controls-wrapper.is-closed .toggle-media-controls .icon-wrapper .icon-active {
    opacity: 0;
  }
  .module-work-carousel .work-media-controls-wrapper.is-closed .media-control-buttons {
    opacity: 0;
  }
  .module-work-carousel .work-media-controls-wrapper:not(.is-closed) {
    width: fit-content;
  }
  .module-work-carousel .work-media-controls-wrapper:not(.is-closed) .toggle-media-controls .icon-wrapper .icon-initial {
    opacity: 0;
  }
  .module-work-carousel .work-media-controls-wrapper:not(.is-closed) .toggle-media-controls .icon-wrapper .icon-active {
    opacity: 1;
  }
  .module-work-carousel .work-media-controls-wrapper:not(.is-closed) .media-control-buttons {
    opacity: 1;
  }
}
.module-work-carousel .work-media-controls-wrapper .media-control-button .icon-wrapper {
  display: grid;
}
@media (min-width: 668px) and (max-width: 1024px) {
  .module-work-carousel .work-media-controls-wrapper .media-control-button .icon-wrapper {
    width: 24px;
    margin: 0 auto;
  }
}
.module-work-carousel .work-media-controls-wrapper .media-control-button .icon-wrapper .icon-initial,
.module-work-carousel .work-media-controls-wrapper .media-control-button .icon-wrapper .icon-active {
  grid-area: 1/1;
  transition: opacity 250ms ease;
}
.module-work-carousel .work-media-controls-wrapper .media-control-button .icon-wrapper .icon-active {
  opacity: 0;
}
.module-work-carousel .work-media-controls-wrapper.is-active .icon-wrapper .icon-initial {
  opacity: 0;
}
.module-work-carousel .work-media-controls-wrapper.is-active .icon-wrapper .icon-active {
  opacity: 1;
}
.module-work-carousel .toggle-media-controls {
  width: calc(2 * var(--base-unit));
  aspect-ratio: 1/1;
  flex-shrink: 0;
  border-radius: 40px;
}

.work-carousel-slides {
  position: relative;
}
@media (max-width: 667px) {
  .work-carousel-slides {
    margin-bottom: 20px;
  }
}
@media (min-width: 668px) {
  .work-carousel-slides {
    aspect-ratio: 16/9;
  }
}
.work-carousel-slides .carousel-slide {
  position: relative;
}
@media (max-width: 667px) {
  .work-carousel-slides .carousel-slide {
    padding: var(--mbu-half);
    background-color: var(--white);
    border-radius: 10px;
  }
}
@media (min-width: 668px) {
  .work-carousel-slides .carousel-slide picture,
  .work-carousel-slides .carousel-slide .slide-media {
    max-width: none;
    width: 100%;
    height: 100%;
  }
}
@media (max-width: 667px) {
  .work-carousel-slides .carousel-slide .slide-media {
    width: 100%;
    margin-bottom: 20px;
    border-radius: 5px;
    aspect-ratio: 5/7;
    object-fit: cover;
  }
}
.work-carousel-slides .carousel-slide .project-details-wrapper {
  background: none;
  backdrop-filter: none;
}
@media (min-width: 668px) {
  .work-carousel-slides .carousel-slide .project-details-wrapper {
    right: calc(4 * var(--pad-40));
    gap: 40px;
    max-width: 700px;
  }
  .work-carousel-slides .carousel-slide .project-details-wrapper::before {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--white-rgb)/25%);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    content: "";
    transform-origin: bottom left;
    transition: background-color 350ms cubic-bezier(0.4, 0, 0.2, 1), top 350ms cubic-bezier(0.4, 0, 0.2, 1), right 350ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .work-carousel-slides .carousel-slide .project-details-wrapper:hover::before {
    background-color: var(--white);
  }
}
@media (max-width: 667px) {
  .work-carousel-slides .carousel-slide .project-details-wrapper .cta-link {
    margin: 20px 0 30px;
  }
}
.work-carousel-slides .carousel-slide .project-details-wrapper > * {
  position: relative;
  transition: opacity 250ms ease, visibility 250ms ease;
  z-index: 1;
}
.work-carousel-slides .carousel-slide .project-details-wrapper h3 {
  margin-right: 50px;
}
.work-carousel-slides .carousel-slide .project-details-wrapper .button-minimise {
  position: absolute;
  bottom: calc(100% - var(--pad-40) - var(--icon-size));
  left: calc(100% - var(--pad-40) - var(--icon-size));
  background: transparent;
  border: none;
  padding: 0;
  pointer-events: auto;
  transition: bottom 350ms cubic-bezier(0.4, 0, 0.2, 1), left 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.work-carousel-slides .carousel-slide .project-details-wrapper .button-minimise::after {
  content: "";
  position: absolute;
  inset: -10px;
}
.work-carousel-slides .carousel-slide .project-details-wrapper .button-minimise .icon-wrapper {
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.work-carousel-slides .carousel-slide .project-details-wrapper.is-minimised {
  pointer-events: none;
}
.work-carousel-slides .carousel-slide .project-details-wrapper.is-minimised::before {
  top: calc(100% - 2 * var(--pad-40) - var(--icon-size));
  right: calc(100% - 2 * var(--pad-40) - var(--icon-size));
}
.work-carousel-slides .carousel-slide .project-details-wrapper.is-minimised .button-minimise {
  bottom: var(--pad-40);
  left: var(--pad-40);
}
.work-carousel-slides .carousel-slide .project-details-wrapper.is-minimised .button-minimise .icon-wrapper {
  transform: rotate(180deg);
}
.work-carousel-slides .carousel-slide .project-details-wrapper.is-minimised > *:not(.button-minimise) {
  opacity: 0;
  visibility: hidden;
}

.project-details-wrapper {
  border-radius: 10px;
  backdrop-filter: blur(10px);
}
@media (min-width: 668px) {
  .project-details-wrapper {
    background-color: rgb(var(--white-rgb)/25%);
  }
}
@media (max-width: 667px) {
  .project-details-wrapper {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "tags" "title" "cta";
    gap: 20px;
    background-color: var(--white);
    text-align: left;
  }
  .project-details-wrapper .tags-list {
    grid-area: tags;
  }
  .project-details-wrapper .project-name {
    grid-area: title;
  }
  .project-details-wrapper .cta-link {
    grid-area: cta;
  }
}
@media (min-width: 668px) {
  .project-details-wrapper {
    position: absolute;
    left: var(--pad-40);
    bottom: var(--pad-40);
    display: flex;
    flex-direction: column;
    gap: var(--gap-40);
    padding: var(--pad-40);
  }
  .project-details-wrapper:hover::before {
    background-color: var(--white);
  }
}
@media (max-width: 667px) {
  .project-details-wrapper .project-details-footer {
    display: contents;
  }
}
@media (min-width: 668px) {
  .project-details-wrapper .project-details-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
}

.background-black .pagination-dot::before {
  background-color: var(--white);
}
.background-black .pagination-dot.is-active {
  border-color: var(--white);
}
.background-black li.slick-active .pagination-dot::before {
  border-color: var(--white);
}
.background-black .pagination-arrow .icon-wrapper svg path {
  fill: var(--white);
}

/* ----- M7: Card strip ----- */
.cards-list {
  display: flex;
}
@media (min-width: 668px) {
  .cards-list {
    gap: var(--gap-40);
    justify-content: space-between;
  }
}
@media (min-width: 668px) and (max-width: 1024px) {
  .cards-list {
    flex-wrap: wrap;
  }
  .cards-list:has(> li:first-child:nth-last-child(2n)) > li {
    flex: 0 0 calc((100% - var(--gap-40)) / 2);
  }
  .cards-list:has(> li:first-child:nth-last-child(3n)) > li {
    flex: 0 0 calc((100% - 2 * var(--gap-40)) / 3);
  }
}
@media (max-width: 667px) {
  .cards-list {
    flex-direction: column;
    gap: 15px;
  }
}
.cards-list li {
  flex: 1;
}
@media (min-width: 668px) {
  .cards-list li .card {
    min-height: 100%;
  }
}

/* ----- M8: Card panel ----- */
@media (min-width: 668px) {
  .card-panel-layout {
    display: grid;
    gap: var(--gap-40);
  }
}
@media (min-width: 1025px) {
  .card-panel-layout {
    grid-template-columns: 1fr calc(50% + 2 * var(--base-unit));
  }
}
.card-panel-layout .card-panel-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--gap-40));
}
@media (min-width: 1025px) {
  .card-panel-layout .card-panel-text-wrapper {
    padding: var(--pad-40);
    justify-content: space-evenly;
  }
}
@media (max-width: 667px) {
  .card-panel-layout .card-panel-text-wrapper {
    margin-bottom: 30px;
  }
}
@media (min-width: 668px) {
  .card-panel-layout .cards-wrapper {
    display: flex;
    gap: var(--gap-40);
  }
}

/* ----- Card base ----- */
/* Used for M9 Tilt card, M10 Article card, Case study card */
.card {
  position: relative;
  color: var(--black);
}
.card .card-image-wrapper {
  border-radius: 10px;
}
.card .card-text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (max-width: 667px) {
  .card .card-text-wrapper {
    text-align: left;
  }
}
@media (min-width: 668px) and (max-width: 1024px) {
  .card .card-text-wrapper h3, .card .card-text-wrapper h4, .card .card-text-wrapper h5 {
    overflow-wrap: break-word;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}
.card:not(.card--tilt) {
  min-height: 100%;
  border-radius: var(--border-radius-20);
}
@media (max-width: 667px) {
  .card:not(.card--tilt) {
    border-radius: 10px;
  }
}
.card:not(.card--tilt) .card-image-wrapper {
  overflow: hidden;
}
.card:not(.card--tilt) .card-image-wrapper .card-image {
  opacity: 0.8;
  transition: opacity 250ms ease, transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.card:not(.card--tilt):hover .card-image {
  opacity: 1;
  transform: scale(1.05);
}
.card.card--article {
  padding: var(--pad-40);
}
.card.card--article .card-image-wrapper {
  margin-bottom: var(--base-unit);
}
.card.card--article .card-text-wrapper {
  gap: var(--gap-40);
}
@media (min-width: 668px) {
  .card.card--feature {
    padding: var(--pad-20) var(--pad-20) var(--pad-40);
  }
}
@media (max-width: 667px) {
  .card.card--feature {
    padding: 5px;
    text-align: left;
  }
}
@media (min-width: 668px) {
  .card.card--feature .card-image-wrapper {
    margin-bottom: var(--pad-20);
  }
}
.card.card--feature .card-text-wrapper {
  gap: var(--gap-20);
}
@media (max-width: 667px) {
  .card.card--feature .card-text-wrapper {
    padding: 15px 10px;
  }
}

/* ----- M9: Tilt card ----- */
.card--tilt {
  --rotate-x: 0deg;
  --rotate-y: 0deg;
  background-color: transparent;
  border: var(--pad-40) solid var(--black);
  border-radius: var(--border-radius-20);
  display: flex;
  flex-direction: column;
  position: relative;
  transform: perspective(800px) rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
  transition: transform 0.1s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}
.card--tilt::before {
  content: "";
  position: absolute;
  inset: calc(var(--pad-40) * -1);
  background-color: var(--black);
  transform: translateZ(-70px);
}
.card--tilt .card-image-wrapper {
  width: 100%;
  /* height: 240px; */
  position: relative;
  transform-style: preserve-3d;
  border-bottom: var(--pad-40) solid var(--black);
}
.card--tilt .card-image-wrapper .card-image {
  position: relative; /* was abs */
  top: -16px;
  left: 0;
  width: 100%;
  margin: -5px 0 -5px 0;
  /*height: 100%;*/
  object-fit: cover;
  aspect-ratio: 6/4;
  transform: translateZ(-65px) scale(1.11);
  pointer-events: none;
}
.card--tilt .card-text-wrapper {
  background-color: var(--white);
  padding: var(--pad-20);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--gap-20);
  border-radius: var(--border-radius-10);
}
@media (max-width: 667px) {
  .card--tilt .card-text-wrapper {
    background-color: var(--black);
    color: var(--white);
  }
}

/* ------ M12: Content container ----- */
.content-panels-wrapper {
  display: flex;
  flex-direction: column;
}
@media (max-width: 667px) {
  .content-panels-wrapper {
    gap: var(--mbu);
  }
}
@media (min-width: 668px) {
  .content-panels-wrapper {
    gap: var(--base-unit);
  }
}

/* ----- M13: Content panel ----- */
.module-feature-panel {
  position: relative;
  display: flex;
  /*
  &:not(:last-of-type) {
  @include mobile {
  margin-bottom: var(--mbu);
  }

  @include tablet-up {
  margin-bottom: var(--base-unit);	
  }
  }
  */
}
@media (max-width: 667px) {
  .module-feature-panel {
    padding: 75vw var(--mbu-half) var(--mbu-half);
  }
}
@media (min-width: 668px) {
  .module-feature-panel {
    padding: var(--pad-40) 0;
    align-items: center;
    aspect-ratio: 1720/740;
  }
}
.module-feature-panel:has(.align-right) {
  justify-content: flex-end;
}

.feature-panel-background-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-20);
}

.feature-panel-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--gap-40);
  border-radius: var(--border-radius-20);
}
@media (max-width: 667px) {
  .feature-panel-text-wrapper {
    position: relative;
    padding: var(--mbu) var(--mbu-half);
    gap: var(--mbu);
    background-color: var(--white);
    border-radius: 5px;
    color: var(--black);
  }
}
@media (min-width: 668px) {
  .feature-panel-text-wrapper {
    width: 50%;
    min-width: 320px;
    padding: var(--pad-40);
    background-color: rgb(var(--white-rgb)/80%);
    backdrop-filter: blur(20px);
    align-items: flex-start;
  }
}
@media (min-width: 1025px) {
  .feature-panel-text-wrapper {
    width: min(26.0416666667vw, 500px);
  }
}
@media (min-width: 1025px) {
  .feature-panel-text-wrapper.align-left {
    margin-left: 7.65625vw;
  }
}
@media (min-width: 668px) and (max-width: 1024px) {
  .feature-panel-text-wrapper.align-left {
    margin-left: calc(2 * var(--pad-40));
  }
}
@media (min-width: 1025px) {
  .feature-panel-text-wrapper.align-right {
    margin-right: 7.65625vw;
  }
}
@media (min-width: 668px) and (max-width: 1024px) {
  .feature-panel-text-wrapper.align-right {
    margin-right: calc(2 * var(--pad-40));
  }
}

/*  mobile-only dropdown (details/summary) */
.mobile-dropdown {
  position: relative;
}
@media (max-width: 667px) {
  .mobile-dropdown {
    width: 100%;
  }
}
.mobile-dropdown summary {
  list-style: none;
}
.mobile-dropdown summary::-webkit-details-marker {
  display: none;
}
@media (max-width: 667px) {
  .mobile-dropdown summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background-color: var(--tint);
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    z-index: 2;
  }
  .mobile-dropdown summary::before {
    content: "";
    display: block;
    width: 16px;
    height: 19px;
    flex-shrink: 0;
    background-color: var(--black);
    mask-image: url("/images/icons/arrow-down.svg");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    transition: transform 250ms ease;
  }
}
@media (max-width: 667px) {
  .mobile-dropdown[open] > summary {
    position: relative;
    z-index: 3;
    background-color: var(--white);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .mobile-dropdown[open] > summary::before {
    transform: scaleY(-1);
  }
}
@media (max-width: 667px) {
  .mobile-dropdown .mobile-dropdown-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 2;
    padding: var(--mbu-half);
    background-color: var(--white);
    border-radius: 0 0 5px 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}
@media (min-width: 668px) {
  .mobile-dropdown summary {
    pointer-events: none;
    cursor: default;
  }
}

@media (max-width: 667px) {
  body:has(.mobile-dropdown[open])::after {
    content: "";
    position: fixed;
    inset: 0;
    background-color: rgb(var(--black-rgb)/25%);
    z-index: 1;
    pointer-events: none;
  }
}

/* ----- M14: Featured projects grid ----- */
@media (min-width: 668px) {
  .featured-projects-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-40);
  }
}

.featured-project-item {
  position: relative;
}
@media (max-width: 667px) {
  .featured-project-item {
    padding: var(--mbu-half);
    background-color: var(--white);
    border-radius: 10px;
  }
}
.featured-project-item .featured-project-media {
  border-radius: var(--border-radius-20);
}
@media (max-width: 667px) {
  .featured-project-item .featured-project-media {
    width: 100%;
    margin-bottom: 20px;
    border-radius: 5px;
  }
}
.featured-project-item .project-details-wrapper {
  right: var(--pad-40);
  gap: var(--gap-20);
}
@media (min-width: 668px) and (max-width: 1024px) {
  .featured-project-item {
    padding: 15px;
    background-color: var(--white);
    border-radius: 10px;
  }
  .featured-project-item .featured-project-media {
    margin-bottom: 20px;
    border-radius: 5px;
  }
  .featured-project-item .project-details-wrapper {
    position: static;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "tags" "title" "cta";
    gap: 20px;
    padding: 0;
    text-align: left;
  }
  .featured-project-item .project-details-wrapper .tags-list {
    grid-area: tags;
  }
  .featured-project-item .project-details-wrapper .project-name {
    grid-area: title;
  }
  .featured-project-item .project-details-wrapper .cta-link {
    grid-area: cta;
  }
  .featured-project-item .project-details-wrapper .project-details-footer {
    display: contents;
  }
}

/* ----- Case Study Listing ----- */
.case-study-explorer-upper {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pad-40) + var(--pad-20));
}

.case-study-mobile-actions {
  display: flex;
  gap: 15px;
  justify-content: space-between;
  margin-bottom: var(--base-unit);
}
.case-study-mobile-actions .button {
  flex: 1;
}

.filter-label {
  margin-bottom: 8px;
  font-size: calc(1.25rem * var(--text-scale, 1));
  font-style: normal;
  font-weight: 700;
  line-height: 1.4;
}

.case-study-toolbar {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-40);
  margin-bottom: var(--base-unit);
}
@media (max-width: 667px) {
  .case-study-toolbar {
    gap: var(--mbu-half);
  }
}
@media (min-width: 668px) and (max-width: 1024px) {
  .case-study-toolbar {
    flex-direction: column;
  }
}
.case-study-toolbar .fieldset-label {
  margin-bottom: var(--gap-20);
}
@media (min-width: 668px) and (max-width: 1024px) {
  .case-study-toolbar .fieldset-label {
    text-align: center;
  }
}
.case-study-toolbar .fieldset {
  display: flex;
}
@media (max-width: 667px) {
  .case-study-toolbar .fieldset {
    border: none;
  }
}
@media (min-width: 668px) {
  .case-study-toolbar .fieldset {
    flex-direction: column;
    padding: var(--pad-20) var(--pad-40) var(--pad-40);
    border-radius: var(--border-radius-20);
  }
}
.case-study-toolbar .fieldset .controls-group {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
@media (max-width: 667px) {
  .case-study-toolbar .fieldset .controls-group {
    gap: 10px;
  }
}
@media (min-width: 668px) and (max-width: 1024px) {
  .case-study-toolbar .fieldset .controls-group {
    justify-content: center;
  }
}
@media (min-width: 668px) {
  .case-study-toolbar .fieldset .controls-group {
    flex-wrap: wrap;
    gap: var(--gap-20);
  }
}
.case-study-toolbar .case-study-filters {
  flex: 1;
}
.case-study-toolbar .case-study-filters .filter-wrapper {
  min-height: 100%;
  flex: 1;
}
.case-study-toolbar .case-study-filters .filter-wrapper select {
  width: 100%;
}

.view-toggle-button {
  display: flex;
  border-radius: 40px;
  width: calc(2 * var(--base-unit));
  aspect-ratio: 1/1;
  background-color: rgb(var(--white-rgb)/25%);
}
.view-toggle-button .icon-wrapper {
  width: 24px;
  margin: auto;
}
.view-toggle-button.is-active {
  background-color: var(--white);
}
.view-toggle-button.is-active .icon-wrapper .stroke-white {
  stroke: var(--black);
}

.case-study-listing {
  display: grid;
  gap: var(--gap-40);
}
@media (max-width: 667px) {
  .case-study-listing {
    gap: var(--mbu-half);
  }
  .case-study-listing .card {
    padding: 5px;
  }
}
@media (min-width: 668px) {
  .case-study-listing.case-study-listing--large-view {
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-40);
  }
}
@media (min-width: 668px) {
  .case-study-listing.case-study-listing--small-view {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 667px) {
  .case-study-listing.case-study-listing--small-view {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .case-study-listing.case-study-listing--small-view .card.card--feature .card-text-wrapper {
    padding: 10px 5px 10px;
  }
}
@media (min-width: 668px) {
  .case-study-listing.case-study-listing--compact-view {
    grid-template-columns: 1fr 1fr;
  }
}
.case-study-listing.case-study-listing--compact-view .card--feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-40);
}
@media (min-width: 668px) {
  .case-study-listing.case-study-listing--compact-view .card--feature {
    padding: var(--pad-20);
  }
}
@media (max-width: 667px) {
  .case-study-listing.case-study-listing--compact-view .card--feature {
    gap: 5px;
  }
}
.case-study-listing.case-study-listing--compact-view .card--feature .card-image-wrapper {
  margin-bottom: 0;
}
.case-study-listing.case-study-listing--compact-view .card--feature .card-text-wrapper {
  justify-content: space-evenly;
}
@media (max-width: 667px) {
  .case-study-listing.case-study-listing--compact-view .card--feature .card-text-wrapper {
    padding: 10px;
  }
}
@media (max-width: 667px) {
  .case-study-listing {
    gap: var(--mbu-half);
  }
}

/* ----- Case Study Mobile Filters Modal ----- */
#modal-filters .modal-inner {
  background-color: var(--black);
  color: var(--white);
  --background-color: var(--black);
  --foreground-colour: var(--white);
}
#modal-filters .modal-inner .modal-close .icon-wrapper .stroke-black {
  stroke: var(--white);
}

.filters-modal-layout {
  display: flex;
  flex-direction: column;
  gap: var(--gap-20);
  text-align: left;
  /*
  .filter-dropdown-toggle {
  background-color: var(--tint);
  }
  */
}

.filters-modal-buttons-wrapper {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

/* ----- Case Study Results ----- */
.module-case-study-results .module-split-panel {
  margin-top: var(--gap-40);
}

.results-list {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--gap-40));
}
@media (max-width: 667px) {
  .results-list {
    gap: 30px;
  }
}

.result-item {
  display: flex;
  font-weight: 700;
  gap: var(--gap-40);
}
@media (max-width: 667px) {
  .result-item {
    align-items: flex-start;
    font-size: 1rem;
    text-align: left;
  }
}
@media (min-width: 668px) {
  .result-item .icon-wrapper {
    width: calc(2.25 * var(--base-unit));
  }
}
@media (max-width: 667px) {
  .result-item .icon-wrapper {
    width: 32px;
  }
}
.result-item .highlight-text {
  display: block;
  margin-bottom: var(--gap-20);
  font-weight: 400;
  line-height: 1.1;
}
@media (min-width: 668px) {
  .result-item .highlight-text {
    font-size: calc(3.125rem * var(--text-scale, 1));
  }
}
@media (max-width: 667px) {
  .result-item .highlight-text {
    margin-bottom: 10px;
    font-size: 1.875rem;
  }
}

.testimonial {
  position: relative;
  text-align: center;
}
.testimonial .testimonial-text {
  margin-bottom: var(--outer-padding);
  text-wrap: pretty;
}
.testimonial::before {
  display: block;
  width: calc(2.25 * var(--base-unit));
  height: calc(2.25 * var(--base-unit));
  margin: 0 auto var(--gap-40);
  background-color: var(--black);
  -webkit-mask: url("/images/icons/quote.svg") no-repeat center/contain;
  mask: url("/images/icons/quote.svg") no-repeat center/contain;
  content: "";
}
@media (max-width: 480px) {
  .testimonial::before {
    width: 32px;
    height: 32px;
  }
}
.testimonial p {
  font-style: italic;
}
.testimonial .testimonial-name {
  display: block;
  margin-bottom: var(--gap-20);
}
/* ----- Lefty-righty Split Panel ----- */
.module-split-panel {
  display: grid;
  gap: var(--gap-40);
  /*
  &.mobile-swap-column-order {
  @include mobile {
  grid-template-areas: "heading" "image" "text";
  grid-template-rows: auto auto 1fr;

  .panel-text-wrapper {
  display: contents; // allow heading to participate in the parent grid
  grid-area: text;

  > h2, > h3, > h4 {
  grid-area: heading;
  }
  }

  picture,
  video {
  grid-area: image;
  }
  }
  }
  */
}
@media (min-width: 668px) {
  .module-split-panel {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 668px) {
  .module-split-panel .panel-text-wrapper {
    padding: 30px 0;
  }
}
.module-split-panel.module-split-panel--thick-gutter {
  gap: calc(var(--gap-40) + 2 * var(--outer-padding));
}

@media (max-width: 667px) {
  .mobile-swap-column-order {
    grid-template-areas: "heading" "image" "text";
    grid-template-rows: auto auto 1fr;
  }
  .mobile-swap-column-order .panel-text-wrapper {
    display: contents;
    grid-area: text;
  }
  .mobile-swap-column-order .panel-text-wrapper .heading-2 {
    grid-area: heading;
  }
  .mobile-swap-column-order picture,
  .mobile-swap-column-order video {
    grid-area: image;
  }
}

.panel-section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-40);
  padding: var(--outer-padding);
  border-radius: var(--border-radius-40);
}
@media (max-width: 667px) {
  .panel-section {
    padding: var(--mbu) var(--mbu-half);
    border-radius: 10px;
  }
  .panel-section .tags-list {
    justify-content: center;
  }
}

.case-study-overview {
  display: grid;
  gap: var(--gap-40);
}
.case-study-overview .panel-section-intro .rich-text-wrapper {
  margin-top: var(--gap-40);
}
.case-study-overview .panel-section-intro {
  grid-area: intro;
}
.case-study-overview .jump-links {
  grid-area: jump-links;
}
.case-study-overview .panel-section {
  grid-area: objectives;
}
@media (max-width: 667px) {
  .case-study-overview {
    grid-template-areas: "intro" "objectives" "jump-links";
  }
}
@media (min-width: 668px) {
  .case-study-overview {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "intro      objectives" "jump-links  objectives";
  }
}

.panel-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-20);
}

/* TODO: merge with split panel or feature panel if need be */
.module-content-panel {
  display: grid;
  gap: var(--gap-40);
  border-radius: var(--border-radius-20);
}
@media (min-width: 668px) {
  .module-content-panel {
    padding: var(--pad-40);
    grid-template-columns: 50% minmax(0, 1fr);
  }
}
@media (max-width: 667px) {
  .module-content-panel {
    padding: var(--mbu) var(--mbu-half);
  }
}
.module-content-panel:not([class*=background-]) {
  background-color: var(--white);
}
@media (min-width: 1025px) {
  .module-content-panel:has(.content-panel-text-wrapper.width-narrow) {
    grid-template-columns: max(35%, 400px) minmax(0, 1fr);
  }
}
@media (min-width: 668px) {
  .module-content-panel .panel-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap-40);
    padding: var(--pad-20) var(--outer-padding);
    justify-content: center;
  }
}
.module-content-panel .panel-media {
  border-radius: var(--border-radius-10);
}

/* ----- Case Study Detail ----- */
@media (min-width: 668px) {
  .objectives-list {
    margin: auto 0;
  }
}
@media (max-width: 667px) {
  .objectives-list {
    text-align: left;
  }
}
.objectives-list li {
  display: flex;
  align-items: center;
  gap: var(--gap-40);
}
.objectives-list li:not(:last-child) {
  margin-bottom: calc(var(--base-unit) * 0.75);
}

.jump-links {
  padding: var(--outer-padding);
  border-radius: var(--border-radius-20);
}
@media (max-width: 667px) {
  .jump-links {
    padding: 20px;
  }
}
.jump-links [class^=heading-] {
  margin-bottom: var(--base-unit);
}

.jump-links-list {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}
.jump-links-list li {
  flex-shrink: 0;
}
@media (max-width: 1024px) {
  .jump-links-list {
    width: 100%;
    flex-direction: column;
  }
  .jump-links-list li {
    width: 100%;
  }
  .jump-links-list li .button {
    width: 100%;
  }
  .jump-links-list li .button .text-wrapper {
    margin: 0 auto;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .jump-links-list .button {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* ----- Work grid ----- */
@media (min-width: 668px) {
  .one-third {
    width: 33.3333333333%;
  }
  .two-thirds {
    width: 66.6666666667%;
  }
}
/* ----- Generic Modal Styles ----- */
@starting-style {
  .modal {
    opacity: 0;
  }
}
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  opacity: 1;
  transition: opacity 250ms, display 250ms allow-discrete;
  z-index: 20;
}
@media (max-width: 667px) {
  .modal {
    align-items: flex-start;
    overflow-y: auto;
  }
}
.modal[hidden] {
  opacity: 0;
  display: none;
}
.modal .modal-inner {
  position: relative;
  width: 100vw;
  max-width: 1200px;
  background-color: var(--white);
  border-radius: var(--border-radius-40);
}
@media (min-width: 668px) {
  .modal .modal-inner {
    display: grid;
    grid-template-rows: auto 1fr;
    max-height: 96vh;
  }
}
@media (min-width: 1920px) {
  .modal .modal-inner {
    max-width: 60vw;
  }
}
.modal .modal-inner .modal-close {
  width: 50px;
  height: 50px;
  display: flex;
  z-index: 1;
}
@media (max-width: 667px) {
  .modal .modal-inner .modal-close {
    width: 70px;
    height: 70px;
  }
}
.modal .modal-inner .modal-close .icon-wrapper {
  width: 50px;
  height: 50px;
  margin: auto;
}
.modal .modal-inner .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
@media (min-width: 668px) {
  .modal .modal-inner .modal-header {
    padding: 30px;
  }
}
@media (max-width: 667px) {
  .modal .modal-inner .modal-header {
    padding: 20px;
  }
}
.modal .modal-inner .modal-body {
  padding: 0 30px 30px;
}
@media (min-width: 668px) {
  .modal .modal-inner .modal-body {
    overflow-y: auto;
  }
}

/* ----- Contact Modal ----- */
.contact-options,
.contact-form {
  margin-top: 15px;
}

.contact-options {
  display: flex;
  gap: 10px;
}
@media (min-width: 668px) {
  .contact-options {
    flex-direction: column;
  }
}
.contact-options .contact-card {
  padding: 15px;
  flex: 1;
  background-color: var(--black);
  color: var(--white);
}
@media (min-width: 668px) {
  .contact-options .contact-card {
    gap: 15px;
  }
}
@media (max-width: 667px) {
  .contact-options .contact-card {
    gap: 10px;
  }
}
.contact-options .contact-card .icon-wrapper .fill-white {
  fill: var(--black);
}
.contact-options .contact-card .icon-wrapper .fill-black {
  fill: var(--white);
}
@media (min-width: 668px) {
  .contact-options .contact-card .icon-wrapper {
    width: 50px;
    height: 50px;
  }
}
@media (max-width: 667px) {
  .contact-options .contact-card .icon-wrapper {
    width: 24px;
    height: 24px;
  }
}
@media (max-width: 667px) {
  .contact-options .contact-card .contact-optoion-text {
    font-size: 0.875rem;
  }
}
@media (min-width: 668px) {
  .contact-options .contact-card .contact-optoion-text {
    font-size: calc(1.625rem * var(--text-scale, 1));
    font-weight: 600;
    line-height: 1.1;
  }
}

.contact-success {
  display: flex;
  align-items: center;
  aspect-ratio: 16/9;
  background: #F0C800 url(/images/contact-success-bg.png) 0 0/cover no-repeat;
  border-radius: var(--border-radius-20);
}
@media (min-width: 668px) {
  .contact-success {
    padding: 14vh var(--pad-40);
  }
}
.contact-success .contact-success-text-wrapper {
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-40);
  margin-left: min(1.5625vw, 30px);
  padding: var(--pad-40);
  backdrop-filter: blur(20px);
  background-color: rgb(var(--black-rgb)/80%);
  border-radius: var(--border-radius-20);
  color: var(--white);
}

.required-asterisk {
  width: 12px;
  height: 12px;
  background: transparent url(/images/icons/asterisk.svg) center/contain no-repeat;
}

.field-group {
  position: relative;
  margin-bottom: 15px;
  padding: 30px;
  border-radius: var(--border-radius-10);
}
@media (max-width: 667px) {
  .field-group {
    padding: 15px;
  }
  .field-group:has(.required-indicator-key) {
    padding-top: 40px;
  }
}
.field-group .required-indicator-key {
  position: absolute;
  top: 15px;
  right: 30px;
  padding-left: 20px;
  background: transparent url(/images/icons/asterisk.svg) left center no-repeat;
  font-size: 0.75rem;
}

@media (min-width: 668px) {
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

label {
  display: block;
  font-size: 0.75rem;
}

input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border: 1px solid var(--black);
  border: 1px solid var(--foreground-colour);
  border-radius: 4px;
  background-color: transparent;
  vertical-align: middle;
  position: relative;
}
input[type=checkbox]::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
}
input[type=checkbox]:checked::before {
  background-color: var(--black);
  background-color: var(--foreground-colour);
  mask-image: url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 9 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.81663 1.82011L3.83657 6.80017C3.7202 6.91646 3.56242 6.98179 3.39791 6.98179C3.23339 6.98179 3.07561 6.91646 2.95924 6.80017L0.181423 4.00762C0.0652501 3.89126 0 3.73356 0 3.56914C0 3.40473 0.0652501 3.24703 0.181423 3.13067L0.957133 2.35496C1.07344 2.23915 1.23089 2.17412 1.39502 2.17412C1.55916 2.17412 1.71661 2.23915 1.83291 2.35496L3.41342 3.88777L7.16631 0.181036C7.28263 0.0650999 7.44016 0 7.60439 0C7.76862 0 7.92615 0.0650999 8.04247 0.181036L8.81624 0.938905C8.87443 0.996569 8.92063 1.06518 8.95217 1.14079C8.98371 1.2164 8.99996 1.29751 9 1.37943C9.00004 1.46135 8.98385 1.54247 8.95238 1.6181C8.92091 1.69374 8.87477 1.7624 8.81663 1.82011Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 9 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.81663 1.82011L3.83657 6.80017C3.7202 6.91646 3.56242 6.98179 3.39791 6.98179C3.23339 6.98179 3.07561 6.91646 2.95924 6.80017L0.181423 4.00762C0.0652501 3.89126 0 3.73356 0 3.56914C0 3.40473 0.0652501 3.24703 0.181423 3.13067L0.957133 2.35496C1.07344 2.23915 1.23089 2.17412 1.39502 2.17412C1.55916 2.17412 1.71661 2.23915 1.83291 2.35496L3.41342 3.88777L7.16631 0.181036C7.28263 0.0650999 7.44016 0 7.60439 0C7.76862 0 7.92615 0.0650999 8.04247 0.181036L8.81624 0.938905C8.87443 0.996569 8.92063 1.06518 8.95217 1.14079C8.98371 1.2164 8.99996 1.29751 9 1.37943C9.00004 1.46135 8.98385 1.54247 8.95238 1.6181C8.92091 1.69374 8.87477 1.7624 8.81663 1.82011Z' fill='black'/%3E%3C/svg%3E");
}

.field-wrapper {
  margin-bottom: 15px;
}
.field-wrapper label {
  margin-bottom: 7px;
}
.field-wrapper .text-field {
  width: 100%;
  background-color: var(--tint);
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
  font-size: 0.875rem;
}
.field-wrapper .text-field[required] {
  padding-right: 35px;
  background: var(--tint) url(/images/icons/asterisk.svg) calc(100% - 15px) center no-repeat;
}
.field-wrapper textarea[required] {
  background-position: right 1rem top 1rem;
}

form.submission-attempt-made .text-field:invalid,
form.submission-attempt-made input[type=checkbox]:invalid {
  border: 1px solid #FF418D;
}
form.submission-attempt-made .text-field:invalid:focus-visible,
form.submission-attempt-made input[type=checkbox]:invalid:focus-visible {
  outline: 2px solid #FF418D;
}
form.submission-attempt-made .text-field:valid,
form.submission-attempt-made input[type=checkbox]:valid {
  border: 1px solid #00DDA1;
}
form.submission-attempt-made .text-field:valid:focus-visible,
form.submission-attempt-made input[type=checkbox]:valid:focus-visible {
  outline: 2px solid #00DDA1;
}

/* Contact modal - TODO: move where it should be (wherever that is) */
.contact-modal-layout {
  display: flex;
}
@media (max-width: 667px) {
  .contact-modal-layout {
    flex-direction: column;
    gap: var(--mbu-half);
  }
}
@media (min-width: 668px) {
  .contact-modal-layout {
    gap: var(--gap-40);
  }
}
.contact-modal-layout .contact-options-panel {
  flex: 0 0 min(14.5833333333vw, 280px);
}
.contact-modal-layout .contact-form-panel {
  flex: 1;
}

.form-footer {
  display: flex;
  flex-direction: column;
  padding: 0 var(--pad-30);
  gap: 20px;
}
@media (min-width: 668px) {
  .form-footer {
    padding-bottom: var(--pad-30);
  }
}
.form-footer .consent-group {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.form-footer .consent-group:has(input[type=checkbox]:required)::before {
  position: absolute;
  right: 100%;
  margin-right: 20px;
  width: 10px;
  height: 10px;
  background: transparent url(/images/icons/asterisk.svg) center/contain no-repeat;
  content: "";
}
.form-footer .consent-group .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.form-footer .submit-row {
  display: flex;
  justify-content: flex-end;
}

.button-spinner-wrapper {
  display: grid;
  grid-template-areas: "stack";
}
.button-spinner-wrapper .button,
.button-spinner-wrapper .spinner {
  grid-area: stack;
  transition: opacity 150ms ease;
}
.button-spinner-wrapper .spinner {
  opacity: 0;
  place-self: center;
  pointer-events: none;
}
.button-spinner-wrapper .spinner.is-visible {
  opacity: 1;
}
.button-spinner-wrapper:has(.spinner.is-visible) .button {
  opacity: 0;
  pointer-events: none;
}

form.is-submitting fieldset,
form.is-submitting .form-footer > :not(.submit-row), form.is-submitting > :not(fieldset):not(.form-footer) {
  opacity: 0.25;
  pointer-events: none;
}

.contact-modal-layout:has(form.is-submitting) .contact-options-panel,
.contact-form-panel:has(form.is-submitting) > :not(form) {
  opacity: 0.25;
  pointer-events: none;
}

/* TODO: should this go in UI elements? */
.select-wrapper {
  position: relative;
}
.select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  background-color: rgb(var(--white-rgb)/80%);
  border: none;
  border-radius: 5px;
  padding: 10px 40px 10px 20px;
  font-size: calc(1.25rem * var(--text-scale, 1));
}
.select-wrapper::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  pointer-events: none;
  background-color: var(--black);
  mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.8125 9H15.1875' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 2.8125V15.1875' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.8125 9H15.1875' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 2.8125V15.1875' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}
@media (min-width: 668px) {
  .filter-dropdown {
    position: relative;
    color: var(--black);
  }
}

.filter-dropdown-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: none;
  border-radius: 5px;
  font-size: calc(1.25rem * var(--text-scale, 1));
  text-align: left;
  cursor: pointer;
}
@media (max-width: 667px) {
  .filter-dropdown-toggle {
    padding: 10px 0;
  }
}
@media (min-width: 668px) {
  .filter-dropdown-toggle {
    padding: 14px 45px 13px 20px;
    background-color: rgb(var(--white-rgb)/80%);
  }
}
.filter-dropdown-toggle::before, .filter-dropdown-toggle::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 668px) {
  .filter-dropdown-toggle::before, .filter-dropdown-toggle::after {
    background-color: var(--black);
  }
}
@media (max-width: 667px) {
  .filter-dropdown-toggle::before, .filter-dropdown-toggle::after {
    background-color: var(--white);
  }
}
.filter-dropdown-toggle::after {
  transform: rotate(90deg);
}
.is-active .filter-dropdown-toggle::after {
  transform: rotate(90deg) scaleX(0);
}

@media (min-width: 668px) {
  .filter-dropdown-list {
    --foreground-colour: var(--black);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    min-width: max-content;
    margin-top: 15px;
    padding: 15px 20px;
    background-color: var(--white);
    background-color: rgb(var(--white-rgb)/90%);
    backdrop-filter: blur(5px);
    border-radius: 5px;
    transition: opacity 150ms ease, transform 150ms cubic-bezier(0.4, 0, 0.2, 1), visibility 150ms ease;
  }
}
@media (max-width: 667px) {
  .filter-dropdown-list {
    display: none;
  }
  .is-active > .filter-dropdown-list {
    display: block;
  }
}

.filter-dropdown:not(.is-active) .filter-dropdown-list {
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
}

.filter-dropdown-option {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.875rem;
  cursor: pointer;
}
.filter-dropdown-option input[type=checkbox] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.filter-dropdown-option:has(input[type=checkbox]:checked) {
  font-weight: 600;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--white);
  color: var(--black);
  --background-color: var(--white);
  --foreground-colour: var(--black);
}
@media (min-width: 668px) {
  body {
    padding-top: min(2.6041666667vw, 50px);
  }
}
@media (max-width: 667px) {
  body {
    padding-top: 100px;
    text-align: center;
  }
}

.theme-is-transitioning,
.theme-is-transitioning *:not(.orbiting-icons):not(.orbiting-icons .icon-wrapper),
.theme-is-transitioning *::before,
.theme-is-transitioning *::after {
  transition: background-color 1s ease, border-color 1s ease, color 1s ease, fill 1s ease, stroke 1s ease !important;
  transition-delay: 0 !important;
}

/* ----- Debug ----- */
.debug-panel {
  position: fixed;
  left: 10px;
  bottom: 10px;
  padding: 15px;
  width: 450px;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  color: white;
  font-size: calc(0.875rem * var(--text-scale, 1));
  z-index: 999;
}
.debug-panel .debug-panel-close {
  float: right;
  padding: 3px 5px;
  border: var(--border-1px) solid white;
  border-radius: 2px;
  color: inherit;
}
.debug-panel label {
  display: block;
  color: white;
  margin-bottom: 10px;
}

.show-dev-guides *:focus {
  outline: var(--border-1px) solid orange !important;
  outline-offset: 2px;
}
.show-dev-guides *:active {
  outline: 2px solid green !important;
}
.show-dev-guides .constrained {
  outline: 1px dotted lime;
}
.show-dev-guides .constrained > * {
  outline: 1px dotted fuchsia;
}
.show-dev-guides li {
  outline: 1px dashed orange;
}
.show-dev-guides img {
  outline: var(--border-1px) solid purple;
}
.show-dev-guides .row {
  outline: 1px dashed red;
}
.show-dev-guides .row .column {
  outline: 1px dotted blue;
}
.show-dev-guides button {
  outline: 1px dashed fuchsia;
}
.show-dev-guides .icon-wrapper {
  border: 1px dotted #555;
}
.show-dev-guides .breadcrumb-list li:not(:first-child)::before {
  outline: 1px dashed lime;
}
.show-dev-guides .breadcrumb-list li {
  outline: 1px dashed red;
}
.show-dev-guides::before {
  position: fixed;
  top: 0;
  left: 0;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  content: "No breakpoint specified";
  z-index: 999;
}
@media (max-width: 667px) {
  .show-dev-guides::before {
    background-color: rgba(200, 20, 20, 0.8);
    content: "Mobile";
  }
}
@media (min-width: 668px) and (max-width: 1024px) {
  .show-dev-guides::before {
    background-color: rgba(200, 170, 20, 0.8);
    content: "Tablet";
  }
}
@media (min-width: 1025px) and (max-width: 1919px) {
  .show-dev-guides::before {
    background-color: rgba(20, 200, 200, 0.8);
    content: "Desktop (small)";
  }
}
@media (min-width: 1920px) {
  .show-dev-guides::before {
    background-color: rgba(200, 20, 200, 0.8);
    content: "Desktop (large)";
  }
}

/* ----- Utility classes ----- */
.outlined {
  border: 2px solid var(--foreground-colour);
}

.background-white {
  background-color: var(--white);
  color: var(--black);
  --background-color: var(--white);
  --foreground-colour: var(--black);
}

.background-black {
  background-color: var(--black);
  color: var(--white);
  --background-color: var(--black);
  --foreground-colour: var(--white);
}
.background-black .card {
  background-color: var(--white);
  color: var(--black);
}

.background-tint {
  background-color: var(--tint);
}
.background-tint .card {
  background-color: var(--black);
  color: var(--white);
}

.fill-black {
  fill: var(--black);
}

.fill-white {
  fill: var(--white);
}

.stroke-black {
  stroke: var(--black);
}

.stroke-white {
  stroke: var(--white);
}

.text-align-centre {
  text-align: center;
}

.remove-padding {
  padding: 0 !important;
}

.flex-column {
  display: flex;
  flex-direction: column;
  gap: var(--gap-40);
}

.overflow-hidden {
  overflow: hidden;
}

/* ----- Layout. TODO: Maybe move to own Partial -----*/
.constrained {
  margin: 0 auto;
  padding: 0 min(2.6041666667vw, 50px);
  max-width: var(--constrained-max-width, 1920px);
}