/* ===========================================================
   Western Retirement Advisors — Design System
   =========================================================== */

:root {
  /* Brand palette (official hex values from WRA brand guide) */
  --navy-900: #14243a;
  --navy-800: #1f3b68;
  --navy-700: #25477d;
  --blue-500: #2f5ca5;
  --blue-300: #4180e5;
  --blue-100: #f0f6ff;
  --sand-100: #efece5;
  --sand-200: #e2dcd0;
  --ink: #2a3441;
  --ink-soft: #5b6675;
  --white: #ffffff;
  --border: #e2e6ec;

  --font-display: 'Raleway', Georgia, 'Times New Roman', serif;
  --font-body: 'Roboto', 'Segoe UI', Arial, sans-serif;

  --container: 1180px;
  --radius: 6px;
  --shadow-sm: 0 2px 10px rgba(20, 44, 70, 0.08);
  --shadow-md: 0 12px 32px rgba(20, 44, 70, 0.14);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 18px; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  font-size: 1.08rem;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy-800);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 700;
}
h1 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); }
h2 { font-size: clamp(1.85rem, 3.2vw, 2.55rem); }
h3 { font-size: 1.45rem; }
p { margin: 0 0 1em; color: var(--ink-soft); }
a { color: var(--blue-500); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 72px 0; }
.section-tight { padding: 48px 0; }
.bg-sand { background: var(--sand-100); }
.bg-navy { background: var(--navy-800); color: var(--white); }
.bg-navy h1, .bg-navy h2, .bg-navy h3 { color: var(--white); }
.bg-navy p { color: rgba(255,255,255,0.82); }
.bg-blue-100 { background: var(--blue-100); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--blue-500);
  margin-bottom: 10px;
}
.bg-navy .eyebrow { color: var(--blue-300); }

.lede {
  font-size: 1.25rem;
  max-width: 640px;
}
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.98rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color .15s ease;
  text-decoration: none !important;
  font-family: var(--font-body);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--blue-500); color: var(--white); }
.btn-primary:hover { background: var(--navy-800); }
.btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.6); }
.btn-outline:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }
.btn-navy { background: var(--navy-900); color: var(--white); }
.btn-navy:hover {
  background: var(--blue-300);
  box-shadow: 0 6px 18px rgba(65, 128, 229, 0.45);
}
.btn-ghost-navy { background: transparent; color: var(--navy-800); border-color: var(--navy-800); }
.btn-ghost-navy:hover { background: var(--navy-800); color: var(--white); }
.btn-lg { padding: 16px 34px; font-size: 1.12rem; }
.btn-block { width: 100%; justify-content: center; }

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  max-width: var(--container);
  margin: 0 auto;
  gap: 20px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 78px; width: auto; }
.brand-text { display: none; }

.header-actions { display: flex; align-items: center; gap: 12px; }
.header-actions .phone-link {
  display: none;
  align-items: center;
  gap: 8px;
  color: var(--navy-800);
  font-weight: 700;
}

