/* =========================================================================
   Palmer Medicare
   =========================================================================

   The whole audience is 65+. That is not a constraint to design around, it is
   the design brief. Every choice below follows from it:

     - 18px body minimum, 16px absolute floor anywhere on the site
     - 1.6 line-height, generous paragraph spacing
     - 4.5:1 contrast minimum; body text is 16.3:1 and muted text 6.6:1
     - 48px minimum tap targets
     - visible focus rings on everything focusable
     - labels always visible, never placeholder-only
     - no thin weights, no all-caps body text, no low-contrast grey-on-grey

   Palette contrast, measured:
     ink   #14212E on white     16.3:1
     muted #4A5A6A on white      7.0:1   on #F4F7FA  6.6:1
     white on navy #0A2540      15.5:1
     navy  on amber #F59E0B      7.2:1
     link  #14456F on white     10.0:1

   Amber is a CTA colour that carries dark text. White on amber is only 2.1:1,
   so it is never used — buttons put navy on amber instead.
   ====================================================================== */

:root {
	--navy: #0a2540;
	--navy-800: #0f3355;
	--navy-mid: #14456f;
	--navy-tint: #e7eef5;
	--amber: #f59e0b;
	--amber-dark: #d97706;

	/* Star glyphs need their own darker amber. The button amber is only
	   3.19:1 against white and 2.99:1 against cream, which fails even the 3:1
	   floor for meaningful graphics. This one clears 4.5:1 on white, cream,
	   and off-white while still reading as amber rather than brown. */
	--star: #b45309;

	--cream: #fdf7ee;
	--ink: #14212e;
	--ink-muted: #4a5a6a;
	--surface: #fff;
	--surface-alt: #f4f7fa;
	--border: #cfdae4;
	--success: #0b6e4f;
	--danger: #a8231f;

	--fs-small: 1rem;
	--fs-body: 1.125rem;
	--fs-lead: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
	--fs-h4: 1.25rem;
	--fs-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	--fs-h2: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem);
	--fs-h1: clamp(2.125rem, 1.6rem + 2.6vw, 3.25rem);

	--sp-1: 0.5rem;
	--sp-2: 1rem;
	--sp-3: 1.5rem;
	--sp-4: 2.5rem;
	--sp-5: 4rem;
	--sp-6: 6rem;

	--radius: 10px;
	--radius-lg: 16px;
	--shadow: 0 1px 2px rgb(10 37 64 / 8%), 0 8px 24px rgb(10 37 64 / 8%);
	--shadow-lg: 0 2px 4px rgb(10 37 64 / 8%), 0 16px 48px rgb(10 37 64 / 12%);

	--wrap: 1180px;
	--measure: 68ch;

	--tap: 48px;

	--font-sans: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
	--font-serif: georgia, "Iowan Old Style", "Times New Roman", serif;
}

