/* About page template. Loaded only with about-page.php. */
body.page-template-about-page{background:#f1f2ff}.about-page{overflow:hidden;background:#f1f2ff;color:#20232a}.about-hero{position:relative;min-height:570px;background:#030405;color:#fff}.about-hero__image,.about-hero__overlay{position:absolute;inset:0;width:100%;height:100%}.about-hero__image{object-fit:cover}.about-hero__overlay{background:linear-gradient(90deg,transparent 34%,rgba(0,0,0,.72) 67%,#000 100%)}.about-hero__inner{position:relative;z-index:1;min-height:570px;display:flex;align-items:center;padding:45px 90px}.about-hero__content{width:min(430px,42%);margin-right:auto;font-size:15px;line-height:2}.about-hero__content h1,.about-hero__content h2{margin:0 0 15px;font-size:27px;line-height:1.55}.about-hero__content p{margin:0}.about-button{display:inline-flex;align-items:center;justify-content:center;margin-top:28px;min-width:130px;height:40px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.09);color:#fff;font-size:12px}.about-section{background:#f1f2ff}.about-section__inner{padding:58px 45px;text-align:center}.about-heading{margin:0 0 20px;font-size:25px;line-height:1.6}.about-heading span{color:#1687e4;margin-left:5px}.about-description{max-width:980px;margin:0 auto 28px;font-size:14px;line-height:2}.about-description p{margin:0}.about-icon-grid{display:grid;margin:30px auto 0}.about-icon-grid--beyond{grid-template-columns:repeat(7,1fr)}.about-icon-grid--coverage{grid-template-columns:repeat(6,1fr);max-width:980px}.about-icon-card{min-height:145px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;border:1px solid #d9dceb;color:#20232a;padding:18px}.about-icon-card img{width:42px;height:42px;object-fit:contain}.about-icon-card strong{font-size:15px;line-height:1.6}.about-editorial__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:80px;padding:70px 45px}.about-editorial__content{text-align:right}.about-editorial__content .about-heading{margin-bottom:18px}.about-editorial__content .about-description{margin:0 0 25px}.about-editorial__item{padding:10px 15px 10px 0;border-right:2px solid #138ae7}.about-editorial__item h3{margin:0 0 5px;font-size:15px}.about-editorial__item div{font-size:12px;line-height:1.9}.about-editorial__item p{margin:0}.about-editorial__image{width:100%;height:430px;object-fit:cover}.about-timeline{display:grid;grid-template-columns:repeat(4,1fr);direction:ltr;margin-top:40px;text-align:right}.about-timeline__item{position:relative;direction:rtl;padding:0 15px}.about-timeline__year{color:#1687e4;font-weight:700;font-size:18px}.about-timeline__item>span{display:block;position:relative;height:24px;border-bottom:1px solid #d8dbea}.about-timeline__item>span:after{content:"";position:absolute;right:0;bottom:-5px;width:10px;height:10px;border-radius:50%;background:#0874c7}.about-timeline__item h3{font-size:15px;margin:20px 0 6px}.about-timeline__item p{margin:0;font-size:12px;line-height:1.9}.about-family__logos{display:flex;align-items:center;justify-content:center;gap:65px;margin:28px auto 50px}.about-family__logos a{display:block}.about-family__logos img{width:140px;height:75px;object-fit:contain}
@media(max-width:767px){body.page-template-about-page .mobile-header--dark{background:#000;color:#fff;border:0}.about-hero,.about-hero__inner{min-height:520px}.about-hero__image{object-position:72% center}.about-hero__overlay{background:linear-gradient(180deg,rgba(0,0,0,.88),rgba(0,0,0,.12) 58%,rgba(0,0,0,.45))}.about-hero__inner{align-items:flex-start;padding:45px 18px}.about-hero__content{width:100%;font-size:11px;text-align:center}.about-hero__content h1,.about-hero__content h2{font-size:18px;margin-bottom:8px}.about-button{margin-top:15px;min-width:105px;height:35px;font-size:10px}.about-section__inner{padding:42px 12px}.about-heading{font-size:18px;margin-bottom:12px}.about-description{font-size:11px;line-height:1.9;margin-bottom:20px}.about-icon-grid--beyond{grid-template-columns:repeat(2,1fr)}.about-icon-grid--beyond .about-icon-card:last-child:nth-child(odd){grid-column:1/-1;width:50%;justify-self:center}.about-icon-grid--coverage{grid-template-columns:repeat(2,1fr);gap:8px}.about-icon-card{min-height:116px;padding:10px;gap:10px}.about-icon-grid--coverage .about-icon-card{min-height:50px;flex-direction:row;border-color:#d7daeb}.about-icon-card img{width:32px;height:32px}.about-icon-card strong{font-size:12px}.about-editorial__grid{display:flex;flex-direction:column;gap:24px;padding:42px 12px}.about-editorial__content{width:100%}.about-editorial__content .about-heading{text-align:center}.about-editorial__item{padding-right:10px}.about-editorial__item h3{font-size:12px}.about-editorial__item div{font-size:10px}.about-editorial__image{height:250px}.about-timeline{display:flex;flex-direction:column;margin-top:20px;gap:18px}.about-timeline__item{padding-right:28px}.about-timeline__item>span{position:absolute;right:8px;top:4px;width:1px;height:100%;border:0;background:#d8dbea}.about-timeline__item>span:after{right:-4px;top:0}.about-timeline__year{font-size:14px}.about-timeline__item h3{font-size:12px;margin:5px 0}.about-timeline__item p{font-size:10px}.about-family__logos{gap:20px;margin-bottom:25px}.about-family__logos img{width:85px;height:55px}}

/* Visual alignment with the supplied desktop and mobile compositions. */
.about-page,
.about-page *,
.about-page *::before,
.about-page *::after {
	box-sizing: border-box;
}

.about-hero,
.about-hero__inner {
	min-height: 645px;
}

.about-section__inner {
	padding-top: 72px;
	padding-bottom: 72px;
}

.about-editorial__grid {
	padding-top: 82px;
	padding-bottom: 82px;
}

.about-timeline {
	direction: rtl;
}

.about-timeline__item {
	direction: rtl;
}

.about-family__logos {
	direction: ltr;
}

@media (max-width: 767px) {
	.about-page .ut-container {
		width: 100%;
		max-width: 100%;
	}

	.about-hero,
	.about-hero__inner {
		min-height: 755px;
	}

	.about-hero__image {
		object-position: 68% center;
	}

	.about-hero__inner {
		padding: 50px 20px 32px;
	}

	.about-hero__content {
		width: 100%;
		max-width: 335px;
		margin: 0 auto;
		font-size: 11px;
		line-height: 1.95;
		text-align: right;
	}

	.about-hero__content h1,
	.about-hero__content h2 {
		font-size: 19px;
		line-height: 1.6;
	}

	.about-button {
		display: flex;
		width: max-content;
		margin: 18px auto 0;
	}

	.about-section__inner {
		padding: 58px 8px;
	}

	.about-heading {
		font-size: 19px;
	}

	.about-description {
		max-width: 350px;
		font-size: 11px;
	}

	.about-icon-grid--beyond {
		width: 100%;
		margin-top: 30px;
	}

	.about-icon-grid--beyond .about-icon-card {
		min-height: 156px;
	}

	.about-icon-grid--beyond .about-icon-card:last-child:nth-child(odd) {
		width: 50%;
	}

	.about-editorial__grid {
		width: 100%;
		padding: 62px 8px;
		gap: 32px;
	}

	.about-editorial__content,
	.about-editorial__image {
		max-width: 100%;
	}

	.about-editorial__content .about-description {
		max-width: none;
	}

	.about-editorial__item {
		margin-top: 10px;
	}

	.about-coverage .about-section__inner {
		padding-top: 58px;
		padding-bottom: 62px;
	}

	.about-icon-grid--coverage {
		width: 100%;
	}

	.about-journey .about-section__inner {
		padding-top: 62px;
		padding-bottom: 66px;
	}

	.about-timeline {
		width: 100%;
		gap: 26px;
		text-align: right;
	}

	.about-timeline__item {
		min-width: 0;
		padding-left: 8px;
	}

	.about-family__logos {
		width: 100%;
		gap: 14px;
	}

	.about-family__logos a {
		min-width: 0;
		flex: 1 1 0;
	}

	.about-family__logos img {
		max-width: 100%;
	}
}

/* The desktop composition places the navigation and copy over the image. */
@media (min-width: 768px) {
	body.page-template-about-page .main-header {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		background: transparent;
	}

	body.admin-bar.page-template-about-page .main-header {
		top: var(--wp-admin--admin-bar--height, 32px);
	}

	body.page-template-about-page .site-header {
		background: transparent !important;
	}

	.about-hero,
	.about-hero__inner {
		min-height: 736px;
	}

	.about-hero__image {
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		width: min(71.4%, 1028px);
		height: 100%;
		object-fit: cover;
		object-position: right center;
	}

	.about-hero__overlay {
		background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .86) 24%, transparent 56%);
	}

	.about-hero__inner {
		padding: 45px 115px 45px 93px;
	}

	.about-hero__content {
		width: 410px;
		margin-right: auto;
		font-size: 15px;
		line-height: 1.55;
		transform: translateY(44px);
	}

	.about-hero__content > p:first-child {
		margin-bottom: 24px;
		font-size: 25px;
		line-height: 1.8;
	}

	.about-button {
		min-width: 148px;
		height: 42px;
		margin-top: 24px;
		font-size: 14px;
	}
}

@media (max-width: 767px) {
	.about-hero__content {
		font-size: 13px;
	}

	.about-hero__content > p:first-child {
		margin-bottom: 14px;
		font-size: 19px;
		line-height: 1.7;
	}

	.about-hero__image {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-position: 74% center;
	}

	.about-hero__overlay {
		background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .95) 23%, rgba(0, 0, 0, .15) 46%, transparent 75%);
	}
}

