/* ========================================
   LAYOUT — Nav, Grid, Footer
   Mobile-first (375px base)
   ======================================== */

/* Nav */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--bg);
  border-bottom: 1px solid rgba(200, 164, 110, .06);
}

.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 58px;
  padding: 0 1.5rem;
}

.nav-logo {
  font-family: var(--f1);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  cursor: pointer;
}

.nav-logo:hover { color: var(--gold2); }

.nav-links {
  display: flex;
  gap: .1rem;
  list-style: none;
  align-items: center;
}

.nav-links a {
  color: var(--text2);
  text-decoration: none;
  font-size: .8rem;
  font-weight: 500;
  padding: .4rem .65rem;
  border-radius: 6px;
  transition: all .15s;
  cursor: pointer;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text);
  background: rgba(200, 164, 110, .06);
}

.nav-links a.active { color: var(--gold); }

/* Dropdown */
.nav-dropdown {
  position: relative;
}

.nav-dropdown > a::after {
  content: ' \25BE';
  font-size: .65rem;
  opacity: .6;
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(12, 11, 9, .97);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(200, 164, 110, .08);
  border-radius: var(--r2);
  padding: .4rem 0;
  min-width: 160px;
  z-index: 1001;
  margin-top: .3rem;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-menu a {
  display: block;
  padding: .45rem .85rem;
  border-radius: 0;
  font-size: .78rem;
}

.nav-dropdown-menu a:hover {
  background: rgba(200, 164, 110, .08);
}

.nav-cta {
  background: var(--gold);
  color: var(--bg);
  font-weight: 600;
  padding: .4rem 1rem;
  border-radius: var(--r2);
  font-size: .8rem;
  transition: all .15s;
  cursor: pointer;
  text-decoration: none;
}

.nav-cta:hover {
  background: var(--gold2);
  transform: translateY(-1px);
  color: var(--bg);
}

.hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.3rem;
  cursor: pointer;
  padding: .3rem;
  z-index: 1001;
}

/* Page structure */
main { padding-top: 58px; }

.page { display: none; }
.page.active { display: block; }

/* Sections */
section.content {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 4rem 1rem;
}

/* Grid */
.grid {
  display: grid;
  gap: 1.4rem;
  margin-top: 1.8rem;
}

.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

/* CTA group */
.cta-group {
  display: flex;
  gap: .7rem;
  margin-top: 1.8rem;
  flex-wrap: wrap;
}

.cta-group.center {
  justify-content: center;
}

/* Stats row */
.stats-row {
  display: flex;
  gap: 2.2rem;
  margin-top: 2.2rem;
  padding-top: 2.2rem;
  border-top: 1px solid rgba(200, 164, 110, .07);
  flex-wrap: wrap;
}

.stat-value {
  font-family: var(--f1);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--gold);
}

.stat-label {
  font-size: .75rem;
  color: var(--text3);
  margin-top: .1rem;
}

/* Center section */
.section-center {
  text-align: center;
  padding: 5rem 1rem;
  max-width: var(--max-w);
  margin: 0 auto;
}

.section-center h2,
.section-center p {
  margin-left: auto;
  margin-right: auto;
}

/* Contact grid */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1.8rem;
}

.contact-box {
  background: var(--bg3);
  border-radius: var(--r);
  padding: 1.8rem;
  border: 1px solid rgba(200, 164, 110, .04);
}

/* Footer */
footer {
  border-top: 1px solid rgba(200, 164, 110, .05);
  padding: 2.5rem 1.5rem;
  text-align: center;
}

footer p {
  margin: 0 auto;
  font-size: .78rem;
  color: var(--text3);
}

.footer-brand {
  font-family: var(--f1);
  font-size: .88rem;
  color: var(--gold3);
  margin-bottom: .5rem;
}

/* Badges row */
.badges-row {
  display: flex;
  gap: .6rem;
  margin: 1.3rem 0;
  flex-wrap: wrap;
}

/* Timeline */
.timeline-item {
  display: flex;
  gap: 1.6rem;
  margin-bottom: 2.2rem;
}

.timeline-year {
  font-family: var(--f1);
  font-size: .95rem;
  color: var(--gold3);
  min-width: 82px;
  text-align: right;
  padding-top: .15rem;
  flex-shrink: 0;
}

.timeline-body {
  padding-left: 1.6rem;
  border-left: 1px solid rgba(200, 164, 110, .1);
}

.timeline-body p { font-size: .88rem; }

/* ========================================
   RESPONSIVE
   ======================================== */

/* Mobile: hide nav links, show hamburger */
@media (max-width: 680px) {
  .nav-links {
    display: none !important;
  }

  .nav-links.open {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background-color: #0C0B09;
    padding: 5rem 2rem 2rem;
    z-index: 9999;
    gap: .5rem;
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-links.open a {
    font-size: 1.2rem;
    padding: .7rem .8rem;
    color: var(--text2);
    width: 100%;
  }

  .nav-dropdown-menu {
    position: static;
    background: transparent;
    border: none;
    padding-left: 1rem;
    margin-top: 0;
    backdrop-filter: none;
  }

  .nav-dropdown.open .nav-dropdown-menu {
    display: block;
  }

  .hamburger {
    display: block;
    position: relative;
    z-index: 10000;
  }

  section.content { padding: 3rem 1rem; }

  .grid-4 { grid-template-columns: 1fr 1fr; }
}

/* Tablet */
@media (min-width: 600px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
}

/* Desktop */
@media (min-width: 900px) {
  .hamburger { display: none; }

  .nav-links { display: flex; }

  section.content { padding: 6rem 1.5rem; }

  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .stats-row { flex-direction: column; gap: .8rem; }
  .timeline-item { flex-direction: column; gap: .2rem; }
  .timeline-year { text-align: left; min-width: auto; }
  .timeline-body { padding-left: 1rem; }
  .elevated { padding: 1.8rem; }
}