@font-face {
	font-family: 'Graphik Web Regular';
	src: url("/fonts/Graphik-Regular-Web.woff2") format('woff2'),
	url("/fonts/Graphik-Regular-Web.woff") format('woff');
	font-weight: 400;
	font-style: normal;
	font-kerning: normal;
}

@font-face {
	font-family: 'Graphik Web Medium';
	src: url("/fonts/Graphik-Medium-Web.woff2") format('woff2'),
	url("/fonts/Graphik-Medium-Web.woff") format('woff');
	font-weight: 500;
	font-style: normal;
	font-kerning: normal;
}

@font-face {
	font-family: 'Graphik Web Semibold';
	src: url("/fonts/Graphik-Semibold-Web.woff2") format('woff2'),
	url("/fonts/Graphik-Semibold-Web.woff") format('woff');
	font-weight: 600;
	font-style: normal;
	font-kerning: normal;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	margin: 0;
}

/* Typography */

.typography-headline-standalone {
	margin-bottom: 0;
	font-family: 'Tiempos Headline Regular', serif;
	font-weight: 400;
	font-size: 96px;
	line-height: 100px;
}

@media (max-width: 1280px) {
	.typography-headline-standalone {
		font-size: 80px;
		line-height: 84px;
	}
}

@media (max-width: 720px) {
	.typography-headline-standalone {
		font-size: 48px;
		line-height: 52px;
	}
}

.typography-headline-super {
	font-family: 'Tiempos Headline Regular', serif;
	font-weight: 400;
	font-size: 80px;
	line-height: 84px;
}

@media (max-width: 1280px) {
	.typography-headline-super {
		font-size: 64px;
		line-height: 68px;
	}
}

@media (max-width: 720px) {
	.typography-headline-super {
		font-size: 48px;
		line-height: 52px;
	}
}

.typography-headline-elevated {
	font-family: 'Tiempos Headline Regular', serif;
	font-weight: 400;
	font-size: 64px;
	line-height: 68px;
}

@media (max-width: 1280px) {
	.typography-headline-elevated {
		font-size: 48px;
		line-height: 52px;
	}
}

@media (max-width: 720px) {
	.typography-headline-elevated {
		font-size: 40px;
		line-height: 44px;
	}
}

.typography-headline {
	font-family: 'Tiempos Headline Regular', serif;
	font-weight: 400;
	font-size: 48px;
	line-height: 52px;
}

@media (max-width: 1280px) {
	.typography-headline {
		font-size: 40px;
		line-height: 44px;
	}
}

@media (max-width: 720px) {
	.typography-headline {
		font-size: 32px;
		line-height: 36px;
	}
}

.typography-standalone-subhead {
	font-family: 'Tiempos Headline Regular', serif;
	font-weight: 400;
	font-size: 48px;
	line-height: 52px;
}

@media (max-width: 1280px) {
	.typography-standalone-subhead {
		font-size: 32px;
		line-height: 40px;
	}
}

@media (max-width: 720px) {
	.typography-standalone-subhead {
		font-size: 28px;
		line-height: 36px;
	}
}

.typography-headline-reduced {
	font-family: 'Graphik Web Semibold', sans-serif;
	font-weight: 600;
	font-size: 40px;
	line-height: 44px;
}

@media (max-width: 1280px) {
	.typography-headline-reduced {
		font-size: 32px;
		line-height: 36px;
	}
}

@media (max-width: 720px) {
	.typography-headline-reduced {
		font-size: 28px;
		line-height: 32px;
	}
}

.typography-quote {
	font-family: 'Tiempos Headline Light', serif;
	font-weight: 300;
	font-size: 40px;
	line-height: 48px;
}

@media (max-width: 1280px) {
	.typography-quote {
		font-size: 32px;
		line-height: 40px;
	}
}

@media (max-width: 720px) {
	.typography-quote {
		font-size: 28px;
		line-height: 36px;
	}
}

.typography-quote-reduced {
	font-family: 'Tiempos Headline Light', serif;
	font-weight: 300;
	font-size: 32px;
	line-height: 40px;
}

