.page-root {
	z-index: 1;
	position: relative;
	min-height: 100vh;
}

.page-root-bg {
}



.search-container {
	position: fixed;
	/* inset: 0; */
	width: 100vw;
	height: 100dvh;
	/* max-height: 100dvh; */
	/* min-height: 100dvh; */
	height: 0;
	overflow: hidden;
	background: #000;
	top: 0;
	z-index: 100;
	box-sizing: border-box;
	display: none;
	width: calc(clamp(260px, 34vw, 520px) + 36px)
}

	.search-container * {
		/* box-sizing: content-box; */
	}

.search-panel-wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
	/* min-height: 100%; */
	background: var(--darK-grey);
}

.search-panel {
	/* display:inline-block; */
	/* border: 3px solid yellow; */
	/* overflow: hidden; */
}

	.search-panel.search-left {
		background: var(--black);
		/* box-shadow: 6px 6px 5px 1px #00000050; */
		color: var(--white);
	}

	.search-panel.search-left {
		/* background: var(--black); */
		box-shadow: 6px 6px 5px 1px #00000050;
		color: var(--white);
		background: rgb(9 9 58 / 50%);
		background-image: linear-gradient(180deg, #000, rgb(9 9 58 / 50%));
		z-index: 100;
		/* background: red; */
	}

	.search-panel.search-right {
		background: var(--darK-grey);
		color: var(--cream);
		background: rgb(9 9 58 / 50%);
		background-image: linear-gradient( 360deg, #000 -50%, rgb(9 9 58 / 100%));
		z-index: 99;
		position: relative;
	}

.search-panel-wrap[data-state="fresh"] .search-panel.search-left {
	max-width: 100vw;
	flex: 0 0 100vw;
}

.search-panel-wrap[data-state="fresh"] .search-panel.search-right {
	display: none;
}


body:has([data-state="fresh"]) .ask-pill {
	border-color: var(--medium-grey);
	width: 90%;
}

body:has([data-state="fresh"]) .ask-input {
	/* color: var(--darK-grey); */
}

.think-suggested-link {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	color: var(--cream);
	/* border: 1px solid var(--cream); */
	margin: 12px 0;
	padding: 6px;
	border-radius: 6px;
	/* background: rgb(129 9 127 / 50%); */
}

	.think-suggested-link span {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}


.search-panel-inner {
	padding: 60px 24px 0 24px;
	/* background: #fff; */
	min-height: 0;
	/* background-image: linear-gradient(180deg, #000, rgb(9 9 58 / 50%)); */
}

.search-right .search-panel-inner {
	/* margin-right: 40px; */
	position: relative;
}


.subtle {
	opacity: 0.75;
	margin: 0 0 18px;
}

.row {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 14px;
}

#think-status {
	margin-top: 10px;
	font-weight: 600;
	padding-bottom: 64px;
	margin-top: 64px;
	letter-spacing: 5px;
	color: var(--agency-purple);
	text-transform: uppercase;
	text-align: left;
	display: none;
	/* border-bottom: 1px solid var(--light-grey); */
}

.panel {
	/* border: 1px solid #81097f66; */
	border-radius: 7px;
	padding: 24px;
	margin-top: 14px;
	background: var(--cream);
	font-size: 14px;
	color: var(--darK-grey);
}

.answerText {
	white-space: pre-wrap;
	line-height: 1.5;
}

	.answerText a {
		color: var(--agency-purple);
		text-decoration: underline;
		font-weight: 600;
	}

#confidence {
	display: none;
}

.result {
	padding: 10px 0;
	border-top: 1px solid #eee;
}

	.result:first-child {
		border-top: none;
		padding-top: 0;
	}

.titleLine {
	display: flex;
	gap: 10px;
	align-items: baseline;
}

	.titleLine a {
		font-weight: 700;
		text-decoration: none;
	}

.meta {
	font-size: 12px;
	opacity: 0.75;
}

.synopsis {
	margin-top: 6px;
	opacity: 0.9;
}

.kicker {
	font-weight: 800;
	margin: 0 0 10px;
}

.topLinks {
	margin-top: 14px;
	display: flex;
	gap: 12px;
	font-size: 14px;
}

	.topLinks a {
		opacity: 0.85;
	}


.navbar-retro,
.navbar-main,
.navbar-main-illuminate {
	/* display:none; */
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0px;
	width: calc(100% - 31px);
	text-align: center;
	width: 100%;
	transition: opacity 1000ms ease;
}

