*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #23252B; }
::selection { background: #E8B84B; color: #23252B; }

/* Nav links */
.nav-link {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 6px 2px;
  transition: color .2s;
  color: #AAB0BA;
  border-bottom: 2px solid transparent;
}
.nav-link:hover { color: #F4F1EA; }
.nav-link.active { color: #F4F1EA; border-bottom-color: #E8B84B; }

/* Buttons */
.btn-gold {
  display: inline-block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  text-decoration: none;
  color: #23252B;
  background: #E8B84B;
  border-radius: 100px;
  transition: background .2s;
}
.btn-gold:hover { background: #f0c863; }

.btn-outline-light {
  display: inline-block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  text-decoration: none;
  color: #F4F1EA;
  background: transparent;
  border: 1px solid rgba(244,241,234,0.25);
  border-radius: 100px;
  transition: border-color .2s;
}
.btn-outline-light:hover { border-color: #F4F1EA; }

.btn-dark {
  display: inline-block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  text-decoration: none;
  color: #F4F1EA;
  background: #23252B;
  border-radius: 100px;
  transition: background .2s;
}
.btn-dark:hover { background: #2e3038; }

.btn-outline-dark {
  display: inline-block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  text-decoration: none;
  color: #23252B;
  background: transparent;
  border: 1px solid rgba(35,37,43,0.3);
  border-radius: 100px;
  transition: border-color .2s;
}
.btn-outline-dark:hover { border-color: #23252B; }

/* Service cards */
.service-card {
  background: #2C2E35;
  border: 1px solid rgba(244,241,234,0.1);
  border-radius: 16px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 240px;
  transition: border-color .2s;
}
.service-card:hover { border-color: rgba(232,184,75,0.5); }

/* Work thumbnails */
.work-thumb { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid rgba(244,241,234,0.1); display: block; text-decoration: none; }
.work-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.work-thumb:hover img { transform: scale(1.04); }
.work-thumb .overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(35,37,43,0), rgba(35,37,43,0.6)); }
.work-thumb .caption { position: absolute; left: 24px; right: 24px; bottom: 22px; }
.work-thumb .caption-tag { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #E8B84B; font-weight: 700; }
.work-thumb .caption-title { margin-top: 8px; font-family: 'Sora', sans-serif; font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); color: #F4F1EA; line-height: 1.1; }

/* Text hover links */
.text-link { color: #AAB0BA; text-decoration: none; border-bottom: 1px solid rgba(244,241,234,0.25); padding-bottom: 3px; transition: color .2s; }
.text-link:hover { color: #F4F1EA; }

/* Pricing cards */
.pricing-card-cta-dark {
  margin-top: auto;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  color: #F4F1EA;
  background: transparent;
  border: 1px solid rgba(244,241,234,0.25);
  padding: 14px 24px;
  border-radius: 100px;
  text-decoration: none;
  display: block;
  transition: border-color .2s;
}
.pricing-card-cta-dark:hover { border-color: #F4F1EA; }

.pricing-card-cta-gold {
  margin-top: auto;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  color: #23252B;
  background: #E8B84B;
  padding: 14px 24px;
  border-radius: 100px;
  text-decoration: none;
  display: block;
  transition: background .2s;
}
.pricing-card-cta-gold:hover { background: #f0c863; }

/* Footer links */
.footer-link { color: #C9CCD2; text-decoration: none; font-size: 15px; transition: color .2s; }
.footer-link:hover { color: #F4F1EA; }
.footer-social { font-size: 14px; font-weight: 600; color: #D6D8DD; text-decoration: none; border: 1px solid rgba(244,241,234,0.18); border-radius: 100px; padding: 8px 16px; transition: border-color .2s; }
.footer-social:hover { border-color: #F4F1EA; }

/* Form */
input::placeholder, textarea::placeholder { color: #868B95; }
.ep-field { width: 100%; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; color: #F4F1EA; background: #23252B; border: 1px solid rgba(244,241,234,0.16); border-radius: 11px; padding: 14px 16px; transition: border-color .2s; }
.ep-field:focus { outline: none; border-color: #E8B84B; }
select.ep-field { appearance: none; -webkit-appearance: none; }
.ep-submit { width: 100%; margin-top: 4px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 16px; color: #23252B; background: #E8B84B; border: none; padding: 16px 24px; border-radius: 100px; cursor: pointer; transition: background .2s; }
.ep-submit:hover { background: #f0c863; }

/* ─── Nav: desktop base ─────────────────────────────── */
.nav-links { display: flex; align-items: center; gap: 34px; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: #F4F1EA;
  line-height: 0;
  flex-shrink: 0;
}

/* ─── Work gallery grid classes ─────────────────────── */
.work-grid-2col     { display: grid; grid-template-columns: 1.6fr 1fr;    gap: 22px; }
.work-grid-2col-rev { display: grid; grid-template-columns: 1fr  1.6fr;   gap: 22px; }
.work-grid-3col     { display: grid; grid-template-columns: 1fr  1fr 1fr; gap: 22px; }

/* ─── Mobile (≤ 700px) ──────────────────────────────── */
@media (max-width: 700px) {

  /* Nav */
  .nav-toggle { display: flex; align-items: center; justify-content: center; }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(23, 25, 29, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(244,241,234,0.1);
    padding: 8px 28px 24px;
    z-index: 100;
  }
  .nav-links.open { display: flex; }

  .nav-links .nav-link {
    font-size: 17px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(244,241,234,0.08);
  }
  .nav-links .nav-link.active { border-bottom-color: rgba(232,184,75,0.25); }

  .nav-links .btn-gold {
    margin-top: 16px;
    text-align: center;
    padding: 14px 24px !important;
    font-size: 16px !important;
    display: block;
  }

  /* Reduce horizontal padding on all sections */
  section { padding-left: 20px !important; padding-right: 20px !important; }

  /* Hero: trim top/bottom so it doesn't eat the whole screen */
  .hero-section { padding-top: 72px !important; padding-bottom: 72px !important; }

  /* Work gallery — collapse to single column */
  .work-grid-2col,
  .work-grid-2col-rev,
  .work-grid-3col { grid-template-columns: 1fr; }

  /* Work thumb captions stay readable at single-column size */
  .work-thumb .caption-title { font-size: 20px; }

  /* Pricing retainer deliverables — single column */
  .retainer-items { grid-template-columns: 1fr !important; }

  /* Footer email — prevent overflow on narrow screens */
  footer a[href^="mailto"] { font-size: 16px !important; word-break: break-all; }
}