@media (max-width: 1280px) {
	.typography-quote-reduced {
		font-size: 28px;
		line-height: 36px;
	}
}

@media (max-width: 720px) {
	.typography-quote-reduced {
		font-size: 24px;
		line-height: 32px;
	}
}

.typography-callout {
	font-family: 'Graphik Web Semibold', sans-serif;
	font-weight: 600;
	font-size: 32px;
	line-height: 36px;
}

@media (max-width: 1280px) {
	.typography-callout {
		font-size: 28px;
		line-height: 32px;
	}
}

@media (max-width: 720px) {
	.typography-callout {
		font-size: 24px;
		line-height: 28px;
	}
}

.typography-eyebrow-super {
	font-family: 'Tiempos Headline Regular', serif;
	font-weight: 400;
	font-size: 32px;
	line-height: 36px;
}

@media (max-width: 1280px) {
	.typography-eyebrow-super {
		font-size: 28px;
		line-height: 32px;
	}
}

@media (max-width: 720px) {
	.typography-eyebrow-super {
		font-size: 24px;
		line-height: 28px;
	}
}

.typography-eyebrow-elevated {
	font-family: 'Tiempos Headline Regular', serif;
	font-weight: 400;
	font-size: 28px;
	line-height: 32px;
}

@media (max-width: 1280px) {
	.typography-eyebrow-elevated {
		font-size: 24px;
		line-height: 28px;
	}
}

@media (max-width: 720px) {
	.typography-eyebrow-elevated {
		font-size: 20px;
		line-height: 24px;
	}
}

.typography-label {
	font-family: 'Graphik Web Semibold', sans-serif;
	font-weight: 600;
	font-size: 24px;
	line-height: 28px;
}

@media (max-width: 1280px) {
	.typography-label {
		font-size: 20px;
		line-height: 24px;
	}
}

@media (max-width: 720px) {
	.typography-label {
		font-size: 20px;
		line-height: 24px;
	}
}

.typography-eyebrow {
	font-family: 'Graphik Web Semibold', sans-serif;
	font-weight: 600;
	font-size: 24px;
	line-height: 28px;
}

@media (max-width: 1280px) {
	.typography-eyebrow {
		font-size: 20px;
		line-height: 24px;
	}
}

@media (max-width: 720px) {
	.typography-eyebrow {
		font-size: 20px;
		line-height: 24px;
	}
}

.typography-intro-elevated {
	font-family: 'Graphik Web Regular', sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 32px;
}

@media (max-width: 1280px) {
	.typography-intro-elevated {
		font-size: 20px;
		line-height: 28px;
	}
}

@media (max-width: 720px) {
	.typography-intro-elevated {
		font-size: 20px;
		line-height: 28px;
	}
}

.typography-eyebrow-reduced {
	font-family: 'Graphik Web Regular', sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 24px;
}

@media (max-width: 1280px) {
	.typography-eyebrow-reduced {
		font-size: 20px;
		line-height: 24px;
	}
}

@media (max-width: 720px) {
	.typography-eyebrow-reduced {
		font-size: 18px;
		line-height: 22px;
	}
}

.typography-intro {
	font-family: 'Graphik Web Regular', sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 28px;
	margin-top: 24px;
}

@media (max-width: 1280px) {
	.typography-intro {
		font-size: 20px;
		line-height: 28px;
	}
}

@media (max-width: 720px) {
	.typography-intro {
		font-size: 18px;
		line-height: 26px;
	}
}

.typography-tout {
	font-family: 'Graphik Web Semibold', sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 24px;
}

@media (max-width: 1280px) {
	.typography-tout {
		font-size: 18px;
		line-height: 22px;
	}
}

@media (max-width: 720px) {
	.typography-tout {
		font-size: 18px;
		line-height: 22px;
	}
}

.typography-body {
	font-family: 'Graphik Web Regular', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
}

@media (max-width: 1280px) {
	.typography-body {
		font-size: 16px;
		line-height: 24px;
	}
}

