form input, form textarea {
  position: relative;
  display: block;
  width: 100%;
  border: none;
  outline: none;
  margin: 0;
  padding: 1.2rem 0.2rem;
  background-color: transparent;
  border-bottom: 2px solid var(--st-medium);
  font: normal var(--fw-regular) 2.2rem var(--_font-accent);
  height: 6rem;
  line-height: 6rem;
  color: var(--t-bright);

  /* Animated focus underline: a brand-accent line that draws in over the
     static base border instead of the old instant grey→black colour jump.
     Drawn via a background gradient so it animates smoothly (pseudo-elements
     aren't allowed on inputs). */
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 0.45s var(--_animbezier),
              border-color   0.45s var(--_animbezier),
              color          0.45s var(--_animbezier);
}

/* Slightly highlight the base line on focus, then draw the accent over it. */
form input:focus, form textarea:focus {
  border-bottom-color: var(--st-medium);
  background-size: 100% 2px;
}

/* The animated underline is the focus indicator, so drop the global
   :focus-visible box-outline on form fields (it framed the whole field
   in a hard accent rectangle). */
form input:focus-visible,
form textarea:focus-visible,
form select:focus-visible,
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact-form select:focus-visible {
  outline: none;
  outline-offset: 0;
}

form textarea {
  height: 16rem;
  line-height: 1.6;
  resize: none;
}

/* Select — match the underline styling used for inputs, plus a custom
   chevron so we don't fall back to the browser-default dropdown arrow. */
form select {
  position: relative;
  display: block;
  width: 100%;
  outline: none;
  margin: 0;
  padding: 1.2rem 3rem 1.2rem 0.2rem;
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid var(--st-medium, rgba(15, 23, 42, 0.18));
  font: normal var(--fw-regular) 2.2rem var(--_font-accent);
  height: 6rem;
  line-height: 6rem;
  color: var(--t-bright);
  cursor: pointer;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Layer 1: the animated accent underline (draws in on focus).
     Layers 2 & 3: the custom chevron. */
  background-image: linear-gradient(var(--accent), var(--accent)),
                    linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: 0 100%,
                       calc(100% - 12px) calc(50% - 3px),
                       calc(100% - 6px)  calc(50% - 3px);
  background-size: 0% 2px, 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  transition: background-size 0.45s var(--_animbezier),
              border-color   0.45s var(--_animbezier);
}

form select::-ms-expand { display: none; }

form select:focus {
  border-bottom-color: var(--st-medium);
  background-size: 100% 2px, 6px 6px, 6px 6px;
}

form select:invalid,
form select option[value=""] { color: var(--t-muted); }

