/*
 * Polar Tint — Components
 *
 * Reusable UI components built on tokens.css.
 * Direction: Cinema + Wizard + Climate-Engineered (locked 2026-05-19).
 * Spec source: planning/07-design-system.md + feedback_polartint_main_site memory.
 */

/* === Buttons ============================================ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: var(--space-3) var(--space-5);
	font-family: inherit;
	font-weight: var(--weight-bold);
	font-size: var(--text-base);
	line-height: 1.2;
	border-radius: var(--radius-md);
	border: 2px solid transparent;
	transition:
		background-color var(--duration-fast) var(--easing-out),
		color var(--duration-fast) var(--easing-out),
		border-color var(--duration-fast) var(--easing-out),
		box-shadow var(--duration-fast) var(--easing-out),
		transform var(--duration-fast) var(--easing-out);
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
}
.btn:active { transform: translateY(0); }

.btn--primary {
	background-color: var(--color-primary-navy);
	color: var(--color-white);
}
.btn--primary:hover {
	background-color: var(--color-polar-blue);
	color: var(--color-white);
	text-decoration: none;
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

.btn--secondary {
	background-color: transparent;
	color: var(--color-primary-navy);
	border-color: var(--color-primary-navy);
}
.btn--secondary:hover {
	background-color: var(--color-primary-navy);
	color: var(--color-white);
	text-decoration: none;
}

.btn--ghost {
	background-color: transparent;
	color: var(--color-polar-blue);
}
.btn--ghost:hover {
	background-color: var(--color-ice);
	color: var(--color-primary-navy);
	text-decoration: none;
}

.btn--gold {
	background-color: var(--color-gold);
	color: var(--color-primary-navy);
}
.btn--gold:hover {
	background-color: #ffd866;
	color: var(--color-primary-navy);
	text-decoration: none;
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

.btn--on-dark.btn--ghost {
	color: var(--color-white);
	border-color: rgb(255 255 255 / 0.3);
}
.btn--on-dark.btn--ghost:hover {
	background-color: rgb(255 255 255 / 0.1);
	color: var(--color-white);
	border-color: var(--color-white);
}

.btn--on-dark.btn--secondary {
	color: var(--color-white);
	border-color: var(--color-white);
}
.btn--on-dark.btn--secondary:hover {
	background-color: var(--color-white);
	color: var(--color-primary-navy);
}

.btn--sm { min-height: 36px; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn--lg { min-height: 52px; padding: var(--space-4) var(--space-6); font-size: var(--text-lg); }
.btn--xl { min-height: 60px; padding: var(--space-5) var(--space-8); font-size: var(--text-xl); }

/* === Section primitive ================================== */

.section {
	padding-top: var(--space-16);
	padding-bottom: var(--space-16);
}
@media (min-width: 1024px) {
	.section {
		padding-top: var(--space-24);
		padding-bottom: var(--space-24);
	}
}

.section--ice { background-color: var(--color-ice); }
.section--polar {
	background:
		radial-gradient(ellipse 80% 60% at 80% 0%, rgb(46 163 242 / 0.08) 0%, transparent 60%),
		radial-gradient(ellipse 60% 50% at 10% 100%, rgb(22 73 146 / 0.06) 0%, transparent 60%),
		linear-gradient(180deg, #eaf2fc 0%, #dbe8f7 100%);
}
.section--navy-deep {
	background:
		radial-gradient(ellipse 80% 60% at 85% 0%, rgb(46 163 242 / 0.22) 0%, transparent 60%),
		radial-gradient(ellipse 70% 50% at 0% 100%, rgb(22 73 146 / 0.38) 0%, transparent 60%),
		linear-gradient(180deg, var(--color-ink) 0%, var(--color-navy-mid) 50%, var(--color-ink) 100%);
	color: var(--color-white);
}
.section--navy-deep h1,
.section--navy-deep h2,
.section--navy-deep h3,
.section--navy-deep h4,
.section--navy-deep .section__title { color: var(--color-white); }
.section--navy-deep .section__lede,
.section--navy-deep p { color: rgb(255 255 255 / 0.82); }
.section--dark {
	background: var(--gradient-hero);
	color: var(--color-white);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 {
	color: var(--color-white);
}

.section__title-block {
	text-align: center;
	margin-bottom: var(--space-12);
}
.section__eyebrow {
	display: inline-block;
	color: var(--color-polar-blue);
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	font-size: var(--text-sm);
	margin-bottom: var(--space-3);
}
.section__title { margin-bottom: var(--space-4); }
.section__lede {
	font-size: var(--text-lg);
	color: var(--color-slate-700);
	max-width: 56ch;
	margin: 0 auto;
}
.section--dark .section__lede {
	color: rgb(255 255 255 / 0.85);
}
.section__action-center {
	text-align: center;
	margin-top: var(--space-10);
}

/* === Hero cinema (with 60-second wizard) =============== */

.hero-cinema {
	position: relative;
	/* Pull the hero up under the sticky header so the transparent header
	   shows the dark hero gradient behind it (not white page body). */
	margin-top: -80px;
	/* Add header height back into padding-top so content isn't hidden behind header. */
	padding-top: calc(var(--space-8) + 80px);
	padding-bottom: var(--space-8);
	background: var(--color-ink);
	color: var(--color-white);
	overflow: hidden;
	isolation: isolate;
}
@media (min-width: 1024px) {
	.hero-cinema {
		padding-top: calc(var(--space-10) + 80px);
		padding-bottom: var(--space-10);
	}
}

/* Cinematic atmospheric background — radial glows + slow pulse */
.hero-cinema::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 80% 60% at 85% 0%, rgb(46 163 242 / 0.35) 0%, transparent 60%),
		radial-gradient(ellipse 70% 50% at 0% 100%, rgb(22 73 146 / 0.50) 0%, transparent 60%),
		linear-gradient(180deg, var(--color-ink) 0%, var(--color-navy-mid) 50%, var(--color-ink) 100%);
	z-index: -2;
	animation: cinema-pulse 14s var(--easing-in-out) infinite alternate;
}

/* Subtle film-grain texture */
.hero-cinema::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.04) 1px, transparent 0);
	background-size: 4px 4px;
	z-index: -1;
	mix-blend-mode: overlay;
	pointer-events: none;
}

@keyframes cinema-pulse {
	from { transform: scale(1.0); opacity: 0.95; }
	to   { transform: scale(1.05); opacity: 1.0; }
}
@media (prefers-reduced-motion: reduce) {
	.hero-cinema::before { animation: none; }
}

.hero-cinema__inner {
	display: grid;
	gap: var(--space-8);
	max-width: 1200px;
	margin: 0 auto;
	min-width: 0;
}
@media (min-width: 1024px) {
	.hero-cinema__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--space-10);
	}
}

.hero-cinema__intro {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	align-items: center;
	min-width: 0;
}
@media (min-width: 1024px) {
	/* Desktop: copy left (column 1), wizard right (column 2). */
	.hero-cinema__intro {
		grid-column: 1;
		grid-row: 1;
		text-align: left;
		align-items: flex-start;
		align-self: center;
	}
	.hero-cinema__inner > .wizard {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
	}
}

.hero-cinema__eyebrow {
	display: inline-block;
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-polar-blue);
	padding: var(--space-1) var(--space-3);
	border: 1px solid rgb(46 163 242 / 0.3);
	border-radius: var(--radius-pill);
	background: rgb(46 163 242 / 0.05);
}
@media (min-width: 640px) {
	.hero-cinema__eyebrow { font-size: var(--text-sm); }
}

.hero-cinema__title {
	color: var(--color-white);
	max-width: 18ch;
	margin: 0 auto;
	letter-spacing: -0.03em;
	line-height: 1.05;
	/* Tighter clamp than the base h1 — fits the half-width column on desktop */
	font-size: clamp(1.75rem, 3.5vw + 0.5rem, 3.75rem);
}
@media (min-width: 1024px) {
	.hero-cinema__title {
		margin: 0;
		max-width: 14ch;
	}
}

.hero-cinema__subtitle {
	font-size: var(--text-base);
	color: rgb(255 255 255 / 0.75);
	max-width: 50ch;
	margin: 0 auto;
	line-height: var(--leading-normal);
}
@media (min-width: 640px) {
	.hero-cinema__subtitle { font-size: var(--text-lg); }
}
@media (min-width: 1024px) {
	.hero-cinema__subtitle {
		margin: 0;
		max-width: 44ch;
	}
}

/* Intro action buttons (under subtitle) */
.hero-cinema__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-2);
	justify-content: center;
}
@media (min-width: 1024px) {
	.hero-cinema__actions {
		justify-content: flex-start;
	}
}

/* Intro at-a-glance stats (under action buttons) */
.hero-cinema__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
	padding-top: var(--space-5);
	margin-top: var(--space-2);
	border-top: 1px solid rgb(255 255 255 / 0.1);
	list-style: none;
	width: 100%;
	justify-content: center;
}
@media (min-width: 1024px) {
	.hero-cinema__stats {
		justify-content: flex-start;
	}
}

.hero-cinema__stats li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: center;
}
@media (min-width: 1024px) {
	.hero-cinema__stats li {
		align-items: flex-start;
	}
}

.hero-cinema__stats strong {
	font-size: var(--text-2xl);
	font-weight: var(--weight-extrabold);
	color: var(--color-polar-blue);
	letter-spacing: -0.02em;
	line-height: 1;
}

.hero-cinema__stats span {
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	color: rgb(255 255 255 / 0.75);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* === Wizard ============================================= */

.wizard {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	padding: var(--space-5);
	background: rgb(255 255 255 / 0.01);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: 1px solid rgb(255 255 255 / 0.08);
	border-radius: var(--radius-2xl);
	box-shadow: var(--shadow-hero), inset 0 1px 0 rgb(255 255 255 / 0.08);
	position: relative;
	min-width: 0;
}
@media (min-width: 640px) {
	.wizard { padding: var(--space-8); }
}

/* Stack all 4 steps in one grid cell so the wizard sizes to the tallest
   step (the result) and never jumps height between transitions. */
.wizard__steps {
	display: grid;
	grid-template-columns: 1fr;
}

.wizard__step {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	min-width: 0;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(6px);
	transition:
		opacity var(--duration-base) var(--easing-out),
		transform var(--duration-base) var(--easing-out),
		visibility 0s linear var(--duration-base);
}

.wizard__step.is-active {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
	transition:
		opacity var(--duration-base) var(--easing-out),
		transform var(--duration-base) var(--easing-out),
		visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
	.wizard__step,
	.wizard__step.is-active {
		transition: none;
		transform: none;
	}
}

.wizard__progress {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 0.65);
	margin-bottom: var(--space-2);
}
.wizard__progress-bar {
	flex: 1;
	height: 3px;
	background: rgb(255 255 255 / 0.08);
	border-radius: var(--radius-pill);
	overflow: hidden;
}
.wizard__progress-fill {
	height: 100%;
	background: var(--color-polar-blue);
	transition: width var(--duration-slower) var(--easing-out);
	border-radius: var(--radius-pill);
}

.wizard__back {
	background: transparent;
	border: 0;
	color: rgb(255 255 255 / 0.6);
	font-family: inherit;
	font-size: var(--text-sm);
	cursor: pointer;
	padding: var(--space-1) 0;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	align-self: flex-start;
	transition: color var(--duration-fast) var(--easing-out);
}
.wizard__back:hover { color: var(--color-white); }
.wizard__back:focus-visible {
	outline: 2px solid var(--color-polar-blue);
	outline-offset: 4px;
	border-radius: var(--radius-sm);
}

.wizard__question {
	font-size: var(--text-2xl);
	font-weight: var(--weight-extrabold);
	color: var(--color-white);
	letter-spacing: -0.025em;
	line-height: 1.15;
	margin: 0;
}
@media (min-width: 640px) {
	.wizard__question { font-size: var(--text-3xl); }
}

.wizard__options {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.wizard__options { grid-template-columns: repeat(2, 1fr); }
}
.wizard__options--three {
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.wizard__options--three { grid-template-columns: repeat(3, 1fr); }
}

.wizard__option {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	align-items: flex-start;
	text-align: left;
	padding: var(--space-4) var(--space-5);
	background: rgb(255 255 255 / 0.04);
	border: 1.5px solid rgba(46, 163, 242, 0.45);
	border-radius: var(--radius-lg);
	color: var(--color-white);
	font-family: inherit;
	cursor: pointer;
	/* Default state: polar-blue glow */
	box-shadow:
		0 0 0 1px rgba(46, 163, 242, 0.25),
		0 8px 18px -4px rgba(46, 163, 242, 0.30),
		0 16px 36px -10px rgba(46, 163, 242, 0.40);
	transition:
		background var(--duration-fast) var(--easing-out),
		border-color var(--duration-fast) var(--easing-out),
		box-shadow var(--duration-fast) var(--easing-out),
		transform var(--duration-fast) var(--easing-out);
	min-height: 84px;
}
.wizard__option:hover {
	background: rgb(252 198 64 / 0.10);
	border-color: var(--color-gold);
	transform: translateY(-2px);
	/* Hover state: gold glow */
	box-shadow:
		0 0 0 1px rgba(252, 198, 64, 0.40),
		0 8px 18px -4px rgba(252, 198, 64, 0.40),
		0 20px 40px -10px rgba(252, 198, 64, 0.50);
}
.wizard__option:hover .wizard__option-icon {
	color: var(--color-gold);
}
.wizard__option:hover .wizard__option-label {
	color: var(--color-gold);
}
.wizard__option:focus-visible {
	outline: 2px solid var(--color-polar-blue);
	outline-offset: 2px;
}
/* Selected state — when user has picked this option */
.wizard__option[aria-selected="true"],
.wizard__option.is-selected {
	background: rgb(252 198 64 / 0.18);
	border-color: var(--color-gold);
	box-shadow:
		0 0 0 1px var(--color-gold),
		0 8px 24px -4px rgba(252, 198, 64, 0.50),
		0 24px 48px -10px rgba(252, 198, 64, 0.55);
}
.wizard__option-label {
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	color: var(--color-white);
}
.wizard__option-detail {
	font-size: var(--text-xs);
	color: rgb(255 255 255 / 0.65);
	line-height: 1.4;
}

/* Icon variant — vertical card layout with a large polar-blue glyph at top.
   Used on step 1 (vehicle/home/business) where each option represents
   a distinct surface category and the icon doubles as a visual anchor. */
.wizard__option--icon {
	padding: var(--space-5) var(--space-4);
	min-height: 168px;
	gap: var(--space-2);
}
.wizard__option-icon {
	width: 40px;
	height: 40px;
	color: var(--color-polar-blue);
	margin-bottom: var(--space-2);
	flex-shrink: 0;
	transition: transform var(--duration-fast) var(--easing-out);
}
.wizard__option--icon:hover .wizard__option-icon {
	transform: scale(1.05);
}
@media (min-width: 640px) {
	.wizard__option--icon {
		min-height: 200px;
		padding: var(--space-6) var(--space-5);
	}
	.wizard__option-icon {
		width: 48px;
		height: 48px;
	}
}

/* "Why we ask" + Polar Promise proof strip — fills the bottom of steps 1-3
   so the wizard card doesn't read as empty while the user is choosing. */
.wizard__below {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-top: auto;
	padding-top: var(--space-5);
	border-top: 1px solid rgb(255 255 255 / 0.08);
}

.wizard__why {
	font-size: var(--text-sm);
	color: rgb(255 255 255 / 0.75);
	line-height: var(--leading-normal);
	margin: 0;
}
.wizard__why-label {
	display: inline;
	color: var(--color-polar-blue);
	font-weight: var(--weight-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: var(--text-xs);
	margin-right: var(--space-1);
}

.wizard__proof {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2);
}
@media (min-width: 640px) {
	.wizard__proof {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-3);
	}
}

.wizard__proof-item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.wizard__proof-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--color-polar-blue);
}

.wizard__proof-label {
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: 0.04em;
	color: rgb(255 255 255 / 0.85);
	line-height: 1.3;
}

/* Wizard result */
.wizard__step--result .wizard__result-grade {
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-polar-blue);
}
.wizard__result-title {
	font-size: var(--text-2xl);
	font-weight: var(--weight-extrabold);
	color: var(--color-white);
	letter-spacing: -0.025em;
	line-height: 1.15;
	margin: 0;
	max-width: 28ch;
}
@media (min-width: 640px) {
	.wizard__result-title { font-size: var(--text-3xl); }
}
.wizard__result-body {
	font-size: var(--text-base);
	color: rgb(255 255 255 / 0.8);
	margin: 0;
	max-width: 56ch;
	line-height: var(--leading-normal);
}
.wizard__result-specs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
	margin-top: var(--space-2);
}
@media (min-width: 640px) {
	.wizard__result-specs { grid-template-columns: repeat(4, 1fr); }
}
.wizard__result-spec {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--space-3);
	background: rgb(255 255 255 / 0.04);
	border: 1px solid rgb(255 255 255 / 0.08);
	border-radius: var(--radius-md);
}
.wizard__result-spec-value {
	font-size: var(--text-xl);
	font-weight: var(--weight-extrabold);
	color: var(--color-white);
	letter-spacing: -0.02em;
}
.wizard__result-spec-label {
	font-size: var(--text-xs);
	color: rgb(255 255 255 / 0.6);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.wizard__result-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-3);
}

