/*
 * NGL v2 — the contact page (Figma "Contact Us" 318:8560; design/contact): the hero with its bar of
 * in-page links, the message form card (Gravity Forms markup, drawn here: Gravity Forms' own CSS is off
 * on this page, contact.php) with the contact details beside it, the admission band's navy variant of
 * the shared band (inner.css), and the location card. The breadcrumbs, eyebrows, quote bar and the
 * consultation pop-up are the shared ones (inner.css, base.css, dialog.css).
 *
 * Desktop values are the 1440px frame's and scale down with clamp(). Logical properties throughout, so
 * RTL (fa, ar) and LTR (en) share every rule; the map's drawing is not mirrored.
 */

.nglv2-ipage--contact {
	--nglv2-cgap: clamp(48px, 5.5556vw, 80px); /* between the page's blocks: 80 at 1440 */
}

/* The bar's links land on these, clear of the fixed header. */
.nglv2-cform,
.nglv2-complaints--contact,
.nglv2-cmap {
	scroll-margin-top: calc(var(--nglv2-header-h) + 24px);
}

/* ----------------------------------------------------------------------------------------------
 * Hero (327:11935): 80 under the breadcrumbs; eyebrow, 32, the copy (757) and, 96 from it, the badge
 * (256); 32; the bar (80).
 * ------------------------------------------------------------------------------------------- */

.nglv2-chero {
	margin-top: var(--nglv2-cgap);
}

.nglv2-chero__top {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.nglv2-chero__row {
	display: flex;
	align-items: flex-start;
	gap: clamp(48px, 6.6667vw, 96px);
}

.nglv2-chero__copy {
	display: flex;
	flex: 0 1 757px;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	min-width: 0;
}

.nglv2 .nglv2-chero__title {
	font-weight: 800;
	font-size: clamp(28px, calc(12px + 1.945vw), 40px);
	line-height: 1.6;
	color: var(--nglv2-ink);
}

.nglv2 .nglv2-chero__subtitle {
	font-weight: 700;
	font-size: clamp(19px, calc(8px + 1.111vw), 24px);
	line-height: 1.3334;
	color: #1c5147;
}

.nglv2 .nglv2-chero__lead {
	font-size: clamp(17px, calc(8px + 1.111vw), 24px);
	line-height: 1.3334;
	color: #52706a;
}

@media (min-width: 1024px) {
	.nglv2 .nglv2-chero__title {
		line-height: 2.125; /* 85px at 40px, as drawn */
	}
}

/* The badge: rings of 256 and 160, the green disc (80) with the chat icon; the large ring and the dots
   around it are measured from the badge's corner. */
.nglv2-chero__badge {
	position: relative;
	display: grid;
	flex: 0 0 256px;
	place-items: center;
	width: 256px;
	height: 256px;
	border: 0.8px solid rgba(13, 64, 54, 0.15);
	border-radius: 50%;
}

.nglv2-chero__ring {
	display: grid;
	place-items: center;
	width: 160px;
	height: 160px;
	border: 0.8px solid rgba(13, 64, 54, 0.15);
	border-radius: 50%;
}

.nglv2-chero__disc {
	display: grid;
	place-items: center;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--nglv2-accent);
	color: var(--nglv2-ink);
	filter: drop-shadow(0 20px 30px rgba(13, 64, 54, 0.2));
}

.nglv2-chero__disc .nglv2-icon {
	width: 32px;
	height: 32px;
}

