/* ==============================================
     ROOT
============================================== */

:root {
	--white: #FEFDFD;
	--lightred: #F7F3F3;
	--grey: #D8D8D8;
	--lightgrey: #d9d9d9;
	--red: #FF1600;
	--brown: #7A4030;
	--bordo: #2D0200;
	--black: #020202;
	--primary-font: 'Ppeiko', serif;
	--secondary-font: 'Made Outer Sans', sans-serif;
	--Paragraph: 'Helveticaneue', sans-serif;
	--underline-motion: fadein 2.5s 1s cubic-bezier(.59, 0, 0, .97);
	--cursor-timing: all 0.4s cubic-bezier(0.52, 0.02, 0, 0.99);
	--work-hover-motion: 1s cubic-bezier(.36, 0, 0, .99);
	--grid-gap: 3.819vw;
	--cta-motion-easing: cubic-bezier(.3, 0, 0, .99);
	--menu-lines-timing: 0.4s ease;
  --desktop-width: 92.3%;
  --mobile-width: 84%;
}

body {
	opacity: 0;
	visibility: hidden;
	animation: fadeIn 1s ease forwards 0.5s;
}

.bordo-bg {
  background-color: var(--bordo)!important;
  color: var(--white);
}

.light-bg {
  background-color: var(--lightred)!important;
  color: var(--bordo);
}

@keyframes fadeIn {
	to {
		opacity: 1;
		visibility: visible;
	}
}

.red {
	color: var(--red);
  /*display: inline-block;*/
  width: fit-content;
}

#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bordo);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  background-color: var(--lightred);
}

#page-loader .counter {
    color: var(--lightred);
    font-size: 24px;
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bordo);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#preloader .counter {
    color: var(--lightred);
    font-size: 48px;
    font-weight: bold;
}

/* ==============================================
       Hide Scrollbar
============================================== */

body::-webkit-scrollbar {
	display: none;
}

/* Chrome, Safari, Opera */

body {
	-ms-overflow-style: none;
}

/* IE & Edge */

html {
	scrollbar-width: none;
}

/* Firefox */

/* ==============================================
       Page Styles
============================================== */

/*
html {
background: var(--lightred);
}
html,
body {
	-webkit-font-smoothing: antialiased;
	font-size: 1vw;
	line-height: 1;
	font-family: var(--secondary-font);
	background: var(--lightred);
	color: var(--bordo);
	cursor: default;
	user-select: none;
	-webkit-user-select: none;
	transition: background-color 0.3s ease, color 0.3s ease;
	width: 100%;
	padding: 0;
	margin: 0 auto;
	scroll-behavior: auto;
	overflow: hidden;
	height: auto;
	min-height: 100svh;
}


html {
	touch-action: manipulation;
}
*/

html,
body {
	-webkit-font-smoothing: antialiased;
	font-size: 1vw;
	line-height: 1;
	font-family: var(--secondary-font);
	background: var(--lightred);
	color: var(--bordo);
	cursor: default;
  
	user-select: none;
	-webkit-user-select: none;
  
	transition: background-color 0.3s ease, color 0.3s ease;
	width: 100%;
	padding: 0;
	margin: 0 auto;
	scroll-behavior: auto;
	overflow-x: hidden;
  
	/*height: auto;*/
	min-height: 100svh;
}


html {
	touch-action: manipulation;
  background-color: var(--lightred);
}

.w-input, .w-select {
  font-size:unset;
}

#page-wrapper {
	height: auto;
	min-height: 100%;
}

/* ==============================================
       CSS Reset
============================================== */

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

li,
ul,
figure {
	padding: 0;
	margin: 0;
	list-style: none;
}

.w-inline-block {
	all: unset;
}

svg {
	max-width: none;
	height: auto;
	box-sizing: border-box;
}

audio,
iframe,
img,
svg,
video,
picture,
figure {
	vertical-align: middle;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
ul,
ol,
span,
strong,
em,
figcaption,
.w-form,
.w-radio {
	padding: 0;
	margin: 0;
}

span {
	line-height: unset;
	padding: 0;
	margin: 0;
}

:focus {
	outline: none;
}

strong {
	display: inline-flex;
	font-weight: inherit;
}

.hide {
	display: none!important;
}

.divs-hide {
	display: none;
}

.w-webflow-badge {
	display: none!important;
}

.w-dyn-list {
	padding: unset;
	margin: unset;
	line-height: unset;
	height: unset;
	min-height: unset;
	width: unset;
	min-width: unset;
}


.page-wrapper {
  height: auto;
  position: relative;
  z-index:1;
  background: var(--lightred);
}

/* ==============================================
    Page Transition Logic
 ============================================== */

.page-overlay-first {
	width: 100%;
	height: 100.5svh;
	background: var(--lightred);
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 9999999;
	transform-origin: bottom;
	display: none;
}

.page-overlay-second {
	width: 100%;
	height: 100vh;
	background: var(--black);
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	z-index: 9;
}

.page-overlay-video {
	width: 100%;
	height: 100vh;
	background: var(--white);
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	z-index: 999;
}

.w-background-video--control {
  display:block!important;
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height:100vh;
}

.w-background-video--control img {
  display:none;
}

/* ==============================================
       Cursor Style
============================================== */

#cursor {
	position: fixed;
	z-index: 99999999999999 !important;
	left: 0;
	top: 0;
	border-radius: 100%;
	pointer-events: none;
	will-change: transform;
	opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
	.cursor__circle {
		width: 5vw;
		height: 5vw;
		border-radius: 100%;
		background: var(--red);
		color: var(--white);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.5vw;
		line-height: 1;
		text-align: center;
		position: relative;
		transform: scale(0.08);
		transition: transform 0.3s ease, background-color 0.3s ease;
	}
	.cursor__circle::before {
		content: "";
		font-size: 0.8vw;
		color: var(--white);
		pointer-events: none;
		text-align: center;
		opacity: 0;
		transition: opacity 0.3s ease;
	}
	#cursor.scroll .cursor__circle {
		transform: scale(1);
	}
	#cursor.scroll .cursor__circle::before {
		content: "Scroll";
		opacity: 1;
	}
	#cursor.drag .cursor__circle {
		transform: scale(1);
	}
	#cursor.drag .cursor__circle::before {
		content: "Drag";
		opacity: 1;
	}
	#cursor.enter .cursor__circle {
		transform: scale(1);
	}
	#cursor.enter .cursor__circle::before {
		content: "Enter";
		opacity: 1;
	}
	#cursor.play .cursor__circle {
		transform: scale(1);
	}
	#cursor.play .cursor__circle::before {
		content: "Play";
		opacity: 1;
	}
    
	#cursor.pause .cursor__circle {
		transform: scale(1);
	}
	#cursor.pause .cursor__circle::before {
		content: "Pause";
		opacity: 1;
	}

	#cursor.change .cursor__circle::before {
		content: none !important;
		opacity: 0;
	}
	#cursor.hiding .cursor__circle {
		opacity: 0 !important;
	}

    #cursor.soon .cursor__circle {
		transform: scale(1);
	}
	#cursor.soon .cursor__circle::before {
		content: "Soon";
		opacity: 1;
	}
  
}