/* === Trust ribbon (under hero) ========================= */

.trust-ribbon {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--space-6);
	padding: var(--space-5) 0 0;
	border-top: 1px solid rgb(255 255 255 / 0.08);
	margin-top: var(--space-8);
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
}
.trust-ribbon__item {
	font-weight: var(--weight-bold);
	font-size: var(--text-xs);
	color: rgb(255 255 255 / 0.7);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* === Polar Promise pillars ============================ */

.promise__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}
@media (min-width: 640px) {
	.promise__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}
@media (min-width: 1024px) {
	.promise__grid { grid-template-columns: repeat(4, 1fr); }
}
.promise__grid > * { min-width: 0; }

.promise__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
	background: linear-gradient(180deg, #ffffff 0%, #f6fafe 100%);
	border: 1px solid rgba(22, 73, 146, 0.12);
	border-radius: var(--radius-lg);
	position: relative;
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(2, 8, 36, 0.06),
		0 10px 22px -6px rgba(2, 8, 36, 0.14),
		0 26px 50px -12px rgba(46, 163, 242, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.92);
	transition:
		transform var(--duration-base) var(--easing-out),
		box-shadow var(--duration-base) var(--easing-out);
}
.promise__card:hover {
	transform: translateY(-4px);
	box-shadow:
		0 2px 4px rgba(2, 8, 36, 0.08),
		0 16px 30px -8px rgba(2, 8, 36, 0.18),
		0 36px 64px -12px rgba(46, 163, 242, 0.38),
		inset 0 1px 0 rgba(255, 255, 255, 0.96);
}
.promise__card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--gradient-accent);
}
.promise__card-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-pill);
	background: var(--gradient-accent);
	color: var(--color-white);
	font-size: var(--text-sm);
	font-weight: var(--weight-extrabold);
	box-shadow: 0 4px 12px -4px rgb(46 163 242 / 0.5);
}
.promise__card-title {
	font-size: var(--text-xl);
	color: var(--color-primary-navy);
	margin: 0;
}
.promise__card-body {
	color: var(--color-slate-700);
	font-size: var(--text-sm);
	margin: 0;
	flex: 1;
	line-height: var(--leading-normal);
}
.promise__card-stat {
	margin-top: var(--space-2);
	padding-top: var(--space-3);
	border-top: 2px solid var(--color-polar-blue);
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
}
.promise__card-stat-value {
	font-size: var(--text-2xl);
	font-weight: var(--weight-extrabold);
	color: var(--color-polar-blue);
	letter-spacing: -0.02em;
}
.promise__card-stat-label {
	font-size: var(--text-xs);
	color: var(--color-slate-500);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* === Service grid + cards ============================ */

.service-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}
@media (min-width: 640px) {
	.service-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.service-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}
.service-grid > * { min-width: 0; }

.service-card {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"icon  title"
		"desc  desc"
		"link  link";
	align-items: center;
	column-gap: var(--space-4);
	row-gap: var(--space-3);
	padding: var(--space-6);
	background:
		radial-gradient(ellipse 100% 80% at 80% 0%, rgb(46 163 242 / 0.18) 0%, transparent 60%),
		linear-gradient(160deg, var(--color-primary-navy) 0%, #0c2e5e 60%, #081f48 100%);
	border: 1px solid rgba(46, 163, 242, 0.22);
	border-radius: var(--radius-lg);
	color: var(--color-white);
	text-decoration: none;
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(2, 8, 36, 0.20),
		0 6px 14px rgba(2, 8, 36, 0.20),
		0 18px 32px -8px rgba(2, 8, 36, 0.30),
		0 32px 56px -12px rgba(46, 163, 242, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		inset 1px 0 0 rgba(46, 163, 242, 0.18);
	transition:
		transform var(--duration-base) var(--easing-out),
		box-shadow var(--duration-base) var(--easing-out),
		border-color var(--duration-base) var(--easing-out);
}
/* Polar-blue accent stripe at top — matches the location-result + your-shop cards */
.service-card::before {
	content: "";
	position: absolute; left: 0; right: 0; top: 0; height: 3px;
	background: linear-gradient(90deg, transparent 0%, rgba(46, 163, 242, 0.45) 20%, rgba(46, 163, 242, 0.85) 50%, rgba(46, 163, 242, 0.45) 80%, transparent 100%);
	opacity: 0.7;
	transition: opacity var(--duration-base) var(--easing-out);
	pointer-events: none;
}
.service-card:hover {
	transform: translateY(-5px);
	border-color: rgba(46, 163, 242, 0.50);
	text-decoration: none;
	color: var(--color-white);
	box-shadow:
		0 2px 4px rgba(2, 8, 36, 0.22),
		0 12px 24px rgba(2, 8, 36, 0.24),
		0 28px 48px -8px rgba(2, 8, 36, 0.36),
		0 48px 72px -12px rgba(46, 163, 242, 0.40),
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		inset 1px 0 0 rgba(46, 163, 242, 0.30);
}
.service-card:hover::before { opacity: 1; }

.service-card__icon {
	grid-area: icon;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Polar-blue background, white icon inside */
	background: linear-gradient(135deg, rgba(46, 163, 242, 0.95), rgba(22, 73, 146, 0.85));
	color: var(--color-white);
	border: 1px solid rgba(46, 163, 242, 0.60);
	border-radius: var(--radius-md);
	box-shadow:
		0 4px 12px -2px rgba(46, 163, 242, 0.50),
		0 2px 6px -1px rgba(2, 8, 36, 0.30),
		inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.service-card__title {
	grid-area: title;
	font-size: var(--text-xl);
	margin: 0;
	color: var(--color-white);
	font-weight: var(--weight-extrabold);
}
.service-card__desc {
	grid-area: desc;
	align-self: start;
	color: rgb(255 255 255 / 0.78);
	font-size: var(--text-base);
	margin: 0;
}
.service-card__link {
	grid-area: link;
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	color: var(--color-gold);
	font-weight: var(--weight-bold);
	margin-top: var(--space-2);
}
.service-card__link::after {
	content: "→";
	transition: transform var(--duration-fast) var(--easing-out);
}
.service-card:hover .service-card__link {
	color: #ffd76a;
}
.service-card:hover .service-card__link::after {
	transform: translateX(4px);
}

/* === Hiring "Open roles" cards — lift off the white bg (elevation + faint polar-blue glow).
   .role-card is styled inline per hiring page but never sets box-shadow, so this cascades in. === */
.role-card {
	background: linear-gradient(162deg, #ffffff 0%, #e4eefb 100%) !important;
	transition: transform 0.25s var(--easing-out, ease), box-shadow 0.25s var(--easing-out, ease);
	box-shadow:
		0 1px 2px rgba(2, 8, 36, 0.06),
		0 10px 24px -8px rgba(2, 8, 36, 0.14),
		0 24px 48px -16px rgba(46, 163, 242, 0.24);
}
.role-card:hover {
	transform: translateY(-4px);
	box-shadow:
		0 2px 4px rgba(2, 8, 36, 0.08),
		0 18px 36px -10px rgba(2, 8, 36, 0.20),
		0 36px 64px -18px rgba(46, 163, 242, 0.42);
}
/* eyebrow → polar-blue pill badge for a pop of color */
.role-card__type {
	display: inline-block !important;
	background: var(--color-polar-blue, #2ea3f2) !important;
	color: #ffffff !important;
	padding: 4px 12px !important;
	border-radius: 999px !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.06em !important;
	margin-bottom: 0.85rem !important;
}

/* === FAQ accordion =================================== */

.faq {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: 880px;
	margin: 0 auto;
}
.faq__item {
	background: var(--color-white);
	border: 1px solid var(--color-slate-100);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: box-shadow var(--duration-base) var(--easing-out);
}
.faq__item[open] { box-shadow: var(--shadow-md); }
.faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-5) var(--space-6);
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	color: var(--color-primary-navy);
	cursor: pointer;
	list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::marker { display: none; }
.faq__icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-pill);
	background: var(--color-ice);
	color: var(--color-primary-navy);
	font-weight: var(--weight-bold);
	transition: transform var(--duration-base) var(--easing-out);
}
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__answer {
	padding: 0 var(--space-6) var(--space-5);
	color: var(--color-slate-700);
	line-height: var(--leading-normal);
}

/* === Locations preview =============================== */

.locations-preview {
	display: grid;
	gap: var(--space-8);
}
@media (min-width: 1024px) {
	.locations-preview {
		grid-template-columns: 1.5fr 1fr;
		align-items: center;
	}
}
.locations-preview > * { min-width: 0; }

.locations-preview__map {
	position: relative;
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, var(--color-ice) 0%, var(--color-white) 100%);
	border: 3px solid var(--color-primary-navy);
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(2, 8, 36, 0.08),
		0 12px 24px rgba(2, 8, 36, 0.10),
		0 28px 48px -10px rgba(2, 8, 36, 0.16),
		0 40px 72px -16px rgba(46, 163, 242, 0.22),
		inset 0 0 0 1px rgba(46, 163, 242, 0.18);
}
.locations-preview__map::before {
	content: "";
	position: absolute; left: 0; right: 0; top: 0; height: 3px;
	background: linear-gradient(90deg, transparent 0%, rgba(46, 163, 242, 0.50) 20%, rgba(46, 163, 242, 0.85) 50%, rgba(46, 163, 242, 0.50) 80%, transparent 100%);
	z-index: 2;
	pointer-events: none;
}
.locations-preview__map-cta {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 22px;
	background: var(--color-gold);
	color: var(--color-primary-navy);
	border-radius: var(--radius-md);
	font-weight: var(--weight-bold);
	font-size: var(--text-sm);
	text-decoration: none;
	box-shadow:
		0 4px 12px -2px rgba(2, 8, 36, 0.30),
		0 8px 20px -4px rgba(252, 198, 64, 0.40);
	transition: background 200ms, transform 200ms;
	z-index: 2;
	white-space: nowrap;
}
.locations-preview__map-cta:hover {
	background: #ffd76a;
	color: var(--color-primary-navy);
	transform: translateX(-50%) translateY(-2px);
	text-decoration: none;
}
.locations-preview__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.location-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-5);
	background: linear-gradient(180deg, #ffffff 0%, #f4f8fd 100%);
	/* Thicker, more defined navy border (matches the map frame) */
	border: 3px solid var(--color-primary-navy);
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(2, 8, 36, 0.08),
		0 6px 14px rgba(2, 8, 36, 0.12),
		0 16px 32px -4px rgba(2, 8, 36, 0.16),
		0 32px 56px -12px rgba(2, 8, 36, 0.20),
		0 48px 80px -16px rgba(46, 163, 242, 0.24),
		inset 0 0 0 1px rgba(46, 163, 242, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.95);
	transition:
		transform var(--duration-base) var(--easing-out),
		box-shadow var(--duration-base) var(--easing-out),
		border-color var(--duration-base) var(--easing-out);
}
/* Polar-blue accent stripe on top — matches the location-result + your-shop cards */
.location-card::before {
	content: "";
	position: absolute; left: 0; right: 0; top: 0; height: 4px;
	background: linear-gradient(90deg, transparent 0%, rgba(46, 163, 242, 0.55) 20%, rgba(46, 163, 242, 1) 50%, rgba(46, 163, 242, 0.55) 80%, transparent 100%);
	opacity: 0.85;
	transition: opacity var(--duration-base) var(--easing-out);
	pointer-events: none;
	z-index: 1;
}
.location-card:hover {
	transform: translateY(-6px);
	border-color: var(--color-polar-blue);
	text-decoration: none;
	color: inherit;
	box-shadow:
		0 2px 4px rgba(2, 8, 36, 0.10),
		0 10px 20px rgba(2, 8, 36, 0.14),
		0 24px 44px rgba(2, 8, 36, 0.20),
		0 48px 72px -10px rgba(2, 8, 36, 0.26),
		0 68px 100px -16px rgba(46, 163, 242, 0.38),
		inset 0 0 0 1px rgba(46, 163, 242, 0.40),
		inset 0 1px 0 rgba(255, 255, 255, 1);
}
.location-card:hover::before { opacity: 1; }
.location-card__name {
	font-size: var(--text-xl);
	color: var(--color-primary-navy);
	margin: 0;
}
.location-card__address {
	font-size: var(--text-sm);
	color: var(--color-slate-700);
	margin: 0;
}
.location-card__hours {
	font-size: var(--text-sm);
	color: var(--color-success);
	font-weight: var(--weight-bold);
	margin: 0;
}
.location-card__link {
	margin-top: var(--space-2);
	color: var(--color-polar-blue);
	font-weight: var(--weight-bold);
	font-size: var(--text-sm);
}

/* === Before/after slider ============================= */

.before-after {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	aspect-ratio: 4 / 3;
	user-select: none;
	box-shadow: var(--shadow-md);
	background: var(--color-slate-900);
}
.before-after__before-wrap,
.before-after__after-wrap {
	position: absolute;
	inset: 0;
	width: 100%;
	overflow: hidden;
}
.before-after__after-wrap { width: 50%; }
.before-after__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}
.before-after__after-wrap > .before-after__img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	max-width: 100%;
	height: 100%;
}
.before-after__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 3px;
	background: var(--color-white);
	cursor: ew-resize;
	z-index: 2;
	transform: translateX(-50%);
}
.before-after__handle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	background: var(--color-white);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-md);
}
.before-after__handle::after {
	content: "⇔";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--color-primary-navy);
	font-weight: var(--weight-bold);
	font-size: var(--text-base);
	z-index: 1;
}
.before-after__label {
	position: absolute;
	bottom: var(--space-4);
	padding: var(--space-1) var(--space-3);
	background: rgb(2 8 36 / 0.7);
	color: var(--color-white);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	border-radius: var(--radius-md);
	z-index: 3;
}
.before-after__label--before { left: var(--space-4); }
.before-after__label--after { right: var(--space-4); }

.before-after-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}
@media (min-width: 768px) {
	.before-after-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}
.before-after-grid > * { min-width: 0; }

/* === Aggregate rating badge ========================== */

.rating-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-5);
	background: var(--color-ice);
	border-radius: var(--radius-pill);
	font-weight: var(--weight-bold);
}
.rating-badge__stars {
	color: var(--color-gold);
	font-size: var(--text-lg);
	letter-spacing: 2px;
}
.rating-badge__score {
	color: var(--color-primary-navy);
	font-size: var(--text-xl);
}
.rating-badge__count {
	color: var(--color-slate-700);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
}

/* === Reviews grid + card ============================= */

.reviews-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}
@media (min-width: 768px) {
	.reviews-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}
.reviews-grid > * { min-width: 0; }

.review-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
	background: linear-gradient(180deg, #ffffff 0%, #f4f8fd 100%);
	border: 1.5px solid rgba(22, 73, 146, 0.14);
	border-radius: var(--radius-lg);
	box-shadow:
		0 1px 2px rgba(2, 8, 36, 0.06),
		0 8px 18px -4px rgba(2, 8, 36, 0.14),
		0 24px 48px -10px rgba(46, 163, 242, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.review-card__stars {
	color: var(--color-gold);
	font-size: var(--text-xl);
	font-weight: 900;
	letter-spacing: 3px;
	text-shadow: 0 1px 2px rgba(2, 8, 36, 0.10);
}
/* On dark sections, make stars even punchier with stronger contrast */
.section--navy-deep .review-card__stars {
	font-size: var(--text-2xl);
	letter-spacing: 4px;
}
.section--navy-deep .rating-badge {
	background: rgba(255, 255, 255, 0.95);
	box-shadow:
		0 4px 12px -2px rgba(2, 8, 36, 0.30),
		0 12px 28px -6px rgba(252, 198, 64, 0.40);
}
.section--navy-deep .rating-badge__stars {
	font-size: var(--text-xl);
	letter-spacing: 3px;
}
.review-card__quote {
	font-size: var(--text-base);
	color: var(--color-body);
	flex: 1;
	line-height: var(--leading-normal);
	margin: 0;
}
.review-card__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-slate-100);
}
.review-card__author {
	font-weight: var(--weight-bold);
	color: var(--color-primary-navy);
}
.review-card__location {
	font-size: var(--text-sm);
	color: var(--color-slate-500);
}

/* Reviews sit in a navy-deep section but the cards are white — keep the
   quote <p> dark/readable (overrides .section--navy-deep p { color: #fff }). */
.section--navy-deep .review-card__quote { color: var(--color-body); }

/* Reviews marquee — continuous right-to-left auto-scroll over a duplicated set */
.reviews-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.reviews-marquee__track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	animation: reviews-marquee-scroll 48s linear infinite;
}
.reviews-marquee__track .review-card {
	flex: 0 0 clamp(280px, 78vw, 380px);
	margin-right: var(--space-6);
}
.reviews-marquee:hover .reviews-marquee__track,
.reviews-marquee:focus-within .reviews-marquee__track { animation-play-state: paused; }
@keyframes reviews-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.reviews-marquee { -webkit-mask-image: none; mask-image: none; }
	.reviews-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
	.reviews-marquee__track .review-card { margin-right: 0; }
}

/* === Resources / blog cards ========================== */

.resources-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}
@media (min-width: 768px) {
	.resources-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}
