/* Contact Us and FAQ page templates */

.page-template-page-contact-us .site-menu a[href*="/contact"],
.page-template-page-faq .site-menu a[href*="/resources"] { color: var(--cyan-500); }

.cf-page-hero {
	position: relative;
	min-height: 500px;
	padding-top: 72px;
	overflow: hidden;
	color: var(--white);
	background: var(--navy-800);
}
.cf-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(90deg, rgba(7, 43, 70, .75), rgba(11, 54, 84, .28) 65%, rgba(11, 54, 84, .18)), var(--cf-hero);
	background-position: center;
	background-size: cover;
	transform: scale(1.005);
}
.cf-page-hero--faq::before { background-image: linear-gradient(90deg, rgba(7, 38, 67, .84), rgba(8, 47, 78, .46) 66%, rgba(9, 48, 78, .3)), var(--cf-hero); }
.cf-page-hero__inner { position: relative; z-index: 1; display: flex; align-items: center; min-height: 428px; }
.cf-page-hero__content { width: 100%; padding-block: 40px; }
.cf-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; color: rgba(255,255,255,.68); font-size: 15px; }
.cf-breadcrumbs a:hover { color: var(--cyan-500); }
.cf-breadcrumbs strong { color: var(--white); font-weight: 650; }
.cf-page-hero h1 { max-width: 1040px; margin: 20px 0 14px; color: var(--white); font-size: clamp(52px, 4.4vw, 69px); }
.cf-page-hero p { margin: 0; color: rgba(255,255,255,.78); font-size: 18px; }