.main-nav {
  border-top: 1px solid var(--border);
  background: var(--white);
}
.main-nav .container { display: flex; justify-content: center; gap: 40px; }
.main-nav a {
  display: block;
  padding: 14px 0;
  color: var(--navy-800);
  font-weight: 600;
  font-size: 0.96rem;
  letter-spacing: 0.02em;
  border-bottom: 3px solid transparent;
}
.main-nav a:hover, .main-nav a.active {
  color: var(--blue-500);
  border-bottom-color: var(--blue-500);
  text-decoration: none;
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span { width: 26px; height: 2px; background: var(--navy-800); display: block; }

@media (min-width: 860px) {
  .brand-text { display: block; }
  .brand-text .line1 { font-family: var(--font-display); font-weight: 700; color: var(--navy-800); font-size: 1.35rem; letter-spacing: 0.02em; }
  .brand-text .line2 { font-size: 0.72rem; letter-spacing: 0.16em; color: var(--ink-soft); text-transform: uppercase; }
  .header-actions .phone-link { display: inline-flex; }
  .nav-toggle { display: none; }
}
@media (max-width: 859px) {
  .main-nav { display: none; }
  .main-nav.open { display: block; }
  .main-nav .container { flex-direction: column; gap: 0; align-items: stretch; text-align: left; }
  /* Bolder top-level items (Home, Plan Options, Company, Resources, Quote
     Options) in the mobile menu, for easier scanning by older visitors. */
  .main-nav a { font-weight: 700; }
}

/* ===== Hero ===== */
.hero {
  position: relative;
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color: var(--white);
  overflow: hidden;
  padding: 96px 0 84px;
}
/* Hero background photo: static grayscale image + navy tint (no motion —
   the parallax effect lives in the mountain divider below instead). */
.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero-bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(100%) contrast(1.05) brightness(0.9);
}
.hero-bg-tint {
  position: absolute;
  inset: 0;
  /* Near-black, near-opaque pool over the upper-left corner (eyebrow +
     headline), fading into a darker overall navy tint (more black mixed
     into the blue than before) elsewhere. */
  background:
    radial-gradient(ellipse 760px 560px at 0% 0%, rgba(3,6,11,0.82) 0%, rgba(3,6,11,0) 68%),
    linear-gradient(180deg, rgba(8,14,24,0.95) 0%, rgba(20,36,60,0.90) 100%);
}
.hero .container { position: relative; z-index: 2; }
/* Brighter accent blue for the hero's headline elements — matches the
   --blue-300 used elsewhere for on-navy eyebrows (e.g. "How It Works"). */
.hero .eyebrow { color: var(--blue-300); }
.hero .btn-primary { background: var(--blue-300); }
/* Rollover needs to read as an unmistakable change, not a subtle shade
   shift, for visitors who have trouble distinguishing close colors —
   swap to a solid white pill with a bright-blue ring/glow instead of a
   small background tweak. */
.hero .btn-primary:hover {
  background: var(--white);
  color: var(--navy-900);
  box-shadow: 0 0 0 3px var(--blue-300), 0 10px 24px rgba(65, 128, 229, 0.45);
}
.hero .check-list li::before { background-color: var(--blue-300); }
.hero-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 940px) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; }
}
.hero h1 { color: var(--white); }
.hero .lede { color: rgba(255,255,255,0.85); font-size: 1.2rem; max-width: 560px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hero-art {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 28px;
}
.hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.hero-stats .stat-num { font-family: var(--font-display); font-size: 2.1rem; color: var(--white); font-weight: 700; }
.hero-stats .stat-label { font-size: 0.85rem; color: rgba(255,255,255,0.75); }

/* Divider strip: a plain rectangular photo peeking between the hero and the
   next section. The photo layer inside is oversized and shifted by JS
   scroll (see js/main.js) for a subtle parallax feel as it scrolls by. */
.mountain-divider {
  position: relative;
  width: 100%;
  height: 65px;
  overflow: hidden;
  background: var(--sand-100);
}
.mountain-divider-image {
  position: absolute;
  left: 0;
  right: 0;
  top: -60%;
  height: 220%;
  background-size: cover;
  background-position: center;
  will-change: transform;
}

/* "How We Help" section (homepage only) — swaps the flat .bg-sand color for
   a static stone/marble photo, kept behind a light sand-toned wash so the
   navy heading and white plan-tile cards stay legible on top. This does NOT
   touch .bg-sand itself, which is still used as a plain color elsewhere. */
.plan-section-photo {
  position: relative;
  overflow: hidden;
}
.plan-section-photo-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.plan-section-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(239, 236, 229, 0.7);
  z-index: 1;
}
.plan-section-photo > .container {
  position: relative;
  z-index: 2;
}

/* ===== Cards / grids ===== */
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 32px 26px;
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.card .icon-badge {
  width: 52px; height: 52px;
  border-radius: 10px;
  background: var(--blue-100);
  color: var(--navy-800);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.card .icon-badge svg { width: 26px; height: 26px; }

/* Square, black-and-white lead photo above "Not sure where to start?" —
   same treatment as the plan-tile photos, reusing the site's established
   pattern. */
.consult-card-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 22px;
  filter: grayscale(100%);
}

