/* ===== Optional: Section numbering via counters (cleaner than nth-of-type) =====*/
@layer components {
   body { counter-reset: section; }
   section>h10,
   section>h2 { counter-increment: section; }
   section>h10::before {
      content: counter(section) ". ";
      color: #af0101;
   }

   .forms-grid {
      display: grid;
      gap: var(--space-4);
      width: min(90%, 70rem);
      margin: var(--space-4) auto 0;
   }

   @media (min-width: 48rem) {
      .forms-grid { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
   }

   .form-card {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      padding: var(--space-4);
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: var(--radius-2);
      background: rgba(255, 255, 255, .5);
      box-shadow: 0 12px 28px rgba(17, 17, 17, 0.08);
      backdrop-filter: blur(12px);
   }

   .contact-form { margin: var(--space-4) 0; }

   .quote-form { margin: var(--space-4) 0; }

   .form-required-note {
      margin: 0;
      font-size: var(--fs-xs);
      color: var(--color-muted);
   }

   .form-required-note .required,
   label .required {
      color: var(--color-danger, #ff0019);
      font-weight: 600;
   }

   .form-card h5 {
      margin: 0;
      letter-spacing: 0.08rem;
   }

   .form-row {
      display: grid;
      gap: var(--space-3);
   }

   @media (min-width: 36rem) {
      .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   }

   .form-field {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
   }

   .form-field label,
   .form-card label {
      font-size: var(--fs-xs);
      font-weight: 600;
      letter-spacing: 0.08rem;
      text-transform: uppercase;
   }

   .form-field input,
   .form-field textarea,
   .form-field select {
      width: 100%;
      padding: 0.75rem 0.85rem;
      font: inherit;
      color: var(--color-fg);
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid rgba(0, 0, 0, 0.15);
      border-radius: var(--radius-2);
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
   }

   .form-field textarea {
      min-height: 7rem;
      resize: vertical;
   }

   .char-counter {
      margin: 0;
      font-size: var(--fs-xs);
      color: var(--color-muted);
   }

   .form-hint {
      margin: 0 0 var(--space-2);
      font-size: var(--fs-xs);
      color: var(--color-muted);
   }

   .form-field--sub { margin-top: var(--space-3); }

   .form-field input:focus-visible,
   .form-field textarea:focus-visible,
   .form-field select:focus-visible {
      outline: none;
      border-color: var(--color-accent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 30%, transparent);
      background: rgba(255, 255, 255, 1);
   }

   .form-field--checkbox {
      flex-direction: row;
      align-items: center;
      gap: var(--space-2);
   }

   .form-field--checkbox label {
      text-transform: none;
      letter-spacing: 0;
      font-weight: 500;
      font-size: var(--fs-sm);
      margin: 0;
   }

   .form-fieldset {
      border: 1px solid rgba(0, 0, 0, 0.12);
      border-radius: var(--radius-2);
      padding: var(--space-3);
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
   }

   .form-fieldset legend {
      padding: 0 var(--space-1);
      font-size: var(--fs-xs);
      font-weight: 600;
      letter-spacing: 0.06rem;
      text-transform: uppercase;
      color: var(--color-muted);
   }

   .form-option {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--fs-sm);
      white-space: normal;
   }

   .form-option input {
      width: 1rem;
      height: 1rem;
   }

   .form-option-group {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
   }

   .form-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      justify-content: flex-end;
   }

   .form-field--file input[type="file"] {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      border: 0;
   }

   .file-upload {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
   }

   .file-upload__dropzone {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
      min-height: 140px;
      border: 2px dashed color-mix(in srgb, var(--color-fg) 35%, transparent);
      border-radius: var(--radius-2);
      padding: var(--space-3);
      background: rgba(0, 0, 0, 0.06);
      color: var(--color-fg);
      cursor: pointer;
      text-align: center;
      transition: border-color 0.2s ease, background 0.2s ease;
   }

   .file-upload__dropzone:hover,
   .file-upload__dropzone:focus-visible {
      border-color: var(--color-accent);
      background: rgba(0, 0, 0, 0.09);
      outline: none;
   }

   .file-upload.is-dragover .file-upload__dropzone {
      border-color: var(--color-accent);
      background: rgba(0, 0, 0, 0.12);
   }

   .file-upload__subtitle {
      font-size: var(--fs-xs);
      color: var(--color-muted);
   }

   .file-upload__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
   }

   .file-upload__item {
      font-size: var(--fs-xs);
      color: var(--color-fg);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-2);
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: var(--radius-1);
      padding: 0.35rem 0.5rem;
      background: rgba(255, 255, 255, 0.85);
   }

   .file-upload__feedback {
      margin: 0;
      font-size: var(--fs-xs);
      color: var(--color-danger, #ff0019);
   }

   @media (max-width: 48rem) {
      .form-row { grid-template-columns: 1fr; }

      .file-upload__dropzone { min-height: 120px; }
   }

   input[type="checkbox"],
   input[type="radio"] { accent-color: var(--color-accent); }
}