.resources-grid > * { min-width: 0; }

/* === Blog / Resources cards — modern compact (2026-06-02 redesign) ===
   No mandatory hero-image area; cards are full-bleed body with a colored top accent
   stripe + glow + category-colored chip. data-category attribute drives the color.
   ============================================================================ */
.blog-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5) var(--space-5) var(--space-5);
	background: var(--color-white);
	border-radius: var(--radius-lg);
	border: 1px solid rgba(22, 73, 146, 0.10);
	box-shadow: 0 2px 8px rgba(2, 8, 36, 0.05);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transition:
		transform var(--duration-base, 200ms) var(--easing-out, ease-out),
		box-shadow var(--duration-base, 200ms) var(--easing-out, ease-out),
		border-color var(--duration-base, 200ms) var(--easing-out, ease-out);
}
/* Colored top accent stripe — 4px, full width */
.blog-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--color-polar-blue);
}
.blog-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(2, 8, 36, 0.12), 0 4px 12px rgba(2, 8, 36, 0.06);
	border-color: rgba(22, 73, 146, 0.18);
	text-decoration: none;
	color: inherit;
}
/* Legacy image placeholder — hide it (was a giant empty 16:9 div) */
.blog-card__image {
	display: none;
}
/* When a real <img> IS inside the .blog-card__image div, show it as a compact 16:9 thumb */
.blog-card__image:has(img) {
	display: block;
	aspect-ratio: 16 / 9;
	margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0;
	background: linear-gradient(135deg, var(--color-ice) 0%, var(--color-white) 100%);
	overflow: hidden;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.blog-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.blog-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	flex: 1;
	padding: 0; /* parent .blog-card now provides padding */
}
.blog-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	margin-bottom: var(--space-2);
}
.blog-card__category {
	display: inline-block;
	align-self: flex-start;
	padding: 4px var(--space-2);
	background: var(--color-ice);
	color: var(--color-polar-blue);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide, 0.06em);
	border-radius: var(--radius-sm);
}
.blog-card__date {
	color: var(--color-slate-500);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	white-space: nowrap;
}
.blog-card__title {
	font-size: var(--text-lg);
	margin: 0;
	color: var(--color-primary-navy);
	line-height: var(--leading-snug, 1.3);
}
.blog-card__teaser {
	font-size: var(--text-sm);
	color: var(--color-slate-700);
	flex: 1;
	margin: 0;
	line-height: var(--leading-normal, 1.5);
}

/* === Category color assignments — drives the top stripe + chip + hover glow ===
   Each category gets a brand-safe color. Markup uses data-category="comparison" etc. */
.blog-card[data-category="comparison"]::before { background: #2ea3f2; }
.blog-card[data-category="comparison"] .blog-card__category { background: rgba(46, 163, 242, 0.12); color: #1976d2; }
.blog-card[data-category="comparison"]:hover { box-shadow: 0 12px 32px rgba(46, 163, 242, 0.22), 0 4px 12px rgba(46, 163, 242, 0.12); }

.blog-card[data-category="state-law"]::before,
.blog-card[data-category="tint-laws"]::before { background: #fcc640; }
.blog-card[data-category="state-law"] .blog-card__category,
.blog-card[data-category="tint-laws"] .blog-card__category { background: rgba(252, 198, 64, 0.18); color: #c89200; }
.blog-card[data-category="state-law"]:hover,
.blog-card[data-category="tint-laws"]:hover { box-shadow: 0 12px 32px rgba(252, 198, 64, 0.28), 0 4px 12px rgba(252, 198, 64, 0.14); }

.blog-card[data-category="tech-guide"]::before,
.blog-card[data-category="reference"]::before { background: #7c4dff; }
.blog-card[data-category="tech-guide"] .blog-card__category,
.blog-card[data-category="reference"] .blog-card__category { background: rgba(124, 77, 255, 0.12); color: #5e35b1; }
.blog-card[data-category="tech-guide"]:hover,
.blog-card[data-category="reference"]:hover { box-shadow: 0 12px 32px rgba(124, 77, 255, 0.22), 0 4px 12px rgba(124, 77, 255, 0.10); }

.blog-card[data-category="paint-protection"]::before,
.blog-card[data-category="window-tint"]::before { background: #ff9533; }
.blog-card[data-category="paint-protection"] .blog-card__category,
.blog-card[data-category="window-tint"] .blog-card__category { background: rgba(255, 149, 51, 0.14); color: #e07b1f; }
.blog-card[data-category="paint-protection"]:hover,
.blog-card[data-category="window-tint"]:hover { box-shadow: 0 12px 32px rgba(255, 149, 51, 0.22), 0 4px 12px rgba(255, 149, 51, 0.12); }

.blog-card[data-category="ev-owners"]::before { background: #00bfa5; }
.blog-card[data-category="ev-owners"] .blog-card__category { background: rgba(0, 191, 165, 0.12); color: #00897b; }
.blog-card[data-category="ev-owners"]:hover { box-shadow: 0 12px 32px rgba(0, 191, 165, 0.22), 0 4px 12px rgba(0, 191, 165, 0.10); }

.blog-card[data-category="residential"]::before { background: #26c281; }
.blog-card[data-category="residential"] .blog-card__category { background: rgba(38, 194, 129, 0.12); color: #16965e; }
.blog-card[data-category="residential"]:hover { box-shadow: 0 12px 32px rgba(38, 194, 129, 0.22), 0 4px 12px rgba(38, 194, 129, 0.10); }

.blog-card[data-category="commercial"]::before { background: #455a64; }
.blog-card[data-category="commercial"] .blog-card__category { background: rgba(69, 90, 100, 0.12); color: #37474f; }
.blog-card[data-category="commercial"]:hover { box-shadow: 0 12px 32px rgba(69, 90, 100, 0.22), 0 4px 12px rgba(69, 90, 100, 0.10); }

.blog-card[data-category="warranty"]::before,
.blog-card[data-category="care--warranty"]::before { background: #e63946; }
.blog-card[data-category="warranty"] .blog-card__category,
.blog-card[data-category="care--warranty"] .blog-card__category { background: rgba(230, 57, 70, 0.12); color: #c52d3a; }
.blog-card[data-category="warranty"]:hover,
.blog-card[data-category="care--warranty"]:hover { box-shadow: 0 12px 32px rgba(230, 57, 70, 0.22), 0 4px 12px rgba(230, 57, 70, 0.10); }

.blog-card[data-category="buyers-guide"]::before { background: #164992; }
.blog-card[data-category="buyers-guide"] .blog-card__category { background: rgba(22, 73, 146, 0.12); color: #164992; }
.blog-card[data-category="buyers-guide"]:hover { box-shadow: 0 12px 32px rgba(22, 73, 146, 0.22), 0 4px 12px rgba(22, 73, 146, 0.10); }

/* === Franchise band ================================= */

.franchise-band {
	padding: var(--space-16) 0;
	background: var(--color-off-white);
	text-align: center;
}
.franchise-band__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	max-width: 640px;
	margin: 0 auto;
}
.franchise-band__eyebrow {
	color: var(--color-polar-blue);
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	font-size: var(--text-sm);
}
.franchise-band__title {
	font-size: var(--text-3xl);
	color: var(--color-primary-navy);
	margin: 0;
}
.franchise-band__desc {
	color: var(--color-slate-700);
	margin: 0;
}

/* === Bento gallery (Real Work) ====================== */

.gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: 180px;
	grid-auto-flow: dense;
	gap: var(--space-3);
}
@media (min-width: 768px) {
	.gallery {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 220px;
		gap: var(--space-4);
	}
}

.gallery__tile {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-slate-900);
	text-decoration: none;
	display: block;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--duration-base) var(--easing-out),
	            transform var(--duration-base) var(--easing-out);
}
.gallery__tile:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
	text-decoration: none;
}

.gallery__tile-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--duration-slower) var(--easing-out);
}
.gallery__tile:hover .gallery__tile-img {
	transform: scale(1.06);
}

.gallery__tile-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgb(2 8 36 / 0.78) 100%);
	pointer-events: none;
}

.gallery__tile-tag {
	position: absolute;
	bottom: var(--space-3);
	left: var(--space-3);
	color: var(--color-white);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: var(--space-1) var(--space-2);
	background: rgb(2 8 36 / 0.5);
	border-radius: var(--radius-sm);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.gallery__tile-location {
	position: absolute;
	bottom: var(--space-3);
	right: var(--space-3);
	color: rgb(255 255 255 / 0.9);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	padding: var(--space-1) var(--space-2);
	background: rgb(2 8 36 / 0.4);
	border-radius: var(--radius-sm);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/* Bento sizing modifiers — only applied at desktop (4-col) breakpoint */
@media (min-width: 768px) {
	.gallery__tile--big {
		grid-column: span 2;
		grid-row: span 2;
	}
	.gallery__tile--tall {
		grid-row: span 2;
	}
	.gallery__tile--wide {
		grid-column: span 2;
	}
}

/* === Mobile nav + sticky header ===================== */

.primary-nav.is-open .primary-nav__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding: var(--space-5);
	background: var(--color-white);
	box-shadow: var(--shadow-lg);
	border-top: 1px solid var(--color-slate-100);
}
.site-header.is-scrolled {
	background: var(--color-white);
	box-shadow: var(--shadow-md);
}

/* === Find-a-Location modal ============================ */

.location-modal {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--duration-base) var(--easing-out);
}
.location-modal[data-open] {
	opacity: 1;
	pointer-events: auto;
}
.location-modal[hidden] {
	display: none;
}

.location-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(2 8 36 / 0.65);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.location-modal__panel {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: 90vh;
	background: var(--color-white);
	border-radius: var(--radius-2xl);
	box-shadow: var(--shadow-xl);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform: translateY(20px) scale(0.96);
	transition: transform var(--duration-base) var(--easing-out);
}
.location-modal[data-open] .location-modal__panel {
	transform: translateY(0) scale(1);
}

.location-modal__head {
	padding: var(--space-6) var(--space-6) var(--space-3);
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
}
.location-modal__head > div { flex: 1; min-width: 0; }
.location-modal__title {
	font-size: var(--text-xl);
	color: var(--color-primary-navy);
	margin: 0 0 var(--space-1);
}
.location-modal__subtitle {
	font-size: var(--text-sm);
	color: var(--color-slate-700);
	margin: 0;
}
.location-modal__close {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-slate-100);
	color: var(--color-slate-700);
	border-radius: var(--radius-pill);
	flex-shrink: 0;
	transition: background var(--duration-fast) var(--easing-out), color var(--duration-fast) var(--easing-out);
}
.location-modal__close:hover {
	background: var(--color-slate-200);
	color: var(--color-primary-navy);
}

.location-modal__form {
	padding: 0 var(--space-6);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--space-2);
}

.location-modal__input {
	width: 100%;
	min-width: 0;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-slate-200);
	border-radius: var(--radius-md);
	font-size: var(--text-base);
	font-family: inherit;
	background: var(--color-white);
	color: var(--color-body);
	transition: border-color var(--duration-fast) var(--easing-out), box-shadow var(--duration-fast) var(--easing-out);
}
.location-modal__input:focus {
	outline: none;
	border-color: var(--color-polar-blue);
	box-shadow: 0 0 0 3px rgb(46 163 242 / 0.2);
}

.location-modal__submit {
	min-height: 44px;
	white-space: nowrap;
}

.location-modal__geo-btn {
	grid-column: 1 / -1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	background: var(--color-ice);
	color: var(--color-primary-navy);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	font-family: inherit;
	cursor: pointer;
	border: 1px dashed var(--color-polar-blue);
	transition: background var(--duration-fast) var(--easing-out);
}
.location-modal__geo-btn:hover {
	background: rgb(46 163 242 / 0.12);
}

.location-modal__status {
	padding: var(--space-3) var(--space-6) 0;
	font-size: var(--text-sm);
	color: var(--color-slate-500);
	min-height: 1.2em;
}

.location-modal__results {
	list-style: none;
	padding: var(--space-3) var(--space-6) var(--space-6);
	margin: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	flex: 1;
}

/* === Compact horizontal location card (2026-05-20) ====================
   Layout: square photo on the LEFT (180px), content column on the RIGHT.
   On mobile, stack: photo on top (200px tall), content below.
   Total desktop card height ~200px (down from ~700px). */
.location-result {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: var(--space-4);
	padding: var(--space-4);
	background: linear-gradient(180deg, #ffffff 0%, #f4f8fd 100%);
	/* Thicker, more defined navy border (matches map + location-card treatment) */
	border: 3px solid var(--color-primary-navy);
	border-radius: var(--radius-lg);
	box-shadow:
		0 1px 2px rgba(2, 8, 36, 0.08),
		0 6px 14px rgba(2, 8, 36, 0.12),
		0 16px 32px -4px rgba(2, 8, 36, 0.16),
		0 32px 56px -12px rgba(2, 8, 36, 0.20),
		0 48px 80px -16px rgba(46, 163, 242, 0.24),
		inset 0 0 0 1px rgba(46, 163, 242, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.95);
	transition:
		transform 320ms var(--easing-out),
		box-shadow 320ms var(--easing-out),
		border-color 320ms var(--easing-out);
	position: relative;
	overflow: hidden;
}
/* Brighter polar-blue accent stripe on top — visible by default, brightens on hover */
.location-result::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 4px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(46, 163, 242, 0.55) 20%,
		rgba(46, 163, 242, 1) 50%,
		rgba(46, 163, 242, 0.55) 80%,
		transparent 100%
	);
	opacity: 0.85;
	transition: opacity 320ms var(--easing-out);
	pointer-events: none;
	z-index: 2;
}
.location-result:hover {
	transform: translateY(-6px);
	border-color: var(--color-polar-blue);
	box-shadow:
		0 2px 4px rgba(2, 8, 36, 0.10),
		0 10px 20px rgba(2, 8, 36, 0.14),
		0 24px 44px rgba(2, 8, 36, 0.20),
		0 48px 72px -10px rgba(2, 8, 36, 0.26),
		0 68px 100px -16px rgba(46, 163, 242, 0.38),
		inset 0 0 0 1px rgba(46, 163, 242, 0.40),
		inset 0 1px 0 rgba(255, 255, 255, 1);
}
.location-result:hover::before {
	opacity: 1;
}

/* Stack vertically on narrow screens */
@media (max-width: 640px) {
	.location-result {
		grid-template-columns: 1fr;
	}
}

/* Square thumbnail on the left (or full-width banner on mobile) — given
   a subtle inner ring + crisp shadow so the photo feels inset into the
   card rather than just sitting flat. */
.location-result__photo {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-md);
	object-fit: cover;
	display: block;
	background: linear-gradient(135deg, var(--color-primary-navy), #0c2e5e);
	align-self: start;
	box-shadow:
		inset 0 0 0 1px rgba(22, 73, 146, 0.18),
		0 4px 10px -2px rgba(2, 8, 36, 0.20);
}
@media (max-width: 640px) {
	.location-result__photo {
		aspect-ratio: 16 / 9;
	}
}

/* "Coming soon" placeholder — Polar Tint logo + label on dark gradient */
.location-result__photo--placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	background:
		radial-gradient(ellipse at 50% 40%, rgba(46, 163, 242, 0.22), transparent 65%),
		linear-gradient(135deg, var(--color-primary-navy) 0%, #0c2e5e 60%, #081f48 100%);
	padding: var(--space-4);
}
.location-result__photo-logo {
	width: 75%;
	max-width: 130px;
	height: auto;
	opacity: 0.95;
}
.location-result__photo-label {
	color: var(--color-polar-blue);
	font-size: 0.625rem;
	font-weight: var(--weight-bold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* Content column — tight grid that flows down */
.location-result__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.location-result__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
}
.location-result__name {
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	color: var(--color-primary-navy);
	margin: 0;
	line-height: 1.2;
}
.location-result__distance {
	font-size: var(--text-xs);
	font-weight: var(--weight-extrabold);
	color: var(--color-polar-blue);
	white-space: nowrap;
}
.location-result__areas {
	font-size: var(--text-xs);
	color: var(--color-slate-700);
	margin: 0;
	line-height: 1.4;
}
.location-result__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
	font-size: var(--text-xs);
	color: var(--color-slate-500);
	margin-top: 2px;
}
.location-result__rating {
	color: var(--color-slate-700);
	font-weight: var(--weight-bold);
}
.location-result__rating-star {
	color: var(--color-gold);
}
.location-result__hours {
	color: var(--color-success);
	font-weight: var(--weight-bold);
}
.location-result__actions {
	display: flex;
	gap: var(--space-2);
	margin-top: 6px;
	flex-wrap: wrap;
}

.location-modal__none {
	padding: var(--space-4) var(--space-6) var(--space-6);
	text-align: center;
	font-size: var(--text-base);
	color: var(--color-slate-700);
	margin: 0;
}
.location-modal__none a {
	color: var(--color-polar-blue);
	font-weight: var(--weight-bold);
}

body.is-modal-open {
	overflow: hidden;
}

@media (max-width: 640px) {
	.location-modal {
		padding: 0;
		align-items: stretch;
	}
	.location-modal__panel {
		max-width: 100%;
		max-height: 100vh;
		border-radius: 0;
	}
	.location-modal__form {
		grid-template-columns: 1fr;
	}
	.location-modal__submit {
		grid-column: 1 / -1;
	}
}

/* === /locations/ page — inline finder ================ */

/* Dark navy "pill" card around the finder — sets it apart from the
   ice-blue section background so the search action reads as the
   primary entry point above the locations grid. */
.locations-finder {
	max-width: 920px;
	margin: 0 auto var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	background:
		radial-gradient(ellipse at 80% 0%, rgba(46, 163, 242, 0.22), transparent 60%),
		linear-gradient(135deg, var(--color-primary-navy) 0%, #0c2e5e 60%, #081f48 100%);
	color: var(--color-white);
	padding: var(--space-7) var(--space-8);
	border-radius: var(--radius-lg);
	box-shadow:
		0 24px 56px -20px rgba(22, 73, 146, 0.45),
		0 0 0 1px rgba(255, 255, 255, 0.06) inset;
	position: relative;
	overflow: hidden;
}
.locations-finder::before {
	/* Subtle polar-blue accent stripe along the top edge */
	content: "";
	position: absolute;
	top: 0;
	left: var(--space-8);
	right: var(--space-8);
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--color-polar-blue), transparent);
	border-radius: 0 0 2px 2px;
	pointer-events: none;
}
@media (min-width: 640px) {
	.locations-finder {
		padding: var(--space-8) var(--space-10);
		gap: var(--space-5);
	}
}
.locations-finder__label {
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-polar-blue);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}
.locations-finder__label::before {
	content: "";
	width: 24px;
	height: 2px;
	background: var(--color-polar-blue);
	border-radius: 2px;
}
.locations-finder__controls {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2);
}
@media (min-width: 640px) {
	.locations-finder__controls {
		grid-template-columns: 1fr auto auto;
		gap: var(--space-3);
	}
}
.locations-finder__input {
	padding: var(--space-3) var(--space-4);
	min-height: 52px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--radius-md);
	font-size: var(--text-base);
	font-family: inherit;
	background: rgba(255, 255, 255, 0.06);
	color: var(--color-white);
	transition:
		border-color var(--duration-fast) var(--easing-out),
		box-shadow var(--duration-fast) var(--easing-out),
		background var(--duration-fast) var(--easing-out);
}
.locations-finder__input::placeholder {
	color: rgba(255, 255, 255, 0.45);
}
.locations-finder__input:focus {
	outline: none;
	border-color: var(--color-polar-blue);
	background: rgba(255, 255, 255, 0.10);
	box-shadow: 0 0 0 3px rgb(46 163 242 / 0.28);
}
.locations-finder__submit {
	white-space: nowrap;
	min-height: 52px;
}
.locations-finder__geo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	white-space: nowrap;
	min-height: 52px;
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.22);
	color: var(--color-white);
}
.locations-finder__geo:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.32);
	color: var(--color-white);
}
.locations-finder__status {
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.70);
	min-height: 1.2em;
	text-align: center;
}
.locations-finder__none {
	text-align: center;
	font-size: var(--text-base);
	color: var(--color-slate-700);
	margin-top: var(--space-6);
}
.locations-finder__none a {
	color: var(--color-polar-blue);
	font-weight: var(--weight-bold);
}