.nglv2-chero__orbit,
.nglv2-chero__dot {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.nglv2-chero__orbit {
	inset-inline-end: -291px;
	top: -99.6px;
	width: 320px;
	height: 320px;
	border: 0.8px solid rgba(109, 190, 69, 0.2);
}

.nglv2-chero__dot {
	width: 12px;
	height: 12px;
	border: 2.8px solid #f3f5f4;
	background: var(--nglv2-accent);
	box-shadow: 0 0 0 1px rgba(201, 157, 60, 0.3);
}

.nglv2-chero__dot--1 {
	inset-inline-end: -43px;
	top: -7.6px;
}

.nglv2-chero__dot--2 {
	inset-inline-end: 330.8px;
	top: 192.4px;
}

.nglv2-chero__dot--3 {
	inset-inline-end: 378.8px;
	top: 28.4px;
}

/* The bar (319:9234): three equal links on dark green, separated by faint rules; the design's columns
   (392) leave 24 empty at the start. */
.nglv2-chero__bar {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 32px;
	padding-inline-start: 24px;
	background: #0d4036;
	box-shadow: 0 18px 50px rgba(13, 64, 54, 0.15);
	overflow: hidden;
}

.nglv2 .nglv2-chero__link {
	display: flex;
	align-items: center;
	gap: 14.4px;
	min-width: 0;
	min-height: 80px;
	padding: 16px 24px;
	color: #fff;
	font-weight: 800;
	font-size: 14px;
	line-height: 21px;
	text-decoration: none;
	transition: background-color 0.25s;
}

.nglv2 .nglv2-chero__link:not(:last-child) {
	border-inline-end: 0.8px solid rgba(255, 255, 255, 0.1);
}

.nglv2 .nglv2-chero__link:hover {
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}

.nglv2 .nglv2-chero__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -6px;
}

.nglv2 .nglv2-chero__icon {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	color: var(--nglv2-green);
}

.nglv2 .nglv2-chero__arrow {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin-inline-start: auto;
}

/* ----------------------------------------------------------------------------------------------
 * Form section (319:9261): eyebrow, 32, the title (85), 24, the card (1200 × 812, radius 28): the form
 * on white (padding 56) and the sidebar (408, padding 48).
 * ------------------------------------------------------------------------------------------- */

.nglv2-cform {
	margin-top: var(--nglv2-cgap);
}

.nglv2-cform__head {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 2.2223vw, 32px);
}

.nglv2 .nglv2-cform__title {
	font-weight: 800;
	font-size: clamp(28px, calc(12px + 1.945vw), 40px);
	line-height: 1.6;
	color: var(--nglv2-ink);
}

@media (min-width: 1024px) {
	.nglv2 .nglv2-cform__title {
		line-height: 2.125;
	}
}

/* The sidebar at the start (right), the form at the end, as drawn; the form comes first in the markup, so
   it leads when the card stacks. */
.nglv2-cform__card {
	display: flex;
	flex-direction: row-reverse;
	margin-top: 24px;
	border: 0.8px solid rgba(18, 62, 53, 0.1);
	border-radius: 28px;
	overflow: hidden;
}

.nglv2-cform__main {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	padding: clamp(24px, 3.8889vw, 56px);
	background: #fff;
}

.nglv2 .nglv2-cform__heading {
	font-weight: 800;
	font-size: clamp(24px, calc(12px + 1.25vw), 30px);
	line-height: 1.2;
	color: #112d28;
}

.nglv2 .nglv2-cform__intro {
	max-width: 576px;
	padding-top: 12px;
	font-size: 16px;
	line-height: 28px;
	color: #607771;
}

.nglv2-cform__form {
	width: 100%;
	max-width: 654px;
	padding-top: 36px;
}

.nglv2 .nglv2-cform__note {
	padding-top: 16px;
	font-size: 12px;
	line-height: 24px;
	color: #718580;
}

/* Once sent, the thank-you message says it all. */
.nglv2-cform__form:has(.gform_confirmation_message) + .nglv2-cform__note {
	display: none;
}

.nglv2 .nglv2-cform__missing {
	padding: 20px 24px;
	border-radius: 13.6px;
	background: #f9faf9;
	color: #2a4a44;
	font-size: 15px;
	line-height: 1.8;
}

/* Gravity Forms' markup: a two-column grid of fields (the design's 317 + 20 + 317), labels over the
   inputs, the submit button at the end. */
/* Not drawn: the message's "0 of 600 characters" counter (the field's maxlength still applies). */
.nglv2-cform__form .gform_heading,
.nglv2-cform__form .gform_validation_container,
.nglv2-cform__form .gfield--type-honeypot,
.nglv2-cform__form .ginput_counter {
	display: none !important;
}

.nglv2-cform__form .gform_fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.nglv2-cform__form .gfield {
	display: flex;
	grid-column: 1 / -1;
	flex-direction: column;
	gap: 8.8px;
	min-width: 0;
	min-height: 83.6px; /* the design's rows */
	margin: 0;
	padding: 0;
	border: 0;
}

