:root {
   
   --smooth: 0.75s cubic-bezier(0.75, 0, 0, 1);
   --red: #FF0045;
   
   --scale100px: 	clamp(100px, calc(3.05vw + 53.88px), 132px);
   --textIntro: 	clamp(22px, 0.6px + 2.21vw, 38px);
   --textBody:      clamp(18px, -7.94px + 1.72vw, 25px);
   --textSmall:     clamp(20px, 1.47px + 1.23vw, 25px);;
   --textSmaller:    clamp(14px, 2.88px + 0.74vw, 17px);
   --textBodyLarge:  clamp(34px, 0.67px + 2.21vw, 43px);
   
   --standardBorderRadius: clamp(10px, 0.12px + 0.67vw, 17px);
	
	--sansFont: "tt-commons-pro", sans-serif;
	--serifFont: "marlide-display-variable", sans-serif;
}


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

/* GLOBAL */logo-sign-off

html 	{}
body 	{line-height:1; font-family: var(--sansFont); background-color: #F8F7F4; color: #12110F; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

h1		{font-family: var(--serifFont); font-weight: 300; font-size: clamp(150px, 24.57px + 8.3vw, 237px); line-height: 80%;}
h2		{font-family: var(--serifFont); font-weight: 300; font-size: clamp(80px, -1.57px + 5.39vw, 102px);}
h3		{font-family: var(--serifFont); font-weight: 300;}
h4		{font-family: var(--serifFont); font-weight: 300;}
h5		{font-family: var(--serifFont); font-weight: 300;}
h6		{font-family: var(--serifFont); font-weight: 300;}

p		{font-size: var(--textBody); line-height: 150%; font-weight: 500; margin-bottom: .5em;}

.csit-intro-copy p {font-size: var(--textIntro); line-height: 120%; font-weight: 500; margin-bottom: .5em;}


sup		{top:-0.325em}

ul,
ol		{font-size: var(--textBody); line-height: 150%; font-weight: 500; margin-bottom: .5em;}

b,
strong {font-weight: bold;}

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  {/*max-width:2460px;*/ max-width:2020px; width:100%; margin:0 auto; padding: 0 50px}

.inner.inner-narrow  {width: 84.29vw; /*max-width: 2087px;*/ max-width: 1512px;}

.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; align-items: center; padding: 0px; width: 100%; max-width: 100%; height: 164px; margin: 0 auto; /*margin-top: clamp(50px, calc(3.34vw - 0.49px), 85px);*/ z-index: 99; position: fixed; left: 0; top: 0; transition:var(--smooth);}
header.hide-header			{transform: translateY(-100%); visibility: hidden; opacity: 0}

.logo						{position: relative; z-index: 2; width: clamp(140px, -0.94px + 9.31vw, 178px);}
.logo img            {width: 100%; height: auto}

