/* ==========================================================================
   Southeast Insurance Group — Base Styles
   ========================================================================== */

:root {
	--color-primary: #1c3f60;
	--color-primary-dark: #122a42;
	--color-primary-light: #2c5a86;
	--color-accent: #E28B4D;
	--color-accent-dark: #C16F34;
	--color-bg: #ffffff;
	--color-bg-alt: #f4f7fa;
	--color-bg-navy-soft: #eef3f8;
	--color-bg-accent-soft: #fdf2e8;
	--color-text: #212b36;
	--color-text-light: #55677a;
	--color-border: #e2e8f0;
	--color-success: #2f7d5c;
	--font-heading: 'Poppins', 'Segoe UI', sans-serif;
	--font-body: 'Source Sans 3', 'Segoe UI', sans-serif;
	--container-width: 1200px;
	--radius: 10px;
	--shadow-sm: 0 1px 3px rgba(18, 42, 66, 0.08);
	--shadow-md: 0 6px 20px rgba(18, 42, 66, 0.1);
	--shadow-lg: 0 12px 32px rgba(18, 42, 66, 0.16);

	/* Site-wide 8-point spacing scale. Every margin, padding, and gap
	   uses one of these steps so the whole page shares one spacing
	   rhythm: --space-1/--space-2 for tightly related elements (a
	   label and its value, an icon and its caption), --space-3/--space-4
	   for grouping related content within a section, and
	   --space-6/--space-8/--space-12 for separating major sections
	   (kept to 60–120px). --gutter-sm/--gutter are for grid/column
	   gutters (kept to 20–30px), and --space-4 doubles as the page's
	   left/right edge margin (kept to 30–60px). */
	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 32px;
	--space-6: 48px;
	--space-8: 64px;
	--space-12: 96px;
	--gutter-sm: 20px;
	--gutter: 28px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.6;
	font-size: 17px;
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	color: var(--color-primary);
	line-height: 1.2;
	margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 700; }
.section-title-lg { font-size: clamp(1.9rem, 4vw, 2.75rem); }
h3 { font-size: 1.3rem; font-weight: 700; }
h4 { font-size: 1.1rem; font-weight: 600; }

p { margin: 0 0 var(--space-3); color: var(--color-text-light); }

a {
	color: var(--color-primary);
	text-decoration: none;
}

img { max-width: 100%; display: block; }

ul { margin: 0; padding: 0; }
li { list-style: none; }

.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 var(--space-4);
}

.section {
	padding: var(--space-8) 0;
}

.section-alt {
	background: var(--color-bg-alt);
}

.section-warm {
	background: var(--color-bg-accent-soft);
}

.section-navy {
	background: var(--color-primary);
	color: #fff;
}

.section-navy h2, .section-navy h3, .section-navy p { color: #fff; }
.section-navy p { color: rgba(255,255,255,0.85); }

.section-navy .card { color: var(--color-text); }
.section-navy .card h3, .section-navy .card h4 { color: var(--color-primary); }
.section-navy .card p { color: var(--color-text-light); }

.values-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gutter);
	align-items: center;
	margin-bottom: var(--space-6);
}

.values-intro-photo img {
	width: 100%;
	aspect-ratio: 1.7;
	object-fit: cover;
	object-position: center 60%;
	display: block;
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
}

/* For a self-contained graphic (its own headline/photo/CTA baked in,
   e.g. a carrier's ad unit) rather than a plain photo — shown in full
   at its native aspect ratio instead of being cropped to fill the
   1.7 photo slot. */
.values-intro-photo--contain img {
	aspect-ratio: 1;
	object-fit: contain;
}

/* Fallback for a product page whose story photo hasn't been supplied
   yet (see template-parts/coverage-page.php) — the text runs full
   width, capped for readability and left-aligned with the hero and
   section headers, instead of leaving an empty column
   where the photo would go. */
.values-intro--no-photo {
	grid-template-columns: 1fr;
}

.values-intro--no-photo .values-intro-text {
	max-width: 760px;
	margin: 0;
}

.values-intro-text h3 { font-size: 1.75rem; margin-bottom: var(--space-2); }
.values-intro-text p { font-size: 1.3rem; line-height: 1.55; margin: 0; }

@media (max-width: 800px) {
	.values-intro { grid-template-columns: 1fr; gap: var(--space-3); }
	.values-intro-reverse .values-intro-photo { order: 0; }
}

.values-intro-reverse .values-intro-photo { order: 2; }
.values-intro-reverse .values-intro-text { order: 1; }

.section-header {
	max-width: 680px;
	margin: 0 0 var(--space-6);
	text-align: left;
}