.nglv2-cform__form .gfield--width-half {
	grid-column: span 1;
}

.nglv2-cform__form .gfield.gform_hidden,
.nglv2-cform__form .gfield_visibility_hidden {
	display: none;
}

.nglv2 .nglv2-cform__form .gfield_label {
	display: block;
	margin: 0;
	color: #2a4a44;
	font-weight: 800;
	font-size: 12.8px;
	line-height: 19.2px;
}

/* The child theme's style.css hides Gravity Forms' required marks and error summary everywhere (the
   previous contact page wrote "(Required)" instead). */
.nglv2 .nglv2-cform__form .gfield_required {
	display: inline !important;
	margin-inline-start: 0.25em;
	color: #a3483e;
	font-weight: 900;
}

.nglv2 .nglv2-cform__form .gfield_required .gfield_required {
	margin: 0;
}

.nglv2-cform__form .ginput_container {
	margin: 0;
}

.nglv2 .nglv2-cform__form input:not([type="hidden"]):not([type="submit"]),
.nglv2 .nglv2-cform__form select,
.nglv2 .nglv2-cform__form textarea {
	display: block;
	width: 100%;
	height: 55.2px;
	margin: 0;
	padding: 0 16px;
	border: 0.8px solid #d7dfdc;
	border-radius: 13.6px;
	background-color: #f9faf9;
	box-shadow: none;
	color: #183c35;
	font-family: var(--nglv2-font);
	font-weight: 500;
	font-size: 14px;
	line-height: normal;
	transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

/* The design sets the placeholder at the box's top edge (its line is 21 tall), with no resize grip. */
.nglv2 .nglv2-cform__form textarea {
	height: 107px;
	min-height: 55.2px;
	padding-block: 1px 8px;
	line-height: 21px;
	resize: none;
}

.nglv2 .nglv2-cform__form ::placeholder {
	color: #98a7a3;
	opacity: 1;
}

/* The chevron at the end; the design draws this one select left to right (text left, chevron right),
   unlike its other fields: here it follows the page's direction. */
.nglv2 .nglv2-cform__form select {
	padding-inline-end: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23183C35' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: right 20px center;
	background-repeat: no-repeat;
	background-size: 10px 6px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

html[dir="rtl"] .nglv2 .nglv2-cform__form select {
	background-position: left 20px center;
}

.nglv2 .nglv2-cform__form input:not([type="hidden"]):not([type="submit"]):hover,
.nglv2 .nglv2-cform__form select:hover,
.nglv2 .nglv2-cform__form textarea:hover {
	border-color: #b9c6c2;
}

.nglv2 .nglv2-cform__form input:not([type="hidden"]):not([type="submit"]):focus,
.nglv2 .nglv2-cform__form select:focus,
.nglv2 .nglv2-cform__form textarea:focus {
	border-color: var(--nglv2-accent);
	background-color: #fff;
	box-shadow: 0 0 0 3px rgba(109, 190, 69, 0.2);
	outline: none;
}

/* Errors: Gravity Forms' summary above the fields, the field's message under its input. */
.nglv2 .nglv2-cform__form .gform_validation_errors {
	display: block !important;
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: 13.6px;
	background: #fbefee;
	color: #a3483e;
}

.nglv2 .nglv2-cform__form .gform_validation_errors h2,
.nglv2 .nglv2-cform__form .gform_submission_error {
	margin: 0;
	color: inherit;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.7;
}

.nglv2 .nglv2-cform__form .gform_validation_errors ol {
	margin: 4px 0 0;
	padding-inline-start: 20px;
	font-size: 13px;
	line-height: 1.7;
}

.nglv2 .nglv2-cform__form .gform_validation_errors a {
	color: inherit;
	text-decoration: underline;
}

.nglv2 .nglv2-cform__form .gfield_error input:not([type="hidden"]),
.nglv2 .nglv2-cform__form .gfield_error select,
.nglv2 .nglv2-cform__form .gfield_error textarea {
	border-color: #a3483e;
}

.nglv2 .nglv2-cform__form .gfield_validation_message,
.nglv2 .nglv2-cform__form .validation_message {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	color: #a3483e;
	font-size: 12px;
	line-height: 20px;
}

.nglv2-cform__form .gform_footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin: 20px 0 0;
	padding: 0;
}

.nglv2 .nglv2-cform__form .gform_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10.4px;
	min-height: 48px;
	margin: 0;
	padding: 12px 22.4px;
	border: 0;
	border-radius: 9999px;
	background: var(--nglv2-accent);
	box-shadow: none;
	color: #102e28;
	font-family: var(--nglv2-font);
	font-weight: 800;
	font-size: 14px;
	line-height: 21px;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.25s, box-shadow 0.25s;
}

