/* Minimal Block Grid frontend CSS */
.umb-block-grid__layout-container {
	display: grid;
	grid-template-columns: repeat(var(--umb-block-grid--grid-columns), minmax(0, 1fr));
}

.umb-block-grid__layout-item {
	grid-column: span var(--umb-block-grid--item-column-span);
	grid-row: span var(--umb-block-grid--item-row-span);
}

.umb-block-grid__area-container {
	display: grid;
	/*grid-template-columns: repeat(var(--umb-block-grid--area-grid-columns), minmax(0, 1fr));*/
	grid-template-columns: repeat(6, minmax(0, 1fr));
}


.umb-block-grid__area {
	grid-column: span var(--umb-block-grid--area-column-span);
	grid-row: span var(--umb-block-grid--area-row-span);
}

.cb-media {
	padding: 0;
	margin: 0;
}


.cb-umb--sidebyside-wrap {
}

.hero-wrap {
	box-shadow: 0 3px 6px -3px var(--darK-grey);
}

.cb-umb--sidebyside-wrap .umb-block-grid__area-container {
	margin: 0 clamp(12px, 3.125%, 60px);
	gap: 12px;
	overflow: hidden;
}

.cb-umb--sidebyside-wrap .umb-block-grid__layout-container {
	height: 100%
}

.umb-block-grid__area:has(.cb-umb--sidebyside-col) {
	box-sizing: border-box;
	display: flex;
	justify-content: flex-start;
	overflow-y: auto;
	overflow: hidden;
	max-height: 500px;
	border-radius: var(--border-radius);
	flex-direction: column;
	box-shadow: 0px 6px 6px -3px #0000005c;
	margin-bottom: 12px;
}

.cb-umb--sidebyside-col {
}

.cb-umb--sidebyside-left {
	height: 100%;
}

.cb-umb--sidebyside-right {
	height: 100%;
}




.cb-umb--sidebyside-col.cb-umb--col-text {
	padding: 24px;
	max-height: 500px;
	overflow-x: hidden;
	overflow-y: auto;
	line-height: clamp(20px, 2vw, 32px);
	font-size: clamp(12px, 2vw, 16px);
}



.cb-umb--sidebyside-col.cb-umb--col-media {
	border: .25px solid var(--light-grey);
	width: 100%;
	padding: 0;
	margin: 0;
	max-height: 500px;
}

.cb-fadsfadsfumb--sidebyside-col.cb-umb--col-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.cb-umb--sidebyside-col.cb-umb--col-media img,
.cb-umb--sidebyside-col.cb-umb--col-media video {
	width: 101%;
	height: 101%;
	object-fit: cover;
	object-position: center;
	display: block;
}



.content-margined {
	margin: 2rem 4rem;
}

.text-right {
	text-align: right;
}

.perspective-balance-divider {
	text-align: center;
	margin: 32px 0;
}

	.perspective-balance-divider img {
		width: clamp(100px,50%,500px);
		opacity: .75;
		filter: drop-shadow(2px 4px 1px #00000050) sepia(1) contrast(0.8);
	}



.bureau-cta--perspectives {
	background: radial-gradient(circle at 0% 5%, var(--bureau-purple) 0%,var(--deep-blue) 80%, var(--black) 100%);
	color: var(--light-grey);
	padding: 4rem 5%;
}

.perspectives-note {
	font-family: 'Lora';
	margin: 2rem 4%;
	line-height: 1.5;
	background-color: hsl(324deg 5.38% 18.24%);
	color: var(--cream);
	padding: 1rem;
	box-shadow: 5px 5px 5px 2px rgb(0 0 0 / 80%);
}


@media (min-width: 768px) {

	.perspectives-note {
		margin: 4rem 20%;
		line-height: 2.5vw;
		transform: rotate( 358deg);
		padding: 2rem;
		padding-bottom: 4rem;
		background-image: url(/media/0m4bac5j/team-paul.png);
		background-repeat: no-repeat;
		background-position-y: 100%;
		background-position-x: right;
		background-size: 135px;
	}
}



.portfolio-page {
	background: var(--black);
	color: var(--cream);
}

.portfolio-body {
	min-height: 100vh;
	position: relative;
	/* background-image: url(/assets/images/theAgencySilk.png); */
	background-size: contain;
	background-repeat: no-repeat;
}

perspectives-note .portfolio-body::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url(/assets/images/theAgencySilk.png);
	background-size: cover;
	z-index: -1; /* Place it behind the content */
	/* Horizontal Flip */
	transform: scaleX(-1) rotate( 180deg);
	/* filter: blur(22px); */
	opacity: 0.3;
}


