/**
 * The new homepage section beneath the Directing/Associate Directing/
 * Assistant Directing module: "Let's Work Together" (links to the
 * existing Contact page) side by side with "Stay Updated" (the embedded
 * newsletter signup form).
 *
 * v1.1 redesign -- Joshua, live, on the first pass: "the design of it
 * feels wonky and not inline with whats above." Root cause: v1 treated
 * gold as the PRIMARY heading color (bold uppercase gold H2s) and split
 * the two halves with a plain 1px divider -- neither move exists in the
 * Directing module above it (jrh-curtain-hero/curtain.css), where gold
 * is only ever an ACCENT (the spotlight glow, thin rule lines) and real
 * headlines are bold white, and where the section is framed by a thin
 * gold rule under a small uppercase kicker rather than boxed off with a
 * divider. This pass borrows those exact conventions instead of
 * inventing new ones, so the section reads as a continuation of the
 * same design system rather than a bolted-on generic CTA block.
 */
.jrh-homepage-cta {
	background: #0c0c0c;
	padding: 9vh 8vw 10vh;
	box-sizing: border-box;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 1.2s ease, transform 1.2s ease;
}

.jrh-homepage-cta.is-in {
	opacity: 1;
	transform: translateY(0);
}

/* Small gold uppercase kicker + thin gold rule, centered above the whole
   section -- the same "small gold label, thin gold underline" language
   used for the Directing module's own eyebrow-style accents, so this
   section reads as picking up the same visual thread rather than
   starting a new one. */
.jrh-homepage-cta-kicker {
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(212, 175, 55, 0.85);
	text-align: center;
	margin: 0 0 14px;
}

.jrh-homepage-cta-kicker-rule {
	width: 60px;
	height: 1px;
	background: rgba(212, 175, 55, 0.6);
	margin: 0 auto 7vh;
}

.jrh-homepage-cta-row {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 10vw;
	flex-wrap: wrap;
}

.jrh-homepage-cta-col {
	flex: 1 1 360px;
	max-width: 440px;
	text-align: center;
}

@media (max-width: 780px) {
	.jrh-homepage-cta-row {
		gap: 8vh;
	}
}

/* Bold white headline, same weight/role as .jrh-directing-headline --
   gold no longer carries the heading itself, only the kicker above and
   the button/accents below. */
.jrh-homepage-cta-heading {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: clamp(21px, 2vw, 26px);
	color: #fff;
	margin: 0 0 16px;
}

.jrh-homepage-cta-body {
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.65);
	margin: 0 0 28px;
}

/* Pill-shaped, matching the softer/rounder card language used elsewhere
   on this page (e.g. the Directing box's 48px corners) instead of v1's
   near-flat 2px corners, which read generic. */
.jrh-homepage-cta-button {
	display: inline-block;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	color: #0c0c0c;
	background: rgba(212, 175, 55, 0.95);
	padding: 15px 38px;
	border-radius: 999px;
	transition: background 0.25s ease, transform 0.25s ease;
}

.jrh-homepage-cta-button:hover {
	background: #fff;
	transform: translateY(-2px);
}

/* --- Embedded newsletter form --------------------------------------- */
/* Framed as a soft rounded card (same rounded-card instinct as the
   Directing box, scaled down for a form rather than a 60vh photo panel)
   instead of v1's bare inputs floating directly on the section
   background, which read unfinished next to that box. */
.jrh-homepage-cta-form-wrap {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(212, 175, 55, 0.25);
	border-radius: 28px;
	padding: 36px 32px;
	text-align: left;
}

.jrh-homepage-cta-form-wrap .wpforms-container {
	margin: 0 !important;
}

.jrh-homepage-cta-form-wrap .wpforms-field-label,
.jrh-homepage-cta-form-wrap .wpforms-field-sublabel {
	color: rgba(255, 255, 255, 0.75) !important;
	font-family: Montserrat, sans-serif !important;
}

.jrh-homepage-cta-form-wrap input[type="text"],
.jrh-homepage-cta-form-wrap input[type="email"] {
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(212, 175, 55, 0.4) !important;
	border-radius: 6px !important;
	color: #fff !important;
	font-family: Montserrat, sans-serif !important;
}

.jrh-homepage-cta-form-wrap input[type="text"]::placeholder,
.jrh-homepage-cta-form-wrap input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.4) !important;
}

.jrh-homepage-cta-form-wrap .wpforms-submit-container button,
.jrh-homepage-cta-form-wrap button[type="submit"] {
	font-family: Montserrat, sans-serif !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	color: #0c0c0c !important;
	background: rgba(212, 175, 55, 0.95) !important;
	border: none !important;
	border-radius: 999px !important;
	/* Explicit rather than relying on WPForms' own --wpforms-button-size-*
	   custom properties for spacing -- matches .jrh-homepage-cta-button's
	   own padding so the two pill buttons in this section read as the
	   same control. */
	padding: 15px 38px !important;
	height: auto !important;
	transition: background 0.25s ease !important;
}

.jrh-homepage-cta-form-wrap .wpforms-submit-container button:hover,
.jrh-homepage-cta-form-wrap button[type="submit"]:hover {
	background: #fff !important;
}

.jrh-homepage-cta-form-wrap .wpforms-confirmation-container {
	color: rgba(212, 175, 55, 0.95) !important;
	background: transparent !important;
	border-color: rgba(212, 175, 55, 0.4) !important;
	font-family: Montserrat, sans-serif !important;
}

@media (prefers-reduced-motion: reduce) {
	.jrh-homepage-cta {
		transition-duration: 0.01ms;
	}
}