/* -------------------------------------------------------------------------
   Base
   ---------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--surface);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
	font-family: var(--font-serif);
	font-weight: 700;
	line-height: 1.18;
	margin: 0 0 var(--sp-2);
	color: var(--navy);
	text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.28; }

h4 {
	font-family: var(--font-sans);
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 var(--sp-1);
	color: var(--navy);
}

p { margin: 0 0 var(--sp-2); }
p:last-child { margin-bottom: 0; }

a {
	color: var(--navy-mid);
	text-underline-offset: 3px;
}

a:hover { color: var(--navy); }

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

ul, ol { margin: 0 0 var(--sp-2); padding-left: 1.4em; }
li { margin-bottom: 0.4em; }

strong { font-weight: 700; }

hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin: var(--sp-4) 0;
}

/* Focus: always visible, never removed. */
:focus-visible {
	outline: 3px solid var(--amber);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Dark surfaces need a light ring instead. */
.utility-bar :focus-visible,
.site-footer :focus-visible,
.cta-band :focus-visible {
	outline-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: var(--sp-2) var(--sp-3);
	background: var(--navy);
	color: #fff;
	font-weight: 700;
}

.skip-link:focus {
	left: 0;
	color: #fff;
}

/* -------------------------------------------------------------------------
   Layout
   ---------------------------------------------------------------------- */

.wrap {
	width: min(100% - 2.5rem, var(--wrap));
	margin-inline: auto;
}

.wrap--narrow { width: min(100% - 2.5rem, 820px); }

.section {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }

.section--alt { background: var(--surface-alt); }
.section--cream { background: var(--cream); }
.section--tint { background: var(--navy-tint); }

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

.section--navy h2,
.section--navy h3,
.section--navy h4 { color: #fff; }

.section--navy a { color: #fff; }

.section__head {
	max-width: var(--measure);
	margin-bottom: var(--sp-4);
}

.section__head--center {
	margin-inline: auto;
	text-align: center;
}

.lede {
	font-size: var(--fs-lead);
	color: var(--ink-muted);
	max-width: var(--measure);
}

.section--navy .lede { color: #d8e3ee; }

.eyebrow {
	display: block;
	font-size: var(--fs-small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--navy-mid);
	margin-bottom: var(--sp-1);
}

.section--navy .eyebrow { color: var(--amber); }

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

@media (min-width: 720px) {
	.grid--2 { grid-template-columns: repeat(2, 1fr); }
	.grid--3 { grid-template-columns: repeat(3, 1fr); }
	.grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
	.grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* -------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: var(--tap);
	padding: 0.75rem 1.5rem;
	border: 2px solid transparent;
	border-radius: var(--radius);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.btn:active { transform: translateY(1px); }

.btn--primary {
	background: var(--amber);
	border-color: var(--amber);
	color: var(--navy);
}

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

.btn--secondary {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

.btn--secondary:hover {
	background: var(--navy-800);
	border-color: var(--navy-800);
	color: #fff;
}

.btn--ghost {
	background: transparent;
	border-color: var(--navy);
	color: var(--navy);
}

.btn--ghost:hover {
	background: var(--navy);
	color: #fff;
}

.section--navy .btn--ghost {
	border-color: #fff;
	color: #fff;
}

.section--navy .btn--ghost:hover {
	background: #fff;
	color: var(--navy);
}

.btn--lg {
	font-size: var(--fs-lead);
	padding: 1rem 2rem;
	min-height: 56px;
}

.btn--block { width: 100%; }

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	align-items: center;
}

/* -------------------------------------------------------------------------
   Utility bar — phone, TTY, hours
   ---------------------------------------------------------------------- */

.utility-bar {
	background: var(--navy);
	color: #fff;
	font-size: var(--fs-small);
}

.utility-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-1) var(--sp-3);
	padding-block: 0.5rem;
	min-height: 44px;
}

.utility-bar a {
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.utility-bar a:hover {
	color: #fff;
	text-decoration: underline;
}

.utility-bar__hours { color: #cfdcea; }

.tty {
	font-weight: 400;
	color: #cfdcea;
	white-space: nowrap;
}

.utility-bar .tty { color: #cfdcea; }

/* -------------------------------------------------------------------------
   AEP banner
   ---------------------------------------------------------------------- */

.aep-banner {
	background: var(--amber);
	color: var(--navy);
	font-weight: 700;
	text-align: center;
	padding: 0.75rem var(--sp-2);
	font-size: var(--fs-small);
}

.aep-banner a { color: var(--navy); }

/* -------------------------------------------------------------------------
   Header
   ---------------------------------------------------------------------- */

.site-header {
	background: #fff;
	border-bottom: 1px solid var(--border);
	position: relative;
	z-index: 50;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	padding-block: var(--sp-2);
}

.site-brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: var(--navy);
	min-height: var(--tap);
}

.site-brand__mark {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	font-family: var(--font-serif);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.site-brand__text { line-height: 1.15; }

.site-brand__name {
	display: block;
	font-family: var(--font-serif);
	font-size: 1.25rem;
	font-weight: 700;
}

/* The mission line under the wordmark. Held at the 16px floor like everything
   else rather than shrunk to fit — it is decorative here and repeated in both
   the hero and the footer, so it hides on narrow screens instead of getting
   smaller. Shrinking is the tempting fix and the wrong one on this site. */
.site-brand__tag {
	display: none;
	font-size: var(--fs-small);
	line-height: 1.3;
	color: var(--ink-muted);
}

@media (min-width: 560px) {
	.site-brand__tag { display: block; }
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

/* Navigation */

.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--tap);
	padding: 0.5rem 0.875rem;
	background: #fff;
	border: 2px solid var(--navy);
	border-radius: var(--radius);
	color: var(--navy);
	font-size: var(--fs-small);
	font-weight: 700;
	cursor: pointer;
}

.nav-toggle__bars {
	display: block;
	width: 20px;
	height: 2px;
	background: currentcolor;
	position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	background: currentcolor;
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

.main-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-nav a {
	display: flex;
	align-items: center;
	min-height: var(--tap);
	padding: 0.5rem 0.75rem;
	color: var(--navy);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--radius);
}

.main-nav a:hover,
.main-nav .current-menu-item > a {
	background: var(--navy-tint);
	color: var(--navy);
	text-decoration: underline;
}

@media (max-width: 979px) {
	.main-nav {
		display: none;
		position: absolute;
		inset: 100% 0 auto;
		background: #fff;
		border-bottom: 1px solid var(--border);
		box-shadow: var(--shadow);
		padding: var(--sp-2);
	}

	.main-nav.is-open { display: block; }

	.main-nav li { margin: 0; }

	.main-nav a {
		border-bottom: 1px solid var(--border);
		border-radius: 0;
		font-size: var(--fs-lead);
	}

	.main-nav li:last-child a { border-bottom: 0; }
}

@media (min-width: 980px) {
	.nav-toggle { display: none; }

	.main-nav ul {
		display: flex;
		align-items: center;
		gap: 0.25rem;
	}

	.main-nav li { margin: 0; }
}

/* Sticky call button, small screens only. */

.sticky-call {
	position: fixed;
	inset: auto 0 0;
	z-index: 60;
	display: flex;
	gap: 1px;
	background: var(--border);
	box-shadow: 0 -2px 16px rgb(10 37 64 / 18%);
}

.sticky-call a {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 56px;
	padding: 0.5rem;
	font-weight: 700;
	font-size: var(--fs-body);
	text-decoration: none;
}

.sticky-call__call {
	background: var(--navy);
	color: #fff;
}

.sticky-call__call:hover { color: #fff; }

.sticky-call__quote {
	background: var(--amber);
	color: var(--navy);
}

.sticky-call__quote:hover { color: var(--navy); }

@media (min-width: 980px) {
	.sticky-call { display: none; }
}

@media (max-width: 979px) {
	/* Keep the sticky bar from covering the end of the page. */
	body { padding-bottom: 56px; }
}

/* -------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------- */

.hero {
	background: linear-gradient(180deg, var(--navy-tint) 0%, #fff 100%);
	padding-block: clamp(2rem, 5vw, 4rem);
}

.hero__inner {
	display: grid;
	gap: var(--sp-4);
	align-items: center;
}

@media (min-width: 900px) {
	.hero__inner {
		grid-template-columns: 1.15fr 0.85fr;
		gap: var(--sp-5);
	}
}

.hero__title { margin-bottom: var(--sp-2); }

.hero__mission {
	font-family: var(--font-serif);
	font-size: var(--fs-lead);
	font-style: italic;
	color: var(--navy-mid);
	margin-bottom: var(--sp-2);
}

.hero__lede {
	font-size: var(--fs-lead);
	color: var(--ink-muted);
	margin-bottom: var(--sp-3);
	max-width: 34em;
}

/* The ZIP-first entry point. Nearly every high performer in the category
   pairs a short form with a phone number, because the audience splits hard
   between people who want to self-serve and people who want to talk. */

.hero__zip {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	align-items: flex-end;
	padding: var(--sp-3);
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	margin-bottom: var(--sp-3);
}

.hero__zip .field { flex: 1 1 12rem; margin: 0; }

.hero__zip .btn { flex: 0 0 auto; }

.hero__or {
	display: block;
	font-size: var(--fs-small);
	color: var(--ink-muted);
	margin-bottom: var(--sp-1);
}

.hero__call {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	font-size: var(--fs-lead);
}

.hero__call .phone-link {
	font-family: var(--font-serif);
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
}

.hero__call .phone-link:hover { text-decoration: underline; }

.hero__portrait {
	position: relative;
	max-width: 420px;
	margin-inline: auto;
}

.hero__portrait img {
	width: 100%;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

.hero__portrait figcaption {
	margin-top: var(--sp-2);
	font-size: var(--fs-small);
	color: var(--ink-muted);
	text-align: center;
}

.hero__portrait strong { color: var(--navy); }

/* Trust chips */

.trust-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-top: var(--sp-3);
	padding: 0;
	list-style: none;
}

.trust-chips li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.4rem 0.875rem;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--navy);
}

.trust-chips .star { color: var(--star); }

/* -------------------------------------------------------------------------
   Carrier logo band
   ---------------------------------------------------------------------- */

.logo-band__title {
	text-align: center;
	font-size: var(--fs-small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin-bottom: var(--sp-3);
}

.logo-band__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2) var(--sp-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.logo-band__list li {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--navy);
	opacity: 0.75;
}

.logo-band__list img {
	max-height: 42px;
	width: auto;
}

.logo-band__note {
	margin-top: var(--sp-3);
	text-align: center;
	font-size: var(--fs-small);
	color: var(--ink-muted);
}

/* -------------------------------------------------------------------------
   Cards
   ---------------------------------------------------------------------- */

.card {
	display: flex;
	flex-direction: column;
	padding: var(--sp-3);
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	height: 100%;
}

.card--raised { box-shadow: var(--shadow); }

.card__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: var(--sp-2);
	border-radius: 12px;
	background: var(--navy-tint);
	color: var(--navy);
	font-size: 1.5rem;
	line-height: 1;
}

.card p { color: var(--ink-muted); }

.card__link {
	margin-top: auto;
	padding-top: var(--sp-2);
	font-weight: 700;
	text-decoration: none;
}

.card__link:hover { text-decoration: underline; }

.card__link::after {
	content: " \2192";
}

/* Doors: the three-way intent split. */

.door {
	display: block;
	padding: var(--sp-3);
	background: #fff;
	border: 2px solid var(--border);
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: inherit;
	height: 100%;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.door:hover {
	border-color: var(--navy);
	color: inherit;
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}

.door h3 { margin-bottom: 0.5rem; }

.door p {
	color: var(--ink-muted);
	margin-bottom: var(--sp-2);
}

.door__cue {
	font-weight: 700;
	color: var(--navy-mid);
}

.door__cue::after { content: " \2192"; }

/* -------------------------------------------------------------------------
   Plan comparison
   ---------------------------------------------------------------------- */

.plan-card { border-top: 6px solid var(--navy); }
.plan-card--advantage { border-top-color: var(--navy-mid); }
.plan-card--medigap { border-top-color: var(--amber); }
.plan-card--partd { border-top-color: var(--success); }

.plan-card ul {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--sp-2);
}

.plan-card li {
	position: relative;
	padding-left: 1.6em;
	margin-bottom: 0.5em;
	color: var(--ink-muted);
}

.plan-card li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--success);
	font-weight: 700;
}

.plan-card li.is-caution::before {
	content: "\21D2";
	color: var(--amber-dark);
}

/* Comparison table */

.table-scroll {
	overflow-x: auto;
	margin-bottom: var(--sp-2);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

table.compare {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: var(--fs-small);
	background: #fff;
}

table.compare caption {
	padding: var(--sp-2);
	font-weight: 700;
	text-align: left;
	color: var(--navy);
}

table.compare th,
table.compare td {
	padding: 0.75rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}

table.compare thead th {
	background: var(--navy);
	color: #fff;
	font-weight: 700;
}

table.compare tbody th {
	font-weight: 700;
	color: var(--navy);
	background: var(--surface-alt);
}

table.compare tbody tr:last-child th,
table.compare tbody tr:last-child td { border-bottom: 0; }

/* -------------------------------------------------------------------------
   Steps
   ---------------------------------------------------------------------- */

.steps {
	counter-reset: step;
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--sp-3);
}

@media (min-width: 800px) {
	.steps { grid-template-columns: repeat(3, 1fr); }
}

.steps li {
	counter-increment: step;
	margin: 0;
	padding-top: 4rem;
	position: relative;
}

.steps li::before {
	content: counter(step);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--amber);
	color: var(--navy);
	font-family: var(--font-serif);
	font-size: 1.5rem;
	font-weight: 700;
}

.steps p { color: var(--ink-muted); }

.section--navy .steps p { color: #d8e3ee; }

/* -------------------------------------------------------------------------
   Testimonials
   ---------------------------------------------------------------------- */

.testimonial {
	display: flex;
	flex-direction: column;
	padding: var(--sp-3);
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	height: 100%;
}

.testimonial__stars {
	color: var(--star);
	font-size: 1.25rem;
	letter-spacing: 0.1em;
	margin-bottom: var(--sp-2);
}

.testimonial blockquote {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-body);
	line-height: 1.65;
}

.testimonial blockquote p::before { content: "\201C"; }
.testimonial blockquote p::after { content: "\201D"; }

.testimonial figcaption {
	margin-top: auto;
	font-weight: 700;
	color: var(--navy);
}

.testimonial__meta {
	display: block;
	font-weight: 400;
	font-size: var(--fs-small);
	color: var(--ink-muted);
}

/* Required wherever benefits are named. */
.disclaimer-inline {
	margin-top: var(--sp-3);
	padding: var(--sp-2);
	background: var(--surface-alt);
	border-left: 4px solid var(--border);
	font-size: var(--fs-small);
	color: var(--ink-muted);
}

/* -------------------------------------------------------------------------
   AEP timeline
   ---------------------------------------------------------------------- */

.timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-3);
	position: relative;
}