/* Wider, larger-type variant for a section header that should carry
   more visual weight — pairs with the .section-title-lg heading size. */
.section-header-lg {
	max-width: 820px;
}

.section-header-lg p {
	font-size: 1.3rem;
	line-height: 1.55;
}

.eyebrow {
	display: inline-block;
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: var(--space-1);
}

/* ==========================================================================
   Buttons & CTAs
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1rem;
	padding: var(--space-2) var(--space-3);
	border-radius: 999px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	white-space: nowrap;
}

.btn-primary {
	background: var(--color-accent);
	color: #fff;
	box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
	background: var(--color-accent-dark);
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.btn-outline {
	background: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn-outline:hover {
	background: var(--color-primary);
	color: #fff;
}

.btn-outline-light {
	background: transparent;
	color: #fff;
	border-color: rgba(255,255,255,0.6);
}

.btn-outline-light:hover {
	background: #fff;
	color: var(--color-primary);
}

.btn-lg { padding: var(--space-2) var(--space-4); font-size: 1.05rem; }

.seig-phone-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-primary);
}

.seig-phone-icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M493.4 24.6l-104-24a24 24 0 0 0-27.6 13.9l-48 112a24 24 0 0 0 6.9 28.1l60.6 49.6a350.9 350.9 0 0 1-159 159l-49.6-60.6a24 24 0 0 0-28.1-6.9l-112 48A24 24 0 0 0 18.6 388l24 104A24 24 0 0 0 66 512C311.9 512 512 313.3 512 66a24 24 0 0 0-18.6-41.4z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M493.4 24.6l-104-24a24 24 0 0 0-27.6 13.9l-48 112a24 24 0 0 0 6.9 28.1l60.6 49.6a350.9 350.9 0 0 1-159 159l-49.6-60.6a24 24 0 0 0-28.1-6.9l-112 48A24 24 0 0 0 18.6 388l24 104A24 24 0 0 0 66 512C311.9 512 512 313.3 512 66a24 24 0 0 0-18.6-41.4z'/%3E%3C/svg%3E") no-repeat center / contain;
	flex-shrink: 0;
}

.header-phone .seig-phone-link { color: var(--color-primary); font-size: 1.05rem; }
.header-phone .seig-phone-link small { display: block; font-family: var(--font-body); font-weight: 400; color: var(--color-text-light); font-size: 0.72rem; }

/* ==========================================================================
   Site Header
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--color-border);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-1) 0;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

.site-branding img {
	max-height: 56px;
	width: auto;
}

.site-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1rem;
	color: var(--color-primary);
	line-height: 1.1;
	margin: 0;
}

.site-title span {
	display: block;
	margin-top: var(--space-1);
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 1.75rem;
	color: var(--color-accent);
	letter-spacing: 0.01em;
	text-transform: none;
}

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

.header-cta-btn { display: inline-flex; }

.nav-menu {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

.nav-menu > li {
	position: relative;
}

.nav-menu > li > a,
.nav-menu > li > button {
	display: block;
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--space-1) var(--space-2);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--color-primary);
	border-radius: 6px;
}

.nav-menu > li > a:hover,
.nav-menu > li > button:hover,
.nav-menu > li.current-menu-item > a {
	color: var(--color-accent);
}

.nav-menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	padding: var(--space-1);
	border: 1px solid var(--color-border);
}

.nav-menu li.menu-item-has-children:focus-within > .sub-menu,
.nav-menu li.menu-item-has-children.is-open > .sub-menu {
	display: block;
}

.mega-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 720px;
	max-width: 90vw;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--color-border);
	padding: var(--space-3);
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-3);
}

.nav-menu li.menu-item-has-children:focus-within > .mega-menu,
.nav-menu li.menu-item-has-children.is-open > .mega-menu {
	display: grid;
}

.mega-menu-col h4 {
	font-family: var(--font-heading);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: var(--space-1);
}

.mega-menu-col li a {
	display: block;
	padding: var(--space-1) 0;
	font-size: 0.92rem;
	color: var(--color-text);
}

.mega-menu-col li a:hover { color: var(--color-accent); }

.nav-menu .sub-menu li a {
	display: block;
	padding: var(--space-1);
	border-radius: 6px;
	font-size: 0.92rem;
	color: var(--color-text);
}

.nav-menu .sub-menu li a:hover {
	background: var(--color-bg-alt);
	color: var(--color-accent);
}

.menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--space-1);
}

.menu-toggle span {
	display: block;
	width: 26px;
	height: 3px;
	background: var(--color-primary);
	margin: 5px 0; /* icon-glyph spacing for the hamburger's 3 bars, not page rhythm — exempt from the 8pt scale */
	border-radius: 2px;
}

