section { position: relative; z-index: 1; }
/* Masthead height and the hero pattern now live in global.css (inner-page
   masthead). They were briefly duplicated here during the Contact-first pass on
   30 Jul 2026, including a `height: 280px` pin matched to the OLD artwork —
   which would have blown the redrawn 190.927-tall SVG up to 147%. Do not re-add
   them. */
.page-hero-content p { font-family: 'Source Sans 3', sans-serif; font-size: 22px; font-weight: 400; color: #ffffff; }

/* ── CONTACT LAYOUT ── */
.contact-section {
  padding: 112px 0;
  background: var(--off-white);
  background-image: url('../images/bg-pattern.svg');
  background-repeat: repeat;
}
.contact-inner {
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 60px;
  align-items: start;
}

/* Left column */
.contact-reach-label {
  font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 300;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--cerise); margin-bottom: 30px;
}
.contact-reach h2 {
  font-family: var(--font-heading); font-size: 48px; font-weight: 900;
  color: var(--navy); line-height: 1.1; letter-spacing: -1px; margin-bottom: 36px;
}
.contact-method { margin-bottom: 28px; }
.contact-method-label {
  font-family: var(--font-body); font-size: 20px; font-weight: 600;
  color: #043042; margin-bottom: 4px;
}
.contact-method-value {
  font-family: var(--font-body); font-size: 18px; font-weight: 400; color: #505050;
}
.contact-method-value a {
  color: var(--cerise); text-decoration: none;
}
.contact-method-value a:hover { text-decoration: underline; }

/* Right column — form card */
.contact-form-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 40px 44px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.13);
}
.contact-form-card h3 {
  font-family: var(--font-heading); font-size: 26px; font-weight: 900;
  color: var(--navy); margin-bottom: 4px;
}
/* Targeted by class, not position: the form now carries nonce + honeypot inputs
   ahead of the rows, and the old :nth-child(2) silently stopped matching. */

/* Submit result banner. Sits above the form; rendered by jacqtours_contact_notice()
   only after a submit, so it never occupies space on a first visit. */

/* ── Contact form ─────────────────────────────────────────────────────────
   These rules used to target `.form-group`, the static HTML template's markup.
   The page renders FLUENT FORMS, so not one of them applied and the form fell
   through to Fluent Forms' own stylesheet. That caused both faults the client
   reported on 31 Jul 2026:

     - labels rendered at FF's 18px instead of 15px, so "How Did You Hear About
       Us" needed 205px in a 209px column and the required asterisk was pushed
       onto a second line;
     - nothing set `appearance: none`, so the browser drew the <select>
       natively — 51px against a 41px input in Safari (Chrome only 43px, which
       is why it looked fine there).

   Ported to the Fluent Forms selectors, matching registration.css / bespoke.css.
   `.form-group` appears in no PHP template and no JS, so nothing else used it. */
/* Values here mirror bespoke.css / registration.css exactly, so the three forms
   are visually identical: label 13px bold navy, control 16px on #fff with
   12px/14px padding, which renders 48px tall without needing a fixed height. */
.contact-form-card .fluentform .ff-el-input--label { margin-bottom: 0; }
.contact-form-card .fluentform .ff-el-input--label label {
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  color: var(--navy); margin: 0; padding: 0;
  display: block; /* inline label leaves ~2px of line-box under it */
}
.contact-form-card .fluentform .ff-el-input--label.ff-el-is-required label::after {
  color: var(--cerise);
}
.contact-form-card .fluentform .ff-el-form-control {
  border: 1px solid #ddd; border-radius: var(--radius);
  padding: 12px 14px;
  font-family: var(--font-body); font-size: 16px; color: var(--body);
  background: #fff;
  outline: none; transition: border-color 0.2s;
  width: 100%; box-sizing: border-box;
  height: auto;
}
.contact-form-card .fluentform .ff-el-form-control:focus {
  border-color: var(--cerise); background: #fff; box-shadow: none;
}
.contact-form-card .fluentform textarea.ff-el-form-control {
  resize: vertical; min-height: 120px;
}
/* NOTE THE :not() CHAIN, and the explicit height. Fluent Forms ships
   `select.ff-el-form-control:not([size]):not([multiple]) { height: … }`, whose
   stylesheet loads AFTER this file — a plainer selector ties on specificity and
   loses. Matching its chain outranks it.

   The height is needed because a <select> does NOT derive the same box from
   padding + font-size as an <input> does: with identical rules it renders 42px
   against a 48px input, and Safari and Chrome disagree by a further few px.
   This is the same reason the Bespoke Enquiry select sits 6px short. */
.contact-form-card .fluentform select.ff-el-form-control:not([size]):not([multiple]) {
  appearance: none; -webkit-appearance: none;
  height: 48px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23505050' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 36px; cursor: pointer;
}
@keyframes arrowBounceRight {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .contact-inner { grid-template-columns: 1fr 440px; gap: 40px; }
  .contact-reach h2 { font-size: 40px; }
  .contact-section { padding: 80px 0; }
}

@media (max-width: 768px) {
  /* Stack the two columns */
  .contact-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .contact-section { padding: 56px 0; }
  .contact-reach h2 { font-size: 34px; margin-bottom: 28px; }
  .contact-form-card { padding: 32px 28px; }

  /* Collapse every form row (incl. the 1fr 1.5fr override) to one column */
}

@media (max-width: 480px) {
  .contact-reach h2 { font-size: 28px; }
  .contact-form-card { padding: 26px 20px; }
  .contact-form-card h3 { font-size: 23px; }
}