.locations-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}
@media (min-width: 768px) {
	.locations-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-6);
	}
}
.locations-grid > * { min-width: 0; }

/* Page-context location-result tweaks (richer than modal). */
.locations-grid .location-result {
	background: var(--color-white);
}
.location-result__address {
	font-size: var(--text-xs);
	color: var(--color-slate-700);
	margin: 0;
	line-height: 1.4;
}
.location-result__phone {
	margin: 0;
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
}
.location-result__phone a {
	color: var(--color-polar-blue);
	text-decoration: none;
}
.location-result__phone a:hover {
	color: var(--color-primary-navy);
}

/* === Filter chips (gallery / reviews) =============== */

.filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	justify-content: center;
	margin-bottom: var(--space-8);
}
.filter-chip {
	padding: var(--space-2) var(--space-4);
	background: var(--color-white);
	border: 1px solid var(--color-slate-200);
	border-radius: var(--radius-pill);
	font-family: inherit;
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	color: var(--color-slate-700);
	cursor: pointer;
	transition: background var(--duration-fast) var(--easing-out), border-color var(--duration-fast) var(--easing-out), color var(--duration-fast) var(--easing-out);
}
.filter-chip:hover {
	background: var(--color-ice);
	border-color: var(--color-polar-blue);
	color: var(--color-primary-navy);
}
.filter-chip.is-active {
	background: var(--gradient-accent);
	border-color: transparent;
	color: var(--color-white);
}

/* === Gallery grid ==================================== */

.gallery-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}
@media (min-width: 640px) {
	.gallery-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}
@media (min-width: 1024px) {
	.gallery-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}
.gallery-grid > * { min-width: 0; }

.gallery-card {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-slate-900);
	aspect-ratio: 4 / 3;
	transition: transform var(--duration-base) var(--easing-out);
}
.gallery-card:hover { transform: translateY(-2px); }
.gallery-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.gallery-card__caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: var(--space-4) var(--space-5);
	background: linear-gradient(180deg, rgb(2 8 36 / 0) 0%, rgb(2 8 36 / 0.85) 100%);
	color: var(--color-white);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.gallery-card__tag {
	display: inline-block;
	align-self: flex-start;
	padding: 2px var(--space-2);
	background: var(--color-polar-blue);
	color: var(--color-white);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: var(--radius-sm);
}
.gallery-card__title {
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	color: var(--color-white);
}
.gallery-empty {
	text-align: center;
	font-size: var(--text-base);
	color: var(--color-slate-700);
	padding: var(--space-12) var(--space-4);
}

/* === Browse-by-state grid ============================ */

.state-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}
@media (min-width: 768px) {
	.state-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-6);
	}
}
.state-grid > * { min-width: 0; }

.state-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-6);
	background:
		radial-gradient(ellipse at 20% 0%, rgba(46, 163, 242, 0.18), transparent 55%),
		linear-gradient(160deg, #1d5aa6 0%, var(--color-primary-navy) 45%, #0c2e5e 100%);
	border: 1px solid rgba(46, 163, 242, 0.22);
	border-radius: var(--radius-lg);
	color: var(--color-white);
	box-shadow:
		0 1px 2px rgba(2, 8, 36, 0.18),
		0 8px 16px -4px rgba(2, 8, 36, 0.20),
		0 24px 48px -12px rgba(2, 8, 36, 0.32),
		0 36px 64px -16px rgba(46, 163, 242, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
	transition: transform 320ms var(--easing-out, ease-out), box-shadow 320ms var(--easing-out, ease-out);
}
.state-card:hover {
	transform: translateY(-3px);
	box-shadow:
		0 2px 4px rgba(2, 8, 36, 0.22),
		0 12px 24px -4px rgba(2, 8, 36, 0.28),
		0 32px 56px -12px rgba(2, 8, 36, 0.38),
		0 44px 72px -16px rgba(46, 163, 242, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.state-card__head {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}
.state-card__flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: linear-gradient(135deg, var(--color-polar-blue) 0%, #1e7fc7 100%);
	color: var(--color-white);
	font-weight: var(--weight-extrabold);
	border-radius: var(--radius-md);
	font-size: var(--text-base);
	letter-spacing: 0.05em;
	flex-shrink: 0;
	box-shadow:
		0 4px 8px rgba(46, 163, 242, 0.30),
		inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.state-card__flag--muted {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--text-2xl);
	box-shadow: none;
}
.state-card__name {
	font-size: var(--text-xl);
	color: var(--color-white);
	margin: 0;
	font-weight: var(--weight-extrabold);
}
.state-card__count {
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.78);
	margin: 0;
}
.state-card__locations {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.state-card__locations li a {
	display: block;
	padding: var(--space-3) var(--space-4);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: var(--radius-md);
	color: var(--color-white);
	font-weight: var(--weight-bold);
	font-size: var(--text-sm);
	text-decoration: none;
	transition: background var(--duration-fast, 160ms) var(--easing-out, ease-out), border-color var(--duration-fast, 160ms) var(--easing-out, ease-out), transform var(--duration-fast, 160ms) var(--easing-out, ease-out);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.state-card__locations li a:hover {
	background: rgba(46, 163, 242, 0.22);
	border-color: rgba(46, 163, 242, 0.55);
	color: var(--color-white);
	text-decoration: none;
	transform: translateX(2px);
}
.state-card--coming-soon {
	background:
		radial-gradient(ellipse at 20% 0%, rgba(46, 163, 242, 0.14), transparent 55%),
		linear-gradient(160deg, #1a4a8c 0%, #0f3a72 45%, #0a2954 100%);
	border-style: solid;
	border-color: rgba(46, 163, 242, 0.18);
}
.state-card__cta-text {
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.82);
	margin: 0;
	line-height: var(--leading-normal, 1.55);
}
/* State-card child overrides (defensive): inline-styled text inside
   .state-card__locations li or .state-card__cta-text may have hard-coded
   colors. Force-cascade them to the visible white-on-dark palette. */
.state-card .state-card__locations li,
.state-card .state-card__locations li em,
.state-card .state-card__locations li span,
.state-card__cta-text,
.state-card__cta-text em,
.state-card__cta-text span {
	color: rgba(255, 255, 255, 0.85) !important;
}
.state-card a {
	color: var(--color-white);
}
.state-card a[style*="color: var(--color-polar-blue)"],
.state-card .state-card__cta-text a {
	color: var(--color-polar-blue) !important;
}

/* === Breadcrumb ====================================== */

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: center;
	font-size: var(--text-sm);
	color: var(--color-slate-500);
}
.breadcrumb a {
	color: var(--color-slate-500);
	text-decoration: none;
}
.breadcrumb a:hover {
	color: var(--color-polar-blue);
}
.breadcrumb__sep {
	color: var(--color-slate-300);
}
.breadcrumb--on-dark {
	color: rgb(255 255 255 / 0.6);
}
.breadcrumb--on-dark a {
	color: rgb(255 255 255 / 0.6);
}
.breadcrumb--on-dark a:hover {
	color: var(--color-polar-blue);
}
.breadcrumb--on-dark .breadcrumb__sep {
	color: rgb(255 255 255 / 0.3);
}

/* === Service-pillar hero (compact dark) ============== */

.service-hero {
	position: relative;
	margin-top: -80px;
	padding-top: calc(var(--space-12) + 80px);
	padding-bottom: var(--space-16);
	background: var(--color-ink);
	color: var(--color-white);
	overflow: hidden;
	isolation: isolate;
}
.service-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 80% 60% at 85% 0%, rgb(46 163 242 / 0.30) 0%, transparent 60%),
		radial-gradient(ellipse 70% 50% at 0% 100%, rgb(22 73 146 / 0.45) 0%, transparent 60%),
		linear-gradient(180deg, var(--color-ink) 0%, var(--color-navy-mid) 50%, var(--color-ink) 100%);
	z-index: -1;
}

.service-hero__inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	align-items: center;
	min-width: 0;
}

.service-hero__eyebrow {
	display: inline-block;
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-polar-blue);
	padding: var(--space-1) var(--space-3);
	border: 1px solid rgb(46 163 242 / 0.3);
	border-radius: var(--radius-pill);
	background: rgb(46 163 242 / 0.05);
}
@media (min-width: 640px) {
	.service-hero__eyebrow { font-size: var(--text-sm); }
}

.service-hero__title {
	color: var(--color-white);
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin: 0;
	max-width: 18ch;
	font-size: clamp(2rem, 4.5vw + 0.5rem, 4rem);
}

.service-hero__subtitle {
	font-size: var(--text-base);
	color: rgb(255 255 255 / 0.78);
	max-width: 56ch;
	line-height: var(--leading-normal);
	margin: 0;
}
@media (min-width: 640px) {
	.service-hero__subtitle { font-size: var(--text-lg); }
}

.service-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: center;
	margin-top: var(--space-3);
}

/* === Quick-nav (anchor strip) ======================== */

.quick-nav {
	position: sticky !important;
	top: 0 !important;
	z-index: 90;
	background: rgb(255 255 255 / 0.96);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
	border-bottom: 1px solid rgba(22, 73, 146, 0.08);
	box-shadow: 0 4px 12px -6px rgba(2, 8, 36, 0.10);
}
.quick-nav__inner {
	display: flex;
	gap: var(--space-6);
	padding-top: var(--space-3);
	padding-bottom: var(--space-3);
	overflow-x: auto;
	scrollbar-width: thin;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}
.quick-nav a {
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	color: var(--color-slate-700);
	text-decoration: none;
	padding: var(--space-1) 0;
	flex-shrink: 0;
}
.quick-nav a:hover {
	color: var(--color-polar-blue);
}

/* === Prose (long-form body copy) ===================== */

.prose {
	max-width: 70ch;
	margin: 0 auto;
}
.prose p {
	font-size: var(--text-base);
	color: var(--color-body);
	line-height: var(--leading-normal);
	margin-bottom: var(--space-4);
}
.prose p:last-child { margin-bottom: 0; }
.prose strong {
	color: var(--color-primary-navy);
	font-weight: var(--weight-bold);
}
@media (min-width: 768px) {
	.prose p { font-size: var(--text-lg); }
}

/* === Grade cards (3 ceramic grades) ================== */

.grade-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}
@media (min-width: 768px) {
	.grade-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-6);
	}
}
@media (min-width: 1024px) {
	.grade-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	/* 4-card grids stay 2×2 at desktop (no lone orphan card) */
	.grade-grid--quad {
		grid-template-columns: repeat(2, 1fr);
	}
}
.grade-grid > * { min-width: 0; }

.grade-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
	background: var(--color-white);
	border: 1px solid var(--color-slate-100);
	border-radius: var(--radius-lg);
	position: relative;
	overflow: hidden;
	transition:
		transform var(--duration-base) var(--easing-out),
		box-shadow var(--duration-base) var(--easing-out);
}
.grade-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
.grade-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--gradient-accent);
}
.grade-card--featured {
	border-color: var(--color-polar-blue);
	box-shadow: var(--shadow-md);
}
/* On the featured card the "Most popular" badge sits ABOVE the title (in normal flow)
   instead of overlapping the top-right corner — clears any title length, no wrap hack. */
.grade-card--featured .grade-card__badge {
	position: static;
	top: auto;
	right: auto;
	display: inline-block;
	margin-bottom: var(--space-2);
	align-self: flex-start;
}
.grade-card__badge {
	position: absolute;
	top: var(--space-4);
	right: var(--space-4);
	padding: 2px var(--space-2);
	background: var(--gradient-accent);
	color: var(--color-white);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: var(--radius-sm);
}
.grade-card__name {
	font-size: var(--text-xl);
	color: var(--color-primary-navy);
	margin: 0;
	padding-right: var(--space-20);
}
.grade-card__tagline {
	font-size: var(--text-base);
	color: var(--color-slate-700);
	margin: 0;
}
.grade-card__specs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
	padding: var(--space-3) 0;
	border-top: 1px solid var(--color-slate-100);
	border-bottom: 1px solid var(--color-slate-100);
	margin: 0;
}
@media (min-width: 480px) {
	.grade-card__specs {
		grid-template-columns: repeat(4, 1fr);
	}
}
.grade-card__spec {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.grade-card__spec dt {
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-slate-500);
}
.grade-card__spec dd {
	font-size: var(--text-base);
	font-weight: var(--weight-extrabold);
	color: var(--color-polar-blue);
	margin: 0;
	letter-spacing: -0.01em;
}
.grade-card__best {
	font-size: var(--text-sm);
	color: var(--color-slate-700);
	margin: 0;
}
.grade-card__best strong {
	color: var(--color-primary-navy);
}

/* === Pricing tier cards =============================== */

.pricing-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}
@media (min-width: 768px) {
	.pricing-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-6);
	}
}
.pricing-grid > * { min-width: 0; }

.pricing-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
	background: var(--color-white);
	border: 1px solid var(--color-slate-100);
	border-radius: var(--radius-lg);
	position: relative;
	transition:
		transform var(--duration-base) var(--easing-out),
		box-shadow var(--duration-base) var(--easing-out);
}
.pricing-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
.pricing-card--featured {
	background: var(--gradient-hero);
	border-color: var(--color-polar-blue);
	color: var(--color-white);
	box-shadow: var(--shadow-lg);
}
.pricing-card--featured:hover {
	box-shadow: var(--shadow-xl);
}
.pricing-card--featured .pricing-card__name {
	color: var(--color-white);
}
.pricing-card--featured .pricing-card__price {
	color: var(--color-gold);
}
.pricing-card--featured .pricing-card__tagline {
	color: rgb(255 255 255 / 0.85);
}
.pricing-card--featured .pricing-card__features li {
	color: rgb(255 255 255 / 0.85);
}
.pricing-card--featured .pricing-card__features li::before {
	color: var(--color-gold);
}