/* ==========================================================================
   Top utility bar
   ========================================================================== */

.top-bar {
	background: var(--color-primary-dark);
	color: rgba(255,255,255,0.9);
	font-size: 0.85rem;
}

.top-bar .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: var(--space-1);
	padding-bottom: var(--space-1);
	gap: var(--space-2);
	flex-wrap: wrap;
}

.top-bar a { color: #fff; }
.top-bar-tagline { font-weight: 500; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
	background: var(--color-primary);
	color: #fff;
	padding: var(--space-8) 0;
	text-align: left;
}

.hero-photo {
	position: relative;
	min-height: 640px;
	display: flex;
	align-items: flex-start;
	padding-top: var(--space-12);
	padding-bottom: var(--space-12);
	overflow: hidden;
}

.hero-photo .container { position: relative; z-index: 2; width: 100%; }

.hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center top;
	z-index: 0;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to bottom,
		rgba(18, 42, 66, 0.18) 0%,
		rgba(18, 42, 66, 0.16) 60%,
		rgba(18, 42, 66, 0.55) 78%,
		rgba(18, 42, 66, 0.92) 92%,
		rgba(18, 42, 66, 0.97) 100%
	);
}

@media (max-width: 700px) {
	.hero-photo { min-height: 560px; padding-top: var(--space-8); padding-bottom: var(--space-12); }
}

.hero-eyebrow {
	color: #ffd9ae;
	font-family: var(--font-heading);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.85rem;
	margin-bottom: var(--space-3);
}

.hero-headline {
	max-width: 920px;
	margin: 0;
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: clamp(2.4rem, 5.2vw, 3.75rem);
	line-height: 1.15;
}

/* Coverage/product page heroes (plain .hero, no background photo)
   use a lighter weight than the homepage's photo hero — 800 read as
   too heavy/chunky at this size without a photo behind it. */
.hero:not(.hero-photo) .hero-headline {
	font-weight: 600;
}

.hero-subline {
	max-width: 780px;
	margin: var(--space-3) 0 0;
	color: rgba(255, 255, 255, 0.92);
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: clamp(1.15rem, 2.2vw, 1.4rem);
	line-height: 1.45;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-6);
	align-items: center;
	justify-content: flex-start;
}

.hero-actions .seig-phone-link { color: #fff; font-size: 1.15rem; }

/* Carriers strip: white background required — the UPCIC logo file
   has an opaque white background baked in, not transparency. Kept
   compact as a thin trust band directly under the hero (not a full
   section with its own big heading) so Coverage reads as the next
   real beat of the page, while carrier logos stay visible right up
   top, which matters to Charles. */
.carriers-section {
	background: #fff;
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--color-border);
}

.carriers-inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.carriers-label {
	font-family: var(--font-heading);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-light);
	white-space: nowrap;
}

.carriers-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-4);
}

/* At five logos, the row can outgrow the space left after the label
   on one line, wrapping to an orphaned single logo on its own row.
   Below tablet width, stack the label above the row so the row gets
   the container's full width to wrap into, and tighten the gap a
   touch so more logos fit per line before it has to wrap at all. */
@media (max-width: 900px) {
	.carriers-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2);
	}
	.carriers-row {
		gap: var(--space-3);
	}
}

.carrier-logo {
	height: 42px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
}

/* Neptune's mark is a tall, stacked lockup (icon + wordmark beneath
   it), not a wide horizontal logotype like Progressive/UPCIC. Fixing
   it to the same 42px height would shrink it to a ~38px-wide sliver,
   so it's sized by width instead and allowed to run a bit taller,
   keeping it visually comparable in weight to the other two rather
   than looking undersized next to them. */
.carrier-logo--mark {
	height: auto;
	width: 60px;
	max-width: 60px;
	max-height: 68px;
}

/* Solid, heavy wordmarks (Praxis) read larger than the others at the
   same height, so they're sized down to match in visual weight. */
.carrier-logo--bold {
	height: 30px;
}

.carrier-logo.seig-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 180px;
	height: 42px;
	text-align: center;
	font-size: 0.68rem;
	line-height: 1.2;
}

/* Coverage section: light gray section with a white card, so it reads
   distinctly from the warm quote-form section below it. */
.coverage-section {
	background: var(--color-bg-alt);
	padding-top: var(--space-8);
}

.coverage-section .section-header {
	margin-bottom: var(--space-2);
}

.coverage-card {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: start;
	gap: var(--space-3);
	padding: var(--space-4);
	margin-top: var(--space-4);
	background: #fff;
	border: 1px solid var(--color-border);
	border-top: 4px solid var(--color-accent);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}