@media (min-width: 800px) {
	.timeline { grid-template-columns: repeat(3, 1fr); }

	.timeline::before {
		content: "";
		position: absolute;
		top: 1.25rem;
		left: 12%;
		right: 12%;
		height: 3px;
		background: var(--navy-tint);
	}
}

.timeline li {
	margin: 0;
	position: relative;
	padding-top: 3.5rem;
	text-align: center;
}

.timeline li::before {
	content: "";
	position: absolute;
	top: 0.5rem;
	left: 50%;
	transform: translateX(-50%);
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--amber);
	border: 3px solid #fff;
	box-shadow: 0 0 0 3px var(--amber);
}

.timeline__date {
	display: block;
	font-family: var(--font-serif);
	font-size: var(--fs-h4);
	font-weight: 700;
	color: var(--navy);
}

.timeline p {
	color: var(--ink-muted);
	font-size: var(--fs-small);
}

/* -------------------------------------------------------------------------
   Agent bio
   ---------------------------------------------------------------------- */

.bio {
	display: grid;
	gap: var(--sp-4);
	align-items: center;
}

@media (min-width: 800px) {
	.bio { grid-template-columns: 320px 1fr; }
}

.bio__photo img {
	width: 100%;
	max-width: 320px;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	margin-inline: auto;
}