.play-thumb {
  position: absolute;
  width: 20vw;
  height: 20vw;
  font-size: 3vw;
  color: var(--white);
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%, 10%);
  opacity: 0;
  border-radius: 50%;
  text-align: center;
  
}

@media (max-width: 650px) {
	#cursor {
		display: none;
	}
}

/* ==============================================
       Reset Styles
============================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
	border: none;
	margin: 0;
	padding: 0;
}

a,
button {
	text-decoration: none!important;
	color: inherit;
	background: none;
	margin: 0;
	padding: 0;
	border: none;
	cursor: pointer!important;
}

a:focus,
a:active {
	outline: none;
}

.btn {
	text-decoration: underline;
	text-underline-offset: 0.8vw;
}

/* ==============================================
     Fonts
============================================== */


/*
@font-face {
	font-family: 'AcuminVariableConcept';
	src: url('fonts/acumin-pro-extra-condensed-bold.otf') format('opentype');
	text-transform: uppercase;
}

@font-face {
	font-family: 'OpenSauceOne';
	src: url('fonts/OpenSauceOne-Medium.ttf') format('truetype');
	font-weight: 650;
	font-style: normal;
}
*/

/* ==============================================
       Typogoraphy
============================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.menu-item {
	font-family: var(--primary-font);
  font-variant-ligatures: normal;
  font-feature-settings: "liga" 1;
}

h1 {
	font-size: 12.56vw;
	line-height: 0.9;
	letter-spacing: -0.5vw;
  text-transform: capitalize;
}

h2 {
	font-size: 8.68vw;
	line-height: 0.94;
	letter-spacing: -0.3vw;
	margin-bottom: -0.6vw;
  text-transform: capitalize;
}

h3 {
	font-size: 7.29vw;
	line-height: 0.95;
  letter-spacing:-0.3vw;
  text-transform: capitalize;
}

h4 {
	font-size: 5.79vw;
	line-height: 0.94;
	letter-spacing: -0.3vw;
}

h5 {
	font-size: 4.17vw;
	/*line-height: 1.39;*/
  line-height: 1;
}

h6 {
	font-size: 3.18vw;
	line-height: 1.73;
  letter-spacing: -0.15vw;
}

p {
	font-size: 1.16vw;
	line-height: 1.6;
	font-family: var(--Paragraph);
}

.indicator {
	font-size: 1.042vw;
	font-family: var(--secondary-font);
	text-transform: uppercase;
}

.work-tag {
	font-size: 0.703vw;
	text-transform: uppercase;
	justify-self: start;
	width: auto;
	padding: 0.5vw;
	border: 1px solid var(--bordo);
}

.work-name {
	font-size: 1.447vw;
	text-transform: uppercase;
}

.text-link, .big-indicator, .name{
	font-size: 1.447vw;
	text-transform: uppercase;
	width: fit-content!important;
}

.role {
  font-size: 0.703vw;
}

.cta-buttons {
	font-size: 0.868vw;
  text-transform: uppercase;
}


.footer-sitemap {
	font-size: 1.16vw;
}

.footer-legal {
	font-size: 0.752vw;
}

.footer-legal a:after,
.footer-sitemap a:after {
	display: block;
	content: "";
	border-bottom: solid 0.099vw var(--white);
	transform: scaleX(0);
	transform-origin: 0 50%;
	padding-bottom: 0.3vw;
	transition: transform 650ms var(--cta-motion-easing);
	opacity: 1;
}

.footer-legal a:hover:after,
.footer-sitemap a:hover:after {
	transform: scaleX(1);
	transform-origin: 0 50%;
}

.footer-menu a {
  font-size: 1.657vw;
	height: 1.657vw;
	width: fit-content;
	overflow: hidden;
}

.footer-menu a span {
	height: 1.657vw;
	text-shadow: 0 1.657vw 0 var(--white);
	display: inline-block;
	transition: transform 0.5s var(--cta-motion-easing);
}

.footer-menu a:hover span {
	transform: translateY(-100%);
}

.text-link:after {
	display: block;
	content: "";
	border-bottom: solid 0.099vw var(--bordo);
	transform: scaleX(1);
	transition: transform 650ms var(--cta-motion-easing);
	transform-origin: 0 50%;
	padding-bottom: 0.7vw;
	opacity: 0;
	animation: fadein 2.5s 0s var(--cta-motion-easing) forwards;
}

.text-link:hover:after {
	transform: scaleX(0);
	transform-origin: 100% 0%;
}

@keyframes fadein {
	0% {
		opacity: 1;
		clip-path: inset(0 100% 0 0%);
	}
	50% {
		clip-path: inset(0 100% 0 0%);
	}
	100% {
		opacity: 1;
		clip-path: inset(0 0 0 0);
	}
}

@media (max-width: 650px) {
 
  h1 {
    font-size: 18vw;
    letter-spacing: -1vw;
  }
  
  h2 {
    font-size: 14.325vw;
    letter-spacing: -0.8vw;
  }
  
  h3 {
    font-size: 13vw;
        letter-spacing: -0.8vw;
  }
  
	h4 {
    font-size: 14.325vw;
    letter-spacing: -0.8vw;
	}
  
	h5 {
    font-size: 9vw;
    letter-spacing: -0.2vw;
	}
  
	h6 {
    font-size: 8vw;
    letter-spacing: -0.2vw;
	}
  
  .indicator {
    font-size: 3.5vw;
  }
  
  p {
    font-size: 4vw;
  }
  
  .home-featured .indicator {
    margin-bottom: 5vw;
  }
  
  .work-tag {
    margin-top: 3vw;
    font-size: 2.2vw;
    padding: 1vw;
    border: 1px solid var(--bordo);
  }

  .work-name {
    font-size: 4.5vw;
  }
  
  .role {
    font-size: 2.4vw;
  }

  .text-link {
    font-size: 4.581vw;
  }
  
  .text-link:after {
    padding-bottom: 3vw;
    border-bottom: solid 0.3vw var(--bordo);
  }
  
  .text-link, .big-indicator, .name{
    font-size: 4vw;
    text-transform: uppercase;
    width: fit-content!important;
  }
  
  .footer-menu a {
    font-size: 6.245vw;
    height: 6.245vw;
  }
  
  .footer-menu a span {
    height: 6.245vw;
    text-shadow: 0 6.245vw 0 var(--white);
  }

}

/* ==============================================
       Grid Settings
============================================== */

.grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 3.819vw;
	padding: 3.819vw;
	margin: 0 auto;
}

.grid-overlay {
	position: fixed;
	top: 3.819vw;
	left: 3.819vw;
	width: calc(100% - 7.638vw);
	height: calc(100% - 7.638vw);
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 3.819vw;
	z-index: 999999999999999;
	pointer-events: none;
}

.grid-overlay div {
	background: rgba(255, 0, 0, 0.1);
}

@media (max-width: 650px) {


    .grid:not(.hero) {
      display: flex;
      flex-direction:column;
      padding: 8vw;
      width:100%;
    }
    .hero .grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      grid-gap: 8vw; 
      padding: 8vw;
      width: calc(100% - 16vw); 
  }
  
	.grid-overlay {
		position: fixed;
		top: 8vw;
		left: 8vw;
		width: calc(100% - 16vw);
		height: calc(100% - 16vw);
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		grid-gap: 8vw;
		overflow: hidden;
		white-space: nowrap;
	}
	.grid-overlay div {
		height: 100vh;
	}
}