.navbar-retro-wrap {
	/* background: red; */
	padding: 32px;
}

.retro-btns {
}

.retro-btn-wrap {
	padding: 3px;
	background: silver;
	box-shadow: inset 3px 3px 1px #ffffff, 1px 1px 0px 2px grey;
	display: inline-block;
	margin-right: 12px;
	border-radius: 1px;
}

.retro-btn {
	padding: 3px;
	font-family: "Segoe UI", Tahoma, system-ui, Arial, sans-serif;
	text-transform: uppercase;
	color: #000;
	line-height: 0.7;
	font-size: 12px;
	padding: 6px;
	margin-left: 3px;
	cursor: pointer;
	border: 1px dashed transparent;
	user-select: none;
}

.retro-btn-wrap.default .retro-btn {
	border: 1px dotted #000;
	font-weight: 600;
}

.retro-btn-wrap:hover {
	filter: brightness(1.1);
}

.retro-btn-wrap:active {
	box-shadow: inset 3px 3px 1px grey, 1px 1px 0px 2px #fff;
}

.navbar-main {
	/* background: var(--agency-purple); */
	/*box-shadow: 0 -100px 8vh 16px hsl(232 48% 35% / 1);*/
	bottom: calc(-1 * ((20vh) + 200px));
	transition: bottom 1000ms ease;
	/* border-top: 2px solid hsl(301 87% 20% / 1); */
	background: linear-gradient(to top, #252e6b, rgb(9 9 58 / 50%));
	/* background: rgb(9 9 58 / 50%); */
	z-index: 30;
}

.navbar-main-illuminate {
	/* box-shadow: 0 -100px 8vh 16px hsl(232 48% 35% / 1); */
	bottom: calc(-1 * ((20vh) + 200px));
	transition: bottom 1000ms ease;
	z-index: 10;
	bottom: 0;
	left: 0;
	width: 100vw;
	/* background: linear-gradient(to top, #252e6b, rgb(9 9 58 / 50%)); */
	position: fixed;
}


.navbar-main-wrap {
	display: flex;
	justify-content: space-between;
	padding: 24px 5px;
	/* background: var(--bureau-purple); */
}

.navbar-main-prompt {
	white-space: nowrap;
	padding-right: clamp(1rem,2vw,2rem);
}

.main-btns {
	display: flex;
	justify-content: space-around;
	/* background: var(--bureau-purple); */
	width: 100%;
	align-items: center;
	/* background: var(--agency-purple); */
}


.main-btn-wrap {
	cursor: pointer;
}

	.main-btn-wrap:hover {
		opacity: .5;
	}

.main-btn {
	display: inline;
	text-decoration: underline;
	color: var(--cream);
	font-size: .75rem;
	text-transform: uppercase;
}




/*mini contact form*/
/* visually hide but keep accessible */
.mini-contact-screenreader-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	background: Red;
}

.mini-contact-row {
	width: 100%;
}

	.mini-contact-row input,
	.mini-contact-row textarea {
		width: 100%;
		margin-bottom: 24px;
		padding: 12px;
		border-radius: var(--form-input-radius);
		background: var(--input-bg);
		color: var(--darK-grey);
		border: 1px solid transparent;
	}

	.mini-contact-row textarea {
		aspect-ratio: 16 / 4;
	}

		.mini-contact-row input:active,
		.mini-contact-row textarea:active,
		.mini-contact-row input:focus,
		.mini-contact-row textarea:focus {
			background: var(--cream);
		}

/* Remove default fieldset/legend visuals */
.mini-contact-fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	min-inline-size: 0; /* helps prevent odd sizing in some browsers */
}

	/* If you ever use a visible legend, this prevents spacing quirks */
	.mini-contact-fieldset > legend {
		padding: 0;
		margin: 0;
	}

.mini-contact-intro {
	margin-bottom: 1.5em
}

.mini-contact-outro {
	margin-top: 1.5em;
	font-size: 13px;
}

	.mini-contact-outro a {
		color: var(--cream);
		font-weight: 600;
		white-space: nowrap;
	}

		.mini-contact-outro a:hover,
		.mini-contact-outro a:focus,
		.mini-contact-outro a:active {
			opacity: .5;
		}


.mini-video-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

	.mini-video-wrap iframe {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}



.hero-video-wrap {
	/* z-index: 10; */
	/* position: absolute; */
	/* top: 0; */
	/* left: 0; */
	/* aspect-ratio: 16 / 9; */
	/* overflow: hidden; */
	/* width: 100%; */
	/* max-height: 70vh; */
}