.bio__license {
	font-size: var(--fs-small);
	color: var(--ink-muted);
}

/* -------------------------------------------------------------------------
   FAQ
   ---------------------------------------------------------------------- */

.faq { max-width: var(--measure); }

.faq details {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	margin-bottom: var(--sp-2);
	background: #fff;
}

.faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	min-height: var(--tap);
	padding: var(--sp-2);
	font-family: var(--font-serif);
	font-size: var(--fs-h4);
	font-weight: 700;
	color: var(--navy);
	cursor: pointer;
	list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--navy-mid);
}

.faq details[open] summary::after { content: "\2212"; }

.faq__body {
	padding: 0 var(--sp-2) var(--sp-2);
	color: var(--ink-muted);
}

/* -------------------------------------------------------------------------
   Forms
   ---------------------------------------------------------------------- */

.field { margin-bottom: var(--sp-2); }

.field label,
fieldset legend {
	display: block;
	margin-bottom: 0.375rem;
	font-weight: 700;
	color: var(--navy);
}

.req { color: var(--danger); }

.field__hint {
	display: block;
	margin-top: 0.375rem;
	font-size: var(--fs-small);
	color: var(--ink-muted);
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="search"],
select,
textarea {
	width: 100%;
	min-height: var(--tap);
	padding: 0.625rem 0.875rem;
	background: #fff;
	border: 2px solid var(--border);
	border-radius: var(--radius);
	font-family: inherit;
	font-size: var(--fs-body);
	color: var(--ink);
}