/* "Why Work With Us" content block — a plain card (matching the site's
   other .card elements) that sits on top of the section's own background
   photo (see .section-photo below), rather than carrying the photo itself. */
.why-us-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 40px 36px;
  background: var(--white);
}

/* Reusable section-level background-photo treatment: the photo sits behind
   the whole section at full color/contrast (no tint), visible in the white
   space around/between the cards inside it. The cards themselves stay fully
   opaque, so legibility isn't a concern even with no wash over the photo.
   Mirrors the same pattern already used for the "How We Help" section's
   .plan-section-photo, minus that section's sand-toned wash. */
.section-photo {
  position: relative;
  overflow: hidden;
}
.section-photo-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.section-photo > .container {
  position: relative;
  z-index: 2;
}

.plan-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  color: var(--white);
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  background-color: var(--navy-900);
  background-image: url("../images/topo-patterns/topo-navy.jpg");
  background-size: 260%;
  background-position: center;
  transition: transform 0.15s ease, box-shadow .15s ease;
}
.plan-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* Bottom scrim keeps the title/tag readable over the topo lines */
.plan-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,44,70,0) 40%, rgba(20,44,70,0.55) 100%);
  pointer-events: none;
}
/* Subtle light tint on hover/focus — low-contrast, just enough to notice */
.plan-card::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(255,255,255,0);
  transition: background 0.15s ease;
  pointer-events: none;
}
.plan-card:hover::after,
.plan-card:focus-within::after { background: rgba(255,255,255,0.08); }
.plan-card h3 { color: var(--white); position: relative; z-index: 1; margin-bottom: 6px; }
.plan-card > div > a { text-decoration: none; }
.plan-card > div > a:hover h3 { text-decoration: underline; }
.plan-card span.tag { position: relative; z-index: 1; font-size: 0.85rem; color: rgba(255,255,255,0.8); }
.plan-card a.stretched { position: absolute; inset: 0; z-index: 2; }
.plan-card-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  position: relative;
  z-index: 1;
}
.plan-card-list li { margin-bottom: 6px; }
.plan-card-list a {
  color: rgba(255,255,255,0.82);
  font-size: 0.88rem;
  text-decoration: none;
}
.plan-card-list a:hover { color: var(--white); text-decoration: underline; }

/* Plan tiles (homepage — 2x2 Wix-style cards) */
.plan-tile-grid { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .plan-tile-grid { grid-template-columns: 1fr 1fr; }
}
.plan-tile {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 40px 36px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow .15s ease;
}
.plan-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* Lead photo in place of the old line-icon — square on mobile, cropped to a
   1:1 square regardless of the source photo's native proportions. Full
   black-and-white. */
.plan-tile-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 22px;
  filter: grayscale(100%);
}
/* Desktop only: widen into a horizontal rectangle spanning the full card
   width instead of the mobile square — aspect-ratio 2/1 at full width keeps
   the same photo height as the earlier half-width square treatment while
   letting it span the card. */
@media (min-width: 700px) {
  .plan-tile-photo {
    width: 100%;
    aspect-ratio: 2 / 1;
  }
}
.plan-tile > a { text-decoration: none; }
.plan-tile h3 {
  color: var(--blue-300);
  font-size: 1.7rem;
  margin-bottom: 18px;
}
.plan-tile > a:hover h3 { text-decoration: underline; }
.plan-tile p.plan-tile-intro { color: var(--navy-800); }
.plan-tile-list { list-style: none; margin: 0 0 26px; padding: 0; }
.plan-tile-list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 10px;
  font-weight: 700;
}
.plan-tile-list li::before { content: "•"; position: absolute; left: 0; color: var(--navy-800); }
.plan-tile-list a { color: var(--navy-800); }
.plan-tile-list a:hover { text-decoration: underline; }

/* Topic blocks (detail pages — full-width sections with dark header) */
.topic-block {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 28px;
}
.topic-block-header { background: var(--navy-800); padding: 18px 30px; }
.topic-block-header h3 { color: var(--white); margin: 0; }
/* Sub-label inside a topic-block-header, e.g. "Parts A & B" under "Medicare" —
   reuses .nav-sub's spacing/sizing but needs a light color here since the
   header background is dark navy (nav-sub's default ink-soft is for light
   backgrounds). */