.nglv2 .nglv2-cform__form .gform_button:hover {
	background: var(--nglv2-accent-dark);
	box-shadow: 0 10px 24px rgba(109, 190, 69, 0.3);
}

.nglv2 .nglv2-cform__form .gform_button:focus-visible {
	outline: 2px solid #102e28;
	outline-offset: 2px;
}

.nglv2 .nglv2-cform__form .gform_button:disabled {
	cursor: progress;
	opacity: 0.7;
}

.nglv2 .nglv2-cform__form .gform_button .nglv2-icon {
	width: 20px;
	height: 20px;
}

/* Gravity Forms' spinner while the form is sent (its own CSS draws it; this is the same ring). */
.nglv2-cform__form .gform-loader {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid rgba(16, 46, 40, 0.15);
	border-top-color: var(--nglv2-accent);
	border-radius: 50%;
	animation: nglv2-spin 0.8s linear infinite;
}

@keyframes nglv2-spin {
	to {
		transform: rotate(360deg);
	}
}

.nglv2 .nglv2-cform__form .gform_confirmation_message {
	margin: 0;
	padding: 20px 24px;
	border-radius: 13.6px;
	background: #eef8e8;
	color: #1c5147;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.75;
}

/* The sidebar (319:9328): eyebrow, title and text; the four details between faint rules, each with its
   icon in a round tile; the profiles, centred. */
.nglv2-cform__side {
	display: flex;
	flex: 0 0 408px;
	flex-direction: column;
	min-width: 0;
	padding: clamp(24px, 3.3334vw, 48px);
	background: #113a33;
	color: #fff;
}

@media (min-width: 1200px) {
	.nglv2-cform__main,
	.nglv2-cform__side {
		min-height: 810px; /* the design's card, whose columns both end short of it */
	}
}

.nglv2 .nglv2-cform__kicker {
	color: var(--nglv2-accent);
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
}

.nglv2 .nglv2-cform__side-title {
	padding-top: 12px;
	color: #fff;
	font-weight: 800;
	font-size: 24px;
	line-height: 32px;
}

.nglv2 .nglv2-cform__side-text {
	padding-top: 12px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 14px;
	line-height: 28px;
}

.nglv2 .nglv2-cform__list {
	margin: 36px 0 0;
	padding: 0;
	border-block: 0.8px solid rgba(255, 255, 255, 0.1);
	list-style: none;
}

.nglv2-cform__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding-block: 20px;
}

.nglv2-cform__item + .nglv2-cform__item {
	border-top: 0.8px solid rgba(255, 255, 255, 0.1);
}

.nglv2-cform__item--center {
	align-items: center;
}

.nglv2-cform__icon {
	display: grid;
	flex: 0 0 40px;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.07);
	color: var(--nglv2-accent);
}

.nglv2-cform__icon .nglv2-icon {
	width: 20px;
	height: 20px;
}

.nglv2-cform__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	min-width: 0;
	max-width: 250px; /* 253 drawn; Chrome sets the address a little narrower than Figma, 250 keeps its three lines */
}

.nglv2 .nglv2-cform__label,
.nglv2 .nglv2-cform__hint {
	color: rgba(255, 255, 255, 0.45);
	font-size: 12px;
	line-height: 16px;
}

.nglv2 .nglv2-cform__hint {
	line-height: 20px;
}