.portfolio-page-title {
	width: 80%;
	margin: 4rem auto;
}

	.portfolio-page-title h1 {
		line-height: 1.1;
		font-size: clamp(36px, 5vw, 100px);
	}



/** to be reviewed*/









/* =========================
   PORTFOLIO SECTION ONLY
   ========================= */

.portfolio-section {
	--portfolio-max-width: 1180px;
	--portfolio-gap: 26px;
	--portfolio-card-radius: 18px;
	--portfolio-border: rgba(255,255,255,0.10);
	--portfolio-surface: rgba(255,255,255,0.04);
	--portfolio-surface-hover: rgba(255,255,255,0.055);
	--portfolio-title-color: rgba(255,255,255,0.90);
	--portfolio-tagline-color: rgba(255,255,255,0.95);
	max-width: var(--portfolio-max-width);
	margin: 0 auto;
	padding: 0 20px 70px;
}

.portfolio-list {
	display: grid;
	gap: 30px;
}


.portfolio-media div {
	display: none
}
/* The block is the grid (2 columns at >=768) */
.portfolio-item {
	border: 1px solid var(--portfolio-border);
	background: var(--portfolio-surface);
	border-radius: var(--portfolio-card-radius);
	padding: 24px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr; /* mobile */
	gap: var(--portfolio-gap);
	transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

	.portfolio-item:hover {
		border-color: rgba(255,255,255,0.18);
		background: var(--portfolio-surface-hover);
		transform: translateY(-2px);
	}

/* Media is a single block. Nothing below it. */
.portfolio-media {
	border-radius: calc(var(--portfolio-card-radius) - 6px);
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(255,255,255,0.03);
	display: block;
	aspect-ratio: 16 / 10; /* mobile */
	text-decoration: none;
	position: relative;
}

	.portfolio-media > *,
	.portfolio-media-img,
	.portfolio-media video,
	.portfolio-media iframe {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;
		border: 0;
	}

/* Text is one column with CTA at bottom */
.portfolio-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.portfolio-title {
	margin: 0 0 10px;
	font-family: var(--font-sans);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.15;
	font-size: 20px;
	color: var(--portfolio-title-color);
}

/* Title smaller than tagline */
.portfolio-tagline {
	margin: 0;
	font-family: Lora, serif;
	font-weight: 500;
	line-height: 1.06;
	font-size: clamp(28px, 4vw, 44px);
	color: var(--portfolio-tagline-color);
	padding-bottom: 24px;
}

/* CTA stays with text, anchored to bottom */
.portfolio-text > a.button1 {
	margin-top: auto;
	align-self: flex-start;
}

/* Single breakpoint */
@media (min-width: 768px) {


	.umb-block-grid__area-container {
		/*grid-template-columns: repeat(var(--umb-block-grid--area-grid-columns), minmax(0, 1fr));*/
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}



	.portfolio-item {
		grid-template-columns: 1.15fr 1fr;
		/*align-items: stretch;*/
		gap: 56px;
		padding: 30px;
	}

	.portfolio-media {
		aspect-ratio: 16 / 9;
	}

	/* Alternate rows: swap media/text columns */
	.portfolio-item:nth-child(even) .portfolio-media {
		order: 2;
	}

	.portfolio-item:nth-child(even) .portfolio-text {
		order: 1;
	}

	.portfolio-media {
		aspect-ratio: 1 / 1;
	}
}

















/** end to be reviewed*/


.play-caption-wrap {
}


.play-caption {
	position: absolute;
	bottom: 12px;
	left: 12px;
	z-index: 20;
	font-size: 12px;
	text-transform: uppercase;
	pointer-events: none;
	color: var(--darK-grey);
}


.case-study-page {
	position: relative;
	background: var(--cream);
}

	.case-study-page > * {
		position: relative;
		z-index: 1;
	}
/*.case-study-page * {
		position: relative;
		z-index: 1;
	}*/

.case-study-page-bg {
	position: fixed;
	z-index: 0;
	opacity: .13;
	min-height: 100vh;
	min-width: 100vw;
	overflow: hidden;
	max-width: 100vw;
}

	.case-study-page-bg img {
		aspect-ratio: 5000/3475;
		height: 100vh;
		transform: rotate(-62deg);
		max-height: unset;
		width: auto;
		max-width: unset;
	}


.case-study-header {
	background: var(--black);
	/* height: 100vh; */
	/* max-height: 70vh; */
	width: 100%;
	color: var(--white);
	display: grid;
	overflow: hidden;
	position: relative;
	box-shadow: 0 3px 6px -3px var(--darK-grey);
	container-type: inline-size;
	/*padding-bottom: 74px;*/
}

@media print {
	.case-study-header {
		height: 100vh;
	}
}

	.case-study-header > div {
		/* flex: 0 0 100%; */
		min-width: 0;
		box-sizing: border-box;
		display: grid;
		flex-direction: column;
		/* justify-content: flex-start; */
		min-height: 100%;
		text-shadow: 1px 1px 0px rgb(0 0 0 / 50%);
		overflow: hidden;
		/* grid-area: 1 / 1; */
		/* overflow-x: hidden; */
	}




.case-study-feature-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.case-study-feature-media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

video:has(source[src*="micon"]) {
	object-fit: contain;
}

.portfolio-media:has(source[src*="micon"]) {
	background: #000;
}

.case-study-left {
}

	.case-study-left.case-study-feature-media {
		height: 100%;
		overflow: hidden;
		display: grid;
		/*filter: brightness(0.50);*/
		position: relative;
	}

.case-study-header.suppress-right .case-study-left.case-study-feature-media {
	filter: brightness(1);
}

.case-study-header.suppress-right .case-study-right {
	display: none;
}

.case-study-right {
	padding: 2rem;
	position: relative;
	top: 0;
	left: 0;
	box-shadow: -5px 0px 24px 2px rgb(0 0 0 / 50%);
	pointer-events:none;
	/* background: green; */
}

.case-study-cta{
	pointer-events:all;
}

.case-study-right .case-study-right-bg {
	display: none;
	background-color: var(--black);
	min-width: 100%;
	min-height: 100%;
	position: absolute;
}


	.case-study-right::after {
		display: none;
		content: "";
		position: absolute;
		inset: 0;
		background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 110%, rgba(0, 0, 0, 1) 100%);
		z-index: 10;
	}