.topic-block-header h3 .nav-sub { color: var(--white); opacity: 0.7; }
.topic-block-body { padding: 30px; }
.topic-block-intro { font-size: 1.05rem; }
.topic-block-grid { display: grid; gap: 24px; }
@media (min-width: 700px) {
  .topic-block-grid { grid-template-columns: 1fr 1fr; }
}
.topic-block-grid p:last-child { margin-bottom: 0; }

/* Checklist */
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 12px;
  color: var(--ink);
  font-weight: 600;
  font-size: 1.05rem;
}
/* A bold, fully-centered checkmark glyph (not a hairline CSS-border hack) —
   easier for low-vision/older readers to see at a glance. Circle color is
   still the site's existing blue-500 (overridden to blue-300 on navy
   backgrounds below); only the checkmark rendering itself changed. */
.check-list li::before {
  content: "";
  position: absolute; left: 0; top: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background-color: var(--blue-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 13 10 18 19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
}

/* Testimonial / trust */
.trust-strip {
  display: flex; flex-wrap: wrap; gap: 34px; align-items: center; justify-content: center;
  color: var(--ink-soft); font-weight: 600; letter-spacing: 0.02em;
}

/* CTA band — a plain solid-blue card (its original flat-color treatment)
   that sits on top of its section's own background photo (see
   .section-photo above), rather than carrying the photo itself. */
.cta-band {
  background: var(--blue-500);
  color: var(--white);
  border-radius: 14px;
  padding: 48px;
  display: grid;
  gap: 24px;
  align-items: center;
}
.cta-band h2, .cta-band p { color: var(--white); }
@media (min-width: 780px) {
  .cta-band { grid-template-columns: 1.4fr auto; }
}

/* Forms */
.form-grid { display: grid; gap: 18px; }
@media (min-width: 640px) { .form-grid.cols-2 { grid-template-columns: 1fr 1fr; } }
label { display: block; font-weight: 700; font-size: 0.88rem; color: var(--navy-800); margin-bottom: 6px; }
input, select, textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue-300); border-color: var(--blue-500); }
.field { margin-bottom: 4px; }
.form-note { font-size: 0.85rem; color: var(--ink-soft); }

/* Checkbox group (multi-select alternative to a native <select>) */
.checkbox-group {
  display: grid;
  gap: 12px;
  margin-top: 8px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
}
.checkbox-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 0;
  cursor: pointer;
}
.checkbox-option input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 2px;
  padding: 0;
  accent-color: var(--blue-500);
}

