/* ============================================================
   CONTACT PAGE — front-page (MushSkins) style
   Scoped to body.sf-contact-page. Loaded on is_page('contact-us').
   Layout: big "LET'S TALK" heading + lead, full-width CF7 form
   (2-col fields), consent note, pill submit, two info cards.
   Design system mirrors the home page:
     Accent #cde738 · dark bg #0c1202 · Bebas Neue / Inter ·
     strong rounding · glossy inset shadows.
   CF7 form (id 8) markup is untouched — only restyled.
   ============================================================ */

.sf-contact-page {
	--ct-accent: #cde738;
	--ct-rgb: 205, 231, 54;
	--ct-bg: #0c1202;
	--ct-warn: #ff7a45;
	--ct-radius: 28px;
	--ct-title-gradient: radial-gradient(ellipse at 50% 50%, #fff152 0%, #cfe636 50%, #9edb1a 100%);
	--ct-card-shadow:
		inset 0px 0.361px 0.65px -1px rgba(255,255,255,0.19),
		inset 0px 1.373px 2.472px -2px rgba(255,255,255,0.18),
		inset 0px 6px 10.8px -3px rgba(255,255,255,0.13);
	--ct-btn-shadow:
		inset 0px 0.723px 1.879px -0.333px rgba(255,255,255,0.24),
		inset 0px 2.746px 7.14px -0.667px rgba(255,255,255,0.34),
		inset 0px 12px 31.2px -1px rgba(255,255,255,0.8);
}

/* ── Page background — exact home recipe (#0c1202 + green glow).
   background-image layers so it beats the global
   `body { background-color:#111111 !important }` override. ── */
body.sf-contact-page {
	background-color: #0c1202 !important;
	background-image:
		radial-gradient(ellipse 120% 60% at 50% 16%, rgba(25, 62, 4, 0.78) 0%, transparent 64%),
		linear-gradient(#0c1202, #0c1202) !important;
	background-repeat: no-repeat !important;
}
.sf-contact-page .site-content,
.sf-contact-page .entry-content,
.sf-contact-page #page,
.sf-contact-page .page-wrapper { background: transparent !important; padding-top: 0; }

/* ══════════════════════════════════════════════════════════
   LAYOUT WRAP
══════════════════════════════════════════════════════════ */
.sf-contact-page .ct-page {
	padding: 0 clamp(16px, 4vw, 40px) clamp(56px, 8vw, 100px);
}
.sf-contact-page .ct-wrap {
	max-width: 920px;
	margin: 0 auto;
}

/* ══ Heading ══ */
.sf-contact-page .ct-head {
	padding-top: calc(var(--header-h, 80px) + clamp(40px, 6vw, 72px));
}
.sf-contact-page .ct-title {
	font-family: 'Bebas Neue', sans-serif;
	font-size: clamp(58px, 12vw, 140px);
	font-weight: 400;
	line-height: 0.88;
	letter-spacing: -1.5px;
	text-transform: uppercase;
	margin: 0 0 20px;
	background: var(--ct-title-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.sf-contact-page .ct-lead {
	font-family: 'Inter', sans-serif;
	font-size: clamp(15px, 1.8vw, 19px);
	color: rgba(255, 255, 255, .6);
	line-height: 1.6;
	max-width: 640px;
	margin: 0;
}

/* ══════════════════════════════════════════════════════════
   FORM
══════════════════════════════════════════════════════════ */
.sf-contact-page .ct-form-section {
	margin-top: clamp(36px, 5vw, 56px);
	padding-top: clamp(32px, 4vw, 44px);
	border-top: 1px solid rgba(255, 255, 255, .1);
}
.sf-contact-page .wpcf7,
.sf-contact-page .wpcf7-form { margin: 0; padding: 0; }

/* 2-col grid: name | email, message full width, button full width */
.sf-contact-page .contact-form__form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: clamp(24px, 3.5vw, 48px);
	row-gap: clamp(26px, 3vw, 38px);
}
.sf-contact-page .contact-form__field:nth-of-type(3),
.sf-contact-page .contact-form__btn,
.sf-contact-page .wpcf7-submit,
.sf-contact-page .contact-form__msg,
.sf-contact-page .wpcf7-response-output { grid-column: 1 / -1; }

.sf-contact-page .contact-form__field {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Field label — un-hide the CF7 sr-only label as a visible top label */
.sf-contact-page .contact-form__field label.sr-only,
.sf-contact-page .contact-form__field .sr-only {
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
	clip: auto !important;
	clip-path: none !important;
	overflow: visible !important;
	white-space: normal !important;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
}

/* "Required" hint top-right of each required field */
.sf-contact-page .contact-form__field:has(.wpcf7-validates-as-required)::after,
.sf-contact-page .contact-form__field:has([aria-required="true"])::after {
	content: "Required";
	position: absolute;
	top: 0;
	right: 0;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	letter-spacing: .01em;
	color: rgba(255, 255, 255, .3);
	pointer-events: none;
}
.sf-contact-page .wpcf7-form-control-wrap { display: block; width: 100%; }

/* Inputs — underline style; textarea — rounded box */
.sf-contact-page .contact-form__input {
	width: 100% !important;
	height: auto !important;
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, .2) !important;
	border-radius: 0 !important;
	color: #fff !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 16px !important;
	padding: 10px 0 !important;
	outline: none !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: border-color .2s ease, box-shadow .2s ease !important;
}
.sf-contact-page .contact-form__input:focus {
	border-bottom-color: var(--ct-accent) !important;
	box-shadow: 0 1px 0 0 var(--ct-accent) !important;
	background: transparent !important;
}
.sf-contact-page textarea.contact-form__input {
	min-height: 150px !important;
	border: 1px solid rgba(255, 255, 255, .16) !important;
	border-radius: 18px !important;
	padding: 16px 18px !important;
	line-height: 1.55 !important;
	resize: vertical !important;
}
.sf-contact-page textarea.contact-form__input:focus {
	border-color: var(--ct-accent) !important;
	box-shadow: 0 0 0 3px rgba(var(--ct-rgb), .1) !important;
}
.sf-contact-page .contact-form__input::placeholder { color: rgba(255, 255, 255, .22) !important; }

/* Invalid state */
.sf-contact-page .wpcf7-not-valid.contact-form__input {
	border-color: rgba(255, 122, 69, .6) !important;
}
.sf-contact-page .wpcf7-not-valid-tip {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	color: var(--ct-warn);
	margin-top: 6px;
}

/* Submit — pill (overrides global .btn--green clip-path) */
.sf-contact-page .contact-form__btn,
.sf-contact-page .wpcf7-submit {
	justify-self: end;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 220px;
	height: 62px !important;
	padding: 0 44px !important;
	background: var(--ct-accent) !important;
	color: #000 !important;
	border: none !important;
	border-radius: 999px !important;
	clip-path: none !important;
	font-family: 'Bebas Neue', sans-serif !important;
	font-size: 26px !important;
	font-weight: 400 !important;
	letter-spacing: .02em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	box-shadow: var(--ct-btn-shadow) !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: transform .2s ease, filter .2s ease !important;
}
.sf-contact-page .contact-form__btn:hover,
.sf-contact-page .wpcf7-submit:hover {
	transform: scale(1.02) !important;
	filter: brightness(1.04) drop-shadow(0 0 24px rgba(var(--ct-rgb), .45)) !important;
}
.sf-contact-page .contact-form__btn:active,
.sf-contact-page .wpcf7-submit:active { transform: scale(.98) !important; }
.sf-contact-page .contact-form__btn:focus-visible,
.sf-contact-page .wpcf7-submit:focus-visible { outline: 2px solid var(--ct-accent) !important; outline-offset: 4px !important; }

/* CF7 response output */
.sf-contact-page .contact-form__msg { margin: 0; }
.sf-contact-page .wpcf7-response-output {
	margin: 4px 0 0 !important;
	padding: 14px 18px !important;
	border-radius: 14px !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #fff !important;
}
.sf-contact-page .wpcf7-mail-sent-ok {
	background: rgba(var(--ct-rgb), .08) !important;
	border: 1px solid rgba(var(--ct-rgb), .3) !important;
}
.sf-contact-page .wpcf7-mail-sent-ng,
.sf-contact-page .wpcf7-validation-errors,
.sf-contact-page .wpcf7-spam-blocked {
	background: rgba(255, 122, 69, .08) !important;
	border: 1px solid rgba(255, 122, 69, .3) !important;
}

/* Consent note */
.sf-contact-page .ct-consent {
	margin: clamp(22px, 3vw, 30px) 0 0;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: rgba(255, 255, 255, .4);
	line-height: 1.6;
	max-width: 620px;
}
.sf-contact-page .ct-consent a {
	color: var(--ct-accent);
	text-decoration: none;
	transition: opacity .2s ease;
}
.sf-contact-page .ct-consent a:hover { opacity: .7; }

/* ══════════════════════════════════════════════════════════
   INFO CARDS (bottom row)
══════════════════════════════════════════════════════════ */
.sf-contact-page .ct-cards {
	margin-top: clamp(40px, 6vw, 72px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(14px, 2vw, 20px);
}
.sf-contact-page .ct-card {
	position: relative;
	overflow: hidden;
	padding: clamp(26px, 3vw, 36px);
	border: 1px solid rgba(var(--ct-rgb), .14);
	border-radius: var(--ct-radius);
	background:
		radial-gradient(ellipse at 100% 0%, rgba(var(--ct-rgb), .08) 0%, transparent 55%),
		linear-gradient(180deg, rgba(20, 42, 12, .55), rgba(7, 14, 3, .92));
	box-shadow: var(--ct-card-shadow);
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.sf-contact-page .ct-card:hover {
	border-color: rgba(var(--ct-rgb), .32);
	box-shadow: var(--ct-card-shadow), 0 16px 44px rgba(0,0,0,.4), 0 0 26px rgba(var(--ct-rgb), .08);
	transform: translateY(-3px);
}
.sf-contact-page .ct-card__title {
	font-family: 'Bebas Neue', sans-serif;
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 400;
	letter-spacing: -.3px;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 16px;
	line-height: 1;
}
.sf-contact-page .ct-card__line {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	color: rgba(255, 255, 255, .78);
	line-height: 1.6;
	margin: 0 0 6px;
}
.sf-contact-page .ct-card__line:last-child { margin-bottom: 0; }
.sf-contact-page .ct-card__link {
	color: var(--ct-accent);
	text-decoration: none;
	transition: opacity .2s ease;
	display: inline-block;
}
.sf-contact-page .ct-card__link:hover { opacity: .75; }
.sf-contact-page .ct-card__muted { color: rgba(255, 255, 255, .42); font-size: 14px; }

/* ══════════════════════════════════════════════════════════
   ACCESSIBILITY
══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.sf-contact-page .ct-card,
	.sf-contact-page .contact-form__input,
	.sf-contact-page .contact-form__btn,
	.sf-contact-page .wpcf7-submit { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
	.sf-contact-page .contact-form__form { grid-template-columns: 1fr; }
	.sf-contact-page .contact-form__field:nth-of-type(3) { grid-column: auto; }
	.sf-contact-page .contact-form__btn,
	.sf-contact-page .wpcf7-submit { justify-self: stretch; width: 100% !important; }
	.sf-contact-page .ct-cards { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.sf-contact-page .ct-title { font-size: clamp(52px, 16vw, 80px); }
	.sf-contact-page .ct-card { padding: 24px 20px; border-radius: 22px; }
}