.pricing-card__name {
	font-size: var(--text-xl);
	color: var(--color-primary-navy);
	margin: 0;
}
.pricing-card__price {
	font-size: var(--text-3xl);
	font-weight: var(--weight-extrabold);
	color: var(--color-polar-blue);
	letter-spacing: -0.02em;
}
.pricing-card__tagline {
	font-size: var(--text-sm);
	color: var(--color-slate-700);
	margin: 0;
}
.pricing-card__features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	flex: 1;
}
.pricing-card__features li {
	font-size: var(--text-sm);
	color: var(--color-slate-700);
	padding-left: var(--space-5);
	position: relative;
	line-height: 1.4;
}
.pricing-card__features li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--color-polar-blue);
	font-weight: var(--weight-bold);
}

/* === Process steps (numbered timeline) =============== */

.process-steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	max-width: 760px;
	margin: 0 auto;
}
@media (min-width: 768px) {
	.process-steps {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-8);
	}
}
.process-steps > li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-3) var(--space-4);
	min-width: 0;
}
.process-steps__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	background: var(--gradient-accent);
	color: var(--color-white);
	font-size: var(--text-lg);
	font-weight: var(--weight-extrabold);
	grid-row: 1 / span 2;
	box-shadow: 0 4px 12px -4px rgb(46 163 242 / 0.5);
}
.process-steps h3 {
	font-size: var(--text-lg);
	color: var(--color-primary-navy);
	margin: 0;
	align-self: center;
}
.process-steps p {
	font-size: var(--text-sm);
	color: var(--color-slate-700);
	margin: 0;
	line-height: var(--leading-normal);
}

/* === CTA strip — dark navy section with depth + glow ===================== */

.cta-strip {
	position: relative;
	padding: var(--space-12) 0;
	background:
		radial-gradient(ellipse 80% 60% at 85% 0%, rgb(46 163 242 / 0.25) 0%, transparent 60%),
		radial-gradient(ellipse 70% 50% at 0% 100%, rgb(22 73 146 / 0.45) 0%, transparent 60%),
		linear-gradient(180deg, var(--color-ink) 0%, var(--color-navy-mid) 50%, var(--color-ink) 100%);
	color: var(--color-white);
	text-align: center;
	overflow: hidden;
}
.cta-strip::before {
	content: "";
	position: absolute; left: 0; right: 0; top: 0; height: 3px;
	background: linear-gradient(90deg, transparent 0%, rgba(46, 163, 242, 0.50) 20%, rgba(46, 163, 242, 0.85) 50%, rgba(46, 163, 242, 0.50) 80%, transparent 100%);
	pointer-events: none;
}
.cta-strip::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
	background: linear-gradient(90deg, transparent 0%, rgba(46, 163, 242, 0.30) 20%, rgba(46, 163, 242, 0.60) 50%, rgba(46, 163, 242, 0.30) 80%, transparent 100%);
	pointer-events: none;
}
.cta-strip h2 {
	margin-bottom: var(--space-2);
	color: var(--color-white);
	font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
}
.cta-strip p { color: rgb(255 255 255 / 0.82); margin: 0 auto var(--space-2); max-width: 56ch; }
.cta-strip__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: center;
	margin-top: var(--space-4);
}

/* === Keyword density block — dark navy card with polar-blue accent ======== */

.keyword-density-block {
	position: relative;
	background:
		radial-gradient(ellipse 100% 80% at 80% 0%, rgb(46 163 242 / 0.18) 0%, transparent 60%),
		linear-gradient(160deg, var(--color-primary-navy) 0%, #0c2e5e 60%, #081f48 100%) !important;
	color: var(--color-white);
	padding: var(--space-5) var(--space-6) !important;
	border-left: 4px solid var(--color-polar-blue) !important;
	border-radius: var(--radius-md) !important;
	box-shadow:
		0 1px 2px rgba(2, 8, 36, 0.20),
		0 8px 18px -4px rgba(2, 8, 36, 0.30),
		0 24px 48px -12px rgba(46, 163, 242, 0.30),
		inset 0 1px 0 rgba(255, 255, 255, 0.14);
	overflow: hidden;
}
.keyword-density-block h2 {
	color: var(--color-polar-blue) !important;
}
.keyword-density-block p {
	color: rgb(255 255 255 / 0.82) !important;
}

/* === Why-local bullet list (location + service pages) ============================ */

.why-local__list {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	max-width: 780px;
	display: grid;
	gap: var(--space-4);
}
.why-local__item {
	position: relative;
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	background: var(--color-white);
	border: 1px solid rgba(22, 73, 146, 0.08);
	border-radius: var(--radius-md);
}
.why-local__bullet {
	width: 24px;
	height: 24px;
	color: var(--color-polar-blue);
	margin-top: 2px;
	flex-shrink: 0;
}
.why-local__item-title {
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	color: var(--color-primary-navy);
	margin: 0 0 var(--space-1);
}
.why-local__item-text {
	margin: 0;
	color: var(--color-body);
	line-height: var(--leading-normal);
}

/* Dark-section override: when .why-local__item lives inside a navy-deep
   section, swap to glass-on-dark styling so the white text contrasts. */
.section--navy-deep .why-local__item {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow:
		0 1px 2px rgba(2, 8, 36, 0.20),
		0 8px 18px -4px rgba(2, 8, 36, 0.28),
		0 20px 40px -12px rgba(46, 163, 242, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.section--navy-deep .why-local__item-title {
	color: var(--color-white) !important;
}
.section--navy-deep .why-local__item-text {
	color: rgb(255 255 255 / 0.82) !important;
}
.section--navy-deep .why-local__bullet {
	color: var(--color-polar-blue);
}

/* === Service-page contact card ============================ */

.contact-card {
	box-shadow: var(--shadow-md);
	border: 1px solid rgba(22, 73, 146, 0.08);
}
.contact-card iframe,
.contact-card form {
	width: 100%;
}

/* === Header text wrap fixes for narrower viewports ============================ */

.site-header__phone {
	white-space: nowrap;
}
.primary-nav__list > li > a {
	white-space: nowrap;
}

/* === Form inputs — transparent / dark-glass (network-wide, Frostbite pattern) ============= */
/* All text-style inputs, selects, and textareas render as translucent dark-glass with
   light text, matching the Frostbite lead-capture aesthetic that's also used on the
   location hero forms. Designed for the dark navy sections that host most forms
   (hero CTAs, ZIP finder, location lead-capture). For light-section forms, opt-in
   with `.form-on-light` on a wrapping element. */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="phone"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	font: inherit;
	font-size: var(--text-base, 1rem);
	color: rgba(255, 255, 255, 0.94);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--radius-md, 10px);
	box-shadow:
		inset 0 1px 2px rgba(2, 8, 36, 0.28),
		0 1px 0 rgba(255, 255, 255, 0.06);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition:
		border-color var(--duration-fast, 160ms) var(--easing-out, ease-out),
		box-shadow var(--duration-fast, 160ms) var(--easing-out, ease-out),
		background-color var(--duration-fast, 160ms) var(--easing-out, ease-out);
	-webkit-appearance: none;
	appearance: none;
}

select {
	background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.65) 50%),
		linear-gradient(135deg, rgba(255, 255, 255, 0.65) 50%, transparent 50%);
	background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.85rem) 50%;
	background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
	background-repeat: no-repeat;
	padding-right: 2.5rem;
	cursor: pointer;
}

textarea {
	resize: vertical;
	min-height: 6rem;
	line-height: 1.5;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
input[type="phone"]::placeholder,
input[type="number"]::placeholder,
input[type="url"]::placeholder,
input[type="search"]::placeholder,
input[type="password"]::placeholder,
textarea::placeholder {
	color: rgba(255, 255, 255, 0.55);
	opacity: 1;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="phone"]:hover,
input[type="number"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
input[type="password"]:hover,
input[type="date"]:hover,
input[type="time"]:hover,
select:hover,
textarea:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.40);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="phone"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
select:focus,
textarea:focus {
	outline: none;
	background: rgba(255, 255, 255, 0.14);
	border-color: var(--color-polar-blue, #2ea3f2);
	box-shadow:
		inset 0 1px 2px rgba(2, 8, 36, 0.30),
		0 0 0 3px rgba(46, 163, 242, 0.30);
}

input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="tel"]:disabled,
input[type="phone"]:disabled,
select:disabled,
textarea:disabled {
	background: rgba(255, 255, 255, 0.03);
	color: rgba(255, 255, 255, 0.40);
	cursor: not-allowed;
	box-shadow: none;
}

/* Light-section escape hatch: opt-in via `.form-on-light` on a wrapping element. */
.form-on-light input[type="text"],
.form-on-light input[type="email"],
.form-on-light input[type="tel"],
.form-on-light input[type="phone"],
.form-on-light input[type="number"],
.form-on-light input[type="url"],
.form-on-light input[type="search"],
.form-on-light input[type="password"],
.form-on-light input[type="date"],
.form-on-light input[type="time"],
.form-on-light select,
.form-on-light textarea {
	background: rgba(22, 73, 146, 0.06);
	color: var(--color-primary-navy, #164992);
	border-color: rgba(22, 73, 146, 0.22);
}
.form-on-light input::placeholder,
.form-on-light textarea::placeholder {
	color: rgba(22, 73, 146, 0.50);
}

/* === Interior page hero (info-hero) — center the title block ===============
   Interior pages (About, Reviews, Gallery, FAQ, etc.) inline-style their own
   .info-hero with left-aligned title + eyebrow + lede. Override globally so
   they match the service-hero centered pattern. */
.info-hero {
	text-align: center;
}
.info-hero > .container,
.info-hero .container {
	max-width: 760px;
	margin-inline: auto;
}
.info-hero h1 {
	max-width: none !important;
	margin-inline: auto !important;
	text-align: center;
}
.info-hero p {
	max-width: 64ch !important;
	margin-inline: auto !important;
	text-align: center;
}
.info-hero__eyebrow {
	margin-inline: auto;
}

/* === "Your Shop" card — photo + map below hero =============================
   Compact framed card with the storefront photo + Google Maps embed
   side-by-side. Sits below the hero on each location homepage so visitors
   immediately confirm they're at the correct shop. Matches the depth +
   frame language of .location-result cards (polar-blue accent stripe,
   ice gradient, multi-layer shadow). */
.your-shop {
	position: relative;
	max-width: 880px;
	margin: var(--space-8) auto var(--space-6);
	background: linear-gradient(180deg, #ffffff 0%, #f4f8fd 100%);
	border: 1.5px solid rgba(22, 73, 146, 0.14);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	box-shadow:
		0 1px 2px rgba(2, 8, 36, 0.06),
		0 4px 8px rgba(2, 8, 36, 0.08),
		0 12px 24px rgba(2, 8, 36, 0.10),
		0 28px 48px -10px rgba(2, 8, 36, 0.14),
		0 40px 72px -16px rgba(46, 163, 242, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.95);
	overflow: hidden;
}
.your-shop::before {
	content: "";
	position: absolute; left: 0; right: 0; top: 0; height: 3px;
	background: linear-gradient(90deg, transparent 0%, rgba(46, 163, 242, 0.50) 20%, rgba(46, 163, 242, 0.85) 50%, rgba(46, 163, 242, 0.50) 80%, transparent 100%);
	pointer-events: none;
}
.your-shop__head {
	display: flex; align-items: baseline; gap: var(--space-3);
	padding: 0 0 var(--space-4);
	border-bottom: 1px solid rgba(22, 73, 146, 0.08);
	margin-bottom: var(--space-4);
	flex-wrap: wrap;
}
.your-shop__eyebrow {
	font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--color-polar-blue); margin: 0;
}
.your-shop__name {
	font-size: var(--text-lg); font-weight: 800; color: var(--color-primary-navy);
	margin: 0; line-height: 1.2;
}
.your-shop__meta {
	font-size: 13px; color: rgb(22 73 146 / 0.65); margin: 0 0 0 auto;
}
.your-shop__grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
}
@media (max-width: 640px) {
	.your-shop__grid { grid-template-columns: 1fr; }
}
.your-shop__photo,
.your-shop__map {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: rgba(22, 73, 146, 0.05);
	box-shadow:
		inset 0 0 0 1px rgba(22, 73, 146, 0.12),
		0 4px 10px -2px rgba(2, 8, 36, 0.18);
}
.your-shop__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.your-shop__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.your-shop__photo--coming-soon {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: var(--space-2);
	background:
		radial-gradient(ellipse at 50% 40%, rgba(46, 163, 242, 0.22), transparent 65%),
		linear-gradient(135deg, var(--color-primary-navy) 0%, #0c2e5e 60%, #081f48 100%);
	padding: var(--space-4);
}
.your-shop__photo--coming-soon img { width: 70%; max-width: 220px; height: auto; opacity: 0.95; object-fit: contain; }
.your-shop__photo--coming-soon .coming-soon-label {
	color: var(--color-polar-blue);
	font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
	margin-top: var(--space-1);
}
.your-shop__badge {
	position: absolute; left: 10px; bottom: 10px;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 11px;
	background: rgba(2, 8, 36, 0.82);
	border-radius: 999px; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.your-shop__badge svg { width: 12px; height: 12px; color: var(--color-polar-blue); }
.your-shop__foot {
	display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--space-4);
	align-items: center;
	padding: var(--space-4) 0 0;
	margin-top: var(--space-4);
	border-top: 1px solid rgba(22, 73, 146, 0.08);
}
@media (max-width: 640px) {
	.your-shop__foot { grid-template-columns: 1fr; }
}
.your-shop__field { font-size: 13px; }
.your-shop__field .label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: rgb(22 73 146 / 0.55); margin-bottom: 3px; }
.your-shop__field .value { font-size: 14px; color: var(--color-primary-navy); font-weight: 600; line-height: 1.3; }
.your-shop__field .value a { color: inherit; text-decoration: none; }
.your-shop__directions {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 10px 16px;
	background: var(--color-gold);
	color: var(--color-primary-navy);
	border-radius: var(--radius-md); font-size: 13px; font-weight: 700;
	text-decoration: none; white-space: nowrap;
	transition: background 200ms, transform 200ms;
}
.your-shop__directions:hover {
	background: #ffd76a;
	color: var(--color-primary-navy);
	transform: translateY(-1px);
}
.your-shop__directions svg { width: 14px; height: 14px; }

/* === AI concierge card — center on page ===================================
   The .ai-card sits inside a .contact-grid. When the ai-card is the only
   child, center it by collapsing the grid to a single centered column
   and capping the contact-grid wrapper width so it doesn't stretch full-bleed. */
.contact-grid:has(> .ai-card:only-child) {
	grid-template-columns: minmax(0, 760px) !important;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
	max-width: 760px;
}
/* Fallback for browsers without :has() — also center .ai-card itself */
.ai-card {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* === Local-hero text panel — translucent glass to match the chips ==========
   Wraps the eyebrow + h1 + lede so the text is readable on ANY hero photo
   without per-photo gradient tuning. Visually matches the chip styling below
   (same translucent-white tint, same border, same blur) so everything in
   the left rail reads as one cohesive glass family.

   Effect stack:
     - polar-blue ambient halo at low opacity (the "frost glow")
     - dark drop shadow underneath (lifts the panel off the photo)
     - inset top highlight (light hitting the glass from above)
     - inset polar-blue rim light at top-left (where icy light catches the edge)
     - subtle radial light at top-left corner via ::before (glass shine) */
.local-hero__text-panel {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
	margin-bottom: var(--space-5, 1.25rem);
	background: rgba(255, 255, 255, 0.06);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--radius-lg, 14px);
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(2, 8, 36, 0.16),
		0 20px 40px -16px rgba(0, 0, 0, 0.40),
		0 28px 56px -20px rgba(46, 163, 242, 0.32),
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		inset 1px 0 0 rgba(46, 163, 242, 0.18);
}
.local-hero__text-panel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 60%;
	height: 60%;
	pointer-events: none;
	background: radial-gradient(
		ellipse at 0% 0%,
		rgba(46, 163, 242, 0.18) 0%,
		transparent 60%
	);
	z-index: 0;
}
.local-hero__text-panel > * {
	position: relative;
	z-index: 1;
}
.local-hero__text-panel .local-hero__eyebrow,
.local-hero__text-panel .local-hero__title,
.local-hero__text-panel .local-hero__lede {
	text-shadow: none !important;     /* panel provides contrast — text-shadow not needed */
}
/* Eyebrow as a pill chip — darker translucent background so the
   "[LOCATION], NV · AUTHORIZED POLAR TINT NETWORK" label has strong
   contrast even on busy photo backgrounds. Sits inside the text panel
   but visually distinct. The original ::before accent line becomes a
   small dot to its left. */
.local-hero__text-panel .local-hero__eyebrow,
.local-hero .local-hero__eyebrow {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 7px 14px !important;
	background: rgba(2, 8, 36, 0.55) !important;
	border: 1px solid rgba(46, 163, 242, 0.45) !important;
	border-radius: 999px !important;
	color: #b8dcfa !important;                /* light polar-blue — high contrast on dark */
	font-size: var(--text-xs, 0.75rem) !important;
	font-weight: var(--weight-bold, 700) !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	margin-bottom: var(--space-3, 0.75rem) !important;
	box-shadow:
		0 2px 4px rgba(2, 8, 36, 0.20),
		inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
	-webkit-backdrop-filter: blur(6px) !important;
	backdrop-filter: blur(6px) !important;
}
/* Replace the long accent line before the eyebrow with a compact polar-blue
   dot, since the pill itself now provides the visual frame. */
