
    .contact-hero {
      padding: 80px 24px 70px;
      background: var(--banner-grad);
      color: #fff; text-align: center;
    }
    .contact-hero .eyebrow {
      display: inline-block; background: var(--gold-tile); color: var(--prune);
      font-size: 0.78rem; text-transform: uppercase; letter-spacing: 2.5px;
      padding: 6px 16px; border-radius: 50px; font-weight: 700; margin-bottom: 22px;
    }
    .contact-hero h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.18; margin-bottom: 18px; color: #fff; max-width: 720px; margin-inline: auto; }
    .contact-hero p { font-size: 1.1rem; line-height: 1.65; opacity: 0.94; max-width: 620px; margin: 0 auto 30px; }
    .contact-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
    .btn-light {
      display: inline-flex; align-items: center; gap: 9px; background: #fff; color: var(--prune) !important;
      padding: 15px 30px; border-radius: 50px; font-weight: 700; font-size: 0.9rem;
      text-transform: uppercase; letter-spacing: 0.8px; text-decoration: none !important;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .btn-light:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.22); }

    .contact-body { max-width: 780px; margin: 0 auto; padding: 70px 24px 30px; }
    .contact-body h2 { font-size: 1.7rem; color: var(--prune); text-align: center; margin-bottom: 12px; font-weight: 700; }
    .contact-body .sub { text-align: center; color: var(--charcoal); opacity: 0.85; margin-bottom: 44px; }
    .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
    .step {
      background: var(--cream-tile); border: 1px solid var(--rule); border-radius: 18px;
      padding: 28px 22px; text-align: center;
    }
    .step-num {
      width: 42px; height: 42px; border-radius: 50%; background: var(--terracotta); color: #fff;
      display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem;
      margin: 0 auto 16px;
    }
    .step h3 { font-size: 1.1rem; color: var(--prune); margin-bottom: 8px; font-weight: 700; }
    .step p { font-size: 0.94rem; line-height: 1.55; color: var(--charcoal); opacity: 0.9; }

    .contact-alt {
      max-width: 780px; margin: 10px auto 0; padding: 0 24px 80px; text-align: center;
    }
    .contact-alt .alt-card {
      background: #fff; border: 1px solid var(--rule); border-radius: 20px; padding: 36px 28px;
      box-shadow: 0 10px 34px rgba(74,63,63,0.06);
    }
    .contact-alt h2 { font-size: 1.5rem; color: var(--prune); margin-bottom: 10px; font-weight: 700; }
    .contact-alt p { color: var(--charcoal); opacity: 0.9; line-height: 1.6; margin-bottom: 22px; }
    .contact-channels { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
    .channel {
      display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: 50px;
      background: var(--cream-tile); border: 1.5px solid var(--rule); color: var(--prune) !important;
      font-weight: 700; font-size: 0.88rem; text-decoration: none !important; transition: border-color 0.2s, transform 0.2s;
    }
    .channel:hover { border-color: var(--terracotta); transform: translateY(-2px); }

    @media (max-width: 640px) {
      .contact-hero h1 { font-size: 1.85rem; }
      .steps { grid-template-columns: 1fr; }
    }
  