.coverage-card-icon {
	width: 54px;
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: var(--color-bg-accent-soft);
	color: var(--color-primary);
	transition: color 0.15s ease;
	margin-bottom: var(--space-1);
}

.coverage-card-icon .lucide-icon {
	width: 38px;
	height: 38px;
	stroke-width: 2;
}

.coverage-card-col:hover .coverage-card-icon {
	color: var(--color-accent);
}

.coverage-card-col h3 {
	color: var(--color-accent);
	font-family: var(--font-heading);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: var(--space-2);
}

.coverage-card-col li a {
	display: block;
	padding: var(--space-1) 0;
	color: var(--color-text);
	font-size: 1.1rem;
	font-weight: 700;
}

.coverage-card-col li a:hover { color: var(--color-accent); text-decoration: underline; }

@media (max-width: 900px) {
	.coverage-card { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.coverage-card { grid-template-columns: 1fr; padding: var(--space-3); gap: var(--space-2); }
}

/* Featured coverage photo tiles */
.featured-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 240px;
	border-radius: var(--radius);
	overflow: hidden;
	background-size: cover;
	background-position: center;
	text-decoration: none;
	box-shadow: var(--shadow-sm);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* For a tile photo that reads too dark: redraws the tile's photo on a
   layer with a brightness/contrast filter, so it brightens without the
   gray haze a blend overlay causes. The filter sits on its own layer so
   the scrim and label above it stay untouched. */
.featured-tile--lighten::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	filter: brightness(1.15) contrast(1.08) saturate(1.1);
}

.featured-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.featured-tile-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(18, 42, 66, 0.85) 0%, rgba(18, 42, 66, 0.2) 55%, rgba(18, 42, 66, 0) 100%);
}

.featured-tile-label {
	position: relative;
	z-index: 1;
	padding: var(--space-2);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.2rem;
}

.featured-coverage-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gutter-sm);
	margin-top: var(--space-4);
}