/* Footer */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,0.75); padding: 56px 0 24px; }
.site-footer h4 { color: var(--white); font-family: var(--font-body); font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 16px; }
.footer-grid { display: grid; gap: 36px; grid-template-columns: 1fr; margin-bottom: 40px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-grid a { color: rgba(255,255,255,0.75); display: block; margin-bottom: 10px; }
.footer-grid a:hover { color: var(--white); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 0.85rem;
}
.footer-disclosure { font-size: 0.85rem; color: rgba(255,255,255,0.55); max-width: 900px; margin-top: 18px; }

/* Page header (interior pages) */
.page-header { padding: 56px 0 40px; background: var(--sand-100); }
.page-header .eyebrow { color: var(--blue-500); }

/* Placeholder note (visible to Brittany while editing, easy to remove) */
.build-note {
  background: #fff6da;
  border: 1px dashed #d8b34c;
  color: #6b4f00;
  font-size: 0.85rem;
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 18px;
}

/* Advisor bio — photo wraps at the top, copy flows full-width once past it */
.advisor-bio { max-width: 820px; margin: 0 auto; }
.advisor-bio::after { content: ""; display: table; clear: both; }
.advisor-photo {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto 24px;
  border-radius: 10px;
}
@media (min-width: 700px) {
  .advisor-photo {
    float: left;
    width: 280px;
    margin: 4px 28px 16px 0;
  }
}

/* Avatar placeholder */
.avatar-placeholder {
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: 10px;
  background: linear-gradient(160deg, var(--blue-100), var(--sand-200));
  display: flex; align-items: center; justify-content: center;
  color: var(--navy-700);
  border: 1px dashed var(--blue-300);
  text-align: center;
  padding: 20px;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Blog card + article hero image placeholders (swap for real photos/icons) */
.image-placeholder {
  width: 100%;
  border-radius: 10px;
  background: linear-gradient(160deg, var(--blue-100), var(--sand-200));
  display: flex; align-items: center; justify-content: center;
  color: var(--navy-700);
  border: 1px dashed var(--blue-300);
  text-align: center;
  padding: 16px;
  font-weight: 600;
  font-size: 0.85rem;
}
.card-image {
  aspect-ratio: 16/9;
  margin-bottom: 18px;
}
/* Resource/article card lead photo — black-and-white treatment matching
   the plan-tile and consult-card photos elsewhere on the site. */
.resource-card-photo {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 18px;
  filter: grayscale(100%);
}
.article-hero-image {
  aspect-ratio: 2/1;
  margin-bottom: 8px;
  font-size: 1rem;
}
/* Article hero lead photo — same black-and-white treatment as the resource
   card and plan-tile photos. */
.article-hero-photo {
  display: block;
  width: 100%;
  aspect-ratio: 2/1;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 8px;
  filter: grayscale(100%);
}

/* Utility */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.flex { display: flex; } .items-center { align-items: center; } .gap-10 { gap: 10px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0; padding: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--navy-800); color: white;
  padding: 10px 16px; z-index: 1000; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }


/* ===== Topic explain boxes (replaces the old 2-col topic-block-grid text
   pairs) — each of the 4 fields (Who it's for / Why it matters / Planning
   timeline / Partner advantage) gets its own light-beige box, stacked on
   mobile and 2x2 on desktop, followed by a Learn More button to the topic's
   dedicated sub-page. This is now the standard template for topic cards. */
.topic-explain-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin: 22px 0 26px;
}
@media (min-width: 700px) {
  .topic-explain-grid { grid-template-columns: 1fr 1fr; }
}
.topic-explain-box {
  background: var(--sand-100);
  border-radius: 8px;
  padding: 18px 20px;
}
.topic-explain-box p { margin: 0; color: var(--ink); }
.topic-explain-box p strong { color: var(--navy-800); }

/* Scopes the bullet lists, sub-labels and callout notes used within a
   "Details" prose section (e.g. the Medicare A&B enrollment-rules content)
   so Part A / Part B stay the real headings (h3) and everything under them
   — the "When You..." labels, list items, and notes — reads as body
   copy, matching the rest of the page's gray text and font size. */
.details-prose h3 { margin-top: 1.6em; }
.details-prose h3:first-of-type { margin-top: 0; }
.details-prose .detail-subhead {
  font-weight: 700;
  color: var(--ink-soft);
  margin: 1.3em 0 0.4em;
}
.details-prose ul { margin: 0 0 1.1em; padding-left: 1.3em; }
.details-prose li { margin-bottom: 10px; color: var(--ink-soft); }
.details-prose li:last-child { margin-bottom: 0; }

/* Callout note inside a "Details" prose section (e.g. an HSA rule or a
   late-enrollment-penalty warning) — set apart from the regular bullet
   list above it with a left accent border. */
.detail-note {
  background: var(--sand-100);
  border-left: 4px solid var(--navy-800);
  border-radius: 6px;
  padding: 16px 20px;
  margin: 18px 0 28px;
}
.detail-note p { margin: 0; color: var(--ink-soft); }
.detail-note p strong { color: var(--navy-800); }

/* Anchor-scroll offset: when a bullet/preview link jumps to a #topic-block
   anchor, this keeps the topic card's header clear of the sticky site
   header instead of landing underneath it. Values match the site header's
   actual rendered height at each breakpoint (103px with the nav row
   collapsed below 860px, 163.5px with the nav row visible at/above it),
   plus ~20px of breathing room. */
.topic-block { scroll-margin-top: 123px; }
@media (min-width: 860px) {
  .topic-block { scroll-margin-top: 185px; }
}

