:root {
  --ink: #17324d;
  --ink-deep: #10263a;
  --cream: #f5efe5;
  --paper: #fffaf2;
  --coral: #bc3c2c;
  --coral-bright: #ffa599;
  --sage: #3b735b;
  --muted: #56626b;
  --line: rgba(23, 50, 77, .16);
  --shadow: 0 24px 70px rgba(23, 50, 77, .16);
  color: var(--ink);
  background: var(--cream);
  font-family: Inter, "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: linear-gradient(rgba(23, 50, 77, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 50, 77, .04) 1px, transparent 1px), var(--cream); background-size: 48px 48px; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
a { color: inherit; text-underline-offset: .25em; }
::selection { color: var(--paper); background: var(--coral); }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 100; display: inline-flex; align-items: center; min-height: 2.75rem; padding: .8rem 1rem; color: var(--paper); background: var(--ink); font-size: .75rem; font-weight: 800; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; transform: translateY(-180%); }
.skip-link:focus { transform: none; }

/* Shared interface primitives */
.brand { display: inline-flex; gap: .65rem; align-items: center; width: fit-content; min-height: 2.75rem; font-size: .82rem; font-weight: 900; letter-spacing: .12em; text-decoration: none; }
.brand img { display: block; }
.brand img { width: auto; max-width: 100%; object-fit: contain; }
.eyebrow { display: flex; gap: .7rem; align-items: center; margin: 0 0 1.2rem; color: var(--coral); font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.06em; line-height: .94; text-wrap: balance; }
h1 { max-width: 11ch; margin-bottom: 0; font-size: clamp(4rem, 7.7vw, 7.8rem); }
.button { display: inline-flex; gap: .55rem; align-items: center; justify-content: center; min-height: 3.2rem; padding: .85rem 1.2rem; border: 1px solid var(--ink); border-radius: 999px; font-size: .72rem; font-weight: 850; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; }
.button-primary { color: var(--paper); background: var(--ink); }
.button-primary:hover { border-color: var(--coral); background: var(--coral); }
.text-link { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink); font-size: .76rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }

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

@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 3px;
  }

  .skip-link {
    border: 2px solid HighlightText;
    color: HighlightText;
    background: Highlight;
  }

}