/* HVACB — contact / "Get started" section.

   Block-safe rewrite. This section is native core blocks rather than a
   core/html block, so every decorative element that used to be an empty div or
   span is now a pseudo-element, and per-item colours are driven by modifier
   classes instead of inline style attributes.

     .ct__glow-a + .ct__glow-b  ->  .ct:before   (two radial layers)
     .ct__mesh                  ->  .ct:after
     .ct__eyebrow i             ->  .ct__eyebrow:before
     .ct__trust-icon            ->  .ct__trust-item:before
     style="background:..."     ->  .ct__proof-avatar--1..4
     .ct__h2 span               ->  .ct__h2 mark  (core highlight format)
*/

/* Neutralise theme + block-layout margins inside the section. */
.ct p,
.ct h2 { margin: 0; }
.ct > *,
.ct .wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }

.ct {
	position: relative;
	overflow: hidden;
	padding: clamp(4rem, 8vw, 7rem) clamp(18px, 4vw, 48px);
	background: linear-gradient(145deg, #0B0918 0%, #1A0F3D 35%, #2D1B69 65%, #1A0F3D 100%);
}

.ct * { box-sizing: border-box; }

/* Was .ct__glow-a and .ct__glow-b. Both corner glows on one layer. */
.ct:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(circle 350px at 200px 150px, rgba(138, 92, 196, .30), transparent 65%),
		radial-gradient(circle 300px at calc(100% - 200px) calc(100% - 100px), rgba(217, 106, 43, .20), transparent 65%);
}

/* Was .ct__mesh. */
.ct:after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
	background-size: 80px 80px;
	-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 20%, transparent 80%);
	mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 20%, transparent 80%);
}

.ct .ct__in {
	position: relative;
	z-index: 1;
	max-width: 1120px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(40px, 7vw, 96px);
	align-items: center;
}

/* ---------- Left column ---------- */

.ct .ct__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #FFFFFF;
	margin: 0 0 24px;
	padding: 9px 20px;
	border-radius: 999px;
	background: linear-gradient(105deg, rgba(255, 255, 255, .12), rgba(217, 106, 43, .35));
	border: 1px solid rgba(255, 255, 255, .22);
}

.ct .ct__eyebrow:before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #D96A2B;
	flex: none;
	animation: ctPing 2.4s ease-out infinite;
}

@keyframes ctPing {
	0%   { box-shadow: 0 0 0 0 rgba(217, 106, 43, .7); }
	70%  { box-shadow: 0 0 0 10px rgba(217, 106, 43, 0); }
	100% { box-shadow: 0 0 0 0 rgba(217, 106, 43, 0); }
}

.ct .ct__h2 {
	font-size: clamp(34px, 4.8vw, 64px);
	font-weight: 800;
	letter-spacing: -.05em;
	line-height: .96;
	color: #FFFFFF;
	margin: 0 0 clamp(18px, 2.5vw, 28px);
}

/* Core's highlight format. background must win over mark's default yellow. */
.ct .ct__h2 mark {
	background: linear-gradient(104deg, #EDB088, #D96A2B);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ct .ct__lead {
	font-size: clamp(15px, 1.5vw, 18px);
	line-height: 1.65;
	color: rgba(255, 255, 255, .6);
	margin: 0 0 clamp(24px, 3vw, 36px);
	font-weight: 500;
	max-width: 38ch;
}

.ct .ct__trust {
	list-style: none;
	padding: 0;
	margin: 0 0 clamp(28px, 3.5vw, 44px);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ct .ct__trust-item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, .75);
}

/* Was span.ct__trust-icon. */
.ct .ct__trust-item:before {
	content: "";
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14);
	flex: none;
}

.ct .ct__proof {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .1);
}

.ct .ct__proof-avatars { display: flex; }

.ct .ct__proof-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid #2D1B69;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 800;
	color: #FFFFFF;
	margin-left: -8px;
	flex: none;
}

.ct .ct__proof-avatar:first-child { margin-left: 0; }

