/* Artmark Contact Us (Associates) — form card beside a dark info card stacked
   over a Google Map.

   Namespaced .am-acf. Colours, spacing, the column split and every border are
   widget controls; the values here are the design defaults.

   Note on specificity: the form and several of its parts carry BOTH an
   .am-acf__* class and the .am-cform__* hook class the shared contact script
   binds to. Rules touching those dual-classed elements are scoped under
   .am-acf so they outrank artmark-contact.css (0,1,0) if a page happens to
   load both widgets. */

.am-acf {
	width: 100%;
	background-color: #ffffff;
}

.am-acf__inner {
	width: 100%;
	max-width: none;
	margin: 0 auto;
}

/* ---------------------------------------------------------------- */
/* Head                                                              */
/* ---------------------------------------------------------------- */

.am-acf__head {
	width: 100%;
	margin-bottom: 44px;
}

.am-acf__title {
	margin: 0;
	font-size: 44px;
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: #0a0f14;
}

/* ---------------------------------------------------------------- */
/* Columns                                                           */
/* ---------------------------------------------------------------- */

.am-acf__cols {
	display: flex;
	align-items: flex-start;
	gap: var(--am-acf-gap, 28px);
}

/* The split arrives as a custom property rather than the control writing
   `flex` itself: stacked, the flex axis flips and a percentage basis would be
   read as a height, so the responsive block has to put it back to auto — which
   it can only do without !important while no generated rule sets `flex` here. */
.am-acf__cols > .am-acf__card {
	flex: 0 0 var(--am-acf-split, 63%);
	max-width: var(--am-acf-split, 63%);
	min-width: 0;
}

.am-acf__cols--solo > .am-acf__card {
	flex: 1 1 auto;
	max-width: none;
}

.am-acf__side {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* ---------------------------------------------------------------- */
/* Form card                                                         */
/* ---------------------------------------------------------------- */

.am-acf__card {
	background-color: #faf5ec;
	border: 0 solid #e7dfd1;
	padding: 44px;
}

/* Two-column field grid. Each field sets --am-acf-span (1 = half, 2 = full)
   from its own Width control. */
.am-acf .am-acf__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 24px;
	row-gap: 22px;
}

.am-acf .am-acf__group {
	display: flex;
	flex-direction: column;
	min-width: 0;
	grid-column: span var(--am-acf-span, 1);
}

.am-acf .am-acf__group--help,
.am-acf .am-acf__group--message {
	grid-column: 1 / -1;
}

.am-acf__label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	color: #3a4048;
}

.am-acf__req {
	color: #3a4048;
}

/* ---------------------------------------------------------------- */
/* Inputs                                                            */
/* ---------------------------------------------------------------- */

/* Themes style form controls aggressively and their selectors (input[type=…],
   :focus) beat a bare class, so the reset is grouped across every state and
   every value comes back through a custom property the controls set. */