@media (max-width: 720px) {
	.typography-body {
		font-size: 16px;
		line-height: 24px;
	}
}

.typography-body-tight {
	font-family: 'Graphik Web Regular', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
}

@media (max-width: 1280px) {
	.typography-body-tight {
		font-size: 16px;
		line-height: 20px;
	}
}

@media (max-width: 720px) {
	.typography-body-tight {
		font-size: 16px;
		line-height: 20px;
	}
}

.typography-body-reduced {
	font-family: 'Graphik Web Regular', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
}

@media (max-width: 1280px) {
	.typography-body-reduced {
		font-size: 14px;
		line-height: 20px;
	}
}

@media (max-width: 720px) {
	.typography-body-reduced {
		font-size: 14px;
		line-height: 20px;
	}
}

.typography-body-reduced-tight {
	font-family: 'Graphik Web Regular', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
}

@media (max-width: 1280px) {
	.typography-body-reduced-tight {
		font-size: 14px;
		line-height: 18px;
	}
}

@media (max-width: 720px) {
	.typography-body-reduced-tight {
		font-size: 14px;
		line-height: 18px;
	}
}

.typography-caption {
	font-family: 'Graphik Web Regular', sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
}

@media (max-width: 1280px) {
	.typography-caption {
		font-size: 12px;
		line-height: 16px;
	}
}

@media (max-width: 720px) {
	.typography-caption {
		font-size: 12px;
		line-height: 16px;
	}
}

/* Base multi-step utility */
.hidden {
	display: none !important;
}

.global-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 80px; /* Provides ample white breathing room channel at the ceiling */
	box-sizing: border-box;
	background-color: transparent; /* Allows your clean white page background to bleed through */
	z-index: 10000; /* Stays fixed above your multi-step sliding forms layers */
	transition: transform 400ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* Visibility offset: Hides the header when your final results mount view activates */
.global-header.hidden-shift {
	transform: translateY(-80px) !important;
	pointer-events: none;
}

.header-navigation-wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 100%;
	height: 100%;
	padding: 40px; /* Centers layout edges flush with your 960px grid */
	box-sizing: border-box;
}

/* SVG Logo Alignment Scaling Box */
.header-logo-link {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	height: 100%;
}

.inline-logo-svg {
	display: block;
	transition: opacity 200ms ease;
}

.inline-logo-svg:hover {
	opacity: 0.8;
}

/* Right-Aligned Action Control Pills Layout */
.header-controls-group {
	display: flex;
	flex-direction: row;
	gap: 12px;
	align-items: center;
	height: 100%;
}

.header-action-btn {
	background-color: #fff;
	border: 1px solid #0D0D0E; /* standard layout hairline parameter border */
	border-radius: 20px; /* Full capsule rounded frame */
	padding: 8px 16px;
	font-family: 'Graphik Web Regular', 'Graphik', sans-serif;
	font-size: 12px;
	line-height: 16px;
	color: #0D0D0E;
	cursor: pointer;
	box-sizing: border-box;
	transition: background-color 200ms ease, border-color 200ms ease;
}

.header-action-btn:hover {
	background-color: #0D0D0E;
	color: #fff;
	border-color: #0D0D0E;
}

#quiz-form {
	position: relative !important;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Master Layout Wrapper for Step Containers */
.step-layout-container {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 20px;
	width: 960px;
	height: 480px;
	margin: auto;
	box-sizing: border-box;
}

/* Left Side: Image Panel Configuration */
.step-image-panel {
	flex-shrink: 0;
	width: 360px;
	height: 100%;
	background: #F1F1F3;
	border-radius: 20px;
	overflow: hidden;
}

