/*
 * About - Businesses.
 *
 * Read from cp-all-designer css/about-us.css:254-364 (.abtbiz),
 * css/app.css:304-311 (.btn--red) and css/app.css (the head). What the
 * Style tab sets arrives through the widget's selectors; a size left empty
 * there scales with the window the way the design's does.
 *
 * Tiers: four tiles to a row, two from 1024px down, one from 640px down.
 */

/* ------------------------------------------------------------------ */
/* The band and the head — app.css:230-252, 291-294, 385-408           */
/* ------------------------------------------------------------------ */

.custom-about-businesses {
	position: relative;
	display: block;
	box-sizing: border-box;
}

.custom-about-businesses__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 1920px;                     /* the content cap, every band */
	margin: 0 auto;
}

.custom-about-businesses__head {
	margin-left: auto;
	margin-right: auto;
}

.custom-about-businesses__title {
	margin: 0;
	padding: 0;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
}

.custom-about-businesses__title strong {
	font-weight: 700;
}

/* app.css:246-252 — the highlighted part, with the soft bar under it */
.custom-about-businesses__title em {
	position: relative;
	display: inline-block;
	font-style: italic;
	font-weight: 700;
}

.custom-about-businesses__title em::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.06em;
	height: 0.16em;
	border-radius: 3px;
	background: currentColor;
	opacity: 0.18;
}

.custom-about-businesses [data-custom-sweep-ghost] em::after {
	opacity: 0.12;                         /* app.css:275 */
}

/* app.css:291-294 — a measure of its own, its words centred inside it */
.custom-about-businesses__intro {
	margin-bottom: 0;
	font-weight: 400;
	line-height: 1.7;
}

/* app.css:3016 — a phone's lead sets tighter */
@media (max-width: 640px) {
	.custom-about-businesses__intro {
		line-height: 1.5;
	}
}


/* ------------------------------------------------------------------ */
/* The tiles — about-us.css:262-364                                    */
/* ------------------------------------------------------------------ */

.custom-about-businesses__grid {
	--custom-vwu: 14.4px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, calc(1.6 * var(--custom-vwu)), 22px);
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.custom-about-businesses__cta {
	--custom-vwu: 14.4px;
}

@media (max-width: 1280px) { .custom-about-businesses__grid, .custom-about-businesses__cta { --custom-vwu: 12.2px; } }
@media (max-width: 1200px) { .custom-about-businesses__grid, .custom-about-businesses__cta { --custom-vwu: 11.2px; } }
@media (max-width: 1024px) { .custom-about-businesses__grid, .custom-about-businesses__cta { --custom-vwu: 9.2px; } }
@media (max-width: 860px)  { .custom-about-businesses__grid, .custom-about-businesses__cta { --custom-vwu: 7.7px; } }
@media (max-width: 640px)  { .custom-about-businesses__grid, .custom-about-businesses__cta { --custom-vwu: 4.2px; } }
@media (max-width: 380px)  { .custom-about-businesses__grid, .custom-about-businesses__cta { --custom-vwu: 3.6px; } }

.custom-about-businesses__grid > li {
	display: flex;
	margin: 0;
}

/* about-us.css:279-290 — the tile takes the award card's shape: two
   opposite corners curled, a two-layer shadow */