.hero-video-wrap {
	display: grid;
	aspect-ratio: 16 / 9;
	width: 100%;
	max-height: 70vh;
}

	/* Put every direct child in the same grid cell */
	.hero-video-wrap > * {
		grid-area: 1 / 1;
		aspect-ratio: 16 / 9;
		width: 100%;
	}

/* Overlay above the video */
.hero-overlay-wrap {
	z-index: 20;
	opacity: 1;
	transition: opacity 500ms ease;
	display: grid;
	max-height: 70vh;
}






	/* Put every direct child in the same grid cell */
	.hero-overlay-wrap > * {
		grid-area: 1 / 1;
		aspect-ratio: 16 / 9;
		width: 100%;
		max-height: 70vh;
	}

/* Overlay above the video */
.hero-play-wrap {
	opacity: 1;
	width: 100%;
	transition: opacity 500ms ease;
	cursor: pointer;
	z-index: 10;
}

.hero-overlay-img-wrap {
	max-height: 70vh;
	display: flex;
	align-items: center;
}

.hero-overlay-img {
}





.hero-video-wrap .vimeo-embed__box {
	z-index: 10;
	opacity: 0;
	transition: opacity 500ms ease;
	max-height: 70vh;
	background-color: purple;
	background-image: linear-gradient( 361deg, black, transparent);
}


.hero-video-wrap .vimeo-embed__box {
	/* position: absolute; */
	/* height: 100%; */
	/* aspect-ratio: 16 / 9; */
	/* margin: 0 auto; */
	/* border: 1px solid green; */
	/* top: 0; */
	/* left: 0; */
	/* width: 100%; */
	/* z-index: 10; */
	/* transition: opacity 500ms ease; */
	/* opacity: 0; */
}


.hero-overlay-wrap {
	/* top: 50%; */
	/* position: absolute; */
	/* transform: translateY(-50%); */
	/* left: 0; */
	/* border: 1px solid green; */
	/* width: 100%; */
	/* z-index: 20; */
	/* transition: opacity 500ms ease; */
	/* opacity: 1; */
}


	.hero-overlay-wrap .hero-play-wrap {
		/* width: 100%; */
		/* height: 100%; */
		/* z-index: 10; */
		/* position: absolute; */
		/* top: 0; */
		/* left: 0; */
		/* background: #00000061; */
	}

		.hero-overlay-wrap .hero-play-wrap i {
			color: var(--agency-purple);
			position: relative;
			font-size: clamp(32px,10vw,128px);
			top: 50%;
			left: 50%;
			transform: translate(-50%, 75%);
			opacity: .8;
			text-shadow: 3px 3px 7px #00000085;
		}




.case-study-feature-contact-form {
	background: hsl(301 87% 10% / 1);
	text-shadow: none;
	color: var(--cream);
	top: 0;
	left: 0;
	position: relative;
	height: 100%;
	width: 100%;
	padding: 24px;
}

.thinker-wrap {
	text-align: left;
	position: absolute;
	opacity: 0;
	transition: opacity .5s ease;
	display: block;
	padding: 0;
	pointer-events: none;
	top: 10px;
	left: 0px;
}

	.thinker-wrap.thinker-on {
		opacity: 1;
	}



	.thinker-wrap video {
		width: 320px;
		mask-image: linear-gradient( to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100% );
		/* mask-image: linear-gradient(
  to bottom,
  rgba(0,0,0,1) 0%,
  rgba(0,0,0,1) 78%,
  rgba(0,0,0,0.6) 88%,
  rgba(0,0,0,0) 100%
); */
		left: 50%;
		position: relative;
		z-index: 9999;
	}

#primaryResult {
}

.portfolio-page .vimeo-embed {
	/* height:70vh; */
	position: relative;
	max-height: 70vh;
	overflow: hidden;
	box-shadow: 0 4px 8px rgb(0 0 0 / 80%);
}

