:root {
  --ink: #13283c;
  --ink-soft: #1e3d56;
  --brass: #c4923e;
  --brass-deep: #8d6424;
  --pitch: #1c6a4a;
  --cream: #f6f1e8;
  --paper: #fffdfb;
  --line: rgba(19, 40, 60, 0.12);
}

html { scroll-behavior: smooth; }

body {
  font-family: "Source Sans 3", "Segoe UI", sans-serif;
  background: var(--cream);
  color: var(--ink);
}

.font-display { font-family: "Fraunces", Georgia, serif; }

.nav-link {
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--brass);
  transition: width 0.25s ease;
}

.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

.hero-mask {
  background:
    linear-gradient(105deg, rgba(12, 28, 42, 0.88) 0%, rgba(12, 28, 42, 0.45) 55%, rgba(12, 28, 42, 0.2) 100%);
}

.card-lift {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.card-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(19, 40, 60, 0.12);
}

.menu-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.menu-panel.open { max-height: 520px; }