.nglv2 .nglv2-cform__value {
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.nglv2 .nglv2-cform__item:first-child .nglv2-cform__value {
	line-height: 1.5; /* the address, three lines of 21 */
}

.nglv2 .nglv2-cform__value--lg {
	font-size: 16px;
}

.nglv2 a.nglv2-cform__value {
	transition: color 0.25s;
}

.nglv2 a.nglv2-cform__value:hover {
	color: var(--nglv2-accent);
}

/* Betheme's `a:focus { outline: 0 }` would leave the keyboard without a mark. */
.nglv2 a.nglv2-cform__value:focus-visible {
	outline: 2px solid var(--nglv2-green);
	outline-offset: 3px;
}

.nglv2 .nglv2-cform__socials {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin: 88px 0 0;
	padding: 0;
	list-style: none;
}

.nglv2 .nglv2-cform__socials a,
.nglv2 .nglv2-cform__socials span {
	display: block;
	width: 32px;
	height: 32px;
	color: #fff;
	transition: color 0.25s;
}

.nglv2 .nglv2-cform__socials a:hover {
	color: var(--nglv2-accent);
}

.nglv2 .nglv2-cform__socials .nglv2-icon {
	display: block;
	width: 32px;
	height: 32px;
}

/* ----------------------------------------------------------------------------------------------
 * Admission band (319:9463): the shared band in navy, no text and no headset; the title on one line
 * (636), 139 from the button (327 × 56), which sits level with it.
 * ------------------------------------------------------------------------------------------- */

.nglv2-complaints--contact {
	--nglv2-complaints-bg: var(--nglv2-navy);
	--nglv2-complaints-ink: #0d4036;
	margin-top: var(--nglv2-cgap);
}

/* Side by side from 1024 (below it the shared band stacks: text, then the button). */
@media (min-width: 1024px) {
	.nglv2-complaints--contact .nglv2-complaints__row {
		align-items: center;
		gap: clamp(48px, 9.6528vw, 139px);
	}

	.nglv2-complaints--contact .nglv2-complaints__copy {
		flex: 0 1 auto;
	}

	.nglv2-complaints--contact .nglv2-complaints__action {
		flex: 0 0 327px;
		justify-content: center;
	}
}

/* ----------------------------------------------------------------------------------------------
 * Location (327:11911): eyebrow, 32, the card (1200 × 395, radius 24): the copy (465) at the start, the
 * map (734) at the end.
 * ------------------------------------------------------------------------------------------- */

.nglv2-cmap {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-top: var(--nglv2-cgap);
}

.nglv2-cmap__card {
	display: flex;
	border: 0.8px solid rgba(18, 62, 53, 0.1);
	border-radius: 24px;
	background: #fff;
	opacity: 0.96;
	overflow: hidden;
}

.nglv2-cmap__copy {
	display: flex;
	flex: 0 0 465px;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-width: 0;
	min-height: 393px;
	padding: clamp(24px, 3.3334vw, 48px);
}

.nglv2 .nglv2-cmap__title {
	padding-top: 16px;
	color: #112d28;
	font-weight: 800;
	font-size: clamp(30px, calc(12px + 2vw), 40.8px);
	line-height: 1.4;
	letter-spacing: -0.025em;
}

/* One line as drawn: Chrome leaves Arabic-script letter-spacing out, so the title is wider than in
   Figma (381 vs 360) and runs into the padding rather than wrap. */
@media (min-width: 1200px) {
	html:lang(fa) .nglv2 .nglv2-cmap__title {
		white-space: nowrap;
	}
}

.nglv2 .nglv2-cmap__address {
	max-width: 344px;
	padding-top: 16px;
	color: #607771;
	font-size: 14px;
	line-height: 28px;
}

.nglv2 .nglv2-cmap__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10.4px;
	min-width: 132px;
	min-height: 48px;
	margin-top: 28px;
	padding: 12px 22.4px;
	border: 0.8px solid rgba(17, 58, 51, 0.16);
	border-radius: 9999px;
	color: #174b41;
	font-weight: 800;
	font-size: 14px;
	line-height: 21px;
	text-decoration: none;
	opacity: 0.6; /* as drawn; full strength on hover and focus */
	transition: opacity 0.25s, border-color 0.25s, background-color 0.25s;
}

.nglv2 .nglv2-cmap__btn:hover,
.nglv2 .nglv2-cmap__btn:focus-visible {
	border-color: rgba(17, 58, 51, 0.4);
	background: #f4f8f6;
	color: #174b41;
	opacity: 1;
}

.nglv2 .nglv2-cmap__btn:focus-visible {
	outline: 2px solid #174b41;
	outline-offset: 2px;
}

.nglv2 .nglv2-cmap__btn .nglv2-icon {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
}