.contact-inquiry {
	background: linear-gradient(90deg, var(--navy-800) 0, var(--navy-800) calc((100vw - min(100vw - 48px, var(--container))) / 2 + 360px), var(--white) calc((100vw - min(100vw - 48px, var(--container))) / 2 + 360px));
}
.contact-inquiry__grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); }
.contact-info-panel { padding: 67px 42px 74px 0; color: var(--white); }
.contact-mini-label {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 6px 13px 5px;
	border-radius: 2px;
	color: var(--white);
	background: var(--cyan-600);
	font-size: 12px;
	font-weight: 850;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.contact-info-panel h2 { margin: 34px 0 25px; color: var(--white); font-size: 32px; }
.contact-info-panel > p { max-width: 290px; color: rgba(255,255,255,.66); font-size: 16px; line-height: 1.55; }
.contact-info-panel ul { display: grid; gap: 22px; margin: 33px 0 0; padding: 0; list-style: none; }
.contact-info-panel li { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 14px; }
.contact-info-panel li > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; color: var(--white); background: var(--cyan-600); }
.contact-info-panel li svg { width: 23px; height: 23px; }
.contact-info-panel li div { min-width: 0; }
.contact-info-panel small { display: block; margin-bottom: 2px; color: rgba(255,255,255,.5); font-size: 13px; }
.contact-info-panel a,
.contact-info-panel strong { display: block; color: var(--white); font-size: 15px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.contact-info-panel a:hover { color: var(--cyan-500); }

.contact-form-panel { min-width: 0; padding: 59px 0 64px 58px; background: var(--white); }
.contact-form-panel > h2 { margin-bottom: 5px; font-size: 30px; }
.contact-form-panel > p { margin: 0; color: #738296; font-size: 16px; }
.contact-page-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 23px; margin-top: 32px; }
.contact-page-form > label { display: grid; gap: 7px; min-width: 0; color: #264866; font-size: 14px; font-weight: 750; }
.contact-page-form label b { color: #ef5158; }
.contact-page-form input:not([type="radio"]),
.contact-page-form select,
.contact-page-form textarea {
	width: 100%;
	border: 1px solid #cbd8e4;
	border-radius: 5px;
	outline: 0;
	color: #314b62;
	background: #f8fafc;
	font-size: 15px;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.contact-page-form input:not([type="radio"]),
.contact-page-form select { height: 49px; padding: 0 15px; }
.contact-page-form select { appearance: auto; color: #6f8296; }
.contact-page-form textarea { min-height: 115px; padding: 13px 15px; resize: vertical; line-height: 1.45; }
.contact-page-form input:focus,
.contact-page-form select:focus,
.contact-page-form textarea:focus { border-color: var(--cyan-500); background: var(--white); box-shadow: 0 0 0 3px rgba(5,172,203,.12); }
.contact-page-form input::placeholder,
.contact-page-form textarea::placeholder { color: #9aacbd; }
.contact-field-wide { grid-column: 1 / -1; }
.contact-form-drawings { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 15px 32px; margin: 0; padding: 0; border: 0; }
.contact-form-drawings legend { width: 100%; margin-bottom: -7px; color: #264866; font-size: 14px; font-weight: 750; }
.contact-form-drawings label { display: inline-flex; align-items: center; gap: 8px; color: #536a81; font-size: 15px; cursor: pointer; }
.contact-form-drawings input { width: 19px; height: 19px; margin: 0; accent-color: var(--cyan-600); }
.contact-form-submit { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 2px; }
.contact-form-submit small { color: #8190a3; font-size: 14px; }
.contact-form-submit .button { flex: 0 0 auto; gap: 10px; min-width: 190px; border: 0; letter-spacing: 0; text-transform: none; }
.contact-form-submit .button svg { width: 16px; height: 16px; }
.contact-form-panel .form-notice { margin-bottom: -14px; }
.shine-fluent-form--contact { margin-top: 32px; }
.shine-fluent-form--contact .ff-el-group { margin-bottom: 22px; }
.shine-fluent-form--contact .ff-el-input--label label { color: #264866; font-size: 14px; font-weight: 750; }
.shine-fluent-form--contact .ff-el-form-control {
	width: 100%;
	border: 1px solid #cbd8e4;
	border-radius: 5px;
	outline: 0;
	color: #314b62;
	background: #f8fafc;
	font-size: 15px;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.shine-fluent-form--contact input.ff-el-form-control,
.shine-fluent-form--contact select.ff-el-form-control { min-height: 49px; padding: 0 15px; }
.shine-fluent-form--contact textarea.ff-el-form-control { min-height: 115px; padding: 13px 15px; resize: vertical; line-height: 1.45; }
.shine-fluent-form--contact .ff-el-form-control:focus { border-color: var(--cyan-500); background: var(--white); box-shadow: 0 0 0 3px rgba(5,172,203,.12); }
.shine-fluent-form--contact .ff-btn-submit { min-height: 49px; padding-inline: 28px; border: 0; border-radius: 3px; color: var(--white); background: var(--cyan-600); font-weight: 800; }
.shine-fluent-form--contact .ff-btn-submit:hover { background: var(--cyan-500); }

.contact-location { padding-block: 84px 92px; background: #f1f5f9; }
.contact-location__heading { margin-bottom: 37px; text-align: center; }
.contact-location__heading h2 { margin-top: 14px; font-size: 38px; }
.contact-location__heading p { margin: 9px 0 0; color: #768699; font-size: 16px; }
.contact-location__card { display: grid; grid-template-columns: minmax(0, 1fr) 310px; overflow: hidden; min-height: 450px; border: 1px solid #cbd7e2; border-radius: 11px; background: var(--white); }
.contact-location__card > img { width: 100%; height: 100%; min-height: 450px; object-fit: cover; }
.contact-location__details { padding: 36px 28px; }
.contact-location__details h3 { margin-bottom: 25px; font-size: 21px; }
.contact-location__details p { display: grid; grid-template-columns: 30px 1fr; align-items: start; gap: 12px; margin-bottom: 19px; color: #607287; font-size: 15px; line-height: 1.42; }
.contact-location__details p svg { width: 30px; height: 30px; padding: 7px; border-radius: 6px; color: var(--cyan-600); background: #e9f8fb; }
.contact-location__details p a:hover { color: var(--cyan-600); }
.contact-location__details .button { gap: 10px; width: 100%; min-height: 45px; margin-top: 12px; letter-spacing: 0; text-transform: none; }
.contact-location__details .button svg { width: 17px; height: 17px; }

.cf-bottom-cta { min-height: 270px; padding-block: 62px; color: var(--white); background: linear-gradient(105deg, #079dbb, #0b7392 45%, #143d63); text-align: center; }
.cf-bottom-cta h2 { color: var(--white); font-size: clamp(36px, 3.1vw, 47px); }
.cf-bottom-cta p { max-width: 920px; margin: 18px auto 25px; color: rgba(255,255,255,.68); font-size: 16px; }
.cf-bottom-cta .container > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.cf-bottom-cta .button { gap: 9px; min-width: 200px; letter-spacing: 0; text-transform: none; }
.cf-bottom-cta .button svg { width: 16px; height: 16px; }
.cf-cta-primary { color: var(--navy-800); background: var(--white); }
.cf-cta-primary:hover { color: var(--cyan-600); }

.faq-library { padding-block: 67px 92px; background: #f2f6fa; }
.faq-layout { display: grid; grid-template-columns: 225px minmax(0, 1fr); align-items: start; gap: 43px; }
.faq-sidebar { position: sticky; top: 96px; }
.faq-sidebar > h2 { margin: 0 0 17px 18px; font-size: 14px; letter-spacing: .08em; }
.faq-categories { display: grid; gap: 8px; }
.faq-categories button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	padding: 9px 14px;
	border: 1px solid #e0e7ee;
	border-radius: 7px;
	color: #566a7f;
	background: var(--white);
	font-size: 14px;
	font-weight: 650;
	text-align: left;
	cursor: pointer;
	transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
.faq-categories button:hover { transform: translateX(3px); border-color: #bad7e2; }
.faq-categories button > span { display: flex; align-items: center; gap: 9px; }
.faq-categories button svg { width: 16px; height: 16px; color: #748da5; }
.faq-categories button b { display: grid; place-items: center; min-width: 25px; height: 20px; padding: 0 5px; border-radius: 10px; color: #7890a5; background: #edf2f6; font-size: 12px; }
.faq-categories button.is-active { color: var(--white); border-color: var(--navy-800); background: var(--navy-800); }
.faq-categories button.is-active svg { color: var(--cyan-500); }
.faq-categories button.is-active b { color: var(--white); background: var(--cyan-600); }
.faq-support-card { margin-top: 10px; padding: 24px 19px 20px; border-radius: 9px; color: var(--white); background: var(--navy-800); }
.faq-support-card > span { display: inline-flex; padding: 5px 10px 4px; border-radius: 2px; color: var(--white); background: var(--cyan-600); font-size: 11px; font-weight: 850; letter-spacing: .12em; line-height: 1; text-transform: uppercase; }
.faq-support-card h3 { margin: 16px 0 11px; color: var(--white); font-size: 17px; }
.faq-support-card p { margin-bottom: 17px; color: rgba(255,255,255,.58); font-size: 14px; line-height: 1.5; }
.faq-support-card .button { width: 100%; min-height: 40px; padding: 9px 12px; font-size: 13px; letter-spacing: 0; text-transform: none; }

.faq-content { display: grid; gap: 56px; min-width: 0; }
.faq-group[hidden] { display: none; }
.faq-group > header { display: flex; align-items: center; gap: 13px; margin-bottom: 24px; }
.faq-group > header > span { display: grid; place-items: center; width: 41px; height: 41px; border-radius: 8px; color: var(--cyan-600); background: var(--navy-800); }
.faq-group > header svg { width: 20px; height: 20px; }
.faq-group > header h2 { flex: 0 0 auto; font-size: 24px; }
.faq-group > header i { width: 100%; height: 1px; background: #dbe4ec; }
.faq-items { display: grid; gap: 13px; }
.faq-item { overflow: hidden; border: 1px solid #e0e7ed; border-radius: 10px; background: var(--white); box-shadow: 0 4px 14px rgba(12,52,85,.025); }
.faq-item.is-open { border-color: var(--cyan-500); box-shadow: 0 8px 24px rgba(12,52,85,.07); }
.faq-item h3 { margin: 0; }
.faq-item h3 button { display: grid; grid-template-columns: 30px minmax(0, 1fr) 20px; align-items: center; gap: 16px; width: 100%; min-height: 66px; padding: 14px 24px; border: 0; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.faq-item h3 button > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #7990a5; background: #eff4f8; font-size: 13px; }
.faq-item h3 strong { font-size: 15px; font-weight: 750; line-height: 1.4; }
.faq-item h3 i { position: relative; width: 13px; height: 13px; justify-self: end; }
.faq-item h3 i::before,
.faq-item h3 i::after { content: ""; position: absolute; top: 6px; left: 1px; width: 11px; height: 1.5px; border-radius: 2px; background: #8092a4; transition: transform .2s ease, background .2s ease; }
.faq-item h3 i::after { transform: rotate(90deg); }
.faq-item.is-open h3 i::after { transform: rotate(0); }
.faq-item.is-open h3 i::before,
.faq-item.is-open h3 i::after { background: var(--cyan-600); }
.faq-answer { padding: 0 68px 23px; color: #617386; }
.faq-answer[hidden] { display: none; }
.faq-answer p { margin: 0; font-size: 15px; line-height: 1.65; }
.faq-answer > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.faq-answer > div span { padding: 5px 10px 4px; border-radius: 3px; color: #0684b1; background: #e5f7fd; font-size: 11px; font-weight: 750; line-height: 1; }
.faq-answer > div span.is-green { color: #159552; background: #e6f9ed; }

@media (max-width: 1000px) {
	.contact-inquiry { background: var(--white); }
	.contact-inquiry__grid { grid-template-columns: 310px minmax(0, 1fr); width: 100%; }
	.contact-info-panel { padding-left: 30px; background: var(--navy-800); }
	.contact-form-panel { padding-right: 30px; padding-left: 38px; }
	.faq-layout { grid-template-columns: 1fr; }
	.faq-sidebar { position: static; }
	.faq-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.faq-categories button:first-child { grid-column: 1 / -1; }
	.faq-support-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 24px; }
	.faq-support-card > span { justify-self: start; }
	.faq-support-card h3,
	.faq-support-card p { grid-column: 1; }
	.faq-support-card .button { grid-column: 2; grid-row: 1 / 4; min-width: 180px; }
}

@media (max-width: 760px) {
	.cf-page-hero { min-height: 430px; padding-top: 66px; }
	.cf-page-hero__inner { align-items: flex-end; min-height: 364px; }
	.cf-page-hero__content { padding-bottom: 54px; }
	.cf-page-hero h1 { font-size: clamp(43px, 12vw, 56px); }
	.cf-page-hero p { font-size: 16px; line-height: 1.45; }
	.contact-inquiry__grid { grid-template-columns: 1fr; }
	.contact-info-panel { padding: 54px 24px; }
	.contact-info-panel > p { max-width: 540px; }
	.contact-form-panel { padding: 52px 24px 58px; }
	.contact-page-form { grid-template-columns: 1fr; }
	.contact-field-wide,
	.contact-form-drawings { grid-column: auto; }
	.contact-form-submit { align-items: stretch; flex-direction: column; }
	.contact-form-submit .button { width: 100%; }
	.contact-location { padding-block: 64px; }
	.contact-location__card { grid-template-columns: 1fr; }
	.contact-location__card > img { min-height: 300px; max-height: 390px; }
	.contact-location__details { padding: 29px 23px 34px; }
	.faq-library { padding-block: 50px 66px; }
	.faq-categories { grid-template-columns: 1fr; }
	.faq-categories button:first-child { grid-column: auto; }
	.faq-support-card { display: block; }
	.faq-support-card .button { margin-top: 2px; }
	.faq-content { gap: 42px; }
	.faq-group > header h2 { font-size: 21px; }
	.faq-item h3 button { grid-template-columns: 28px minmax(0, 1fr) 18px; gap: 11px; min-height: 62px; padding: 13px 15px; }
	.faq-item h3 button > span { width: 28px; height: 28px; }
	.faq-item h3 strong { font-size: 14px; }
	.faq-answer { padding: 0 54px 21px; }
	.cf-bottom-cta { padding-block: 58px; }
	.cf-bottom-cta .container > div { display: grid; grid-template-columns: 1fr; }
	.cf-bottom-cta .button { width: 100%; }
}

/* Pixso desktop fidelity pass: Contact Us and FAQ, 1440px artboards. */
@media (min-width: 1001px) {
	.cf-page-hero { min-height: 472px; }
	.cf-page-hero__inner { min-height: 400px; }
	.cf-breadcrumbs { font-size: 13px; line-height: 16px; }
	.cf-page-hero h1 { font-size: 52px; line-height: 63px; }
	.cf-page-hero p { font-size: 15px; line-height: 18px; }

	.contact-inquiry,
	.contact-inquiry__grid { min-height: 796px; }
	.contact-info-panel { padding-top: 80px; }
	.contact-mini-label { font-size: 11px; font-weight: 700; line-height: 13px; }
	.contact-info-panel h2 { font-size: 28px; line-height: 34px; }
	.contact-info-panel > p { font-size: 14px; line-height: 22px; }
	.contact-info-panel small { font-size: 11px; line-height: 13px; }
	.contact-info-panel a,
	.contact-info-panel strong { font-size: 14px; line-height: 19px; }
	.contact-form-panel { padding-top: 80px; }
	.contact-form-panel > h2 { font-size: 22px; line-height: 27px; }
	.contact-form-panel > p { font-size: 14px; line-height: 17px; }
	.contact-page-form > label,
	.contact-form-drawings legend { font-size: 13px; line-height: 16px; }
	.contact-page-form input:not([type="radio"]),
	.contact-page-form select,
	.contact-page-form textarea,
	.contact-form-drawings label { font-size: 14px; line-height: 17px; }
	.contact-form-submit small { font-size: 12px; line-height: 15px; }

	.contact-location { min-height: 677px; padding-block: 70px; }
	.contact-location__heading h2 { font-size: 28px; line-height: 34px; }
	.contact-location__heading p { font-size: 14px; line-height: 17px; }
	.contact-location__details h3 { font-size: 18px; line-height: 22px; }
	.contact-location__details p { font-size: 14px; line-height: 20px; }

	.page-template-page-contact-us .cf-bottom-cta { min-height: 253px; padding-block: 55px; }
	.page-template-page-faq .cf-bottom-cta { min-height: 251px; padding-block: 55px; }
	.cf-bottom-cta h2 { font-size: 32px; line-height: 39px; }
	.cf-bottom-cta p { font-size: 15px; line-height: 18px; }

	.faq-library { min-height: 1770px; padding-block: 60px; }
	.faq-sidebar > h2 { font-size: 11px; line-height: 13px; }
	.faq-categories button { font-size: 14px; font-weight: 500; line-height: 17px; }
	.faq-categories button b { font-size: 10px; line-height: 12px; }
	.faq-support-card h3 { font-size: 15px; line-height: 18px; }
	.faq-support-card > span { font-weight: 700; }
	.faq-support-card p { font-size: 13px; line-height: 20px; }
	.faq-group > header h2 { font-size: 20px; line-height: 24px; }
	.faq-item h3 strong { font-size: 15px; font-weight: 600; line-height: 21px; }
	.faq-answer p { font-size: 14px; line-height: 22px; }
	.faq-answer > div span { font-size: 11px; line-height: 13px; }
}