@media (max-width: 650px) {

section:not(.hero):not(:has(.footer)) {
  padding-top: 15vw;
}
}

/* ==============================================
       Header
============================================== */

.header {
	width: 100%;
	position: absolute;
	top: 0;
	height: 8vw;
  /*
	transition: top 0.5s cubic-bezier(.22, .19, 0, .99);
  */
	z-index: 999;
	pointer-events: unset;
}
/*
.header.scroll {
	top: -10vw;
	transition: top 0.8s cubic-bezier(.22, .19, 0, .99);
}
*/

.header .logo {
	grid-column: 1 / 3;
	overflow: hidden;
	position: fixed;
	z-index: 99;
}

.header .grid {
	width: 100%;
}

.logo img {
	width: 7.238vw;
	top: -1vw;
	left: 0;
}

@media (max-width: 650px) {
  
	.header .logo {
		grid-column: 1 / 3;
	}
  
	.logo img {
		width: 25vw;
	}
  
  .header.scroll {
    top: -20vw;
    transition: top 0.8s cubic-bezier(.22, .19, 0, .99);
  }
  
}


/* ==============================================
         Mobile Menu
  ============================================== */

.menu-toggle {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 12vw;
	height: 8vw;
	background: transparent;
	top: 1vw;
	right: -0.5vw;
	border: none;
	cursor: pointer;
	z-index: 9999;
}

.menu-bar {
	position: absolute;
	width: 3.356vw;
	height: 0.13vw;
	background: var(--bordo);
}


.menu-bar:nth-child(1) {
	top: calc(50% - 0.3vw);
}

.menu-bar:nth-child(2) {
	top: calc(50% + 0.3vw);
}

.mega-menu-wrapper {
	opacity: 0;
  display:none;
}

.symbol-menu {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index:1;
  width:3vw;
  height:3vw;
  pointer-events:none;
  transform: translate(-50%, -50%);
}

.menu-wrapper {
	height: 100svh;
	width: 50vw;
	background: linear-gradient(to top, white 0%, transparent 15%, transparent 85%, white 100%);
	mask-image: linear-gradient(to top, transparent 0%, black 15%, black 85%, transparent 100%);
	-webkit-mask-image: linear-gradient(to top, transparent 0%, black 15%, black 85%, transparent 100%);
	display: flex;
	flex-direction: column;
	position: relative;
}

.infinite-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.infinite-menu li {
	font-size: 4.5vw;
	color: #e5dedb;
	padding-top: 1vw;
	height: 7.5vw;
	scroll-snap-align: center;
	transition: color 0.3s ease;
}

.infinite-menu li.active {
	color: #2D0200;
}

.mega-menu-container {
	position: fixed;
	top: 0;
	left: 0;
	height: 100svh;
	width: 100vw;
	background: white;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: 1;
	z-index: 99;
}

.show {
	pointer-events: auto;
	-webkit-user-select: unset!important;
	-ms-user-select: unset!important;
	user-select: unset!important;
}

.menu-link {
  display: flex;
  grid-gap: 8vw;
  justify-content: center;
  cursor: pointer;

}


@media (max-width: 650px) {
  
  .menu-toggle {
    top: 6.5vw;
    right: 8.5vw;  
  }
  
  .menu-bar {
    width: 13vw;
    height: 0.5vw;
  }
  
  .menu-bar:nth-child(1) {
    top: calc(50% - 1.3vw);
  }
  
  .menu-bar:nth-child(2) {
    top: calc(50% + 1.3vw);
  }
  
  .symbol-menu {
    height:7vw;
    width: 7vw;
  }
  
  .infinite-menu li {
    font-size: 10vw;
    padding-top: 4vw;
    height: 19vw;
  }
  
  .menu-wrapper {
    width: 90vw;
  }
  
  .menu-link {
    grid-gap:13vw;
  }
}




/* ==============================================
       Home Page
============================================== */


.hero .grid {
	position: relative;
	height: 100svh;
	width: 100%;
	align-items: center;
	justify-content: center;
	align-items: end;
	position: relative;
}

.hero .grid .scroll {
	position: absolute;
	bottom: 3.819vw;
	right: 3.819vw;
}

.hero .grid .scroll img {
	width: 2.389vw;
}

.hero .video-thumb {
	position: absolute;
	bottom: 3.819vw;
	left: 3.819vw;
	border-radius: 0.1vw;
	overflow: hidden;
	cursor: pointer;
	z-index: 9999;
  
}

.hero .video-visual {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 48svh;
	height: 48svh;
	clip-path: polygon(50% 0, 100% 0, 50% 100%, 0 100%);
}


.hero iframe {
  pointer-events: none;
}
.vimeo-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  pointer-events: none;
  overflow: hidden;
}
.vimeo-wrapper iframe {
  width: 100vw;
  height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
  min-height: 100vh;
  min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 99;
}

iframe {
  pointer-events: none;
}

#showreel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  cursor: pointer;
  background:var(--black);
}



.w-background-video--control {
  display:none;
}

.hero .clipping-video {
	height: 100%;
}

.hero .hero-headline {
	grid-column: 1 / 5;
	display: grid;
	grid-gap: 1.3vw;
}


@media (max-width: 650px) {
  
  .hero .video-visual {
    width: 32svh;
    height: 32svh;
  }
  .hero .hero-headline {
    grid-column: 1 / 7;
  }
  .hero .hero-headline  h4 {
    margin-bottom:-1vw;
  }
  .hero .grid .scroll {
    bottom: 8vw;
    right: 8vw;
  }
  .hero .grid .scroll img {
    width: 6vw;
  }
}

.center {
	display: grid;
	grid-gap: 5vw;
	justify-content: center;
	align-items: center;
	text-align: center;
  
}

.home-about {
	padding: 10vw;
}

.home-about p {
	max-width: 40vw;
	justify-self: center;
}

.home-featured .indicator {
	grid-column: 1 / 13;
}

.home-featured .featured-projects {
	grid-column: 1 / 13;
	display: grid;
	grid-gap: 6vw;
}

.home-featured .featured-projects .work-thumbnail {
	display: grid;
	grid-gap: 2vw;
	cursor: pointer;
}



.work-img {
	height: 51.968vw;
	/*background: var(--lightgrey);*/
}

.image-wrapper, .video-wrapper {
  overflow: hidden;
  height: 51.953vw;
  position:relative;
}

.image-wrapper img {
	object-fit: contain;
	min-height: 100%;
	width: 100%;
}

.home-featured .link-box {
	grid-column: 1 / 13;
	margin: auto;
	padding: 8vw 0vw;
}

.logos-grid {
	padding: 8vw 0vw;
	width: 100%;
}

.logos-grid .grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 4vw;
	justify-items: center;
	align-items: center;
}

.logo-item {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 9vw;
}

.logo-item img {
	width: 9vw;
	height: 9vw;
	aspect-ratio: 1/1;
	object-fit: contain;
	filter: grayscale(100%);
	transition: filter 0.3s ease;
}

.logo-item:hover img {
	filter: grayscale(0%);
}

.home-cta {
  margin-top: 6vw;
}