.step-image-panel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Right Side: Text & Form Controls */
.step-content-panel {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 80px;
	box-sizing: border-box;
	background-color: #fafafc;
	border-radius: 20px;
	overflow-y: scroll;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

@media (max-width: 720px) {
	.step-content-panel {
		padding: 40px;
		margin-bottom: 208px;
	}
}

.step-content-panel::-webkit-scrollbar {
	display: none;
}

.step-content-panel h1 {
	margin: 0;
	color: #0D0D0E;
}

.step-content-panel p {
	margin-top: 12px;
	margin-bottom: 0;
	color: #0D0D0E;
}

.tile-grid {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 48px;
}

/* ==========================================================================
   UNIFIED CARD LAYOUT COMPONENTS & ACCORDION SYSTEM DRAWERS [S3]
   ========================================================================== */

/* Outer parent layout wrapper stacks tiles and sub-cards vertically */
.tile-option {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	cursor: pointer;
	box-sizing: border-box;
	position: relative;
}

/* Clear Native UI Radio Overrides */
.tile-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
}

/* Standalone choice option display card */
.tile-option-canvas {
	width: 100%;
	padding: 24px;
	border-radius: 20px;
	background: #F1F1F3;
	color: #0D0D0E;
	box-sizing: border-box;
	transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1), border-color 0.2s cubic-bezier(0.2, 0, 0, 1);
}

/* Selection and Hover Rules */
.tile-option:hover .tile-option-canvas {
	background-color: #E6E6E8;
}

/* Checked State Selection: Darkens option canvas instantly [S3] */
.tile-option:has(input:checked) .tile-option-canvas,
.tile-option.active .tile-option-canvas {
	background: #666769 !important;
}

/* Core Typography Mechanics inside Selection Card */
.tile-content {
	flex: 1;
}

.tile-content h2 {
	margin: 0;
	font-family: 'Graphik Web Semibold', sans-serif;
	font-weight: 600;
	color: #0D0D0E;
	transition: color 200ms ease;
}

.tile-content p {
	margin-top: 4px;
	color: #0D0D0E;
	transition: color 200ms ease;
}

/* Typography Color Inversion: Switches text to absolute white [S3] */
.tile-option:has(input:checked) .tile-content h2,
.tile-option.active .tile-content h2 {
	color: #fff !important;
}

.tile-option:has(input:checked) .tile-content p,
.tile-option.active .tile-content p {
	color: #fff !important;
}

/* ==========================================================================
   PRODUCTION REVISION: UNIFIED INLINE FRICTION LAYOUT (MATCHES IMAGE BLUEPRINT)
   ========================================================================== */

/* ==========================================================================
	  RESTORED: STANDALONE ACCORDION SYSTEM DRAWER OVERWRITE (SUB-CARD VIEW) [S3]
	  ========================================================================== */
   
   .inline-friction-drawer {
	   width: 100%;
	   display: block;
	   max-height: 0; /* Keeps container strictly collapsed to 0px while un-triggered */
	   opacity: 0;
	   margin-top: 0;
	   pointer-events: none;
	   
	   /* RESTORED VISUAL PROFILE: Your exact specified dark gray box container */
	   background-color: #97989A !important;
	   border-radius: 20px;
	   
	   /* CUTOFF LOGIC: Cuts off inner text artifacts cleanly while the box is closed */
	   overflow: hidden; 
	   
	   /* COORDINATE MAP ANCHOR: Establishes a spatial coordinate map for the line */
	   position: relative !important; 
	   transition: max-height 350ms cubic-bezier(0.25, 1, 0.5, 1), 
				   opacity 200ms ease, 
				   margin-top 350ms ease;
   }
      
/* MOUNT EXPANSION STATE: Reveals separate light note box instantly on click */

.inline-friction-drawer.visible-trigger {
	max-height: 160px; /* Automatically scales open to house your text content envelopes */
	opacity: 1;
	margin-top: 16px; /* Fixed space buffer separating choice element from notice element */
	padding: 24px !important;
	box-sizing: border-box;
	/* Lets absolute positioned children pop out beyond the card frame limits */
	overflow: hidden; 
}
   
   /* FIXED VISUAL CONTROLS: 
	  The exact 24px padding bounds are safely applied directly to your inner text tags. 
	  This forms a layout shell that keeps paragraphs perfectly quiet and readable. */
   .inline-friction-drawer .notice-title {
	   display: block;
	   font-family: 'Graphik Web Semibold', sans-serif;
	   font-weight: 600;
	   font-size: 12px;
	   line-height: 16px;
	   color: #fff !important; /* Crisp white header contrast over dark gray */
   }
   
   .inline-friction-drawer .notice-body {
	   display: block;
	   margin: 0;
	   font-family: 'Graphik Web Regular', sans-serif;
	   font-size: 12px;
	   line-height: 16px;
	   color: #fff !important; /* Soft light gray text contrast */
   }
   
