/* Complementary fields only: inherit the current contact grid and controls. */
.contact-extra-fields { grid-column:1/-1; display:grid; grid-template-columns:inherit; gap:inherit; min-width:0; }
.contact-extra-fields[hidden] { display:none; }
.contact-extra-fields .form-field { min-width:0; }
.contact-extra-fields input,.contact-extra-fields select { min-width:0; max-width:100%; }
.contact-extra-fields .contact-field-help { margin:0; color:#e1e3eb; font-size:16px; font-weight:400; line-height:1.5; letter-spacing:0; text-transform:none; }
.contact-extra-fields input[type="file"] { padding:6px 12px; overflow:hidden; cursor:pointer; }
.contact-extra-fields input[type="file"]::file-selector-button { margin-right:12px; padding:8px 12px; border:1px solid var(--red); background:var(--red); color:#fff; font:inherit; font-weight:800; cursor:pointer; transition:background-color .2s,color .2s; }
.contact-extra-fields input[type="file"]:hover::file-selector-button,.contact-extra-fields input[type="file"]:focus-visible::file-selector-button { background:#fff; color:var(--red); }
.contact-extra-fields input[type="date"] { appearance:none; min-height:56px; }
@media (max-width:700px) {
  .contact-extra-fields { grid-column:1; }
}
@media (prefers-reduced-motion:reduce) {
  .contact-extra-fields input[type="file"]::file-selector-button { transition:none; }
}

/* Live completion indicator for active required contact fields. */
.contact-form-progress { margin:0 0 24px; padding:0 0 20px; border-bottom:1px solid rgba(255,255,255,.16); }
.contact-form-progress-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:12px; }
.contact-form-progress-heading>span { color:#fff; font-size:14px; font-weight:950; letter-spacing:.16em; text-transform:uppercase; }
.contact-form-progress-heading strong { color:#d4d5dc; font-size:13px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.contact-form-progress-heading strong span { color:#ff5963; font-size:16px; }
.contact-form-progress-track { width:100%; height:9px; overflow:hidden; border:1px solid rgba(255,255,255,.15); background:rgba(5,5,8,.5); box-shadow:inset 0 2px 5px rgba(0,0,0,.48); }
.contact-form-progress-fill { display:block; width:0; height:100%; background:linear-gradient(90deg,#a80f1c 0%,var(--red) 64%,#ff7b84 100%); box-shadow:0 0 10px rgba(240,43,52,.86),0 0 22px rgba(240,43,52,.48); transition:width .3s cubic-bezier(.2,.75,.2,1); }
.contact-form-progress-track.is-complete .contact-form-progress-fill { background:linear-gradient(90deg,#168444,#25c469 68%,#8affbd); box-shadow:0 0 12px rgba(37,196,105,.8),0 0 24px rgba(37,196,105,.42); }

/* Five-second alert displayed inside the contact form panel. */
.contact-validation-alert {
  position:relative; width:100%; max-height:0; min-height:0; overflow:hidden; display:flex; align-items:center; gap:16px;
  margin:0; padding:0 20px; border:0 solid transparent; border-left-width:0;
  background:linear-gradient(135deg,rgba(55,8,16,.96),rgba(17,17,21,.96) 62%,rgba(34,14,24,.96)); color:#fff;
  box-shadow:none; opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:max-height .25s ease,min-height .25s ease,margin .25s ease,padding .25s ease,border-width .25s ease,opacity .2s ease,transform .25s ease,visibility 0s linear .25s;
}
.contact-validation-alert.is-visible {
  max-height:180px; min-height:76px; margin:0 0 22px; padding:15px 20px;
  border-width:1px; border-color:rgba(255,105,117,.78); border-left-width:5px; border-left-color:var(--red);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 32px rgba(0,0,0,.34),0 0 28px rgba(240,43,52,.32);
  opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s;
}
.contact-validation-alert-icon {
  width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:50%;
  background:var(--red); color:#fff; font-size:25px; font-weight:950; line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 20px rgba(240,43,52,.55);
}
.contact-validation-alert-copy { min-width:0; display:flex; flex-direction:column; gap:4px; }
.contact-validation-alert-copy strong { color:#ff5963; font-size:13px; font-weight:950; letter-spacing:.16em; text-transform:uppercase; }
.contact-validation-alert-copy span { font-size:16px; font-weight:700; line-height:1.35; }
.form-field [aria-invalid="true"] { border-color:#ff5260; box-shadow:0 0 0 2px rgba(255,82,96,.24),0 0 20px rgba(240,43,52,.95),0 0 42px rgba(240,43,52,.62); }
@media (max-width:700px) {
  .contact-form-progress { margin-bottom:20px; padding-bottom:17px; }
  .contact-form-progress-heading { align-items:flex-end; gap:10px; margin-bottom:10px; }
  .contact-form-progress-heading>span { font-size:12px; }
  .contact-form-progress-heading strong { font-size:11px; text-align:right; }
  .contact-form-progress-heading strong span { font-size:14px; }
  .contact-validation-alert { gap:12px; padding-right:15px; padding-left:15px; }
  .contact-validation-alert.is-visible { min-height:70px; margin-bottom:18px; padding:13px 15px; }
  .contact-validation-alert-icon { width:38px; height:38px; flex-basis:38px; font-size:22px; }
  .contact-validation-alert-copy strong { font-size:12px; }
  .contact-validation-alert-copy span { font-size:15px; }
}
@media (prefers-reduced-motion:reduce) {
  .contact-form-progress-fill,.contact-validation-alert { transition:none; }
  .contact-validation-alert { transform:none; }
}