@media (max-width: 900px) {
	.featured-coverage-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.featured-coverage-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Agent spotlight (homepage introduction of Charles)
   ========================================================================== */

.agent-spotlight {
	padding: var(--space-8) 0;
	background: var(--color-primary);
}

.agent-spotlight-inner {
	display: flex;
	align-items: center;
	gap: var(--gutter);
}

.agent-spotlight-photo {
	flex: 0 0 160px;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	border: 3px solid rgba(255, 255, 255, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--space-1);
}

.agent-spotlight-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.agent-spotlight-photo .seig-placeholder { font-size: 0.78rem; }

.agent-spotlight-text { flex: 1; }
.agent-spotlight-text h2 { margin-bottom: var(--space-1); color: #fff; }
.agent-spotlight-text p { max-width: 720px; font-size: 1.25rem; line-height: 1.6; color: rgba(255, 255, 255, 0.9); }
.agent-spotlight-text .eyebrow { color: #ffd9ae; }

@media (max-width: 700px) {
	.agent-spotlight-inner { flex-direction: column; text-align: center; gap: var(--space-2); }
	.agent-spotlight-text p { max-width: none; }
}

/* ==========================================================================
   Embedded quote form
   ========================================================================== */

.quote-form-section {
	padding: var(--space-8) 0;
	background: var(--color-bg-accent-soft);
}

.quote-form-section .section-header {
	margin-bottom: var(--space-3);
}

.quote-form-columns {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: var(--gutter);
	align-items: start;
	max-width: 980px;
	margin: 0;
}

.quote-form-wrap {
	background: #fff;
	border-radius: var(--radius);
	border-top: 4px solid var(--color-accent);
	box-shadow: var(--shadow-md);
	padding: var(--space-4);
}

.quote-form-agent {
	background: var(--color-primary);
	color: #fff;
	border-radius: var(--radius);
	padding: var(--space-4) var(--space-3);
	text-align: center;
}

.quote-form-agent-photo {
	width: 110px;
	height: 110px;
	margin: 0 auto var(--space-2);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	border: 3px solid rgba(255, 255, 255, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--space-1);
}

.quote-form-agent-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.quote-form-agent-photo .seig-placeholder { font-size: 0.72rem; }

.quote-form-agent h3 { color: #fff; margin-bottom: var(--space-1); }
.quote-form-agent p { color: rgba(255, 255, 255, 0.85); margin: 0; }

/* Text-only mention (not the Progressive logo/artwork) — safe to
   repeat here per Progressive's agent brand guidelines, which allow
   the phrase "Authorized Progressive Agent" in copy even where the
   logo itself shouldn't be duplicated on the same page. */
/* Progressive's "agent for 16 years" award graphic, shown in full as
   proof of the long-standing carrier relationship. */
.quote-form-agent-badge {
	display: block;
	width: 100%;
	max-width: 220px;
	height: auto;
	margin: var(--space-3) auto 0;
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
}

.quote-form-agent-tag {
	margin: var(--space-2) 0 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #ffd9ae !important;
}

.quote-form-fl-note {
	color: var(--color-text-light);
	font-size: 0.8rem;
	margin: calc(var(--space-1) * -1) 0 var(--space-2);
}

@media (max-width: 800px) {
	.quote-form-columns { grid-template-columns: 1fr; }
}

.quote-form-divider {
	display: flex;
	align-items: center;
	text-align: center;
	color: var(--color-text-light);
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: var(--space-2) 0;
}

.quote-form-divider::before,
.quote-form-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--color-border);
}

.quote-form-divider span { padding: 0 var(--space-2); }

.quote-form-call {
	width: 100%;
	gap: var(--space-1);
}

.quote-form-call .seig-phone-icon { background: currentColor; }

/* Blend WPForms Lite's default markup into the site's look */
.quote-form-wrap .wpforms-container { margin: 0; }
.quote-form-wrap .wpforms-field { padding: 0 0 var(--space-1); }

/* Every field stacks full-width in normal document order — Name
   (First, then Last, each their own row), Street Address, Phone,
   Email, Insurance Type, and the submit button. The only side-by-
   side pair is City+Zip, since we're Florida-only and have no state
   dropdown. Real fields are targeted by their input's `name`
   attribute (rather than sibling position) because WPForms injects
   anti-spam decoy fields at unpredictable spots in the DOM; decoys
   are already position:absolute (WPForms' own honeypot styling), so
   they take up no space and can't disrupt this flow.
   Flexbox with wrap — not CSS Grid — is deliberate: with plain block
   fields at width:100%, each one already fills the row and forces
   the next field onto its own line, and only City+Zip need an
   explicit width to sit together. An earlier CSS Grid version of
   this (explicit column spans) was fragile and produced dead gaps
   when the grid's row auto-placement didn't line up the way we
   expected, so this was intentionally rebuilt simpler. */
.quote-form-wrap .wpforms-field-container {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--gutter-sm);
}
.quote-form-wrap .wpforms-field-container > .wpforms-field {
	width: 100%;
}
.quote-form-wrap .wpforms-field-container > .wpforms-field:has(input[name="wpforms[fields][3]"]),
.quote-form-wrap .wpforms-field-container > .wpforms-field:has(input[name="wpforms[fields][5]"]),
.quote-form-wrap .wpforms-field-container > .wpforms-field:has(select[name="wpforms[fields][10]"]),
.quote-form-wrap .wpforms-field-container > .wpforms-field:has(select[name="wpforms[fields][11]"]) {
	width: calc(50% - var(--gutter-sm) / 2);
}

/* Vehicle-only fields (see main.js) — WPForms sets display on its
   fields, so the hidden attribute needs a firm override. */
.quote-form-wrap .wpforms-field[hidden] { display: none !important; }
.quote-form-wrap .wpforms-field-label {
	font-family: var(--font-heading) !important;
	font-weight: 600 !important;
	font-size: 0.85rem !important;
	color: var(--color-primary) !important;
	margin-bottom: var(--space-1) !important;
}
.quote-form-wrap input[type="text"],
.quote-form-wrap input[type="email"],
.quote-form-wrap input[type="tel"],
.quote-form-wrap select {
	font-family: var(--font-body) !important;
	font-size: 1rem !important;
	padding: var(--space-1) var(--space-2) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 8px !important;
	background: #fff !important;
	color: var(--color-text) !important;
	width: 100% !important;
}
.quote-form-wrap input:focus,
.quote-form-wrap select:focus {
	outline: 2px solid var(--color-accent) !important;
	outline-offset: 1px;
}
/* First and Last Name each get their own full-width row instead of
   WPForms' default side-by-side layout — override its "half width"
   column classes and stack the row's blocks as plain full-width
   blocks, with a small consistent gap between them matching the
   rest of the form's rhythm. */
.quote-form-wrap .wpforms-field-name .wpforms-field-row {
	display: block;
}
.quote-form-wrap .wpforms-field-name .wpforms-field-row-block {
	width: 100% !important;
	padding: 0 !important;
	margin-bottom: var(--space-1);
}
.quote-form-wrap .wpforms-field-name .wpforms-field-row-block:last-child {
	margin-bottom: 0;
}
.quote-form-wrap .wpforms-submit-container { margin-top: var(--space-1); }
.quote-form-wrap button[type="submit"] {
	width: 100% !important;
	background: var(--color-accent) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: var(--space-2) var(--space-3) !important;
	font-family: var(--font-heading) !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	cursor: pointer;
	transition: background 0.15s ease;
}
.quote-form-wrap button[type="submit"]:hover { background: var(--color-accent-dark) !important; }

@media (max-width: 600px) {
	.quote-form-wrap { padding: var(--space-3) var(--space-3) var(--space-4); }
}

/* ==========================================================================
   Coverage/product pages
   ========================================================================== */

.coverage-bullets {
	max-width: 760px;
	margin: 0 auto;
	display: grid;
	gap: var(--space-2);
}

.coverage-bullets li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: 1.05rem;
	color: var(--color-text);
}