.home-cta .section-headlines {
	grid-column: 1 / 9;
	grid-gap: 3vw;
	display: grid;
	margin-bottom: 10vw;
}

.home-cta .symbol {
	grid-column: 1 / 3;
	grid-row: 2;
	width: 5.448vw;
}

.home-cta .cta-buttons {
	grid-column: 9 / 13;
	grid-row: 2;
	align-self: end;
	justify-self: end;
	display: flex;
	grid-gap: 1vw;
	color: var(--red);
	text-transform: uppercase;
}

.home-about .cta-buttons {
  align-self:center;
  justify-self:center;
	display: flex;
	grid-gap: 1vw;
	color: var(--red);
	text-transform: uppercase;
}

.cta-buttons a {
	border: 1px solid var(--red);
	padding: 1vw 1.6vw;
}

.cta-buttons .solid {
	background: var(--red);
	color: var(--lightred);
}

.cta-buttons a {
	position: relative;
	overflow: hidden;
	z-index: 1;
	transition: color 0.7s var(--cta-motion-easing);
}

.cta-buttons a::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	z-index: -1;
	transition: width 0.7s var(--cta-motion-easing);
}

.cta-buttons a:hover::before {
	width: 100%;
}

.cta-buttons a:hover {
	color: var(--lightred);
}

.cta-buttons a:not(.solid)::before {
	background-color: var(--red);
}

.cta-buttons .solid:hover {
	color: var(--red);
}

.cta-buttons .solid::before {
	background-color: var(--lightred);
}


@media (max-width: 650px) {
  .center {
    grid-gap: 10vw;
  }
  .home-about p {
    max-width: 100%;
  }
  .cta-buttons a {
    font-size: 3.5vw;
    border: 1px solid var(--red);
    padding: 4.4vw 5vw;
    text-align: center;
  }
  .home-featured .featured-projects {
    grid-gap: 12vw;
  }
  .logos-grid .grid {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 8vw;
  }
  
  .logo-item {
    height: 15vw;
  }
  
  .logo-item img {
    width: 15vw;
    height: 15vw;
  }
  .home-featured .link-box {
    padding:23vw 0vw;
  }
  .home-cta .section-headlines {
    grid-column: 1 / 7;
    grid-gap: 8vw;
    margin-bottom: 10vw;
  }
  .home-cta .cta-buttons {
    flex-direction: column;
    min-width: 100%;
    grid-gap:3vw;
  }
  .home-cta .symbol {
    width: 15.467vw;
    margin-top: 10vw;
    margin-bottom:5vw;
  }
  .section-headlines {
    order: 1;
  }
  .symbol {
    order: 2;
  }
  .cta-buttons {
    order: 3;
  }
}



@media (max-width: 650px) {}

/* ==============================================
       Footer
============================================== */

footer {
	background-color: var(--bordo);
  z-index:-1;
  position: relative;
  padding-top:3vw;

}

.footer {
	color: var(--white);
	padding-top: 3vw;
}

.footer .footer-menu {
	display: grid;
	grid-gap: 1.5vw;
	text-transform: uppercase;
}

.footer-sitemap {
	grid-column: 5 / 13;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 3.819vw;
	justify-content: space-between;
}

.footer-sitemap .block {
	line-height: unset;
}

.footer-sitemap .block:nth-of-type(1) {
	width: 86%;
}

.footer-sitemap .block:nth-of-type(2) {
	width: 86%;
}

.footer-sitemap .block:nth-of-type(3) {
	width: 70%;
	display: grid;
	align-self: start;
	justify-self: end;
}

.footer-sitemap .block:nth-of-type(3) a {
	align-self: start;
	justify-self: start;
	margin-bottom: 0.7vw;
}

.footer-sitemap .block:nth-of-type(3) a {
	font-family: var(--paragraph);
}

.footer-sitemap .block .red {
	margin-bottom: 2vw;
}

.footer .logo {
	grid-column: 1 / 13;
	min-width: 101%;
	margin-top: 2vw;
  margin-bottom: -2vw;
}

.footer-legal {
	grid-column: 1 / 13;
	display: flex;
	justify-content: space-between;
}

.footer-legal .legals {
	display: flex;
	grid-gap: 1vw;
}


@media (max-width: 650px) {
  .footer .grid {
    grid-gap: 15vw;
  }
  .footer .footer-menu {
    grid-gap:5vw;
  }
  .footer-sitemap {
    font-size: 4.533vw;
    display: flex;
    flex-direction: column;
    grid-gap: 10vw;
  }
  .footer-sitemap .block:nth-of-type(1), .footer-sitemap .block:nth-of-type(2) {
    grid-gap: 8vw;
    display: grid;
  }
  .footer-sitemap .block:nth-of-type(3) {
    grid-gap: 3vw;
    display: grid;
  }
  .footer-sitemap .block:nth-of-type(3) .red {
    margin-bottom: 10vw;
  }
  .footer-legal {
    font-size: 3.467vw;
  }
  .footer-legal .legals {
    grid-gap: 5vw;
  }
}


/* ==============================================
       Contact
============================================== */
.menu-item {
  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
}







/* - - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - 


 All Works Page


- - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - */



.work-hero {
  padding:10vw 8vw;
  padding-bottom: 10svh;
}

.project-cover {
  padding: var(--desktop-padding);
  margin: auto;
}

.indicator {
  display: flex;
  flex-direction: column;
  grid-gap: 0.5vw;
}


.indicator img {
  width: 1vw;
  margin: auto;
}


@media (max-width: 650px) {
  
  .work-hero {
    padding-top: 30vw!important;
    padding-bottom: 5svh;
  }

  .indicator {
    display: flex;
    flex-direction: column;
    grid-gap: 1.5vw;
  }
  
  .indicator img {
    width: 2vw;
    margin: auto;
  }
  
}



/* - - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - 


Project Page


- - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - */



.project-hero {
  padding:25svh 4vw;
  padding-bottom: 10svh;
}

.project-hero .center {
  text-align: left;
  align-items: start;
  justify-content: start;
  width:80%;
}

.case-info .image-wrapper {
  grid-column: 1 / 13;
  margin-bottom: 10vw;
}

.case-info .indicator {
  grid-column: 2 / 4;
}

.case-info .info {
  grid-column: 6 / 11;
  display: grid;
  grid-gap: 4vw;
  margin-bottom: 10vw;
}

.full-width {
  width: 100vw;
  min-height: 50svh;
  margin: auto;
  display: grid;
  grid-gap: 4.23vw;
}

.work-content {
  display: flex;
  flex-direction: column;
  grid-gap: var(--grid-gap);
  margin: auto!important;
  padding: var(--grid-gap);
}

.text-section {
  padding: 8vw 0!important;
}

.gallery-section {
  overflow: unset!important;
  width: 100vw;
}

.w-richtext {
  grid-gap: 1vw;
  display: grid;
}

.gallery {
 /* overflow: hidden;*/
  width: var(--desktop-width);
/*  height: 48.145vw;*/
  cursor:pointer;
  margin: 5vw 0;
}

.gallery-wrapper {
  display: flex;
  gap: 0; /* Remove gap to eliminate container width space between loops */
  will-change: transform;
}

.gallery-item {
  margin-right: 3.819vw;
  height: fit-content;
  min-width: 85vw;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


#video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  object-fit:cover;
  width:100%;
  height:100%;
}



