/* ============================================================
   ALIFY — forms.css · redesigned dark-glass form system.
   Contact / quote / brief / newsletter / popups all share this.
   ============================================================ */

.form { display: block; }

.form__row { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } .form__row--3 { grid-template-columns: 1fr 1fr 1fr; } }
.form__row + .form__row, .form__row + .field, .field + .form__row { margin-top: 1.5rem; }

/* editorial step label inside long forms */
.form-grouplabel {
  display: flex; align-items: center; gap: 1rem;
  margin: 2.5rem 0 1.5rem;
  font-family: var(--ff-mono);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--sage-2);
}
.form-grouplabel:first-child { margin-top: 0; }
.form-grouplabel span {
  color: var(--green);
  font-weight: 600;
  width: 30px; height: 30px; flex: none;
  display: inline-grid; place-items: center;
  border: 1px solid rgba(12, 220, 42, .4);
  border-radius: 50%;
  background: rgba(12, 220, 42, .06);
}
.form-grouplabel::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* fields */
.field { display: block; position: relative; }
.field + .field { margin-top: 1.5rem; }

.field__label {
  display: block;
  margin-bottom: .6rem;
  font-family: var(--ff-mono);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--sage-2);
  transition: color .3s;
}
.field__label .req { color: var(--green); }
.field:focus-within .field__label { color: var(--green); }

/* dark-glass inputs */
.field__input,
.field__select,
.field__textarea {
  width: 100%;
  background: rgba(247, 247, 245, .045);
  color: var(--off);
  caret-color: var(--green);
  border: 1px solid var(--line-2);
  border-bottom: 2px solid var(--line-2);
  border-radius: 10px;
  padding: 1.05rem 1.15rem;
  font-family: var(--ff-body);
  font-size: .98rem; font-weight: 500;
  line-height: 1.45;
  transition: border-color .3s, background .3s, box-shadow .3s, transform .3s;
}
.field__input::placeholder, .field__textarea::placeholder { color: rgba(236, 236, 228, .3); font-weight: 400; }

.field__input:hover, .field__select:hover, .field__textarea:hover { border-color: rgba(236, 236, 228, .32); border-bottom-color: rgba(236, 236, 228, .32); }

.field__input:focus, .field__select:focus, .field__textarea:focus {
  outline: none;
  background: rgba(247, 247, 245, .075);
  border-color: rgba(12, 220, 42, .7);
  border-bottom-color: var(--green);
  box-shadow: 0 0 0 4px rgba(12, 220, 42, .1), 0 18px 40px -24px rgba(0, 0, 0, .7);
}
.field__textarea { min-height: 150px; resize: vertical; line-height: 1.6; }

/* keep dark fields dark when the browser autofills */
.field__input:-webkit-autofill, .field__textarea:-webkit-autofill, .field__select:-webkit-autofill {
  -webkit-text-fill-color: var(--off);
  caret-color: var(--green);
  -webkit-box-shadow: 0 0 0 1000px #1A1D29 inset;
  box-shadow: 0 0 0 1000px #1A1D29 inset;
  transition: background-color 99999s ease-out;
}

