/* ---------- reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: #F4F0E8;
  color: #171410;
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------- keyframes ---------- */
@keyframes riseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulseRing { 0% { transform: scale(.9); opacity: .55; } 70% { transform: scale(1.6); opacity: 0; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- button / card hover states ----------
   (base look stays inline in the HTML; these add the :hover behavior
   the original artifact expressed with its custom style-hover attribute) */
.btn-dark:hover   { background: #C63F16; }
.btn-orange:hover { background: #F4F0E8; }
.btn-ghost:hover  { border-color: #171410; }
.btn-outline-dark:hover { background: #171410; color: #F4F0E8; }
.card-dark:hover  { border-color: rgba(233,129,79,.6); transform: translateY(-4px); }
.card-light:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(23,20,16,.09); }

button:disabled, .btn-dark:disabled { opacity: .6; cursor: default; }

/* ---------- forms ---------- */
.cform { display: flex; flex-direction: column; gap: 15px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > span {
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: #6b6558;
}
.cform input,
.cform textarea {
  font-family: inherit; font-size: 15px; color: #171410;
  background: #fff; border: 1px solid rgba(23,20,16,.2);
  border-radius: 10px; padding: 12px 14px; width: 100%;
  transition: border-color .18s, box-shadow .18s;
}
.cform textarea { resize: vertical; min-height: 84px; }
.cform input::placeholder,
.cform textarea::placeholder { color: #a8a091; }
.cform input:focus,
.cform textarea:focus {
  outline: none; border-color: #C63F16;
  box-shadow: 0 0 0 3px rgba(198,63,22,.14);
}
.cform input:user-invalid,
.cform textarea:user-invalid { border-color: #c0392b; }

/* honeypot — visually and programmatically hidden from humans */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.form-status { font-size: 14px; line-height: 1.5; min-height: 1px; }
.form-status.ok  { color: #1f7a4d; }
.form-status.err { color: #c0392b; }

/* ---------- modal ---------- */
.modal {
  margin: auto; /* restore native dialog centering (the * reset clears it) */
  width: min(440px, calc(100vw - 32px));
  border: 1px solid rgba(23,20,16,.14);
  border-radius: 18px; padding: clamp(22px,4vw,30px);
  background: #FBF8F2; color: #171410;
  box-shadow: 0 30px 80px rgba(23,20,16,.28);
}
.modal::backdrop { background: rgba(23,20,16,.5); backdrop-filter: blur(3px); }
.modal[open] { animation: riseIn .28s ease both; }
.modal-close {
  border: none; background: transparent; cursor: pointer;
  font-size: 16px; color: #8a8272; line-height: 1;
  padding: 6px; border-radius: 8px; transition: .15s;
}
.modal-close:hover { background: rgba(23,20,16,.06); color: #171410; }