@keyframes search-wiggle { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-9deg) scale(1.05); } 65% { transform: rotate(7deg) scale(1.05); } }

	.search-bar
	{
		display: grid;	
		grid-template-columns: 1fr;	
		max-height: 876px;	
		grid-template-rows: minmax(0, 876px);
		overflow: hidden;	
		--bg: #fafbfa;
		--surface: #ffffff;
		--fg: #333333;
		--muted: #595959;
		--fg-strong: #1A1A1A;
		--border: #dde4df;
		--accent: #278536;
		--font-display: "Figtree", system-ui, sans-serif;
		--font-body: "Figtree", system-ui, sans-serif;
		--container: 1360px;
		--gutter: clamp(16px, 3vw, 40px);
		--radius: 12px;
		--ease: cubic-bezier(.22, 1, .36, 1);
		--accent-hover: color-mix(in oklch, var(--accent) 88%, black);
		--accent-active: color-mix(in oklch, var(--accent) 76%, black);
		--danger: oklch(0.61 0.2 28);
		--highlight: oklch(0.84 0.16 95);
		--devon-green: #83B727;
		--heading-gap: clamp(24px, 2.6vw, 32px);
		--content-max: 1280px;
		--section-pad: clamp(2.5rem, 1.36rem + 4.29vw, 5.5rem);
		--radius-sm: 8px;
		--radius-md: 8px;
		--radius-lg: 8px;
		--shadow-sm: 0 2px 8px oklch(0.24 0.02 154 / .035);
		--shadow-hover: 0 6px 16px oklch(0.24 0.02 154 / .07);
		--control-height: 48px;
		--font-mono: "IBM Plex Mono", Consolas, monospace;	
	}

	.search-bar > *
	{
		grid-column: 1 / -1;
		grid-row: 1 / -1;
	}

	.search-bar > video,
	.search-bar > img
	{
		width: 100%;
		height: 100%;	    
	}

	.search-bar > video
	{
		object-fit: cover;
	}

	.search-bar > .video-toggle
	{
		display: inline-flex;
		flex: none;
		align-items: center;
		gap: 8px;
		min-height: 44px;
		padding: 0 18px;
		border: 1px solid oklch(1 0 0 / .24);
		border-radius: 999px;
		background: oklch(1 0 0 / .12);
		color: var(--surface);
		font: inherit;
		font-size: 15px;
		font-weight: 600;
		letter-spacing: .01em;
		cursor: pointer;
		backdrop-filter: blur(12px);
		transition: background 180ms ease, border-color 180ms ease, transform 180ms var(--ease);
		width: auto;
		height: auto;
		position: absolute;    
		top: calc(anchor(--search-bar-stats top));	
		bottom: calc(anchor(--search-bar-stats bottom));
		margin-block: auto;	
		height: 44px;
		right: calc(anchor(--search-bar right) + var(--content-padding-horizontal));		
	}

	.search-bar > .video-toggle.play:before
	{	
		content: '';
		display: block;
		width: 18px;
		height: 18px;	
		background-image: url('/images/search-bar/play.svg');
		background-size: 18px 18px;		
	}

	.search-bar > .video-toggle.pause:before
	{	
		content: '';
		display: block;
		width: 18px;
		height: 18px;
		background-image: url('/images/search-bar/pause.svg');
		background-size: 18px 18px;	
	}
	.search-bar > .video-toggle:hover 
	{ 
		background: oklch(1 0 0 / .22); 
		border-color: oklch(1 0 0 / .4); 
		transform: translateY(-1px); 
	}

	.search-bar > div
	{	
		anchor-name: --search-bar;				
		position: static;	
		width: var(--content-width);
		margin: auto;    
		flex: 1 0 auto;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;    
		text-align: left;    	
		padding: var(--content-padding);			
	}

	.search-bar > div:before
	{		
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;	
		background: linear-gradient(90deg, oklch(0.18 0.035 151 / .96) 0%, oklch(0.22 0.04 151 / .82) 38%, oklch(0.20 0.03 151 / .32) 72%, oklch(0.18 0.03 151 / .16) 100%), linear-gradient(0deg, oklch(0.16 0.03 151 / .72) 0%, transparent 46%);	
	}

	.search-bar > div h1,
	.search-bar > div h2
	{	
		max-width: 800px;
		margin: 0;
		color: var(--surface);
		font-size: clamp(40px, 4.5vw, 62px);
		font-weight: 600;
		line-height: .98;
		letter-spacing: -.03em;
		text-wrap: balance;	
	} 

	.search-bar > div h1 *,
	.search-bar > div h2 *
	{
		font-size: inherit;
		font-weight: inherit;
	}

	.search-bar > div h1 > span,
	.search-bar > div h2 > span
	{
		display: block;	
	}
	.search-bar > div h1 > span:first-child,
	.search-bar > div h2 > span:first-child
	{	
		margin-bottom: 8px;
		color: var(--surface);
		font-size: clamp(24px, calc(3.9vw - 8px), 38px);
		font-weight: 500;
		line-height: 1.25;
		letter-spacing: .01em;
	}

	.search-bar > div h1 > span > span,
	.search-bar > div h2 > span > span
	{
		display: inline-block;
	}
	.search-bar > div p span:hover,
	.search-bar > div h1 > span > span:hover,
	.search-bar > div h2 > span > span:hover
	{
		color: var(--devon-green);
		transform: translateY(-2px) scale(1.02);
	}

	.search-bar > div p
	{
		display: block;	
	}
	.search-bar > div p, 
	.search-bar > div p span
	{
		max-width: 800px;
		margin: 0;
		color: var(--surface);
		font-size: clamp(18px, 2vw, 24px);
		font-weight: 400;
		line-height: 1.3;
		letter-spacing: .005em;	
		margin-top: 32px;	
	}

	.search-bar > div form
	{
		width: 100%;
		max-width: 800px;
		margin-top: 0;    
		position: relative;
		width: 100%;
		margin-inline: 0;
		padding: 12px;
		border: 1px solid 
		color-mix(in oklch, var(--border) 78%, var(--surface));
		border-radius: var(--radius-sm);
		background: var(--surface);
		color: var(--fg);
		box-shadow: 0 8px 20px oklch(0.12 0.03 151 / .11);	
		display: grid;
		grid-template-columns: 1fr 1fr 1fr auto;
		align-items: stretch;
		gap: 10px;
		margin-top: 16px;
		margin-bottom: clamp(28px, 4vw, 52px);	
	}

	.search-bar > div form .dropdown
	{
		position: relative;
		display: grid;
		min-height: 56px;
		align-content: center;
		gap: 6px;
		padding: 9px 15px;
		border: 1px solid var(--border);
		border-radius: var(--radius-md);
		background: var(--surface);
		transition: border-color 150ms ease, box-shadow 150ms ease;	
	}

	.search-bar > div form .dropdown:hover
	{
		border-color: color-mix(in oklch, var(--muted) 55%, var(--border));
		box-shadow: 0 0 0 3px color-mix(in oklch, var(--border) 55%, transparent);
	}

	.search-bar > div form .dropdown span
	{
		color: var(--muted);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: .01em;
	}
	.search-bar > div form .dropdown select
	{
		border: 0px;
		width: 100%;
		min-height: 28px;
		padding: 0 22px 0 0;        
		color: var(--fg);
		font: 600 15px / 1.2 Figtree, "Avenir Next", sans-serif;
		cursor: pointer;
		height: auto;
	}

	.search-bar > div form .dropdown select:focus
	{
		outline: 0;
	}

	.search-bar > div > form > button
	{
		color: var(--surface);	
		display: inline-flex;
		min-width: 190px;
		min-height: 56px;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 0 24px;
		border: 0;
		border-radius: 999px;
		background: var(--accent);
		color: var(--surface);
		font-size: 16px;
		font-weight: 600;
		letter-spacing: .02em;
		cursor: pointer;
		box-shadow: 0 3px 8px color-mix(in oklch, var(--accent) 14%, transparent);
		transition: background 150ms ease, box-shadow 150ms ease, transform 150ms var(--ease);
		height: 100%;		
	}
	.search-bar > div > form > button:hover
	{
		background: var(--accent-hover); 
		box-shadow: 0 5px 12px color-mix(in oklch, var(--accent) 18%, transparent); 
		transform: translateY(-1px);
	}

	.search-bar > div > form > button:before
	{	
		content: '';
		display: block;
		width: 21px;
		height: 21px;	
		background-image: url('/images/search-bar/mag.svg');
		background-size: 21px 21px;		
	}

	.search-bar > div > form > button:hover:before
	{
		animation: search-wiggle 480ms ease-in-out;
	}
	.search-bar > div > form > button:hover:before:active
	{
		animation: search-wiggle 360ms ease-in-out; 
	}

	.search-bar .stats
	{
		anchor-name: --search-bar-stats;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: clamp(16px, 2.5vw, 32px);
		width: 100%;
		max-width: 800px;    
		margin-top: calc(clamp(28px, 4vw, 52px) + 16px);
		padding: clamp(20px, 2.5vw, 30px) 0;
	}

	.search-bar .stats > div
	{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		text-align: left;
		cursor: default;	
		padding-right: clamp(16px, 2.5vw, 32px);
		position: relative; 	
	}

	.search-bar .stats > div:not(:last-child)::after
	{
		content: '';
		position: absolute;
		right: 0px;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 40px;
		background-color: oklch(1 0 0 / .2);
	}

	.search-bar .stats > div > span
	{
		font-size: clamp(13px, 1.3vw, 15px);
		font-weight: 400;
		color: var(--surface);
		letter-spacing: .02em;	
		text-align: center;
	}

	.search-bar .stats > div > span:first-child
	{
		font-size: clamp(28px, 3.5vw, 42px);
		font-weight: 800;    
		line-height: 1;
		letter-spacing: -.02em;
		transition: color 280ms ease, transform 280ms var(--ease);	
	}

	.search-bar .stats > div > span:first-child:hover
	{
		color: var(--devon-green); 
		transform: scale(1.08);
	}

	@media (max-width: 640px) 
	{		
		.search-bar > div h1,
		.search-bar > div h2,
		.search-bar > div h1 span,
		.search-bar > div h2 span
		{
			font-size: clamp(32px, 8vw, 42px);			
		}
		.search-bar > div h1 > span:nth-child(2)
		{
			padding: 0px 30px;	
		}
		.search-bar > div h1 > span:first-child,
		.search-bar > div h2 > span:first-child
		{
			font-size: clamp(20px, calc(8vw - 8px), 28px);
		}
		.search-bar > div p, 
		.search-bar > div p span
		{
			font-size: clamp(15px, 4vw, 18px);
		}		
				.search-bar > div:before
		{        
			background: linear-gradient(180deg, oklch(0.16 0.03 151 / .73) 0%, oklch(0.16 0.03 151 / .50) 45%, oklch(0.16 0.03 151 / .83) 100%), oklch(0.16 0.03 151 / .40)
		}
		
		.search-bar > div > form > button
		{
			min-height: 48px;
		}
				.search-bar > .video-toggle
		{
			grid-row: 2;
			position: static;
			width: auto;
			justify-self: center;
			margin-bottom: 40px;
		}
	}

	@media (max-width: 949px) 
	{	
		.search-bar > div p, 
		.search-bar > div p span,
		.search-bar > div h1 span,
		.search-bar > div h2 span
		{
			text-align: center;
		}	
		.reviewWidget
		{
			margin: 32px auto 16px;
		}	
		.search-bar > div form
		{
			grid-template-columns: minmax(0, 1fr);
		}
		.search-bar > div
		{
			margin: 0px auto;
		}	
		.search-bar .stats
		{
			justify-content: center;
			margin-bottom: 44px;
		}
		.search-bar .stats div
		{
			align-items: center;
		}	
	}
	@media (max-width: 1024px) 
	{
		.search-bar > div h1,
		.search-bar > div h2,
		.search-bar > div h1 span,
		.search-bar > div h2 span
		{	
			font-size: clamp(40px, 5vw, 60px);
		}
		
		.search-bar > div form
		{
			max-width: 100%;
		}

		.search-bar
		{		
			max-height: none;
			overflow: visible;		
		}
	}
	@media print
	{
		.search-bar
		{
			grid-template-rows: auto;
			print-color-adjust: exact;  
			-webkit-print-color-adjust: exact;				
		}
		.search-bar > div:before,
		.search-bar > img
		{
			object-fit: cover;			
		}
		.search-bar > div form,		
		.search-bar > video
		{
			display: none;
		}
		
		
		.reviewWidget		
		{
			background: #FFF !important;			
		}
		.reviewWidget > span
		{
			color: #333 !important;
		}
		.reviewWidget > div:first-of-type a
		{
			box-shadow: 0 5px 12px oklch(0 0 0 / .16); 
		}
		
		
	}