/* Were inline style attributes. */
.ct .ct__proof-avatar--1 { background: linear-gradient(135deg, #4B3B8F, #8A5CC4); }
.ct .ct__proof-avatar--2 { background: linear-gradient(135deg, #A8481A, #D96A2B); }
.ct .ct__proof-avatar--3 { background: linear-gradient(135deg, #2C8F63, #5FD3A0); }
.ct .ct__proof-avatar--4 { background: linear-gradient(135deg, #1A6B9A, #4A9FC4); }

.ct .ct__proof-text {
	font-size: 13px;
	color: rgba(255, 255, 255, .65);
	font-weight: 500;
	line-height: 1.4;
}

.ct .ct__proof-text strong { color: #FFFFFF; font-weight: 800; }

/* ---------- Right column: form card ---------- */

.ct .ct__card {
	background: #FFFFFF;
	border-radius: 24px;
	padding: clamp(28px, 3.5vw, 44px);
	box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
}

.ct .ct__card-title {
	font-size: clamp(18px, 2vw, 24px);
	font-weight: 800;
	letter-spacing: -.03em;
	color: #14121F;
	margin: 0 0 6px;
}

.ct .ct__card-sub {
	font-size: 13.5px;
	color: #6B6680;
	font-weight: 500;
	margin: 0 0 24px;
}

.ct .ct__fields {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 20px;
}

.ct .ct__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.ct .ct__field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.ct .ct__label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #4B3B8F;
}

.ct .ct__input,
.ct .ct__select,
.ct .ct__textarea {
	width: 100%;
	padding: 11px 14px;
	border-radius: 10px;
	border: 1.5px solid rgba(75, 59, 143, .18);
	font-size: 14px;
	font-weight: 500;
	color: #14121F;
	background: #FBFAFE;
	outline: none;
	transition: border-color .2s, box-shadow .2s;
	font-family: inherit;
}

.ct .ct__input::placeholder,
.ct .ct__textarea::placeholder { color: #A0A0B8; font-weight: 400; }

.ct .ct__input:focus,
.ct .ct__select:focus,
.ct .ct__textarea:focus {
	border-color: #4B3B8F;
	box-shadow: 0 0 0 3px rgba(75, 59, 143, .1);
	background: #FFFFFF;
}

.ct .ct__select {
	appearance: none;
	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='%234B3B8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%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;
}

.ct .ct__textarea { resize: none; min-height: 84px; line-height: 1.55; }

/* core/button renders an <a>, so the gradient goes on the link, not the wrapper. */
.ct .ct__submit { width: 100%; }

.ct .ct__submit .wp-block-button__link {
	width: 100%;
	padding: 15px 24px;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: #FFFFFF;
	background: linear-gradient(105deg, #4B3B8F, #7B5EC4, #D96A2B);
	border: none;
	cursor: pointer;
	box-shadow: 0 14px 32px -10px rgba(75, 59, 143, .55);
	transition: transform .25s, box-shadow .25s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 0;
}

.ct .ct__submit .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 20px 40px -10px rgba(75, 59, 143, .7);
	background: linear-gradient(105deg, #4B3B8F, #7B5EC4, #D96A2B);
}

.ct .ct__fine {
	text-align: center;
	font-size: 11.5px;
	color: #A0A0B8;
	margin-top: 11px;
	line-height: 1.5;
}

@media (max-width: 860px) {
	.ct .ct__in { grid-template-columns: minmax(0, 1fr); }
	.ct .ct__left { text-align: center; }
	.ct .ct__trust { align-items: center; }
	.ct .ct__proof { justify-content: center; }
}

@media (max-width: 520px) {
	.ct .ct__row { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.ct .ct__submit .wp-block-button__link { transition: none; }
	.ct .ct__eyebrow:before { animation: none; }
}

/* Item 16 — a clearly-visible green tick inside each checklist square.
   Green matches the site's success colour (cf. .ct__proof-avatar--3). */
.ct .ct__trust-item:before{
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 16px 16px no-repeat,
		linear-gradient(135deg,#2C8F63,#5FD3A0);
	border-color:transparent;
}

/* Item 17 — the real Fluent Form (#3) renders inside .ct__card via a shortcode
   block. Match it to the card's existing field + button styling. Selectors are
   deliberately generic so they hold across Fluent Forms markup versions. */
.ct .ct__card .fluentform{margin:0}
.ct .ct__card .fluentform .ff-el-group{margin:0 0 14px}
.ct .ct__card .fluentform .ff-el-input--label label{
	font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#4B3B8F;margin-bottom:5px;
}
.ct .ct__card .fluentform input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.ct .ct__card .fluentform select,
.ct .ct__card .fluentform textarea{
	width:100%;padding:11px 14px;border-radius:10px;border:1.5px solid rgba(75,59,143,.18);
	font-size:14px;font-weight:500;color:#14121F;background:#FBFAFE;font-family:inherit;outline:none;
	transition:border-color .2s,box-shadow .2s;
}
.ct .ct__card .fluentform input:not([type=submit]):focus,
.ct .ct__card .fluentform select:focus,
.ct .ct__card .fluentform textarea:focus{
	border-color:#4B3B8F;box-shadow:0 0 0 3px rgba(75,59,143,.1);background:#fff;
}
.ct .ct__card .fluentform .ff-btn-submit,
.ct .ct__card .fluentform button[type=submit]{
	width:100%;padding:15px 24px;border-radius:12px;font-size:16px;font-weight:800;letter-spacing:-.01em;
	color:#fff;border:none;cursor:pointer;background:linear-gradient(105deg,#4B3B8F,#7B5EC4,#D96A2B);
	box-shadow:0 14px 32px -10px rgba(75,59,143,.55);transition:transform .25s,box-shadow .25s;
}
.ct .ct__card .fluentform .ff-btn-submit:hover,
.ct .ct__card .fluentform button[type=submit]:hover{transform:translateY(-2px);box-shadow:0 20px 40px -10px rgba(75,59,143,.7)}