.more-work {
  width: var(--desktop-width);
  margin: auto;
  margin-top: 15vw;
  display: flex;
  flex-direction: column;
  grid-gap: 5vw;
}

.more-work .featured-projects {
  display: flex;
  grid-gap: 1vw;
  justify-content:space-between;

}

.more-work .image-wrapper {
  height: 24.92vw;
  width: 43vw;
  margin-bottom: 1vw;
  overflow:hidden;
}

.more-work .work-thumbnail {
  display: grid;
  grid-gap: 1.4vw;
}

@media (max-width: 650px) {
  
  .project-hero {
		padding: 0vw 8vw !important;
        padding-top: 35vw !important;
        padding-bottom: 20vw !important;
  }
  
  .project-hero .center {
    text-align: left;
    align-items: start;
    justify-content: start;
    width:100%;
  }
  
  .work-content {
    padding: var(--mobile-padding);
    width: var(--mobile-width);
  }

  .gallery {
     margin: 8vw 0;
   }

   
  .text-section {
    padding: 18vw 0!important;
	  padding-bottom: unset!important;
  }
  
  .case-info .indicator {
    margin-bottom: 3vw;
  }
  
  .case-info .info {
    grid-gap: 8vw;
  }
  
  .more-work {
    flex-direction: column-reverse;
    width: var(--mobile-width);
  }
  
  .more-work .featured-projects {
    margin-top: 5vw;
    flex-direction: column;
    grid-gap: 15vw;
  }
  
  #video {
    height:47.251vw;
  }
  
  
  .image-wrapper, .video-wrapper {
    overflow: hidden;
/*    height: 47.251vw;*/
    min-height: fit-content;
    position:relative;
  }

  
  .more-work .image-wrapper {
    width: 100%;
    height: 47.251vw;
  }
  
  .more-work .work-thumbnail {
    grid-gap: 2vw;
  }
  
  .full-width {
    width: var(--mobile-width);
    /*min-height: 50svh;*/
    margin: auto;
    display: grid;
    grid-gap: 8vw;
  }

}



/* - - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - 


Team Page


- - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - */

.team-hero {
  padding:15svh var(--grid-gap);
}

.team-hero h1:nth-of-type(1) {
  text-align: right;
}
.team-hero .image-wrapper {
  margin: 4vw 0vw;
}
.team-hero h1:nth-of-type(2) {
  text-align: left;
}


a {
  -webkit-user-drag: none!important;
  user-select: none!important;
  pointer-events: auto!important;
}

.meet-our-crew {
  display: grid;
  grid-row-gap: 9vw;
  
}

.meet-our-crew .block {
  grid-column: 4 / 9;
  display: grid;
  grid-gap: 3vw;
}

.meet-our-crew .members {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 3.819vw;
}

.meet-our-crew .member {
  display: flex;
  flex-direction: column;
  grid-gap: 1vw;
  width: 100%;
  margin-bottom: 6.205vw;
}



.meet-our-crew .member:nth-of-type(even) {
/*  margin-top: 34vw;*/
}

.meet-our-crew .member .profile-image {
  position: relative;
  margin-bottom:2vw;
}

.meet-our-crew .member .profile-image .symbol {
  width: 6.205vw;
  position: absolute;
  top: -1.8vw;
  left: -1.8vw;
  z-index: 2;
}



.explore-our-work {
  margin: 10vw 0vw;
}



@media (max-width: 650px) {
  
  .meet-our-crew .block {
    grid-gap: 6vw;
    margin-top: 8vw;
  }
  
  .meet-our-crew .members {
    margin-top: 15vw;
  }
  
  .meet-our-crew .member {
    grid-gap: 2vw;
  }


  .meet-our-crew .block {
    grid-column: 4 / 9;
    display: grid;
    grid-gap: 3vw;
  }
  
  .meet-our-crew .members {
    grid-column: 4 / 13;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 12vw;
  }
  
  .meet-our-crew .member {
    display: flex;
    flex-direction: column;
    grid-gap: 1vw;
    width: 100%;
  }
  
  .meet-our-crew .member:nth-of-type(even) {
    margin-top: 34vw;
  }

  
}




/* - - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - 


Career Page


- - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - */

.career-hero {
  padding:15svh var(--grid-gap);
  padding-bottom: 45vw;
}


.part-two p{
  width: 28vw;
  margin: auto;
}

.career-hero .grid {
  position: absolute;
  top:0;
  left:0;
  z-index: -1;
}

.career-hero .grid .one {
  grid-column: 10 / 13;
  grid-row: 1;
}

.career-hero .grid .two {
  grid-column: 1 / 5;
  grid-row: 2;
  margin-top:25vw;
}

.career-hero .grid .three {
  grid-column: 8 / 11;
  grid-row: 3;
}

.career-hero h1 {
  max-width:80vw;
  margin: auto;
}

.motg-culture {
  display: grid;
  grid-row-gap: 7vw;
  margin-top: 8vw;
}

.motg-culture .block {
  display: grid;
  grid-gap: 3vw;
}

.motg-culture .block p {
  width:25vw;
}

.motg-culture .block:nth-of-type(1) {
  grid-column: 2 / 7;
  grid-row:1;
}

.motg-culture .block:nth-of-type(2) {
  grid-column: 6 / 13;
  grid-row:2;
}

.motg-culture .block:nth-of-type(3) {
  grid-column: 2 / 9;
  grid-row:3;
}

.part-two {
  position: relative;
  margin-top: 15vw;
  
}

.part-two .grid {
  position: absolute;
  top:0;
  left:0;
  z-index: -1;
}

.part-two .grid .one {
  grid-column: 10 / 12;
  grid-row: 1;
}

.part-two .grid .two {
  grid-column: 2 / 5;
  grid-row: 2;
  margin-top:25vw;
}



@media (max-width: 650px) {

  .career-hero .grid, .part-two .grid {
    position: relative;
  }

  .career-hero {
    padding-top: 30vw !important;
   padding-bottom: unset;
   margin-bottom: -10vw;
  }

  .motg-culture .block p {
    width:100%;
  }

  .career-hero .grid .one {
    width: 30vw;
  }
  
  .career-hero .grid .two {
    width: 38vw;
    margin-top:0vw;
    left: 40vw;
    position: relative;
  }
  
  .career-hero .grid .three {
    width: 25vw;
    left: 5vw;
    position: relative;
  }
  
  .motg-culture {
    grid-row-gap: 20vw;
  }

  .motg-culture .block {
      display: grid;
      grid-gap: 7vw;
  }

  .part-two {
    display: flex;
    flex-direction: column-reverse;
    padding-top: 25vw;
  }
  .part-two p {
    width: 85vw;
  }

  .part-two .grid .one, .part-two .grid .two {
    position:absolute;
  }

  .part-two .grid .one {
    width: 25vw;
    right: 8vw;
    top: 85vw;
  }
  .part-two .grid .two {
    width: 35vw;
    left: 8vw;
    top: -30vw;
  }

  .part-two .motg-culture p {
    margin-top: 38vw;
    margin-bottom: -10vw;
  }

}




/* - - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - 


About Page


- - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - */


.about-page .page-wrapper{
  background-color:var(--bordo);
  color: var(--white);
}