.am-acf .am-acf__input,
.am-acf .am-acf__textarea {
	width: 100%;
	min-width: 0;
	display: block;
	margin: 0;
	padding: 15px 16px;
	font-family: inherit;
	font-size: 16px;
	line-height: 24px;
	color: var(--am-acf-in-color, #12181f);
	background-color: var(--am-acf-in-bg, #ffffff);
	background-image: none;
	border: var(--am-acf-in-bdw, 1px) solid var(--am-acf-in-bd, #ded6c7);
	border-radius: var(--am-acf-in-radius, 2px);
	box-shadow: none;
	outline: 0;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.am-acf .am-acf__input:hover,
.am-acf .am-acf__textarea:hover {
	border-color: var(--am-acf-in-bd, #ded6c7);
}

.am-acf .am-acf__input:focus,
.am-acf .am-acf__input:focus-visible,
.am-acf .am-acf__textarea:focus,
.am-acf .am-acf__textarea:focus-visible {
	border-color: var(--am-acf-in-bd-focus, #0080b8);
	box-shadow: 0 0 0 3px rgba(0, 128, 184, 0.14);
	outline: 0;
}

.am-acf .am-acf__textarea {
	min-height: 132px;
	resize: vertical;
}

.am-acf .am-acf__input::placeholder,
.am-acf .am-acf__textarea::placeholder {
	color: #8a8f97;
	opacity: 1;
}

/* Error state, driven by the shared script adding .has-error to the group. */
.am-acf .am-acf__error {
	display: none;
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.35;
	color: var(--am-acf-err, #c0392b);
}

.am-acf .has-error .am-acf__error {
	display: block;
}

.am-acf .has-error .am-acf__input,
.am-acf .has-error .am-acf__textarea {
	border-color: var(--am-acf-err, #c0392b);
}

/* ---------------------------------------------------------------- */
/* Help options                                                      */
/* ---------------------------------------------------------------- */

.am-acf__opts {
	display: grid;
	grid-template-columns: repeat(var(--am-acf-optcols, 4), minmax(0, 1fr));
	gap: 12px;
}

.am-acf .am-acf__opt {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 14px;
	cursor: pointer;
	background-color: var(--am-acf-opt-bg, #ffffff);
	border: var(--am-acf-opt-bdw, 1px) solid var(--am-acf-opt-bd, #ded6c7);
	border-radius: var(--am-acf-opt-radius, 2px);
	color: var(--am-acf-opt-color, #12181f);
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

.am-acf .am-acf__opt.is-checked {
	background-color: var(--am-acf-opt-bg-on, var(--am-acf-opt-bg, #ffffff));
	border-color: var(--am-acf-opt-bd-on, #0080b8);
}

/* The real radio stays focusable but invisible; .am-acf__radio is the drawn
   one, so its size and colours can be controls. */
.am-acf .am-acf__opt input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

.am-acf__radio {
	flex: 0 0 auto;
	display: block;
	width: var(--am-acf-radio-size, 18px);
	height: var(--am-acf-radio-size, 18px);
	border: 1px solid var(--am-acf-radio, #c7cdd4);
	border-radius: 50%;
	background-color: transparent;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.am-acf .am-acf__opt.is-checked .am-acf__radio {
	border-color: var(--am-acf-radio-on, #0080b8);
	/* inset ring instead of a child element — one box, no extra markup */
	box-shadow: inset 0 0 0 4px var(--am-acf-radio-on, #0080b8);
}

.am-acf .am-acf__opt input:focus-visible ~ .am-acf__radio {
	box-shadow: 0 0 0 3px rgba(0, 128, 184, 0.35);
}

.am-acf__optlabel {
	min-width: 0;
	font-size: 15px;
	line-height: 1.3;
	overflow-wrap: break-word;
}

/* ---------------------------------------------------------------- */
/* Actions                                                           */
/* ---------------------------------------------------------------- */

/* Flex column so the shared button pack's Alignment control, which writes
   align-self on .am-btn, has an axis to work against. */
.am-acf__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: 28px;
}

.am-acf__note {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: #6b7280;
}

.am-acf .am-acf__status {
	margin-top: 16px;
	font-size: 15px;
	line-height: 1.5;
}

.am-acf .am-acf__status.is-error {
	color: var(--am-acf-err, #c0392b);
}

.am-acf .am-acf__status.is-success {
	color: #1c7c3e;
}

.am-acf .is-sending .am-acf__submit,
.am-acf .am-acf__submit[disabled] {
	opacity: 0.65;
	cursor: progress;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.am-acf__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------- */
/* Info card                                                         */
/* ---------------------------------------------------------------- */

.am-acf__info {
	background-color: #0a0f14;
	padding: 32px;
}

.am-acf__infolabel {
	display: block;
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8896a0;
}

.am-acf__infotitle {
	margin: 14px 0 20px;
	font-size: 27px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #ffffff;
}

.am-acf__rows {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 14px 0 0;
	padding: 0;
}

.am-acf__infotitle + .am-acf__rows {
	margin-top: 0;
}

.am-acf__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.45;
	color: var(--am-acf-row, #dce3e9);
}

.am-acf__rowlabel,
.am-acf__rowvalue {
	min-width: 0;
	overflow-wrap: break-word;
}

/* Themes repaint links on hover/focus/active and a pseudo-class selector beats
   a bare class, so every state is stated and the colour comes from the
   control's custom property. */
.am-acf a.am-acf__rowlink,
.am-acf a.am-acf__rowlink:link,
.am-acf a.am-acf__rowlink:visited,
.am-acf a.am-acf__rowlink:hover,
.am-acf a.am-acf__rowlink:focus,
.am-acf a.am-acf__rowlink:focus-visible,
.am-acf a.am-acf__rowlink:active {
	min-width: 0;
	background: none;
	border: 0;
	box-shadow: none;
	outline: 0;
	text-decoration: none;
	overflow-wrap: break-word;
	color: var(--am-acf-rowlink, #9cd4f5);
}

.am-acf a.am-acf__rowlink:hover {
	text-decoration: underline;
}

.am-acf a.am-acf__rowlink:focus-visible {
	outline: 2px solid var(--am-acf-rowlink, #9cd4f5);
	outline-offset: 2px;
}

.am-acf__rule {
	height: 0;
	margin: 24px 0;
	border: 0;
	border-top: 1px solid var(--am-acf-rule, rgba(255, 255, 255, 0.14));
}

/* The "Explore Our Global Network" button under the Global Presence eyebrow.
   Colours ride the shared button variables plus two hover ones, every state
   pinned so the theme's link colours cannot bleed in. The alignment control
   sets --am-acfp-flex so "Full width" really stretches the button. */
.am-acf__presence-row {
	display: flex;
	justify-content: flex-start;
}

.am-acf .am-acf__presence-btn,
.am-acf a.am-acf__presence-btn,
.am-acf a.am-acf__presence-btn:link,
.am-acf a.am-acf__presence-btn:visited {
	--am-btn-bg: #0080b8;
	--am-btn-color: #ffffff;
	flex: var(--am-acfp-flex, 0 0 auto);
	min-width: 0;
	margin-top: 16px;
	padding: 14px 20px;
	font-size: 16px;
	gap: 12px;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.am-acf a.am-acf__presence-btn:hover,
.am-acf a.am-acf__presence-btn:focus,
.am-acf a.am-acf__presence-btn:focus-visible,
.am-acf a.am-acf__presence-btn:active {
	background-color: var(--am-acfp-hbg, #0a6ea0);
	color: var(--am-acfp-hc, #ffffff);
}

.am-acf__chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background-color: #d3edfe;
	font-size: 14px;
	line-height: 1.3;
	color: #0a0f14;
}

.am-acf__chipdot {
	flex: 0 0 auto;
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #0081e4;
}

/* An uploaded icon replaces the dot, so the round background would show
   through behind a transparent PNG. */
.am-acf__chipdot--img {
	background-color: transparent;
	border-radius: 0;
}

.am-acf__chipdot--img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ---------------------------------------------------------------- */
/* Map                                                               */
/* ---------------------------------------------------------------- */

.am-acf__map {
	position: relative;
	width: 100%;
	height: 300px;
	overflow: hidden;
	border: 1px solid #e2e6ea;
	background-color: #eef1f4;
}

/* Google's embed sizes itself to the frame, so the frame has to fill the box
   and carry no chrome of its own. */
.am-acf__mapframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	margin: 0;
}

.am-acf .am-acf__mapopen,
.am-acf .am-acf__mapopen:link,
.am-acf .am-acf__mapopen:visited,
.am-acf .am-acf__mapopen:hover,
.am-acf .am-acf__mapopen:focus,
.am-acf .am-acf__mapopen:focus-visible,
.am-acf .am-acf__mapopen:active {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border: 0;
	border-radius: 2px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
	outline: 0;
	text-decoration: none;
	font-size: 13px;
	line-height: 1.2;
	background-color: var(--am-acf-mapopen-bg, #ffffff);
	color: var(--am-acf-mapopen-color, #12181f);
	transition: box-shadow 0.18s ease;
}

.am-acf .am-acf__mapopen:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.am-acf .am-acf__mapopen:focus-visible {
	outline: 2px solid var(--am-acf-in-bd-focus, #0080b8);
	outline-offset: 2px;
}

.am-acf__mapicon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
}

.am-acf__mapicon svg,
.am-acf__mapicon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ---------------------------------------------------------------- */
/* Responsive                                                        */
/* ---------------------------------------------------------------- */

@media (max-width: 1024px) {
	/* Stacked, the flex axis has flipped: a percentage basis would be read as
	   a height, so it goes back to auto rather than merely widening. */
	.am-acf__cols {
		flex-direction: column;
	}

	.am-acf__cols > .am-acf__card {
		flex: 0 0 auto;
		max-width: none;
		width: 100%;
	}

	.am-acf__side {
		width: 100%;
	}

	.am-acf__title {
		font-size: 36px;
	}

	.am-acf__opts {
		--am-acf-optcols: 2;
	}
}

@media (max-width: 767px) {
	.am-acf__title {
		font-size: 29px;
	}

	/* Half-width fields would leave 40px of usable text on a phone. */
	.am-acf .am-acf__group {
		grid-column: 1 / -1;
	}

	.am-acf__opts {
		--am-acf-optcols: 1;
	}

	.am-acf__infotitle {
		font-size: 23px;
	}
}