.coverage-bullets li::before {
	content: '';
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 3px;
	background: var(--color-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 18 3.85 12.3l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 18 3.85 12.3l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ==========================================================================
   Trust bar
   ========================================================================== */

.trust-bar {
	background: #fff;
	border-bottom: 1px solid var(--color-border);
	padding: var(--space-4) 0;
}

.trust-bar .container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-3);
	text-align: center;
}

.trust-stat .stat-number {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 2.1rem;
	color: var(--color-primary);
	display: block;
}

.trust-stat .stat-label {
	color: var(--color-text-light);
	font-size: 1.05rem;
	font-weight: 500;
}

/* ==========================================================================
   Card grids
   ========================================================================== */

.grid {
	display: grid;
	gap: var(--space-3);
}

.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-4) var(--space-3);
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.card-icon {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background: var(--color-bg-navy-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-2);
	color: var(--color-primary);
	font-size: 1.4rem;
}

.card h3 { margin-bottom: var(--space-1); }
.card p { margin-bottom: var(--space-2); }
.card .card-link { font-weight: 700; color: var(--color-accent); font-family: var(--font-heading); font-size: 0.92rem; }

.resource-card {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* Product category tiles */
.product-tile {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.product-tile-header {
	background: var(--color-primary);
	color: #fff;
	padding: var(--space-3);
}

.product-tile-header.commercial { background: var(--color-accent-dark); }
.product-tile-header h3 { color: #fff; margin: 0; }
.product-tile-header p { color: rgba(255,255,255,0.85); margin: var(--space-1) 0 0; }

.product-tile-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px; /* hairline divider between cells via background bleed-through, not page rhythm — exempt from the 8pt scale */
	background: var(--color-border);
}

.product-tile-list li { background: #fff; }
.product-tile-list li:nth-child(even) { background: var(--color-bg-alt); }

.product-tile-list li a {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 72px;
	padding: var(--space-2);
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1rem;
	transition: background 0.15s ease, color 0.15s ease;
}

.product-tile-list li a:hover,
.product-tile-list li a:focus-visible {
	background: var(--color-accent);
	color: #fff;
}

.product-tile-footer {
	padding: var(--space-2) var(--space-3) var(--space-3);
}

/* Progressive co-branded banners (homepage "Backed by Progressive"
   section) — the images themselves are fixed, unmodified marketing
   assets from Progressive, so this only frames them: rounded corners,
   a subtle shadow, and a responsive width. No cropping, recoloring,
   or overlay content is added on top of the images. */
.progressive-banner-link {
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.progressive-banner-link:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.progressive-banner-img {
	display: block;
	max-width: 100%;
	width: 100%;
	height: auto;
}

/* Values grid (used on homepage + about page) */
.value-card { text-align: center; padding: var(--space-3) var(--space-2); }
.value-card .card-icon { margin: 0 auto var(--space-2); }

.value-card-photo {
	width: 100%;
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-2);
}

.value-card-icon {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--space-2);
	color: var(--color-accent);
}

.value-card-icon .lucide-icon {
	width: 44px;
	height: 44px;
	stroke-width: 1.75;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.testimonial-card {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: var(--space-4);
	margin: 0;
}

/* A lone review spans a wider single column instead of sitting in
   one third of the row with empty space beside it. */
.testimonial-single {
	grid-template-columns: 1fr;
	max-width: 760px;
}

.testimonial-single .testimonial-quote { font-size: 1.3rem; line-height: 1.55; }

.testimonial-more {
	margin-top: var(--space-4);
	font-weight: 600;
}

.testimonial-more a { color: var(--color-accent-dark); }

.testimonial-quote {
	font-size: 1.05rem;
	color: var(--color-text);
	font-style: italic;
	margin: 0 0 var(--space-2);
}

.testimonial-name {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-primary);
}

.testimonial-role {
	font-size: 0.85rem;
	color: var(--color-text-light);
}

.stars { color: var(--color-accent); letter-spacing: 2px; margin-bottom: var(--space-1); }

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

.faq-item {
	border-bottom: 1px solid var(--color-border);
}

.faq-question {
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: var(--space-2) var(--space-1);
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--color-primary);
}

.faq-question::after {
	content: '+';
	font-size: 1.6rem;
	color: var(--color-accent);
	transition: transform 0.2s ease;
	flex-shrink: 0;
	margin-left: var(--space-2);
}

.faq-item.is-open .faq-question::after { transform: rotate(45deg); }

.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
	padding: 0 var(--space-1);
}

