/* contact.html */
.contact-hero {
      padding-top: calc(80px + clamp(var(--space-16), 8vw, var(--space-32)));
      padding-bottom: clamp(var(--space-12), 5vw, var(--space-20));
      background: var(--color-surface-subtle);
      position: relative;
      overflow: hidden;
    }

    .contact-hero::before {
      content: '';
      position: absolute;
      top: -20%;
      right: -10%;
      width: 50vw;
      height: 50vw;
      max-width: 600px;
      background: radial-gradient(circle, rgba(77,182,172,0.18) 0%, transparent 70%);
      pointer-events: none;
    }

    .contact-hero::after {
      content: '';
      position: absolute;
      bottom: -120px;
      left: 5%;
      width: 380px;
      height: 380px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(77,182,172,0.10) 0%, transparent 70%);
      pointer-events: none;
    }

    .contact-hero__label {
      display: inline-block;
      font-family: 'Montserrat', sans-serif;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #4DB6AC;
      background: rgba(77,182,172,0.1);
      border-radius: 100px;
      padding: 5px 14px;
      margin-bottom: 20px;
    }

    .contact-hero__title {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(var(--text-3xl), 5vw, var(--text-6xl));
      font-weight: var(--weight-medium);
      line-height: var(--leading-tight);
      letter-spacing: var(--tracking-tight);
      margin-bottom: var(--space-5);
    }

    .contact-hero__title em {
      font-style: italic;
      background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary) 40%, #c8f5f2 47%, #f0fffe 50%, #c8f5f2 53%, var(--color-primary) 60%, var(--color-primary) 100%);
      background-size: 300% 100%;
      background-position: 100% 0%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: vsn-glow-sweep 10s ease-in-out infinite;
      padding-inline: 0.08em;
    }

    .contact-hero__intro {
      font-size: var(--text-md);
      font-weight: var(--weight-light);
      line-height: var(--leading-relaxed);
      color: var(--color-text-secondary);
      max-width: 48ch;
    }

    /* ── MAIN CONTACT GRID ────────────────────────────────── */
    .contact-main {
      background: var(--color-surface);
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 2fr 3fr;
      gap: clamp(var(--space-12), 6vw, var(--space-20));
      align-items: start;
    }

    /* Info column */
    .contact-info {
      display: flex;
      flex-direction: column;
      gap: var(--space-10);
      position: sticky;
      top: 100px;
    }

    .contact-info__block {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .contact-info__block-label {
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      color: var(--color-primary);
    }

    .contact-info__block-title {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--text-xl);
      font-weight: var(--weight-medium);
      color: var(--color-text-primary);
    }

    .contact-info__block-text {
      font-size: var(--text-sm);
      font-weight: var(--weight-light);
      color: var(--color-text-secondary);
      line-height: var(--leading-relaxed);
    }

    .contact-info__block-link {
      font-size: var(--text-sm);
      color: var(--color-primary);
      text-decoration: none;
      font-weight: var(--weight-medium);
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      transition: gap var(--duration-fast);
    }

    .contact-info__block-link:hover {
      gap: var(--space-3);
    }

    .contact-detail-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }

    .contact-detail-item {
      display: flex;
      align-items: flex-start;
      gap: var(--space-4);
    }

    .contact-detail-icon {
      width: 40px;
      height: 40px;
      border-radius: var(--radius-lg);
      background: var(--teal-50);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .contact-detail-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .contact-detail-label {
      font-size: var(--text-xs);
      color: var(--color-text-muted);
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-wide);
    }

    .contact-detail-value {
      font-size: var(--text-sm);
      color: var(--color-text-primary);
      font-weight: var(--weight-regular);
    }

    .contact-detail-value a {
      color: var(--color-text-primary);
      text-decoration: none;
      transition: color var(--duration-fast);
    }

    .contact-detail-value a:hover {
      color: var(--color-primary);
    }

    /* Availability card */
    .availability-card {
      background: var(--teal-50);
      border: 1px solid var(--teal-100);
      border-radius: var(--radius-xl);
      padding: var(--space-6);
    }

    .availability-card__title {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      color: var(--teal-600);
      margin-bottom: var(--space-4);
    }

    .availability-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .availability-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: var(--text-sm);
    }

    .availability-item__day {
      color: var(--color-text-secondary);
      font-weight: var(--weight-light);
    }

    .availability-item__time {
      font-weight: var(--weight-medium);
      color: var(--color-text-primary);
    }

    .availability-item__time.closed {
      color: var(--color-text-muted);
      font-weight: var(--weight-light);
    }

    /* Form column */
    .contact-form-wrap {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-3xl);
      padding: clamp(var(--space-8), 4vw, var(--space-12));
    }

    .contact-form__title {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--text-2xl);
      font-weight: var(--weight-medium);
      color: var(--color-text-primary);
      margin-bottom: var(--space-2);
    }

    .contact-form__sub {
      font-size: var(--text-sm);
      color: var(--color-text-secondary);
      font-weight: var(--weight-light);
      margin-bottom: var(--space-8);
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-4);
    }

    .contact-form {
      display: flex;
      flex-direction: column;
      gap: var(--space-5);
    }

    /* Radio group (topic) */
    .radio-group {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
    }

    .radio-chip {
      display: none;
    }

    .radio-chip + label {
      display: inline-flex;
      align-items: center;
      padding: var(--space-2) var(--space-4);
      border-radius: var(--radius-full);
      border: 1.5px solid var(--color-border);
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
      color: var(--color-text-secondary);
      cursor: pointer;
      transition: all var(--duration-fast) var(--ease-out);
      user-select: none;
    }

    .radio-chip:checked + label {
      border-color: var(--color-primary);
      background: var(--teal-50);
      color: var(--teal-700);
    }

    .radio-chip + label:hover {
      border-color: var(--teal-300);
    }

    .form-submit-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      flex-wrap: wrap;
    }

    .form-privacy-note {
      font-size: var(--text-xs);
      color: var(--color-text-muted);
      font-weight: var(--weight-light);
      max-width: 30ch;
      line-height: var(--leading-normal);
    }

    /* Success state */
    .form-success {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--space-4);
      text-align: center;
      padding: var(--space-12) var(--space-8);
    }

    .form-success__icon {
      width: 64px;
      height: 64px;
      border-radius: var(--radius-full);
      background: var(--teal-100);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .form-success__title {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--text-2xl);
      font-weight: var(--weight-medium);
      color: var(--color-text-primary);
    }

    .form-success__body {
      font-size: var(--text-sm);
      font-weight: var(--weight-light);
      color: var(--color-text-secondary);
      max-width: 36ch;
      line-height: var(--leading-relaxed);
    }

    @media (max-width: 900px) {
      .contact-grid {
        grid-template-columns: 1fr;
      }

      .contact-info {
        position: static;
      }

      .form-row {
        grid-template-columns: 1fr;
      }
    }