@media (min-width: 768px) {

	.navbar-main {
		/* background: var(--agency-purple); */
		/* box-shadow: 0 -100px 8vh 16px hsl(232 48% 35% / 1); */
		/* bottom: calc(-1 * ((20vh) + 200px)); */
		transition: bottom 1000ms ease;
		/* border-top: 2px solid hsl(301 87% 20% / 1); */
		background: linear-gradient(to top, #252e6b, rgb(9 9 58 / 50%));
		/* background: rgb(9 9 58 / 50%); */
		z-index: 30;
		bottom: 0;
		background: none;
	}

	.navbar-main-illuminate {
		box-shadow: 0 -100px 8vh 16px hsl(232 48% 35% / 1);
		background: linear-gradient(to top, #252e6b, rgb(9 9 58 / 50%));
	}




	.search-panel-wrap {
		flex-direction: row;
		/* align-items: flex-start; */
		height: 100%;
		max-height: 100%;
		min-height: 100%;
		overflow: hidden;
		/* display: block; */
	}

	.search-left {
		flex: 0 0 calc(clamp(260px, 34vw, 520px) + 36px);
		max-width: calc(clamp(260px, 34vw, 520px) + 36px);
		z-index: 10;
		height: 100%;
		max-height: 100%;
		min-height: 100%;
		/* padding-bottom: 32px; */
		overflow: hidden;
		/* border: 3px solid yellow; */
	}

	.search-right {
		flex: 2 1 66.666%;
		height: 100%;
		max-height: 100%;
		min-height: 100%;
		position: relative;
	}
}


.think-prompt {
	text-transform: uppercase;
	margin: 32px 0;
	letter-spacing: .8px;
	font-weight: 600;
	font-size: .75rem;
	text-align: center;
}


.search-container:has([data-content-id]) .think-prompt {
	display: none;
}

.search-container:has(.thinker-on) .think-suggested-links-wrap,
.search-container:has([data-content-id]) .think-suggested-links-wrap {
	height: 0;
	overflow: hidden;
	transition: height 3s ease;
}



	.search-container:has([data-content-id]) .think-suggested-links-wrap.force {
		display: block;
		height: auto;
		margin-top: 16px;
		transition: height 3s ease;
	}

.think-prompt-more {
	display: none;
	text-align: center;
	margin-top: 16px;
}

	.think-prompt-more a {
		color: var(--cream);
		text-transform: uppercase;
		font-size: .75rem;
	}


.search-container:has([data-content-id]):has(.think-suggested-links-wrap:not(.force)) .think-prompt-more a::before {
	content: "Show More";
}

.search-container:has([data-content-id]):has(.think-suggested-links-wrap.force) .think-prompt-more a::before {
	content: "Hide";
}

.search-container:has([data-content-id]) .think-prompt-more {
	display: block;
}

.search-container .case-study-header {
	padding-bottom: 74px;
}




@media (min-width: 768px) {


	.search-panel-wrap {
		flex-direction: row;
		/* align-items: flex-start; */
		height: 100%;
		max-height: 100%;
		min-height: 100%;
		overflow: hidden;
		/* display: block; */
	}

	.search-left {
		flex: 0 0 calc(clamp(260px, 34vw, 520px) + 36px);
		max-width: calc(clamp(260px, 34vw, 520px) + 36px);
		z-index: 10;
		height: 100%;
		max-height: 100%;
		min-height: 100%;
		/* padding-bottom: 32px; */
		overflow: hidden;
		/* border: 3px solid yellow; */
	}

	.search-right {
		flex: 2 1 66.666%;
		height: 100%;
		max-height: 100%;
		min-height: 100%;
		position: relative;
	}

	.search-panel-inner {
		min-height: calc(100% - 140px);
		overflow-y: auto;
		height: 100vh;
		max-height: calc(100vh - 64px);
		min-height: 100vh;
	}

	.thinker-wrap {
		text-align: left;
		position: absolute;
		opacity: 0;
		transition: opacity .5s ease;
		display: block;
		padding: 0;
		pointer-events: none;
		top: 62px;
		left: 160px;
	}

	.think-prompt {
		text-transform: uppercase;
		margin: 32px 0;
		letter-spacing: .8px;
		font-weight: 600;
		font-size: .75rem;
		text-align: center;
	}

	.think-suggested-links-wrap {
		/* margin-bottom: 60px; */
	}

		.think-suggested-links-wrap .think-suggested-links {
			display: grid;
			position: relative;
			gap: 6px;
			justify-content: stretch;
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

	.think-suggested-link-wrap {
		/* border: 1px solid grey; */
		/* border-radius: 5px; */
		padding: 12px;
		cursor: pointer;
		/* background: var(--darK-grey); */
	}

		.think-suggested-link-wrap:hover {
			background: var(--light-grey);
		}

		.think-suggested-link-wrap a {
			text-decoration: none;
			color: var(--darK-grey);
			color: #fff;
			font-size: 14px;
			border: none;
			margin: initial;
			padding: initial;
			border-radius: initial;
			background: initial;
		}

		.think-suggested-link-wrap:hover a {
			color: var(--darK-grey);
		}
}


@media (min-width: 1280px) {

	.search-container .case-study-header {
		padding-bottom: 0;
	}
}



.think-sphere-field {
	position: relative;
	width: 100%;
	height: 70vh;
	/* overflow: hidden; */
	font-family: var(--font-sans);
}

.sphere {
	position: absolute;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: pointer;
	transition: transform 0.2s ease, background-image .2s ease;
	padding: 18px;
	box-sizing: border-box;
	line-height: 1.3;
}


	.sphere:hover {
		transform: scale(1.08) !important;
		z-index: 100 !important;
	}

	.sphere span {
		pointer-events: none;
		display: block;
		z-index: 1;
	}

.ball-color {
	position: absolute;
	inset: 0;
	border-radius: 50%;
}


.sphere-purple {
	background-color: var(--agency-purple);
	color: var(--cream);
	background-image: radial-gradient(circle at 30% 30%, #b00cae, rgba(255, 255, 255, 0) 60% 50%), radial-gradient(circle at 50% 50%, var(--agency-purple), #000);
	text-shadow: 0px 4px 4px #000;
}

.sphere-green {
	background-color: var(--agency-green);
	color: var(--cream);
	background-image: radial-gradient(circle at 30% 30%, var(--agency-green), rgba(255, 255, 255, 0) 60% 50%), radial-gradient(circle at 50% 50%, var(--agency-green), #000);
	text-shadow: 0px 4px 4px #000;
}

.sphere-orange {
	background-color: #BC6200;
	color: #e8c8e7;
	color: var(--cream);
	background-image: radial-gradient(circle at 30% 30%, #f07c00, rgba(255, 255, 255, 0) 60% 50%), radial-gradient(circle at 50% 50%, #BC6200, #000);
	text-shadow: 0px 4px 4px #000;
}

@keyframes drift1 {
	0% {
		transform: translate(0px, 0px);
	}

	25% {
		transform: translate(18px, -22px);
	}

	50% {
		transform: translate(-12px, 14px);
	}

	75% {
		transform: translate(22px, 8px);
	}

	100% {
		transform: translate(0px, 0px);
	}
}

@keyframes drift2 {
	0% {
		transform: translate(0px, 0px);
	}

	30% {
		transform: translate(-20px, 16px);
	}

	60% {
		transform: translate(14px, -18px);
	}

	100% {
		transform: translate(0px, 0px);
	}
}

@keyframes drift3 {
	0% {
		transform: translate(0px, 0px);
	}

	20% {
		transform: translate(16px, 20px);
	}

	50% {
		transform: translate(-22px, -10px);
	}

	80% {
		transform: translate(10px, 18px);
	}

	100% {
		transform: translate(0px, 0px);
	}
}

@keyframes drift4 {
	0% {
		transform: translate(0px, 0px);
	}

	35% {
		transform: translate(-14px, -20px);
	}

	65% {
		transform: translate(20px, 12px);
	}

	100% {
		transform: translate(0px, 0px);
	}
}

@keyframes drift5 {
	0% {
		transform: translate(0px, 0px);
	}

	40% {
		transform: translate(22px, -14px);
	}

	70% {
		transform: translate(-16px, 20px);
	}

	100% {
		transform: translate(0px, 0px);
	}
}

@keyframes drift6 {
	0% {
		transform: translate(0px, 0px);
	}

	25% {
		transform: translate(-18px, 14px);
	}

	55% {
		transform: translate(12px, -22px);
	}

	80% {
		transform: translate(-8px, 10px);
	}

	100% {
		transform: translate(0px, 0px);
	}
}

@keyframes drift7 {
	0% {
		transform: translate(0px, 0px);
	}

	30% {
		transform: translate(20px, 18px);
	}

	60% {
		transform: translate(-14px, -16px);
	}

	100% {
		transform: translate(0px, 0px);
	}
}

@keyframes ball-purple-fade {
	0%, 25% {
		opacity: 1;
	}

	33%, 92% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes ball-orange-fade {
	0%, 25% {
		opacity: 0;
	}

	33%, 58% {
		opacity: 1;
	}

	66%, 100% {
		opacity: 0;
	}
}

@keyframes ball-green-fade {
	0%, 58% {
		opacity: 0;
	}

	66%, 92% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}