form select option { color: #111; background: #fff; }

/* Contact form select — match the input underline exactly. */
.contact-form select { border-bottom: 2px solid var(--st-medium); }

form input:focus:required:invalid,
form textarea:focus:required:invalid {
  color: var(--t-bright);
}

form input:required:valid,
form textarea:required:valid {
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  form textarea {
      height: 23rem;
    }
}

@media only screen and (min-width: 1600px) {
  form input,
    form textarea {
      font-size: 2.2rem;
    }
}

* ================================
   Contact Form – Select Dropdown
   ================================ */

.contact-form select {
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    padding: var(--sp-14) 0;
    font-size: var(--fs-16);
    line-height: 1.4;
    color: #ffffff;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    cursor: pointer;
        border-bottom: 2px solid var(--st-medium);
}

/* Dropdown wrapper */
.contact-form select {
    /* Layer 1: animated accent underline (draws in on focus).
       Layers 2 & 3: the custom chevron. */
    background-image: linear-gradient(var(--accent), var(--accent)),
                      linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: 0 100%,
                         calc(100% - 18px) calc(50% - 3px),
                         calc(100% - 12px) calc(50% - 3px);
    background-size: 0% 2px, 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    font: normal var(--fw-regular) 2.2rem var(--_font-accent);
    color: var(--t-bright);
    transition: background-size 0.45s var(--_animbezier),
                border-color   0.45s var(--_animbezier);
}

.contact-form select option[disabled] {
    color: rgba(255, 255, 255, 0.4);
}

.contact-form select:focus {
    border-bottom-color: var(--st-medium);
    background-size: 100% 2px, 6px 6px, 6px 6px;
}

.contact-form select.has-error {
    border-bottom-color: #ff6b6b;
}

.contact-form select option {
    background-color: #0e0e0e;
    color:  var(--t-bright);
}

@media (max-width: 768px) {
  .contact-form select {
          font-size: var(--fs-15);
          padding: var(--sp-12) 0;
      }
}

.bl-contact__field{display:flex;flex-direction:column;gap:var(--sp-8);min-width:0}
.bl-contact__field.bl-contact__quote { gap: var(--sp-10); } /* exception: the quote panel (.bl-contact__quote, bones-look/06) keeps its 10px gap, which won over the field's 8px before this move */

.bl-contact__field label{font-family:var(--_font-mono);font-size:var(--fs-12);letter-spacing:.06em;text-transform:uppercase;color:var(--t-medium)}

.bl-contact__field input,.bl-contact__field select,.bl-contact__field textarea{width:100%;box-sizing:border-box;font:inherit;font-size:var(--fs-16);color:var(--t-bright);background:var(--base);border:1px solid var(--bl-line);border-radius:var(--r-12);padding:var(--sp-14) var(--sp-16);margin:0;transition:border-color .2s}

.bl-contact__field textarea{resize:vertical;min-height:150px}

.bl-contact__field input:focus,.bl-contact__field select:focus,.bl-contact__field textarea:focus{outline:none;border-color:var(--accent)}

.bl-contact__field.error input,.bl-contact__field.error select,.bl-contact__field.error textarea{border-color:#d9534f}

.bl-contact__field .field-error{font-size:var(--fs-13);color:#d9534f;min-height:0}

.bl-contact__field .field-error:empty{display:none}

.bl-contact__field input,
.bl-contact__field select,
.bl-contact__field textarea,
.bl-footer__notify input { border-color: var(--field-border); }

.bl-contact__field input:hover,
.bl-contact__field select:hover,
.bl-contact__field textarea:hover,
.bl-footer__notify input:hover { border-color: var(--field-border-hover); }

.bl-contact__field input:focus,
.bl-contact__field select:focus,
.bl-contact__field textarea:focus,
.bl-footer__notify input:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--accent); }

/* An invalid field keeps its error border on hover and focus. */
.bl-contact__field.error input:hover,
.bl-contact__field.error select:hover,
.bl-contact__field.error textarea:hover,
.bl-contact__field.error input:focus,
.bl-contact__field.error select:focus,
.bl-contact__field.error textarea:focus { border-color: #d9534f; }

.bl-contact__field.error input,
.bl-contact__field.error select,
.bl-contact__field.error textarea,
.bl-contact__field.error input:hover,
.bl-contact__field.error select:hover,
.bl-contact__field.error textarea:hover,
.bl-contact__field.error input:focus,
.bl-contact__field.error select:focus,
.bl-contact__field.error textarea:focus { border-color: var(--field-error); }

.bl-contact__field .field-error { display: flex; gap: var(--sp-6); align-items: flex-start; font-size: var(--fs-14); line-height: 1.4; font-weight: 500; color: var(--field-error); }

.bl-contact__field .field-error:empty { display: none; }

.bl-contact__field .field-error::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: var(--sp-1); background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm-.9 4h1.8v5H7.1V4Zm0 6.4h1.8v1.8H7.1v-1.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm-.9 4h1.8v5H7.1V4Zm0 6.4h1.8v1.8H7.1v-1.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bl-contact__field label { font: 500 13px/1.4 var(--_font-default); letter-spacing: 0; text-transform: none; color: var(--t-bright); }