/*
 * About - Messages.
 *
 * Read from cp-all-designer css/about-us-message.css (.msgs, .msgc) and the
 * tokens of css/app.css it uses.
 *
 * 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,
 * through the two numbers below (app.css:127-128, 2889-2900).
 */

.custom-about-messages {
	--custom-vwu: 14.4px;
	--custom-vhu: clamp(5.2px, 1svh, 9px);
	--custom-pad: 90px;
	/* about-us-message.css:16-27 — the cards' lighter shadow, and their least height */
	--custom-msg-sh: 0 14px 34px -22px rgba(22, 65, 140, 0.18);
	--custom-msg-h: clamp(290px, calc(27 * var(--custom-vwu)), 380px);
	--custom-curl: clamp(56px, calc(6 * var(--custom-vwu)), 96px);
	--custom-curl-sm: clamp(30px, calc(3.2 * var(--custom-vwu)), 50px);
	position: relative;
	display: block;
	box-sizing: border-box;
	overflow: hidden;
	isolation: isolate;
	/* app.css:385-389 .sec--rhythm, .container --pad */
	padding: min(clamp(52px, calc(8.6 * var(--custom-vwu)), 160px), calc(13.7 * var(--custom-vhu))) var(--custom-pad);
	background-color: #FFFFFF;
	letter-spacing: normal;
}

@media (max-width: 1280px) { .custom-about-messages { --custom-vwu: 12.2px; --custom-vhu: clamp(5.2px, 1svh, 8.5px); } }
@media (max-width: 1200px) { .custom-about-messages { --custom-vwu: 11.2px; --custom-vhu: clamp(5.2px, 1svh, 8.35px); } }
@media (max-width: 1024px) { .custom-about-messages { --custom-vwu: 9.2px; --custom-vhu: clamp(5.2px, 1svh, 8px); --custom-pad: 40px; } }
@media (max-width: 860px)  { .custom-about-messages { --custom-vwu: 7.7px; --custom-vhu: clamp(5.2px, 1svh, 7.8px); } }
@media (max-width: 640px)  { .custom-about-messages { --custom-vwu: 4.2px; --custom-vhu: clamp(5.2px, 1svh, 7.6px); --custom-pad: 24px; } }
@media (max-width: 380px)  { .custom-about-messages { --custom-vwu: 3.6px; --custom-vhu: clamp(5.2px, 1svh, 7.2px); } }

.custom-about-messages *,
.custom-about-messages *::before,
.custom-about-messages *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* The leaves — about-us-message.css:46-86                             */
/* ------------------------------------------------------------------ */