.local-hero__text-panel .local-hero__eyebrow::before,
.local-hero .local-hero__eyebrow::before {
	content: "" !important;
	width: 6px !important;
	height: 6px !important;
	background: var(--color-polar-blue, #2ea3f2) !important;
	border-radius: 50% !important;
	flex-shrink: 0 !important;
	box-shadow: 0 0 0 3px rgba(46, 163, 242, 0.20) !important;
}
/* The em-gradient "installed in [Location]" reads as washed-out on busy
   photos. Solid polar-blue is bolder + more legible while still distinct
   from the white headline text. */
.local-hero__title em {
	background: none !important;
	-webkit-text-fill-color: initial !important;
	color: var(--color-polar-blue, #2ea3f2) !important;
}

/* === Local-hero text readability — text-shadow + left-side darken ============
   Hero photos (especially Summerlin, with its bright white storefront wall)
   can wash out the white headline + lede text. Two layers of protection:
     1. A soft text-shadow on the headline + lede + eyebrow so each glyph has
        a subtle dark halo around it — readable on light backgrounds without
        looking outlined.
     2. A pseudo-element vignette over the LEFT half of the hero that darkens
        the area behind the text without affecting the form-card on the right
        or the bottom of the photo. Goes under the content via z-index. */
.local-hero__eyebrow,
.local-hero__title,
.local-hero__title em,
.local-hero__lede {
	text-shadow:
		0 1px 2px rgba(2, 8, 36, 0.45),
		0 2px 12px rgba(2, 8, 36, 0.35) !important;
}
/* Left-side text darken vignette — radial from the top-left corner where the
   headline sits, fading out before the form-card area. Sits between the photo
   layer and the content, never covers the form-card. */
.local-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse 70% 80% at 20% 40%,
		rgba(2, 8, 36, 0.45) 0%,
		rgba(2, 8, 36, 0.20) 45%,
		transparent 70%
	);
	pointer-events: none;
	z-index: 0;
}
.local-hero__inner {
	position: relative;
	z-index: 1;
}

/* === Local-hero info strip — 2x2 grid, full-text-width chips =================
   Network-wide override: the per-location inline CSS sets
   `.local-hero__info-strip { display: flex; max-width: 620px; }`.
   We promote it to a 2-column grid so the 4 chips
   (address, phone, open hours, Get a Quote CTA) sit in a clean even grid
   that matches the headline + lede text width above. */