.custom-about-businesses__item {
	--custom-press-ground: #FFFFFF;
	--custom-press-ink: inherit;
	--custom-press-edge: transparent;
	--custom-press-shadow: 0 2px 6px rgba(22, 65, 140, 0.06), 0 12px 28px -10px rgba(22, 65, 140, 0.15);
	--custom-abtbiz-acc: #16418C;
	--custom-abtbiz-curl: clamp(30px, calc(3.2 * var(--custom-vwu)), 50px);   /* app.css:158 --curl-sm */
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(14px, calc(1.4 * var(--custom-vwu)), 20px);
	box-sizing: border-box;
	padding: clamp(20px, calc(1.9 * var(--custom-vwu)), 26px);
	padding-right: clamp(44px, calc(4 * var(--custom-vwu)), 56px);
	border: 0;
	border-radius: var(--custom-abtbiz-curl) 0 var(--custom-abtbiz-curl) 0;
	text-decoration: none;
	transition: box-shadow 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

a.custom-about-businesses__item:focus-visible {
	outline: 2px solid #50A3D5;
	outline-offset: 3px;
}

/* about-us.css:293-297 */
.custom-about-businesses__go {
	position: absolute;
	top: clamp(18px, calc(1.8 * var(--custom-vwu)), 24px);
	right: clamp(18px, calc(1.8 * var(--custom-vwu)), 24px);
	font-size: 18px;
	line-height: 1;
	color: #94A3B8;
	transition: color 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (hover: hover) {
	a.custom-about-businesses__item:hover {
		--custom-press-shadow: 0 3px 8px rgba(22, 65, 140, 0.07), 0 18px 40px -14px rgba(22, 65, 140, 0.20);
		transform: translateY(-2px);
	}

	a.custom-about-businesses__item:hover .custom-about-businesses__go {
		color: var(--custom-abtbiz-acc) !important;
		transform: translateX(3px);
	}
}

/* about-us.css:324-336 — the icon in the group's colour, on a 12% tint of it */
.custom-about-businesses__ico {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: clamp(48px, calc(4.4 * var(--custom-vwu)), 60px);
	height: clamp(48px, calc(4.4 * var(--custom-vwu)), 60px);
	border-radius: 14px;
	color: var(--custom-abtbiz-acc);
	background: color-mix(in srgb, var(--custom-abtbiz-acc) 12%, #FFFFFF);
}

.custom-about-businesses__ico svg,
.custom-about-businesses__ico img {
	display: block;
	width: 58%;
	height: 58%;
	object-fit: contain;
}

/* about-us.css:338-341 */
.custom-about-businesses__name {
	letter-spacing: normal;
	font-size: clamp(16px, calc(1.25 * var(--custom-vwu)), 18px);
	font-weight: 500;
	line-height: 1.55;
	color: #16418C;
}

.custom-about-businesses .nb {
	white-space: nowrap;
}

/* about-us.css:343 */
.custom-about-businesses__cta {
	margin-top: clamp(28px, calc(3.2 * var(--custom-vwu)), 44px);
	text-align: center;
}

/* app.css:304-311 .btn .btn--red */
.custom-about-businesses__button {
	box-sizing: border-box;
	--custom-press-ground: #CE2929;
	--custom-press-ink: #FFFFFF;
	--custom-press-edge: transparent;
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 15px 30px;
	border-width: 1.5px;
	border-style: solid;
	border-radius: 16px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: normal;
	white-space: nowrap;
	cursor: pointer;
	transition: all 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-about-businesses__button:hover {
	--custom-press-ground: #6B170C;
	--custom-press-shadow: 0 14px 30px rgba(206, 41, 41, 0.34);
	transform: translateY(-2px);
}

.custom-about-businesses__button:focus-visible {
	outline: 2px solid #CE2929;
	outline-offset: 3px;
}

/* about-us.css:352-357 — two to a row, laid flat */
@media (max-width: 1024px) {
	.custom-about-businesses__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.custom-about-businesses__item {
		flex-direction: row;
		align-items: center;
		gap: 16px;
		padding-right: clamp(20px, calc(1.9 * var(--custom-vwu)), 26px);
	}

	.custom-about-businesses__go {
		position: static;
		margin-left: auto;
	}
}

/* about-us.css:359-364 */
@media (max-width: 640px) {
	.custom-about-businesses__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.custom-about-businesses__item {
		gap: 14px;
		padding: 14px 16px;
	}

	.custom-about-businesses__ico {
		width: 44px;
		height: 44px;
		border-radius: 12px;
	}

	.custom-about-businesses__button {
		width: 100%;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-about-businesses__item,
	.custom-about-businesses__go,
	.custom-about-businesses__button {
		transition: none;
	}

	a.custom-about-businesses__item:hover,
	.custom-about-businesses__button:hover {
		transform: none;
	}
}

/* the design wraps text plainly; some themes set "pretty" wrapping on
   paragraphs, which moves Thai line breaks */
.custom-about-businesses p,
.custom-about-businesses h2,
.custom-about-businesses h3,
.custom-about-businesses span {
	text-wrap: wrap;
	text-rendering: optimizeLegibility;
}


/* 1.0.7 — the design's scaling numbers on the whole widget, so the heading
   can use them too (app.css:127-128, 2889-2900) */
.custom-about-businesses {
	--custom-vwu: 14.4px;
	--custom-vhu: clamp(5.2px, 1svh, 9px);
}
@media (max-width: 1280px) { .custom-about-businesses { --custom-vwu: 12.2px; --custom-vhu: clamp(5.2px, 1svh, 8.5px); } }
@media (max-width: 1200px) { .custom-about-businesses { --custom-vwu: 11.2px; --custom-vhu: clamp(5.2px, 1svh, 8.35px); } }
@media (max-width: 1024px) { .custom-about-businesses { --custom-vwu: 9.2px; --custom-vhu: clamp(5.2px, 1svh, 8px); } }
@media (max-width: 860px)  { .custom-about-businesses { --custom-vwu: 7.7px; --custom-vhu: clamp(5.2px, 1svh, 7.8px); } }
@media (max-width: 640px)  { .custom-about-businesses { --custom-vwu: 4.2px; --custom-vhu: clamp(5.2px, 1svh, 7.6px); } }
@media (max-width: 380px)  { .custom-about-businesses { --custom-vwu: 3.6px; --custom-vhu: clamp(5.2px, 1svh, 7.2px); } }

/* ------------------------------------------------------------------ */
/* 1.0.7 — the heading scales like the design until a size is typed    */
/* (app.css:237 .h-sec, 291 .lead, 3015-3016; about-us.css head gaps)  */
/* ------------------------------------------------------------------ */
.custom-about-businesses__head {
	margin-bottom: min(clamp(32px, calc(4.5 * var(--custom-vwu)), 64px), calc(4.4 * var(--custom-vhu)));
}

.custom-about-businesses__title {
	font-size: min(clamp(28px, calc(3.9 * var(--custom-vwu)), 56px), calc(6.2 * var(--custom-vhu)));
}

.custom-about-businesses__intro {
	font-size: clamp(16px, calc(1.25 * var(--custom-vwu)), 18px);
	line-height: 1.7;
	margin-top: min(22px, calc(2.4 * var(--custom-vhu)));
}

@media (max-width: 640px) {
	.custom-about-businesses__title {
		font-size: clamp(22px, calc(6.2 * var(--custom-vwu)), 56px);
	}

	.custom-about-businesses__intro {
		font-size: 14px;
		line-height: 1.5;
		margin-top: 14px;
	}
}

/* 1.0.7 — the band's padding scales like the design until one is typed
   (app.css:385-389 .sec--rhythm, 2889-2900 --pad) */
.custom-about-businesses {
	--custom-pad: 90px;
	padding: min(clamp(52px, calc(8.6 * var(--custom-vwu)), 160px), calc(13.7 * var(--custom-vhu))) var(--custom-pad);
}
@media (max-width: 1024px) { .custom-about-businesses { --custom-pad: 40px; } }
@media (max-width: 640px)  { .custom-about-businesses { --custom-pad: 24px; } }