/* ============================================================
   Benefit — Premium Binding Wire · Shared Stylesheet
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: #16110a; -webkit-font-smoothing: antialiased; }
::selection { background: #f7b500; color: #16110a; }

/* ---- Keyframes ---- */
@keyframes ld-bar  { 0%   { transform: scaleX(0); }    100% { transform: scaleX(1); } }
@keyframes ld-out  { 0%   { transform: translateY(0); } 100% { transform: translateY(-101%); } }
@keyframes ld-fade { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rise    { 0%   { transform: translateY(110%); } 100% { transform: translateY(0); } }
@keyframes soft-in { 0%   { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes marq    { 0%   { transform: translateX(0); }    100% { transform: translateX(-50%); } }
@keyframes spin    { 100% { transform: rotate(360deg); } }
@keyframes bob     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* ---- Navigation ---- */
.nav-link {
  color: #18140f;
  text-decoration: none;
  transition: color .3s;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.nav-link:hover { color: #f7b500; }
.nav-link.active {
  color: #b8351c;
  border-bottom: 2px solid #f7b500;
  padding-bottom: 3px;
}
/* On dark-hero pages links start light and switch to dark on scroll */
.dark-hero .nav-link { color: #f1ece1; }
.dark-hero .nav-link.active { color: #f7b500; border-bottom-color: #f7b500; }
.nav-cta {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #18140f;
  background: #f7b500;
  padding: 13px 22px;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .25s;
}
.nav-cta:hover { background: #fff; }

/* ---- Buttons ---- */
.btn-dark {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #f1ece1;
  background: #18140f;
  padding: 17px 30px;
  border-radius: 100px;
  text-decoration: none;
  display: inline-block;
  transition: background .25s;
}
.btn-dark:hover { background: #e1251b; }

.btn-outline {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #18140f;
  background: transparent;
  border: 1px solid #cbc0aa;
  padding: 17px 30px;
  border-radius: 100px;
  text-decoration: none;
  display: inline-block;
  transition: border-color .25s;
}
.btn-outline:hover { border-color: #18140f; }

.btn-yellow {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #18140f;
  background: #f7b500;
  padding: 17px 30px;
  border-radius: 100px;
  text-decoration: none;
  display: inline-block;
  transition: background .25s;
}
.btn-yellow:hover { background: #fff; }

.btn-outline-light {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #f1ece1;
  background: transparent;
  border: 1px solid #46402f;
  padding: 17px 30px;
  border-radius: 100px;
  text-decoration: none;
  display: inline-block;
  transition: border-color .25s, color .25s;
}
.btn-outline-light:hover { border-color: #f7b500; color: #f7b500; }

/* ---- Contact cards ---- */
.contact-card {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  background: #1f190f;
  border: 1px solid #33291a;
  border-radius: 10px;
  padding: 20px 24px;
  transition: border-color .3s;
}
.contact-card:hover { border-color: #f7b500; }

/* ---- Footer links ---- */
.footer-link {
  color: #cdbf9f;
  text-decoration: none;
  transition: color .25s;
}
.footer-link:hover { color: #f7b500; }

/* ---- Image placeholders ---- */
.img-slot {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e7e0d0 0%, #d8cdb8 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #8a8474;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  min-height: 200px;
}
.img-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Form elements ---- */
.form-input,
.form-textarea {
  width: 100%;
  background: #1f190f;
  border: 1px solid #33291a;
  border-radius: 8px;
  padding: 16px 20px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 16px;
  color: #f1ece1;
  outline: none;
  transition: border-color .3s;
}
.form-input::placeholder,
.form-textarea::placeholder { color: #6f6a5c; }
.form-input:focus,
.form-textarea:focus { border-color: #f7b500; }
.form-textarea { resize: vertical; min-height: 120px; }

/* ---- Success message ---- */
.form-success {
  display: none;
  align-items: center;
  gap: 14px;
  background: #1f190f;
  border: 1px solid #f7b500;
  border-radius: 10px;
  padding: 20px 24px;
  color: #f7b500;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin-top: 14px;
}
.form-success.visible { display: flex; }