/* Artmark section widgets (Trust Band, Chooser, Stats, CTA Band) — structural layout.
   Colors/typography come from widget controls. */

/* ---------------------------------------------------------------- */
/* Shared: notched button                                            */
/* ---------------------------------------------------------------- */

.am-btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-width: 194px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	background-color: var(--am-btn-bg, transparent);
	color: var(--am-btn-color, inherit);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Themes paint a:link / a:hover / a:visited, and those beat a bare class — an
   unstyled .am-btn came out in the theme's link colour. Every state is
   neutralised here, with the colours read back from custom properties the
   button control pack sets, so the controls still win. Per-item colours in
   Hero / Trust Band / CTA Band are written at {{CURRENT_ITEM}}.am-btn, a
   higher specificity again, so those keep winning too. */
a.am-btn,
a.am-btn:link,
a.am-btn:visited,
a.am-btn:hover,
a.am-btn:focus,
a.am-btn:focus-visible,
a.am-btn:active,
button.am-btn,
button.am-btn:hover,
button.am-btn:focus,
button.am-btn:focus-visible,
button.am-btn:active {
	background-image: none;
	background-color: var(--am-btn-bg, transparent);
	color: var(--am-btn-color, inherit);
	border: 0;
	box-shadow: none;
	outline: 0;
	text-decoration: none;
}

.am-btn:hover {
	transform: translateY(-2px);
	opacity: 0.92;
}

.am-btn:focus-visible {
	outline: 2px solid var(--am-btn-focus, #8fd0f5);
	outline-offset: 3px;
}

.am-btn__arrow {
	display: inline-flex;
}

.am-btn__arrow svg,
.am-btn__arrow img {
	width: 18px;
	height: 18px;
	display: block;
	object-fit: contain;
}

/* ---------------------------------------------------------------- */
/* Trust Band                                                        */
/* ---------------------------------------------------------------- */

.am-tband {
	width: 100%;
}

.am-tband__inner {
	max-width: none;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 120px;
}

.am-tband__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 60px;
}

.am-tband__title {
	margin: 0;
	font-size: 52px;
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.01em;
	/* The Figma fill: white until 37%, light blue from 64%, at 160°. */
	background-image: linear-gradient(var(--am-tb-angle, 160deg), var(--am-tb-a, #ffffff) var(--am-tb-s, 37%), var(--am-tb-b, #b4ddff) var(--am-tb-e, 64%));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.am-tband__right {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.am-tband__para {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
}

.am-tband__btns {
	display: flex;
	flex-wrap: wrap;
}

.am-tband__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

/* Feature dividers. Default "left" (the Figma): a vertical hairline down the
   left of each feature with the content inset by --am-tb-inset. "top": the
   earlier horizontal rule above each feature. --am-tb-line is Divider Color. */
.am-tband__feat {
	--am-tb-line: rgba(255, 255, 255, 0.15);
	border-top: 1px solid var(--am-tb-line);
	padding-top: 24px;
}

.am-tbdiv-left .am-tband__feat {
	border-top: 0;
	border-left: 1px solid var(--am-tb-line);
	padding-top: 0;
	padding-left: var(--am-tb-inset, 20px);
}

.am-tbdiv-none .am-tband__feat {
	border-top: 0;
	padding-top: 0;
}

.am-tband__feat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 28px;
}

.am-tband__feat-icon img {
	width: 56px;
	height: 56px;
	object-fit: contain;
	display: block;
}

.am-tband__feat-title {
	margin: 0 0 16px;
	font-size: 26px;
	font-weight: 400;
	line-height: 32px;
}

.am-tband__feat-desc {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
}

/* ---------------------------------------------------------------- */
/* Division Chooser                                                  */
/* ---------------------------------------------------------------- */

.am-chooser {
	width: 100%;
}

.am-chooser__inner {
	max-width: none;
	margin: 0 auto;
}

.am-chooser__title {
	margin: 0 0 56px;
	font-size: 58px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.am-chooser__grid {
	display: flex;
}

.am-choice-card {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	min-height: 540px;
	background-color: #020713;
	background-size: cover;
	background-position: center;
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.25s ease;
}

a.am-choice-card:hover {
	transform: translateY(-3px);
}

/* Image layer (zooms on hover) */
.am-choice-card__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform var(--am-cz-dur, 0.7s) ease;
	will-change: transform;
}

.am-choice-card:hover .am-choice-card__bg {
	transform: scale(var(--am-cz, 1.06));
}

.am-choice-card__shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}