/* Layout Button Triggers Container styling */
.button-group {
	display: flex;
	gap: 12px;
	margin-top: 12px;
}



/* FIXED GLOBAL NAVIGATION BAR RULES */
.global-nav-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	padding: 40px;
	box-sizing: border-box;
	background-color: rgba(255,255,255,0.8);
	backdrop-filter: saturate(180%) blur(20px);
	z-index: 1000;
	display: flex;
	align-items: center; 
}

@media (max-width: 720px) {
	.global-nav-bar {
		padding: 24px 32px;
	}
}

/* Absolute Symmetrical Centered Progress tracking element */
.progress-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 240px;
	height: 6px;
	background: #F1F1F3;
	border-radius: 3px;
	overflow: hidden;
}

@media (max-width: 720px) {
	.progress-container {
		width: 160px;
	}
}

#progress-bar {
	height: 100%;
	width: 15%;
	background: #0D74DE;
	border-radius: 3px;
	transition: width 0.2s ease;
}

/* Container for actual buttons inside the bar layout */
.nav-button-wrapper {
	display: flex;
	flex-direction: row;
	align-items: center; 
	justify-content: space-between;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

/* Base global layout action triggers button configuration */
.nav-button-wrapper button {
	padding: 12px 24px;
	font-family: 'Graphik Web Regular', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	cursor: pointer;
	transition: all 0.2s ease;
	box-sizing: border-box;
}

.prev-btn {
	background: none;
	border: none;
	color: #868789;
	text-decoration: none;
}

.prev-btn:hover {
	color: #666769;
}

.next-btn, #submit-btn {
	display: inline-block;
	margin-left: auto;
	text-align: center;
	white-space: nowrap;
	font-family: 'Graphik Web Regular', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	width: intrinsic;
	height: 48px;
	padding: 14px 24px;
	background-color: #0D0D0E;
	color: #fff;
	text-decoration: none;
	outline: none;
	border: none;
	border-radius: 24px;
	cursor: pointer;
	transition: all .25s ease;
}

.next-btn:hover, #submit-btn:hover {
	background: #000000;
}

.next-btn:disabled, #submit-btn:disabled {
	background: #F1F1F3 !important;
	color: #666769 !important;
	cursor: not-allowed !important;
}

/* Responsive Fallbacks: Stacks image above form layout variables on mobile displays */
@media (max-width: 720px) {
	.step-layout-container {
		flex-direction: column;
		gap: 24px;
		width: 100%;
		max-width: 85%;
		height: auto;
	}
	
	.step-image-panel {
		max-width: 100%;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
	}
}

.form-step {
	position: absolute !important;
	top: auto;
	left: auto;
	width: 100%;
	opacity: 1;
	transform: translateY(0);
	
	/* Smooth hardware-accelerated cubic-bezier deceleration velocity profiles */
	transition: 
		opacity 500ms cubic-bezier(0.25, 1, 0.5, 1), 
		transform 500ms cubic-bezier(0.25, 1, 0.5, 1) !important;
	
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
}

@media (max-width: 720px) {
	.form-step {
		position: static !important;
		margin-top: 80px;
	}
}

.form-step::-webkit-scrollbar {
	display: none;
}

/* Replaces your old rigid display:none rule */
.hidden {
	display: none !important;
}

/* SCREEN EXIT STATE: Floats UP and vanishes smoothly */
.form-step.exit-up {
	opacity: 0 !important;
	transform: translateY(-160px) !important;
	pointer-events: none; /* Stops users from clicking input elements during transition states */
}

