/* JA — hero + intake card */
.ja-hero { padding: 75px 0; background: var(--ja-cream); }
/* Figma Header Block (EL-ad9bf481): copy column fixed 600px, form fills the
   rest, 50px gap. */
.ja-hero__grid { display: grid; grid-template-columns: 600px minmax(0,1fr); gap: 50px; align-items: start; }

/* Figma Header Text stack (EL-96643b18 / EL-527feb86): eyebrow→H1→lede gaps
   14px at 550px width; then 50px to the emph line and 50px to buttons. */
.ja-hero__copy .ja-eyebrow { margin: 0 0 14px; max-width: 550px; }
.ja-hero__copy .ja-h1 { margin: 0; font-size: 70px; line-height: normal; letter-spacing: -0.04em; text-wrap: wrap; max-width: 550px; }
.ja-hero__copy .ja-lede { margin: 14px 0 0; max-width: 550px; }
/* Figma subtext: DM Sans 500 / 21px / 22.5px / -0.04em (not ja-emph's 18/600). */
.ja-hero__copy .ja-emph { font-size: 21px; font-weight: 500; line-height: 22.5px; letter-spacing: -0.04em; margin: 50px 0 0; }
.ja-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 50px; }
.ja-hero__media { margin-top: 36px; }
.ja-hero__img, .ja-img { width: 100%; height: auto; border-radius: var(--ja-radius-img); display: block; }
.ja-hero__form { position: sticky; top: 96px; }

/* Intake card — Figma Form frame (EL-e7e56773): white fill, NO border, radius
   20px (--ja-radius-form), padding 49px 35px, shadow kept. (The `.ja-card`
   1px border in this file is overridden here.) */
.ja-card, .ja-tile { background: var(--ja-white); border: 1px solid var(--ja-line); border-radius: var(--ja-radius-card); }
.ja-intake { padding: 49px 35px; border: none; border-radius: var(--ja-radius-form); box-shadow: 0 12px 40px rgba(3,0,47,.08); }
.ja-intake > .ja-h3 { margin: 0 0 8px; }
.ja-intake__sub { font-size: 15px; color: var(--ja-ink-2); margin: 0 0 20px; }
.ja-intake__chipslabel { font-size: 13px; color: var(--ja-ink-3); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin: 0 0 8px; }
.ja-intake__submit { width: 100%; margin-top: 0; background: var(--ja-gold); border-color: var(--ja-gold); color: var(--ja-ink); }
.ja-intake__fine { font-size: 16px; letter-spacing: -0.04em; color: var(--ja-ink-3); margin: 0; text-align: center; }

/* Field stack — the static fallback and the CF7 form both lay out as a
   20px-gap flex column (Figma). */
.ja-intake__static,
.ja-intake .wpcf7-form { display: flex; flex-direction: column; gap: 20px; }
.ja-intake .wpcf7-form p { margin: 0; }
.ja-intake .wpcf7-form-control-wrap { display: block; }
.ja-intake .wpcf7-spinner { margin: 0; }

/* CF7 validation messaging */
.ja-intake .wpcf7-not-valid-tip { display: block; font-size: 13px; color: #B3261E; margin-top: 6px; }
.ja-intake .wpcf7-response-output { margin: 0; border: 0; padding: 0; font-size: 14px; color: var(--ja-ink-2); }

/* Field — Figma spec: 10px radius (--ja-radius-btn), 2px #E0E0E1 border,
   #F5F5F5 bg, 16px 18px padding, 16px / 500 / 22.5px → 59px tall. */
.ja-fld { background: var(--ja-field-bg); border: 2px solid var(--ja-field-border); border-radius: var(--ja-radius-btn); padding: 16px 18px; font-size: 16px; font-weight: 500; line-height: 22.5px; letter-spacing: -0.04em; color: var(--ja-ink-2); margin-bottom: 0; }

/* Real form elements (fallback markup before a CF7 form is attached):
   inputs and textareas are inline by default, so promote them like the
   selects and inherit the site font. */
input.ja-fld, textarea.ja-fld { display: block; width: 100%; font-family: inherit; }
textarea.ja-fld { resize: vertical; min-height: 148px; }
input.ja-fld::placeholder, textarea.ja-fld::placeholder { color: var(--ja-ink-3); opacity: 1; }
input.ja-fld:focus, textarea.ja-fld:focus { outline: none; border-color: var(--ja-ink); color: var(--ja-ink); }
.ja-fld--tall { padding: 18px; }

/* Select dropdown — navy chevron caret, grey placeholder state, ink on
   focus / after selection. */
select.ja-fld--select {
  display: block;
  width: 100%;
  appearance: none;
  background-color: var(--ja-field-bg);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M6.45 7.77c.3.31.79.31 1.09 0L13.77 1.37c.31-.31.31-.82 0-1.13-.3-.31-.79-.31-1.09 0L7 6.07 1.33.23C1.02-.08.53-.08.23.23a.8.8 0 0 0 0 1.13l6.22 6.41z' fill='%2303002F'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  padding: 16px 36px 16px 18px;
  font-size: 16px;
  color: rgba(3, 0, 47, 0.5); /* placeholder (grey) state — matches the
                                 disabled-first option set in the PHP */
}
select.ja-fld--select:hover,
select.ja-fld--select:focus,
select.ja-fld--select:valid { color: var(--ja-ink); }

.ja-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ja-chip { background: var(--ja-white); border: 1px solid var(--ja-line); border-radius: var(--ja-radius-pill); padding: 8px 14px; font-size: 13.5px; color: var(--ja-ink); }

@media (max-width: 960px) {
	.ja-hero { padding: 56px 0 48px; }
	.ja-hero__grid { grid-template-columns: 1fr; gap: 32px; }
	.ja-hero__form { position: static; }
	.ja-intake { padding: 32px 30px; }
	/* Mobile H1: the Figma-matched 70px is unreadable on phones. Scoped to the
	   breakpoint only — desktop 70px / -0.04em is untouched. */
	.ja-hero__copy .ja-h1 { font-size: 44px; line-height: 1.05; }
	/* Mobile copy stack: eyebrow + em line centered, CTAs centered. */
	.ja-hero__copy .ja-eyebrow,
	.ja-hero__copy .ja-emph { text-align: center; }
	.ja-hero__actions { justify-content: center; }
	/* Mobile vertical rhythm: the desktop 50px gaps push the CTA below the
	   iPhone SE fold; 28px keeps the breathing room without losing the button. */
	.ja-hero__copy .ja-emph,
	.ja-hero__actions { margin-top: 28px; }
}