@font-face { font-family: 'Geist'; src: url('Fonts/Geist/static/Geist-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Geist'; src: url('Fonts/Geist/static/Geist-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Geist'; src: url('Fonts/Geist/static/Geist-Medium.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Geist Mono'; src: url('Fonts/Geist_Mono/static/GeistMono-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Instrument Serif'; src: url('Fonts/Instrument_Serif/InstrumentSerif-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Instrument Serif'; src: url('Fonts/Instrument_Serif/InstrumentSerif-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Geist'; src: url('Fonts/Geist/Geist-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { background: #f6f5f3; font-family: 'Geist', sans-serif; color: #191919; margin: 0; overflow-x: clip; }

/* ─── Buttons ─────────────────────────────────────── */
.btn-dark {
  background: #191919; color: #fff;
  font-family: 'Geist', sans-serif; font-weight: 500; font-size: 15px; line-height: 1.2;
  padding: 16px 20px; border-radius: 12px; border: none; cursor: pointer;
  height: 49px; white-space: nowrap; display: inline-flex; align-items: center;
  transition: opacity 0.15s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
.btn-dark:hover { opacity: 0.82; }
a.btn-dark { text-decoration: none; background-image: none; }

/* ─── Nav ─────────────────────────────────────────── */
.nav-wrap {
  background: #f6f5f3; display: flex; align-items: center; justify-content: space-between;
  padding: 24px max(clamp(20px, 4.9vw, 70px), calc((100% - 1440px) / 2 + 70px));
  width: 100%; position: sticky; top: 0; z-index: 50;
}
.nav-links { display: flex; gap: 48px; align-items: center; font-weight: 500; font-size: 16px; color: #1d1d1b; white-space: nowrap; }
.nav-links a {
  text-decoration: none; color: inherit; display: inline-block;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: right bottom; background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.35s ease, opacity 0.15s ease;
}
.nav-links a:hover { background-size: 100% 1px; background-position: right bottom; }
.nav-right { display: flex; align-items: center; gap: 40px; }
.nav-ham { display: none; background: none; border: none; cursor: pointer; padding: 4px; }

/* ─── Mobile full-screen overlay ──────────────────── */
.mobile-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: #feffc5;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease;
}
.mobile-overlay.open { opacity: 1; pointer-events: all; }
.mobile-overlay-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; flex-shrink: 0;
}
.mobile-close {
  background: none; border: none; cursor: pointer; padding: 4px;
  display: flex; align-items: center;
}
.mobile-overlay-links {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start;
  padding: 0 20px; overflow-y: auto;
}
.mobile-overlay-links a {
  font-family: 'Instrument Serif', serif; font-weight: 400;
  font-size: 48px; line-height: 1.2; color: #191919;
  text-decoration: none; display: inline-block;
  padding: 12px 0;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: right bottom; background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size 0.35s ease;
}
.mobile-overlay-links a:hover { background-size: 100% 2px; background-position: right bottom; }
.mobile-overlay-bottom { padding: 20px 20px 40px; flex-shrink: 0; }

/* ─── Footer ──────────────────────────────────────── */
.footer-wrap { background: #f6f5f3; display: flex; flex-direction: column; gap: 80px; padding: 56px clamp(20px, 4.9vw, 70px) 32px; width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; margin-top: 56px; }
.footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.footer-cols { display: flex; gap: 80px; align-items: flex-start; }
.footer-col { display: flex; flex-direction: column; gap: 24px; }
.footer-col-heading { font-weight: 500; font-size: 16px; line-height: 1.2; color: #000; margin: 0; white-space: nowrap; }
.footer-links { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.footer-links a {
  font-weight: 350; font-size: 16px; line-height: 1.5; color: #818181;
  text-decoration: none; white-space: nowrap; display: inline-block;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: right bottom; background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.35s ease;
}
.footer-links a:hover { background-size: 100% 1px; background-position: right bottom; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; font-weight: 350; font-size: 14px; line-height: 1.5; color: #191919; white-space: nowrap; }

/* ─── Responsive ──────────────────────────────────── */
@media (max-width: 1080px) {
  .footer-wrap { padding-top: 48px; padding-bottom: 32px; }
  .footer-top { flex-direction: column-reverse; gap: 80px; align-items: flex-start; }
  .footer-cols { gap: 0; flex-wrap: nowrap; width: 100%; justify-content: space-between; align-self: auto; }
  .footer-col { align-items: flex-start; text-align: left; }
  .footer-col-heading { font-size: 16px; text-align: left; }
  .footer-links { align-items: flex-start; }
  .footer-links a { text-align: left; }
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; gap: 0; }
}
@media (max-width: 1000px) {
  .nav-wrap { padding: 16px 20px; }
  .nav-links { display: none; }
  .nav-right > .btn-dark { display: none; }
  .nav-ham { display: flex; }
  .footer-wrap { padding-top: 48px; padding-bottom: 32px; }
}
@media (max-width: 768px) {
  .footer-wrap { padding-top: 48px; padding-bottom: 32px; gap: 40px; max-width: 100%; }
  .footer-top { flex-direction: column-reverse; gap: 64px; }
  .footer-cols { flex-wrap: wrap; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
  .footer-links a { white-space: normal; }
}