.faq-item.is-open .faq-answer {
	max-height: 800px;
	padding-bottom: var(--space-2);
}

/* Collapsed answers stay out of the keyboard tab order. */
.faq-item:not(.is-open) .faq-answer { visibility: hidden; }

.faq-question:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}

/* ==========================================================================
   FAQ page (page-faq.php)
   ========================================================================== */

.faq-jump {
	background: var(--color-bg-navy-soft);
	border-bottom: 1px solid var(--color-border);
	padding: var(--space-2) 0;
}

.faq-jump .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-2);
}

.faq-jump-label {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-primary);
}

.faq-jump ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}

.faq-jump a {
	display: inline-block;
	padding: 6px 14px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	color: var(--color-primary);
	font-weight: 600;
	text-decoration: none;
}

.faq-jump a:hover,
.faq-jump a:focus-visible {
	border-color: var(--color-accent);
	color: var(--color-accent-dark);
}

.faq-group,
#glossary {
	scroll-margin-top: 120px;
}

.faq-group {
	max-width: 820px;
	margin-bottom: var(--space-6);
}

.faq-group h2 { margin-bottom: var(--space-1); }

.faq-answer p { font-size: 1.1rem; line-height: 1.6; }

.faq-more { margin-top: var(--space-1); }

.faq-more a {
	font-weight: 600;
	color: var(--color-accent-dark);
}

.faq-ask {
	max-width: 820px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	background: var(--color-bg-accent-soft);
}

.faq-ask h3 { margin: 0 0 4px; }
.faq-ask p { margin: 0; }

.faq-ask-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}

.glossary-group { margin-bottom: var(--space-4); }
.glossary-group h3 { margin-bottom: var(--space-2); }

.glossary-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-2) var(--gutter);
	margin: 0;
}

.glossary-item {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-2) var(--space-3);
}

.glossary-item dt {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-primary);
	margin-bottom: 4px;
}

.glossary-item dd {
	margin: 0;
	color: var(--color-text);
	line-height: 1.55;
}

@media (max-width: 700px) {
	.glossary-list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CTA band (repeated across every page)
   ========================================================================== */

.cta-band {
	background: var(--color-accent);
	color: #fff;
	padding: var(--space-8) 0;
	text-align: center;
}

.cta-band h2 { color: #fff; margin-bottom: var(--space-1); }
.cta-band p { color: rgba(255,255,255,0.92); margin-bottom: var(--space-3); }

.cta-band-actions {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.cta-band .seig-phone-link { color: #fff; font-size: 1.1rem; }

.cta-band .btn-primary {
	background: #fff;
	color: var(--color-accent-dark);
}
.cta-band .btn-primary:hover { background: var(--color-bg-alt); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	background: var(--color-primary-dark);
	color: rgba(255,255,255,0.75);
	padding: var(--space-8) 0 var(--space-3);
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
	gap: var(--gutter);
	margin-bottom: var(--space-4);
}

.site-footer a { color: rgba(255,255,255,0.75); }
.site-footer a:hover { color: #fff; }

.footer-grid h4 { color: #fff; margin-bottom: var(--space-2); font-size: 1rem; }

.footer-grid ul li { margin-bottom: var(--space-1); }
.footer-grid ul li a { color: rgba(255,255,255,0.75); font-size: 0.92rem; }
.footer-grid ul li a:hover { color: #fff; }

.footer-about p { color: rgba(255,255,255,0.7); font-size: 0.92rem; }

.footer-about .seig-phone-link { color: #fff; margin-bottom: var(--space-1); }

.footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.12);
	padding-top: var(--space-2);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-1);
	font-size: 0.82rem;
	color: rgba(255,255,255,0.55);
}

.footer-license {
	font-size: 0.8rem;
	color: rgba(255,255,255,0.5);
	margin-top: var(--space-1);
}

/* ==========================================================================
   Quote modal
   ========================================================================== */

.quote-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
}

.quote-modal.is-open {
	display: block;
}

.quote-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(18, 42, 66, 0.72);
}

.quote-modal-dialog {
	position: relative;
	max-width: 460px;
	margin: 6vh auto;
	background: #fff;
	border-radius: var(--radius);
	padding: var(--space-4);
	box-shadow: var(--shadow-lg);
	max-height: 88vh;
	overflow-y: auto;
}

.quote-modal-dialog h2 { margin-bottom: var(--space-1); }
.quote-modal-dialog > p { font-size: 0.95rem; }

.quote-modal-close {
	position: absolute;
	top: 14px;
	right: 16px;
	background: none;
	border: none;
	font-size: 1.8rem;
	line-height: 1;
	color: var(--color-text-light);
	cursor: pointer;
	padding: var(--space-1);
}

.quote-modal-close:hover { color: var(--color-primary); }

/* The modal is already a card, so the embedded form drops its own. */
.quote-modal .quote-form-wrap {
	padding: 0;
	border-top: 0;
	box-shadow: none;
}

.quote-modal-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin-top: var(--space-1);
}

.quote-modal-form label {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--color-primary);
	margin-top: var(--space-1);
}

.quote-modal-form input,
.quote-modal-form select {
	font-family: var(--font-body);
	font-size: 1rem;
	padding: var(--space-1) var(--space-2);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	background: #fff;
	color: var(--color-text);
}

.quote-modal-form input:focus,
.quote-modal-form select:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
}

