/* Good Options Home Buyers: deep green primary, gold accent */
:root {
  --navy-950: #0d2a23;
  --navy-900: #143a30;
  --navy-800: #1a483c;
  --navy-700: #22594a;
  --navy-100: #d4e6df;
  --navy-50:  #ecf5f1;
}
.compare-col:nth-child(2) header { background: #1b3d63; }

/* Focus ring in the green palette (shared file uses a blue tint) */
.field input:focus,
.field select:focus { box-shadow: 0 0 0 4px rgba(34, 89, 74, .2); }

/* Header: longer brand name + five links don't leave room for the phone block
   (the phone is in the hero, footer, and mobile bar), and the nav collapses sooner */
.header-phone { display: none; }
@media (min-width: 1241px) { .main-nav a { padding: 10px 11px; } }
@media (max-width: 1240px) {
  .nav-toggle { display: inline-flex; }
  .header-actions .btn { display: none; }
  .main-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    display: none;
  }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; padding: 8px var(--gutter) 20px; gap: 2px; }
  .main-nav a { padding: 14px 12px; font-size: 1.15rem; border-bottom: 1px solid var(--navy-50); border-radius: 0; }
  .main-nav .nav-cta { display: block; margin-top: 12px; }
  .main-nav .nav-cta a { border: 0; }
}

/* Hero: form sits in the right column */
.hero-grid { align-items: start; }
.hero-note { margin: 24px 0 0; color: #d4e6df; font-size: 1rem; }
.hero-note a { color: var(--gold-400); font-weight: 700; }

/* Keep "−$26,000" on one line; longer answers stack on small screens */
.compare-col dd { white-space: nowrap; }
.compare-col dl div.stack dd { white-space: normal; }
@media (max-width: 520px) {
  .compare-col dl div.stack { flex-direction: column; gap: 2px; }
  .compare-col dl div.stack dd { text-align: left; }
}

/* Team intros under each photo */
.team-card .team-intro { font-weight: 400; color: var(--ink); font-size: 1.02rem; }

/* Small phones: let the brand name wrap to two lines so the Menu button fits */
.brand-name .nw { white-space: nowrap; }
@media (max-width: 480px) {
  .header-inner { gap: 12px; }
  .site-header .brand { min-width: 0; }
  .site-header .brand-text { white-space: normal; }
}