:root {
  --navy: #0d2c4d;
  --navy-dark: #081b30;
  --navy-mid: #133a63;
  --copper: #c1702f;
  --copper-light: #e0975a;
  --cream: #f4efe6;
  --cream-dark: #e9ded0;
  --ink: #12181f;
  --steel: #5b6b7a;
  --line: rgba(13,44,77,.14);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Familjen Grotesk', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.01em;
}

::selection { background: var(--copper); color: var(--cream); }

/* ---------- Layout helpers ---------- */
.wrap { max-width: 1320px; margin-inline: auto; padding-inline: 1.5rem; }
@media (min-width: 1024px) { .wrap { padding-inline: 3rem; } }

.diag-notch {
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}
.diag-notch-top {
  clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%);
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  transition: background-color .35s ease, box-shadow .35s ease, padding .35s ease;
  padding-block: 1.35rem;
}
.site-header.scrolled {
  background: rgba(8,27,48,.94);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 30px rgba(8,27,48,.25);
  padding-block: .7rem;
}
.brand-word {
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--cream);
}
.header-phone {
  border: 1.5px solid rgba(244,239,230,.35);
  color: var(--cream);
  transition: border-color .25s ease, background-color .25s ease;
}
.header-phone:hover { border-color: var(--copper); background: rgba(193,112,47,.15); }

.menu-trigger {
  display: flex; align-items: center; gap: .6rem;
  color: var(--cream);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .8rem;
}
.menu-trigger .bars { display: flex; flex-direction: column; gap: 4px; width: 26px; }
.menu-trigger .bars span { height: 2px; background: var(--copper); border-radius: 2px; transition: transform .3s ease, width .3s ease; }
.menu-trigger .bars span:first-child { width: 26px; }
.menu-trigger .bars span:last-child { width: 16px; margin-left: auto; }
.menu-trigger:hover .bars span:last-child { width: 26px; }

/* ---------- Fullscreen overlay nav ---------- */
.nav-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: var(--navy-dark);
  visibility: hidden; opacity: 0;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
.nav-overlay.open {
  visibility: visible; opacity: 1;
  transition: opacity .4s ease;
}
.nav-overlay .ov-link {
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 700;
  color: var(--cream);
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 1.05;
  display: flex; align-items: baseline; gap: 1.25rem;
  transition: color .25s ease;
}
.nav-overlay .ov-link .num {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--copper);
}
.nav-overlay .ov-link:hover { color: var(--copper-light); }
.nav-close {
  color: var(--cream);
  transition: transform .3s ease, color .25s ease;
}
.nav-close:hover { transform: rotate(90deg); color: var(--copper); }
.lang-pill {
  border: 1.5px solid rgba(244,239,230,.3);
  color: var(--cream);
  border-radius: 999px;
  transition: border-color .25s ease, background-color .25s ease;
}
.lang-pill:hover, .lang-pill.active { border-color: var(--copper); background: rgba(193,112,47,.18); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  border-radius: 999px;
  font-weight: 600;
  padding: .95rem 1.9rem;
  transition: transform .22s ease, background-color .22s ease, color .22s ease, box-shadow .22s ease;
  white-space: nowrap;
}
.btn-copper { background: var(--copper); color: var(--cream); box-shadow: 0 10px 24px rgba(193,112,47,.28); }
.btn-copper:hover { background: var(--copper-light); transform: translateY(-2px); }
.btn-outline-light { border: 1.5px solid rgba(244,239,230,.4); color: var(--cream); }
.btn-outline-light:hover { border-color: var(--copper); background: rgba(193,112,47,.12); transform: translateY(-2px); }
.btn-outline-dark { border: 1.5px solid rgba(13,44,77,.3); color: var(--navy); }
.btn-outline-dark:hover { border-color: var(--copper); background: rgba(193,112,47,.08); transform: translateY(-2px); }
.btn-navy { background: var(--navy); color: var(--cream); }
.btn-navy:hover { background: var(--navy-mid); transform: translateY(-2px); }

/* ---------- Hero watermark numerals ---------- */
.watermark-1977 {
  position: absolute;
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(7rem, 22vw, 20rem);
  color: rgba(244,239,230,.045);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.stat-chip {
  border: 1px solid rgba(244,239,230,.22);
  border-radius: 14px;
}

/* ---------- Section labels ---------- */
.eyebrow {
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--copper);
}
.eyebrow-light { color: var(--copper-light); }

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
.service-card { transition: transform .3s ease, box-shadow .3s ease; }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 22px 45px rgba(13,44,77,.14); }

.timeline-dot {
  width: 14px; height: 14px; border-radius: 999px; background: var(--copper);
  box-shadow: 0 0 0 6px rgba(193,112,47,.15);
}
.timeline-line { background: linear-gradient(90deg, rgba(13,44,77,.1), rgba(13,44,77,.3), rgba(13,44,77,.1)); }

/* ---------- Forms ---------- */
.field-label { font-size: .82rem; font-weight: 600; color: var(--navy); letter-spacing: .01em; }
.field-input {
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: .8rem 1rem;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field-input:focus {
  outline: none;
  border-color: var(--copper);
  box-shadow: 0 0 0 4px rgba(193,112,47,.14);
}
.field-error { color: #b3261e; font-size: .78rem; display: none; }
.field-input.invalid { border-color: #b3261e; }
.field-input.invalid + .field-error { display: block; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); }
.reveal.is-in { opacity: 1; transform: translateY(0); transition: opacity .8s ease, transform .8s ease; }

/* ---------- Footer ---------- */
.footer-link { color: rgba(244,239,230,.72); transition: color .2s ease; }
.footer-link:hover { color: var(--copper-light); }

/* ---------- Misc ---------- */
.map-frame { border: 0; filter: grayscale(.15) contrast(1.05); }
.badge-outline {
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .82rem;
  color: var(--navy);
}

@media (max-width: 640px) {
  .watermark-1977 { display: none; }
}