/* ══════════════════════════════════════════════════════════
   COMMON — reset, brand variables, base type, shared buttons,
   and the site-wide contact modal (opened from header + homepage)
   ══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:     #0D1B2A;
  --navy2:    #152236;
  --charcoal: #1C2E42;
  --gold:     #B8965A;
  --gold-lt:  #D4AF72;
  --white:    #FFFFFF;
  --offwhite: #F0EDE8;
  --body:     #C8D0DC;
  --muted:    #7A8FA8;
  --blue:     #3D8BDA;
}

html { scroll-behavior: smooth; }

body {
  background: var(--navy);
  color: var(--body);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
}

/* ── SHARED BUTTONS ── */
.btn {
  display: inline-block; font-family: 'Inter', sans-serif;
  font-size: .72rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none;
  color: var(--navy); background: var(--gold);
  padding: .8rem 2.2rem; border: none; cursor: pointer;
  transition: background .3s;
}
.btn:hover { background: var(--gold-lt); }
.btn-ghost {
  background: transparent; color: var(--offwhite);
  border: 1px solid rgba(240,237,232,.35); margin-left: 1rem;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); background: transparent; }

/* ── CONTACT MODAL ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(13,27,42,.82);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
.modal-overlay.is-open {
  opacity: 1; visibility: visible;
  transition: opacity .4s ease, visibility 0s;
}
.modal-box {
  position: relative;
  width: 100%; max-width: 480px;
  max-height: 90vh; overflow-y: auto;
  background: var(--charcoal);
  border: 1px solid rgba(184,150,90,.25);
  padding: 3rem 2.8rem;
}
.modal-close {
  position: absolute; top: 1.4rem; right: 1.4rem;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(240,237,232,.25);
  color: var(--offwhite); cursor: pointer; font-size: 1.2rem; line-height: 1;
  transition: border-color .3s, color .3s;
}
.modal-close:hover { border-color: var(--gold); color: var(--gold); }
.modal-tag {
  font-size: .7rem; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 1rem;
}
.modal-box h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.9rem; font-weight: 300; line-height: 1.2;
  color: var(--white); margin-bottom: .7rem;
}
.modal-box h2 em { font-style: italic; color: var(--gold-lt); }
.modal-sub { font-size: .88rem; color: var(--body); margin-bottom: 1.9rem; line-height: 1.7; }
.modal-field { margin-bottom: 1.3rem; }
.modal-field label {
  display: block; font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .55rem;
}
.modal-field input, .modal-field textarea {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid rgba(240,237,232,.25);
  color: var(--white); font-family: 'Inter', sans-serif; font-size: .92rem;
  padding: .5rem 0; transition: border-color .3s;
}
.modal-field input:focus, .modal-field textarea:focus { outline: none; border-color: var(--gold); }
.modal-field textarea { resize: vertical; min-height: 84px; }
.modal-honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.modal-submit { margin-top: .4rem; width: 100%; text-align: center; }
.modal-submit:disabled { opacity: .6; cursor: default; }
.modal-status { margin-top: 1rem; font-size: .82rem; min-height: 1.2em; }
.modal-status.is-success { color: var(--gold-lt); }
.modal-status.is-error { color: #e08a8a; }

@media (max-width: 520px) {
  .modal-box { padding: 2.4rem 1.8rem; }
}