.hamburger					         {position: absolute; right: clamp(60px, calc(1.50vw + 27.32px), 85px);   width: clamp(72px, calc(4.77vw - 0.16px), 122px); display: flex; flex-direction: column; justify-content: center; cursor: pointer; z-index: 2; transition: 0.2s ease-in-out;}
.hamburger span				      {width: 100%; height: 4px; margin: 4px 0; background-color: #000000; filter: none; display: block; transition: var(--smooth);}
.hamburger span:last-child	      {}
.hamburger.is-light span         {background-color: #F8F7F4;}
.hamburger.is-dark span          {background-color: #000000;}
.hamburger.open span			      {transform: rotate(45deg); background-color: #F8F7F4; margin: 0}
.hamburger.open span:last-child	{transform: rotate(-45deg); margin-top: -3px; background-color: #F8F7F4}

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

/* REGION SELECT */
.icon-list                        {display: flex; list-style: none; font-size: 0; gap: 5px;}
.icon-list li                     {border-radius: 10px; transition: var(--smooth); border: 1px solid transparent; background-color: rgba(255,255,255,0.5);}
.icon-list li a,
.icon-list li button              {width: 36px; height: 36px; padding: 5px; border-radius: 6px; overflow: hidden; transition: var(--smooth); display: block; background-color: transparent; text-align: center}
.icon-list li img                 {transition: var(--smooth); opacity: 0.5}

.icon-list li.active             {background-color: #ffffff; border: 1px solid #E6E6E6;}

.icon-list li.active img         {opacity: 1;}

.icon-list li:hover              {border: 1px solid #E6E6E6;}
.icon-list li:hover button img   {opacity: 1;}

.icon-list.region-select           {position: absolute; left: clamp(60px, calc(1.50vw + 27.32px), 85px);}

/* SOCIAL LIST */
.icon-list.social li a {display: inline-flex; justify-content: center; align-items: center; border-radius: 0}

/************/
/*** 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:var(--smooth); 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: 0; margin-top: 0;}
.nav-hover-top 				{position: absolute; letter-spacing: 0em; backface-visibility: hidden; transform: translateY(30%) rotateX(-90deg) scale(1);}
.nav-hover-top .nav-text 	{margin-bottom: 0; margin-top: 0; color: #FFFFFF; text-transform: uppercase;}

nav:before	{background-color: #12110F; width: 100%; position: absolute; left: 0; content: ''; z-index: 0; top: 0; height: 0; transition: var(--smooth);}

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%; align-items: center; text-align: center; padding-top: clamp(50px, calc(5.07vw + 40.07px), 170px);}
.home-hero .inner    {}

.home-hero h1,	      
.cheeky-roe-header h2      {font-size: clamp(64px, calc(7.98vw + 32.64px), 237px); text-align: center; display: block; width: 100%; line-height: 0.85em; text-transform: uppercase; color:#12110F !important }  

.home-hero h1 span,
.cheeky-roe-header h2 span {font-size: clamp(60px, calc(7.20vw + 31.70px), 194px); margin-top: clamp(6px, 2vw, 17px); font-family: "tt-commons-pro", sans-serif; font-weight: 700; display: block}

.home-hero .nav-text							{color:#12110F !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%;}
.home-video-section .box	 {transform-origin: top; opacity: 1; transform: scale(1); background-color: transparent}
.home-video-section video   {width: 100%;height: 100%; border-radius: 10px;}

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-top:clamp(45px, 7.4vw, 200px); padding-bottom:clamp(60px, 7.4vw, 200px); position: relative}
.home-intro-text .inner {}
.hit-text					{display: flex; /*gap:100px;*/ gap:clamp(50px, 3.35vw, 85px);}
.hit-text h2				{transform: translateY(-10px)}
.hit-left					{flex-shrink: 0; padding-right: 15px;}
.hit-right p:last-of-type  {margin-bottom: 0}

/** MEDIA HOVER **/
.media-hover-view,
.media-hover-video   {position: relative; cursor: none;}

.media-hover-video.autoplay {cursor: default; pointer-events: none;}
.home-video-section .media-hover-video.autoplay {pointer-events: auto; cursor: none;}

.media-hover-video.paused:after	{width: 140px; height: 140px; /*background-image: url(/_uploads/_assets/play-video-button-new.svg);*/ background-size: contain; background-position: center; background-repeat: no-repeat; content: ''; display: block; pointer-events: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; transition: 0.3s ease-in-out; opacity: 1;}
.media-hover-video.playing:after	{width: 140px; height: 140px; /*background-image: url(/_uploads/_assets/play-video-button-new.svg);*/ background-size: contain; background-position: center; background-repeat: no-repeat; content: ''; display: block; pointer-events: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; transition: 0.3s ease-in-out; opacity: 0;}

.hover-div-view,
.hover-div           {position: fixed; pointer-events: none; /* <-- ALWAYS */ background-color: var(--red); color: #ffffff; backdrop-filter: blur(15px); z-index: 9999; padding: 8px; border-radius: 2px; text-transform: uppercase; font-size: 12px; top: 0; left: 0; transform: translate(0, 0); will-change: transform;}

.hover-div:before    {width: 8px; height: 9px; background-image: url(/_uploads/_assets/icon-small-play.svg); background-size: cover; margin-right: 3px; content: ''; display: inline-block;}

.hover-div           {opacity: 0;}

.hover-div.active,
.media-hover-view.active     {opacity: 1;}

.hover-div.playing:before           {width: 7px; background-image: url(/_uploads/_assets/icon-small-pause.svg)}

.hover-div.hover-div-view:before    {width: 9px; height: 8px; background-image: url(/_uploads/_assets/icon-small-arrow.svg);}






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

/******************************/
/*** HOME INTRO CASE STUDIES ***/
/******************************/

.home-listing-card-section    {margin-bottom: var(--scale100px);} 
.home-listing-card-section a  {text-decoration: none}
.home-listing-card-inner	{margin: auto; display: block;}

.home-listing-card-image-container  {overflow: hidden;  border-radius: var(--standardBorderRadius); }
.home-listing-card-image            {width: 100%; aspect-ratio:1.95 / 1; background-size: cover; background-position: center; transition: var(--smooth);}
.home-listing-card-image:hover      {transform: scale(1.05);}

.home-listing-text         {display: flex; justify-content: space-between; align-items: flex-start; margin-top: clamp(25px, calc(1.72vw - 1.02px), 43px); margin-bottom: clamp(25px, calc(1.72vw - 1.02px), 43px);}
.home-listing-text p       {font-size: var(--textBodyLarge); margin-bottom: 0; line-height: 1.2em; color: #12110F}

ul.topic-tags              {display: flex; list-style: none; font-size: 18px; gap: 13px; font-weight: 500;}
ul.topic-tags li           {background-color: #ffffff; padding: 14px 13px; border-radius: 20px;}


/*******************/
/*** LAUNCH IDEA **/
/******************/
.launch-idea-section             {background-color: #12110F; padding: clamp(247px, 144.42px + 6.77vw, 318px) 0;}
.launch-idea-inner               {width: clamp(1297px, 720.52px + 38.12vw, 1696px); text-align: center; max-width: calc(100% - 100px); padding: 0; position: relative;}
.launch-idea-inner p             {color: #F8F7F4; font-size: var(--textBodyLarge); margin: clamp(30px, -9.02px + 2.58vw, 57px) 0;}
.launch-idea-inner h2            {font-size: clamp(150px, -0.19px + 9.92vw, 254px); color: #F8F7F4; line-height: 0.9em; display: inline-block;}
.launch-idea-inner h2 span       {font-size: clamp(128px, 1.05px + 8.4vw, 216px); color: #F8F7F4; font-family: "tt-commons-pro", sans-serif; font-weight: 700; display: block;}
.launch-idea-inner h2 span img   {width: clamp(72px, 2.75px + 4.58vw, 120px); height: auto; display: inline-block; margin: 0 0 -0.25vw -2.25vw;}
.launch-idea-inner .sketch-arrow {position: absolute; left: 0; bottom: 0; width: clamp(240px, 109.92px + 8.61vw, 330px);}
.launch-idea-inner .buttons      {gap: 24px; margin: 0;}



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

.news-views-section 		   {background-color: #12110F; margin-top: var(--scale100px); padding-top: clamp(180px, 2.54px + 10vw, 303px); padding-bottom: clamp(137px, 28.52px + 7.17vw, 212px);}
.news-views-section	h2		{font-size: clamp(140px, 0.05px + 9.26vw, 237px); color: #F8F7F4  ; text-transform: uppercase; display: block; text-align: center;}
.news-views-section .inner	{/*width: 1540px*/}

.news-views-section .cols	{display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(50px, -3.38px + 3.53vw, 87px); margin: clamp(108px, 1.24px + 7.06vw, 182px) auto;}
.news-views-section .col	{width: 100%;}

.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:var(--smooth); display: none}
.listing-card .listing-card-text p			{color: #ffffff; font-size: var(--textBodyLarge); line-height: 1.2em; color: #F8F7F4;}
.listing-card-image-container				{aspect-ratio: 437 / 270; overflow: hidden; position: relative; margin-bottom: 20px; border-radius: var(--standardBorderRadius);}
.listing-card-image							{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transition:var(--smooth);}

.news-item-image ul,
.listing-card-image-container ul          {position: absolute; left: 20px; top: 20px; z-index: 10}

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

.read-more  {text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; color: #F8F7F4; font-size: var(--textSmall);}

.listing-card:hover .read-more,
.news-listing-item:hover .read-more  {color: var(--red);}


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

.case-studies-listing                  {padding-bottom: var(--scale100px);}

.case-studies-listing .cols		      {display: flex; gap: 50px; flex-wrap: wrap}
.case-studies-listing.flipped .cols		{flex-direction:row-reverse;}
.case-studies-listing .col		         {}

.case-studies-listing .listing-card p		   {font-size: var(--textSmall); color: #12110F}
.case-studies-listing .listing-card p span	{}
.case-studies-listing .listing-card:after	   {}

.case-studies-listing .col.col-half		{width: 58.2%}
.case-studies-listing .col.col-third	{width: calc(41.8% - 50px);}
.case-studies-listing .listing-card-image-container	{aspect-ratio: 681 / 587; margin-bottom: 16px;}

.case-studies-listing .col.col-stacked									         {display: flex; flex-direction: column; justify-content: space-between; gap: 7px;}
.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		{aspect-ratio: 437 / 262;}

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

.page-heading							      {padding:1.5vw 0 var(--scale100px) 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		{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             {}

.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%;}

.case-study-one-media img,
.case-study-video-section video,
.case-study-image-section img	{width: 100%; height: 100%; border-radius: var(--standardBorderRadius)}

.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; overflow: hidden; border-radius: var(--standardBorderRadius)}

.case-study-intro-text			  {padding: clamp(140px, 24.58px + 7.63vw, 220px) 0; position: relative}
.case-study-intro-text .inner	  {}
.csit-text						     {display: flex; gap: clamp(50px, 3.35vw, 85px);}
.csit-text h2					     {}
.csit-left						     {width: 50%; flex-shrink: 0}
.csit-right p.intro             {font-size: var(--textBodyLarge); line-height: 125%; margin-bottom: 0.75em}

.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;}


.smaller-video .vimeo-container,
.case-study-video-section.smaller-video .vimeo-container {background-color: #000000}





.vimeo-container {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: var(--standardBorderRadius) !important;
}

.vimeo-container iframe {
    /*position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 177.77777778% !important;
    height: 100% !important;
    transform: translate(-50%, -50%) !important;*/
	
	position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: scale(1.1);
}
/*
@media (min-aspect-ratio: 16/9) {
    .vimeo-container iframe {
        width: 100% !important;
        height: 56.25vw !important;
    }
}*/











.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			{gap: clamp(50px, 3.35vw, 85px);}

.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-video-video .cols .col				{display:flex;justify-content:center;align-items:center; height:100%;}
.case-study-video-video .media-panel			{width:100%;height:100%;}

.case-study-carousel video,
.case-study-carousel iframe[src*="vimeo.com"] {border-radius: var(--standardBorderRadius); width: 100%; height: 100%;}

.case-study-carousel video {position: absolute; width: 100%; }


/******************/
/***** STATS *****/
/****************/

.case-study-stats-section					   {padding:17vw 0 5vw 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%;}

.case-study-stats-section h2		{font-size: clamp(150px, 75.88px + 4.9vw, 170px); margin-bottom: 0.15em; text-transform: uppercase; display: block; text-align: center;}
.case-study-stats-section p      {font-size: var(--textBodyLarge); line-height: 125%; margin: 0 auto; width: 67%;}

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

.blockquote-section							   {text-align: center; padding:17vw 0 18.5vw 0;}
.blockquote-section blockquote            { width: 83%; margin: auto}
.blockquote-section blockquote p			   {font-size: clamp(50px, -24.12px + 4.9vw, 70px); margin-bottom: 1em; line-height: 125%;}
.blockquote-section blockquote cite			{display: block; font-style: normal; font-family: "marlide-display-variable", sans-serif; font-weight: 300}
.blockquote-section blockquote cite p		{font-size: var(--textBodyLarge); font-weight: 300; display: block; font-style: normal; margin-bottom:0; line-height:125%;}
.blockquote-section blockquote cite span	{display: block; font-family: "tt-commons-pro", sans-serif; font-weight: 500; font-size: clamp(16px, -1.33px + 1.15vw, 28px); margin-top: 7px;}

/************************/
/***** NEXT PRoJECT *****/
/************************/

.next-project-section		         {position: relative; overflow: hidden; margin-bottom: 50px;}
.next-project-section .inner        {height: 23.2vw; max-width: unset}
.next-project-section .buttons		{margin: 0;}
.next-project-section .btn	         {position: relative; z-index: 2;}
.next-project-bg			            {position: absolute; left: 0; top: 0;  inset: 0; background-size: cover; background-position: center; transition: ease-in-out .35s;}

.next-project-bg-container          {display: flex; align-items: center; justify-content: center;position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: var(--standardBorderRadius);}
.next-project-bg-container: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);}

.media-panel			{aspect-ratio: 681 / 830; overflow: hidden; position: relative; border-radius: var(--standardBorderRadius);}
.media-panel img        {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: var(--standardBorderRadius);}
.media-panel video      {max-width: 100%;height: 100%;}

.social-media-panel				{aspect-ratio: 681 / 830; overflow: hidden; position: relative; border-radius: var(--standardBorderRadius); height: 100%; width: 100%; object-fit: cover;}
.social-media-panel				{aspect-ratio: 681 / 830; overflow: hidden; position: relative; border-radius: var(--standardBorderRadius); height: 100%; width: 100%; object-fit: cover;}
.social-media-panel img        	{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: var(--standardBorderRadius);}
.social-media-panel video      	{max-width: 100%;height: 100%;}





.banner-header-section											{position: relative; z-index: 3;}
.banner-header-section.banner-header-section-sticky   {padding-top: 2vw}
.banner-header-section .banner-image img.banner-mb		{display:none;}
.banner-image			{margin-top: -5.95vw;}
.banner-image img		{width:100%;}

.banner-header-section .inner {max-width: 100%}

.full-width-image			        {display: flex; align-items: flex-end; aspect-ratio: 1412 / 730; position: relative; max-width: 2020px; margin: auto;}
.full-width-image div		        {width:100%; background:transparent;}
.full-width-image img.image-dk		{position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; padding: 0;}
.full-width-image .inner            {height: 100%;}
.full-width-image .fwi              {position: relative; height: 100%; overflow: hidden; border-radius: var(--standardBorderRadius)}



.full-width-image {padding-left: 50px; padding-right: 50px; }

.full-width-image picture,
.full-width-image img {border-radius: var(--standardBorderRadius); width: 100%; max-width: 100%;}


.case-study-carousel										{width: 100%;}
.case-study-carousel .carousel .slick-list                  {display: block;}
.case-study-carousel .carousel .slick-track                 {/*height: 50vw; max-height: 960px;*/}
.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/next.svg), auto;}
.case-study-carousel .slick-arrow.slick-prev		     {left: 9px;}
.case-study-carousel .slick-arrow.slick-prev:hover	  {cursor:url(/_uploads/_assets/prev.svg), 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%;}

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

.wwd-panel                 {border-radius: var(--standardBorderRadius); background-color: #ffffff; box-shadow: 0px -20px 50px 0px #00000014; padding: 16px;}
.wwd-panel .cols           {display: flex; align-items: center; gap: 50px;}
.wwd-panel .wwd-image img  {border-radius: var(--standardBorderRadius);}
.wwd-panel .wwd-text       {padding-right: 60px;}
.wwd-panel .wwd-text h2    {margin-bottom: 1.35vw; line-height: 100%;}
.wwd-panel .btn            {display: inline-block; margin-top: 1.65vw;} 
.wwd-panel .col:first-child   {width: 47.65%; flex-shrink: 0}

.wwd-scroller-panels                            {}
.wwd-section                                    {padding: 1.6vw 0; position: relative; position: sticky; top: 6.5vw;}
.wwd-scroller-panels .wwd-section:nth-child(2)  {top: calc(6.5vw + 40px);}
.wwd-scroller-panels .wwd-section:nth-child(3)  {top: calc(6.5vw + 80px);}
.wwd-scroller-panels .wwd-section:nth-child(4)  {top: calc(6.5vw + 120px); margin-bottom: 6.65vw;}

.wwd-panel .btn:hover   {background-color: #12110F; border-color: #12110F}

/******************/
/*** CHEEKY ROE ***/
/******************/

.cheeky-rules-section   {position: relative; z-index: 20; padding: 0;}
.cheeky-roe-header      {padding: 15vw 0 13vw; background: linear-gradient(180deg, rgba(248, 247, 244, 0) 0%, #F8F7F4 36.14%);}

.cheeky-roe-content     {background: linear-gradient(180deg, #BFA3E9 16.5%, #F8F7F4 77.57%); padding: 1px 0 15.21vw}
.header-img-bleed       {margin-top: -8vw; margin-bottom: 6.614vw; display: block}

.roe-cols               {display: flex; gap: 7.341vw;}

.roe-card h3            {font-size: var(--textBodyLarge); font-family: "tt-commons-pro", sans-serif; font-weight: 500; line-height: 125%; margin-bottom: 1.323vw}
.roe-card p             {font-size: var(--textSmall); line-height: 150%;}
.roe-card img           {min-width: 95px; width: 6.283vw; margin-bottom: 1.5vw}

.roe-cards-container    {padding-bottom: 17.2vw}

/*****************/
/*** SERVICES ****/
/*****************/

.media-col-text-col-section         {padding: 9.92vw 0 17.2vw; border-top: 0.4px solid #000000}
.media-col-text-col-section .cols  {display: flex; justify-content: space-between; gap: clamp(50px, 3.35vw, 85px);}
.media-col-text-col-section .col:first-child {width: 50%; flex-shrink: 0}
.media-col-text-col-section p       {font-size: clamp(50px, 12.94px + 2.45vw, 60px); line-height: 125%;}
.col-image img                      {width: 100%; border-radius: var(--standardBorderRadius);}
.col-image video                   {width: 100%; border-radius: var(--standardBorderRadius);}

.services-accordion-section                  {padding-top: 17.2vw;}
.services-accordion-section .cols            {display: flex; justify-content: space-between; gap: 5vw;}
.services-accordion-section .col-accordion   {flex: 1 0 680px}

.services-accordion-section .accordion-item                 {border-bottom: 0.5px solid #BBBBBB;}
.services-accordion-section .accordion-item h3              {color: #12110F; text-transform: none; font-size: var(--textBodyLarge); padding: 2vw 50px 2vw 0; position: relative; line-height: 125%;}
.services-accordion-section .accordion-item h3 span         {min-width:23px; width: 1.52vw; min-height: 23px; height: 1.52vw; position: absolute; right: 0;}
.services-accordion-section .accordion-item h3 span:before  {width: 2px; height: 100%; background-color: #12110F; position: absolute; content: ''; left: 50%; transform: translateX(-1px);}
.services-accordion-section .accordion-item h3 span:after   {width: 100%; height: 2px; background-color: #12110F; position: absolute; content: ''; top: 50%; transform: translateY(-1px);}

.services-accordion-section .accordion-item.active h3 span:before {opacity: 0}

/*********************/
/*** STACKED CARDS ***/
/*********************/

.stacked-cards-section  {padding:18vw 0; justify-content: center; align-items: center; display: flex; flex-direction: column;}

.stack         {position: relative; width: 61.11vw; height: 34.656vw;}
.stack .card   {position: absolute; width: 100%; height: 100%; overflow: hidden; border-radius: var(--standardBorderRadius); display: flex; justify-content: center; align-items: center; font-size: 2rem; font-weight: bold; user-select: none; transition: transform 0.3s ease, opacity 0.3s ease;}

.stack picture,
.stack picture img         {pointer-events: none; width: 100%; height: 100%; position: absolute; object-fit: cover; object-position: center;}
.stack-dots                {display: flex; justify-content: center; padding-top: 40px; gap: 8px; background-color: transparent; z-index: 99; position: relative;}
.stack-dots button         {width: 13px; height: 13px; border-radius: 50%; border: none; background: #D9D9D9; padding: 0; cursor: pointer; transition: all 0.2s ease;}
.stack-dots button.active  {background: var(--red); transform: scale(1.1);}

/***************************/
/*** HEADING WITH BUTTON ***/
/***************************/

.heading-with-button       {padding-bottom: var(--scale100px)}
.heading-with-button .cols {display: flex; justify-content: space-between; align-items: center;}
.heading-with-button .col  {width: 50%}
.heading-with-button .btn  {display: inline-block;}
.heading-with-button .col:nth-child(2) {display: flex; justify-content: flex-end}

/*********************/
/*** OUR PARTNERS ***/
/*******************/

.partners-section   {padding: 11px 0}
.partner-marquee    {width: 100%; overflow: hidden; position: relative;}
.partner-track      {display: flex; align-items: center; gap: 21px;}
.partner-logos      {display: flex; align-items: center; gap: 21px; margin: 0; padding: 0; box-sizing: border-box;}
.partner-logo       {width: 277px; height: 160px; display: flex; justify-content: center; align-items: center; border: 0.2px solid #1D1816; border-radius: 30px; flex-shrink: 0;}
.partner-logo img   {/*max-width: 138px; max-height: 50px;*/}

.partners-section h3    {text-align: center; display: block; font-size: 40px; font-weight: 500; font-family: var(--sansSerif);}

.partner-track.is-animated {animation: marquee linear infinite;  animation-duration: var(--marquee-duration, 20s); /* fallback if JS doesn't set it */ animation-timing-function: linear;}

.partner-marquee.reverse                  {display: flex; justify-content: flex-end;}
.partner-track.reverse                    {}
.partner-track.reverse .partner-logos     {justify-content: flex-end;}
.partner-track.reverse.is-animated        {animation: marqueeReverse linear infinite;  animation-duration: var(--marquee-duration, 20s); /* fallback if JS doesn't set it */ animation-timing-function: linear;}

.partner-no-scroll                  {overflow: visible; margin-top: 55px}
.partner-no-scroll .partner-logo    {width: auto; flex: 1;}

.partners-section-2     {padding: 200px 0}

.partners-section .button {margin-top:  80px;}

/* Keyframes use the CSS variable set by JS for exact pixel translation */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--scroll-distance))); }
}

@keyframes marqueeReverse {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(1 * var(--scroll-distance))); }
}


.partner-marquee:hover .partner-track.is-animated {
  animation-play-state: paused;
}



/*************************/
/*** 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 ***/
/***************/

.meet-the-team		{padding: 150px 0; background-color: #12110F; color: #F8F7F4; overflow-x: hidden;}
.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;}

/***********************/
/***** ABOUT US US *****/
/***********************/
.team-member-us          {background-color: #12110F; color: #ffffff; padding: 10vw 0}
.team-member-us .inner   {max-width: 1023px; width: 100%;}
.team-member-us .cols    {display: flex; gap: 50px;}
.team-member-us-card     {background-color: #292827; border-radius: var(--standardBorderRadius); font-size: 0; padding: 20px;}
.team-member-us-card img {border-radius: var(--standardBorderRadius);}
.team-member-us-card .col:nth-child(1) {width: 295px; flex-shrink: 0}
.team-member-us-card .col:nth-child(2) {padding-top: 15px}

.team-member-us-card h3  {font-size: 16px; color: rgba(255,255,255,0.6); font-family: "tt-commons-pro", sans-serif; margin:0.5em 0 1.5em 0}
.team-member-us-card .button  {justify-content: flex-start; margin-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: #12110F; padding: var(--scale100px) 0 1px; color: #ffffff;}
.ftc-intro				      {text-align: center; margin-bottom: 120px;}
.for-the-curious h3		   {font-size: clamp(80px, 42.94px + 2.45vw, 90px); line-height: 0.9em; margin-bottom: 0.4em; position: relative;}
.for-the-curious h3 span   {display: inline-block; font-size: clamp(52px, 14.94px + 2.45vw, 62px); padding-right: 20px; position: absolute; left: -60px; top: 8px}
.ftc-text p				      {margin-bottom: 1em; color: #ffffff; width: 80%;}
.ftc-row				         {display: flex; margin-bottom: var(--scale100px);}
.ftc-row:last-child        {margin-bottom: 0}

.for-the-curious .inner {width: 50vw; transform: translateX(7vw);}

.for-the-curious h2 {font-family: var(--sansFont); font-size: clamp(80px, 42.94px + 2.45vw, 90px); line-height: 0.9em; margin-bottom: 0.4em;}


/*********************/
/*** THE TEAM 2026 ***/
/********************/

.the-team-section    {background-color: #12110F; padding: var(--scale100px) 0 0;}
.the-team-grid       {display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(50px, 6.72px + 2.86vw, 80px);}
.the-team-intro      {text-align: center; color: #ffffff}

.join-the-team h2,
.the-team-intro h2 {font-size: clamp(150px, 24.57px + 8.3vw, 237px); line-height: 80%; text-transform: uppercase;}





.team-member-text h3 {color: #ffffff; font-size: var(--textSmall); font-family: "tt-commons-pro", sans-serif; margin-bottom: 0.25vw;}
.team-member-text p  {color: rgba(255,255,255,0.6); font-size: var(--textBody); margin-bottom: 0;}

.team-member-image-container  {aspect-ratio: 316 / 395; position: relative; margin-bottom: 1vw; overflow: hidden; border-radius: var(--standardBorderRadius);}
.team-member-image            {position: absolute; inset: 0; z-index: 1}
.team-member-image-rollover   {opacity: 0; z-index: 2}

.the-team-grid        {padding-top:clamp(60px, 7.4vw, 200px); padding-bottom:clamp(60px, 7.4vw, 200px);}
.team-member:hover .team-member-image-rollover   {opacity: 1;}

/**************************/
/*** JOIN THE TEAM 2026 ***/
/**************************/

.join-the-team       {background-color: #12110F; color: #ffffff; padding: var(--scale100px) 0 ;}
.join-the-team h2    {margin-bottom: 3.9vw}

.join-the-team .mtt-intro  {max-width: 100%; width: 46.587vw;}

/**************************/
/*** FAQs 2026 ***/
/**************************/
.for-the-curious h2 {/*margin-bottom: var(--scale100px);*/}
.for-the-curious h2 {font-size: clamp(40px, 24.57px + 8.3vw, 74px); line-height: 100%; margin-bottom: 0.75em; text-transform: uppercase; text-transform: none;}



/*********************/
/*** 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	{padding: var(--scale100px) 0;}
.form-intro		{text-align: center;}

.form-container			{width: 100%; max-width: 640px; margin:3.307vw auto;}
.form-container .button	{margin-top: 35px;}
.form-container button	{background: none; min-width: 275px; text-align: center; justify-content: center}
.form-row				   {margin-bottom: 50px;}

.form-text-box			{position: relative; transition: 0.2s ease-out}

.form-text-box textarea,
.form-text-box input	      {font-size: 22px; height: 80px; width: 100%; color: #12110F; border: 1px solid #12110F; border-radius: 20px; background-color: transparent; padding: 0 32px}

.form-text-box label	      {font-size: 34px; font-weight: 500; color: #12110F; display: block; line-height: 125%; margin-bottom: 0.926vw}

.form-text-box textarea    {resize: none; height: 250px; padding: 18px 32px; line-height: 150%;}

.form-text-box:focus-within:after	{border-bottom:2px solid #12110F}
.form-text-box:focus-within label	{color: #12110F;}
.form-text-box:focus-within textarea,
.form-text-box:focus-within input   {border: 2px solid #12110F}

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;}

.container  {font-size: 16px; padding-top: 5px; margin-bottom: 0; line-height: 150%; display: flex; flex-direction: row-reverse; justify-content: flex-end; padding: 0; align-items: center; gap: 16px; color: #91908e}
.checkmark  {position: relative; flex-shrink: 0; border-radius: 10px; width: 24px; height: 24px; background-color: transparent; border: 1px solid #12110F}

.container input:checked ~ .checkmark {background-color: var(--red); border-color: var(--red);}

.container .checkmark:after   {width: 5px; height: 11px; left: 7px; top: 3px;}

.form-row-textarea   {margin-bottom: 1.587vw}
.form-row-checkbox   {margin-bottom: 1vw;}

.form-captcha  {margin-top: 45px;}

/************************/
/*** CONTACT LOCATION ***/
/************************/

.contact-location-section  {padding-bottom: 11.905vw; }
.contact-location    {background-color: #ffffff; display: flex; border-radius: var(--standardBorderRadius); padding: 2.51vw; padding-left: 8.069vw; margin-bottom: 1.587vw; justify-content: space-between; align-items: center}
.contact-location p  {margin: 0; font-size: var(--textSmall);}
.cl-left             {flex-shrink: 0}
.cl-right            {width: 37%}

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

ul.tags				          {display: flex; list-style: none; justify-content: center; margin-top: 1.5vw; margin-top: 4.6vw; margin-bottom: 0}
ul.tags li			          {margin: 0 7.5px}
ul.tags li a.active:hover,
ul.tags li a.active	       {background-color: #1D1816; color: #ffffff}

ul.tags li .btn      {font-size: 18px; border-radius: 20px; padding: 14px 13px; line-height: 27px}
ul.tags li .btn.active { background-color: var(--red); border: var(--red);}
ul.tags li .btn.active:hover { background-color: var(--red); border: var(--red);}

.news-listing .cols  {display: grid; grid-template-columns: repeat(3, 1fr); gap:clamp(40px, -46.7px + 5.73vw, 100px); grid-row-gap: 6vw}

.news-item-image        {position: relative; overflow: hidden; border-radius: var(--standardBorderRadius); aspect-ratio: 362 / 452;}
.news-item-image img    {position: absolute; inset:0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: var(--smooth);}

.news-listing-item      {position: relative}
.news-listing-item a    {z-index: 10}
.news-listing-item h2   {font-size: var(--textBodyLarge); line-height: 1.2em; font-family: "tt-commons-pro", sans-serif; font-weight: 500; margin: 20px 0}
.news-listing-item h2 a {text-decoration: none}
.news-listing-item .read-more {color: #12110F}

.news-listing-item:hover .news-item-image img   {transform: scale(1.05);}

.featured-news-item                       {margin-bottom: var(--scale100px)}
.featured-news-item .news-item-image      {aspect-ratio: 1174 / 597;}
.featured-news-item .news-item-image img  {left: 0; top: 0}
.featured-news-item .read-more            {display: none}

.buttons.news-button   {padding: var(--scale100px) 0; margin: 0}

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

.news-header .news-header-image                 {position: relative; margin-bottom: var(--scale100px)}
.news-header .news-header-image img				   {display:block; margin:auto; border-radius: var(--standardBorderRadius);}
.news-header .news-header-image ul.topic-tags   {right: 20px; bottom: 20px; position: absolute; margin: 0}

.news-article ul.tags	{margin: 60px 0;}
.news-inner	h2			{color: #013D3E; margin-bottom: 0.75em}
.news-inner h3       {font-weight: 500; font-size: 34px; margin-bottom: 1em; line-height: 125%; font-family: "tt-commons-pro", sans-serif; margin-top: 1.5em}
.news-inner	h2 span  {font-weight: 300 !important}
.news-inner p			{margin-bottom: 1.3em}
.news-inner				{width: 44.974vw; max-width: 100%; margin: auto}

.news-inner ol,
.news-inner ul       {font-size: 18px; line-height: 1.7em; margin: 1em; margin-left: 2.25em; font-size: var(--textBody);}
.news-inner ol li,
.news-inner ul li    {margin-bottom: 10px;}

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

.news-article .buttons  {margin: var(--scale100px) 0; gap: 10px;}

/*********************/
/*** TEXT PAGE ***/
/*******************/
.text-page                       {padding-bottom: var(--scale100px)}
.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						{max-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: var(--smooth);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: #12110F; position: relative; z-index: 2; margin-bottom: -7vw; /*padding-bottom: clamp(97px, 1.63px + 6.3vw, 163px);*/}
footer p       {font-size: var(--textSmaller); margin-bottom: 0}
footer ul      {font-size: var(--textSmaller); margin-bottom: 0}
footer .inner	{}

.footer-container {border-radius: var(--standardBorderRadius); padding: clamp(40px, 2.94px + 2.45vw, 50px) clamp(70px, -4.12px + 4.9vw, 90px); background-color: #ffffff; overflow: hidden;}

.footer-top		   {display: flex; justify-content: space-between; align-items: center; border-bottom: 0.5px solid rgba(0,0,0,0.2); padding-bottom: clamp(40px, 2.94px + 2.45vw, 50px);}
.footer-top a     {width: clamp(122px, -7.56px + 8.58vw, 212px); display: block}
.footer-top p     {font-size: clamp(16px, 1.18px + 0.98vw, 20px); margin-bottom: 0}

.footer-middle                {padding-top: clamp(40px, 2.94px + 2.45vw, 50px); padding-bottom: clamp(40px, 2.94px + 2.45vw, 50px);}
.footer-middle h4             {font-family: "tt-commons-pro", sans-serif; font-size: clamp(16px, 1.18px + 0.98vw, 20px); font-weight: 700; margin-bottom: 20px}
.footer-middle ul             {list-style: none;}

.footer-middle li,
.footer-middle li a,
.footer-middle p,
.footer-sign-off li a         {color: rgba(18, 17, 15, 0.6);}

.footer-middle li a           {text-decoration: none;}

.footer-sign-off li a:hover,
.footer-middle li a:hover,
.footer-middle p a:hover      {color: rgba(18, 17, 15, 1);}

.footer-middle .cols          {display: flex; justify-content: space-between;}
.footer-middle .col           {/*min-width: 220px;*/ min-width: 14.5505vw;}
.footer-middle .footer-left   {display: flex;}
.footer-middle .footer-right  {display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; gap: 25px;}

.footer-middle ul.icon-list   {gap: 8px;}

.footer-sign-off     {display: flex; justify-content: space-between; border-top: 0.5px solid rgba(0,0,0,0.2); padding-top: clamp(40px, 2.94px + 2.45vw, 50px);}
.footer-sign-off p   {color: rgba(18, 17, 15, 0.6);}
.footer-sign-off ul  {list-style: none; display: flex; gap: 24px;}

/*
.blurred-footer   {backdrop-filter: blur(15px); position: fixed; z-index: 100; left: 0; bottom: 0; pointer-events: none; width: 100%; height: 150px;
                  mask-image: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);}
*/
/*
.blurred-footer { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(6.5px); position: fixed; z-index: 100; left: 0; bottom: 0; pointer-events: none; width: 100%; height: clamp(97px, 1.63px + 6.3vw, 163px); background-color: rgba(255, 255, 255, 0.01); -webkit-mask-image: linear-gradient(to bottom, transparent, black 20px); mask-image: linear-gradient(to bottom, transparent, black 30px);}
*/
  
.blurred-footer   {position: fixed; left: 0; bottom: 0; overflow: hidden; width: 100%; height: 150px; z-index: 100; pointer-events: none;}

.blur-layer       {position: absolute; inset: 0; pointer-events: none; transition: var(--smooth);}

.blur1            {backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); mask-image: linear-gradient(to bottom, transparent 0%, black 20%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%);}
.blur2            {backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); mask-image: linear-gradient(to bottom, transparent 20%, black 40%); -webkit-mask-image: linear-gradient(to bottom, transparent 20%, black 40%);}
.blur3            {backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); mask-image: linear-gradient(to bottom, transparent 40%, black 60%); -webkit-mask-image: linear-gradient(to bottom, transparent 40%, black 60%);}
.blur4            {backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); mask-image: linear-gradient(to bottom, transparent 60%, black 80%); -webkit-mask-image: linear-gradient(to bottom, transparent 60%, black 80%);}
.blur5            {backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); mask-image: linear-gradient(to bottom, transparent 80%, black 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 80%, black 100%);}

/*********************/
/*** LOGO SIGN OFF ***/
/*********************/

.logo-sign-off          {background-color: #12110F; position: relative; font-size: 0}
.logo-sign-off:before   {background: linear-gradient(180deg, #12110F 0%, rgba(18, 17, 15, 0) 100%); position: absolute; left: 0; top: 0; content: ''; width: 100%; height: calc(100% - 40px);}

.logo-sign-off .inner   {width: 100%; padding: 0}

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

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

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

.btn        {font-size: clamp(28px, 2.06px + 1.72vw, 35px); border-radius: var(--textSmall); text-decoration: none; border:1px solid #12110F; padding: 0.72em; display: block; transition:0.15s ease-in-out;}

.btn.btn-red   {background-color: var(--red); border-color: var(--red); color: #ffffff;}

.btn.btn-light {color: #ffffff; border-color: #ffffff;}
.btn.btn-light:hover {border-color: var(--red);}

.btn:hover  {border-color: var(--red); background-color: var(--red); color: #ffffff;}
.btn:active,
.btn:focus  {background-color: #FF004599;}


/*
.btn		{border:0.2px solid #12110F; 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:#12110F; 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;}

.btn.btn-tinymce            {display: inline-block; padding-left: 0; padding-right: 0}

.btn.btn-tinymce span,
.btn.btn-tinymce span strong  {position: relative; z-index: 5}


.btn.btn-tinymce span.btn-text   {padding: 0 40px; font-size: 47px;}

.btn.btn-tinymce span.btn-text strong  {font-family: "tt-commons-pro", sans-serif; font-size: 45px; letter-spacing: -1px}

.btn.btn-tinymce span.btn-bg,
.btn.btn-tinymce span.btn-bg-2   {position: absolute; z-index: 1;}

.btn.btn-tinymce:hover,
.btn.btn-tinymce:hover span,
.btn.btn-tinymce:hover span strong {color: #EAE3D4}
*/


/**************/
/*** 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: #12110F;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: #12110F;}

/* ALT FOOTER */
body.alt-footer footer .footer-top				{}
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;}