/* ===================================
   CONTACT COMPONENT
   Contact section with form and info
   =================================== */

   .contact {
    background: var(--slate-1);
    padding: var(--space-xl) 0 var(--space-2xl);
  }
  
  @media (min-width: 64rem) {
    .contact {
      padding: var(--space-2xl) 0;
    }
  }
  
  .contact__container {
    max-width: var(--grid-max-width);
    margin: 0 auto;
    padding: 0 var(--space-s);
  }
  
  @media (min-width: 75rem) {
    .contact__container {
      padding: 0;
    }
  }
  
  /* Contact Header */
  .contact__header {
    max-width: 60ch;
    margin-bottom: var(--space-xl);
  }
  
  @media (min-width: 64rem) {
    .contact__header {
      margin-bottom: var(--space-4xl);
    }
  }
  
  .contact__title {
    font-size: clamp(var(--step-2), 4vw, var(--step-5));
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2xs) 0;
    line-height: var(--line-height-default);
  }
  
  @media (min-width: 48rem) {
    .contact__title {
      line-height: var(--line-height-default);
    }
  }
  
  .contact__subtitle {
    font-size: var(--step-0);
    color: var(--color-text-secondary);
    margin: 0;
  }
  
  /* Contact Grid */
.contact__grid {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 64rem) {
  .contact__grid {
    gap: var(--space-4xl);
  }
}
  
  /* Form Section */
  .contact__form-section {
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: var(--space-xl);
    margin-bottom: var(--space-xl);
  }
  
  @media (min-width: 48rem) {
    .contact__form-section {
      order: 2;
      border-bottom: none;
      padding-bottom: 0;
      margin-bottom: 0;
    }
  }
  
  .contact__form-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }
  
  .contact__form-footer {
    margin-top: var(--space-2xs);
  }
  
  .contact__form-note {
    font-size: var(--step--2);
    color: var(--color-text-tertiary);
    margin: 0;
  }
  
  .contact__form-submit {
    margin-top: var(--space-m);
  }
  
  .contact__submit-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-xs);
    background: var(--color-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--step--1);
    color: var(--color-background-primary);
    border-radius: var(--border-radius-full);
    text-decoration: none;
    transition: var(--transition-fast);
    border: none;
    cursor: pointer;
  }
  
  .contact__submit-button:focus {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }
  
  .contact__submit-button:hover {
    background: var(--color-primary-hover);
  }
  
  .contact__submit-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    transition: var(--transition-fast);
  }
  
  .contact__submit-button:hover .contact__submit-icon,
  .contact__submit-button:focus .contact__submit-icon {
    transform: translateX(0.125rem);
  }
  
  /* Contact Info */
  .contact__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-4xl);
  }
  
  .contact__item {
    display: flex;
    gap: var(--space-m);
  }
  
  .contact__item-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-text-tertiary);
  }
  
  .contact__item-icon svg {
    width: 100%;
    height: 100%;
  }
  
  .contact__item-content {
    flex: 1;
  }
  
  .contact__item-title {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-size: var(--step-0);
    margin: 0;
  }
  
  .contact__item-address {
    font-style: normal;
    font-size: var(--step--1);
    color: var(--color-text-secondary);
    margin: var(--space-2xs) 0 0 0;
    line-height: var(--line-height-prose);
  }
  
  .contact__item-link {
    font-size: var(--step--1);
    color: var(--color-text-secondary);
    text-decoration: none;
    margin-top: var(--space-2xs);
    display: block;
    transition: var(--transition-fast);
  }
  
  .contact__item-link:hover,
  .contact__item-link:focus {
    color: var(--color-text-primary);
    outline: none;
  }
  
  .contact__item-description {
    font-size: var(--step-0);
    color: var(--color-text-secondary);
    margin: var(--space-2xs) 0 0 0;
    line-height: var(--line-height-prose);
  }
  
  .contact__item-action {
    margin-top: var(--space-2xs);
  }
  
  .contact__item-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-weight: var(--font-weight-medium);
    font-size: var(--step--1);
    color: var(--color-primary);
    text-decoration: none;
    text-decoration-thickness: 2px;
    transition: var(--transition-fast);
  }
  
  .contact__item-cta:hover,
  .contact__item-cta:focus {
    text-decoration: underline;
    outline: none;
  }
  
  .contact__item-cta-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    transition: var(--transition-fast);
  }
  
  .contact__item-cta:hover .contact__item-cta-icon,
  .contact__item-cta:focus .contact__item-cta-icon {
    transform: translateX(0.125rem);
  }
  
  /* ===================================
     FLOATING INPUT COMPONENT
     Floating label input fields
     =================================== */
  
  .floating-input {
    position: relative;
  }
  
  .floating-input__field {
    display: block;
    width: 100%;
    padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-xs);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-medium);
    font-size: var(--step--1);
    color: var(--color-text-primary);
    transition: var(--transition-fast);
  }
  
  @media (min-width: 40rem) {
    .floating-input__field {
      padding: var(--space-s);
    }
  }
  
  .floating-input__field::placeholder {
    color: transparent;
  }
  
  .floating-input__field:focus {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-color: var(--color-primary);
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
  }
  
  .floating-input__field:not(:placeholder-shown) {
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
  }
  
  .floating-input__field:disabled {
    opacity: 0.5;
    pointer-events: none;
  }
  
  /* Textarea variant */
  .floating-input__field--textarea {
    resize: vertical;
    min-height: 6rem;
  }
  
  .floating-input__label {
    position: absolute;
    top: 0;
    left: 0;
    padding: var(--space-xs) var(--space-xs);
    height: 100%;
    color: var(--color-text-tertiary);
    font-size: var(--step--1);
    pointer-events: none;
    transition: var(--transition-fast);
    border: 1px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  @media (min-width: 40rem) {
    .floating-input__label {
      padding: var(--space-s);
    }
  }
  
  .floating-input__field:focus + .floating-input__label,
  .floating-input__field:not(:placeholder-shown) + .floating-input__label {
    font-size: var(--step--2);
    transform: translateY(-0.375rem);
    color: var(--color-text-tertiary);
  }
  
  .floating-input__field:disabled + .floating-input__label {
    opacity: 0.5;
    pointer-events: none;
  }