/* select — dark chevron */
.field__select {
  appearance: none; -webkit-appearance: none;
  padding-right: 3rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 256 256'%3E%3Cpath fill='none' stroke='%233DA68D' stroke-width='18' stroke-linecap='round' stroke-linejoin='round' d='m208 96-80 80-80-80'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.2rem center;
}
.field__select:invalid { color: rgba(236, 236, 228, .3); font-weight: 400; }
.field__select option { background: #191B26; color: var(--off); }

/* validation */
.field__msg {
  display: none;
  margin-top: .55rem;
  font-size: .82rem; font-weight: 500;
  color: #FF8585;
}
.field--error .field__msg { display: block; }
.field--error .field__input, .field--error .field__select, .field--error .field__textarea {
  border-color: rgba(228, 85, 85, .65);
  border-bottom-color: #E45555;
  box-shadow: 0 0 0 4px rgba(228, 85, 85, .1);
  animation: field-shake .35s ease;
}
.field--error .field__label { color: #FF8585; }
@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.field--ok .field__input, .field--ok .field__select, .field--ok .field__textarea { border-color: rgba(99, 157, 117, .5); border-bottom-color: var(--sage); }

/* honeypot — invisible to humans */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* form footer + status */
.form__foot { margin-top: 2rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.form__note { font-size: .8rem; color: var(--faint); max-width: 36ch; line-height: 1.6; }
.form__status { font-size: .9rem; font-weight: 500; }
.form__status--error { color: #FF8585; }
.form__status--ok { color: var(--green); }

/* success panel (form swaps into this) */
.form__success {
  background: linear-gradient(160deg, #E9E1B8, var(--sand) 60%, #DCD3A0);
  color: #17170E;
  border-radius: 12px;
  padding: clamp(1.75rem, 4vw, 3rem);
  display: grid;
  gap: 1.1rem;
  border: 1px solid rgba(23, 23, 14, .15);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6);
}
.form__success .ph { font-size: 2.4rem; color: var(--teal); }
.form__success h3 { color: #17170E; }
.form__success p { color: rgba(23, 23, 14, .75); }
[hidden] { display: none !important; }

/* ---------- radio & check cards (quote form) ---------- */
.choices { display: grid; gap: .8rem; }
.choices--2 { grid-template-columns: 1fr 1fr; }
.choices--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .choices--3, .choices--2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .choices--3, .choices--2 { grid-template-columns: 1fr; } }

.choice { position: relative; display: block; }
.choice input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.choice__card {
  display: flex; align-items: center; gap: .8rem;
  min-height: 3.6rem;
  padding: .95rem 1.1rem;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: rgba(247, 247, 245, .04);
  font-family: var(--ff-mono);
  font-size: .78rem; font-weight: 500; letter-spacing: .05em;
  color: var(--muted);
  transition: border-color .3s, color .3s, background .3s, transform .25s, box-shadow .3s;
}
/* radio dot indicator */
.choice__card::before {
  content: "";
  width: 15px; height: 15px; flex: none;
  border-radius: 50%;
  border: 1.5px solid rgba(236, 236, 228, .35);
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.choice:hover .choice__card { border-color: var(--teal-2); color: var(--off); transform: translateY(-2px); }
.choice:hover .choice__card::before { border-color: var(--teal-2); }
.choice input:focus-visible + .choice__card { outline: 2px solid var(--green); outline-offset: 3px; }
.choice input:checked + .choice__card {
  border-color: rgba(12, 220, 42, .65);
  color: var(--off);
  background: rgba(12, 220, 42, .07);
  box-shadow: 0 14px 30px -20px rgba(12, 220, 42, .35);
}
.choice input:checked + .choice__card::before {
  border-color: var(--green);
  background: radial-gradient(circle at center, var(--green) 45%, transparent 52%);
  box-shadow: 0 0 10px rgba(12, 220, 42, .5);
}

/* ---------- newsletter (footer + popup) ---------- */
.nl { display: flex; gap: .65rem; }
.nl .field__input { flex: 1; padding: .95rem 1.1rem; }
.nl__btn {
  flex: none;
  width: 54px;
  display: inline-grid; place-items: center;
  background: var(--green); color: var(--ink);
  border: 1px solid var(--green);
  border-radius: 10px;
  font-size: 1.25rem;
  transition: background .3s, transform .3s, box-shadow .3s;
}
.nl__btn:hover { background: #2BEA45; transform: translateY(-2px); box-shadow: 0 12px 30px -14px rgba(12, 220, 42, .5); }
.nl__status { margin-top: .65rem; font-size: .82rem; min-height: 1.2em; }
.nl__status--ok { color: var(--green); }
.nl__status--error { color: #FF8585; }
.nl__fine { margin-top: .75rem; font-size: .75rem; color: var(--faint); }

/* fieldset legends styled like labels */
.form__legend {
  font-family: var(--ff-mono);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--sage-2);
  margin-bottom: .8rem;
}
fieldset { border: 0; min-width: 0; }
fieldset + fieldset, fieldset + .form__row, .form__row + fieldset { margin-top: 2rem; }

/* ---------- elevated form panel (contact + quote pages) ---------- */
.form-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(170deg, #14161F, #10121A 70%);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .65);
}
/* top brand accent (halo uses ::before, so accent rides ::after) */
.form-panel::after {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(1.75rem, 4vw, 3rem); right: clamp(1.75rem, 4vw, 3rem);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--green), rgba(65, 169, 143, .55) 55%, transparent);
  pointer-events: none;
}
.form-panel__head { margin-bottom: 2rem; }
.form-panel__head h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: 1rem; }