/* ============================================================
   BASE — design tokens, reset, typography, buttons
   ============================================================ */

:root {
  --navy:        #16294c;
  --navy-deep:   #101f3c;
  --navy-soft:   #1d345e;
  --gold:        #bf8b33;
  --gold-soft:   #cda050;
  --ink:         #1c2535;
  --body:        #4a5567;
  --bg:          #faf8f5;
  --bg-warm:     #f4f1ec;
  --line:        #e4ded4;
  --white:       #ffffff;
  --serif:       "Playfair Display", Georgia, serif;
  --sans:        "Mulish", system-ui, -apple-system, sans-serif;
  --maxw:        1180px;
  --gut:         clamp(20px, 5vw, 56px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--body);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold);
}
h1, h2, h3 { font-family: var(--serif); color: var(--ink); font-weight: 600; line-height: 1.12; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  letter-spacing: 0.01em; padding: 16px 24px; border: 0; cursor: pointer;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.btn svg { width: 18px; height: 18px; transition: transform .25s ease; }
.btn:hover svg { transform: translateX(5px); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-soft); }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: #ad7c2a; }
.btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-line { background: transparent; color: var(--navy); border: 1.5px solid var(--line); }
.btn-line:hover { border-color: var(--navy); background: rgba(22,41,76,.04); }