.am-choice-card__chip {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	line-height: 16px;
	text-transform: uppercase;
	white-space: nowrap;
}

.am-choice-card__bottom {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.am-choice-card__text {
	margin: 0;
	font-size: 24px;
	line-height: 28px;
}

.am-choice-card__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease, background-color 0.25s ease, color 0.25s ease;
}

a.am-choice-card:hover .am-choice-card__arrow {
	transform: translateX(3px);
}

.am-choice-card__arrow img {
	object-fit: contain;
	display: block;
}

/* ---------------------------------------------------------------- */
/* Stats                                                             */
/* ---------------------------------------------------------------- */

.am-stats {
	width: 100%;
}

.am-stats__inner {
	max-width: none;
	margin: 0 auto;
	display: flex;
	align-items: stretch;
}

.am-stats__intro {
	flex: 1 1 40%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 48px;
}

.am-stats__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 16px;
}

.am-stats__label img {
	width: 16px;
	height: 16px;
	object-fit: contain;
}

.am-stats__title {
	margin: 0;
	font-size: 52px;
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.01em;
}

.am-stats__intro-bottom {
	display: flex;
	align-items: flex-end;
	gap: 24px;
}

.am-stats__image img {
	display: block;
	width: 250px;
	max-width: 100%;
	height: auto;
	object-fit: cover;
}

.am-stats__para {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 24px;
	max-width: 300px;
}

/* Stacked intro (default): paragraph, then the image spanning the column,
   both pinned to the bottom of the column so the image's lower edge lines
   up with the bottom row of tiles. */
.elementor-element.am-stats-intro-stack .am-stats__intro-bottom {
	flex-direction: column;
	align-items: stretch;
	gap: 32px;
}

.elementor-element.am-stats-intro-stack .am-stats__para {
	order: -1;
	margin: 0;
	max-width: none;
}

.elementor-element.am-stats-intro-stack .am-stats__image img {
	width: 100%;
}

.am-stats__grid {
	flex: 1 1 55%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.am-stat {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 376px;
}

/* Square tiles (default): the tile's height follows its width, and the
   grid keeps its natural height instead of stretching to a taller intro
   column, so a long heading can never pull the tiles out of shape. */
.elementor-element.am-stats-tiles-square .am-stats__grid {
	align-self: flex-start;
}

.elementor-element.am-stats-tiles-square .am-stat {
	box-sizing: border-box;
	width: 100%;
	min-height: 0;
	aspect-ratio: 1 / 1;
}

/* Optional photo behind the number, with a top-to-bottom shade over it. */
.am-stat__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}

/* Image zoom (Style → Stat Tiles → Image Zoom). The tile clips the photo,
   so only the picture moves. Hover: grows to --am-st-zoom over
   --am-st-zoom-ms. Always: a slow drift between 1 and --am-st-zoom. */
.am-stat__img {
	transform-origin: center;
	transition: transform var(--am-st-zoom-ms, 700ms) var(--am-st-zoom-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
	will-change: transform;
}

.elementor-element.am-stat-zoom-hover .am-stat:hover .am-stat__img,
.elementor-element.am-stat-zoom-hover .am-stat:focus-within .am-stat__img {
	transform: scale(var(--am-st-zoom, 1.08));
}

.elementor-element.am-stat-zoom-always .am-stat__img {
	animation: am-stat-drift calc(var(--am-st-zoom-ms, 700ms) * 12) ease-in-out infinite alternate;
}

@keyframes am-stat-drift {
	from { transform: scale(1); }
	to { transform: scale(var(--am-st-zoom, 1.08)); }
}

@media (prefers-reduced-motion: reduce) {
	.am-stat__img {
		transition: none;
		animation: none;
		transform: none;
	}
}

.am-stat__shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, var(--am-st-shade-a, rgba(4, 4, 4, 0.35)) 0%, var(--am-st-shade-b, rgba(4, 4, 4, 0.85)) 100%);
}

