:root {
  --navy: #061d3b;
  --ink: var(--navy);
  --teal: #008d8d;
  --teal-dark: #007575;
  --green: #16b827;
  --bg: #f7f9fb;
  --panel: #fff;
  --muted: #66758c;
  --line: #e4e9ef;
  --danger: #b43d47;
  --shadow: 0 8px 24px rgba(9, 35, 65, .07);
  --radius-control: 9px;
  --radius-panel: 18px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --page-gutter: clamp(20px, 4vw, 48px);
  --content-wide: 1160px;
}

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1000;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--teal);
  border-radius: var(--radius-control);
  background: var(--panel);
  color: var(--navy);
  font: 700 14px Inter, Arial, sans-serif;
  box-shadow: var(--shadow);
  transform: translateY(calc(-100% - 32px));
  transition: transform .15s ease;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid rgba(0, 141, 141, .35);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* Shared public-page rhythm and semantic colors. */
.layout,
.plans-main,
.contact-main {
  padding-inline: var(--page-gutter);
}

.wrap {
  width: min(var(--content-wide), calc(100% - (2 * var(--page-gutter))));
}

.contact-body {
  background: var(--bg);
  color: var(--navy);
}

.contact-header > a:last-child,
.contact-eyebrow,
#contact-status {
  color: var(--teal-dark);
}

.contact-intro > p:last-child,
.contact-note {
  color: var(--muted);
}

.contact-card {
  border-color: var(--line);
  border-radius: var(--radius-panel);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.contact-card input,
.contact-card select,
.contact-card textarea {
  border-color: var(--line);
  border-radius: var(--radius-control);
  color: var(--navy);
}

.contact-card button {
  border-radius: var(--radius-control);
  background: var(--teal);
}

.contact-card button:hover { background: var(--teal-dark); }
.contact-card input:focus-visible,
.contact-card select:focus-visible,
.contact-card textarea:focus-visible,
.contact-card button:focus-visible {
  outline-color: var(--teal);
}

@media (max-width: 700px) {
  .contact-header { padding: 18px var(--page-gutter); }
  .contact-main { margin: 30px auto 60px; }
  .contact-card { padding: var(--space-5); }
  .contact-row { grid-template-columns: 1fr; gap: 0; }
}