/* ===== Plan Options nav dropdown ===== */
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  display: none;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 26px;
  gap: 30px;
  z-index: 50;
}
@media (min-width: 860px) {
  .nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    grid-template-columns: repeat(3, 230px);
    margin-top: 1px;
  }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu {
    display: grid;
  }
}
/* Single-category dropdown (e.g. Quote Options) — one 230px column instead
   of the 3-column Plan Options grid, so the menu doesn't render as a wide,
   mostly-empty box. */
@media (min-width: 860px) {
  .nav-dropdown-menu--single { grid-template-columns: 230px; }
}
.nav-dropdown-col { display: flex; flex-direction: column; gap: 2px; }
.nav-cat-row { display: block; }
.nav-dropdown-heading {
  display: block;
  font-weight: 700;
  color: var(--navy-800) !important;
  padding: 6px 0 8px !important;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.nav-cat-links a {
  display: block;
  padding: 6px 0 2px !important;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--blue-300) !important;
  border-bottom: none !important;
  text-align: left;
}
.nav-cat-links a:hover {
  color: var(--blue-500) !important;
  text-decoration: underline;
}
/* Small "Part" sub-label under a nav link, e.g. "Parts A & B" under "Medicare" —
   pulled in tight under its parent link (negative margin-top) so the two
   read as one paired unit, with the breathing room before the next item
   added after the sub-label instead (margin-bottom). */
.nav-sub {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink-soft);
  opacity: 0.78;
  line-height: 1.25;
  margin-top: -3px;
  margin-bottom: 4px;
}

/* Mobile-only per-category expand/collapse toggle (chevron button next to
   each dropdown heading). Hidden on desktop, where the whole dropdown
   always shows on hover. */
.nav-cat-toggle {
  display: none;
  background: none;
  border: none;
  padding: 10px 6px;
  margin: 0;
  cursor: pointer;
  color: var(--navy-800);
  flex-shrink: 0;
}
/* Sized up (and drawn a bit bolder) from the original 16px/stroke-width:2 —
   easier for older visitors to see and tap in the mobile menu. */
.nav-cat-toggle svg { width: 26px; height: 26px; display: block; stroke-width: 2.75; transition: transform 0.2s ease; }
.nav-cat-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Desktop only: a thin rounded box around each category group within the
   Plan Options dropdown, so the 4 categories read as distinct cards rather
   than one long list. Mobile keeps its own divider-line treatment instead
   (added below), since boxes add clutter at that width. */
@media (min-width: 860px) {
  .nav-cat {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px 16px;
  }
  .nav-dropdown-col .nav-cat + .nav-cat { margin-top: 14px; }
}

@media (max-width: 859px) {
  .nav-dropdown-menu {
    display: block;
    position: static;
    box-shadow: none;
    border: none;
    padding: 4px 0 4px 20px;
  }
  .nav-dropdown-col { margin-bottom: 0; }
  .nav-dropdown-heading { border-bottom: none; padding: 8px 0 2px !important; text-align: left; }

  /* Each category (heading + its links) becomes its own collapsible row,
     with a thin divider line above every category except the very first. */
  .nav-cat-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .nav-cat-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-cat-links { display: none; padding-bottom: 8px; }
  /* Quote Options has only one category, whose heading would otherwise just
     repeat the "Quote Options" label already shown above it — hide that
     redundant inner heading row on mobile; its own toggle arrow (added as a
     sibling of the top-level link) now expands the same links directly. */
  .nav-dropdown-menu--single .nav-cat-row { display: none; }
  .nav-cat-links.open { display: block; }
  .nav-cat { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; }
  .nav-dropdown-col:first-child .nav-cat:first-child { border-top: none; padding-top: 0; margin-top: 0; }

  /* The open mobile menu becomes its own fixed, independently-scrolling
     panel instead of inline content inside the sticky site-header — fixes
     the bug where the panel's content was too tall for the sticky header
     box, making window scroll appear to move the page behind the menu
     instead of scrolling the menu itself. Top/height are set by JS to the
     real rendered header height. */
  .main-nav.open {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 90;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-shadow: 0 16px 28px rgba(15, 30, 60, 0.16);
  }
}