input:hover,
select:hover,
textarea:hover { border-color: var(--ink-muted); }

input:focus,
select:focus,
textarea:focus {
	border-color: var(--navy);
	outline: 3px solid var(--amber);
	outline-offset: 1px;
}

textarea { min-height: 8rem; resize: vertical; }

fieldset {
	margin: 0 0 var(--sp-3);
	padding: 0;
	border: 0;
}

fieldset legend { padding: 0; }

.radio {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-height: var(--tap);
	font-weight: 400;
	color: var(--ink);
	cursor: pointer;
}

.radio input { width: 1.375rem; height: 1.375rem; flex: 0 0 auto; }

.lead-form {
	padding: var(--sp-4);
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}

.lead-form__title { margin-bottom: var(--sp-1); }

.lead-form__intro {
	color: var(--ink-muted);
	margin-bottom: var(--sp-3);
}

.lead-form__grid { display: grid; gap: 0 var(--sp-2); }

@media (min-width: 640px) {
	.lead-form__grid { grid-template-columns: repeat(2, 1fr); }
}

.field--full { grid-column: 1 / -1; }

/* Honeypot: off-screen rather than display:none, so bots that check
   computed style still fill it in. aria-hidden keeps it away from
   screen readers, who must never be asked to complete a decoy. */