.am-stat__value,
.am-stat__bottom {
	position: relative;
	z-index: 2;
}

.am-stat__value {
	font-size: 96px;
	line-height: 1;
	letter-spacing: -2px;
}

.am-stat__bottom {
	display: block;
}

.am-stat__divider {
	display: block;
	border-top: 1px solid currentColor;
	opacity: 0.25;
	margin-bottom: 10px;
}

.am-stat__label {
	display: block;
	font-size: 16px;
	line-height: 1.3;
}

/* ---------------------------------------------------------------- */
/* CTA Band                                                          */
/* ---------------------------------------------------------------- */

.am-ctaband {
	width: 100%;
	text-align: center;
}

.am-ctaband__title {
	margin: 0 0 52px;
	font-size: 58px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.am-ctaband__btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

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

@media (max-width: 1024px) {
	.am-tband__top {
		flex-direction: column;
		gap: 40px;
	}

	.am-tband__title,
	.am-chooser__title,
	.am-ctaband__title {
		font-size: 40px;
	}

	.am-chooser__grid {
		flex-direction: column;
	}

	.am-stats__inner {
		flex-direction: column;
	}

	.am-stats__intro {
		justify-content: flex-start;
		gap: 40px;
	}

	/* Stacked columns: the grid must span the full width again (align-self
	   is the horizontal axis once the flex direction is column). */
	.elementor-element.am-stats-tiles-square .am-stats__grid {
		align-self: stretch;
	}

	.am-stats__title {
		font-size: 40px;
	}

	.am-stat__value {
		font-size: 68px;
	}
}

@media (max-width: 640px) {
	.am-tband__title,
	.am-chooser__title,
	.am-ctaband__title {
		font-size: 31px;
	}

	.am-stats__intro-bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Stacked, the image is a narrower-than-full block, so flex-start above
	   leaves it hugging the left edge with dead space beside it. Centre it by
	   default. The custom property is read only here, inside the stacked
	   layout, so the Image Alignment control cannot disturb the desktop row —
	   where align-self would mean vertical, not horizontal, alignment. */
	.am-stats__image {
		align-self: var(--am-st-imgalign, center);
	}

	.am-ctaband__btns,
	.am-tband__btns {
		flex-direction: column;
		align-items: stretch;
	}

	.am-btn {
		min-width: 0 !important;
	}
}

/* ---------------------------------------------------------------- */
/* A different paragraph on small screens                            */
/* ---------------------------------------------------------------- */

/* Hero widgets print both paragraphs when a small-screen one is set; the
   widget's am-mpara-* class says where the swap happens. */
.am-para-mob {
	display: none;
}

@media (max-width: 767px) {
	.am-mpara-mobile .am-para-desk {
		display: none;
	}

	.am-mpara-mobile .am-para-mob {
		display: block;
	}
}

@media (max-width: 1024px) {
	.am-mpara-tablet .am-para-desk {
		display: none;
	}

	.am-mpara-tablet .am-para-mob {
		display: block;
	}
}

/* ---------------------------------------------------------------- */
/* The head row's button on phones                                   */
/* ---------------------------------------------------------------- */

/* Sections with a heading on the left and a button on the right print
   the button twice; below 768px the copy after the content shows and the
   one beside the heading hides (Button On Phones). */
.am-btn-end {
	display: none;
	justify-content: flex-start;
	margin-top: 28px;
}

.am-btn-end .am-btn {
	max-width: 100%;
}

@media (max-width: 767px) {
	.am-btnmob-end .am-btn--top {
		display: none;
	}

	.am-btnmob-end .am-btn-end {
		display: flex;
	}

	.am-btnmob-end .am-btn-end[style*="stretch"] .am-btn,
	.am-btn-end .am-btn--end:only-child {
		flex: 0 1 auto;
	}
}