/* ── PAGE HERO ── */
    .page-hero {
      padding: 6rem 8vw 4rem;
      background: var(--foam);
      border-bottom: 2px solid var(--mist);
    }
    .page-kicker {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 1.1rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--river);
      margin-bottom: 1rem;
    }
    .page-kicker::before {
      content: '';
      display: block;
      width: 2rem;
      height: 1px;
      background: var(--river);
    }
    .page-hero h1 {
      font-family: var(--serif);
      font-size: clamp(3rem, 5vw, 5rem);
      line-height: 1.06;
      letter-spacing: -0.02em;
      margin-bottom: 1rem;
    }
    .page-hero h1 em { font-style: italic; color: var(--river); }
    .page-hero p {
      font-size: 1rem;
      font-weight: 300;
      color: var(--mid);
      max-width: 52ch;
      line-height: 1.75;
    }

    /* ── CONTACT LAYOUT ── */
    .form-title {
      font-family: var(--serif);
      font-size: 1.5rem;
      margin-bottom: 0.4rem;
    }
    .form-subtitle {
      font-size: 0.875rem;
      font-weight: 300;
      color: var(--mid);
      margin-bottom: 2rem;
    }


    .contact-form-wrap {
      background: var(--foam);
      border: 2px solid var(--mist);
      border-radius: 1rem;
      padding: 2.5rem;
    }

    /* ── HERO CONTACT LINKS (email / website row) ── */
    .hero-contact-row {
      display: flex;
      gap: 2rem;
      margin-top: 1.5rem;
      flex-wrap: wrap;
    }
    .hero-contact-item {
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }
    .hero-contact-item a {
      font-size: 0.9rem;
      color: var(--river) !important;
      text-decoration: none !important;
      font-weight: 400;
    }
    .hero-contact-item a:hover {
      text-decoration: underline !important;
    }

    /* ============================================================
       WPFORMS STYLING — bridges WPForms Lite's default output onto
       the site's design tokens so it matches the rest of the page.
       WPForms' own class names (wpforms-*) are stable across
       versions, but double-check after install in case yours differ.
       ============================================================ */
    .contact-form-wrap .wpforms-container {
      margin: 0 !important;
    }
    .contact-form-wrap .wpforms-form .wpforms-field-label {
      font-family: var(--sans);
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--ink);
      margin-bottom: 0.4rem;
    }
    .contact-form-wrap .wpforms-form input[type="text"],
    .contact-form-wrap .wpforms-form input[type="email"],
    .contact-form-wrap .wpforms-form input[type="tel"],
    .contact-form-wrap .wpforms-form textarea,
    .contact-form-wrap .wpforms-form select {
      font-family: var(--sans) !important;
      font-size: 0.9rem !important;
      color: var(--ink) !important;
      background: var(--white) !important;
      border: 1px solid var(--mist) !important;
      border-radius: 0.5rem !important;
      padding: 0.75rem 1rem !important;
      transition: border-color 0.2s;
    }
    .contact-form-wrap .wpforms-form select {
      appearance: none !important;
      -webkit-appearance: none !important;
      -moz-appearance: none !important;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23647568' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
      background-repeat: no-repeat !important;
      background-position: right 1rem center !important;
      padding-right: 2.5rem !important;
    }
    .contact-form-wrap .wpforms-form input:focus,
    .contact-form-wrap .wpforms-form textarea:focus,
    .contact-form-wrap .wpforms-form select:focus {
      border-color: var(--river) !important;
      outline: none !important;
      box-shadow: 0 0 0 3px rgba(28,107,74,0.12) !important;
    }
    .contact-form-wrap .wpforms-form textarea {
      min-height: 140px !important;
    }
    .contact-form-wrap .wpforms-submit-container {
      margin-top: 1.5rem !important;
    }
    .contact-form-wrap .wpforms-submit {
      background: var(--ink) !important;
      color: var(--white) !important;
      border: none !important;
      border-radius: 2rem !important;
      padding: 0.9rem 2rem !important;
      font-size: 0.9rem !important;
      font-weight: 500 !important;
      font-family: var(--sans) !important;
      cursor: pointer;
      transition: background 0.2s, transform 0.2s;
    }
    .contact-form-wrap .wpforms-submit:hover {
      background: var(--river) !important;
      transform: translateY(-1px);
    }
    .contact-form-wrap .wpforms-error-container,
    .contact-form-wrap .wpforms-field-required-error {
      color: #c0392b !important;
      font-size: 0.8rem !important;
    }
    .contact-form-wrap .wpforms-confirmation-container-full {
      background: transparent !important;
      border: none !important;
      padding: 0 !important;
      font-family: var(--sans) !important;
      color: var(--ink) !important;
    }

    @media (max-width: 700px) {
      /* .nav-links visibility is handled by the mobile hamburger toggle CSS in design-system.css, not hidden outright */
    }

/* ── reCAPTCHA ── */
/* If WPForms uses the inline v2 checkbox widget, make sure it can't
   overflow past the card's edge (Google's widget has a fixed ~304px
   width that can poke out of a narrower container) */
.contact-form-wrap .wpforms-recaptcha-container {
  max-width: 100%;
  overflow: hidden;
}
.contact-form-wrap .g-recaptcha {
  transform-origin: left top;
  max-width: 100%;
}

/* If it's the invisible v3 badge instead, Google renders it as a
   fixed-position element in the browser corner, completely independent
   of your page layout — that's likely what's sitting "outside the foam
   background". Google's terms allow repositioning as long as it stays
   visible somewhere on the page, so nudge it inward from the edge. */
.grecaptcha-badge {
  right: 14px !important;
  bottom: 14px !important;
}