.about-page .menu-bar  {
  background: var(--white);
  mix-blend-mode:difference;

}

.about-page .red {
  margin: auto;
}

.about-hero {
  padding:15svh var(--grid-gap);
  padding-bottom: 15vw;
}

.about-hero .center {
  position: relative;
}

.about-hero .center .symbol-about {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 19vw;
}

.about-page .center {
  margin: auto;
}


.about-page section:not(.about-hero) {
  padding: 13vw 0vw;
}

.about-page section:nth-of-type(2) .center {
  width: 42.998vw;
}

.about-page .container {
  margin: auto;
  width: 76.5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  grid-gap: 11vw;
  
}

.about-page .container .text{
  width:45%;
}

.about-page .container .visual {
  width: 30%;
}


.about-page section:nth-of-type(3) .road-container {
  position: relative;
  width: 30vw;
  height: 21.833vw;
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}



.about-page section:nth-of-type(4) .media-window {
  position: relative;
  width: 28.241vw;
  height: 25.501vw;
  display: flex;
  justify-content: center;
  align-items: center;
}


.about-page section:nth-of-type(5) .center h3 {
  width: 35vw;
}


.about-page section:nth-of-type(6) .alignment-visual {
    position: relative;
    width: 43.981vw;
    overflow:hidden;
    top:10vw;
  left:4.5vw;
    margin-bottom:-12vw;
    display: flex;
    justify-content: center;
    align-items: center;
    clip-path: inset(0 0 49% 0);
}  

.about-page section:nth-of-type(6) .center {
  width: 55vw;
}

.about-page section:nth-of-type(6) {
  padding-bottom:unset;
}

.about-page section:nth-of-type(7) {
  position: relative;
}

.about-page section:nth-of-type(7) .center {
  width: 56.076vw;
}

.about-page section:nth-of-type(7) .center h3:nth-of-type(2) {
 margin-top:10vw;
}

.about-page section:nth-of-type(7) .center .mouse-hover {
 height:20vw;
}

.images-trail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100svh;
  z-index: 1;
}

