/* ==========================================================================
   Contact Us (Figma) — page-templates/contact-us.php
   Desktop: 1220:5927 (1920). No mobile frame: same pattern as the other pages (< 768px).
   ========================================================================== */

/* Hero */
.ct-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 532px;
	overflow: hidden;
	padding: 0 var(--dsms-gutter) 20px;
	color: #fff;
	text-align: center;
	isolation: isolate;
}
.ct-hero__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.ct-hero__title { margin: 0 0 5px; color: #fff; font-size: 48px; font-weight: 600; line-height: normal; }
.ct-hero__crumbs { margin: 0; font-size: 15px; font-weight: 500; }
.ct-hero__crumbs a { color: #fff; }
.ct-hero__crumbs a:hover { color: var(--dsms-primary); }

/* Grey page band + white card */
.ct-body { padding: 52px 0 126px; background: #f1f1f1; }
.ct-card {
	padding: 30px;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 4px 24px rgba(0, 0, 0, .05);
	scroll-margin-top: calc(var(--dsms-header-h) + 20px);
}
.ct-card__head { padding-bottom: 24px; border-bottom: 1px solid var(--dsms-primary); text-align: center; }
.ct-card__title { margin: 0; color: #292621; font-size: 32px; font-weight: 700; line-height: 40px; }
.ct-card__text { margin: 25px 0 0; color: #404040; font-size: 16px; line-height: normal; }

/* Alerts */
.cf-alert { margin: 24px 0 0; padding: 14px 18px; border-radius: 4px; font-size: 15px; font-weight: 500; }
.cf-alert--success { border: 1px solid #b7e1c1; background: #edf8f0; color: #1d6b34; }
.cf-alert--error { border: 1px solid #f3c1c1; background: #fdf0f0; color: #a12b2b; }

/* Form */
.cf-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-section { display: flex; flex-direction: column; gap: 25px; padding: 25px 0; border-bottom: 1px solid var(--dsms-primary); }
.cf-section:last-of-type { border-bottom: 0; }
.cf-section__title { margin: 0; color: #fa9056; font-size: 24px; font-weight: 500; line-height: 40px; }
.cf-section__sub { margin: -25px 0 0; color: #535252; font-size: 15px; font-weight: 500; text-transform: capitalize; }

.cf-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cf-section .cf-row:has(.cf-input--date) { gap: 20px; }
.cf-label { margin: 0; padding: 0; color: #404040; font-size: 15px; font-weight: 500; line-height: normal; }
.cf-note { color: #9a9a9a; font-size: 13px; font-weight: 300; }
.cf-req { color: #ff5858; font-weight: 300; }
.cf-help { margin: 0; color: #565656; font-size: 12px; text-transform: capitalize; }

.cf-input {
	display: block;
	width: 100%;
	height: 45px;
	padding: 10px;
	border: 1px solid #ebebeb;
	border-radius: 2px;
	background: #f7f7f7;
	color: #1d1d1d;
	font: 500 14px/normal var(--dsms-font);
	transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.cf-input::placeholder { color: #c0c0c0; font-weight: 400; }
.cf-input:focus {
	border-color: #ffc5a6;
	outline: 0;
	background: #fff;
	box-shadow: 0 2px 2.5px rgba(255, 197, 166, .25), 0 0 0 3px rgba(250, 146, 90, .12);
}
.cf-input--date { color: #1d1d1d; }
.cf-input--date:invalid,
.cf-input--date:placeholder-shown { color: #c0c0c0; }
.cf-input--date::-webkit-calendar-picker-indicator { opacity: .45; cursor: pointer; }

.cf-group__title { margin: 0; padding: 0; color: #404040; font-size: 18px; font-weight: 500; line-height: normal; text-transform: capitalize; }
.cf-group__sub { margin: 2px 0 0; color: #565656; font-size: 14px; text-transform: capitalize; }
.cf-question .cf-input { margin-top: 5px; }

.cf-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.cf-group > legend { float: left; width: 100%; }
.cf-group > legend + * { clear: both; }
.cf-options { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.cf-group--inline .cf-options { flex-direction: row; flex-wrap: wrap; gap: 10px 20px; margin-top: 14px; }
.cf-option { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 2px; cursor: pointer; }
.cf-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cf-option__box {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	border: 1px solid #e3e3e3;
	border-radius: 3px;
	background: #f2f2f2;
	transition: background-color .15s ease, border-color .15s ease;
}
.cf-option input[type="radio"] + .cf-option__box { border-radius: 50%; }
.cf-option input:checked + .cf-option__box {
	border-color: var(--dsms-primary);
	background: var(--dsms-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m4 8.5 2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.cf-option input[type="radio"]:checked + .cf-option__box { background: #fff; box-shadow: inset 0 0 0 4px var(--dsms-primary); }
.cf-option input:focus-visible + .cf-option__box { box-shadow: 0 0 0 3px rgba(250, 146, 90, .3); }
.cf-option:hover .cf-option__box { border-color: var(--dsms-primary); }
.cf-option__text { color: #4b4b4b; font-size: 14px; line-height: normal; text-transform: capitalize; }

.cf-split { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 0 20px; }
.cf-split::before { content: ""; grid-column: 2; grid-row: 1; background: #e5e5e5; }
.cf-split > :first-child { grid-column: 1; grid-row: 1; }
.cf-split > :last-child { grid-column: 3; grid-row: 1; }

/* Validation */
.cf-error { margin: 8px 0 0; color: #d33; font-size: 13px; }
.cf-field.is-invalid .cf-input { border-color: #f19a9a; background: #fff7f7; }
.cf-group.is-invalid .cf-option__box { border-color: #f19a9a; }

.cf-submit { min-width: 154px; margin-top: 0; padding: 12px 50px; font-size: 15px; font-weight: 500; cursor: pointer; }
.cf-submit.is-loading { opacity: .6; pointer-events: none; }

/* Contact Form 7 (when a shortcode is used instead) */
.ct-card .wpcf7 { margin-top: 24px; }
.ct-card .wpcf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.ct-card .wpcf7 textarea,
.ct-card .wpcf7 select {
	width: 100%;
	padding: 10px;
	border: 1px solid #ebebeb;
	border-radius: 2px;
	background: #f7f7f7;
	font: 500 14px/1.4 var(--dsms-font);
}
.ct-card .wpcf7 .wpcf7-submit { padding: 12px 50px; border: 0; border-radius: 4px; background: var(--dsms-primary); font-weight: 500; text-transform: uppercase; }

.page-template-contact-us .site-footer { margin-top: 0; }

/* ---------- Tablet ---------- */
@media (max-width: 1199.98px) {
	.ct-hero { height: 420px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767.98px) {
	.ct-hero { height: 152px; padding: 0 var(--dsms-gutter); }
	.ct-hero__title { margin: 0; font-size: 32px; line-height: 42px; }

	.ct-body { padding: 20px 0 40px; }
	.ct-body .dsms-container { padding-inline: 12px; }
	.ct-card { padding: 20px 16px; }
	.ct-card__head { padding-bottom: 20px; }
	.ct-card__title { font-size: 24px; line-height: 32px; }
	.ct-card__text { margin-top: 10px; font-size: 15px; }

	.cf-section { gap: 20px; padding: 20px 0; }
	.cf-section__title { font-size: 22px; line-height: 32px; }
	.cf-section__sub { margin-top: -20px; }
	.cf-row,
	.cf-split { grid-template-columns: 1fr; gap: 20px; }
	.cf-split::before { display: none; }
	.cf-split > :first-child,
	.cf-split > :last-child { grid-column: 1; grid-row: auto; }
	.cf-group__title { font-size: 17px; }
	.cf-submit { width: 100%; }
}

/* ==========================================================================
   New UI (Figma "UI Layout Fix" → Contact us 88:5305): banner = service hero (service2.css),
   one line of text, the form straight on white (no grey band / card), CTA band below.
   ========================================================================== */
.dsms-ui2--contact .sv-hero { height: clamp(320px, 28.48vw, max(410px, 70svh)); }
.ct2 { padding: 48px 0 64px; background: #fff; }
.ct2__wrap { max-width: calc(1120px + 2 * var(--hm-gutter)); }
.ct2__intro { margin: 0 0 24px; color: var(--hm-black); font-size: 16px; font-weight: 500; line-height: 1.5; text-align: center; }
.ct2 .ct-card { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.ct2 .cf { font-family: "DM Sans", var(--dsms-font), sans-serif; }
.ct2 .cf-section { gap: 20px; padding: 24px 0 32px; }
.ct2 .cf-section:first-of-type { padding-top: 0; }
.ct2 .cf-section__title { color: var(--hm-primary); font-size: 18px; font-weight: 400; line-height: 1.4; }
.ct2 .cf-section__sub,
.ct2 .cf-help,
.ct2 .cf-group__title,
.ct2 .cf-group__sub,
.ct2 .cf-option__text { text-transform: none; }
.ct2 .cf-section__sub { margin-top: -12px; color: #404040; font-size: 15px; font-weight: 400; }
.ct2 .cf-label { color: #404040; font-size: 15px; font-weight: 500; }
.ct2 .cf-input::placeholder { color: #8e8e8e; }
.ct2 .cf-input { height: 46px; padding: 10px 16px; border: 1px solid #eaeaea; border-radius: 4px; background: #f5f5f5; font-weight: 400; font-size: 15px; }
.ct2 textarea.cf-input { height: auto; min-height: 96px; }
.ct2 .cf-group__title { color: #404040; font-size: 18px; font-weight: 400; }
.ct2 .cf-group__sub { color: #404040; font-size: 15px; }
.ct2 .cf-option__box { border-color: #9a9a9a; background: #fff; }
.ct2 .cf-option__text { color: #404040; font-size: 15px; }
.ct2 .cf-req { color: #ef4444; }
.ct2 .cf-submit {
	min-width: 179px;
	padding: 10px 24px;
	border: 0;
	border-radius: 0;
	background: var(--hm-primary);
	color: #fff;
	font-family: var(--hm-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-transform: uppercase;
}
.ct2 .cf-submit:hover,
.ct2 .cf-submit:focus-visible { background: #f07d40; }
.dsms-ui2--contact .site-footer { margin-top: 0; }

/* Second section: Ambryx hosted form (iframe) — template-parts/contact/ambryx.php. */
.ct2 + .ct2--ambryx { padding-top: 0; }
.ct2 + .ct2--ambryx .ct2__wrap::before { content: ""; display: block; height: 1px; margin-bottom: 48px; background: #eef0f3; }
.ct2--ambryx .hm-head { margin-bottom: 24px; }
.ct2-embed { position: relative; }
.ct2-embed__frame { display: block; width: 100%; border: 0; background: #fff; transition: height .2s ease; }
.ct2-embed[data-state="error"] .ct2-embed__frame { display: none; }
.ct2-embed[data-quiet] .ct2-embed__error { margin-top: 16px; padding: 24px 20px; }
.ct2-embed__status { margin: 0 0 16px; color: var(--hm-text); font-family: var(--hm-font); font-size: 15px; text-align: center; }
.ct2-embed__error { padding: 40px 20px; background: var(--hm-gray-bg); font-family: var(--hm-font); text-align: center; }
.ct2-embed__error p { margin: 0 0 16px; color: var(--hm-text-2); font-size: 16px; }
.ct2-embed__error .hm-btn { margin-bottom: 16px; }
.ct2-embed__alt { margin: 0 !important; font-size: 15px !important; }
.ct2-embed__alt a { color: var(--hm-gold); }
@media (max-width: 767.98px) {
	.ct2 { padding: 32px 0 40px; }
	.ct2__intro { margin-bottom: 16px; font-size: 15px; text-align: left; }
	.ct2 .cf-submit { width: 100%; }
}