/* 4. ENTER GLIDE STATE: Incoming card stays invisible and pushed DOWN, waiting to float up */
.form-step.enter-down {
	opacity: 0 !important;
	transform: translateY(160px) !important;
	pointer-events: none;
}

/* ==========================================================================
   PRODUCTION REVISION: HARDWARE-ACCELERATED CAROUSEL STYLING SYSTEM
   ========================================================================== */

/* Carousel Framing Container Box Constraints */
.carousel-layout-container {
	width: 100vw !important;
	max-width: 100vw !important;
	box-sizing: border-box;
	overflow: visible !important;
}

/* Horizontal track that maps scroll snap parameters */
.carousel-track {
	display: flex;
	flex-direction: row;
	gap: 20px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	box-sizing: border-box;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: calc((100vw - 960px) / 2) !important;
	padding-inline-start: calc((100vw - 960px) / 2) !important;
	padding-inline-end: calc((100vw - 960px) / 2) !important;
}

@media (max-width: 1280px) {
	.carousel-track {
		scroll-padding-inline-start: calc((100vw - 640px) / 2) !important;
		padding-inline-start: calc((100vw - 640px) / 2) !important;
		padding-inline-end: calc((100vw - 640px) / 2) !important;
	}
}

@media (max-width: 720px) {
	.carousel-track {
		scroll-padding-inline-start: calc((100vw - 85%) / 2) !important;
		padding-inline-start: calc((100vw - 85%) / 2) !important;
		padding-inline-end: calc((100vw - 85%) / 2) !important;
	}
}

.carousel-track::-webkit-scrollbar {
	display: none;
}

/* Individual Card Structural Dimensions */
.carousel-card {
	flex: 0 0 360px !important;
	width: 360px !important;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	scroll-snap-align: start !important;
	box-sizing: border-box;
	position: relative;
}

@media (max-width: 1280px) {
	.carousel-card {
		flex: 0 0 300px !important;
		width: 300px !important;
	}
}

/* THE INVISIBLE RADIO INPUT: Completely out of the visual flow, zero layout overhead */
.carousel-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
}

/* Image Wrapper Canvas containing dynamic dark overlays */
.carousel-card .card-image-wrapper {
	position: relative;
	width: 100%;
	height: 480px;
	border-radius: 20px;
	overflow: hidden;
	background: #000000 !important;
	pointer-events: none; /* Allows clicks to pass straight to the parent label */
	transform: translateZ(0); /* Forces GPU layer caching for butter-smooth rendering */
}

@media (max-width: 1280px) {
	.carousel-card .card-image-wrapper {
		height: 400px;
	}
}

/* THE HARDWARE-ACCELERATED DIMMING LAYER: Prevents high-res image repaint lag */
.carousel-card .card-image-wrapper::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #0D0D0E; /* Core brand dark tone */
	border-radius: 20px !important;
	opacity: 0;
	mix-blend-mode: multiply; /* Blends dark values seamlessly over image pixels */
	transition: opacity .5s cubic-bezier(0.215, 0.610, 0.355, 1); /* Premium responsive ease */
	z-index: 2;
}

/* Core card asset image baselines remain fully cached at 100% opacity */
.carousel-card .card-image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* PURE CSS SELECTION OVERLAY STATE: Fired instantly by browser engine on click */
.carousel-card:has(input[type="radio"]:checked) .card-image-wrapper::after,
.carousel-card.active .card-image-wrapper::after {
	opacity: 0.35; /* Controlled dimming density overlay */
}

