@layer components {
  .contact-hero {
    border-top: 1px solid var(--color-border);
    background: radial-gradient(circle at top left, rgba(249, 115, 22, 0.12), transparent 60%), var(--color-bg);
  }
  .contact-layout {
    padding: var(--space-12) 0 var(--space-16);
    background: var(--color-bg-subtle);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }
  .contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
    gap: var(--space-8);
  }
  .contact-grid-main,
  .contact-grid-aside,
  .contact-secondary-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }
  .contact-card {
    border-radius: var(--radius-xl);
  }
  .contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }
  .contact-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }
  .form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .form-field label {
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-neutral-100);
  }
  .form-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: var(--space-4);
  }
  .form-meta {
    max-width: 38rem;
    font-size: var(--text-xs);
    color: var(--color-neutral-300);
  }
  .form-meta-links a {
    text-decoration: underline;
    text-decoration-color: rgba(249, 115, 22, 0.7);
    text-underline-offset: 3px;
  }
  .contact-detail-block {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
  }
  .contact-detail-block:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
  }
  .contact-detail-block h3 {
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
  }
  .contact-detail-block p {
    font-size: var(--text-sm);
    margin-bottom: 0;
  }
  .contact-hours .hours-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
  }
  .contact-note {
    margin-top: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-muted);
  }
  .contact-direct a[href^="tel:"],
  .contact-direct a[href^="mailto:"] {
    text-decoration: underline;
    text-decoration-color: rgba(249, 115, 22, 0.7);
    text-underline-offset: 3px;
  }
  .contact-cta {
    margin-top: var(--space-4);
  }
  .package-list,
  .contact-accessibility ul,
  .contact-feedback ul,
  .social-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--text-sm);
  }
  .card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
  }
  .accessibility-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
  .accessibility-columns h3 {
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
  }
  .contact-secondary {
    padding: var(--space-12) 0 var(--space-16);
  }
  .contact-secondary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
  }
  .social-list a {
    text-decoration: underline;
    text-decoration-color: rgba(249, 115, 22, 0.7);
    text-underline-offset: 3px;
  }
  @media (max-width: 1024px) {
    .contact-grid {
      grid-template-columns: minmax(0, 1fr);
    }
    .contact-grid-aside {
      order: -1;
    }
    .form-footer {
      flex-direction: column;
      align-items: flex-start;
    }
  }
  @media (max-width: 768px) {
    .contact-layout,
    .contact-secondary {
      padding: var(--space-10) 0 var(--space-12);
    }
    .contact-form-grid,
    .accessibility-columns,
    .contact-secondary-grid {
      grid-template-columns: minmax(0, 1fr);
    }
    .card-actions {
      flex-direction: column;
      align-items: stretch;
    }
  }
}