.local-hero .local-hero__info-strip,
.local-hero__info-strip {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: var(--space-3, 0.75rem) !important;
	/* Stretch to fill the left column edge-to-edge with the text panel.
	   No max-width cap — the parent .local-hero__copy column already
	   constrains the available width via the .local-hero__inner grid
	   (1.2fr 1fr). This makes the chip row match the text panel's
	   apparent width above. Each chip becomes wide enough that the
	   address fits on 2 lines instead of 3. */
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 var(--space-5, 1.25rem) !important;
}
@media (max-width: 720px) {
	.local-hero .local-hero__info-strip,
	.local-hero__info-strip {
		grid-template-columns: 1fr !important;
	}
}
.local-hero__info-chip {
	position: relative !important;
	padding: 12px 18px !important;
	font-size: var(--text-lg, 1.125rem) !important;
	font-weight: var(--weight-semibold, 600) !important;
	line-height: 1.25 !important;
	min-height: 56px !important;
	align-items: center !important;
	gap: var(--space-2, 0.5rem) !important;
	text-wrap: balance;
	border-color: rgba(255, 255, 255, 0.18) !important;
	box-shadow:
		0 1px 2px rgba(2, 8, 36, 0.16),
		0 12px 24px -8px rgba(0, 0, 0, 0.32),
		0 16px 32px -12px rgba(46, 163, 242, 0.26),
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		inset 1px 0 0 rgba(46, 163, 242, 0.18) !important;
}
.local-hero__info-chip svg {
	width: 24px !important;
	height: 24px !important;
}
/* Gold CTA variant — visually distinguishes "Get a Quote" from the info chips */
.local-hero__info-chip--cta {
	background: var(--color-gold, #fcc640) !important;
	border-color: var(--color-gold, #fcc640) !important;
	color: var(--color-primary-navy, #164992) !important;
	font-weight: var(--weight-bold, 700) !important;
	justify-content: center !important;
}
.local-hero__info-chip--cta svg {
	color: var(--color-primary-navy, #164992) !important;
}
a.local-hero__info-chip--cta:hover {
	background: #ffd76a !important;
	border-color: #ffd76a !important;
	color: var(--color-primary-navy, #164992) !important;
	transform: translateY(-1px);
}

/* === Local-hero form card — TRANSPARENT DARK GLASS ============================
   Matches the address / phone / open-hours pills on the left side of the hero
   so the whole right-rail feels like a cohesive set of glass chips floating
   over the photo. The card itself becomes a translucent navy panel; inputs
   are transparent with thin polar-blue borders and white text. */

/* Override the per-location inline `.local-hero__form-card { background: white }`
   rule by repeating the selector for higher specificity.
   Matches the chip + text-panel glass styling so the whole hero reads as one
   cohesive glass family — plus the polar-blue halo + rim light + corner shine
   so all three surfaces share the same icy luminous feel. */
.local-hero .local-hero__form-card,
.local-hero__form-card {
	position: relative;
	background: rgba(255, 255, 255, 0.06);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.18);
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(2, 8, 36, 0.16),
		0 20px 40px -16px rgba(0, 0, 0, 0.40),
		0 28px 56px -20px rgba(46, 163, 242, 0.32),
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		inset 1px 0 0 rgba(46, 163, 242, 0.18);
	color: var(--color-white, #fff);
}
.local-hero .local-hero__form-card::before,
.local-hero__form-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 50%;
	pointer-events: none;
	background: radial-gradient(
		ellipse at 0% 0%,
		rgba(46, 163, 242, 0.16) 0%,
		transparent 60%
	);
	z-index: 0;
}
.local-hero .local-hero__form-card > *,
.local-hero__form-card > * {
	position: relative;
	z-index: 1;
}
.local-hero .local-hero__form-eyebrow,
.local-hero__form-eyebrow {
	color: #b8dcfa;
}
.local-hero .local-hero__form-title,
.local-hero__form-title {
	color: var(--color-white, #fff);
}
.local-hero__form-card label {
	color: rgba(255, 255, 255, 0.9);
}

/* Transparent inputs on the dark-glass card.
   Note: the Frostbite custom_form_widget injects its own scoped <style> with
   white input backgrounds + dark text. We force-override with !important
   so the inputs match the dark glass aesthetic of the card.
   We also override the widget's form wrapper background (rgb(249,249,249))
   and CSS custom properties so child elements inherit transparent defaults. */
.local-hero__form-card form.crm-form,
.local-hero__form-card form.form-widget,
.local-hero__form-card form[class*="form-widget"] {
	background: transparent !important;
	--color-bg: transparent !important;
	--color-input-bg: rgba(255, 255, 255, 0.08) !important;
	--color-input-border: rgba(255, 255, 255, 0.28) !important;
	--color-text: rgba(255, 255, 255, 0.92) !important;
	--color-border: rgba(255, 255, 255, 0.16) !important;
	color: var(--color-white, #fff) !important;
	padding: 0 !important;
}
.local-hero__form-card form label,
.local-hero__form-card .form-widget label {
	color: rgba(255, 255, 255, 0.92) !important;
}
.local-hero__form-card input[type="text"],
.local-hero__form-card input[type="email"],
.local-hero__form-card input[type="tel"],
.local-hero__form-card input[type="phone"],
.local-hero__form-card input[type="number"],
.local-hero__form-card select,
.local-hero__form-card textarea {
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.28) !important;
	color: var(--color-white, #fff) !important;
	box-shadow:
		inset 0 1px 2px rgba(2, 8, 36, 0.30),
		0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
.local-hero__form-card input::placeholder,
.local-hero__form-card textarea::placeholder {
	color: rgba(255, 255, 255, 0.50) !important;
	opacity: 1 !important;
}
.local-hero__form-card option {
	background: var(--color-primary-navy, #164992);
	color: var(--color-white, #fff);
}
.local-hero__form-card input::placeholder,
.local-hero__form-card textarea::placeholder {
	color: rgba(255, 255, 255, 0.55);
}
.local-hero__form-card select {
	/* Re-tint the custom dropdown arrow chevrons to white for visibility */
	background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.7) 50%),
		linear-gradient(135deg, rgba(255, 255, 255, 0.7) 50%, transparent 50%);
}
.local-hero__form-card input:hover,
.local-hero__form-card select:hover,
.local-hero__form-card textarea:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(46, 163, 242, 0.65);
	box-shadow:
		inset 0 1px 2px rgba(2, 8, 36, 0.30),
		0 0 0 1px rgba(46, 163, 242, 0.15);
}
.local-hero__form-card input:focus,
.local-hero__form-card select:focus,
.local-hero__form-card textarea:focus {
	background: rgba(255, 255, 255, 0.16);
	border-color: var(--color-polar-blue, #2ea3f2);
	color: var(--color-white, #fff);
	box-shadow:
		0 0 0 3px rgba(46, 163, 242, 0.32),
		inset 0 1px 2px rgba(2, 8, 36, 0.30);
}

.prose__figure {
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:16/9;
	object-fit:cover;
	border-radius:var(--radius-lg);
	margin:0 0 var(--space-5);
	box-shadow:0 10px 30px -10px rgba(2,8,36,0.25);
}


/* === Dark-glass form inputs (network-wide) ===================================
   Inputs/selects/textareas inside dark navy sections (hero-cinema, .section--navy-deep,
   .press-hero, etc.) pick up the translucent dark-glass treatment so they read on
   dark backgrounds. (.local-hero__form-card has its own scoped rules with !important
   that override the Frostbite widget — those stay.) */
.hero-cinema input[type="text"],
.hero-cinema input[type="email"],
.hero-cinema input[type="tel"],
.hero-cinema input[type="phone"],
.hero-cinema input[type="number"],
.hero-cinema input[type="search"],
.hero-cinema select,
.hero-cinema textarea,
.section--navy-deep input[type="text"],
.section--navy-deep input[type="email"],
.section--navy-deep input[type="tel"],
.section--navy-deep input[type="phone"],
.section--navy-deep input[type="number"],
.section--navy-deep input[type="search"],
.section--navy-deep select,
.section--navy-deep textarea,
.press-hero input[type="text"],
.press-hero input[type="email"],
.press-hero input[type="tel"],
.press-hero select,
.press-hero textarea {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: var(--color-white);
	box-shadow:
		inset 0 1px 2px rgba(2, 8, 36, 0.30),
		0 1px 0 rgba(255, 255, 255, 0.06);
}
.hero-cinema input::placeholder,
.section--navy-deep input::placeholder,
.press-hero input::placeholder,
.hero-cinema textarea::placeholder,
.section--navy-deep textarea::placeholder,
.press-hero textarea::placeholder {
	color: rgba(255, 255, 255, 0.55) !important;
	opacity: 1;
}
.hero-cinema input:focus,
.section--navy-deep input:focus,
.press-hero input:focus,
.hero-cinema select:focus,
.hero-cinema textarea:focus,
.section--navy-deep select:focus,
.press-hero select:focus,
.section--navy-deep textarea:focus,
.press-hero textarea:focus {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.45);
	outline: none;
}

/* ============================================================================
   BLOG FILTER CHIPS + DATE META (added 2026-05-31 for /blog/ #201)
   ============================================================================ */
.blog-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-bottom: var(--space-8); }
.blog-filter__chip {
    background: var(--color-white);
    color: var(--color-slate-700);
    border: 1.5px solid var(--color-slate-200);
    border-radius: 999px;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    line-height: 1;
}
.blog-filter__chip:hover { background: var(--color-ice); border-color: var(--color-cool-cyan); color: var(--color-primary-navy); }
.blog-filter__chip--active { background: var(--color-primary-navy); border-color: var(--color-primary-navy); color: var(--color-white); }
.blog-filter__chip--active:hover { background: var(--color-primary-navy); color: var(--color-white); }

.blog-card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.blog-card__date { color: var(--color-slate-500); font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap; }

/* ============================================================================
   STATE TILES — 50-state directory on /locations/ (#189 + #202)
   ============================================================================ */
.state-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-6);
}
.state-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
    background: var(--color-white);
    border: 1.5px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    color: var(--color-primary-navy);
    text-decoration: none;
    transition: all 0.2s ease;
    overflow: hidden;
}
.state-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-slate-200);
    transition: background 0.2s ease;
}
.state-tile:hover {
    border-color: var(--color-cool-cyan);
    color: var(--color-primary-navy);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgba(2, 8, 36, 0.20), 0 0 0 1px rgba(46, 163, 242, 0.15);
}
.state-tile:hover::before { background: var(--color-polar-blue); }

.state-tile__abbrev {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--color-slate-500);
    letter-spacing: 0.08em;
    line-height: 1;
}
.state-tile__name {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--color-primary-navy);
    line-height: 1.2;
}
.state-tile__badge {
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: var(--weight-extrabold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: var(--space-1);
}
.state-tile__badge--open {
    background: linear-gradient(135deg, #1cb672 0%, #15a062 100%);
    color: var(--color-white);
    box-shadow: 0 2px 6px rgba(28, 182, 114, 0.32);
}
.state-tile__badge--soon {
    background: linear-gradient(135deg, var(--color-gold) 0%, #d4a017 100%);
    color: var(--color-primary-navy);
    box-shadow: 0 2px 6px rgba(212, 160, 23, 0.32);
}
.state-tile__badge--scouting {
    background: var(--color-ice);
    color: var(--color-primary-navy);
    border: 1px solid var(--color-polar-blue);
}
.state-tile--open { border-color: rgba(28, 182, 114, 0.30); }
.state-tile--open::before { background: #1cb672; }
.state-tile--soon { border-color: rgba(212, 160, 23, 0.40); }
.state-tile--soon::before { background: var(--color-gold); }
.state-tile--scouting { border-color: rgba(46, 163, 242, 0.40); }
.state-tile--scouting::before { background: var(--color-polar-blue); }

/* Tighten existing state-card padding (#189) */
.state-card { padding: var(--space-5) var(--space-5); gap: var(--space-3); }
@media (min-width: 768px) {
    .state-card { padding: var(--space-6) var(--space-5); }
}

/* ============================================================================
   STATE CROSS-LINK CHIPS — used in /resources/ pillar guides → /states/[slug]/
   (Local SEO authority distribution to state landing pages)
   ============================================================================ */
.state-chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    background: var(--color-white);
    color: var(--color-primary-navy);
    border: 1.5px solid var(--color-slate-200);
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.state-chip:hover {
    background: var(--color-polar-blue);
    color: var(--color-white);
    border-color: var(--color-polar-blue);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(46, 163, 242, 0.32);
}

/* ============================================================================
   STATE-CARD as link (per-location cards on /locations/) — added 2026-05-31
   ============================================================================ */
a.state-card {
    text-decoration: none;
    cursor: pointer;
}
a.state-card:hover {
    text-decoration: none;
    transform: translateY(-4px);
    box-shadow:
        0 4px 8px rgba(2, 8, 36, 0.26),
        0 16px 32px -4px rgba(2, 8, 36, 0.34),
        0 40px 64px -12px rgba(2, 8, 36, 0.42),
        0 52px 80px -16px rgba(46, 163, 242, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.state-card__link {
    display: inline-flex;
    align-items: center;
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: rgba(46, 163, 242, 0.18);
    border: 1px solid rgba(46, 163, 242, 0.42);
    border-radius: 999px;
    color: var(--color-white);
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    transition: all 0.2s ease;
    align-self: flex-start;
}
a.state-card:hover .state-card__link {
    background: var(--color-gold);
    color: var(--color-primary-navy);
    border-color: var(--color-gold);
}

/* === Residential Film Photo Placeholders ============== */
/* 2026-05-31 — Photo-rich residential rebuild. Aspect-ratio placeholder blocks
   used until real photography lands. Each variant signals the film type via
   gradient + pattern, so the page looks intentional even without imagery. */

.film-photo {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	aspect-ratio: 4 / 3;
	width: 100%;
	border-radius: var(--radius-lg, 16px);
	box-shadow: 0 12px 32px -12px rgba(22, 73, 146, 0.35), 0 4px 12px -4px rgba(22, 73, 146, 0.18);
	overflow: hidden;
	color: #fff;
	font-family: inherit;
	font-size: var(--text-sm, 0.875rem);
	font-weight: var(--weight-semibold, 600);
	letter-spacing: 0.01em;
	padding: var(--space-5, 1.25rem);
	background: linear-gradient(135deg, #164992 0%, #2ea3f2 100%);
	isolation: isolate;
}
.film-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%);
	z-index: 1;
	pointer-events: none;
}
.film-photo > * { position: relative; z-index: 2; }

.film-photo--heat {
	background:
		radial-gradient(circle at 75% 25%, rgba(255, 220, 130, 0.55) 0%, transparent 55%),
		linear-gradient(135deg, #b14a1e 0%, #f4a83a 60%, #ffd87a 100%);
}
.film-photo--privacy {
	background:
		repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 6px),
		linear-gradient(160deg, #cfe7f6 0%, #7cb6dd 55%, #3b6f99 100%);
	color: #0b2a4a;
	text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.film-photo--privacy::after { background: linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(11,42,74,0.35) 100%); }
.film-photo--perf {
	background:
		radial-gradient(circle, rgba(255,255,255,0.55) 1px, transparent 1.5px) 0 0 / 8px 8px,
		linear-gradient(135deg, #0b0b0d 0%, #1f1f24 100%);
}
.film-photo--security {
	background:
		linear-gradient(115deg, transparent 49.5%, rgba(255,255,255,0.55) 50%, transparent 50.5%) 0 0 / 60px 60px,
		linear-gradient(45deg, transparent 49.5%, rgba(255,255,255,0.25) 50%, transparent 50.5%) 0 0 / 40px 40px,
		linear-gradient(160deg, #3a4250 0%, #6b7383 60%, #9aa3b2 100%);
}

.film-photo__caption {
	display: inline-block;
	background: rgba(11, 26, 50, 0.78);
	padding: 0.4rem 0.75rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
}
.film-photo--privacy .film-photo__caption { background: rgba(11, 42, 74, 0.82); color: #fff; text-shadow: none; }

/* Two-column product section: photo + copy */
.film-section { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8, 2.5rem); align-items: center; }
.film-section--reverse .film-section__media { order: 2; }
.film-section__copy h3 { margin-top: 0; }
.film-section__bullets { list-style: none; padding: 0; margin: var(--space-4, 1rem) 0; }
.film-section__bullets li {
	padding-left: 1.75rem;
	position: relative;
	margin: 0.5rem 0;
	color: var(--color-body, #333);
	line-height: 1.55;
}
.film-section__bullets li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.55em;
	width: 1.1rem; height: 1.1rem;
	background: var(--color-polar-blue, #2ea3f2);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20 6L9 17l-5-5 1.4-1.4L9 14.2l9.6-9.6z'/></svg>") center/contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20 6L9 17l-5-5 1.4-1.4L9 14.2l9.6-9.6z'/></svg>") center/contain no-repeat;
}
.film-shines {
	margin-top: var(--space-5, 1.25rem);
	padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
	background: var(--color-ice, #eef6fc);
	border-left: 4px solid var(--color-polar-blue, #2ea3f2);
	border-radius: var(--radius-md, 12px);
}
.film-shines strong { color: var(--color-primary-navy, #164992); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem; display: block; margin-bottom: 0.35rem; }

@media (max-width: 820px) {
	.film-section { grid-template-columns: 1fr; }
	.film-section--reverse .film-section__media { order: 0; }
}

/* ============================================================================
   PPF PHOTO PLACEHOLDERS — added 2026-05-31 for /paint-protection-film/
   ============================================================================ */
.ppf-photo {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	padding: var(--space-5);
	color: var(--color-white);
	font-weight: var(--weight-bold);
	font-size: var(--text-sm);
	text-shadow: 0 2px 8px rgba(0,0,0,0.6);
	margin: var(--space-6) 0;
	box-shadow: 0 12px 32px -8px rgba(2, 8, 36, 0.36);
}
.ppf-photo--damage { background: linear-gradient(135deg, #2a3540 0%, #1a2530 50%, #4a3530 100%); }
.ppf-photo--track  { background: linear-gradient(135deg, #1d5aa6 0%, #0c2e5e 100%); }
.ppf-photo--front  { background: linear-gradient(135deg, #2ea3f2 0%, #1d5aa6 100%); }
.ppf-photo--full   { background: linear-gradient(135deg, #0a1535 0%, #2ea3f2 50%, #1d5aa6 100%); }
.ppf-photo--satin  { background: linear-gradient(135deg, #2a2a2e 0%, #0a0a0e 100%); }


/* ============================================================================
   CERAMIC COATING PHOTO PLACEHOLDERS — added 2026-05-31 for /ceramic-coating/
   ============================================================================ */
.ceramic-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: var(--space-5);
    color: var(--color-white);
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
    margin: var(--space-6) 0;
    box-shadow: 0 12px 32px -8px rgba(2, 8, 36, 0.36);
}
.ceramic-photo--brand       { background: linear-gradient(135deg, #c41e3a 0%, #8a0a1f 100%); }
.ceramic-photo--beading     { background: linear-gradient(135deg, #1d5aa6 0%, #2ea3f2 50%, #b8e0ff 100%); }
.ceramic-photo--gloss       { background: linear-gradient(135deg, #050810 0%, #1a2540 50%, #2ea3f2 100%); }
.ceramic-photo--maintenance { background: linear-gradient(135deg, #5a8db3 0%, #2ea3f2 100%); }
.ceramic-photo--coverage    { background: linear-gradient(135deg, #0a1535 0%, #1d5aa6 50%, #2ea3f2 100%); }


/* ============================================================================
   WRAP / DECAL PHOTO PLACEHOLDERS — added 2026-05-31 for /decals-and-print/
   ============================================================================ */
.wrap-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: var(--space-5);
    color: var(--color-white);
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
    margin: var(--space-6) 0;
    box-shadow: 0 12px 32px -8px rgba(2, 8, 36, 0.36);
}
.wrap-photo--fleet   { background: linear-gradient(135deg, #c98c00 0%, #f5b324 50%, #ffd870 100%); }
.wrap-photo--decals  { background: linear-gradient(135deg, #1d5aa6 0%, #2ea3f2 100%); }
.wrap-photo--partial { background: linear-gradient(135deg, #2a2a2a 0%, #c0c0c0 50%, #2a2a2a 100%); }
.wrap-photo--full    { background: linear-gradient(135deg, #5a0a8a 0%, #2ea3f2 50%, #f5b324 100%); }

/* ============================================================================
   "SIX MEASURABLE WINS" 6-CARD BENEFIT GRID — top-of-page on every product page
   added 2026-05-31 per Sean directive (replaces old spec cards)
   ============================================================================ */
.wins-section { background: linear-gradient(180deg, #f4f9ff 0%, #e6f0fa 100%); }
.wins-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-8);
}
@media (max-width: 900px) {
    .wins-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .wins-grid { grid-template-columns: 1fr; }
}
.wins-card {
    position: relative;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(46, 163, 242, 0.20), transparent 60%),
        linear-gradient(160deg, #1d5aa6 0%, var(--color-primary-navy) 55%, #0c2e5e 100%);
    border: 1px solid rgba(46, 163, 242, 0.24);
    border-radius: var(--radius-lg);
    padding: var(--space-7) var(--space-6);
    color: var(--color-white);
    box-shadow:
        0 1px 2px rgba(2, 8, 36, 0.18),
        0 12px 24px -4px rgba(2, 8, 36, 0.30),
        0 28px 56px -16px rgba(46, 163, 242, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon  title"
        "body  body";
    align-items: center;
    column-gap: var(--space-4);
    row-gap: var(--space-4);
    transition: transform 320ms var(--easing-out, ease-out), box-shadow 320ms var(--easing-out, ease-out);
}
.wins-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 2px 4px rgba(2, 8, 36, 0.22),
        0 16px 28px -4px rgba(2, 8, 36, 0.36),
        0 36px 64px -16px rgba(46, 163, 242, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.wins-card__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: rgba(46, 163, 242, 0.20);
    border: 1px solid rgba(46, 163, 242, 0.42);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    flex-shrink: 0;
    grid-area: icon;
}
.wins-card__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-extrabold);
    color: var(--color-white);
    margin: 0;
    grid-area: title;
    align-self: center;
}
.wins-card__body {
    font-size: var(--text-base);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    grid-area: body;
}


/* ============================================================================
   PRODUCT PHOTOS (real <img> swap-in) — added 2026-05-31
   ============================================================================ */
.film-photo--photo,
.ppf-photo--photo,
.ceramic-photo--photo,
.wrap-photo--photo {
    padding: 0;
    background: transparent;
    box-shadow: 0 12px 32px -8px rgba(2, 8, 36, 0.36);
    display: block;
    margin: var(--space-6) 0;
}
.film-photo--photo img,
.ppf-photo--photo img,
.ceramic-photo--photo img,
.wrap-photo--photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-lg);
    aspect-ratio: 4 / 3;
}

/* ============================================================================
   HOMEPAGE PROMISE CARDS — 4-pillar replacement for the location-favoring list
   added 2026-05-31 per Sean directive (no shop favoritism)
   ============================================================================ */
.locations-preview__list--promise {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 768px) {
    .locations-preview__list--promise { grid-template-columns: 1fr; }
}
.promise-card {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(46, 163, 242, 0.18), transparent 55%),
        linear-gradient(160deg, #1d5aa6 0%, var(--color-primary-navy) 55%, #0c2e5e 100%);
    border: 1px solid rgba(46, 163, 242, 0.24);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-5);
    color: var(--color-white);
    box-shadow:
        0 1px 2px rgba(2, 8, 36, 0.18),
        0 10px 20px -4px rgba(2, 8, 36, 0.30),
        0 24px 48px -16px rgba(46, 163, 242, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: transform 320ms var(--easing-out, ease-out), box-shadow 320ms var(--easing-out, ease-out);
}
.promise-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 2px 4px rgba(2, 8, 36, 0.22),
        0 14px 24px -4px rgba(2, 8, 36, 0.36),
        0 30px 56px -16px rgba(46, 163, 242, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.promise-card__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: rgba(46, 163, 242, 0.20);
    border: 1px solid rgba(46, 163, 242, 0.42);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}
.promise-card__name {
    font-size: var(--text-base);
    font-weight: var(--weight-extrabold);
    color: var(--color-white);
    margin: 0;
    line-height: 1.25;
}
.promise-card__address {
    font-size: var(--text-sm);
    line-height: 1.50;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* Single-column gold CTA card spanning the bottom of the 2x2 promise grid */
.location-card--cta {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, var(--color-gold) 0%, #d4a017 100%);
    border: 1px solid rgba(212, 160, 23, 0.50);
    box-shadow:
        0 1px 2px rgba(2, 8, 36, 0.18),
        0 10px 24px -4px rgba(212, 160, 23, 0.32),
        0 24px 48px -16px rgba(212, 160, 23, 0.32);
}
.location-card--cta .location-card__name,
.location-card--cta .location-card__address,
.location-card--cta .location-card__link {
    color: var(--color-primary-navy);
}
.location-card--cta:hover {
    transform: translateY(-2px);
}

/* ============================================================================
   LOCATION TILES — compact per-location cards on /locations/ (added 2026-05-31)
   Smaller than the old .state-card grid. Photo top, body bottom, badge overlay.
   ============================================================================ */
.location-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-5);
}
.location-tile {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 6px 18px -8px rgba(2, 8, 36, 0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-slate-200);
}
a.location-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px -10px rgba(2, 8, 36, 0.38), 0 0 0 1px rgba(46, 163, 242, 0.30);
    text-decoration: none;
    color: inherit;
}
.location-tile__photo {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-primary-navy) 0%, #0b2a5c 50%, var(--color-polar-blue) 100%);
}
.location-tile__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
a.location-tile:hover .location-tile__photo img { transform: scale(1.04); }

.location-tile__photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}
.location-tile__photo-mark {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--text-xl);
    font-weight: var(--weight-extrabold);
    letter-spacing: 0.04em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.location-tile__badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: var(--weight-extrabold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.location-tile__badge--open {
    background: rgba(28, 182, 114, 0.92);
    color: var(--color-white);
}
.location-tile__badge--soon {
    background: rgba(255, 200, 50, 0.95);
    color: var(--color-primary-navy);
}
.location-tile__badge--scout {
    background: rgba(46, 163, 242, 0.92);
    color: var(--color-white);
}

.location-tile__body {
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
}
.location-tile__name {
    font-size: var(--text-lg);
    font-weight: var(--weight-extrabold);
    color: var(--color-primary-navy);
    margin: 0;
    line-height: 1.2;
}
.location-tile__state {
    font-size: var(--text-sm);
    color: var(--color-slate-500);
    margin: 0;
    font-weight: var(--weight-medium);
}
.location-tile__area {
    font-size: var(--text-xs);
    color: var(--color-slate-700);
    margin: var(--space-2) 0 0;
    line-height: 1.45;
}
.location-tile__area a {
    color: var(--color-polar-blue);
    font-weight: var(--weight-bold);
    text-decoration: none;
}
.location-tile__area a:hover { text-decoration: underline; }
.location-tile__link {
    font-size: var(--text-sm);
    color: var(--color-polar-blue);
    font-weight: var(--weight-bold);
    margin-top: auto;
    padding-top: var(--space-3);
    transition: color 0.2s ease;
}
a.location-tile:hover .location-tile__link { color: var(--color-gold); }

.location-tile--placeholder {
    background: var(--color-ice);
    border-style: dashed;
    border-color: var(--color-slate-200);
    box-shadow: none;
}

/* ==================================================================
 * UNIFIED CARD PATTERN (v2.0.0)
 *
 * Sean's #1 critique: "Cards are all over the place."
 * This is the SINGLE canonical card pattern. All service cards,
 * location cards, blog post cards, review cards, CTA cards, FAQ
 * cards, gallery cards use this same base + optional modifiers.
 *
 * USE .card (and .card--ice-bg / .card--featured / .card--dark
 * modifiers) for every new card across the network. Legacy
 * variants above remain for backwards compat but should be
 * migrated to .card over time.
 * ================================================================== */

.card {
    background: var(--color-white);
    border: 1.5px solid var(--color-slate-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 6px 18px -8px rgba(2, 8, 36, 0.20);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    position: relative;
    min-width: 0;
    height: 100%;
}
.card:hover,
a.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px -10px rgba(2, 8, 36, 0.32), 0 0 0 1px rgba(46, 163, 242, 0.20);
    border-color: var(--color-polar-blue);
    text-decoration: none;
    color: inherit;
}
.card:focus-visible {
    outline: 2px solid var(--color-polar-blue);
    outline-offset: 2px;
}

.card__photo {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-slate-100);
}
.card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s var(--easing-out);
}
.card:hover .card__photo img { transform: scale(1.04); }

.card__body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1 1 auto;
}

.card__eyebrow {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-slate-500);
    font-weight: var(--weight-bold);
    margin: 0;
}

.card__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-extrabold);
    color: var(--color-primary-navy);
    margin: 0;
    line-height: 1.2;
}

.card__body-text,
.card__desc {
    font-size: var(--text-sm);
    color: var(--color-slate-700);
    line-height: 1.5;
    margin: 0;
    flex: 1 1 auto;
}

.card__meta {
    font-size: var(--text-xs);
    color: var(--color-slate-500);
    margin: 0;
}

.card__link {
    font-size: var(--text-sm);
    color: var(--color-polar-blue);
    font-weight: var(--weight-bold);
    margin-top: auto;
    padding-top: var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}
.card__link::after {
    content: "→";
    transition: transform 0.2s ease;
}
.card:hover .card__link,
a.card:hover .card__link { color: var(--color-gold); }
.card:hover .card__link::after { transform: translateX(4px); }

.card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-accent);
    color: var(--color-white);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    flex-shrink: 0;
}
.card__icon svg { width: 24px; height: 24px; }

/* Modifier: Ice-blue background (Polar Promise / About callouts) */
.card--ice-bg {
    background: var(--gradient-ice);
}

/* Modifier: Featured (gold accent stripe top) */
.card--featured::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 4px;
    background: var(--color-gold);
    z-index: 1;
}

/* Modifier: Polar-blue accent stripe (matches old location-card top stripe) */
.card--accent::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, rgba(46, 163, 242, 0.55) 20%, rgba(46, 163, 242, 1) 50%, rgba(46, 163, 242, 0.55) 80%, transparent 100%);
    z-index: 1;
}

/* Modifier: Dark card (navy gradient, used on light sections to add visual punch) */
.card--dark {
    background: linear-gradient(160deg, var(--color-primary-navy) 0%, #0c2e5e 60%, #081f48 100%);
    border-color: rgba(46, 163, 242, 0.22);
    color: var(--color-white);
}
.card--dark .card__title { color: var(--color-white); }
.card--dark .card__body-text,
.card--dark .card__desc { color: rgba(255,255,255,0.78); }
.card--dark .card__eyebrow { color: var(--color-polar-blue); }
.card--dark .card__link { color: var(--color-gold); }
.card--dark:hover .card__link { color: #ffd76a; }

/* Modifier: Compact (no photo, dense list) */
.card--compact .card__body { padding: var(--space-4); gap: var(--space-1); }
.card--compact .card__title { font-size: var(--text-base); }

/* Card grid helper — drop-in 3-up auto-flow grid */
.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}
@media (min-width: 640px) {
    .card-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}
@media (min-width: 1024px) {
    .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .card-grid--4 { grid-template-columns: repeat(4, 1fr); }
    .card-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
.card-grid > * { min-width: 0; }

/* ==================================================================
 * Universal page sub-header (page hero used on internal pages —
 * service pages, about, faq, gallery, etc.)
 * ================================================================== */

.page-hero {
    position: relative;
    margin-top: -80px;
    padding: calc(var(--space-20) + 80px) 0 var(--space-12);
    background:
        radial-gradient(ellipse 80% 60% at 85% 0%, rgba(46, 163, 242, 0.28) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 0% 100%, rgba(22, 73, 146, 0.45) 0%, transparent 60%),
        linear-gradient(180deg, var(--color-ink) 0%, var(--color-navy-mid) 50%, var(--color-ink) 100%);
    color: var(--color-white);
    overflow: hidden;
}
.page-hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, rgba(46, 163, 242, 0.6) 50%, transparent 100%);
}
.page-hero__inner {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: center;
}
.page-hero__eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-polar-blue);
    padding: var(--space-1) var(--space-3);
    border: 1px solid rgba(46, 163, 242, 0.3);
    border-radius: var(--radius-pill);
    background: rgba(46, 163, 242, 0.05);
}
.page-hero__title {
    color: var(--color-white);
    margin: 0;
    letter-spacing: -0.025em;
    line-height: 1.1;
    font-size: clamp(2rem, 3vw + 1rem, 3.5rem);
    max-width: 22ch;
}
.page-hero__subtitle {
    color: rgba(255,255,255,0.82);
    font-size: var(--text-lg);
    max-width: 56ch;
    margin: 0;
    line-height: var(--leading-normal);
}
.page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-3);
}

/* Location storefront hero variant (used on location-site front pages) */
.page-hero--storefront {
    margin-top: -80px;
    padding: calc(var(--space-24) + 80px) 0 var(--space-16);
    background-color: var(--color-ink);
    background-blend-mode: overlay;
}
.page-hero--storefront .page-hero__inner { align-items: flex-start; text-align: left; }
.page-hero--storefront .page-hero__title { max-width: 100%; }

/* Coming Soon overlay (Parker North) */
.page-hero__badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: var(--color-gold);
    color: var(--color-primary-navy);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-extrabold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ==================================================================
 * Benefit list (replaces spec strips on film pages — Sean's brand rule)
 * Three-up icon-paragraph row that DOES NOT mention specs/percentages.
 * ================================================================== */

.benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}
@media (min-width: 640px) {
    .benefits { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}
@media (min-width: 1024px) {
    .benefits { grid-template-columns: repeat(3, 1fr); }
    .benefits--4 { grid-template-columns: repeat(4, 1fr); }
}
.benefits > * { min-width: 0; }

.benefit {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-slate-100);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px -4px rgba(2, 8, 36, 0.10);
}
.benefit__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-ice);
    color: var(--color-polar-blue);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}
.benefit__icon svg { width: 22px; height: 22px; }
.benefit__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-extrabold);
    color: var(--color-primary-navy);
    margin: 0;
    line-height: 1.2;
}
.benefit__desc {
    font-size: var(--text-sm);
    color: var(--color-slate-700);
    line-height: var(--leading-normal);
    margin: 0;
}

/* ==================================================================
 * Tier cards (Premium / Plus / Ultimate Plus — only used on the
 * window-tint pillar page; NEVER on individual service pages).
 * ================================================================== */

.tier-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}
@media (min-width: 768px) {
    .tier-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

.tier-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--color-white);
    border: 2px solid var(--color-slate-100);
    border-radius: var(--radius-lg);
    box-shadow: 0 6px 18px -6px rgba(2, 8, 36, 0.16);
    position: relative;
    overflow: hidden;
}
.tier-card--best {
    border-color: var(--color-gold);
    box-shadow: 0 14px 32px -8px rgba(252, 198, 64, 0.30);
}
.tier-card--best::before {
    content: "Most Popular";
    position: absolute;
    top: 0; right: 0;
    padding: var(--space-1) var(--space-4);
    background: var(--color-gold);
    color: var(--color-primary-navy);
    font-size: var(--text-xs);
    font-weight: var(--weight-extrabold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom-left-radius: var(--radius-md);
}
.tier-card__grade {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--color-polar-blue);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.tier-card__name {
    font-size: var(--text-2xl);
    color: var(--color-primary-navy);
    margin: 0;
}
.tier-card__lead {
    font-size: var(--text-base);
    color: var(--color-slate-700);
    line-height: var(--leading-normal);
    margin: 0;
    flex: 1 1 auto;
}
.tier-card__features {
    list-style: none;
    margin: 0;
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-slate-100);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.tier-card__features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-slate-700);
}
.tier-card__features li::before {
    content: "✓";
    color: var(--color-polar-blue);
    font-weight: var(--weight-bold);
    flex-shrink: 0;
}
.tier-card__cta {
    margin-top: auto;
}

/* ==================================================================
 * Local SEO panel — service-area + landmarks + ZIP coverage block
 * used on location subdomain pages.
 * ================================================================== */

.local-seo {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding: var(--space-8);
    background: var(--gradient-ice);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(22, 73, 146, 0.10);
}
@media (min-width: 768px) {
    .local-seo { grid-template-columns: repeat(3, 1fr); }
}
.local-seo__col h3 {
    font-size: var(--text-base);
    color: var(--color-primary-navy);
    margin: 0 0 var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--weight-extrabold);
}
.local-seo__col p,
.local-seo__col ul {
    margin: 0;
    color: var(--color-slate-700);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}
.local-seo__col ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.local-seo__col ul li {
    padding: var(--space-1) var(--space-3);
    background: var(--color-white);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--color-primary-navy);
    border: 1px solid var(--color-slate-100);
}

/* ==================================================================
 * Contact section (location sites only — never the main site).
 * Two-column: NAP + map on left, lead form on right.
 * ================================================================== */

.contact-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}
@media (min-width: 1024px) {
    .contact-block { grid-template-columns: 1fr 1.2fr; gap: var(--space-10); }
}
.contact-block__nap {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.contact-block__nap-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--color-slate-700);
}
.contact-block__nap-row strong {
    color: var(--color-primary-navy);
    font-weight: var(--weight-extrabold);
    display: block;
}
.contact-block__nap-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--color-ice);
    color: var(--color-primary-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-block__map {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-slate-200);
    margin-top: var(--space-4);
}
.contact-block__map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}
.contact-block__form {
    background: var(--color-white);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-slate-100);
    box-shadow: 0 6px 18px -8px rgba(2, 8, 36, 0.18);
}

/* Chat CTA button (location sites — opens floating chat) */
.chat-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--color-polar-blue);
    color: var(--color-white);
    border-radius: var(--radius-md);
    font-weight: var(--weight-bold);
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}
.chat-cta:hover {
    background: var(--color-primary-navy);
    color: var(--color-white);
    text-decoration: none;
    transform: translateY(-2px);
}
.chat-cta__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-success);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25);
    animation: pulse-online 2s infinite;
}
@keyframes pulse-online {
    0%, 100% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25); }
    50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}