/* Custom indicator design overlay anchor specs */
.radio-indicator {
	position: absolute;
	bottom: 20px;
	right: 20px;
	width: 24px;
	height: 24px;
	border: 2px solid #FFFFFF;
	border-radius: 50%;
	box-sizing: border-box;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

/* Center dot inside indicator circles (defaults to invisible scale) */
.radio-indicator::after {
	content: '';
	width: 10px;
	height: 10px;
	background-color: #FFFFFF;
	border-radius: 50%;
	transform: scale(0);
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* PURE CSS INDICATOR SELECTION STATE: Centers and pops the white dot on choice */
.carousel-card:has(input[type="radio"]:checked) .radio-indicator::after,
.carousel-card.active .radio-indicator::after {
	transform: scale(1);
}

/* Typographic Label panels sitting underneath images */
.card-text-panel {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 24px;
	padding-right: 16px;
	padding-left: 16px;
}

.card-text-panel h3 {
	margin: 0;
	color: #0D0D0E;
}

.card-text-panel h3 strong {
	font-family: 'Graphik Web Semibold', sans-serif;
	font-weight: 600;
	color: #0D0D0E;
}

.card-subtext {
	margin: 0;
	color: #666769;
}


.contact-form-grid {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 48px;
	width: 100%;
}

.contact-form-grid .input-row {
	display: flex;
	flex-direction: row;
	gap: 16px;
	width: 100%;
}

/* Relative mounting cell wrapper acts as the anchor point for the label text */
.floating-input-group {
	position: relative;
	width: 100%;
}

/* BASE INPUT LAYER: Generous top padding leaves room for the small floated header text */
.floating-input-group input,
.contact-form-grid select {
	width: 100% !important;
	height: 56px;
	margin-top: 0 !important;
	padding: 8px 16px 0 !important; /* Fixed vertical metrics clear inner text fields */
	font-family: 'Graphik Web Regular', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: #0D0D0E;
	background-color: #F1F1F3 !important;
	border: 1px solid transparent !important;
	border-radius: 12px !important;
	box-sizing: border-box;
	outline: none;
	transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Formats the native browser placeholder text to be completely invisible */
.floating-input-group input::placeholder {
	color: transparent;
	opacity: 0;
}

/* STATIC LABEL POSITION: Centered over the cursor field path when input is empty */
.floating-input-group label {
	position: absolute;
	top: 50%;
	left: 16px;
	transform: translateY(-50%);
	
	font-family: 'Graphik Web Regular', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: #666769;
	
	pointer-events: none; /* Allows user to click right through the text label layer */
	transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
	transform-origin: left top;
}

/* ==========================================================================
   DYNAMIC INTERACTION TRANSITIONS
   ========================================================================== */

/* Blue border focus stroke effect matches your sample image precisely */
.floating-input-group input:focus,
.contact-form-grid select:focus {
	background-color: #F1F1F3 !important;
	border-color: #0074DE !important; /* Bright blue brand focus highlight */
	box-shadow: 0 0 0 2px #0074DE;
}

/* 
   THE FLOATING TRIGGERS:
   If the input is actively focused, or if the user has already typed content 
   (meaning the placeholder is no longer being shown), shrink and lift the label text.
*/
.floating-input-group input:focus ~ label,
.floating-input-group input:not(:placeholder-shown) ~ label {
	top: 8px;
	transform: translateY(0);
	font-size: 12px;
	line-height: 16px;
}

/* Color transition shifts the text dark blue when a field is actively being typed in */
.floating-input-group input:focus ~ label {
	color: #8E8E93;
}

/* Specific extra right padding for the select element to accommodate the dropdown chevron */
.contact-form-grid select {
	/* 1. Standard structural dimensions match your 56px input fields */
	width: 100% !important;
	height: 56px !important;
	padding: 8px 32px 8px 16px !important;
	box-sizing: border-box;
	
	/* 2. Strip native browser desktop arrows */
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	cursor: pointer;
	
	/* 3. Base grey background layout cards */
	background-color: #F1F1F3 !important;
	
	/* 
	   4. THE FIXED ISOLATED IMAGE DEPLOYMENT:
	   By using an explicit 'background-image' with a base64 encoded block, 
	   it is physically impossible for background-color rules to overwrite the chevron. 
	   The browser locks the #8E8E93 vector arrow layer right on top of the grey card.
	*/
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOEU4RTkzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBvbHlsaW5lIHBvaW50cz0iNiA5IDEyIDE1IDE4IDkiPjwvcG9seWxpbmU+PC9zdmc+") !important;
	background-repeat: no-repeat !important;
	background-position: right 16px center !important;
	background-size: 16px !important;
}

.contact-form-grid select:invalid,
.contact-form-grid select option[value=""] {
	color: #8E8E93;
}

.contact-form-grid select option {
	color: #0D0D0E;
	background-color: #ffffff;
}

/* ==========================================================================
   PRODUCTION REVISION: TWO-COLUMN VERTICAL FLEXBOX LAYOUT
   ========================================================================== */

/* Master Dashboard Layout Layer Bounds */
.results-dashboard-container {
	width: 960px;
	margin: auto;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 600ms cubic-bezier(0.25, 1, 0.5, 1), transform 600ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* Visibility Mounting Toggle Class (Triggers hardware acceleration glide) */
.results-dashboard-container.visible-mount {
	opacity: 1 !important;
	transform: translateY(0) !important;
	display: flex !important;
}

/* THE CONTAINER FIX: Drops grid to establish two independent, vertical side-by-side columns */
.results-grid-layout {
	display: flex;
	flex-direction: row;
	gap: 20px;
	width: 100%;
	height: 640px !important; /* Locks the master canvas to your exact 640px framework */
	box-sizing: border-box;
}

/* COLUMN BLOCKS: Split the 960px canvas perfectly in half (470px wide each) */
.results-column {
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex: 1;
	width: 50%;
	height: 100%;
	box-sizing: border-box;
}

/* Base structural footprint shared across every separate pane card block */
.results-card {
	border-radius: 20px;
	overflow: hidden;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 100%; /* Guarantees every tile matches 100% of its parent column width */
}

/* TALL ANCHOR TILES: Hard-locked to your precise 400px specification */
.hero-image-card,
.black-card {
	height: 360px !important;
	flex: 0 0 360px !important; /* Stops the browser engine from shrinking or stretching these blocks */
}

.hero-image-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 
   THE REMAINDER TRACK FIX: 
   Tells the text cards to grow fluidly and absorb 100% of the remaining column space.
   Inside a 640px vertical framework with a 400px card and a 20px gap, 
   these panels calculate automatically to exactly 220px high down to the pixel.
*/
.off-white-card,
.brand-blue-card {
	flex: 1 !important; 
}

/* Dynamic Content Text Pane Interior Adjustments */
.results-card.text-card {
	padding: 40px 80px;
	justify-content: center;
	text-align: center;
}

.results-card.text-card h2 {
	margin: 0;
}

.results-card.text-card p {
	margin-top: 12px;
	margin-bottom: 0;
}

/* COLOR INDICES VARIABLES MATCHING BLUEPRINT SPECS */
.off-white-card {
	background-color: #F7F7F9;
	color: #0D0D0E;
}

.brand-blue-card {
	background-color: #0D74DE;
	color: #ffffff;
}

/* Bottom-Right Dark Timeline Pane Metrics */
.black-card {
	background-color: #0D0D0E;
	color: #ffffff;
	justify-content: center;
	align-items: center;
}

.black-card p {
	margin: 0;
	color: #fff;
}

.black-card h2 {
	margin-top: 12px;
	margin-bottom: 0;
	font-family: 'Graphik Web Medium', sans-serif;
	font-weight: 500;
}

/* Footer layout caption disclaimer guidelines */
.dashboard-footer-note {
	width: 100%;
	max-width: 640px;
	margin-top: 40px;
	margin-bottom: 0;
	text-align: center;
	color: #8E8E93;
}

/* Fluid Mobile Cascade Viewport Fallback Rules */
@media (max-width: 720px) {
	.results-grid-layout {
		flex-direction: column;
		height: auto !important;
	}
	.results-column {
		width: 100%;
		height: auto;
	}
	.hero-image-card,
	.black-card {
		height: 300px !important;
		flex: 0 0 300px !important;
	}
	.results-card.text-card {
		padding: 32px;
	}
}