.lead-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.lead-form__errors {
	padding: var(--sp-2);
	margin-bottom: var(--sp-3);
	background: #fdf0ef;
	border: 2px solid var(--danger);
	border-radius: var(--radius);
	color: #7a1a17;
}

.lead-form__errors h3 {
	font-size: var(--fs-h4);
	color: #7a1a17;
	margin-bottom: 0.5rem;
}

.lead-form__errors ul { margin: 0; padding-left: 1.25em; }

.lead-form__submit { margin: var(--sp-3) 0 var(--sp-2); }

.lead-form__alt {
	font-size: var(--fs-small);
	color: var(--ink-muted);
}

/* Consent block — A2P 10DLC.
   Boxes are large, labels are full size, and the disclosure text sits at 16px
   rather than being shrunk. "Clear and conspicuous" is the standard, and a
   reviewer who has to squint is a reviewer who rejects. */

.consent {
	padding: var(--sp-3);
	background: var(--surface-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	margin-bottom: var(--sp-3);
}

.consent legend {
	font-size: var(--fs-h4);
	font-family: var(--font-serif);
}

.consent__note {
	font-size: var(--fs-small);
	color: var(--ink-muted);
	margin-bottom: var(--sp-2);
}

.consent__item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: var(--sp-2);
	margin-bottom: var(--sp-2);
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.consent__item input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.125rem;
	accent-color: var(--navy);
}

.consent__item label {
	margin: 0;
	font-weight: 400;
	color: var(--ink);
	cursor: pointer;
}

.consent__label {
	display: block;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 0.25rem;
}

.consent__text {
	display: block;
	font-size: var(--fs-small);
	line-height: 1.55;
	color: var(--ink-muted);
}

.consent__tcpa {
	font-size: var(--fs-small);
	line-height: 1.55;
	color: var(--ink-muted);
	margin: 0;
}

/* -------------------------------------------------------------------------
   CTA band
   ---------------------------------------------------------------------- */

