/* Shared pieces for the three "Hey there" landing options:
   tokens, logo wordmark, headline + underline, intro text, link buttons, footer. */
:root {
  --navy: #13213C;
  --navy-2: #1E3158;
  --ivory: #F7F4EE;
  --sand: #EDE6D8;
  --text: #2E3647;
  --muted: #5C6372;
  --gold: #C99A3E;        /* swoosh / decorative */
  --brass: #7A5A1F;       /* gold text on light, ~5.6:1 */
  --display: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 400 1rem/1.6 var(--sans); color: var(--text); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid #2E5AAC; outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(100% - 3rem, 1200px); margin-inline: auto; }

/* ---------- Header + logo wordmark ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; }
.logo { position: relative; display: inline-block; padding-bottom: .55rem; text-decoration: none; color: var(--navy); }
.logo-name { font-family: var(--display); font-weight: 700; font-size: 1.6rem; line-height: 1; letter-spacing: -0.025em; font-variation-settings: "SOFT" 50, "opsz" 48; }
.logo-swoosh { position: absolute; left: -4%; bottom: -.1rem; width: 108%; height: .85rem; overflow: visible; }
.logo-swoosh path { fill: none; stroke: var(--gold); stroke-linecap: round; }
.logo-swoosh .s1 { stroke-width: 3; }
.logo-swoosh .s2 { stroke-width: 1.6; opacity: .65; }

.top-links { display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.top-links a {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  color: var(--navy); border: 1px solid rgba(19, 33, 60, .15); transition: background-color .2s, color .2s, border-color .2s;
}
.top-links a:hover { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.top-links svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- Headline ---------- */
.hey {
  margin: 0; color: var(--navy);
  font-family: var(--display); font-weight: 650; line-height: 1; letter-spacing: -0.03em;
  font-size: clamp(3.1rem, 2rem + 4.2vw, 5.75rem);
  font-variation-settings: "SOFT" 30, "opsz" 144;
}
.mark { position: relative; display: inline-block; white-space: nowrap; }
.mark svg { position: absolute; left: -2%; bottom: -.16em; width: 104%; height: .26em; overflow: visible; }
.mark path { fill: none; stroke: var(--gold); stroke-width: 6; stroke-linecap: round; }
.wave { display: inline-block; margin-left: .12em; transform-origin: 70% 75%; animation: wave 2.2s .6s ease-in-out 2; }
@keyframes wave {
  0%, 60%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(16deg); }
  20%, 40% { transform: rotate(-8deg); }
}

/* ---------- Intro: large first paragraph, smaller companion ---------- */
.lead {
  margin: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) 0 0; color: var(--navy);
  font-size: clamp(1.25rem, 1rem + .95vw, 1.8rem); line-height: 1.38; letter-spacing: -0.015em; font-weight: 400;
  max-width: 36ch;
}
.lead .name {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.02em;
  text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .18em;
}
.lead strong { font-weight: 600; }
.sub { margin: 1.25rem 0 0; font-size: clamp(1rem, .95rem + .2vw, 1.0938rem); line-height: 1.65; color: var(--muted); max-width: 52ch; }

/* ---------- Link buttons ---------- */
.ctas { list-style: none; margin: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.ctas a {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 50px; padding: 0 1.25rem 0 1rem;
  border-radius: 999px; text-decoration: none; font-weight: 500; font-size: .9688rem;
  border: 1px solid rgba(19, 33, 60, .18); color: var(--navy); background: #fff;
  transition: transform .2s, box-shadow .2s, background-color .2s, color .2s;
  touch-action: manipulation;
}
.ctas a:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(19, 33, 60, .55); }
.ctas li:first-child a { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.ctas svg { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* ---------- Footer ---------- */
.foot { padding-block: 1.25rem 1.75rem; font-size: .75rem; color: var(--muted); }
.foot p { margin: 0; max-width: 90ch; }

@media (max-width: 600px) {
  .wrap { width: min(100% - 2rem, 1200px); }
  .top { padding-block: 1rem; }
  .logo-name { font-size: 1.35rem; }
  .top-links a { width: 40px; height: 40px; }
  .ctas { flex-direction: column; }
  .ctas a { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .wave { animation: none; }
  * { transition: none !important; }
}