/* ── 2-COLUMN CONTACT LAYOUT — mirrors booking.html's book-grid
       proportions but reversed: form 65% on the left (primary element),
       info sidebar 35% on the right ── */
    .contact-grid {
      display: grid;
      grid-template-columns: 65fr 35fr;
      gap: 56px;
      align-items: start;
    }
    .contact-info { display: flex; flex-direction: column; gap: 20px; }

    /* ── FORM CARD WRAPPER (matches booking.html's .book-form-card) ── */
    .contact-form-card {
      background: var(--color-linen);
      border-radius: var(--radius-lg);
      padding: 16px;
      box-shadow: 0 2px 16px 0 rgba(44, 24, 16, 0.07);
      border: 1px solid rgba(201, 168, 76, 0.2);
    }

   
    /* ── CONTACT METHODS — icon + label + value, no card background ── */
    .contact-method {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      transition: var(--transition);
    }
    .contact-method:hover { transform: translateY(-2px); }
    .contact-method-icon {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      fill: none;
      stroke: var(--color-gold);
      stroke-width: 1.5;
      stroke-linecap: round;
    }
    .contact-method-icon.contact-method-icon-fill {
      fill: var(--color-gold);
      stroke: none;
    }
    .contact-method-label { font-family: 'Karla', sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--color-oud); margin-bottom: 2px; }
    .contact-method-value { font-family: 'Karla', sans-serif; font-size: 0.85rem; color: var(--color-cognac); }
    .contact-method-value a { color: var(--color-cognac); }
    .contact-method:hover .contact-method-value,
    .contact-method:hover .contact-method-value a { color: var(--color-clay); }

    /* ── FORM (Microsoft Forms embed) ── */
    .contact-form-frame {
      display: block;
      width: 100%;
      min-height:1300px;
      border: none;
      transform: scale(0.80);
      transform-origin: top left;
      width: calc(100% / 0.80);
      margin-bottom: -260px;
    }

    /* ── RESPONSIVE — form stacks above info sidebar on mobile (DOM
       order already puts contact-form-col first, so no order override
       needed) ── */
    @media (max-width: 900px) {
      .contact-grid { grid-template-columns: 1fr; gap: 40px; }
    }
    @media (max-width: 480px) {
      .contact-submit-btn { width: 100%; justify-content: center; }
    }
.contact-form-col .ms-form-crop {
  overflow: hidden;
  height: 790px;
}