* {margin:0; padding:0; outline:none; border:none; box-sizing:border-box; -moz-box-sizing:border-box;}

/* GLOBAL */

html 	{}
body 	{line-height:1; font-family: "tt-commons-pro", sans-serif; background-color: #F8F7F4; color: #1D1816; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

h1		{font-family: "marlide-display-variable", sans-serif; font-weight: 300;}
h2		{font-size: 100px; font-family: "marlide-display-variable", sans-serif; font-weight: 300;}
h3		{font-family: "marlide-display-variable", sans-serif; font-weight: 300;}
h4		{font-family: "marlide-display-variable", sans-serif; font-weight: 300;}
h5		{font-family: "marlide-display-variable", sans-serif; font-weight: 300;}
h6		{font-family: "marlide-display-variable", sans-serif; font-weight: 300;}

p		{font-size: 18px; line-height: 1.7em; font-weight: 300; margin-bottom: .5em;}

sup		{top:-0.325em}

ul,
ol		{}

img     {max-width:100%; height:auto;}
a       {color:inherit;}
a.cover {position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0); display:block;}
.inner  {width:1260px; max-width:100%; margin:0 auto; padding: 0 30px}

.g-recaptcha div:first-of-type			{margin:auto;}


.to-top         {position: fixed;right: 0;bottom: 0;opacity:0;visibility:hidden;width: 55px;height: 55px;margin: 2.5em;padding:10px;z-index: 99;border-radius:50%;border:1px solid #838383;transition: all ease-in-out .5s;}
.to-top.active  {opacity:1;visibility:visible;}
.to-top img     {transform:rotate(-90deg);}

/* HEADER */
header 						{display: flex; justify-content: center; padding: 0px 30px; width: 100%; max-width: 100%; margin: 70px auto 0px auto; z-index: 99; position: fixed; left: 0; top: 0; transition:0.75s cubic-bezier(0.75, 0, 0, 1);}
header.hide-header			{transform: translateY(-100%); visibility: hidden; opacity: 0}

.logo						{position: relative; z-index: 2}

.hamburger					{position: absolute; right: 100px; display: flex; flex-direction: column; width: 90px; height: 90%; justify-content: center; cursor: pointer; z-index: 2; transition: 0.2s ease-in-out;}
.hamburger span				{width: 100%; height: 5px; margin: 5px 0; background-color: #000000;filter: contrast(0.5); display: block; transition: 0.75s cubic-bezier(0.75, 0, 0, 1);}
.hamburger span:last-child	{}
.hamburger.open span			{transform: rotate(45deg); background-color: #F8F7F4}
.hamburger.open span:last-child	{transform: rotate(-45deg); margin-top: -9.5px; background-color: #F8F7F4}

.faux-header	{height: 200px; width: 100%;}


/************/
/*** NAV ***/
/************/

nav							{position: fixed; width: 100vw; height: 100dvh; top: -100vh; left: 0; justify-content: center; align-items: center; display: flex; z-index: 0;}
nav ul						{height: calc(100% - 200px);display: flex; align-items: center; flex-direction: column; justify-content: center; font-size: 130px; font-family: "marlide-display-variable", sans-serif; font-weight: 300; line-height: normal; visibility: hidden; opacity: 0; transition: 0.2s ease-out}
nav ul li					{width: 100%;display: flex;justify-content: center;align-items: center;}
nav ul li a					{display: flex; align-items: center; justify-content: center; width: fit-content; height: 160px; white-space: nowrap; clip-path: inset(0px -50vw); perspective: 180px; color: #EAE3D4; text-transform: uppercase; font-weight: 300}
.nav-item-box 				{display: flex; justify-content: center; align-items: center; transition-property: transform; transition:0.75s cubic-bezier(0.75, 0, 0, 1); transform-style: preserve-3d; transform: rotateX(-360deg);}
.nav-text-up 				{position: absolute; transform: translateZ(-45px) rotateX(180deg); backface-visibility: hidden;}
.nav-text-up .nav-text 		{margin-bottom: -16px; margin-top: 4px;}
.nav-hover-top 				{position: absolute; letter-spacing: 0em; backface-visibility: hidden; transform: translateY(35%) rotateX(-90deg) scale(1.04);}
.nav-hover-top .nav-text 	{margin-bottom: -20px; margin-top: 0; color: #FFFFFF; text-transform: uppercase;}

nav:before	{background-color: #1D1816; width: 100%; position: absolute; left: 0; content: ''; z-index: 0; top: 0; height: 0; transition: 0.75s cubic-bezier(0.75, 0, 0, 1);}


nav ul li:hover .nav-item-box	{transform: rotateX(90deg) !important;}
nav.open			{top: 0}
nav.open:before		{height: 100%;}
.nav-inner			{width: 100%; height: 100%; overflow-y: auto}

nav.open ul	{opacity:1 ; visibility: visible; padding-bottom: 30px;}
nav.open li	{overflow: hidden;}

nav.open li a				{animation:nav-item-in 0.5s ease-in-out forwards; animation-delay: 0.1s; transform: translateY(100%)}
nav.open li:nth-child(2) a	{animation-delay: 0.15s}	
nav.open li:nth-child(3) a	{animation-delay: 0.2s}	
nav.open li:nth-child(4) a	{animation-delay: 0.25s}	
nav.open li:nth-child(5) a	{animation-delay: 0.3s}	
nav.open li:nth-child(6) a	{animation-delay: 0.35s}

nav .nav-text-up .nav-text		{font-variation-settings: "wght" 300;}
nav .nav-hover-top .nav-text	{font-variation-settings: "wght" 400;}

nav.closed			{top: 0; visibility: hidden}
nav.closed:before	{height: 0%;}

@keyframes nav-item-in {
	0%		{transform: translateY(100%)}
	100%	{transform: translateY(0px)}
}


/******************/
/*** HOME HERO ***/
/****************/

.home-hero		{display: flex; width: 100%; height: 100vh; align-items: center; text-align: center;}
.home-hero h1	{font-size: 240px; text-align: center; display: block; width: 100%; line-height: 0.75em; text-transform: uppercase; color:#1D1816 !important }

.home-hero .nav-text							{color:#1D1816 !important;}
.home-hero .nav-item-box						{margin-top:100px; animation: tumble-text 1.75s cubic-bezier(0.75, 0, 0, 1) forwards 1s; transform: rotateX(180deg);}
.home-hero .nav-text-up							{padding: 0; margin: 0; line-height: 0.75em; transform: translateZ(-70px) rotateX(180deg);}
.home-hero .nav-hover-top						{padding: 0; margin: 0; line-height: 0.75em; transform: translateY(90px) rotateX(-90deg) scale(1.04);}

.home-hero .nav-item-box.reverse				{animation: tumble-text-reverse 1.75s cubic-bezier(0.75, 0, 0, 1) forwards 1s; transform: rotateX(90deg);}
.home-hero .nav-item-box.reverse .nav-text-up	{transform: translateZ(90px) rotateX(0deg);}
.home-hero .nav-item-box.reverse .nav-hover-top	{transform: translateY(70px) rotateX(-90deg) scale(1.04);}

@keyframes tumble-text	{
	0%		{transform: rotateX(180deg);}
	100%	{transform: rotateX(90deg);}
}
@keyframes tumble-text-reverse	{
	0%			{transform: rotateX(90deg);}
	100%		{transform: rotateX(0deg);}
}

/*******************/
/*** HOME VIDEO ***/
/*****************/

.box				{width: 100%; height: 100%; background-color: #ffffff; transform: scale(0); opacity: 0}
.box-video,
.box-image			{position: relative;}
.box-video video	{width: 90%; height: 90%; object-fit: contain; object-position: center}
.box-image img		{object-fit: cover;object-position: center;}

.case-study-section img.image-mb,
.news-header-image img.image-mb,
.full-width-image .image-mb,
.box-image img.image-mb					{display:none !important;}

.video-mb		{display:none !important;}

/*.home-video-section			{display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; position: relative; z-index: 2;}
.home-video-section .box	{display: flex; align-items: center; justify-content: center;}*/

.home-video-section		    {width: 100%; margin-top: -100px;}
.home-video-section .box	{transform-origin: top; opacity: 1; transform: scale(0.85); background-color: transparent}
.home-video-section video   {width: 100%;height: 100%;}

video::-webkit-media-controls-timeline,
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display {
	display: none;
}

/************************/
/*** HOME INTRO TEXT ***/
/**********************/

.home-main	{background-color: #F8F7F4; position: relative}

.home-intro-text			{padding: 150px 0 100px 0; position: relative}
.home-intro-text .inner		{width: 1240px; padding: 0 30px;}
.hit-text					{display: flex;gap:100px;}
.hit-text h2				{font-size: 100px; line-height: 0.9em}
.hit-left					{width: 500px; flex-shrink: 0}

/*.home-intro-text:after	{background-color: #F8F7F4; position: absolute; left: 0; top:-150px; height: 150px; width: 100%; display: block; content: '';}*/

/************************/
/*** HOME INTRO TEXT ***/
/**********************/

.home-listing-card-inner	{width: 100%;max-width: 100%; height: 767px; margin: auto; background-size: cover; background-position: center; display: block; margin-bottom: 100px;}

/*********************/
/*** NEWS & VIEWS ***/
/*******************/

.news-views-section 		{background-color: #1D1816; padding: 150px 0 200px; margin-top: 100px;}
.news-views-section	h2		{font-size: 245px; color: #EAE3D4; text-transform: uppercase; display: block; text-align: center;}
.news-views-section .inner	{width: 1540px}

.news-views-section .cols	{display: flex; flex-wrap: wrap; gap: 1em; justify-content:space-between; margin: 30px auto 80px; max-width: 2000px;}
.news-views-section .col	{width: 30%;}

.listing-card									{display: flex; flex-direction: column; justify-content: flex-start; height: 100%; text-decoration: none; position: relative;}
.listing-card .listing-card-text				{position: relative;}
.listing-card .listing-card-text:after			{position: absolute; left: 0; bottom: 0; border-top:1px solid #EAE3D4; content: ''; width: 0%; transition:0.75s cubic-bezier(0.75, 0, 0, 1);}
.listing-card .listing-card-text p				{color: #ffffff; font-weight: 400; font-size: 30px; text-transform: uppercase; line-height: 1.3em; transition:0.75s cubic-bezier(0.75, 0, 0, 1);}
.listing-card .listing-card-text p span			{color: #ffffff; font-family: "marlide-display-variable", sans-serif; transition:0.75s cubic-bezier(0.75, 0, 0, 1);}
.listing-card-image-container					{padding-top: 55%; overflow: hidden; position: relative; margin-bottom: 10px;}
.listing-card-image								{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transition:0.75s cubic-bezier(0.75, 0, 0, 1);}

.listing-card:hover p,
.listing-card:hover p span						{color: #EAE3D4}
.listing-card:hover .listing-card-image			{transform: scale(1.1)}
.listing-card:hover .listing-card-text:after	{width: 100%;}

/****************************/
/*** CASE STUDIES LISTING ***/
/****************************/

.case-studies-listing .cols		{width:1580px; max-width: 100%; margin: auto; display: flex; flex-wrap: wrap; padding-left: 26px; padding-right: 26px;}
.case-studies-listing.flipped .cols		{flex-direction:row-reverse;}
.case-studies-listing .col		{padding: 26px; width: 50%;}

.case-studies-listing .listing-card p		{font-size: 21px; color: #1D1816; font-weight: 700}
.case-studies-listing .listing-card p span	{font-size: 21px; color: #1D1816; font-weight: 300}
.case-studies-listing .listing-card:after	{border-color: #1D1816}

.case-studies-listing .col.col-half		{width: 66.666%}
.case-studies-listing .col.col-third	{width: 33.333%}
.case-studies-listing .col.col-half .listing-card-image-container	{/*padding: 0; height: 760px;*/ padding-top: 77%}

.case-studies-listing .col.col-stacked									{display: flex; flex-direction: column; justify-content: space-between}
.case-studies-listing .col.col-stacked .col								{padding: 0; width: 100%;}
.case-studies-listing .col.col-stacked .listing-card					{height: auto}
.case-studies-listing .col.col-third .listing-card-image-container		{/*padding: 0; height: 340px;*/ padding-top: 73%}

/********************/
/*** PAGE HEADING ***/
/********************/

.page-heading							{padding:300px 0 100px 0; text-align: center;}
.page-heading .page-heading-text		{animation: heading-in 2s cubic-bezier(0.19, 1, 0.22, 1) 0.25s forwards; opacity: 0; transform: translateY(100px)}
.page-heading .page-heading-text h1		{font-size: 200px; line-height: 0.8em; text-transform: uppercase; }

.page-heading.full	{height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; padding: 0}

.page-heading.full.case-study-page-heading.inline {height: auto; padding: 100px 0px; }


.page-heading.page-heading-sticky		{position: fixed;top: 200px;left: 50%;transform: translate(-50%, 0);z-index: 2;padding:0;width:100%;}

@keyframes heading-in {
	0% 	{opacity: 0; transform: translateY(100px)}
	100% {opacity: 1; transform: translateY(0px)}	
}

/*******************/
/*** CASE STUDY ***/
/******************/

.case-study-section             {padding: 50px 0;}

.case-study-subtitle			{border: 0.5px solid #9E9B98;padding: 8px 15px;border-radius: 25px;width: fit-content;margin: auto;margin-top: 2.5em;}
.case-study-subtitle h2			{font-size: 45px;margin: 5px;}

.case-study-video-section,
.case-study-image-section		{width: 100%; margin-top: -100px;}
.case-study-video-section video,
.case-study-image-section img	{width: 100%; height: 100%}
.case-study-video-section .box,
.case-study-image-section .box	{transform-origin: top; opacity: 1; transform: scale(0.85); background-color: transparent}

.vimeo-container				{padding:56.25% 0 0 0;position:relative;}

.case-study-intro-text			{padding: 100px 0; position: relative}
.case-study-intro-text .inner	{}
.csit-text						{display: flex;gap:1em;}
.csit-text h2					{font-size: 70px; line-height: 0.9em}
.csit-left						{width: 50%; flex-shrink: 0}

.case-study-cats				{border-top:0.2px solid #dddddd; border-bottom:0.2px solid #dddddd; margin-bottom: 65px;}
.case-study-cats ul				{display: flex; justify-content: center; list-style: none; font-size: 18px; font-weight: 400;flex-wrap: wrap;}
.case-study-cats ul li			{margin: 0 40px}
.case-study-cats ul li a		{transition: 0.2s ease-out; text-decoration: none}
.case-study-cats ul li a:hover	{opacity: 0.5}

.case-study-one-media,
.case-study-two-media,
.case-study-text-section,
.case-study-video-section-2		{font-size: 0}

.case-study-text-section p			{margin-bottom:1em;}

.case-study-video-section-2	{height: auto;margin-top:0;}
.case-study-video-section-2 .box		{transform: none;}

.case-study-one-media .cols,
.case-study-two-media .cols,
.case-study-text-section .cols,
.case-study-carousel .cols	{width: 100%; display: flex;}
.case-study-one-media.flipped .cols,
.case-study-two-media.flipped .cols,
.case-study-text-section.flipped .cols		{margin-left:unset;}

.case-study-two-media.split	.cols			{align-items:stretch;}

.case-study-section .cols .col-flex				{display: flex;flex-direction: column;justify-content: space-between;}
.case-study-section .cols .col:has(~ .col-flex)		{padding-right: 25px;}

.case-study-section .cols .col.col-flex .media-panel		{margin-bottom:0;}
.case-study-section .cols .col:has(~ .col-flex) .media-panel		{margin-bottom:0;}

.case-study-one-media .col	{width: 100%;}

.case-study-two-media .col,
.case-study-text-section .col	{margin-left: auto; width: 50%;}

.case-study-text-section.center .col	{margin: auto; width: 100%; max-width: 780px; text-align: center; }

.case-study-two-media.flipped .col,
.case-study-text-section.flipped .col		{margin-left:unset;}

.case-study-two-media .col:nth-of-type(odd)   {padding-right:12px;}
.case-study-two-media .col:nth-of-type(even)   {padding-left:12px;}

.case-study-video-video .cols .col			{display:flex;justify-content:center;align-items:center;height:800px;}
.case-study-video-video .media-panel			{width:100%;height:100%;}

.case-study-stats-section					{padding: 100px 0;}
.case-study-stats-section .cols				{width: 100%; display: flex; justify-content:center; flex-wrap: wrap;}
.case-study-stats-section .cols .col		{text-align:center;width: 33.33%;}

.media-panel				{margin-bottom:25px;}
.media-panel video          {max-width: 100%;height: 100%;}

.blockquote-section							{text-align: center; padding: 300px 0 150px}
.blockquote-section blockquote p			{font-size: 37px; font-weight: 300; margin-bottom: 1em}
.blockquote-section blockquote cite			{font-size: 70px; display: block; font-style: normal; margin-top: 60px; font-family: "marlide-display-variable", sans-serif;}
.blockquote-section blockquote cite p		{font-size: 70px; display: block; font-style: normal; margin-bottom:0; line-height:.75em;}
.blockquote-section blockquote cite span	{display: block; font-family: "tt-commons-pro", sans-serif; font-weight: 300; font-size: 18px; margin-top: 7px;}

.next-project-section		{position: relative; padding: 160px 0; margin: 100px 0 30px; overflow: hidden;}
.next-project-section:after	{position: absolute; left: 0; top: 0;  inset: 0; content: ''; background-color: rgba(0,0,0,0.5);}
.next-project-section.hovered .next-project-bg {transform: scale(1.1);}
.next-project-section .buttons		{margin: 40px 0;}
.next-project-section .btn	{position: relative; z-index: 2; width: 450px; justify-content: center;}
.next-project-bg			{position: absolute; left: 0; top: 0;  inset: 0; background-size: cover; background-position: center; transition: ease-in-out .35s;}

.banner-header-section											{position: relative; z-index: 3;}
.banner-header-section.banner-header-section-sticky				{padding-top:700px;}
.banner-header-section .banner-image img.banner-mb				{display:none;}
.banner-image			{margin-top: -90px;/*transform: scale(0);*/}
.banner-image img		{width:100%;}

.full-width-image			{display: flex;align-items: flex-end;min-height:900px;position: relative;overflow: hidden;}
.full-width-image div		{width:100%;background:transparent;}
.full-width-image img.image-dk		{position: absolute;bottom: 0;left: 0;width: 100%;height: 110%;object-fit: cover;object-position: center;padding: 0;}


.case-study-carousel										{width: 100%;}
.case-study-carousel .carousel .slick-list                  {display: block;}
.case-study-carousel .carousel .slick-track                 {height: 50vw;max-height: 750px;}
.case-study-carousel .carousel .slick-slide                 {height: 100%; margin: 0 2em;}
.case-study-carousel .carousel .slick-slide.vimeo-video		{width: 60vw;}


.case-study-carousel .slick-arrow					{width: 50%;min-width:250px;height:100%;}
.case-study-carousel .slick-arrow:hover				{cursor:url(/_uploads/_assets/arrow-cursor-red.png), auto;}
.case-study-carousel .slick-arrow.slick-prev		{left: 9px;}
.case-study-carousel .slick-arrow.slick-prev:hover	{cursor:url(/_uploads/_assets/arrow-cursor-red-left.png), auto;}
.case-study-carousel .slick-arrow.slick-next		{right: 0;left:unset !important;}




.case-study-carousel.case-study-video-carousel .slick-arrow {width: 20%;}


/******************/
/***    SLICK   ***/
/******************/
.carousel									{ width: 100%; margin: auto; position: relative; }
.carousel:hover .slick-arrow				{ opacity: 1; visibility: visible; }
.carousel .slick-arrow						{ position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 1; background: transparent; opacity: 0; visibility:hidden; transition: ease-in-out .5s; }
.carousel .slick-arrow img					{ width: 40px; }
.carousel .slick-arrow.slick-prev			{ left: 10px; }
.carousel .slick-arrow.slick-prev img		{ transform: rotate(180deg); }
.carousel .slick-arrow.slick-next			{ left: calc(100% - 50px); }
.carousel .slick-arrow.slick-disabled		{ display: none !important; }

/******************/
/*** WHAT WE DO ***/
/******************/

.standard-intro-text			{padding: 100px 0; position: relative; /*border-bottom: 1px solid #e1e1e1;*/}
.cracking-section .inner,
.standard-intro-text .inner		{}
.cracking-cols,
.stan-text						{display: flex; justify-content: space-between}
.our-brands h2,
.stan-text h2					{font-size: 100px; line-height: 0.9em}

.cracking-left,
.stan-left						{flex-shrink: 1}
.cracking-right,
.stan-right						{width: 37.5%; flex-shrink: 0}

.standard-intro-text.narrow .inner		{width: 1240px;}
.standard-intro-text.narrow .stan-right	{width: 47%}


.our-brands			{padding: 140px 0 200px; background-color: #000}
.our-brands h2		{color: #ffffff}
.accordion .inner,
.our-brands .inner	{}
.brands-intro		{width: 560px; max-width: 100%; margin-bottom: 100px; margin-left: 55px;}

.our-brands .brands-listing						{display:flex;flex-wrap:wrap;row-gap:2em;column-gap:5px;justify-content:space-between;align-items:center;}
.our-brands .brands-listing .brand-item			{width: 195px;height: 110px;overflow: hidden;display: flex;justify-content: center;align-items: center;padding:20px;margin: 0 10px;}
.our-brands .brands-listing .brand-item img		{height:100%;}

/*************************/
/*** CRACKING SECTION ***/
/************************/

.cracking-section					{padding: 100px 0;}
.cracking-section h2				{font-size: 100px; position: sticky;}
.cracking-right						{display: flex;}
.cracking-right ul					{font-size: 30px; font-weight: 300; list-style: none; line-height: 1.2em; left: -110px; position: relative; padding-top: 29px; padding-bottom: 30px; text-align: left;}
.cracking-right ul li				{margin-bottom: 30px}
.cracking-right ul li:last-child	{margin-bottom: 0}
.cracking-right .arrow				{width: 107px; height: 94px; background-image: url(/_uploads/_assets/arrow-red.svg); background-size: contain;background-repeat: no-repeat;content: ''; display: block; position: sticky; transform: translateX(-135px); margin-top: 5px;}

/* STICKYNESS */
.cracking-section h2,
.cracking-right .arrow	{ top: 20vh}

/*****************/
/*** ABOUT US ***/
/***************/

.join-the-team,
.meet-the-team		{padding: 150px 0; background-color: #1D1816; color: #F8F7F4; overflow-x: hidden;}
.for-the-curious h2,
.join-the-team h2,
.meet-the-team h2	{font-size: 200px; text-transform: uppercase; line-height: 0.8em; margin-bottom: 50px;}
.jtt-intro,
.mtt-intro			{width: 860px; max-width: 100%; margin: auto; text-align: center}

.mtt-carousel								{display: flex; margin: 100px 0}
.mtt-carousel .slick-list					{width: 95%; margin: auto;}
.mtt-carousel .slick-arrow					{width: 50%;min-width:250px;height:100%;}
.mtt-carousel .slick-arrow:hover			{cursor:url(/_uploads/_assets/arrow-cursor-red.png), auto;}
.mtt-carousel .slick-arrow.slick-prev		{left: 9px;}
.mtt-carousel .slick-arrow.slick-prev:hover	{cursor:url(/_uploads/_assets/arrow-cursor-red-left.png), auto;}
.mtt-carousel .slick-arrow.slick-next		{right: 0;left:unset;}
.mtt-carousel .slick-list img							{width: 16.667%}
.mtt-carousel .slick-list img:nth-child(odd)			{margin-top: 80px;}
.mtt-carousel .slick-list .mtt-carousel-slide img		{width: 100%}

.mtt-carousel ul.slick-dots					{position: absolute;bottom: -20px;left: 50%;transform: translate(-50%, 20px);display: flex;gap: 1em;list-style: none;}
.mtt-carousel ul.slick-dots li				{font-size:0;width:10px;height:10px;border-radius:50%;background-color:#e5e5e5;cursor:pointer;}
.mtt-carousel ul.slick-dots li.slick-active {background-color:#FF0045;}

.join-the-team		{padding-top: 25px;}

/* JOIN THE TEAM */
.accordion						{margin-top: 60px;}
.accordion-item					{border-bottom: 0.2px solid #ffffff;}
.accordion-item h3				{font-size: 40px; font-weight: 400; color: #FFFFFF; text-transform: uppercase; font-family: "tt-commons-pro", sans-serif; padding: 54px 50px 54px 0; position: relative; cursor: pointer; transition: 0.75s cubic-bezier(0.19, 1, 0.22, 1);}
.accordion-item h3 svg,
.accordion-item h3 img          {position: absolute; right: 0; top: 50%; margin-top: -23px; transition: 0.75s cubic-bezier(0.19, 1, 0.22, 1); width: 50px;}
.accordion-item h3:hover svg,
.accordion-item h3:hover img    {transform: rotate(30deg);}
.accordion-item h3:hover		{padding-left: 15px;}
.accordion-expanded				{padding-bottom: 40px; display: none}
.accordion-expanded .inner		{padding-right: 180px;}
.accordion-expanded p			{width: 90%;}

.accordion-item.active h3:hover	{padding-left: 0}
.accordion-item.active h3 svg,
.accordion-item.active h3 img   {transform: rotate(90deg) !important}

.skill-set					{display: flex; justify-content: flex-start; margin-top: 50px;}
.skill-set ul				{font-size: 18px; line-height: 1.3em; font-weight: 300; margin: 1em; margin-bottom: 0}
.skill-set ul li			{margin-bottom: 8px;}
.skill-set h4				{font-size: 24px; font-family: "tt-commons-pro", sans-serif; font-weight: 400}
.skill-set .col				{border-right: 0.2px solid #ffffff; padding: 0 50px;}
.skill-set .col:first-child	{padding-left: 0}
.skill-set .col:last-child	{border: none}

.apply-actions			{display: flex; width: 100%; align-items: center; margin: 50px 0}
.apply-actions .btn		{flex-shrink: 0; margin-right: 70px;}
.apply-actions .btn p	{width: auto}
.share					{transition: 0.2s ease-out}
.share:hover			{opacity: 0.5}

/* FOR THE CURIOUS */
.for-the-curious		{background-color: #EAE3D4; padding: 140px 0;}
.for-the-curious h2		{}
.ftc-intro				{text-align: center; margin-bottom: 120px;}
.ftc-intro h2			{}
.for-the-curious h3		{font-size: 70px; line-height: 0.9em; margin-bottom: 0.4em; color:#013D3E}
.ftc-text				{width: 556px;}
.ftc-text p				{margin-bottom: 1em}
.ftc-row				{display: flex; transform: translateY(100px) scale(0.75); opacity: 0}
.ftc-row:nth-child(odd)	{justify-content: flex-end}

/*********************/
/*** CONTACT PAGE ***/
/*******************/

.contact-intro-section			{padding: 80px 0}
.contact-intro-section .cols	{display: flex; flex-direction: row; flex-wrap: wrap}
.contact-intro-section .col		{width: 50%; padding: 30px; text-align: center}

.contact-intro-section h2				{font-size: 40px; margin-bottom: 0.25em}
.contact-intro-section p				{font-size: 26px; font-weight: 300}
.contact-intro-section a				{text-decoration: none; transition: 0.2s ease-out}
.contact-intro-section a[href^="tel:"]	{color: #FF0045;}
.contact-intro-section a:hover			{opacity: 0.5}

.contact-form	{background-color: #1D1816; padding: 120px 0 100px; color: #ffffff}
.form-intro		{text-align: center;}

.form-container			{width: 866px; max-width: 100%; margin:90px auto}
.form-container .button	{margin-top: 100px;}
.form-container button	{background: none; min-width: 275px; text-align: center; justify-content: center}
.form-row				{margin-bottom: 75px;}

.form-text-box			{position: relative; height: 98px; transition: 0.2s ease-out}
.form-text-box:after	{position: absolute; bottom: 0; left: 0; width: 100%; border-bottom: 0.2px solid #ffffff; content: '';}
.form-text-box input	{position: absolute; left: 0; bottom: 0; font-size: 33px; width: 100%; height: 70px; color: #F8F7F4; background-color: transparent; font-family: "marlide-display-variable", sans-serif;}
.form-text-box label	{font-size: 30px; font-weight: 300; color: #ffffff; position: absolute; left: 0; top: 0; text-transform: uppercase; transition: 0.4s ease-out}

.form-text-box:focus-within:after	{border-bottom:2px solid #F8F7F4}
.form-text-box:focus-within	label	{font-weight: 600; color: #F8F7F4;}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {transition: background-color 9999s ease-in-out 0s; -webkit-text-fill-color: #F8F7F4}

.form-errors p						{text-align:center;margin-bottom:2em;}
.form-errors p,
.form-field-error				{color:#FF0045;font-size:13px;}
.form-text-box .form-field-error		{position:absolute;right:0;}

/*********************/
/*** NEWS LISTING ***/
/*******************/

ul.tags				{display: flex; list-style: none; justify-content: center; margin-top: 100px; font-size: 14px;}
ul.tags.animate		{animation: 1s heading-in cubic-bezier(0.19, 1, 0.22, 1) 0.75s forwards; opacity: 0;transform: translateY(100px); }
ul.tags li			{margin: 0 7.5px}
ul.tags li a		{padding: 13px 38px; border: 0.2px solid #1D1816; border-radius: 15px; text-decoration: none; transition: 0.75s cubic-bezier(0.19, 1, 0.22, 1); display: block}
ul.tags li a.active:hover,
ul.tags li a.active	{background-color: #1D1816; color: #ffffff}
ul.tags li:hover a	{background-color: #EAE3D4;}

.news-listing					{padding: 80px 0}
.news-listing-item				{width: fit-content; max-width: 100%; margin:0 auto 125px auto; text-align: center}
.news-listing-item:last-child	{margin-bottom: 0}
.news-listing-item h2			{font-size: 100px; margin-bottom: 0; display: flex;justify-content: center; order: 3;padding: 0 1em;}
.news-listing-item h2 a			{text-decoration: none; transition: 0.75s cubic-bezier(0.19, 1, 0.22, 1); display: block}
.news-listing-item h2 a:hover	{transform: scale(1.05)}
.news-listing-item ul.tags		{margin-top:50px;margin-bottom:20px;z-index:6;position:relative;order:2;}
.news-listing-item ul.tags li,
.news-article ul.tags li		{padding: 13px 20px; border: 0.5px solid #1D1816; border-radius: 15px; text-decoration: none; transition: 0.75s cubic-bezier(0.19, 1, 0.22, 1); display: block}

.news-listing .news-listing-item                    {position:relative;}
.news-listing .news-listing-item a.cover			{display:none;}
.news-listing .news-listing-item a:not(.cover)      {position:relative;z-index: 1;width: fit-content;}
.news-listing .news-listing-item a span.white       {color: #fff;opacity: 0;transition: opacity .3s;position: absolute;top: 0;left: 0;}
.news-listing .news-listing-item img                {z-index: 1;max-width: 300px;height: auto;opacity: 0;pointer-events: none;transition: opacity .3s;position: fixed;top: 0;right: 0;}
.news-listing .news-listing-item img.image-mb		{display:none;}

.news-listing .news-listing-item.active             {z-index: 5;}
.news-listing .news-listing-item.active a           {z-index: 3;}
.news-listing .news-listing-item.active a span.white, .news-listing .news-listing-item.active img, .news-listing .news-listing-item.active, .news-listing .news-listing-item.active span.white {opacity: 1;}

.news-listing-item	{transform: translateY(150px); opacity: 0}

.news-article .btn p	{text-align: center}

/***********************/
/*** NEWS LISTING V2 ***/
/***********************/
.news-listing .news-listing-item.news-listing-item-v2						{margin-bottom: 60px;}
.news-listing .news-listing-item.news-listing-item-v2:first-of-type			{opacity: 0.35;margin-top:-100px;transform: translate(0px, 50px);}
.news-listing .news-listing-item.news-listing-item-v2 a.cover				{display:block;z-index:10;}
.news-listing .news-listing-item.news-listing-item-v2 a.cover:hover ~ img	{transform: scale(1.05);}
.news-listing .news-listing-item.news-listing-item-v2 img					{width:100%;max-width:1000px;max-height:600px;opacity:1;object-fit: cover;pointer-events: none;transition: ease-in-out .3s;position: relative;top: unset;right: unset;}
.news-listing .news-listing-item.news-listing-item-v2 ul.tags				{margin-top:40px;margin-bottom: 40px;}
.news-listing .news-listing-item.news-listing-item-v2 h2 a:hover			{transform:none;}

/*********************/
/*** NEWS LISTING ***/
/*******************/

.news-header .news-header-image img				{display:block;margin:auto;}
.news-article ul.tags	{margin: 60px 0;}
.news-inner	h2			{font-size: 70px; color: #013D3E; margin-bottom: 0.5em}
.news-inner p			{margin-bottom: 1.3em}
.news-inner				{width: 556px; max-width: 100%; margin: auto}

.image-pullout			{display: flex; justify-content: space-between; border-top:0.2px solid #1D1816; padding: 80px 0; margin-top: 80px;}
.image-pullout img		{width: 30%;}

/*********************/
/*** TEXT PAGE ***/
/*******************/
.text-page									{}
.text-page .text-page-intro					{}
.text-page .text-page-intro p				{margin-bottom:.75em;}

/*********************/
/*** ATTIC PAGE ***/
/*******************/
.attic-section								{padding-top:250px;padding-bottom:100px;}
.attic-section .inner						{width:1540px;}

.attic-grid									{display:grid;grid-gap:2.5em;justify-content: center;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));padding: 0 1em;}
.attic-grid .attic-item						{display:flex;flex-direction:column;gap:0.25em;cursor:pointer;}
.attic-grid .attic-item:hover .attic-image img {filter:none;}
.attic-grid .attic-item .attic-top			{display:flex;justify-content:space-between;align-items:center;}
.attic-grid .attic-item .attic-top p		{margin-bottom:0;font-size:15px;}
.attic-grid .attic-item .attic-top p:last-of-type {color:#5d5d5d;}
.attic-grid .attic-item .attic-image img	{width: 100%;filter:grayscale(1);transition: all ease-in-out .35s;}

.attic-carousel									{display: flex; margin: 100px 0;height: 75vh;}
.attic-carousel .slick-list						{width: 100%; height:100%; margin: auto;}
.attic-carousel .slick-list .slick-track		{height:100%;}
.attic-carousel .attic-carousel-slide			{position:relative;text-align: center;}
.attic-carousel .attic-carousel-slide img,
.attic-carousel .attic-carousel-slide video		{height:auto;display:none;}
.attic-carousel .attic-carousel-slide.slick-active img,
.attic-carousel .attic-carousel-slide.slick-active video		{display:block;margin:auto;}
.attic-carousel .attic-carousel-slide iframe	{z-index:2;position:relative;}
.attic-carousel .slick-arrow					{width: calc(50% + 150px);min-width:250px;height:100%;}
.attic-carousel .slick-arrow:hover				{cursor:url(/_uploads/_assets/arrow-cursor-red.png), auto;}
.attic-carousel .slick-arrow.slick-prev			{left: -150px;}
.attic-carousel .slick-arrow.slick-prev:hover	{cursor:url(/_uploads/_assets/arrow-cursor-red-left.png), auto;}
.attic-carousel .slick-arrow.slick-next			{right: -150px;left:unset;}

.attic-carousel-text						{display:flex;flex-direction:column;gap:1em;position:absolute;top:50%;right:15px;transform:translate(0, -50%);color:#000;/*max-width:350px;*/}
.attic-carousel-text.sm						{top:unset;right:unset;bottom:10px;/*left:50%;transform:translate(-50%, 0);*/ flex-direction: row;}
.attic-carousel-text p						{font-size:12px;line-height:1.25em;}
.attic-carousel-text .attic-client-text-right		{/*max-width:250px;*/ padding-right: 5px;}

.attic-carousel-slide-controls								{position:absolute;top:0;left:50%;transform:translate(0, -50%);display: flex;gap: 0.5em;align-items: center;justify-content: center;}
.attic-carousel-slide-controls button						{background:transparent;}
.attic-carousel-slide-controls button:hover svg				{opacity:.75;}
.attic-carousel-slide-controls button svg					{width:15px;height:15px;display:none;transform: scale(1.25);}
.attic-carousel-slide-controls button svg.icon-active		{display:block;}

.attic-client-text-left {width: 160px;}

.attic-overlay		{position:fixed;width:100%;height:100%;background:#fff;left:0;z-index:110;display:flex;align-items:center;justify-content:center;top:-100%;opacity:0;transition:all ease-in-out .5s;}
.attic-overlay.open			{top:0;opacity:1;}

.overlay-close					{position: absolute; top:20px; right: 25px; display: flex; flex-direction: column; width: 60px; height: 60px; justify-content: center; cursor: pointer; z-index: 2}
.overlay-close span				{width: 100%; height: 4px; margin: 5px 0; background-color: #000000;display: block; transition: 0.75s cubic-bezier(0.75, 0, 0, 1);transform: rotate(45deg);}
.overlay-close span:last-child	{transform: rotate(-45deg); margin-top: -9.5px;}

/* MEDIA PAGE */
.intro-text-centre		{text-align: center; width: 860px; max-width: 100%; margin: auto;}
.intro-text-centre h2	{text-transform: uppercase; margin-bottom: 0.25em}

.senior-team-listing .inner	{width: 1506px}
.senior-team-listing .cols	{gap:140px; display: flex; margin-top: 80px;}
.senior-team-listing .col	{flex:1}

.sc-image-container 		{position: relative; overflow: hidden; width: 100%;}
.sc-image					{background-size: cover; background-position: center; padding-top: 100%;}

.sc-text		{padding-top: 30px;}
.sc-text h3		{font-size: 100px; line-height: 0.9em; margin-bottom: 0.1em}
.sc-text h4		{font-size: 50px; margin-bottom: 0.25em}

/**************/
/*** FOOTER ***/
/**************/

footer			{background-color: #F8F7F4; position: relative; z-index: 2}
footer .inner	{width: 1540px; padding: 0 30px;}

.footer-top							{padding: 100px 0; background-color: #F8F7F4}
.footer-top:not(:has(.inner))		{padding: 50px 0;}
.footer-top p			{font-size: 26px; color: #707070; font-weight: 300; line-height: 1.3em}
.footer-top p a			{color: #020202; text-decoration: none; transition: 0.2s ease-out}
.footer-top p a:hover	{color: #707070;}
.footer-top h3			{font-size: 180px; color: #020202; text-transform: uppercase; line-height: 0.8em; margin: 30px 0 5px;}

.footer-top .cols		{display: flex; justify-content: space-between; gap: 80px;}

.footer-bottom			{background-color: #ffffff; padding: 80px 0 60px}
.footer-bottom .cols	{display: flex; justify-content: space-between}
.footer-bottom .col		{flex: 1;}
.footer-bottom .col:last-child		{display: flex; justify-content: flex-end}
.footer-bottom .col:last-child ul	{column-count: 1;}
.footer-bottom .col:nth-child(2)	{text-align: center;}

.footer-bottom ul		{list-style: none; font-size: 18px; column-count: 2}
.footer-bottom ul li	{margin-bottom: 15px; font-weight: 300}
.footer-bottom ul li a	{text-decoration: none; color: #1D1816; transition: 0.2s ease-out}

.footer-bottom ul.social	{margin-left: 50px;}
.footer-bottom ul.social li	{margin-bottom: 10px;}

.footer-bottom ul li a:hover	{color: #707070; fill:#707070}

.footer-sign-off	{text-align: center; background-color: #1D1816; padding: 10px 0}
.footer-sign-off p	{font-size: 14px; color: #ffffff; margin: 0}

.footer-right-col	{width: 680px; max-width: 100%; display: none;}

.footer-right-col .form-text-box label					{color: #020202}
.footer-right-col .form-text-box:focus-within label 	{font-weight: 600; color: #020202;}

.footer-right-col .form-text-box input	{color: #020202}
.footer-right-col .form-text-box:after	{border-color:#020202}

.footer-right-col .form-intro				{text-align: left;}
.footer-right-col .form-container			{margin-top: 40px; margin-bottom: 0; width: 100%;}
.footer-right-col .form-row					{margin-bottom: 40px;}
.footer-right-col .form-container .button	{margin-top: 40px;}



.reverse-footer .footer-top {background-color: #020202; padding: 50px 0px; }

.reverse-footer .footer-right-col	{display: block;}



.reverse-footer .footer-right-col .form-text-box label,
.reverse-footer .footer-top h2,
.reverse-footer .footer-top h3,
.reverse-footer .footer-right-col .form-text-box input,
.reverse-footer .footer-top p a,
.reverse-footer .footer-top p {color: #F8F7F4; }


.reverse-footer .footer-right-col .form-text-box input {border-bottom: 2px solid #5b5b5b;}
.reverse-footer .button a {border: 1px solid #F8F7F4;}

/**************/
/*** BUTTON ***/
/**************/

.buttons,
.button		{display: flex; justify-content: center;}

.buttons		{margin:80px 0 40px 0}
.buttons .btn	{margin: 0 20px}

.btn		{border:0.2px solid #1D1816; border-radius: 30px; text-transform: uppercase; display: flex; align-items: baseline; text-decoration: none; padding: 20px 37px 15px; position: relative; overflow: hidden}
.btn span	{font-family: "marlide-display-variable", sans-serif; letter-spacing: 0; font-weight: 300; font-size: 47px; margin-left: 0px;}
.btn p		{margin: 0; letter-spacing: -1px; font-weight: 400; font-size: 45px; line-height: unset}

.btn,
.btn *					{transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);}
.btn-bg					{position: absolute; background-color: #342B28; top: 50%; left: 0; width: 100%; height: 0; padding-top: 100%; padding-top: calc(100% + 2.66em); border-radius: 100px; opacity: 0; -webkit-transform: translateY(-50%) scale(0); -ms-transform: translateY(-50%) scale(0); transform: translateY(-50%) scale(0);}
.btn-bg-2				{position: absolute; background-color: #000000; top: 50%; left: 0; width: 100%; height: 0; padding-top: 100%; padding-top: calc(100% + 2.66em); border-radius: 100px; opacity: 0; -webkit-transform: translateY(-50%) scale(0); -ms-transform: translateY(-50%) scale(0); transform: translateY(-50%) scale(0);}
.btn p					{color:#1D1816; margin: 0; padding: 0; position: relative; z-index: 10;}
.btn:hover				{}
.btn:hover p			{transform: scale(1.04); color: #EAE3D4}
.btn:hover .btn-bg		{transition: opacity 0.75s 0s cubic-bezier(0.19, 1, 0.22, 1), transform 0.4s 0.05s cubic-bezier(0.19,1,0.22,1); transform: translateY(-50%) scale(1.1); opacity: 1;}
.btn:hover .btn-bg-2	{transition: opacity 0.75s 0s cubic-bezier(0.19, 1, 0.22, 1), transform 0.8s 0.1s cubic-bezier(0.19,1,0.22,1); transform: translateY(-50%) scale(1.1); opacity: 1;}


.btn.btn-light					{border-color: #FFFFFF}
.btn.btn-light p				{color: #FFFFFF}
.btn.btn-light:hover p			{color: #000000}
.btn.btn-light.btn .btn-bg		{background-color: #EAE3D4;}
.btn.btn-light.btn .btn-bg-2	{background-color: #ffffff;}

.btn.loading                    {pointer-events:none;opacity:.6;user-drag:none;}

.btn:active,
.btn:focus                  {background-color:transparent;}


/**************/
/*** LOADER ***/
/**************/


.icon-heart                          {display: none;position: relative;transform: rotate(45deg) scale(0.5);width:50px;height:25px;}
.icon-heart div                      {width: 32px;height: 32px;background: #fff;margin-top: 5px;animation: icon-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);}
.icon-heart div:after,
.icon-heart div:before               {content: " ";position: absolute;display: block;width: 32px; height: 32px;background: #fff;}
.icon-heart div:before               {left: -24px;border-radius: 50% 0 0 50%;}
.icon-heart div:after                {top: -24px;border-radius: 50% 50% 0 0;}

@keyframes icon-heart {
  0% {
    transform: scale(0.95);
  }
  5% {
    transform: scale(1.1);
  }
  39% {
    transform: scale(0.85);
  }
  45% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(0.9);
  }
}




/* BLACK PAGE STYLE */
body.black-page											{background-color: #1D1816;color:#FFFFFF;}
body.black-page ul.tags li a,							
body.black-page .news-listing-item ul.tags li,
body.black-page .news-article ul.tags li				{border-color:#5d5d5d;}
body.black-page ul.tags li a.active:hover, body.black-page ul.tags li a.active		{background-color:#FFFFFF;color: #1D1816;}

/* ALT FOOTER */
body.alt-footer footer .footer-top				{background-color: #1D1816;}
body.alt-footer footer .footer-top h3,
body.alt-footer footer .footer-top p a			{color: #fff;}
body.alt-footer footer .footer-top p a:last-of-type			{color: #FF0045;}




/* MEDIA PPC STYLES */
.media-ppc .page-heading-sticky					{top: 235px !important;}
.media-ppc .banner-header-section-sticky		{padding-top: 850px;}
.media-ppc .standard-intro-text					{border-top: 0.2px solid #dddddd;}

.media-ppc-form         {font-size: 30px; font-weight: 300; list-style: none; line-height: 1.2em; position: relative; margin-top:-60px;padding-bottom: 30px; text-align: left; width: 100%;}
.media-ppc-form .form-container         {margin-top:35px;margin-bottom:25px;}

.media-ppc-form .form-text-box label					{color: #020202}
.media-ppc-form .form-text-box:focus-within label 	{font-weight: 600; color: #020202;}

.media-ppc-form .form-text-box input	{color: #020202}
.media-ppc-form .form-text-box:after	{border-color:#020202}

.media-ppc-form .btn		{border: 0.2px solid #dddddd !important;}