.quote-modal-submit { margin-top: var(--space-2); width: 100%; }

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

@media (max-width: 520px) {
	.quote-modal-dialog { margin: 0; max-width: 100%; min-height: 100vh; border-radius: 0; max-height: 100vh; }
}

/* ==========================================================================
   Placeholder marker (visual flag for content still needed from client)
   ========================================================================== */

.seig-placeholder {
	background: #fff6e5;
	border: 1px dashed #d69a3e;
	color: #8a5a00;
	padding: 2px 8px; /* tiny inline dev-marker badge, not page rhythm — exempt from the 8pt scale */
	border-radius: 4px;
	font-size: 0.85em;
	font-weight: 600;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 960px) {
	.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.trust-bar .container { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1100px) {
	.top-bar-links { display: none; }

	.menu-toggle { display: block; }

	.nav-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		flex-direction: column;
		align-items: stretch;
		border-top: 1px solid var(--color-border);
		box-shadow: var(--shadow-md);
		padding: var(--space-1);
	}

	.nav-menu.is-open { display: flex; }

	.nav-menu > li { width: 100%; }
	.nav-menu > li > button { width: 100%; text-align: left; }
	.nav-menu .sub-menu {
		display: none;
		position: static;
		box-shadow: none;
		border: none;
		padding-left: var(--space-2);
	}
	.nav-menu li.menu-item-has-children.is-open > .sub-menu { display: block; }

	.mega-menu {
		display: none;
		position: static;
		transform: none;
		width: auto;
		max-width: none;
		box-shadow: none;
		border: none;
		grid-template-columns: 1fr;
		gap: var(--space-2);
		padding: var(--space-1) 0 var(--space-1) var(--space-2);
	}
	.nav-menu li.menu-item-has-children.is-open > .mega-menu { display: grid; }

	.header-phone small { display: none; }
	.header-cta-btn .btn { padding: var(--space-1) var(--space-2); font-size: 0.85rem; }
}

@media (max-width: 780px) {
	.grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; gap: var(--space-3); }
	.product-tile-list { grid-template-columns: 1fr; }
	.section { padding: var(--space-8) 0; }
}

/* ==========================================================================
   Contact page (page-contact.php)
   ========================================================================== */

.contact-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
	align-items: start;
}

.contact-intro {
	font-size: 1.2rem;
	line-height: 1.55;
	margin-bottom: var(--space-4);
}

.contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-3);
}

.contact-list li {
	display: flex;
	gap: var(--space-2);
	align-items: flex-start;
}

.contact-icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--color-bg-accent-soft);
	color: var(--color-accent-dark);
}

.contact-icon .lucide-icon { width: 24px; height: 24px; }

.contact-list h3 {
	font-size: 1.05rem;
	margin: 0 0 4px;
}

.contact-list a,
.contact-list address,
.contact-list span {
	font-size: 1.1rem;
	font-style: normal;
	line-height: 1.5;
}

.contact-list a { font-weight: 600; color: var(--color-primary); }

.contact-list address { margin-bottom: 4px; }

.contact-hours { margin: 0; }
.contact-hours div { display: flex; gap: var(--space-2); }
.contact-hours dt { font-weight: 600; min-width: 150px; }
.contact-hours dd { margin: 0; }

.contact-review {
	margin-top: var(--space-4);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border);
}

.contact-map {
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	min-height: 440px;
}

.contact-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 440px;
	border: 0;
}

@media (max-width: 860px) {
	.contact-layout { grid-template-columns: 1fr; gap: var(--space-4); }
	.contact-map, .contact-map iframe { min-height: 320px; }
}