.custom-about-messages__leaves {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.custom-about-messages__leaf {
	position: absolute;
	display: block;
	width: var(--custom-lf-w);
	height: auto;
	color: #00428F;
	opacity: 0.2;
}

.custom-about-messages__leaf path {
	fill: currentColor;
}

.custom-about-messages__leaf--a {
	--custom-lf-w: clamp(170px, calc(21 * var(--custom-vwu)), 340px);
	top: 2%;
	left: -5%;
	transform: rotate(-16deg);
	-webkit-mask-image: linear-gradient(126deg, #000 6%, rgba(0, 0, 0, 0.34) 50%, transparent 84%);
	        mask-image: linear-gradient(126deg, #000 6%, rgba(0, 0, 0, 0.34) 50%, transparent 84%);
}

.custom-about-messages__leaf--b {
	--custom-lf-w: clamp(130px, calc(15 * var(--custom-vwu)), 250px);
	top: 22%;
	right: -4%;
	transform: rotate(148deg);
	-webkit-mask-image: linear-gradient(58deg, #000 6%, rgba(0, 0, 0, 0.32) 50%, transparent 86%);
	        mask-image: linear-gradient(58deg, #000 6%, rgba(0, 0, 0, 0.32) 50%, transparent 86%);
}

.custom-about-messages__leaf--c {
	--custom-lf-w: clamp(160px, calc(19 * var(--custom-vwu)), 300px);
	right: -6%;
	bottom: -4%;
	transform: rotate(198deg);
	-webkit-mask-image: linear-gradient(118deg, #000 8%, rgba(0, 0, 0, 0.3) 52%, transparent 86%);
	        mask-image: linear-gradient(118deg, #000 8%, rgba(0, 0, 0, 0.3) 52%, transparent 86%);
}

.custom-about-messages__leaf--d {
	--custom-lf-w: clamp(100px, calc(11 * var(--custom-vwu)), 180px);
	bottom: 6%;
	left: 2%;
	transform: rotate(22deg);
	-webkit-mask-image: linear-gradient(202deg, #000 8%, rgba(0, 0, 0, 0.3) 52%, transparent 86%);
	        mask-image: linear-gradient(202deg, #000 8%, rgba(0, 0, 0, 0.3) 52%, transparent 86%);
}

@media (max-width: 1000px) { .custom-about-messages__leaf--d { display: none; } }
@media (max-width: 620px)  { .custom-about-messages__leaf--b { display: none; } }

/* ------------------------------------------------------------------ */
/* The stack and the card — about-us-message.css:88-216                */
/* ------------------------------------------------------------------ */

.custom-about-messages__stack {
	position: relative;
	z-index: 1;
	display: block;
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}

.custom-about-messages__card {
	margin: 0;
}

.custom-about-messages__card + .custom-about-messages__card {
	margin-top: clamp(28px, calc(3 * var(--custom-vwu)), 54px);
}

.custom-about-messages__inner {
	position: relative;
	display: grid;
	grid-template-columns: 0.66fr 1fr;
	align-items: stretch;
	min-height: var(--custom-msg-h);
	overflow: hidden;
	border: 1px solid rgba(22, 65, 140, 0.07);
	border-radius: var(--custom-curl) 0 var(--custom-curl) 0;
	background: #FFFFFF;
	box-shadow: var(--custom-msg-sh);
}

/* the portrait stands whole on the frame's bottom edge; the frame carries the
   studio backdrop of the demo's photographs on out to its sides */
.custom-about-messages__photo {
	position: relative;
	min-height: 0;
	margin: 0;
	background: linear-gradient(180deg, #D5D5D5 0%, #DBDBDB 12.5%, #EDEDED 15%, #FCFCFC 17.5%, #F8F8F8 27.5%, #F2F2F2 30%, #EFEFEF 32.5%, #F7F7F7 35%, #FCFCFC 37.5%, #EFEFEF 45%, #E7E7E7 47.5%, #F4F4F4 50%, #FDFDFD 52.5%, #F6F6F6 57.5%, #E3E3E3 60%, #D0D0D0 62.5%, #CDCDCD 65%, #D3D3D3 70%, #CDCDCD 82.5%, #CACACA 85%, #D0D0D0 87.5%, #D4D4D4 90%, #CDCDCD 97.5%, #CACACA 100%);
}

.custom-about-messages__photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: contain;
	object-position: 50% 100%;
}

.custom-about-messages__photo.is-empty {
	min-height: clamp(240px, calc(26 * var(--custom-vwu)), 380px);
}

.custom-about-messages__body {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(16px, calc(1.7 * var(--custom-vwu)), 26px);
	padding: clamp(26px, calc(2.9 * var(--custom-vwu)), 46px) clamp(24px, calc(2.6 * var(--custom-vwu)), 42px);
	background: #FFFFFF;
}

.custom-about-messages__quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	quotes: none;
}

.custom-about-messages__quote::before,
.custom-about-messages__quote::after {
	content: none;
}

.custom-about-messages__quote p {
	margin: 0;
	font-size: clamp(16px, calc(1.32 * var(--custom-vwu)), 20px);
	font-weight: 300;
	font-style: normal;
	line-height: 1.78;
	letter-spacing: 0;
	color: #10305F;
}

.custom-about-messages__quote p + p {
	margin-top: 1em;
}

.custom-about-messages__by {
	display: flex;
	align-items: center;
	gap: clamp(14px, calc(1.6 * var(--custom-vwu)), 24px);
	padding-top: clamp(16px, calc(1.8 * var(--custom-vwu)), 26px);
	border-top: 1px solid rgba(22, 65, 140, 0.16);
	font-size: 16px;
	line-height: 1.6;
}

.custom-about-messages__sig {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	height: clamp(38px, calc(3.6 * var(--custom-vwu)), 54px);
	opacity: 0.85;
}

.custom-about-messages__who {
	display: grid;
	gap: 3px;
}

.custom-about-messages__name {
	font-size: clamp(16px, calc(1.2 * var(--custom-vwu)), 18px);
	font-weight: 600;
	line-height: 1.35;
	color: #16418C;
}

.custom-about-messages__role {
	font-size: clamp(12px, calc(0.95 * var(--custom-vwu)), 14px);
	font-weight: 300;
	line-height: 1.4;
	color: #64748B;
}

/* a card with its portrait on the right: the grid is set the other way and
   the curl turns with it; the markup stays portrait-first */
.custom-about-messages__card--flip .custom-about-messages__inner {
	grid-template-columns: 1fr 0.66fr;
	border-radius: 0 var(--custom-curl) 0 var(--custom-curl);
}

.custom-about-messages__card--flip .custom-about-messages__body  { grid-column: 1; grid-row: 1; }
.custom-about-messages__card--flip .custom-about-messages__photo { grid-column: 2; grid-row: 1; }

@media (max-width: 1024px) {
	.custom-about-messages__inner { grid-template-columns: 0.78fr 1fr; }
	.custom-about-messages__card--flip .custom-about-messages__inner { grid-template-columns: 1fr 0.78fr; }
}

/* one column: the portrait back on top for every card */
@media (max-width: 860px) {
	.custom-about-messages__inner,
	.custom-about-messages__card--flip .custom-about-messages__inner {
		grid-template-columns: 1fr;
		border-radius: var(--custom-curl-sm) 0 var(--custom-curl-sm) 0;
	}

	.custom-about-messages__card--flip .custom-about-messages__photo { grid-column: 1; grid-row: 1; }
	.custom-about-messages__card--flip .custom-about-messages__body  { grid-column: 1; grid-row: 2; }

	.custom-about-messages__photo { aspect-ratio: 4 / 3; }
	.custom-about-messages__photo.is-empty { min-height: 0; }

	.custom-about-messages__card + .custom-about-messages__card {
		margin-top: clamp(22px, calc(2.4 * var(--custom-vwu)), 34px);
	}
}

@media (max-width: 620px) {
	.custom-about-messages__photo { aspect-ratio: 3 / 2; }
	.custom-about-messages__by { flex-wrap: wrap; }
}

.custom-about-messages__hint {
	margin: 0;
	font-size: 13px;
	color: #64748B;
}