.trail {
  width: 18vw;
  height: 25vw;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

.about-page section:nth-of-type(8) .globe-visual {
    position: relative;
    width: 21.701vw;
    height: 21.701vw;
    display: flex;
    justify-content: center;
    align-items: center;
} 

.about-page section:nth-of-type(8) .center {
  width: 45vw;
  text-align: center;
  justify-content: center;
}

.about-page section:nth-of-type(8) .center h1 {
  width: 80vw;
}

.about-page section:nth-of-type(8) .center .visual {
  margin: auto;
  width:21.701vw;
}

.about-page section:nth-of-type(8) .center h5 {
  width: 50vw;
  margin:auto;
}

.about-page section:nth-of-type(9) .center h5 {
  width: 46vw;
  margin:auto;
}

.about-page section:nth-of-type(10) .line-visual {
    position: relative;
    width: 102vw;
    height: 40.22vw;
    display: flex;
    justify-content: center;
    align-items: center;
} 

.about-page section:nth-of-type(10) .center {
  width: 80vw;
  margin:auto;
  display: flex;
  position:relative;
}

.about-page section:nth-of-type(10) .center h5:nth-of-type(1) {
  text-align:left;
  position: absolute;
  left:0;
  top:0;
  width:26.157vw;
}

.about-page section:nth-of-type(10) .center img {
  width: 27.071vw;
}

.about-page section:nth-of-type(10) .center h5:nth-of-type(2) {
  text-align:left;
  position: absolute;
  right:0;
  bottom:0;
  width: 29vw;
}

.about-page section:nth-of-type(11) .center {
  width: 76.5%;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position:relative;
  height: 47vw;
}

.about-page section:nth-of-type(11) .center h5 {
  border-left: 10px solid red;
  text-align: left;
  padding-left: 2vw;
}

.about-page section:nth-of-type(11) .center h5:nth-of-type(1) {
  width:36.5vw;
  position: absolute;
  top:0;
  right:0;
}

.about-page section:nth-of-type(11) .center h5:nth-of-type(2) {
  width:27.119vw;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.about-page section:nth-of-type(11) .center h5:nth-of-type(3) {
  width:43vw;
    position: absolute;
  bottom:0;
  left:0;
}

.about-page section:nth-of-type(12) .center h1 {
  font-size: 35.255vw;
  margin: auto;
  text-transform:lowercase;
  margin-top:-8vw;
  margin-bottom:5vw;
}

.about-page section:nth-of-type(13) .center h5 {
  width: 40vw;
  margin:auto;
}


.about-page section:nth-of-type(15) .square-box {
    position: relative;
    width: 18.732vw;
    height: 18.732vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}

.about-page section:nth-of-type(15) .motg-box {
    position: relative;
    width: 18.732vw;
    height: 18.732vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
} 


.slider {

  width: 100vw;
  height: 30vw;
  margin: 8vw 0vw;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.slider:active {
  cursor: grabbing;
}

.slider-wrapper {
  display: flex;
  gap: 2.5vw;
  will-change: transform;
}

.slider-item {
  flex: 0 0 35vw;
  height: 30vw;
}

.slider-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}











.works-slider {
  grid-column: 1 / 13;
  width:100%;

  margin: 8vw 0vw;
  z-index:0;
  cursor:grabbing;
}

.works-container {
  display:flex;
  width: 100vw;
}

.work-slide {
  min-width:30vw;
  margin-right: 3.819vw;
  grid-gap: 1vw;
  display: grid;
  position:relative;
}

.work-slide img {
  width: 100%;
  height: 35vw;
  object-fit:cover;
}

.about-page .work-slide img {
  width: 100%;
  height: 30vw;
  object-fit:cover;
}

.work-slide .image {
  overflow: hidden;
}

.work-slide h5 {
  margin-bottom:1vw;
}










.about-page section:nth-of-type(14) .center h1 {
  width: 52.083vw;
  margin:auto;
}

.about-page section:nth-of-type(14) .center h5 {
  width: 63vw;
  margin:auto;
}

.about-page section:nth-of-type(15) .container .block {
  width: 35vw;
  margin:auto;
  text-align: center;
  display: grid;
  justify-content: center;
  align-items: center;
  grid-gap: 5vw;
}


.about-page section:nth-of-type(15) .container .block img {
  margin:auto;
  text-align: center;
  width: 22vw;
}

.about-page section:nth-of-type(16) .center {
  grid-gap: 10vw;
}

.about-page section:nth-of-type(16) .visual {
  margin: auto;
}

.about-page section:nth-of-type(16) .center h5:nth-of-type(1) {
  width: 65vw;
  margin:auto;
}

.about-page section:nth-of-type(16) .center h5:nth-of-type(2) {
  width: 51.968vw;
  margin:auto;
}

.about-page section:nth-of-type(16) .company-visual {
    position: relative;
    width: 29.861vw;
    height: 15.428vw;
    display: flex;
    justify-content: center;
    align-items: center;
} 

.about-page section:nth-of-type(17) .center {
  position: relative;
  grid-gap: 10vw;
}

.about-page section:nth-of-type(17) .center .symbol-about {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 19vw;
  z-index:2;
}

.about-page section:nth-of-type(17) .cta-buttons {
  position:relative;
  z-index: 3;
  display: flex;
  grid-gap: 1vw;
  margin: auto;
}



@media (max-width: 650px) {
  
  .about-hero {
    padding:30vw 0vw!important;
    padding-bottom: unset;
    width:unset!important;
  }
  
  .about-page section:not(.about-hero):not(:nth-of-type(6)) {

    padding-top: 20vw!important;
    padding-bottom: 20vw!important;
  }
  

  .about-page .center {
    grid-gap: 15vw;
    width:var(--mobile-width)!important;
    min-width:unset;
  }
   
  .about-hero .center {
    width:100%!important;
  }
  
  .about-hero .center .symbol-about {
    position: absolute;
    top: 73%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24vw;
  } 

  
  .about-page section:nth-of-type(3) .container {
    flex-direction: column;
  }
  /*
  .about-page section:not(.about-hero) {
    margin-bottom: 30vw!important;
  }
  */
  
  .about-page .container {
    display: flex;
    flex-direction: column-reverse;
  }
  
  .about-page .container .text, .about-page .container .visual {
    width:unset;
    text-align: center;
  }
  
  .about-page .container .visual {
    margin: auto;
  }
  
  .about-page section:nth-of-type(3) .road-container {
    width: 60vw;
    height: 40vw;
    position: relative;
    left: -5vw;
  }
  
  .about-page section:nth-of-type(4) .media-window {
    width: 75vw;
    height: 45vw;
    position: relative;
    right: 0vw;
  }
  
  .about-page section:nth-of-type(5) .center h3 {
    width: unset;
  }
  
  .about-page section:nth-of-type(6) {
    margin-bottom:0!important;
  }
  
  .about-page section:nth-of-type(6) .alignment-visual {
    width: 76vw;
    bottom:0;
    top:25vw;
  }  
  
  .about-page .light-bg {
    padding-top: 30vw!important;
  }

  .about-page .light-bg .images-trail {
    display:none;
  }
  
  .about-page section:nth-of-type(8) .globe-visual {
    width: 40vw;
    height: 40vw;
    margin: auto!important;
    position:relative;
    left:-8vw;
  }
  
  .about-page section:nth-of-type(8) .center h5, .about-page section:nth-of-type(8) .center h1 {
    width: unset;
  }
  .about-page section:nth-of-type(8) .center h5 {
    width:95vw;
  }
  
  .about-page section:nth-of-type(9) .center h5 {
    width: unset;
  }
  
  .about-page section:nth-of-type(10) .center {
    flex-direction: column;
  }
  
  .about-page section:nth-of-type(10) .center h5 {
    position: unset!important;
    width: unset!important;
  }
  .about-page section:nth-of-type(11) .center  {
    align-items:unset!important;
    height: unset!important;
  }
  .about-page section:nth-of-type(11) .center h5 {
    position: unset!important;
    width: unset!important;
    top:0;
    left:0;
    transform:unset!important;
    padding-left: 5vw;
  }
  
  .about-page section:nth-of-type(13) .center h5 {
    width: 85%;
  }
  
  .slider {
    overflow: hidden;
    width: 100%;
    height: 70vw;
    margin: 15vw 0vw;
  }
  
  .slider-item {
    flex: 0 0 75vw;
    height: 70vw;
  }
  
  .about-page section:nth-of-type(14) .center h1, .about-page section:nth-of-type(14) .center h5 {
    width: unset;
  }
  
  .about-page section:nth-of-type(15) .container .block {
    width: unset;
  }
  
  .about-page section:nth-of-type(15) .container  {
    grid-gap: 20vw;
            flex-direction: column;
  }
  
  .about-page section:nth-of-type(15) .motg-box, .about-page section:nth-of-type(15) .square-box {
    width: 35vw;
    height: 35vw;
    margin-top: 10vw;
  } 

  
  .about-page section:nth-of-type(16) .center h5:nth-of-type(1), .about-page section:nth-of-type(16) .center h5:nth-of-type(2) {
    width: 90%;
  }
  
  .about-page section:nth-of-type(16) .company-visual {
    width: 60vw;
    height: 35vw;
  }
  
  .about-page section:nth-of-type(17) .center {
    grid-gap: 15vw;
  }
  
  
  .about-page section:nth-of-type(17) .center .symbol-about {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24vw;
  }
  
  .about-page section:nth-of-type(17) .cta-buttons {
    flex-direction: column;
    grid-gap: 3vw;
    margin-top: 10vw;
  }

  .works-slider {
    margin: 15vw 0;
  }

  .work-slide {
    min-width:60vw;
  }
  
  .work-slide img {
   min-height:70vw;
  }

  .about-page .work-slide {
    min-width:60vw;
  }

  .about-page .work-slide img {
    min-height:60vw;
  }
  
}





/* - - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - 


Process Page


- - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - */

.process-hero {
  padding:15svh var(--grid-gap);
}

.predict {
  padding-top: 12vw;
  padding-bottom: 12vw;
}

.predict .block {
  grid-column: 2 / 10;
}

.predict .accordion {
  grid-column: 7 / 12;
}

.step {
  margin-bottom: 0;
  padding: 32px 0 32px 0;
  cursor: pointer;
  border-bottom: 0.7px solid rgba(2, 2, 2, 0.2);
}

.step-label {
  color: var(--red);
  margin-bottom: 2vw;
  text-transform: uppercase;
}

.step-title {
  margin: 0 0 16px 0;
  display: inline-block;
  vertical-align: middle;
}

.step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-gap: 2vw;
}

.step-line {
  flex: 1;
  height: 1px;
  background: var(--red);
  margin-left: 2vw;
  margin-right: 0;
  opacity: 0.5;
}

.step-desc {
  font-size: 1.2rem;
  color: #6d5c5c;
  margin: 0 0 32px 0;
  max-width: 700px;
}

.step-toggle {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 2.5rem;
  color: #3a1818;
  line-height: 1;
  padding: 0 8px;
  transition: color 0.2s;
}

.step-toggle:hover {
  color: #ff3c1b;
}

.tab-plus {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  font-weight: 400;
  vertical-align: middle;
}

.step.clickable {
  cursor: pointer;
}

.step-content {
  display: block;
}


.unexpected {
  padding-top: 12vw;
  padding-bottom: 12vw;
}

.unexpected .block {
  grid-column: 2 / 10;
}

.unexpected .tabs {
  grid-column: 2 / 12;
  display: grid;
  margin-bottom: 3vw;
  margin-top: 3vw;
}

.tabs-line {
  width: 100%;
  height: 3vw;
  border-bottom: 1px solid var(--red);
  margin-bottom: 3vw;
  color: var(--red);
  text-transform: uppercase;
}

.tabs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 3.819vw;
}

.tabs-container {
  grid-column: 2 / 12;
  display: flex;
  width: 100%;
  grid-gap: 3.819vw;
}

.tabs-container .tabs-grid {
  display: flex!important;
  flex-direction: column;
}

.tabs-container .tabs {
  height: auto;
  width: 50%;
  align-items: start;
  align-self: start;
}