.cta-band {
	background: var(--navy);
	color: #fff;
	text-align: center;
}

.cta-band h2 { color: #fff; }
.cta-band p { color: #d8e3ee; }

.cta-band .btn-row { justify-content: center; }

.cta-band .phone-link {
	color: #fff;
	font-family: var(--font-serif);
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
	font-weight: 700;
	text-decoration: none;
}

.cta-band .phone-link:hover { text-decoration: underline; }

.cta-band .tty { color: #cfdcea; }

/* -------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------- */

.site-footer {
	background: var(--navy);
	color: #d8e3ee;
	padding-block: var(--sp-5) var(--sp-3);
	font-size: var(--fs-small);
}

.site-footer h2,
.site-footer h3 {
	color: #fff;
	font-size: var(--fs-h4);
	font-family: var(--font-sans);
	margin-bottom: var(--sp-2);
}

.site-footer a { color: #fff; }

.footer-grid {
	display: grid;
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);
}

@media (min-width: 720px) {
	.footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

.footer-grid ul { list-style: none; margin: 0; padding: 0; }

.footer-grid li { margin-bottom: 0.25rem; }

.footer-grid a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
}

.footer-brand__mission {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: var(--fs-body);
	color: #fff;
	margin-bottom: var(--sp-2);
}

.footer-contact address {
	font-style: normal;
	line-height: 1.7;
}

/* Compliance block.
   Deliberately full size and full contrast. CMS requires the TPMO disclaimer
   be clear and conspicuous; shrinking it to grey 11px is the single most
   common way agencies fail that test. */

.compliance {
	border-top: 1px solid rgb(255 255 255 / 22%);
	padding-top: var(--sp-3);
	color: #cfdcea;
	font-size: var(--fs-small);
	line-height: 1.6;
}

.compliance p { margin-bottom: var(--sp-2); }

.compliance strong { color: #fff; }

.footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1) var(--sp-3);
	list-style: none;
	margin: var(--sp-3) 0 0;
	padding: 0;
}

.footer-legal li { margin: 0; }

.footer-copy {
	margin-top: var(--sp-2);
	color: #a9bccf;
}

/* -------------------------------------------------------------------------
   Page furniture
   ---------------------------------------------------------------------- */

.page-hero {
	background: var(--navy-tint);
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

.page-hero h1 { margin-bottom: var(--sp-1); }

.breadcrumbs {
	font-size: var(--fs-small);
	color: var(--ink-muted);
	margin-bottom: var(--sp-2);
}

.breadcrumbs a { color: var(--navy-mid); }

.entry-content { max-width: var(--measure); }

.entry-content > * + * { margin-top: var(--sp-2); }

.entry-content h2 { margin-top: var(--sp-4); }
.entry-content h3 { margin-top: var(--sp-3); }

.entry-content ul,
.entry-content ol { padding-left: 1.4em; }

/* Legal pages: narrower measure, tighter rhythm, still 18px. */
.legal .entry-content { max-width: 62ch; }
.legal .entry-content h2 { margin-top: var(--sp-4); }

.post-card {
	padding: var(--sp-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: #fff;
}

.post-card h2 { font-size: var(--fs-h3); margin-bottom: 0.5rem; }

.post-card__meta {
	font-size: var(--fs-small);
	color: var(--ink-muted);
	margin-bottom: var(--sp-1);
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1);
	margin-top: var(--sp-4);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tap);
	min-height: var(--tap);
	padding: 0 0.75rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	text-decoration: none;
	font-weight: 700;
}

.pagination .current {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

/* -------------------------------------------------------------------------
   Print
   ---------------------------------------------------------------------- */

@media print {
	.utility-bar,
	.site-header__actions,
	.sticky-call,
	.nav-toggle,
	.cta-band,
	.lead-form { display: none !important; }

	body { padding-bottom: 0; font-size: 12pt; }

	.site-footer { background: none; color: #000; }
	.site-footer a { color: #000; }

	/* The disclaimer has to survive printing — it is part of the document. */
	.compliance { color: #000; border-top: 1px solid #000; }
}