/* ============================================================================
   GRADE CARD BADGE COLORS (Sean locked 2026-06-02)
   Blue = Premium Ceramic / Orange = Ceramic Plus / Red = Ceramic Ultimate Plus
   ============================================================================ */
.grade-card__badge--blue {
    background: linear-gradient(135deg, #2ea3f2 0%, #1976d2 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(46, 163, 242, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.grade-card__badge--orange {
    background: linear-gradient(135deg, #ff9533 0%, #e07b1f 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 149, 51, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.grade-card__badge--red {
    background: linear-gradient(135deg, #e63946 0%, #c52d3a 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(230, 57, 70, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* Color stripe at top — overrides the default .grade-card::before gradient
   so each card carries its tier color (Blue/Orange/Red) at the top edge. */
.grade-card--blue::before  { background: #2ea3f2 !important; height: 4px !important; }
.grade-card--orange::before { background: #ff9533 !important; height: 4px !important; }
.grade-card--red::before    { background: #e63946 !important; height: 4px !important; }

/* ============================================================================
   PRICING CARD BADGE CLEARANCE
   Mirrors .grade-card__name pattern — reserve right padding so the absolute
   "Recommended" badge stops overlapping "Ceramic Ultimate Plus (Best)" title.
   ============================================================================ */
.pricing-card__name {
    padding-right: var(--space-20);
}
@media (max-width: 480px) {
    .pricing-card__name { padding-right: 0; }
    .pricing-card .grade-card__badge {
        position: static;
        align-self: flex-start;
        margin-bottom: var(--space-2);
    }
}

/* ============================================================================
   TRANSPARENT DARK-GLASS FORM FILLS — !important overrides
   Frostbite custom_form_widget renders white inputs even with bg:transparent
   set in its config. These overrides force the network-wide dark-glass
   aesthetic any time a form lives inside a dark wrapper.
   ============================================================================ */
.local-hero__form-card input[type="text"],
.local-hero__form-card input[type="email"],
.local-hero__form-card input[type="tel"],
.local-hero__form-card input[type="phone"],
.local-hero__form-card input[type="number"],
.local-hero__form-card input[type="url"],
.local-hero__form-card input[type="search"],
.local-hero__form-card select,
.local-hero__form-card textarea,
.contact-card input[type="text"],
.contact-card input[type="email"],
.contact-card input[type="tel"],
.contact-card input[type="phone"],
.contact-card input[type="number"],
.contact-card input[type="url"],
.contact-card input[type="search"],
.contact-card select,
.contact-card textarea,
[id*="custom_form"] input[type="text"],
[id*="custom_form"] input[type="email"],
[id*="custom_form"] input[type="tel"],
[id*="custom_form"] input[type="phone"],
[id*="custom_form"] input[type="number"],
[id*="custom_form"] input[type="url"],
[id*="custom_form"] input[type="search"],
[id*="custom_form"] select,
[id*="custom_form"] textarea {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: rgba(255, 255, 255, 0.94) !important;
    box-shadow:
        inset 0 1px 2px rgba(2, 8, 36, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.06) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.local-hero__form-card input::placeholder,
.local-hero__form-card textarea::placeholder,
.contact-card input::placeholder,
.contact-card textarea::placeholder,
[id*="custom_form"] input::placeholder,
[id*="custom_form"] textarea::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
    opacity: 1 !important;
}
/* Kill the light wrapper card that Frostbite injects inside our dark aside */
.local-hero__form-card > div,
.local-hero__form-card form,
.local-hero__form-card iframe,
.contact-card > div,
.contact-card form,
[id*="custom_form"] > div,
[id*="custom_form"] form {
    background: transparent !important;
    background-color: transparent !important;
}
/* Field labels above the inputs */
.local-hero__form-card label,
.contact-card label,
[id*="custom_form"] label {
    color: rgba(255, 255, 255, 0.94) !important;
}

/* ============================================================================
   GRAND-OPENING BANNER — Polar Tint Parker North CO (June 2026 launch window)
   Auto-shown/dismissed by JS in main.js between 2026-06-03 and 2026-06-30.
   ============================================================================ */
.opening-banner {
	position: relative;
	z-index: 90;
	background: linear-gradient(135deg, #fcc640 0%, #f5b800 100%);
	color: var(--color-primary-navy);
	padding: var(--space-3) 0;
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.opening-banner__inner {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;
	justify-content: center;
}
.opening-banner__icon {
	display: inline-flex;
	align-items: center;
	color: var(--color-primary-navy);
}
.opening-banner__msg {
	margin: 0;
	color: var(--color-primary-navy);
	line-height: var(--leading-snug);
}
.opening-banner__msg strong {
	color: var(--color-primary-navy);
	font-weight: var(--weight-extrabold);
}
.opening-banner__cta {
	background: var(--color-primary-navy);
	color: var(--color-white) !important;
	padding: 6px 14px;
	border-radius: var(--radius-sm);
	text-decoration: none;
	font-weight: var(--weight-bold);
	font-size: var(--text-sm);
	white-space: nowrap;
	transition: transform var(--duration-fast) var(--easing-out),
	            box-shadow var(--duration-fast) var(--easing-out);
}
.opening-banner__cta:hover,
.opening-banner__cta:focus {
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	text-decoration: none;
}
.opening-banner__dismiss {
	background: transparent;
	border: 0;
	color: var(--color-primary-navy);
	cursor: pointer;
	opacity: 0.6;
	padding: 4px;
	display: inline-flex;
	align-items: center;
	border-radius: 4px;
	transition: opacity var(--duration-fast) var(--easing-out),
	            background var(--duration-fast) var(--easing-out);
}
.opening-banner__dismiss:hover,
.opening-banner__dismiss:focus {
	opacity: 1;
	background: rgba(0, 0, 0, 0.08);
}
@media (max-width: 640px) {
	.opening-banner { padding: var(--space-2) 0; font-size: var(--text-xs); }
	.opening-banner__inner { gap: var(--space-2); }
	.opening-banner__msg { flex: 1 1 100%; text-align: center; }
}

/* ============================================================================
   FORM-FILL TRANSPARENCY HARDENING (2026-06-02b)
   Frostbite custom_form_widget injects nested wrapper divs with their own
   white background. The earlier rule only hit direct children — this hits
   ALL descendant wrappers, but leaves inputs/buttons styled.
   ============================================================================ */
.local-hero__form-card div,
.local-hero__form-card section,
.local-hero__form-card article,
.local-hero__form-card form,
.local-hero__form-card fieldset,
.contact-card div,
.contact-card section,
.contact-card form,
.contact-card fieldset,
[id*="custom_form"] div,
[id*="custom_form"] section,
[id*="custom_form"] form,
[id*="custom_form"] fieldset {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
.local-hero__form-card label,
.contact-card label,
[id*="custom_form"] label {
    color: rgba(255, 255, 255, 0.94) !important;
    background: transparent !important;
}
/* Required asterisks */
.local-hero__form-card label *,
.contact-card label *,
[id*="custom_form"] label * {
    color: var(--color-gold) !important;
}
/* CTA button — gold instead of Frostbite default blue */
.local-hero__form-card button[type="submit"],
.contact-card button[type="submit"],
[id*="custom_form"] button[type="submit"] {
    background: var(--color-gold) !important;
    background-color: var(--color-gold) !important;
    color: var(--color-primary-navy) !important;
    border-color: var(--color-gold) !important;
    font-weight: var(--weight-bold) !important;
}

/* ============================================================================
   LOCATION-TILE RATING BADGE — 4.9★ across all open locations (2026-06-02)
   ============================================================================ */
.location-tile__rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: var(--space-2) 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-primary-navy);
}
.location-tile__rating-stars {
    color: var(--color-gold);
    letter-spacing: 1px;
    font-size: var(--text-base);
}
.location-tile__rating-score {
    color: var(--color-primary-navy);
    font-weight: var(--weight-extrabold);
}
.location-tile__rating-count {
    color: var(--color-slate-500);
    font-weight: var(--weight-regular);
    font-size: var(--text-xs);
}

/* Hero rating chip on each location homepage */
.local-hero__rating-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(252, 198, 64, 0.18);
    border: 1px solid rgba(252, 198, 64, 0.42);
    border-radius: 999px;
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.local-hero__rating-chip-stars {
    color: var(--color-gold);
    letter-spacing: 1px;
}
.local-hero__rating-chip-score {
    color: var(--color-gold);
    font-weight: var(--weight-extrabold);
}
.local-hero__rating-chip-count {
    color: rgba(255, 255, 255, 0.7);
    font-weight: var(--weight-regular);
    font-size: var(--text-xs);
}

/* ============================================================================
   GRADE CARD DEPTH + COLORED GLOW (2026-06-02c)
   Each tier card gets a soft drop shadow + a colored ambient glow matching
   its assignment (Blue/Orange/Red). Glow intensifies on hover.
   ============================================================================ */
.grade-card {
    box-shadow: 0 4px 12px rgba(2, 8, 36, 0.08), 0 1px 3px rgba(2, 8, 36, 0.05);
    transition: box-shadow var(--duration-base, 200ms) var(--easing-out, ease-out),
                transform var(--duration-base, 200ms) var(--easing-out, ease-out);
}
.grade-card--blue {
    box-shadow:
        0 8px 32px rgba(46, 163, 242, 0.28),
        0 4px 12px rgba(46, 163, 242, 0.18),
        0 2px 6px rgba(2, 8, 36, 0.08) !important;
}
.grade-card--orange {
    box-shadow:
        0 8px 32px rgba(255, 149, 51, 0.30),
        0 4px 12px rgba(255, 149, 51, 0.20),
        0 2px 6px rgba(2, 8, 36, 0.08) !important;
}
.grade-card--red {
    box-shadow:
        0 8px 32px rgba(230, 57, 70, 0.28),
        0 4px 12px rgba(230, 57, 70, 0.18),
        0 2px 6px rgba(2, 8, 36, 0.08) !important;
}
/* Featured card (orange MOST POPULAR) — slightly stronger lift */
.grade-card--featured {
    transform: translateY(-4px);
}
/* Hover: lift + brighter glow */
.grade-card--blue:hover {
    transform: translateY(-4px);
    box-shadow:
        0 16px 48px rgba(46, 163, 242, 0.42),
        0 8px 20px rgba(46, 163, 242, 0.26),
        0 2px 6px rgba(2, 8, 36, 0.1) !important;
}
.grade-card--orange:hover {
    transform: translateY(-6px);
    box-shadow:
        0 16px 48px rgba(255, 149, 51, 0.44),
        0 8px 20px rgba(255, 149, 51, 0.28),
        0 2px 6px rgba(2, 8, 36, 0.1) !important;
}
.grade-card--red:hover {
    transform: translateY(-4px);
    box-shadow:
        0 16px 48px rgba(230, 57, 70, 0.42),
        0 8px 20px rgba(230, 57, 70, 0.26),
        0 2px 6px rgba(2, 8, 36, 0.1) !important;
}