/* The design's map drawing: three roads over a grey-green ground, the pin, the caption. */
.nglv2 .nglv2-cmap__map {
	position: relative;
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 393px;
	border-inline-start: 0.8px solid rgba(18, 62, 53, 0.1);
	background-color: #dce5e1;
	background-image:
		linear-gradient(15.89deg, rgba(98, 130, 123, 0) 44.975%, rgba(98, 130, 123, 0.38) 45.813%, rgba(98, 130, 123, 0.38) 47.488%, rgba(98, 130, 123, 0) 48.325%),
		linear-gradient(111.65deg, rgba(255, 255, 255, 0) 48.276%, rgba(255, 255, 255, 0.8) 49.138%, rgba(255, 255, 255, 0.8) 52.586%, rgba(255, 255, 255, 0) 53.448%),
		linear-gradient(174.61deg, rgba(106, 143, 135, 0) 55.259%, rgba(106, 143, 135, 0.26) 56.136%, rgba(106, 143, 135, 0.26) 57.889%, rgba(106, 143, 135, 0) 58.765%);
	overflow: hidden;
}

.nglv2-cmap__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nglv2-cmap__pin {
	position: absolute;
	left: 41.954%; /* 307.94 of 734 */
	top: 48%;      /* 188.64 of 393 */
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border: 8px solid #fff;
	border-radius: 50%;
	background: #0d4036;
	color: #e6bd5d;
	filter: drop-shadow(0 20px 12.5px rgba(0, 0, 0, 0.1)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.1));
	transition: transform 0.4s var(--nglv2-ease);
}

.nglv2-cmap__pin .nglv2-icon {
	width: 24px;
	height: 24px;
}

.nglv2-cmap__map:hover .nglv2-cmap__pin {
	transform: translateY(-4px);
}

.nglv2-cmap__label {
	position: absolute;
	left: 20px;
	bottom: 20px;
	padding: 8px 16px;
	border-radius: 9999px;
	background: #fff;
	color: #31544d;
	font-weight: 700;
	font-size: 12px;
	line-height: 16px;
	filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

/* ----------------------------------------------------------------------------------------------
 * Narrower screens (not drawn)
 * ------------------------------------------------------------------------------------------- */

@media (max-width: 1199px) {
	.nglv2-cform__side {
		flex-basis: 360px;
	}

	.nglv2-cmap__copy {
		flex-basis: 400px;
	}
}

@media (max-width: 1023px) {
	/* The badge is decoration: the copy takes the width. */
	.nglv2-chero__badge {
		display: none;
	}

	.nglv2-cform__card {
		flex-direction: column;
	}

	.nglv2-cform__side {
		flex-basis: auto;
	}

	.nglv2-cmap__card {
		flex-direction: column;
	}

	.nglv2-cmap__copy {
		flex-basis: auto;
		min-height: 0;
	}

	.nglv2 .nglv2-cmap__map {
		min-height: 280px;
		border-inline-start: 0;
		border-top: 0.8px solid rgba(18, 62, 53, 0.1);
	}
}

@media (max-width: 767px) {
	.nglv2-chero__bar {
		grid-template-columns: minmax(0, 1fr);
		padding-inline-start: 0;
	}

	.nglv2 .nglv2-chero__link {
		min-height: 64px;
	}

	.nglv2 .nglv2-chero__link:not(:last-child) {
		border-inline-end: 0;
		border-bottom: 0.8px solid rgba(255, 255, 255, 0.1);
	}

	.nglv2-cform__card {
		border-radius: 24px;
	}

	.nglv2-cmap__card {
		border-radius: 20px;
	}

	.nglv2 .nglv2-cform__socials {
		margin-top: 40px;
	}
}

@media (max-width: 639px) {
	.nglv2-cform__form .gfield--width-half {
		grid-column: 1 / -1;
	}

	.nglv2-cform__form .gform_footer {
		justify-content: stretch;
	}

	.nglv2 .nglv2-cform__form .gform_button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nglv2-cmap__pin,
	.nglv2 .nglv2-cmap__btn,
	.nglv2 .nglv2-chero__link {
		transition: none;
	}

	.nglv2-cform__form .gform-loader {
		animation-duration: 2.4s;
	}
}