@media (min-width: 768px) and (max-width: 1000px) {
	.about-hero__inner {
		padding-left: 40px;
	}

	.about-hero__content {
		width: min(390px, 45vw);
	}
}

/* Coverage cards from the supplied design. */
.about-icon-grid--coverage {
	gap: 10px;
}

.about-icon-grid--coverage .about-icon-card {
	background: #f6f7fb;
	border-color: #d9dce3;
	transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.about-icon-grid--coverage .about-icon-card img {
	transition: filter 180ms ease;
}

.about-icon-grid--coverage .about-icon-card:hover,
.about-icon-grid--coverage .about-icon-card:focus-visible {
	background: radial-gradient(ellipse at 90% 5%, #22558f 0%, #00397e 72%);
	border-color: #00397e;
	color: #fff;
}

.about-icon-grid--coverage .about-icon-card:hover img,
.about-icon-grid--coverage .about-icon-card:focus-visible img {
	filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
	.about-icon-grid--coverage {
		gap: 8px;
	}
}

/* Mobile composition from the supplied reference. */
@media (max-width: 767px) {
	body.page-template-about-page .mobile-header {
		height: 56px;
	}

	.about-hero {
		height: 739px;
		min-height: 739px;
		overflow: hidden;
		background: linear-gradient(180deg, #000 0%, #000 48%, #c8ccd4 100%);
	}

	.about-hero__inner {
		min-height: 739px;
		padding: 58px 14px 28px;
	}

	.about-hero__image {
		top: 248px;
		right: -17%;
		bottom: auto;
		left: auto;
		width: max(170%, 620px);
		max-width: none;
		height: auto;
		object-fit: contain;
		-webkit-mask-image: linear-gradient(180deg, transparent, #000 40px);
		mask-image: linear-gradient(180deg, transparent, #000 40px);
	}

	.about-hero__overlay {
		background: linear-gradient(180deg, #000 0%, #000 24%, transparent 34%);
	}

	.about-hero__content {
		width: 100%;
		max-width: none;
		margin: 0;
		font-size: 14px;
		line-height: 1.6;
		text-align: right;
	}

	.about-hero__content > p:first-child {
		margin-bottom: 20px;
		font-size: 20px;
		line-height: 1.7;
	}

	.about-button {
		width: 160px;
		min-width: 160px;
		height: 45px;
		margin: 26px auto 0;
		font-size: 13px;
	}
}

/* Journey timeline from the supplied composition. */
.about-journey {
	background: #fff;
}

.about-journey .about-heading {
	color: #3086ff;
}

.about-journey .about-heading span {
	color: #101114;
}

@media (min-width: 768px) {
	.about-journey .about-timeline {
		margin-top: 50px;
		text-align: center;
	}

	.about-journey .about-timeline__item {
		padding: 0 12px;
		text-align: center;
	}

	.about-journey .about-timeline__year {
		color: #3086ff;
		font-size: 20px;
		line-height: 24px;
	}

	.about-journey .about-timeline__item > span {
		width: 16px;
		height: 16px;
		margin: 4px auto 32px;
		border: 0;
		border-radius: 50%;
		background: #00397e;
		z-index: 1;
	}

	.about-journey .about-timeline__item > span::after {
		content: none;
	}

	.about-journey .about-timeline__item:not(:last-child)::before {
		content: '';
		position: absolute;
		top: 35px;
		right: calc(50% + 24px);
		width: calc(100% - 48px);
		height: 2px;
		background: #f0f0f0;
	}

	.about-journey .about-timeline__item h3 {
		margin: 0 0 5px;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.6;
	}

	.about-journey .about-timeline__item > div:last-child {
		max-width: 250px;
		margin: 0 auto;
		color: #4c5365;
	}

	.about-journey .about-timeline__item p {
		font-size: 14px;
		line-height: 1.55;
	}
}