.case-study-right-content {
	z-index: 20;
	bottom: 0;
	/* max-height: 100%; */
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}



.case-study-logo {
	position: absolute;
	bottom: 24px;
	right: 24px;
	opacity: .5;
}

	.case-study-logo img {
		filter: sepia(1) saturate(6) hue-rotate(330deg) brightness(1.2) contrast(1.25) drop-shadow(2px 4px 6px black);
		max-height: 32px;
	}

.case-study-title h1 {
	font-family: var(--font-sans);
	font-size: 2rem;
	font-weight: 600;
	margin-bottom: 1rem;
}

.case-study-tag {
	font-family: Lora, serif;
	font-size: clamp(24px, 4vw, 48px);
	line-height: 1.08;
	margin-bottom: 1.1rem;
}


.case-study-teaser {
	line-height: 1.9rem;
	font-size: clamp(14px, 3vw, 16px);
	margin-bottom: 50px;
}

.case-study-body {
}

.case-study-intro,
.case-study-text-full-width {
	width: 80%;
	margin: 4rem auto;
	line-height: clamp(20px, 2vw, 32px);
	font-size: clamp(12px, 2vw, 16px);
}

.case-study-intro {
}


.case-study-primary {
	text-align: center;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.case-study-primary-backdrop {
	background: var(--black);
	position: absolute;
	width: 100%;
	height: 75%;
}

.case-study-primary-media {
	width: 80%;
	z-index: 10;
	margin-top: 64px;
	border-radius: var(--border-radius);
	box-shadow: 0px 6px 24px 6px #0000005c;
	overflow: hidden;
}

.case-study-impact {
	font-family: Lora, serif;
	font-weight: 700;
	font-size: clamp(16px, 3vw, 64px);
	text-align: center;
	margin: 4rem 20%;
	font-style: italic;
	line-height: clamp(18px, 3.1vw, 60px);
	color: var(--darK-grey);
}


.case-study-side-by-side {
	margin: 64px 0;
}

.case-study-text-full-width {
}

.case-study-banner-media {
	width: 93.3385vw;
	max-height: calc(93.3385vw * .3134);
	overflow: hidden;
	margin: auto;
	border-radius: var(--border-radius);
	border: 1px solid #ddd;
	box-shadow: 0px 6px 6px -3px #0000005c;
}


.case-study-text-full-width {
}

..case-study-manual-gallery {
}

#rippleFrame,
iframe.ripple-iframe {
	height: 101%;
	width: 100%;
	position: relative;
	z-index: 1;
	border: 0;
}

#rippleFrame,
.ripple-iframe {
	opacity: 1;
	pointer-events: auto;
	transition: all 1s ease-out;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: fixed
}


@container (min-width: 768px) {

	.case-study-header {
		height: 70vh;
		/* max-height: 50vh; */
		/* display: flex; */
		flex-direction: row;
		padding-bottom: 0;
	}

		.case-study-header > div {
			/* flex: 0 0 50%; */
			/* position: relative; */
			justify-content: flex-end;
			/* display: flex; */
			grid-area: none;
			flex-direction: column;
		}

	.case-study-teaser {
		margin-bottom: 32px;
		/*max-height: calc(100vw / 5.5);*/
		overflow: auto;
		text-overflow: ellipsis;
	}


	.case-study-header.suppress-right .case-study-right {
		display: flex;
	}


	.case-study-left {
	}

		.case-study-left.case-study-feature-media {
			filter: brightness(.75);
			display: flex;
			flex: 0 0 50%;
		}

	.case-study-right {
		padding: 2rem;
	}

		.case-study-right .case-study-right-bg {
			display: none;
		}


		.case-study-right::after {
			display: block;
		}
}









*:has(> .parent-white-bg) {
	background: #fff;
}
/***************************************/
.case-study-gallery {
	background: #000;
	background-image: linear-gradient(0deg, #000 0px, #222 50%, #000 100%);
	padding: 30px;
	color: #aaa;
}

.case-study-gallery-thumbs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.case-study-gallery-thumb {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: .25px solid rgba(255,255,255,0.10);
	border-radius: 18px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	transition: all ease-in-out .3s;
	cursor: pointer;
}

	.case-study-gallery-thumb:hover, .case-study-gallery-thumb:focus, .case-study-gallery-thumb:active {
		border-color: rgba(255,255,255,0.18);
		background: var(--portfolio-surface-hover);
		transform: translateY(-2px);
	}

	.case-study-gallery-thumb img {
		border-radius: 18px;
	}
/*.case-study-gallery-intro {
	padding-bottom: 30px;
}

.case-study-gallery-outro {
	padding-top: 30px;
}*/

@media (min-width: 768px) {
	.case-study-gallery {
		padding: 60px;
	}

	.case-study-gallery-thumbs {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1024px) {
	.case-study-gallery-thumbs {
		grid-template-columns: 1fr 1fr 1fr;
	}
}



@media (min-width: 1280px) {
	.case-study-header {
		height: 70vh;
		max-height: 70vh;
		display: flex;
		flex-direction: row;
		padding-bottom: 0;
	}

		.case-study-header > div {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
		}

	.case-study-right .case-study-right-bg {
		display: block;
	}
}


/***************************************/
:root {
	--swiper-theme-color: #fff;
}

#modalCaseStudyGallery {
	background-image: radial-gradient(circle, #333 0%, #111 50%, #000 100%);
}

	#modalCaseStudyGallery .modal-content {
		padding-top: 30px;
	}

.mod-case-study-gallery {
	height: calc(100vh - 60px);
	width: 100%;
	color: #eee;
}

.mod-case-study-gallery-slide {
	position: relative;
	/*overflow: hidden;*/
	height: calc(100vh - 60px);
}

.mod-case-study-gallery-img img {
}

.mod-case-study-gallery-text {
	position: absolute;
	bottom: 0px;
	margin: 0 15px;
	padding: 30px;
	background: rgba(0,0,0,.8);
}