.card {
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.card-box {
  height: 15vw;
  position: relative;
  border: 1px solid var(--red);
}

.card-top {
  display: flex;
}

.content {
  display: flex;
  flex-direction: column;
  padding: 3vw;
  padding-bottom: 4vw;
  height: 15vw;
  justify-content: space-between;
}

.content h6 {
  color: var(--red);
  margin-bottom: -1.5vw;
  text-transform: capitalize;
  line-height: 0.90;
  max-width: 90%;
}

.label {
  font-size:1.042vw;
  text-transform: uppercase;
  display: inline-block;
}

.icon-panel {
  position: absolute;
  align-items: center;
  height: 15vw;
  width: 7.5vw;
  border: 1px solid #ff1a00;
  right:0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  width: 100%;
  height: 7.5vw;
}

.icon img {
  width: 7.5vw;
  height: 7.5vw;
}

.plus {
  width: 100%;
  height: 7.5vw;
  border-top: 1px solid #ff1a00;
  color: #ff1a00;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.plus img, .tab-plus {
  width: 2.836vw;
}

.extra {
  padding: 3vw;
  border: 1px solid var(--red);
  opacity: 1;
  overflow: hidden;
  height:auto;
  min-height: fit-content;
  
}

.process-cta .center {
 padding: 12vw 0vw;
  width: 50vw;
  margin: auto;
}

.process-cta .section-headlines {
  display: grid;
  grid-gap: 3vw;
}

.process-cta .center .home-cta {
  all:unset;
  margin: auto;
  justify-content: center;
  
}

.process-cta .center .home-cta a {
  padding-right: 3vw;
  padding-left: 3vw;
  
}

@media (max-width: 650px) {
  
  .process-hero {
    padding:30vw 8vw!important;
    padding-bottom: unset;
  }
  
  .step-label, .label {
    margin-top:2vw;
    font-size: 3vw;
  }
  
  .tabs-line {
    font-size: 3vw;
    height: 6vw;
    margin-bottom: 8vw;
  }
  
  .tab-plus {
    width: 5vw;
    margin-top:-2.5vw;
  }  
  
  .plus img {
    width: 5vw;
  }  
  
  .predict .block h1, .unexpected .block h1  {
    margin-top: 5vw;
    margin-bottom: 9vw;
  }
  
  .tabs-grid {
    display: flex;
    flex-direction: column;
    grid-gap: 8vw;
  }
  
  .icon-panel {
    height: 40vw;
    width: 20vw;
  }
  
  .icon, .plus {
    height: 20vw;  
  }
  
  .icon img {
    width: 20vw;
    height: 20vw;
  }
  
  .card-box, .content {
    height:40vw;
  }
  
  .content {
    padding: 4vw;
    padding-bottom: 6.5vw;
  }
  
  .content h6 {
    max-width: 75%;
  }
  
  .tabs-container {
    flex-direction: column;
  }
  
  .tabs-container .tabs {
    width: unset;
  }
  
  .tabs, .tabs-container {
    margin-bottom: 10vw!important;
  }
  
  .process-cta .center {
    display: flex;
    flex-direction: column-reverse;
    width: 85%;
    padding-bottom: 20vw;
  }
  
  .process-cta .center .section-headlines {
    grid-gap: 10vw;
  }
}




/* - - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - 


Contact Page


- - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - */


.contact-hero {
  padding:10vw 16vw;
  padding-bottom: 10svh;
}

.contact-grid {
  margin-bottom:unset;
}

.contact-grid .indicator {
  grid-column: 2 / 4;
}

.contact-grid .form {
  grid-column: 4 / 12;
  display: grid;
  grid-gap: 4vw;
}


.section-number {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--primary-color);
	min-width: 40px;
	margin-top: 0.3rem;
}

.services-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: var(--grid-gap);
	margin-bottom: 1rem;
}

.service-option {
	display: flex;
	background: #f7f3f3;
  background:var(--white);
	border: 0.13vw solid transparent;
	padding: 2.4vw;
	font-size: 2.37vw;
  font-family: var(--primary-font);
  letter-spacing:-0.05vw;
  height: 14.294vw;
  align-items: end;
	cursor: pointer;
	transition: border 0.3s, box-shadow 0.3s;
	position: relative;
	user-select: none;
}

.service-option input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 1.5vw;
	height: 1.5vw;
	border-radius: 50%;
	border: 0.13vw solid var(--red);
	background-color: transparent;
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
  position: absolute;
  top:2vw;
  margin-left:0vw;
}

.service-option input[type="checkbox"]:checked {
	background-color: var(--red);
}

.service-option:hover {
	border: 0.13vw solid var(--red);
}

.form-block {
  padding-bottom: 5vw;
}

.contact-form textarea {
  border: unset;
  min-height: 23.148vw!important;
  padding: 2.4vw;
}

.contact-form .w-input {
  border: unset;
  padding: 2.4vw;

}

.contact-form .w-input {
  height: 2vw;
}

.contact-form .label-list {
  display: flex;
  flex-direction: column;
  grid-gap: 0.8vw;
}

.form-field {
	width: 100%;
	padding: 0.9rem 1rem;
	border-radius: var(--border-radius);
	border: 1.5px solid var(--input-border);
	font-family: inherit;
	font-size: 1rem;
	margin-bottom: 1rem;
	background: #fff;
	color: var(--text-color);
	box-sizing: border-box;
	resize: vertical;
}
textarea.form-field {
	min-height: 120px;
}
/* Submit Button */
.submit-button {
	background: var(--red);
  border: 2px solid var(--red);
	color: #fff;
  padding:1.5vw;
	border-radius: var(--border-radius);
	font-size: 2.025vw;
	cursor: pointer;
	transition: background 0.2s;
	letter-spacing: -0.05vw;
	margin-top: 3vw;
	width: 100%;
	display: block;
  text-transform: uppercase;
}
.submit-button:hover {
	background: var(--secondary-color);
  color: var(--red);
  border: 2px solid var(--red);
}
/* Responsive */
@media (max-width: 650px) {
  .contact-hero {
    padding:30vw 8vw!important;
    padding-bottom: unset;
    margin-bottom: -40vw;
  }
  
  .contact-form .step-label, .contact-form .label {
    margin-top:2vw;
    font-size: 4vw;
    line-height:1.4;
  }
  .contact-form .services-grid {
    grid-gap: 4vw;
    margin-top: 5vw;
  }
  .contact-form .service-option {
    height: 35vw;
    padding: 5vw;
    font-size: 7vw;
  }
  
  .service-option input[type="checkbox"] {
    width: 4.5vw;
    height: 4.5vw;
    border: 0.3vw solid var(--red);
    top: 4vw;
  }
  
  .contact-form textarea {
    min-height: 55vw!important;
    font-size: 3.5vw;
    padding: 5vw!important;
  }
  
  .contact-form .label-list .w-input {
    font-size: 3.5vw;
    padding: 5vw!important;
    min-height:13vw!important;
  }
  
  .submit-button {
    font-size: 6.245vw;
    padding: 4vw;
  }
  
	.contact-form-wrapper {
		padding: 1rem;
	}
	.form-section {
		flex-direction: column;
		gap: 0.5rem;
	}
	.services-grid {
		grid-template-columns: 1fr;
	}
}


/* - - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - 


Thank You Page


- - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - */


.thankyou-hero {
  display:flex;
  padding:10vw 16vw;
  align-items:center;
  justify-content:center;
  height:100svh!important;
}

.thankyou-hero .link-box {
  margin: auto;
  width: fit-content;
}